网站的规划与设计

1、logo4.1、4.2 网站规划与设计company l欣赏优秀作品欣赏优秀作品一、一、欣赏优秀作品欣赏优秀作品：v 1.虎门销烟启示录虎门销烟启示录二、思考以下问题：二、思考以下问题：1.这些网站是怎样围绕主题展现内容的？这些网站是怎样围绕主题展现内容的？2.这些网站提供了哪些栏目及功能？这些网站提供了哪些栏目及功能？3.网站的链接有哪些特色，是否便捷？网站的链接有哪些特色，是否便捷？4.网站主页的布局、色彩运用有哪些特点？网站主页的布局、色彩运用有哪些特点？company l一、开发网站的基本过程一、开发网站的基本过程company l二、网站的规划二、网站的规划1.网站主题的确定网站主题

2、的确定网站的规划从选择网站的主题开始。网站的选题，就是要根据网网站的规划从选择网站的主题开始。网站的选题，就是要根据网站的开发目标和访问网站的用户群，站的开发目标和访问网站的用户群，确定网站的主题，并给网站确定网站的主题，并给网站起一个简练响亮的名字。起一个简练响亮的名字。 注意：贴近学习和生活注意：贴近学习和生活2.网站运行环境的确定网站运行环境的确定网站环境包括网站服务器情况、文件磁盘存储空间、网站域名管网站环境包括网站服务器情况、文件磁盘存储空间、网站域名管理等方面。理等方面。 3.网页制作工具的选择网页制作工具的选择主要包括选择主要包括选择网页制作工具网页制作工具（frontpage、

3、dreamweaver)、图像处理工具图像处理工具（photoshop、fireworks、paintshop）、）、动画制作软件动画制作软件（flash、ulead gif animator）等。）等。 4.网站开发任务的管理网站开发任务的管理 (1)任务分工任务分工 (2)时间安排时间安排company l主要软件dreamweavercompany lcompany l主要软件photoshopv由由adobe公司推出的专门用于图形、图像处理的软件公司推出的专门用于图形、图像处理的软件photoshop以其强大的功以其强大的功能、集成度高、适用面广和操作简便而著称于世。它不仅提供强大的绘

4、图工具，能、集成度高、适用面广和操作简便而著称于世。它不仅提供强大的绘图工具，还能直接从扫描仪、数码相机等设备采集图像，并对它们进行修改、修复，调整还能直接从扫描仪、数码相机等设备采集图像，并对它们进行修改、修复，调整图像的色彩、亮度，改变图像的大小，而且还可以对多幅图像进行叠加，并增加图像的色彩、亮度，改变图像的大小，而且还可以对多幅图像进行叠加，并增加特殊效果，使现实生活中很难遇见的景像十分逼真地展现。特殊效果，使现实生活中很难遇见的景像十分逼真地展现。company l主要软件flashv 由由macromedia公司开发设计的多媒体软件公司开发设计的多媒体软件所生成的动画所生成的动画(

5、.swf)文件非常小，用在网页设计上不仅可以使网页更加生文件非常小，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。并且把音乐，动画，声效，交互方式的时间里就得以播放。并且把音乐，动画，声效，交互方式融合在一起，可以直接嵌入网页的任一位置，非常方便。融合在一起，可以直接嵌入网页的任一位置，非常方便。company l三、网站的设计三、网站的设计 网站设计的目的：网站设计的目的： 把信息以恰当的方式组织并呈现在网上，设法吸引把信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览

6、者提供方便的访问。人们的关注，并为浏览者提供方便的访问。（一）（一）网站网站结构结构的设计的设计：设计网站的栏目。设计网站的栏目。 网站的栏目可以有多层，以能够恰当地体现网站主题网站的栏目可以有多层，以能够恰当地体现网站主题为好。此外，每个栏目本身应有一个大致的内容描述，以为好。此外，每个栏目本身应有一个大致的内容描述，以表达该栏目的设计思路，充实整个网站的总体结构设计。表达该栏目的设计思路，充实整个网站的总体结构设计。company l“虎门销烟启思录虎门销烟启思录”网站的结构网站的结构company l“虎门销烟启思录”网站的结构company l三、网站的设计三、网站的设计（二）网页的版

7、面设计（二）网页的版面设计1.风格设计风格设计 包括网页布局的整体造型、色彩的搭配、字体图包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。片的样式设置、网站的标志设计等。如：严肃庄重、清爽温馨、深沉厚重、生动活泼、如：严肃庄重、清爽温馨、深沉厚重、生动活泼、古朴典雅。古朴典雅。company l简洁大方简洁大方company l风格风格独特独特，构图巧妙构图巧妙company l生动活泼生动活泼company l色彩色彩丰富丰富company l浓郁的文化气息浓郁的文化气息company lv2.版面布局设计版面布局设计标题信息、栏目信息、内容信息、附加信息等，标题信

8、息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次要进行合理的放置，让人看起来井井有条，主次分明。分明。一般来说： 屏幕中央最能引人注意，屏幕上方紧随其后，屏幕左右侧通常放置不太重要或固定信息，附加信息一般放在最下方。company l常见网页布局类型布局类型布局类型布局方式布局方式实例实例“国国”字型字型 上面是网站的标题及横幅广告，接下来是网站的主要上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分别列一些小条，中间是主要内容，下面内容，左右分别列一些小条，中间是主要内容，下面是一些网站的信息是一些网站的信息 人民网人民网拐角型拐角型上面是标题广告，接下

9、来在左侧是导航栏，右侧是正上面是标题广告，接下来在左侧是导航栏，右侧是正文，下面是网站的信息。文，下面是网站的信息。 itedu/zuopin201itedu/zuopin2019/mansu9/mansu标题正文型标题正文型上面是标题，下面是正文。上面是标题，下面是正文。左右框型左右框型左边是导航栏，右边是正文。有时最上方会有一个小左边是导航栏，右边是正文。有时最上方会有一个小标题。标题。上下框型上下框型上面是导航栏，下面是正文。上面是导航栏，下面是正文。 l（三）网页的交互设计（三）网页的交互设计 用户如何访问网站？怎样从一个位置到另一个位置？怎样防止用户在网站中”迷路”? 链接点设计要考虑人们在浏览网站时通常有哪些需求？帮助浏览者快捷的跳