第9课 网站的规划与设计 课件（20张ppt）

第9课 网站的规划与设计
+
+
目录
丰富多彩的网站
确定主题
确定网站
结构和风格
网站素材的
收集和整理
当我们在网络中遨游时，呈现在眼前的是一个内容丰富、美观漂亮的网站。
丰富多彩的网站
丰富多彩的网站
常见网站：
门户网站：信息量大
单位、个人网站：宣传展示自身为主
娱乐交互网站：包括多种媒体素材信息
服务网站：以提供各种服务和职能为主。
明确的主题、合理的结构和布局，以及丰富的内容，才能让访问者产生赏心悦目的感受
确定主题
确定主题
分享“走进蝴蝶”网站：
主要介绍蝴蝶基本情况、种类、趣事、文化和博物馆等
对网站结构和风格进行规划和设计，要先搭建框架和主体结构，再添砖加瓦并进行装饰
确定网站结构和风格
确定网站结构和风格
1.网站结构：
网站结构主要是指网页之间的层次关系。根据网站的主题，确定需要分几个栏目来表达，每个栏目是否需要用子栏目来对内容进行细分。
确定网站结构和风格
2.网站风格：
网站风格是指网页上所有元素组成后形成的整体形象，包含网站的标题、配色、字体、版面布局、交互性等元素。
（1）网页布局：
封面型：以大幅图片和动画为主，主要应用于首页。
图片（动画）
确定网站结构和风格
2.网站风格：
（1）网页布局：
标题型：以网站徽标和标题为主，正文内容较少，主要应用于功能单一，主题突出的网页。
标题（徽标）
文字（图片）
确定网站结构和风格
2.网站风格：
（1）网页布局：
分栏型：将页面分为两栏或者三栏，一栏为导航链接，另一栏为正文信息，主要应用于以文字内容为主的网页。
图片
导航条
正文
确定网站结构和风格
2.网站风格：
（1）网页布局：
同字型：网页上部以导航为主，两边区域为文字链接和图片，中间为主要内容，主要应用于素材多样、内容丰富的网页。
图片
图片
正文
导航栏
文字
（图片）
确定网站结构和风格
2.网站风格：
（2）色彩的协调搭配：网站色彩的选择是影响网页效果的因素之一。同一页面中不要使用过多的颜色，背景色尽量柔和、淡雅，文字的颜色与背景色的反差尽量大。
确定网站结构和风格
2.网站风格：色彩的协调搭配
你觉得那个更好看？
同一页面中不要使用过多的颜色，否则会显得版面过于杂乱
确定网站结构和风格
2.网站风格：色彩的协调搭配
你觉得那个更好看？
文字的颜色与背景色的反差尽量大，否则看不清文字
确定网站结构和风格
2.网站风格：
（3）统一的元素：网页制作会用到很多小图标、线条、形状等元素，这些元素要与网站的风格一致，体现出协调统一的整体感。
确定网站结构和风格
2.网站风格：统一的元素
你觉得那个更好看？
插入元素要与网站的风格一致，才能体现出协调统一的整体感
一个吸引人的网站必然有丰富的内容，包括文字、图片、动画、音频和视频等。
网站素材的收集和整理
网站素材的收集和整理
围绕主题收集各种类型的素材，便于以不同形式呈现。
保证图片清晰，文件越小越好。
使用正版信息，注意知识产权。
谢谢