网页设计与制作概述

1、专题一 网页设计与制作概述,王永固学习内容,一、开场白 二、网页设计概述 三、网站设计的总体规划,一、开场白,1、为什么学习网页设计与制作？ 2、学好网页设计与制作需要哪些基础知识？ 3、本课程学习哪些内容？ 4、学习过程中需要注意哪些问题？,1、为什么学习网页设计与制作？,2、相关基础知识,3、本课程学习哪些内容？,4、学习过程中需要注意哪些问题？,用好课程教材，多阅读相关书籍和网上教程。 善于使用Google和Baidu，多上网寻找问题答案。 充分利用自己的电脑，多上机实验和练习。 平时做个有心人，多积累网页设计的素材。,二、网页设计概述,1、网站的分类 2、作品

2、欣赏与反思 3、作品讨论,1、网站的分类,因特网上的网站分为几个类别？,2、作品欣赏与讨论,从欣赏的网站首页中， 你认为一般说来网页中包含哪些基本元素？,文字：标题、正文和文本链接 图像：图标、标题、插图、广告条、背景、导航栏 音频：MIDI、MP3、WAV 视频：AVI、RM、QuikTime、WMV、FLV 动画：GIF、Flash、JavaApplet 版式：海报型和表格型 色彩：色调、亮度、纯度、对比度 链接和路径：内部链接和外部链接，相对路径和绝对路径,3、作品讨论,（1）企业网站一般包含哪些栏目？它的版面布局和风格有哪些特点？ （2）电子商务网站一般包含哪些栏目？版面布局和风格有哪

3、些特点？网站提供哪些功能和服务？ （3）个人网站一般包含哪些栏目？版面布局和风格有哪些特点？,三、网站设计的总体规划,1、确定网站的总体风格 2、网站的创意设计 3、网站的色彩搭配,1、确定网站的总体风格,（1）网站风格的内涵与要素 （2）网站风格的类别 （3）树立网站风格的步骤 （4）常用的树立网站的风格的方法,（1）网站风格的内涵、特征与要素,网站的风格是指站点的整体形象给浏览者的综合感受。 风格的特征： 风格是抽象的 风格是独特的 风格是有人性的,网站风格的内涵、特征与要素,设计的网站风格包括的要素： 站点的CI（标志，色彩，字体，标语） 版面布局 浏览方 式 交互性 文字，语气， 内容

4、价值、存在意义 站点荣誉,（2）网站风格的类别,简洁明快型 专业严肃型 活泼可爱型 精美个性型 平易近人型,简洁明快型,专业严肃型,活泼可爱型,精美个性型,平易近人型,（3）树立网站风格的步骤,确信风格是建立在有价值内容之上的。 需要彻底搞清楚自己希望站点给人的印象是什么。 在明确自己的网站印象后，开始努力建立和加强这种印象。,测测你的站点给别人的印象,1.如果只用一句话来描述你的站点，应该是:_参考答案： 有创意，专业，有(技术)实力，有美感，有冲击力 2.想到你的站点，可以联想到的色彩是：_参考答案： 热情的红色，幻想的天兰色，聪明的金黄色 3.想到你的站点，可以联想到的画面是：_参考答案

5、： 一份早报，一辆法拉利跑车，人群拥挤的广场，杂货店 4.如果网站是一个人，他拥有的个性是：_参考答案： 思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者 5.作为站长，你希望给人的印象是：_参考答案： 敬业，认真投入，有深度，负责，纯真，直爽，淑女 6.用一种动物来比喻，你的网站最象：_参考答案： 猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信) 7.浏览者觉得你和其他网站的不同是：_参考答案： 可以信赖，信息最快，交流方便， 8.浏览者和你交流合作的感受是：_参考答案： 师生，同事，朋友，长幼。,（4）常用的树立网站风格的方法,1.将你的标志logo,尽可能的出现在每个

6、页面上。 2.突出你的标准色彩。 3.突出你的标准字体。 4.想一条朗朗上口宣传标语。 5.使用统一的语气和人称。 6.使用统一的图片处理效果。 7.创造一个你的站点特有的符号或图标。 8.展示你网站的荣誉和成功作品。 9.告诉网友关于你的真实的故事和想法。,2、网站的创意设计,创意并不是天才者的灵感，而是思考的结果。 创意是传达信息的一种特别方式。 创意是将现有的要素重新组合。,网站的创意设计,创意思考过程的五个阶段 准备期-研究所搜集的资料，根据旧经验，启发新创意； 孵化期-将资料咀嚼消化，使意识自由发展，任意结合； 启示期-意识发展并结合，产生创意； 验证期-将产生的创意讨论修正； 形成期-设计制作网页，将创意具体化。,3、网站的色彩搭配,（1）网页配色的原则 （2）网页配色表 （3）相关学习资源,（1）网页配色的原则,站点的统一性 掌握好“颜色印象空间” 尽量使用“网页安全色” 主要配色不宜超过三种，不要让你的网页看起来像“百衲衣”。,（2）网页配色表,网页