多媒体计算机应用基础项目十二 设计制作“我的班级”网站

1．色彩简介
人们肉眼所能看到的所有颜色都是由红、黄、蓝三种基本原色构成的。基本原色也就是我们通常所说 的三原色。
原色，又称为基色，是用于调配其他色彩的基本色；将原色以不同比例混合，可以产生其他新颜色。 原色的色纯度最高、最纯净、最鲜艳，可以调配出绝大多数色彩，而其他颜色不能调配出三原色。 2．色彩特征
1．网页 网页(Web page)，是网站中的一“页”，通常是由HTML语言（超文本标记 语言）创建的，在网页上点单击鼠标右键，选择菜单中的【查看源文件】 ， 就可以通过记事本看到网页的代码内容。 2．网站 网站(Web site)是指在Internet上，根据一定的规则，利用HTML等工具制作的 用于展示特定内容的相关网页的集合，这些网页通过各种链接相关联，实现 网页之间的跳转。 3．主页 主页（HomePage），是进入一个网站看到的第一个网页，相当于网站的目 录或者封面，集成了指向下一级网页及进入其他网站的链接，浏览者可以通 过主页访问到整个网站的内容。
一、栏目设置 紧扣主题 有吸引力 方便浏览者查询
二、版面设计 主次分明 井井有条 页面布局合理
网站主题：
展示、推广学生 文学原创作品， 给华语文学爱好 者提供交流的平 台
网站名称：
栏目设置
一、栏目设置
栏目设置需注意： （1）要紧扣主题，尽可能删除与主题无关的栏目 （2）尽可能将网站最有吸引力的内容列在栏目上 （3）尽可能方便访问者的浏览和查询。如：设置“本站指南”或“网站地图” 栏目可以帮助初访者快速找到他们想要的内容
一般情况下，网页中除了包含网页文件（扩展名为.html，.asp等）外， 还要用到图像文件（扩展名为.jpg，.png，.gif等）、Flash动画文件（扩展 名为.swf）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视 频文件（扩展名为.avi，.flv等）等。在浏览器中选择“文件”>“另存为” 菜单，将网页保存到磁盘中，便可看到网页的组成文件。
（2）网站导航
导航栏是一组链接到网站内主要页面的超链接组合，一般由多个按钮或 者多个文本超链接组成，通过单击这些超链接可以轻松打开网站中的各个页 面。
常见的网站导航有横排导航、竖排导航、下拉菜单式导航等。
（3）广告条
广告条又称Banner，其功能是宣传网站或为其他商品做广告。
在制作Banner时，有以下几点需要注意。
网站开发流程
网站开发流程是指从企业计划建设网站到网站建设完成的一套规范化运作 过程。
简单来说，可以把网站开发流程归纳为以下三个阶段： （1）规划和准备阶段； （2）网页设计与制作阶段； （3）网站的发布、推广和维护阶段。
设计制作一个网站，具体应该从哪些方面着手？
一、确定主题 二、栏目设置 三、版面设计 四、树立网站整体风格 五、收集素材
显示内容的布局
注意，容易“看之无味”
参考示例
主菜单以及横条网站标志+广告条
主菜单
主要内容
常见样式
特点
“口”字型
页面一般上下放主菜单和广告条， 优点：充分利用版面，信息量大，与其
左面是主菜单，右面放友情链ቤተ መጻሕፍቲ ባይዱ等，他页面的链接多，切换方便；
中间是主要内容
缺点：页面拥挤，不够灵活
主菜单
参考示例
二、版面设计
给浏览者留出发表意见的 空间
任务一：分组确定网站主题， 并围绕主题设计网站的栏目
小组中的每位同学经过讨论、 交流，填写以下内容
一、栏目设置
网站主题：
网站名称：
网站栏目名 称
本栏目主要内容
常见样式
特点
布局形式
“厂”字型
优点：页面结构清晰， 主次
页面顶部为主菜单以及横条网站标志 分明；
+广告条，下方左面为主菜单，右面 缺点：呆板，如果细节色彩上不
一、栏目设置
思考：下面是一个班级主页的栏目设置，哪些地方设计不合理？还可以为这 个班级主页添加一些栏目吗？
网站名称 非常不一班
栏目名称 班级介绍 班级故事 校园图书馆 李明的博客 班级人物
站点内服务
内容描述 简介班级情况 介绍班级的好人好事 介绍学校的图书馆 介绍李明的个人博客 介绍班级的优秀学生
4．网页的构成元素 从功能角度分析网站，可将网页中的元素分为站标、导航条、广告条、标题 栏和按钮等。
站标
导航条
广告条
标题栏
（1）站标
站标也叫Logo，是网站的标志，也是网站特色和内涵的集中体现。 网站的标志就如同商标一样，其作用是树立形象、传递信息以及品牌拓 展。因此，网站Logo通常采用企业的Logo。
教学目标： 1、了解网页设计基本知识以及网站设计基本流程 2、熟悉DW工作环境及基本配色原则 3、掌握根据主题选择合适的布局方案。 教学重点与难点： 1、在DW中实现相应的布局 2、使用DW在相应布局中插入各种网络元素，制作出精美的网页 教学过程： 1 网页基础知识概述 2 网站制作一般过程 3 任务-设计制作“我的班级”网站 4 任务拓展
从色彩的功能上来看，它具有以下基本特征。 （1）色彩的冷暖 （2）色彩的轻重 （3）色彩的软硬 （4）色彩的缩扩
网站配色原则
每个网站都有区别于其他网站的风格，同时也有其独特的颜色。由于每 种颜色都有不同的代表意义，可以分为行业色彩、区域色彩、企业色彩、宗 教色彩以及风格色彩这5类色彩类型。
在进行网页配色的时候，要充分考虑各种色彩所代表的意义是否和网站 的主题一致。
•Banner可以是静态的，也可以是动态的。 •Banner的体积不宜过大，尽量使用GIF格式图片 与动画或Flash动画。 •Banner中的文字不要太多，只要达到一定的提 醒效果就可以。 •Banner中图片的颜色不要太多，尤其是GIF格式 的图片或动画。
（4）标题栏
此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是 各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏 览者。
布局形式
友情链接等
主
菜
单
和
广
告
主要内容
条
常见样式
特点
自由式：
优点：漂亮、吸引人，适宜于艺
又称POP布局，页面布局像一张宣传 术类网站
海报，以一张精美图片作为页面的 缺点：显示速度慢，文字信息量
设计中心，菜单栏目自由摆放
少
参考示例
二、版面设计
布局形式
自由式
栏目设置
标题栏（网站标志及广告条） 内容设置