document09

网站首页网站首页设计设计网站成功与否的关键网站成功与否的关键

LOGOLOGO

网站策划与构建网站策划与构建


首页设计的步骤

第一步：确定首页的功能模块第一步：确定首页的功能模块必需栏目：必需栏目：网站名称（网站名称（ LOGOLOGO ））广告条（广告条（ BANNERBANNER ））主菜单（主菜单（ MENUMENU ））新闻（新闻（ WHAT’S WHAT’S

NEWNEW ））搜索（搜索（ SEARCHSEARCH ））链接（链接（ LINKSLINKS ））版权（版权（ COPYRIGHTCOPYRIGHT ））

注意根据你的网站定位来确定内容模块注意根据你的网站定位来确定内容模块


思考：

我们学院我们学院 2020 周年的校庆网，它的网站定位周年的校庆网，它的网站定位是什么？是什么？

建立学院校庆专题网页，在学院网站建立学院校庆专题网页，在学院网站和新闻媒体上适时公布校庆公告、校庆和新闻媒体上适时公布校庆公告、校庆信息及有关校庆活动的各种通知、章程信息及有关校庆活动的各种通知、章程、办法等。、办法等。


校庆网的首页模块

校庆祝辞校庆祝辞11

校庆动态校庆动态22

校庆公告校庆公告33

校庆征文选登校庆征文选登44

校友风采校友风采55

校友登陆框校友登陆框66

回顾与展望回顾与展望77

标志释义标志释义88

你的意见如何？你的意见如何？哪些可以保留，哪些可以保留，哪些可以删除，哪些可以删除，另外可以加入哪另外可以加入哪些模块些模块 ??



第二步版面布局第二步版面布局草案草案 ------ 粗略布局粗略布局 ------ 定案定案

现在的现在的布局风格布局风格



请你根据上面的分析和规划，自己画制一个请你根据上面的分析和规划，自己画制一个版面草图，并标明模块的名称版面草图，并标明模块的名称



根据版面草图，为不同的模块设定一定的颜根据版面草图，为不同的模块设定一定的颜色。（色。（ P94P94 ））

学院的校庆网，本身的标志是红色，所学院的校庆网，本身的标志是红色，所以，在版面设计中，使用了与红色的同例色，以，在版面设计中，使用了与红色的同例色，两者之间没有太多的对比度，但是它符合中两者之间没有太多的对比度，但是它符合中国传统上的红与黄的喜庆搭配，从这个方面国传统上的红与黄的喜庆搭配，从这个方面来说，选择上还是很符合实际需要的。来说，选择上还是很符合实际需要的。



设计设计 LOGOLOGO 和和 BANNERBANNER 的位置和形状的位置和形状注意：一般情况下注意：一般情况下 LOGOLOGO 和和 BANNERBANNER

的位置都处于网站首页的顶部，位于同一行，的位置都处于网站首页的顶部，位于同一行，但为了保持网页的风格有变化，建议最好给但为了保持网页的风格有变化，建议最好给予一定形式的变形，增加动感。予一定形式的变形，增加动感。演示演示



设计导航条位置和形状设计导航条位置和形状注意对比度和形状搭配，另外，考虑好导注意对比度和形状搭配，另外，考虑好导

航条的位置应以浏览者的习惯设置，一般处航条的位置应以浏览者的习惯设置，一般处于网页的上部或左部。于网页的上部或左部。


练习

请自主设计一个网页的上部请自主设计一个网页的上部



栏目细节处理栏目细节处理形状形状颜色颜色装饰图片装饰图片 PSPS ，，注意注意 P85P85 内容内容


其它补充

网页装饰元素的使用原则和方法请参照教材网页装饰元素的使用原则和方法请参照教材第三章第第三章第 33节的内容，看完后请说出至少五节的内容，看完后请说出至少五种在校庆网上必须使用的基本元素。种在校庆网上必须使用的基本元素。

document09

Education