13.5.3 案例制作

285 13.5.2 案例设计

本案例设计流程如图13-220所示。

图13-220

13.5.3 案例制作

1．制作导航部分

（1）选择“文件 > 新建”命令，新建空白文档。选择“文件 > 保存”命令，弹出“另存为”对话框。在“保存在”选项的下拉列表中选择当前站点目录保存路径，在“文件名”选项的文本框中输入“index ”，单击“保存”按钮，返回网页编辑窗口。

（2）选择“修改 > 页面属性”命令，弹出“页面属性”对话框，在对话框中进行设置，如图13-221所示，单击“确定”按钮，在“插入”面板“常用”选项卡中单击“表格”按钮，在弹出的“表格”对话框中进行设置，如图13-222所示，单击“确定”按钮，保持表格的选取状态，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐”选项，效果如图13-223所示。

图13-221 图

13-222

图13-223

286 （3）选择“窗口 > CSS 样式”面板，弹出“CSS 样式”面板，单击面板下方的“新建CSS 规则”按钮，在弹出的对话框中进行设置，如图13-224所示，单击“确定”按钮，弹出“.bg1的CSS 规则定义”对话框，在“分类”选项列表中选择“背景”选项，单击“Background-image ”选项右侧的“浏览”按钮，在弹出的“选择图像源文件”对话框中选择光盘目录下“Ch13 > 素材 > 戏曲艺术网页 > images ”文件夹中的“bg.jpg ”文件，单击“确定”按钮，如图13-225所示，单击“确定”按钮，完成设置。

图13-224 图13-225 （4）将光标置入到表格中，在“属性”面板“垂直”选项的下拉列表中选择“顶端”选项，将“高”选项设为“600”，在“目标规则”选项下拉列表中选择“.bg1”，如图13-226所示，应用样式后，表格效果如图13-227所示。

图13-226 图13-227 （5）在“插入”面板“常用”选项卡中单击“表格”按钮

，在弹出的“表格”对话框中进行设置，如图13-228所示，单击“确定”按钮，保持表格的选取状态，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐”选项，效果如图13-229所示。

图13-228 图13-229

本文来源：https://www.bwwdw.com/article/nftl.html