![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
5.7 新手训练营
练习1:使用Web字体
{L-End} downloads\5\新手训练营\使用Web字体
提示:首先,新建空白文档,执行【插入】|Div命令,在弹出的【插入Div】对话框中,将ID设置为box,并单击【新建CSS规则】按钮,定义Div标签的CSS规则。在Div标签中输入文本,在【属性】面板中的HTML和CSS选项卡中,分别设置文本的字体样式;并在【代码】视图中,为字体添加空格符号。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00461.jpg?sign=1738934544-pcUSKazJVGIFrIJZYiAwl9hL6nxhIMDt-0-904c1dd4a8300bfb143755324023af35)
然后,执行【修改】|【管理字体】命令,在弹出的【管理字体】对话框中,激活【本地Web字体】选项卡。单击【TIF字体】右侧的【浏览】按钮,添加字体文件。同时,启用【我已经对以上字体进行了正确许可,可以用于网站】复选框,并单击【添加】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00462.jpg?sign=1738934544-XQnEgnXDZGGwTk4nMV3tDBFHvvrkzAXh-0-0883001690572c5de8ac457280640b09)
执行【窗口】|【CSS设计器】命令,在打开的【CSS设计器】面板中,单击【添加选择器】按钮,添加.font01选择器,并定义其字体样式。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00463.jpg?sign=1738934544-mqECIncw7XZn52vDXsuT6VHBcqc0MAO8-0-62c6e3e061e049caad216ca6803810f0)
最后,选中所有文本,在【属性】面板中将【类】设置为font01,并在【实时视图】视图中查看最终效果。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00464.jpg?sign=1738934544-bIdLJgQZaphRMVqv0vQrAbJeMnFDI9Og-0-8d57a3cd0dd22e3ecea62c8681cfe3fb)
练习2:制作数学试题网页
{L-End} downloads\5\新手训练营\数学试题网页
提示:首先,新建空白文档,在【属性】面板中单击【页面属性】按钮,在【页面属性】对话框中将【背景颜色】设置为#D6DBF1。同时,执行【插入】|【表格】命令,插入一个4行×1列的表格,并设置表格的属性。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00465.jpg?sign=1738934544-4AMvvuUV3InULw63foy5u9O55s8XDODC-0-d621b00f726cbcd196b6ddd8a6a04c54)
然后,在表格的第2行单元格中,插入一个【行】为7、【列】为1、【宽度】为100%、【边框】为0、【单元格间距】为5、【单元格边距】为1的表格,并逐行输入相应的文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00466.jpg?sign=1738934544-6ZnkzGSLg4JtFPt3ObMVcZNj55jCPXcd-0-5e572110f1e848b5f02aa4b0e1f98448)
最后,在表格的第3行单元格中,插入一个表格并设置其【行】为5;【列】为2;【宽】为100%;【边框】为0;【填充】为5;【单元格间距】为1。然后,在各单元格中输入相应的文本并设置其格式。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00467.jpg?sign=1738934544-EyrZgULD3ixCjplPSOx8fwUhEGqlCFKN-0-93297e63b737c779cf1b33e917ff00f6)
练习3:制作大学生辩论赛页
{L-End} downloads\5\新手训练营\大学生辩论赛页
提示:首先,新建空白文档,执行【插入】|Div命令,在弹出的【插入Div】对话框中,将ID设置为box,并单击【新建CSS规则】按钮,定义Div标签的CSS规则。
#box { background-image:url(11.jpg); background-repeat: no-repeat; height: 897px; width: 1321px; margin-top: auto; margin-right: 100px; margin-bottom: auto; margin-left: auto; padding-top: 70px; padding-right: 70px; padding-bottom: 60px; padding-left: 90px; }
然后,在Div标签之间输入标题文本,并设置文本的字体格式。同时,在文本下一行中插入一个8行× 1列的表格,并设置表格的属性。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00468.jpg?sign=1738934544-ppbwEvqE9w8u3vXbuL1J5zH75iQy8kpJ-0-b78f3bc77a25efb92439ce0cb590cb39)
最后,在表格中输入文本,并设置文本的字体格式。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00469.jpg?sign=1738934544-hZsVwLFEyn7TfR8Ycjyp3jTq3DXEHatm-0-134968bf26c644ecba351ed069d39ead)