《Dreamweaver网页设计》 任务二：网站设计布局.pdf

《Dreamweaver网页设计》 《Dreamweaver网页设计》 任务二：网站设计布局 任务二：网站设计布局 主讲人：山东工业职业学院 主讲人：山东工业职业学院 SHANDONG VOCATIONAL COLLEGE OF INDUSTRY 项目1：使用表格布局网页 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 节 环 学 教 要 主 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 （一）课程引导 通过前面的学习使我们对网页制作有了基本认识。 请浏览山东工业职业学院【计算机文化基础】精 品课程的主页。 该主页中包含了大量的文字和图片，通过浏览我 们发现这些文字和图片布局合理，搭配协调。这些文 字和图片是通过什么方法布局的？ 本次课我们来学习使用表格布局网页的方法。 （二）明确知识技能目标 （1）学会添加表格、设置表格属性。 （2 ）掌握设置表格中行和列属性的方法。 （3 ）掌握拆分单元格，合并单元格的方法。 （4 ）掌握在表格中输入文字并定位的方法。 （5 ）掌握在表格中插入图像并定位的方法。 （三）展示网页浏览效果 1．预览网页 2．网页布局与组成分析 （1）本网页为普通的上下型版式结构，上面为一幅图片，下面为左 右型结构，包括目录结构和几段文字。 （2）本网页使用了表格对图片、文字进行合理布局。 （四）分析操作任务 （1）在“计算机文化基础”精品课程网站文件夹中创建命 名为“设计布局.html”的网页，网页的标题为“设计布 局”。 （2 ）插入1张3行4列的表格，宽度设置为750像素。 （3）拆分单元格，合并单元格。 （4 ）设置表格以及行、列、单元格的属性。 （5）为单元格设置背景图像。 （6）在表格的不同单元格中插入多幅图像。 （7）在表格的单元格中输入文字。 （五）知识讲解与操作示范（1） 第一步：创建站点或切换站点 启动Dreamweaver 8，切换到“jsjjpkc”站点。如果该站点不存在，则新建一个 名为“jsjjpkc”的站点。 第二步：创建子文件夹，准备素材 在站点下创建子文件夹“设计布局”，在“04表格布局”文件夹中创建子文件夹 “image”，并将所需图像复制到该文件夹下。 第三步：新建网页且保存 在Dreamweaver 8主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对 话框，在“常规”选项卡中，“类别”列表框中选择“基本页”，“基本页”列表框中选择 “HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便创建。单击标 准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为“04表格布局”，文 件名为“04.html”，单击【保存】按钮，保存该网页文档。 第四步：设置网页的标题 在文档工具栏的“标题”文本框直接输入文档标题“课程简介”即可。 （五）知识讲解与操作示范（2） 第五步：插入表格 1．打开设计布局.html，将光标置于网页文档设计布局.html第一行的最左 端，在Dreamweaver 8主窗口中，单击菜单【插入】→【表格】