《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元29：网站规划与网页设计 理计 课程引导 二、明确知识技能目标 湖南城道营政饰学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元29：网站规划与网页设计 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 理计 前面各章主要学习了网页制作的技术和方法，要制作 湖南城道质业政饰学院 出优美的网页，首先应对网站进行规划，对网页进行设计。 设计网页应遵循一定的规则，学习网页设计必须了解网页 设计的基本原理和方法，为网页设计和制作提供理论指导 和方法支持。 网页设计与制作
（一）课程引导 前面各章主要学习了网页制作的技术和方法，要制作 出优美的网页，首先应对网站进行规划，对网页进行设计。 设计网页应遵循一定的规则，学习网页设计必须了解网页 设计的基本原理和方法，为网页设计和制作提供理论指导 和方法支持
(二)明确知识技能目标 理计 (1)掌握网站的开发流程，了解网站的规划与组织。 (2)掌握网页设计的基本原理与方法。 湖南城道業政御学院 网页设计与制作
（二）明确知识技能目标 （1）掌握网站的开发流程，了解网站的规划与组织。 （2）掌握网页设计的基本原理与方法
(三)展示网页浏览效果 没计 “长沙世界之窗”旅游网站首页index.html的浏览效果 如图15-1所示。 湖南城道质业政饰学院 长沙世界之窗 >》国际街 >》文明山 》内广场 >》文明湖 》欢乐谷 >》神秘谷 猜相 殊建时风情歌信)配酸 返回首页关于我们T公司部门企业文化发送邮件 支情链接？湖南张家界|湖南凤凰」湖南韶山 长沙世界之窗有限公司 Copyright@2004-2005 中国长沙浏P阳河大桥东编：410003电话：731-4256989 图15-1 “长沙世界之窗”网站首页的浏览效果 网页设计与制作
（三）展示网页浏览效果 “长沙世界之窗”旅游网站首页index.html的浏览效果 如图15-1所示。 图15-1 “长沙世界之窗”网站首页的浏览效果
(四)分析操作任务 调设计 (1) 在站点“长沙世界之窗”下创建文件夹“16网页 湖南城道质营政饰学院 设计”，在该文件夹中创建一个命名为“index.html”的 网页。 (2)运用本章所学习的方法和技巧对该网页15.htm1的 页面布局、颜色搭配、文字图像进行合理调整和优化。 网页设计与制作
（四）分析操作任务 （1）在站点“长沙世界之窗”下创建文件夹“16网页 设计”，在该文件夹中创建一个命名为“index.html”的 网页。 （2）运用本章所学习的方法和技巧对该网页15.html的 页面布局、颜色搭配、文字图像进行合理调整和优化
(五)知识讲解与操作示范 时没计 15.1 网站的规划与开发流程 15.1.1 网站的开发流程 湖南城道营政饰学院 网站的基本开发流程如下： 第一个阶段：规划和准备阶段 (1)需求分析、 决定网站的主题、风格 (2)收集资料、准备素材并进行整理修改 (3)规划网站结构和页面版式 第二个阶段：网页设计、制作阶段 (1)网站总体设计 (2)设计界面、制作网站中的各个网页 (3)将各个网页通过超链接进行整合 网页设计与制作
（五）知识讲解与操作示范 15.1 网站的规划与开发流程 15.1.1 网站的开发流程 网站的基本开发流程如下： 第一个阶段：规划和准备阶段 （1）需求分析、决定网站的主题、风格 （2）收集资料、准备素材并进行整理修改 （3）规划网站结构和页面版式 第二个阶段：网页设计、制作阶段 （1）网站总体设计 （2）设计界面、制作网站中的各个网页 （3）将各个网页通过超链接进行整合
时没计然 (五)知识讲解与操作示范 15.1 网站的规划与开发流程 第三个阶段：网站的发布、推广与维护阶段 湖南城道业政饰学院 (1)测试、调试与完善网站 (2)发布与推广网站 (3)维护与更新网站 15.1.2网站规划与组织 1.网站需求分析 网站是向浏览者提供信息的一种方式，必须明确设计 网站的目的和用户需求，从而做出切实可行的设计计划， 网站设计的第一步就是进行网站需求分析。 网页设计与制作
（五）知识讲解与操作示范 15.1 网站的规划与开发流程 第三个阶段：网站的发布、推广与维护阶段 （1）测试、调试与完善网站 （2）发布与推广网站 （3）维护与更新网站 15.1.2 网站规划与组织 1．网站需求分析 网站是向浏览者提供信息的一种方式，必须明确设计 网站的目的和用户需求，从而做出切实可行的设计计划， 网站设计的第一步就是进行网站需求分析
理计 (五)知识讲解与操作示范 15.1 网站的规划与开发流程 2.策划网站主题和内容 湖南城道质业政饰学院 在着手设计网站之前，要确定好网站的主题。 网站名称要合法、合情、合理 3.规划网站风格 确定好网站的主题后，就要根据该主题确定网站的风格，网站 风格是指网站的外观和表现形式，要明确网站的类型，根据网站类 型确定网格的风格，不同类型的网站具有不同的风格，版面设计、 颜色搭配也各有特点。网站风格通过网站中的页面来体现的，最主 要的是通过首页来体现的。具体包括页面的版式结构、色彩搭配、 图像动画的使用等方面。 网页设计与制作
（五）知识讲解与操作示范 15.1 网站的规划与开发流程 2．策划网站主题和内容 在着手设计网站之前，要确定好网站的主题。 网站名称要合法、合情、合理 3．规划网站风格 确定好网站的主题后，就要根据该主题确定网站的风格，网站 风格是指网站的外观和表现形式，要明确网站的类型，根据网站类 型确定网格的风格，不同类型的网站具有不同的风格，版面设计、 颜色搭配也各有特点。网站风格通过网站中的页面来体现的，最主 要的是通过首页来体现的。具体包括页面的版式结构、色彩搭配、 图像动画的使用等方面
时没计然 (五)知识讲解与操作示范 15.1 网站的规划与开发流程 4.规划网站结构 湖南城道业政饰学院 规划网站结构首先要建立一张站点图，站点图中包 括站点所有的关键页面、它们之间的相互关主要的链接 等，设计网页的主要技术要点也应规划好 (1)规划网站的栏目结构 划分信息的方法有两种：一种是自顶向下划分，另 一 种是自下而上划分。 (2)规划网站的目录结构 构建目录结构的基本要求有：不要将所有文件都存 放在根目录下 网页设计与制作
（五）知识讲解与操作示范 15.1 网站的规划与开发流程 4．规划网站结构 规划网站结构首先要建立一张站点图，站点图中包 括站点所有的关键页面、它们之间的相互关主要的链接 等，设计网页的主要技术要点也应规划好。 （1）规划网站的栏目结构 划分信息的方法有两种：一种是自顶向下划分，另 一种是自下而上划分。 （2）规划网站的目录结构 构建目录结构的基本要求有：不要将所有文件都存 放在根目录下