网页设计客户端技术 使用 Dreamweaver 软件设计静态网页 模块4：相关软件使用--任务3-1.pptx

模块4：相关软件的使用 任务3使用Dreamweaver 软件设计静态网页-使用表格 创建站点 创建页面 创建表格 布局网页 网页设计客户端技术（HTML+CSS+JavaScript） 任务3 COTENTS 如图这是需要创建的网页页面 任务3使用Dreamweaver软件设计静态网页 Dreamweaver文档窗口有三种视图模式：代码视图、拆分视图和设计视图。可以在代码视图窗口通过手写代码来设计网页，也可以在设计视图中使用Dreamweaver工具的菜单、工具栏在可视化的方式下设计网页，拆分视图则同时提供了代码视图和可视化视图。下面介绍在Dreamweaver中使用表格设计静态网页。 任务3使用Dreamweaver软件设计静态网页 1．创建站点 （1）创建文件夹，在任意一个根目录下创建好一个文件夹，如取名为D:/MyWebSite（注：网站中所用的文件都要用英文名）。 （2）创建站点，打开Dreamweaver，选择“站点”|“新建站点”，打开对话框。在站点名称中输入网站的名称（例如，MyWebSite），在本地站点文件夹中选择刚才创建的文件夹（D:/MyWebSite）。然后单击“保存”即可，如图4-37所示。 图4-37新建站点 任务3使用Dreamweaver软件设计静态网页 （3）在D:/MyWebSite文件夹中创建子文件夹images，用于保存图片资源，并将准备好的banner图片banner.jpg和底部图片bottom.jpg放于该文件夹中，如图4-38所示。 图4-38准备图片资源 任务3使用Dreamweaver软件设计静态网页 2.创建页面 （1）在DreamWeaver开始页界面中，单击“新建”下面的“HTML”类型，创建一个HTML页面，并将此文件保存到D:/MyWebSite文件夹中，并命名为index.html。 图4-39创建页面 任务3使用Dreamweaver软件设计静态网页 （2）单击工具选项栏中的“拆分”，显示index.html页面的拆分视图。 任务3使用Dreamweaver软件设计静态网页 （3）在菜单中单击“插入”|“表格”，打开“表格”对话框。设置行数为5、列数为2、宽度为800，单位为像素，如图4-42所示。 图4-41 插入表格 图4-42设置表格参数 任务3使用Dreamweaver软件设计静态网页 （4）合并单元格。选中第1行的两个单元格，右击并选择“表格”|“合并单元格”，得到一个合并之后的单元格。用同样的方法，合并第2、3、5行的两个单元格。设置表格的背景色，将table标签的bgcolor属性的值设置为“#CCFFFF”，最后得到如图表格。 图4-43 合并单元格 任务3使用Dreamweaver软件设计静态网页 （5）添加网站名称，在设计视图中，单击表格第一行，添加网站标题“网页设计客户端技术学习网站”，如图4-44所示。 图4-44 添加网站标题 任务3使用Dreamweaver软件设计静态网页 （6）添加网站标题样式，选中“网页设计客户端技术学习网站”文字并右击，选择“属性”，在“属性”面板中，单击左侧的“CSS”按钮，再单击“编辑规则”按钮，在“新建CSS规则”对话框中，选择器类型选取ID，选择器名称为titlefont，单击“确定”，弹出“CSS规则定义”对话框，在该对话框中，选择font-style的值为italic，color的值为#F00，font-size的值为28px，font-weight的值为bold，text-align的值为center，单击“确定”，得到一个新的样式.titlefont {color: #F00;font-style:italic;font-size:28px;font-weight:bold; text-align:center;} 。 图4-45 创建标题字体样式 任务3使用Dreamweaver软件设计静态网页 （7）添加网站banner。将光标停放在第二个单元格中，单击菜单“插入”|“图像”，选择D:/MyWebSite/images/中的图片banner.jpg，单击“确定”，将该图片插入到第2行的单元格中，如图4-46所示。 图4-46添加网站banner 任务3使用Dreamweaver软件设计静态网页 （8）添加导航菜单，选中第3行的单元格，单击菜单“插入”|“表格”，插入一个1行6列的表格。并在表格的各单元格中依次添加如下的导航链接文字：“网站首页”“关于我们”“新闻资讯”“课程学习”“工程案例”“人才指南”，参照步骤（6）创建一个样式.navcol{color: #C30; }，并应用到导航