网站的设计优质PPT.ppt
- 文档编号:15040979
- 上传时间:2022-10-27
- 格式:PPT
- 页数:27
- 大小:7.25MB
网站的设计优质PPT.ppt
《网站的设计优质PPT.ppt》由会员分享,可在线阅读,更多相关《网站的设计优质PPT.ppt(27页珍藏版)》请在冰豆网上搜索。
要求:
填写“任务文档.doc”中的任务一中的表格。
第二、版面设计v网海茫茫,能够吸引我们眼球的只有那些有特色的网网海茫茫,能够吸引我们眼球的只有那些有特色的网页,大量的网页引不起网民的兴趣,究其原因,站点页,大量的网页引不起网民的兴趣,究其原因,站点内容是否丰富是其中一个方面,而网页的版面设计是内容是否丰富是其中一个方面,而网页的版面设计是否精美也是重要因素之一。
否精美也是重要因素之一。
v版面结构是指将不同元素巧妙排列的方式,合理的版版面结构是指将不同元素巧妙排列的方式,合理的版面结构能够使浏览者清楚、容易地理解作品传达的信面结构能够使浏览者清楚、容易地理解作品传达的信息。
息。
v布局就是以最适合浏览的方式将图片和文字排放在页布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。
网页要呈现的内容很多,如何合理地面的不同位置。
网页要呈现的内容很多,如何合理地放置信息,使之井井有条、主次分明是版面布局需要放置信息,使之井井有条、主次分明是版面布局需要考虑的问题。
考虑的问题。
常见页面布局样式(第一种)常见样式特点布局形式“厂”字型页面顶部为主菜单以及横条页面顶部为主菜单以及横条网站标志网站标志+广告条,下方左面广告条,下方左面为主菜单,右面显示内容的为主菜单,右面显示内容的布局布局优点:
页面结构清晰,优点:
页面结构清晰,主次分明;
主次分明;
缺点:
呆板,如果细节色缺点:
呆板,如果细节色彩上不注意,容易彩上不注意,容易“看之无看之无味味”参考示例参考示例主菜单以及横条网站标志主菜单以及横条网站标志+广告条广告条显显示示内内容容主主菜菜单单常见页面布局样式(第二种)常见样式特点布局形式“口口”字型字型页面一般上下各有一个广告页面一般上下各有一个广告条,左面是主菜单,右面放条,左面是主菜单,右面放友情链接等,中间是主要内友情链接等,中间是主要内容容优点:
充分利用版面,信优点:
充分利用版面,信息量大,与其他页面的链接多,息量大,与其他页面的链接多,切换方便;
切换方便;
页面拥挤,不过灵活缺点:
页面拥挤,不过灵活主菜单广告条主要内容友情链接等参考示例参考示例常见页面布局样式(第三种)常见样式特点布局形式自由式:
自由式:
又称又称POPPOP布局页面布局像一布局页面布局像一张宣传海报,以一张精美张宣传海报,以一张精美图片作为页面的设计中心,图片作为页面的设计中心,菜单栏目自由摆放菜单栏目自由摆放优点:
漂亮、吸引人,优点:
漂亮、吸引人,适宜于艺术类网站适宜于艺术类网站缺点:
显示速度慢,文缺点:
显示速度慢,文字信息量少字信息量少页面布局像一张宣传海报,以一张精美图片作为页面的设计中心,菜单栏目自由摆放。
参考示例参考示例怎样设计版面?
一般来说,网页版面布局可按一般来说,网页版面布局可按创意草案、粗略布局、最后定案创意草案、粗略布局、最后定案三个步骤来进行。
三个步骤来进行。
下面我们来看下面我们来看“机器人做学玩机器人做学玩”网站的版面布局图:
网站的版面布局图:
标题栏(网站标志及广告条)标题栏(网站标志及广告条)子栏目子栏目名名称称主要内容内容提示内容提示附加信息附加信息第三、树立网站整体风格网网站站风风格格粗犷豪放粗犷豪放清新秀丽清新秀丽温文尔雅温文尔雅执着热情执着热情第一步:
设计、制作一个网站的标志(logo)标志可以是中文、英文字母,可以是符号、图案,可以是动物或者人物等。
标志的设计创意来自你网站的名称和内容。
一般来说,设计标志有这样几种方法:
(11)选择与网站主题有关的,并具有代表性的人或物,用它们为设)选择与网站主题有关的,并具有代表性的人或物,用它们为设计蓝本,加以卡通化和艺术化。
如搜狐网站的狐狸尾巴计蓝本,加以卡通化和艺术化。
如搜狐网站的狐狸尾巴(22)对于专业性的网站,可以是本专业有代表的物品作为标志,比)对于专业性的网站,可以是本专业有代表的物品作为标志,比如中国银行的铜板标志。
如中国银行的铜板标志。
(33)最常用和最简单的方式是用自己网站的中文或英文名称作标志。
)最常用和最简单的方式是用自己网站的中文或英文名称作标志。
采用不同的字体、字母的变形与组合,可以很容易制作出自己的标采用不同的字体、字母的变形与组合,可以很容易制作出自己的标志。
志。
“机器人做学玩机器人做学玩”网站标志。
网站标志。
R是机器人“robot”第一个字母,R分割成两部分,上面是“做”的英文单词do的首字母D,下部分可看成“人”字,蕴涵制作机器人的意思LOGO欣赏任务二:
完成任务文档中的任务二和任务三。
第二步:
设计网站的标准色彩网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩;
图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩,色彩;
图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩,这样给人以这样给人以整体统一整体统一的感觉。
的感觉。
我们来浏览一些网站是如何运用色彩树立风格的:
蓝色调为主,加上白色和蓝色调为主,加上白色和红色,强调权威与真实红色,强调权威与真实橙色为主,白色为辅,具有橙色为主,白色为辅,具有轻快、时尚的效果轻快、时尚的效果第二步:
设计网站的标准色彩红色为主,产生热情、活力的红色为主,产生热情、活力的感觉、充满欢乐气氛感觉、充满欢乐气氛绿色为主,白色为辅,产生舒适、绿色为主,白色为辅,产生舒适、优雅、适于阅读的气氛优雅、适于阅读的气氛网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩;
图片的主色彩、背景色、边框等尽量使用标准色彩同色系标准色彩;
图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩,这样给人以的色彩,这样给人以整体统一整体统一的感觉。
设计网站的标准色彩网站色彩设计的总体原则网站色彩设计的总体原则“总体协调,局部对比总体协调,局部对比”。
一个。
一个网站的标准色彩网站的标准色彩不超过不超过33种种,太多则使人眼花缭乱。
至于其它色彩,也,太多则使人眼花缭乱。
至于其它色彩,也可以作为可以作为点缀和衬托点缀和衬托,决不能喧宾夺主。
,决不能喧宾夺主。
色彩太多、跟主色调不协调黄颜色,眼睛容易疲劳、不在同一色系第三步:
设计网站的标准字体设计网站的标准字体设计网站的标准字体,指在关键的标题、主菜单、图片里,指在关键的标题、主菜单、图片里使用使用统一统一的标准字体。
的标准字体。
一般网页默认的字体是宋体。
各种字体大都具有各自不同一般网页默认的字体是宋体。
各种字体大都具有各自不同的性格,如的性格,如黑体字凝重、宋体字端庄、隶书飘逸、楷体淡雅黑体字凝重、宋体字端庄、隶书飘逸、楷体淡雅等等等。
体现专业可以用粗仿宋体,体现设计精美可以用广告体,等。
体现专业可以用粗仿宋体,体现设计精美可以用广告体,体现亲切随意可以用手写体等。
体现亲切随意可以用手写体等。
p以上三个方面,标志、色彩和字体,是一个网站树立整体形象的关键,设计并完成这几步,相信你的网站整体形象已经有了一个很大的提高。
简洁大方简洁大方风格风格独特独特,构图巧妙构图巧妙生动活泼生动活泼色彩色彩丰富丰富浓郁的文化气息浓郁的文化气息任务三:
完成任务文档中的任务四。
第四、收集素材v“内容为王内容为王”依然是网站成功的关键,没有丰富的内容就不可依然是网站成功的关键,没有丰富的内容就不可能让浏览者觉得对自己有用,如果内容空洞,无论页面制作得能让浏览者觉得对自己有用,如果内容空洞,无论页面制作得如何精美,仍然不会有多少浏览者。
如何精美,仍然不会有多少浏览者。
v在收集素材的过程中要注意以下三个方面:
在收集素材的过程中要注意以下三个方面:
11、要注意对收集来的素材分类。
、要注意对收集来的素材分类。
22、文件名要易懂易记;
、文件名要易懂易记;
33、要注意保护知识产权,避免侵犯别人的版权。
、要注意保护知识产权,避免侵犯别人的版权。
课堂小结v栏目设置栏目设置v版面设计版面设计“厂厂”字型字型“口口”字型字型自由式自由式v树立整体风格树立整体风格网站标志、标准色彩、标准字体网站标志、标准色彩、标准字体v收集素材收集素材
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 设计