《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元32：网页制作综合实例 一、课程引导 湖南城道营政外学院 二、 明确知识技能目标 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元32：网页制作综合实例 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 湖南绒道 本章将通过一个综合实例，详细讲解一个网站的 完整制作过程，从规划网站、定义站点、制作模板、 制作页面、建立链接、检查站点，到最后的发布网站 逐步引导读者理清制作网站的操作步骤，使读者在前 面各章实例的学习基础上，进一步综合运用网页制作 蒸 的相关知识、技能，建立有特色的网站。本章是前面 各章的综合应用和实战操作。 御拳院 网设计与制作
（一）课程引导 本章将通过一个综合实例，详细讲解一个网站的 完整制作过程，从规划网站、定义站点、制作模板、 制作页面、建立链接、检查站点，到最后的发布网站， 逐步引导读者理清制作网站的操作步骤，使读者在前 面各章实例的学习基础上，进一步综合运用网页制作 的相关知识、技能，建立有特色的网站。本章是前面 各章的综合应用和实战操作
(二)明确知识技能目标 (1)掌握网站的规划。 湖南城道業政饰学院 (2)掌握站点的创建。 (3)学会创建站点目录结构、准备素材。 (4)熟练制作首页。 网页设计与制作
（二）明确知识技能目标 （1）掌握网站的规划。 （2）掌握站点的创建。 （3）学会创建站点目录结构、准备素材。 （4）熟练制作首页
(三) 展示网页浏览效果 1. 预览网页 湖南绒道顾营政御学院 网页设计与制作
（三）展示网页浏览效果 1．预览网页
(四)分析操作任务 湖南绒道 (1)对“网页设计与制作教学网”进行 全面规划，精心准备素材。 （2)综合运用前面各章所学习的知识， 所掌握的技能制作网站的首页。 网页设计与制作
（四）分析操作任务 （1）对“网页设计与制作教学网”进行 全面规划，精心准备素材。 （2）综合运用前面各章所学习的知识， 所掌握的技能制作网站的首页
(五)知识讲解与操作示范（1) 17.1 规划网站 南城 1. 策划网站主题 在首手设计网站之前，要确定好网站的主题，每个网站 都应该具有一个明确的主题。 2.确定网站风格 确定好站点主题后，就要根据该主题选择站点的风格。 本网站的主要特点如下： 爽 （1)设计风格要大众化，为了提高浏览速度，尽量减 少图片的使用，更多地使用表格实现效果。 (2)背景颜色以灰色和白色为主、黄色为辅，文字颜 色以黑色为主、蓝色和红色为辅。 (3)文字内容丰富、知识性强，标题简洁明了，字体 克 般采用宋体，大小一般为12像素。 网页设计与制作
（五）知识讲解与操作示范（1） 17.1 规划网站 1．策划网站主题 在首手设计网站之前，要确定好网站的主题，每个网站 都应该具有一个明确的主题。 2．确定网站风格 确定好站点主题后，就要根据该主题选择站点的风格。 本网站的主要特点如下： （1）设计风格要大众化，为了提高浏览速度，尽量减 少图片的使用，更多地使用表格实现效果。 （2）背景颜色以灰色和白色为主、黄色为辅，文字颜 色以黑色为主、蓝色和红色为辅。 （3）文字内容丰富、知识性强，标题简洁明了，字体 一般采用宋体，大小一般为12像素
(五)知识讲解与操作示范(2) 湖南 3.构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复 推敲，最后确定完整的栏目和内容的层次结构。 道 4.规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录， 蒙 一个网站的目录结构要求层次清晰、井然有序，首 页、栏目页、内容页区分明确，有利于日后的修改。 5.主要页面布局设计 使用表格对首页与其他几个主面导航页面的布 局结构草图进行设。 琴 克 网页设计与制作
（五）知识讲解与操作示范（2） 3．构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复 推敲，最后确定完整的栏目和内容的层次结构。 4．规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录， 一个网站的目录结构要求层次清晰、井然有序，首 页、栏目页、内容页区分明确，有利于日后的修改。 5．主要页面布局设计 使用表格对首页与其他几个主面导航页面的布 局结构草图进行设
(五)知识讲解与操作示范（3) 17.2准备素材 南 根据网站的栏目、内容设计，链接结构设计， 道 首页的布局结构，几个主要导航页面的布局结构， 准备所需素材 1.准备文本 薰 2.准备L0g0 3. 准备图片及按钮 爽 4. 准备动画 饼 5. 建立库项目 琴 网页设计与制作
（五）知识讲解与操作示范（3） 17.2 准备素材 根据网站的栏目、内容设计，链接结构设计， 首页的布局结构，几个主要导航页面的布局结构， 准备所需素材 1．准备文本 2．准备Logo 3．准备图片及按钮 4．准备动画 5．建立库项目
(五)知识讲解与操作示范（4) 17.3创建网站 1.创建本地站点 线 在开始着手设计网页之前，首先要定义站点。 创建站点之前，要求先建立一个文件夹，以便创建站点 时为站点指定存储位置。 定义站点的操作步骤如下： 蒙 (I)在Dreamweaver8主窗口中，单击菜单【站点】→ 【新建站点】，将弹出站点定义对话框。在该对话框中先输 入站点的名称，然后输入网址。接着单击【下一步】按钮， 进入到下一步操作。 (2)选择“否，我不想使用服务器技术”单选按钮，然 吃 后单击【下一步】按钮，进入到下一步操作。 网页设计与制作
（五）知识讲解与操作示范（4） 17.3 创建网站 1．创建本地站点 在开始着手设计网页之前，首先要定义站点。 创建站点之前，要求先建立一个文件夹，以便创建站点 时为站点指定存储位置。 定义站点的操作步骤如下： （1）在Dreamweaver 8主窗口中，单击菜单【站点】→ 【新建站点】，将弹出站点定义对话框。在该对话框中先输 入站点的名称，然后输入网址。接着单击【下一步】按钮， 进入到下一步操作。 （2）选择“否，我不想使用服务器技术”单选按钮，然 后单击【下一步】按钮，进入到下一步操作