2网站设计基础二.doc

课 题Dreamweaver网站设计基础二授课日期2012年8月30日课型专业技术课时 数4节【教学目标及要求】知识目标: （1）建立网站的流程（2）网站设计的原则（3）网站设计的技巧（4）网页版面的布局（5）网页色彩搭配l能力目标:认识网站建设流程，将网站建设的原则、技巧运用到网页制作中。德育目标:l 激发学习热情与兴趣，养成良好的学习习惯。【教学重点与难点】l 网站设计的技巧l 网页色彩搭配【教学方法】演示法、案例教学法【教学教具或教学媒体形式】计算机机房1间教学过程教学内容时间分配及互动设计【导入新课】建立网站是一个系统工程，有自己特定的工作流程与原则，只有遵循一定的流程和原则，才能设计制作出一个令人满意的网站。本次课我们来学习网站建设的流程与网站设计的技巧、原则。10分钟【新课讲授】一、 网站开发流程1、初期规划：确定网站主题和名称搜集材料规划网站：设置栏目、设计目录结构、色彩搭配、网站的Logo、版面布局、图像的运用。 2、中期实际制作 制作网站 上传网站 3、后期维护二、网站设计的原则 （1）、内容与形式统一 （2）、主题鲜明（3）、风格统一（4）、网页应易读（5）、导航清晰（6）、兼顾下载速度与美观（7）、栏目设置合理（8）、网站介绍（9）、设置网页标题三、网站设计的技巧1、 构建网站的VI形像 设计网站的Logo 设计网站的标准色彩 设计网站的标准字体 设计网站的宣传标语2、 设计网站的整体风格3、 确定网站的目录结构4、 确定网站文件的命名规则5、 确定网站的链接结构四、网页版面布局 （1）、网页版面及页面尺寸： 网页版面是指在浏览器中看到的一个完整页面。因为每台显示分辨率不同，所以一个页面的大小可能出现不同的尺寸。 页面尺寸和显示器大小及分辨率有关。分辨率（像素）页面显示尺寸（像素）640*480620*311800*600780*4281024*7681007*600 （2）、布局原则： 、平衡性 、对称性 、对比性 、疏密性 、反复性 、韵律感 、比例 （3）、网页布局类型 、“国”字型（网易收费邮箱，/） 、拐角型（嘉丽雅化妆品有限公司网站，） 、“三”字型（/） 、“川”字型 、标题正文型布局（） 、左右框架型，（网易论坛） 、上下框架型 、综合框架型 、Flash型（/cn/） 、封面型（/）五、网页色彩搭配网页的色彩是树立网站形象的关键之一，色彩搭配是一般设计者很难把握的问题。网页的背景、文字、图标、边框、超链接等应该采用什么样的色彩、应该搭配什么色彩才能最好的表达出预想的效果？这是我们制作网页时必须考虑的问题。要解决好这些问题，就要先了解色彩的基本常识。 三原色理论，即红、黄、蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页HTML语言中的色彩表达即是用这三种颜色的数值表示，例如：红色是color(255,0,0)，十六进制的表示方法为(FF0000)，白色为(FFFFFF), 我们经常看到的“bgColor=#FFFFFF”就是指背景色为白色。 分非彩色系和彩色系两类。非彩色是指黑、白、灰系统色。彩色是指除了非彩色以外的所有色彩。 色彩三要素理论，即任何色彩都有饱和度和亮度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。由于彩色的记忆效果比黑白的好，也就是彩色页面较完全黑白页面更加吸引人。所以，在网页设计中通常的做法是：主要内容文字用非彩色(黑色)，边框、背景、图片用彩色。这样页面整体不显单调，主要内容也不会花乱。、色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。 红色是一种激奋的色彩。给人以刺激效果，能使人产生冲动、愤怒、热情、活力的感觉。 绿色介于冷暖两中色彩的中间，显得和睦、宁静、健康、安全的感觉。它和金黄、淡白搭配，可以产生优雅、舒适的气氛。 橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果 黄色具有快乐、希望、智慧和轻快的个性，它的明度最高。 蓝色是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺、淡雅、浪漫的气氛(象天空的色彩) 白色具有洁白、明快、纯真、清洁的感受。 黑色具有深沉、神秘、寂静、悲哀、压抑的感受。 灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。每种色彩在饱和度、透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、理智。（2）、网页色彩搭配的原理 色彩的鲜明性。网页的色彩要鲜艳，这样容易引人注目。 色彩的独特性。要有与众不同的色彩，使得大家对你的印象深刻。 色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性等。 色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空、黑色想到黑夜、红色想到喜事等，选择色彩一定要和网页的内涵相关联 。（3）、 网页色彩搭配的技巧 采用一种颜色。这里是指先选定一种颜色，然后调整透明度或者饱和度，(即将色彩变淡或加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 选用两种颜色。即先选定一种颜色，然后选择它的同类色(在色相环里邻近的色)。这样的搭配，使整个页面色彩丰富，但不会显花乱。 选用一类色。就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。这样，使人有一个整体感。 用黑色和一种彩色。比如大红的字体配黑色的边框感觉就会很醒目。（4）、在网页配色中，忌讳的是：l 网页上出现的颜色不要太多，尽量控制在三种色彩以内。l 背景和前文的对比尽量要大，不要用花纹繁复的图案作背景，以便突出主要文字内容。六、实践活动初步规划一个“个人网站”，确定网站主题、名称、搜集相关材料，确定主页的栏目和目录结构，创建一个站点，创建主页的雏形。并完成下面活动任务单：“网站设计”活动任务单实践探究主题：网站设计以小组合作的形式进行本项实践体验活动。小组中的每位同学经过讨论、交流，填写以下内容网站主题： 网站名称： 总体风格： 网站主色调： 网站主要栏目：栏目名称本栏目主要内容 2分钟问题一：网站的开发流程是怎么样的，需要注意些什么？15分钟20分钟问题二：企业建立网站，怎样通过设计充分体现企业的形像和经营和管理理念？3分钟20分钟问题三：网站最多能用多少种颜色？30分钟【课堂小结】由于本课时内容较多，教师主要通过多媒体教学工具向学生生动形象的讲述有关理论知识及操作注意事项，并演示操作过程，随后学生完成课堂练习及课后习题，以巩固本课时所学的知识。（10分钟）【课堂练习】1、 网站的基本流程是什么？2、确定个人网站时要遵循哪些原则？3、上网搜索不同类型的网站，试分析它们的网页布局、网站标志、色彩搭配。(2