Dreamweaver CC中文版网页设计与制作从新手到高手
上QQ阅读APP看书,第一时间看更新

5.7 新手训练营

练习1:使用Web字体

{L-End} downloads\5\新手训练营\使用Web字体

提示:首先,新建空白文档,执行【插入】|Div命令,在弹出的【插入Div】对话框中,将ID设置为box,并单击【新建CSS规则】按钮,定义Div标签的CSS规则。在Div标签中输入文本,在【属性】面板中的HTML和CSS选项卡中,分别设置文本的字体样式;并在【代码】视图中,为字体添加空格符号。

然后,执行【修改】|【管理字体】命令,在弹出的【管理字体】对话框中,激活【本地Web字体】选项卡。单击【TIF字体】右侧的【浏览】按钮,添加字体文件。同时,启用【我已经对以上字体进行了正确许可,可以用于网站】复选框,并单击【添加】按钮。

执行【窗口】|【CSS设计器】命令,在打开的【CSS设计器】面板中,单击【添加选择器】按钮,添加.font01选择器,并定义其字体样式。

最后,选中所有文本,在【属性】面板中将【类】设置为font01,并在【实时视图】视图中查看最终效果。

练习2:制作数学试题网页

{L-End} downloads\5\新手训练营\数学试题网页

提示:首先,新建空白文档,在【属性】面板中单击【页面属性】按钮,在【页面属性】对话框中将【背景颜色】设置为#D6DBF1。同时,执行【插入】|【表格】命令,插入一个4行×1列的表格,并设置表格的属性。

然后,在表格的第2行单元格中,插入一个【行】为7、【列】为1、【宽度】为100%、【边框】为0、【单元格间距】为5、【单元格边距】为1的表格,并逐行输入相应的文本。

最后,在表格的第3行单元格中,插入一个表格并设置其【行】为5;【列】为2;【宽】为100%;【边框】为0;【填充】为5;【单元格间距】为1。然后,在各单元格中输入相应的文本并设置其格式。

练习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列的表格,并设置表格的属性。

最后,在表格中输入文本,并设置文本的字体格式。