中职 Dreamweaver CC网页设计与制作（3版）模块6（课件） .pptx

中职 Dreamweaver CC网页设计与制作（3版）模块6（课件）工信版Dreamweaver CC网页设计与制作（3版）01模块1 网页基础知识03模块3 网页布局05模块5 网站的测试与发布02模块2 初级应用04模块4 高级应用06模块6 综合应用任务描述 通过“魅力神州”网站的创建和设计，巩固使用表格布局网页、设置超链接、创建CSS样式和行为的方法和技巧。任务16 魅力神州 网站设计综合应用任务解析在本任务中，需要完成以下操作：掌握使用表格布局网页的方法和技巧；掌握超链接的设置。掌握CSS样式、行为的创建方法。综合应用此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 通过“魅力神州”网站的创建和设计，巩固使用表格布局网页，熟练插入各种网页元素并设置其属性，正确设置超链接，熟练创建CSS样式，快速添加各种行为效果。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处新建站点、主页（1）将素材中的renwu16文件夹复制到D盘根目录。运行Dreamweaver，新建站点“魅力神州”，站点文件夹为D:16。在站点根目录下新建网页文件index.html。打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#ccc，左、上边距为0，页面属性设置如图6-1所示。图6-1设置页面属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处插入表格（2）选择“插入Table”命令，设置表格大小为1行1列，表格宽度为1000像素，其他项为0，如图6-2所示，单击“确定”按钮插入表格。图6-2“Table”对话框此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处设置表格属性（3）单击表格的边框线，选中整个表格，在“表格”属性面板中设置“对齐”为“居中对齐”，如图6-3所示。图6-3“表格”属性面板制作banner栏（4）将光标定位到单元格中，选择“插入Image”命令，在打开的“选择图像源文件”对话框中选择“banner.jpg”文件，单击“确定”按钮插入图像,如图6-4所示。图6-4 第1行表格制作链接栏（5）将光标定位到表格的后面或下一行，选择“插入Table”命令，设置表格大小为1行4列，表格宽度为1000像素，其他项为0，单击“确定”按钮，插入表格。在表格属性面板中设置对齐为居中对齐。选中四个单元格，在属性面板中设置列宽为25%，并分别输入“首页、旖旎风光、诗和远方、联系我们”文本，设置居中对齐。图6-5 第2行表格制作内容栏、版权栏（6）将光标定位到第2个表格的后面或下一行，选择“插入Table”命令，设置表格大小为1行1列，表格宽度为1000像素，其他项为0，单击“确定”按钮插入表格。在表格属性面板中设置对齐为居中对齐。插入4行3列的宽度为100%的嵌套表格，各单元格设置为水平居中对齐，第一行、第三行分别插入i1至i6图片，第二行、第四行输入文本。（7）在第三个表格下方，插入1行1列，表格宽度为1000像素，其他项为0的表格，在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置0水平居中对齐;将光标定位单元格中，输入文本内容“版权所有2021-2025”，保存网页，如图6-6所示。图6-6 index.html效果图制作ynfg.html（8）将index.html另存为ynfg.html，删除第三个表格中的内容，插入mlsz1.jpg图片，保存网页，预览如图6-7所示。图6-7 ynfg.html效果图制作shyf.html（9）将index.html另存为shyf.html，删除第三个表格中的内容，插入一个1行2列的宽度为100%的嵌套表格，左侧单元格插入z1.jpg图片.选中图片，打开“行为”面板，创建行为“交换图像”，设置鼠标经过交换图像为z2.jpg。打开text文件夹，将“月牙泉.txt”文档中的文本复制，粘贴到右侧单元格中，保存网页，预览如图6-8所示。图6-8 shyf.html效果图（10）分别为上述3个网页设置相应的页面链接，联系我们链接至。打开CSS设计器面板，新建a:link和a:hover样式，设置链接文本无下划线，颜色分别为#0000FF和#00FF00。（11）保存所有文件，预览网页，测试超链接。创建超链接、CSS样式模 块6结 束