网站的设计——建立自己的主题网站

1、4.2 网站的设计高青一中 张丽丽一、了解网站设计的基本内容二、依据主题，设计网站的栏目和版面三、通过设计主题网站，体验设计在建立网 站中的重要性学习目标：学习目标：设计制作一个网站，应该从哪些方面着手？一、确定主题二、栏目设置三、版面设计四、树立网站整体风格五、收集素材网站实例欣赏网站名称：网站名称：网站主题：网站主题：展示、推广学生文学原创作品，给华语文学爱好者提供交流的平台栏目设置栏目设置 栏目设置需注意：栏目设置需注意：（1 1）要紧扣主题，尽可能删除与主题无关的栏目）要紧扣主题，尽可能删除与主题无关的栏目（2 2）尽可能将网站最有吸引力的内容列在栏目上）尽可能将网站最有吸引力的内容列

2、在栏目上（3 3）尽可能方便访问者的浏览和查询。如：设置）尽可能方便访问者的浏览和查询。如：设置“本站指本站指南南”或或“网站地图网站地图”栏目可以帮助初访者快速找到他们想栏目可以帮助初访者快速找到他们想要的内容要的内容一、栏目设置一、栏目设置网站名称网站名称栏目名称栏目名称内容描述内容描述非常不一班非常不一班班级介绍班级介绍简介班级情况简介班级情况班级故事班级故事介绍班级的好人好事介绍班级的好人好事校园图书馆校园图书馆介绍学校的图书馆介绍学校的图书馆李明的博客李明的博客介绍李明的个人博客介绍李明的个人博客班级人物班级人物介绍班级的优秀学生介绍班级的优秀学生站点内服务站点内服务给浏览者留出发表

3、意见的给浏览者留出发表意见的空间空间思考：下面是一个班级主页的栏目设置，哪些地方设计不合理？还可以为这个班级主页添加一些栏目吗？一、栏目设置一、栏目设置 任务一：分组确定网站主题，并围绕主题设计网站的栏目 小组中的每位同学经过讨论、交流，填写以下内容 网站主题：网站名称：网站栏目名称 本栏目主要内容一、栏目设置一、栏目设置常见样式特点布局形式“厂”字型页面顶部为主菜单以及横页面顶部为主菜单以及横条网站标志条网站标志+ +广告条，下方广告条，下方左面为主菜单，右面显示左面为主菜单，右面显示内容的布局内容的布局 优点：页面结构清晰，优点：页面结构清晰， 主次分明；主次分明； 缺点：呆板，如果细节缺

4、点：呆板，如果细节色彩上不注意，容易色彩上不注意，容易“看看之无味之无味”参考示例参考示例主菜单以及横条网站标志主菜单以及横条网站标志+广告条广告条主要内容主菜单二、版面设计二、版面设计常见样式特点布局形式“口口”字型字型页面一般上下放主菜单和页面一般上下放主菜单和广告条，左面是主菜单，广告条，左面是主菜单，右面放友情链接等，中间右面放友情链接等，中间是主要内容是主要内容 优点：充分利用版面，信息量优点：充分利用版面，信息量大，与其他页面的链接多，切大，与其他页面的链接多，切换方便；换方便； 缺点：页面拥挤，不够灵活缺点：页面拥挤，不够灵活主菜单主菜单和广告条主要内容友情链接等参考示例参考示例二、版面设计二、版面设计常见样式特点布局形式自由式：自由式：又称又称POPPOP布局，页面布局像布局，页面布局像一张宣传海报，以一张精美一张宣传海报，以一张精美图片作为页面的设计中心，图片作为页面的设计中心，菜单栏目自由摆放菜单栏目自由摆放优点：漂亮、吸引人，适优点：漂亮、吸引人，适宜于艺术类网站宜于艺术类网站缺点：显示速度慢，文字缺点：显示速度慢，文字信息量少信息量少自由式自由式 参考示例参考示例二、版面设计二、版面设计二、版面设计二、版面设计标题栏（网站标志及广告条）标题栏（网站标志及广告条）栏目设置栏目设置内容设置内容设置小结小结一、栏目设置一、栏目设