网页设计与制作案例教程

第十五章网站策划与网页设计前面几章主要学习网页制作的技巧和方法。 要创建漂亮的网页，首先要规划网站并设计网页。 设计网页应该遵循一定的规则。 学习网页设计必须了解网页设计的基本原理和方法，为网页设计和制作提供理论指导和方法论支持。  课程指导  知识技能目标 （1）掌握网站的开发流程，了解网站的规划和组织。 (2)掌握网页设计的基本原理和方法。 网页浏览效果 “长沙世界之窗”旅游网站首页浏览效果如图15-1所示。 图 15-1 “长沙世界之窗”网站首页浏览效果  本章操作任务 (1) 在“长沙世界之窗”站点下创建文件夹“16 Web Design”，并创建一个名为“ ”的文件夹 （2）利用本章所学的方法和技巧，合理调整和优化网页的页面布局、配色、文字和图像。 网站策划与开发流程 网页设计原则与技巧 网站策划与开发流程 网站的基本开发流程如下： 第一阶段：策划与准备阶段 （1）需求分析，确定网站的主题和风格（2） ) 收集资料、准备材料及修改 (3) 规划网站结构及页面布局 网站开发流程第二阶段：网页设计及制作阶段 (1) 网站整体设计 (2) 设计界面及制作网站中的各个网页 (3) 通过超链接将各个网页进行整合 第三阶段：网站发布、推广和维护阶段 (1) 测试、调试和改进网站 (2) 发布和推广网站 (3) 维护和更新网站网站1. 网站需求分析 网站规划和组织 网站是向访问者提供信息的一种方式。 需要明确网站的设计目的和用户需求，从而制定可行的设计方案。 网站设计的第一步是进行网站需求分析。

在开始设计网站之前表情包设计，确定网站的主题。 网站的名称要合法、合理、合理 2、规划网站的主题和内容 确定网站的主题后，就要根据主题确定网站的风格。 网站风格是指网站的外观和表现形式。 不同的网站有不同的风格卡通形象，布局和色彩搭配也各有特色。 3.规划网站风格 网站风格是通过网站中的页面体现的，最重要的是通过主页体现。 具体包括页面的布局结构、色彩搭配、图像动画的使用等。 要规划网站结构，必须首先创建站点地图。 站点地图包括站点的所有关键页面、它们之间的主要链接等。还应规划网页设计的主要技术点。 4、规划网站结构 （1）规划网站的栏目结构 信息的划分有两种方式：一种是自上而下的划分，一种是自下而上的划分。 (2)规划网站的目录结构。 构建目录结构的基本要求是：  不要将所有文件存放在根目录下  根据栏目内容创建子目录  每个主目录下创建独立的图片、flash、音乐 子目录  目录的层次结构不宜错乱太深（3）规划网站的链接结构。 网站的链接结构有两种基本方式：树状链接结构和网状链接结构。 在实际应用中，这两种链接结构是结合使用的。 网页设计原则与技巧 1.用户至上原则 2.易用性原则 3.实用性原则 网页设计的基本原则 1.网页版式设计 网页版式设计 (1)“国”字型 (2)边角型 (3) ) 上下框架式 (4) 左右框架式 (5) 上下框架式 (6) 综合框架式 (7) 封面式 (8) Flash 动画网页的内容主要包括文字和图像，其中正文分为标题和正文。 主要考虑如下：（1）主次分明，中心突出（2）大小匹配，相互呼应（3）图文相辅相成（4）适当留白，清晰易读2网页内容的排列（1）用空白和下划线划分块（2）用颜色块划分块（3）用线框划分块3． 网页内容的块标志是网站的标志和名片。 标志与商标一样，是网站特征和内涵的集中体现。

标志可以是中英文字母、符号、图案、动物或文字等。标志设计思想来源于网站的名称和内容，可分为三个方面：网站标志设计（1）代表人物、动物、网站上的花草可以作为设计蓝图，卡通化、艺术化。 (2) 可以使用网站上的代表性项目作为符号。 （3）使用自己网站的英文名称作为标志，并使用不同的字体和字母变形来制作标志。 ★ 课堂练习★ 打开网站“课堂练习”文件夹“16网页设计”文件夹中的网页文档“”，利用本章介绍的方法和技巧，合理调整和优化页面布局、色彩网页的文本和图像的匹配。 然后浏览其效果，直到您感到满意为止。 ★课外拓展练习★在“虎铁职业学院网站”站点文件夹“16网页设计”中创建一个网页，利用本章学到的方法和技巧修改布局结构、导航栏设计、色彩搭配等。网页文字效果 网页、特效等方面的美化和优化。 ★本章小结★本章主要分析网站策划和网页设计网页设计与制作案例教程第二版网页设计与制作案例教程第二版，分析网页设计过程中的一些基本原理和方法，主要包括布局、外观设计、Logo设计、色彩设计、导航设计、页面元素设计和网页设计规范，为网页设计制作提供理论指导和方法支持