第3讲 确定网页的布局、色彩、站点结构.docVIP

教师备课纸苏州工业职业技术学院 教师备课纸 Suzhou Institute Of Industrial Technology 第 PAGE 3 页 PAGE 教师备课首页苏州工业职业技术学院 教师备课首页 Suzhou Institute Of Industrial Technology 第 1 页 课　　题 子项目一 第3讲 确定网页的布局、色彩、站点结构 课　　型 实践 授课班级 授课时数 2 教学目标 分析开发的项目，根据项目的特色确定网站的站点结构 根据项目的特色确定网站的色彩定位 根据项目的特色确定网站的网页布局 教学重点 能够对项目进行合理的分析，并根据本小组对项目的理解确定网站的站点结构、色彩定位以及网站的网页布局 教学难点 能够对项目进行合理的分析，并根据本小组对项目的理解确定网站的站点结构、色彩定位以及网站的网页布局 学情分析 教学效果 教 后 记 对各小组制作的项目开发进度表中存在的问题进行说明。 新授： 一、结构设计 设计网站的结构首先要明确网站的内容。将所有要应用到网站上的素材资料列举出来，根据内容设计一个结构蓝图。比如说网站的主页是什么？网站有哪些栏目？要划分几个版块？怎么设置各栏目或者各网页之间的链接？如果内容过多，绘制一个导航图也是非常有必要的。 【举例】下图为参考项目“网上书店”的网站结构蓝图 主页（首页） 主页（首页） 新书展示 畅销图书 天天特价 网上订单 详细介绍 详细介绍 详细介绍 …… …… …… …… 【阶段任务1】 　　请在Word中为你开发的网站绘制一幅结构蓝图。绘制完成以“第X组（开发的网站名）网站结构蓝图”为名保存文档。 【要求】 第一：以主页为根，绘制树状结构蓝图。 第二：结构完整、合理，思路清晰。 二、关于网页布局 网页可以说是网站构成的基本元素。对于网页设计者来说，网页的布局设计相当重要。搞网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候我们要注意把文字、图像在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。只有当网页布局和网页内容成功融合时，这种网页才是受人喜欢的。 我们常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。 a．“国”字型布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 “国”字型 b．“匡”字型布局 这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 “匡”字型 c．“三”字型布局 这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。 “三”字型 d．“川”字型布局 整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。 “川”字型 e．封面型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 封面型 f．Flash布局 这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。 Flash布局 g．标题文本型布局 标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。 标题文本型 h．框架型布局 采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。 左右框架型 上下框架型 综合框架型 i．变化型布局 即上述几种类型的结合与变化。 变化型 三、形象设计 打开一个网站，给用户留下第