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

教师备课纸苏州工业职业技术学院Suzhou Institute Of Industrial Technology第 13 页教师备课首页苏州工业职业技术学院Suzhou Institute Of Industrial Technology第 1 页课题子项目一第3讲 确定网页的布局、色彩、站点结构课型实践授课班级授课时数2教学目标1. 分析开发的项目，根据项目的特色确定网站的站点结构2. 根据项目的特色确定网站的色彩定位3. 根据项目的特色确定网站的网页布局教学重点能够对项目进行合理的分析，并根据本小组对项目的理解确定网站的站点结构、色彩定位以及网站的网页布局教学难点能够对项目进行合理的分析，并根据本小组对项目的理解确定网站的站点结构、色彩定位以及网站的网页布局学情分析教学效果教 后 记对各小组制作的项目开发进度表中存在的问题进行说明。新授：一、结构设计设计网站的结构首先要明确网站的内容。将所有要应用到网站上的素材资料列举出来，根据内容设计一个结构蓝图。比如说网站的主页是什么？网站有哪些栏目？要划分几个版块？怎么设置各栏目或者各网页之间的链接？如果内容过多，绘制一个导航图也是非常有必要的。【举例】下图为参考项目“网上书店”的网站结构蓝图主页（首页）新书展示畅销图书天天特价网上订单详细介绍详细介绍详细介绍【阶段任务1】请在Word中为你开发的网站绘制一幅结构蓝图。绘制完成以“第X组（开发的网站名）网站结构蓝图”为名保存文档。【要求】第一：以主页为根，绘制树状结构蓝图。第二：结构完整、合理，思路清晰。二、关于网页布局网页可以说是网站构成的基本元素。对于网页设计者来说，网页的布局设计相当重要。搞网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候我们要注意把文字、图像在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。只有当网页布局和网页内容成功融合时，这种网页才是受人喜欢的。我们常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。a“国”字型布局也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 “国”字型b“匡”字型布局这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 “匡”字型c“三”字型布局这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。 “三”字型d“川”字型布局整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。 “川”字型e封面型布局这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。封面型fFlash布局这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。Flash布局g标题文本型布局标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。 标题文本型h框架型布局采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。左右框架型上下框架型综合框架型i变化型布局即上述几种类型的结合与变化。变化型三、形象设计打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，我们必须要高度重视色彩的搭配。1、色彩的基础知识色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色(如蓝色)给人的感觉是安静、冰冷；而暖色(如红色)给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥橙色代表光明、华丽、兴奋、甜蜜、快乐黄色代表明朗、愉快、高贵、希望绿色代表新鲜、平静、和平、柔和、安逸、青春蓝色代表深远、永恒、沉静、理智、诚实、寒冷紫色代表优雅、高贵、魅力、自傲白色代表纯洁、纯真、朴素、神圣、明快灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞黑色代表崇高、坚实、严肃、刚健、粗莽红色主题橙色主题黄色主题绿色主题蓝色主题紫色主题白色主题灰色主题黑色主题2、色彩搭配的原则色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。a特色鲜明一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。b搭配合理网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。 c讲究艺术性网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。3、色彩搭配要注意的问题a使用单色尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。b使用邻近色所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。c使用对比色对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。d黑色的使用黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。e背景色的使用背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。f色彩的数量一般初学者在设计网页时往往使用多种颜色