网站的设计——建立自己的主题网站范例.ppt

4.2 网站的设计 高青一中 张丽丽 一、了解网站设计的基本内容 二、依据主题，设计网站的栏目和版面 三、通过设计主题网站，体验设计在建立网 站中的重要性 学习目标： 设计制作一个网站，应该从哪些方面着手？ 一、确定主题 二、栏目设置 三、版面设计 四、树立网站整体风格 五、收集素材 网站实例欣赏 网站名称： 网站主题： 展示、推广学生文学原创作品，给华语文学爱好者提供交流的平台 栏目设置 栏目设置需注意： （1）要紧扣主题，尽可能删除与主题无关的栏目 （2）尽可能将网站最有吸引力的内容列在栏目上 （3）尽可能方便访问者的浏览和查询。如：设置“本站指南”或“网站地图”栏目可以帮助初访者快速找到他们想要的内容 一、栏目设置 网站名称 栏目名称 内容描述 非常不一班 班级介绍 简介班级情况 班级故事 介绍班级的好人好事 校园图书馆 介绍学校的图书馆 李明的博客 介绍李明的个人博客 班级人物 介绍班级的优秀学生 站点内服务 给浏览者留出发表意见的空间 思考：下面是一个班级主页的栏目设置，哪些地方设计不合理？还可以为这个班级主页添加一些栏目吗？ 一、栏目设置 任务一：分组确定网站主题，并围绕主题设计网站的栏目 小组中的每位同学经过讨论、交流，填写以下内容 网站主题： 网站名称： 网站栏目名称 本栏目主要内容 一、栏目设置 常见样式 特点 布局形式 “厂”字型 页面顶部为主菜单以及横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局 优点：页面结构清晰， 主次分明； 缺点：呆板，如果细节色彩上不注意，容易“看之无味” 参考示例 主菜单以及横条网站标志+广告条 主要内容 主菜单 二、版面设计 常见样式 特点 布局形式 “口”字型 页面一般上下放主菜单和广告条，左面是主菜单，右面放友情链接等，中间是主要内容 优点：充分利用版面，信息量大，与其他页面的链接多，切换方便； 缺点：页面拥挤，不够灵活 主菜单 主 菜 单 和 广 告 条 主要内容 友情链接等 参考示例 二、版面设计 常见样式 特点 布局形式 自由式： 又称POP布局，页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放 优点：漂亮、吸引人，适宜于艺术类网站 缺点：显示速度慢，文字信息量少 自由式 参考示例 二、版面设计 二、版面设计 标题栏（网站标志及广告条） 栏目设置 内容设置 小结 一、栏目设置 紧扣主题 有吸引力 方便浏览者查询 二、版面设计 主次分明 井井有条 页面布局合理