新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目16.pptVIP

项目16 网站的规划与设计 16.1 项目描述 本项目以“海南旅游网”为例介绍一个网站的规划和设计过程，主要包括网站的设计分析、定位网站的风格和规划网站的结构，首页版面布局的设计及制作。 16.2 知识储备 16.2.1 网站的开发流程和规范 16.2.2 网站的规划 16.2.3 网页的设计 16.2知识储备 16.2.1 网站的开发流程和规范 1．网站开发的基本流程 网站的建设通常都遵循一个基本流程： 第一阶段：规划网站和准备素材 ·需求分析，规划网站的主题、风格、规模、功能和内容版块。 ·收集资料、准备素材并进行整理修改。 ·规划网站栏目结构、目录结构、链接结构和版式结构。 第二阶段：设计、制作网页 ·网站的总体设计。 ·设计制作网站的主页、二级页面和内容页面等。 ·将各个网页通过超级链接进行整合。 第三阶段：测试、发布、推广与维护网站 ·测试、调试与完善网站。 ·发布与推广网站。 ·维护与更新网站。 2．网站开发常用的命名规范 网站中所有文件、文件夹、CSS类的命名应规范，尽量做到字母数量少，见名知意、容易理解。文件夹命名一般采用英文小写字母，特殊情况可以使用中文拼音。文件名采用英文小写字母、数字和下划线的组合，也可以大小写英文字母混合使用。网页菜单名称可以使用菜单名的英文单词或组合英文单词命名。 3．网页版面的尺寸规范 (1)页面的安全宽度。当显示分辨率设置为1024×768，即浏览器的屏幕宽度为1024像素，因浏览器的边框和垂直方向的滚动条占去22像素，如果网页的左右边距设置为0像素，页面的设计宽度一般限制在1000像素以内，页面宽度不超过一屏。 (2)页面的最佳长度。页面长度定义很宽松，要考虑整个网页的下载速度、浏览者的方便、信息含量、网站类型等因素，网页的最佳长度在1.8～2.5屏之间。页面长度原则上不超过3屏。 (3) 网页文件的大小。一般网站首页文件大小不宜超过30KB（包括所有图像、文本、多媒体对象），网站二级页面文件大小不宜超过45KB（包括所有图像、文本、多媒体对象）。如果文件太大，网页下载速度会变慢，影响浏览速度。 16.2.2 网站的规划 1．网站需求分析 网站是向浏览者提供信息的一种方式。网站项目是建立在不同的需求之上，面对不同种类的需求，必须明确设计网站的目的和用户需求，从而做出切实可行的设计计划。网站设计的第一步就是进行网站需求分析。由于浏览网页的用户范围非常广，遍及各个领域、各个层次，网站设计者必须了解各类用户的习惯、知识、技能，通过对各类用户的需求进行调研，更好地了解、分析、明确用户需求，并且能够以文档的形式准确、清晰地表达给参与项目开发的每个成员，保证开发过程能按照以满足用户需求为目的的正确的项目开发方向进行。 2．确定网站主题和网站名称 设计一个网站之前，首先要确定网站主题。每个网站都应该有一个鲜明的主题，主题是网站的灵魂，它统领网站的内容和形式，任何网站都要根据其主题形成其风格。选择一个好的主题，需要注意以下几点： （1) 主题要鲜明。任何一个网站要给浏览者留下深刻的印象，必须要有鲜明的主题，突出自己的个性和特色，在内容的深度和精度上下功夫。 （2）主题涉及的范围不要过于广泛。定位要小而精。“小”即定位要小，“精”即内容要精。 网站名称的字数应该控制在六个字以内，最好四个字。定位题材和名称是设计一个网站的第一步，也是很重要的一部分。网站命名遵循以下原则： （1）体现网站的主题，精炼、概括性强。 （2）名称要正、易记。网站名称要合法、合情、合理。 （3）名称要有特色，能体现一定的内涵，可给浏览者留下深刻的印象。 3.规划网站风格 网站风格是指网站的外观和表现形式，是站点的整体形象给浏览者的综合感受，是通过网站中的页面来体现的，特别是首页，具体包括页面的版式结构、色彩搭配、图像动画的使用以及网站的CI形象等诸多因素。 例如，我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。 网站的CI形象设计主要包括： （1）网站的标志(logo)，即网标。和商品的商标、企业的标志一样，网标是站点特色和内涵的集中体现，看见它就让人联想到它所代表的站点。 （2）“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如IBM的深蓝色，肯德基的红色，windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。一般来说，一个网站的标准色彩不宜超过3种，太多则让人眼花缭乱。标准色彩主要用于网站的标