chapter3课件(利用表格设计和制作网页)

《chapter3课件(利用表格设计和制作网页)》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网页实训——利用表格设计和制作网页·4·第3单元利用表格设计和制作网页实训目标网页实训——利用表格设计和制作网页·4·F　调整第2个外表格各单元格的宽度，效果如图6.28所示。操作步骤如下：（1）将插入点置于第1个单元格中，将单元格的宽度设置为130像素。（2）将第1个单元格拆分为2行，其中第2行单元格的高度设置为60像素，并将“用户登录”图像置于第2行单元格中。在单元格属性面板的“水平”下拉列表框中选择“右对齐”。　设置单元格属性前后的效果对照（3）将插入点置于第2个单元格中，将单元格的宽度设置为260

2、像素。F　设置第3个外表格及其内嵌表格的单元格属性，效果如图所示。操作步骤如下：　设置垂直对齐方式为“顶端”前后的效果对照（1）将第3个外表格的第1列的单元格的垂直对齐方式设置为“顶端”。（2）将第3个外表格的第2行第2列的单元格高度设置为136像素。（3）将的“未来都市”及“未来旅游”栏目表格中的第1行的行高均设置为30像素。F　为第4个外表格中的各单元格分别设置背景颜色，操作步骤如下：（1）将插入点置于第1行的单元格中，在属性面板的背景颜色文本框中直接输入事先设计好的颜色代码“#034A82”。（2）

3、同时选中表格的第2行和第3行，在属性面板的背景颜色文本框中直接输入事先设计好的颜色代码“#A8D4F0”。并将其行高分别设置为30像素和60像素。（3）将第3行单元格的“水平”对齐方式设置为“居中对齐”。网页实训——利用表格设计和制作网页·4·任务五、表格的高级应用技巧F　将第4个表格的第1行单元格制作水平线细线，效果如图所示。操作步骤如下：水平线细线（1）将插入点置于第4个表格的第1行单元格中。（2）在单元格属性面板的“高”文本框中输入2并在单元格中插入一个大小为1像素的spacer.gif透明图像。s

4、pacer.gif透明图像的制作方法为：（a）在菜单栏中选择“编辑”→“首选参数”命令，打开“首选参数”对话框，如图所示。（b）在“分类”列表中中选择“布局模式”，然后在对话框的右边单击创建按钮，打开“保存间隔图像文件为”对话框，Dreamweaver自动生成大小为1像素的spacer.gif图像，将其保存到本地站点的images文件夹下。“首选参数”对话框（c）在“首选参数”对话框中单击“确定”。（4）再选取第1行单元格，并将高度调整为5像素（大致和页眉上的横线高度相同）。F　将第1个表格中的内嵌导航栏

5、表格制作成立体导航栏表格，效果如图所示。操作步骤如下：立体导航栏表格（1）选中第1个表格中的内嵌导航栏表格，将边框设置为1，边框颜色设置为“#FFFFFF”。（2）在表格属性面板中单击快速标签编辑器按钮，在标签编辑框中添加代码“bordercolorlight="#333333"”。（3）按F12键，保存并预览网页。效果如图所示。网页实训——利用表格设计和制作网页·4·“标签编辑器-Table”对话框