网页设计试验2,3.docVIP

实验二 网页表格的处理 一．实验目的： 通过本实验，使学生熟悉表格的基本操作和如何利用表格进行页面布局的方法。 二．实验要求： 1. 掌握在页面中创建、编辑表格、设置表格属性的方法； 2. 掌握利用表格技术对页面进行布局的方法。 三．实验内容: 1. 创建一个嵌套表格，在表格中添加文字和图片; 2. 利用表格的属性面板设置表格属性; 3. 使用布局视图设置网页布局. 四．试验环境 Windows系统 + Dreamweaver CS3 五．试验步骤：（选其中一个项目写，附上必要的过程截图与结果图） 试验项目：制作P88 图3-34效果网页 1.打开Dreamweaver CS3软件，新建站点，名称为“2”，打开操作界面 2.单击“常用”栏中“图像”按钮，插入图片，调整图片大小，回车，在“常用”插入栏的表格按钮单击，插入两行13列的表格，选中第二列，右击，在弹出的菜单中单击“表格”下的“合并单元格”，选中第一行，在“属性”面板中设置表格的背景颜色，并将“边框”设置为1 保持第一行被选中状态，按F9打开“标签table”面板，设置边框颜色值为#32647E，在第一行输入导航文字，在CSS面板中单击新建样式按钮，创建文字样式，名称为“.yaya”，确定后，在淡出对话框中设置字体颜色为白色，大小为12像素，保存文档，按F12预览即导航创建完成 3.在下一行插入图片，然后输入文字，然后进行具体表格布局设计 4..单击“常用”插入栏上的表格图标，在弹出的“表格”对话框中创建一个1行3列，宽为570像素的表格table1.,在第一列中插入3行一列的表格table2，表格宽度为347像素，将光标定在table2的第一行单元格，打开“属性”面板，单击背景框右侧的浏览文件按钮，添加相应的图片3.4/bgall.gif，设置“高”为32；将光标定位在table2的第3行单元格，单击“常用”插入栏中的图像按钮，选择图片文件3.4/b_l.gif插入到单元格中；将光标定位到table2的第2行单元格，任意按几次回车增加单元格高度，打开“属性”面板，单击背景框右侧的浏览文件按钮，添加相应的图片3.4/bg_d12.gi设置为单元格背景，第一列表格基本完成。 5.光标定位在table1的第3列单元格中，单击“常用”插入栏上的表格图标，在弹出的“表格”对话框中设置一个3行1列，宽193像素的表格table3，边框值为0像素；光标定位在table3的第一行单元格中，单击“常用”插入栏中的图像按钮，选择图片文件f插入到单元格中；将光标定位在表格table3的第2行单元格中，单击背景框右侧的浏览文件按钮，添加相应的图片3.4/t_1.gif设置为单元格背景；将光标定位在table3的第2行单元格中，打开“属性”面板，单击背景框右侧的浏览文件按钮，添加相应的图片3.4/t_2.gif为单元格背景；将光标定位在表格table3的第3行单元格中，任意按几次回车增加单元格高度与左侧表格2相同位置，打开单元格“属性”面板，在“背景颜色”文本框中输入颜色值#F1F1F1。即得到如下表格效果： 6.输入标题文字，光标定位在表格table2的第1行单元格，打开“属性”面板“垂直”下拉列表选项设置为“底部”，把输入法调至全角状态，按4个空格键后输入“文史纵横”；设置字体样式和颜色，单击“属性”面板中的“文本颜色”按钮，待鼠标变成吸管时取色；用同样的方法在table3的第1行单元格中输入栏目标题进行设置 ；将光标定位在table2的第2行单元格中，单击“常用”插入栏上的表格图标，创建一个3行1列，宽100%的表格table4；将光标定位在table4的第行单元格中，插入一个1行1列宽100%的表格table5，并在“属性”面板“填充”文本框中输入20. 在表格table5中输入文字内容，并设置文字样式，；将光标定位在table4的第2行单元格中，单击“常用”插入栏中的图像按钮，选择图片文件3.4/dot.gif插入到单元格中，返回单元格“属性”面板，将单元格高度设为2像素，并到“代码”视图中将此单元格中的nbsp;（空格）删除。 将光标定位到table4的第3行单元格中. 单击“常用”插入栏上的表格图标，创建一个。1行1列，宽100%的表格table6，边框值为0像素，并在“属性”面板中“填充”文本框中输入15；将光标定位到table6中，单击“常用”插入栏中的图像按钮，选择图片文件3.4/tp1.gif插入到单元格中，在“属性”面板中作如下设置 输入文字并作样式设计，按F12预览效果 7.右侧栏目文字与图像添加 光标定位到table3的第3行单元格中. 单击“常用”插入栏上的表格图标，创建一个。1行1列，宽100%的表格table7，边框值为0像素，并在“属