网站栏目版面风格设计ppt课件
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前情回顾：
1.下列选项中属于网页文件的是（ ）
A.index.gif
B.index.swf
C.index.htm
D.index.wav
2.Microsoft Access 软件是一种（ ） A.数据处理软件 B.文字处理软件 C.数据库管理软件
D.数据库应用软件
3.电子邮件的附件中很容易传播病毒木马。以下附件中，最有可能是病毒木马的是（ ）
9、对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色一半浅色，一般用于 设计型站点。优点是视觉冲击力强，缺点是很难将两部分有机地结合起来。
10、FLASH布局：FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这 种布局中，大部分甚至整个页面都是Flash。
7
巩固练习：
6
常见页面布局样式：
4、“口”字型。页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是 主要内容。优点：充分利用版面，信息量大，与其他页面的链接多，切换方便；缺点：页面 拥挤，不过灵活。
5、标题正文型。标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页 面等，其特点是简洁明快，干扰信息少，较为正规。
版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。 版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。
常见页面布局样式：
1、“T”字型：也称“厂”字型，页面顶部为主菜单以及横条网站标志+广告条，下方左面为 导航菜单，右面显示内容的布局。优点：页面结构清晰，主次分明；缺点：呆板，如果细节 色彩上不注意，容易“看之无味”。
8
网站风格设计
9
一、风格设计
风格是指网站的整体形象给浏览受。有的严肃计策、有的清爽温馨、有的 深沉厚重、有的生动活泼、有的古朴典雅、有的豪迈奔放。风格设计与主题是密 不可分的，是为突出主题服务的。
一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的 搭配、字体图片的样式设置、网站的标志设计等，同一个网站的各网页之间应保 持风格一致。
A.密码破解.exe
B.初稿.txt
C.小苹果.mp3
D.登记照.jpg
4.网站的规划与建设按时间顺序可分为以下五个阶段，正确的顺序是（ ） ①设计②宣传推
广③运行维护④策划⑤制作
A.①③②④⑤
B.④③②⑤①
C.④①③②⑤
D.④①⑤②③
5.网页中的图片一般都是gif或jpg格式的，使用这种图片格式的好处是（ ）
4
常见页面布局样式： 2、“国”字型，也称“同”字型。即最上面是网站的标题以及横幅广告条，接下来就 是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底， 最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见 到的差不多最多的一种结构类型。
5
常见页面布局样式： 3、自由式。又称POP布局页面布局像一张宣传海报，以一张精美图片作为页面的设 计中心，菜单栏目自由摆放。优点：漂亮、吸引人，适宜于艺术类网站。缺点：显 示速度慢，文字信息量少。
1.如果一个网站的栏目设置不合理，可能导致网站（ ）
A.不能正常运行
B.目录结构不清晰、内容混乱
C.没有自己的整体风格
D.浏览时速度比较慢
2.如果一个网页给人的感觉是内容杂乱无序，主次不分，这主要是因为（ ）
A.制作工具选择不合理
B.色彩选择不合理
C.版面设计不合理
D.语言使用不合理
3.网页的版面设计是否精美是吸引网民访问网站的重要因素之一。下列关于版面设 计的叙述，错误的是（ ） A.网页版面布局可按创意草案、粗略布局、最后定案三个步骤来进行 B.可以根据自己的想法在纸上绘制初步的版面布局创意图 C.版面设计包括风格设计、布局设计和交互设计 D.版面布局就是将网页需要呈现的内容进行合理的放置
A.浏览网页时速度更快
B.制作网页时更快捷
C.修改网页时更容易
D.上传网页时速度更快
6.网站建设开发的流程比较合理的是（ ） A.确定设计风格、规划网站结构一确定主题及制作工具一收集素材、制作网页一发布网站 B.确定主题及制作工具一收集素材、制作网页一确定设计风格、规划网站结构一发布网站 C.收集素材、制作网页一确定主题及制作工具一确定设计风格、规划网站结构一发布网站 D.确定主题及制作工具一确定设计风格、规划网站结构一收集素材、制作网页一发布网站
6、“匡”字形布局：这种布局结构给主内容区释放了更多空间，内容虽看起来比较多，但布 局整齐又不过于拥挤，适合一些下载类和贺卡类站点使用。
7、“三”字形布局：一般应用在简洁明快的艺术性网页布局，这种布局一般采用简单的图片 和线条代替拥挤的文字，给浏览者以强烈的视觉冲击。
8Biblioteka Baidu“川”字型布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最 大限度地突出主页的索引功能，一般适用在栏目较多的网站里。
第一级栏目如下图示：
当然，还可以有二级栏目或三级栏目：
3
二、网页版面设计
网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等， 需要进行合理的放置，让人看起来井井有条，主次分明。
一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放 置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。
1、网站标志 树立网站整体风格的第一步是：设计、制作一个网站的标志(logo)，将你的标
志尽可能地放置在每个页面最突出的位置上，或者页眉，或者页脚，或者背景。如 同商标一样，看见标志就让大家联想起你的网站。 设计标志有这样几种方法： (1) 选择与网站主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本， 加以卡通化和艺术化。例如搜狐网站的卡通狐狸。 (2) 对于专业性的网站，可以以本专业有代表的物品作为标志。比如中国银行的铜 板标志。 (3) 最常用和最简单的方式是用自己网站的中文或者英文名称作标志。采用不同的 字体、字母的变形与组合，可以很容易制作出自己的标志。比如百度，Google。
1
网站栏目、版面设计
2
网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设 法吸引人们的关注，并为浏览者提供方便的访问。 一、网页栏目设计
设计一个网站与编写一本书有相似之处，开始着手写书之前，首先要进行 总体构思，拟定书的编写目录，然后才按章节组织编写内容。同样制作网站前 要设计好网站的栏目。 请大家观看南京大学的网站： http://www.nju.edu.cn
1.下列选项中属于网页文件的是（ ）
A.index.gif
B.index.swf
C.index.htm
D.index.wav
2.Microsoft Access 软件是一种（ ） A.数据处理软件 B.文字处理软件 C.数据库管理软件
D.数据库应用软件
3.电子邮件的附件中很容易传播病毒木马。以下附件中，最有可能是病毒木马的是（ ）
9、对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色一半浅色，一般用于 设计型站点。优点是视觉冲击力强，缺点是很难将两部分有机地结合起来。
10、FLASH布局：FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这 种布局中，大部分甚至整个页面都是Flash。
7
巩固练习：
6
常见页面布局样式：
4、“口”字型。页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是 主要内容。优点：充分利用版面，信息量大，与其他页面的链接多，切换方便；缺点：页面 拥挤，不过灵活。
5、标题正文型。标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页 面等，其特点是简洁明快，干扰信息少，较为正规。
版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。 版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。
常见页面布局样式：
1、“T”字型：也称“厂”字型，页面顶部为主菜单以及横条网站标志+广告条，下方左面为 导航菜单，右面显示内容的布局。优点：页面结构清晰，主次分明；缺点：呆板，如果细节 色彩上不注意，容易“看之无味”。
8
网站风格设计
9
一、风格设计
风格是指网站的整体形象给浏览受。有的严肃计策、有的清爽温馨、有的 深沉厚重、有的生动活泼、有的古朴典雅、有的豪迈奔放。风格设计与主题是密 不可分的，是为突出主题服务的。
一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的 搭配、字体图片的样式设置、网站的标志设计等，同一个网站的各网页之间应保 持风格一致。
A.密码破解.exe
B.初稿.txt
C.小苹果.mp3
D.登记照.jpg
4.网站的规划与建设按时间顺序可分为以下五个阶段，正确的顺序是（ ） ①设计②宣传推
广③运行维护④策划⑤制作
A.①③②④⑤
B.④③②⑤①
C.④①③②⑤
D.④①⑤②③
5.网页中的图片一般都是gif或jpg格式的，使用这种图片格式的好处是（ ）
4
常见页面布局样式： 2、“国”字型，也称“同”字型。即最上面是网站的标题以及横幅广告条，接下来就 是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底， 最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见 到的差不多最多的一种结构类型。
5
常见页面布局样式： 3、自由式。又称POP布局页面布局像一张宣传海报，以一张精美图片作为页面的设 计中心，菜单栏目自由摆放。优点：漂亮、吸引人，适宜于艺术类网站。缺点：显 示速度慢，文字信息量少。
1.如果一个网站的栏目设置不合理，可能导致网站（ ）
A.不能正常运行
B.目录结构不清晰、内容混乱
C.没有自己的整体风格
D.浏览时速度比较慢
2.如果一个网页给人的感觉是内容杂乱无序，主次不分，这主要是因为（ ）
A.制作工具选择不合理
B.色彩选择不合理
C.版面设计不合理
D.语言使用不合理
3.网页的版面设计是否精美是吸引网民访问网站的重要因素之一。下列关于版面设 计的叙述，错误的是（ ） A.网页版面布局可按创意草案、粗略布局、最后定案三个步骤来进行 B.可以根据自己的想法在纸上绘制初步的版面布局创意图 C.版面设计包括风格设计、布局设计和交互设计 D.版面布局就是将网页需要呈现的内容进行合理的放置
A.浏览网页时速度更快
B.制作网页时更快捷
C.修改网页时更容易
D.上传网页时速度更快
6.网站建设开发的流程比较合理的是（ ） A.确定设计风格、规划网站结构一确定主题及制作工具一收集素材、制作网页一发布网站 B.确定主题及制作工具一收集素材、制作网页一确定设计风格、规划网站结构一发布网站 C.收集素材、制作网页一确定主题及制作工具一确定设计风格、规划网站结构一发布网站 D.确定主题及制作工具一确定设计风格、规划网站结构一收集素材、制作网页一发布网站
6、“匡”字形布局：这种布局结构给主内容区释放了更多空间，内容虽看起来比较多，但布 局整齐又不过于拥挤，适合一些下载类和贺卡类站点使用。
7、“三”字形布局：一般应用在简洁明快的艺术性网页布局，这种布局一般采用简单的图片 和线条代替拥挤的文字，给浏览者以强烈的视觉冲击。
8Biblioteka Baidu“川”字型布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最 大限度地突出主页的索引功能，一般适用在栏目较多的网站里。
第一级栏目如下图示：
当然，还可以有二级栏目或三级栏目：
3
二、网页版面设计
网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等， 需要进行合理的放置，让人看起来井井有条，主次分明。
一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放 置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。
1、网站标志 树立网站整体风格的第一步是：设计、制作一个网站的标志(logo)，将你的标
志尽可能地放置在每个页面最突出的位置上，或者页眉，或者页脚，或者背景。如 同商标一样，看见标志就让大家联想起你的网站。 设计标志有这样几种方法： (1) 选择与网站主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本， 加以卡通化和艺术化。例如搜狐网站的卡通狐狸。 (2) 对于专业性的网站，可以以本专业有代表的物品作为标志。比如中国银行的铜 板标志。 (3) 最常用和最简单的方式是用自己网站的中文或者英文名称作标志。采用不同的 字体、字母的变形与组合，可以很容易制作出自己的标志。比如百度，Google。
1
网站栏目、版面设计
2
网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设 法吸引人们的关注，并为浏览者提供方便的访问。 一、网页栏目设计
设计一个网站与编写一本书有相似之处，开始着手写书之前，首先要进行 总体构思，拟定书的编写目录，然后才按章节组织编写内容。同样制作网站前 要设计好网站的栏目。 请大家观看南京大学的网站： http://www.nju.edu.cn