Dreamweaver CC网页设计与制作（3版） 课件 模块3 网页布局.pdfVIP

DDrreeaammwweeaavveerr CCCC网网页页设设计计 与与制制作作 （（33版版）） 模模块块33 课课件件 0011 模模块块11 网网页页基基础础知知识识 0022 模模块块22 初初级级应应用用 0033 模模块块33 网网页页布布局局 0044 模模块块44 高高级级应应用用 0055 模模块块55 网网站站的的测测试试与与发发布布 0066 模模块块66 综综合合应应用用 任务8 奋扬青春 ——表格布局页面 任任务务描描述述 通过布局 “奋扬青春 ”网页，学会使用 表格布局页面 的方法和技巧 任任务务解解析析 在本任务 中，需要完成 以下操作 ： 1.掌握表格 的创建方法和表格、单元格 的属性设置 ； 2.掌握嵌套表格 的创建方法和属性的设置 3.学会使用表格布局页面 的方法和技巧 具体操作 ： （1）将素材 中的renwu8文件夹复制到D盘根 目录 运行Dreamw eaver CC ，新建站点 “奋扬青 春 ”，站点文件夹为D :\renwu8 ，在站点根 目录下新建网页文件index.htm l；打开 “页面属性 ” 对话框 ，在 “外观 （css ）”分类选项卡 中设置背景颜色为#ccc ，左、上边距为0 ；在 “链接 ”分类 选项卡 中设置链接颜色为黑色，变换 图像链接颜色为红色，已访 问链接颜色为绿色，始终无下划线， 页面属性设置如 图3- 1所示 图3- 1 页面属性设置 具体操作 ： （2 ）选择 “插入→表格 (tab le) ”命令 ，设置表格大 为1行2列，表格宽度为1200像素，其他项 为0 ，如 图3- 1所示 ，单击 “确定”按钮插入表格 。 （3 ）单击表格 的边框线，选 中整个表格 ，在 “表格 ”属性面板 中设置 “对齐 ”为 “居 中对齐 ”， 如 图3-3所示 。 图3-2 “表格 ”对话框 图3-3 “表格 ”属性面板 具体操作 ： （4 ）将光标定位到表格第 1个单元格 中，在属性面板 中设置 度为 1000 ，选择 “插入→图像 ”命令 ，在打开 的 “选择 图像源文件 ”对话框 中选择 “renwu8_0 1.gif ”文件 ，单击 “确定 ”按钮插入 图像,如 图3-4所示 。 图3-4 第一个表格效果 （5 ）将光标定位到第2列单元格 ，在 “代码 ”视 图中为单元格添加背景 图像 “renwu8_02.gif ”；代码如 图 3-5所示 。再次光标定位该单元格 ，选择 “插入→表格 ”命令 ，设置表格大小为4行 1列 ，表格 度为 100% ， 其他项为0 ，单击 “确定 ”按钮插入嵌套表格tab 1；分别设置嵌套单元格 的第 1、2、3、4行行高为38 、40 、 40 、40 ，如 图3-6所示 。 图3-5 第2列单元格 的背景 图像代码 图3-6 第2列单元格 的嵌套表格 具体操作 ： （6 ）光标定位到嵌套表格 的第2行单元格 ，选择输入法 “ 键盘 ”中的 “特殊字符 ”项 ，在单元格 中输入 ◆， 然后在单元格 中输入文字 “设为首页 ”；同样 的方法 ，在第3行和第4行输入 “◆联系我们 ”和 “◆加入收藏 ”， 效果如 图3-7所示 。 图3-7 表格效果1 （7 ）将光标定位到表格 的后面或下一行 ，选择 “插入→表格 ”命令 ，设置表格大小为