1、1,网页制作与设计,2,掌握网页制作的常识，熟悉网页制作的基本技术，熟练掌握HTML标记语言、会用可视化网页制作软件Frontpage或Dreamweaver、会用网页图形处理软件Frieworks或Photoshop、会用矢量动画Flash，能自己独立建立站点、制作网页。 网页制作与设计教程 陈语林编著 中国水利水电出版社,教学内容,3,教学方式,采用课堂教学与课外上机实践相结合的方式进行，课堂教学在于帮助学生建立网页设计的理念、学习网页设计的常用工具的使用、图像动画制作工具的使用等，课外上机实践着重于网页设计制作及辅助工具软件的使用，以提高学生利用这些工具来解决实际问题的能力 .,4,万维
2、网使得浏览Internet变得非常简单，只要用鼠标单击，就可以显示图文并茂的网页，网页中可以包含声音、视频、动画等，这也是万维网在Internet中最受欢迎、使用最多的原因。,5,WWW：WWW是World Wide Web的缩写，也可以简写为W3、3W、Web等，称为国际互联网（Internet），又称万维网，它是基于超文本的信息查询和信息发布的系统。 HTTP：超文本传输协议HTTP（Hyper Text Transfer Protocol）. 网页(Web Page)：是通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机地集合在一起就
3、组成了网站。,网页设计基础,6,网站：WWW服务器上相互链接的一系列网页组成一个网站（Web Site）。网站是WWW上的一个结点。如果输入地址时仅指定WWW服务器域名或IP地址，而不加路径信息，则将打开网站默认的首页（Home Page），也称为主页。首页是一个网站中最重要的网页，通常包含最重要的信息以及指向各分栏目的超链接。 超文本(Hypertext)：具有超级链接功能的文本文件叫超文本。超文本文件中的某些字、符号或短语起着“热链路”（Hotlink）的作用，在显示出来时其字体或颜色发生变化或者标有下横线、以区别于一般的正文。,7,第一章 网站设计 网站设计是一个很大的课题。本章将网页设
4、计的软件透明化，从网站的主题、结构、风格、布局等讲述一个网站的制作构思。这是从一个最大的范围去讲述网站设计这个主题的。,8,1.定位你的网站主题和名称；2.定位你的网站CI形象； 3.确定你的栏目和版块； 4.网站的整体风格创意设计 5.网站的层次结构和链接结构6.首页的设计 7.版面布局的窍门 8.色彩的搭配 9.效果与速度 10.替浏览者考虑 11.细微之处见功力 12.建设完成度与推出时间 13.交互性与亲和度 14.考虑不同的浏览器和分辨率 15.字体的设置和表格的嵌套 16.新技术的运用取舍 17.设计好你的banner和位置 18.语句文字-融入感情,9,教学重点与难点,网站的目录
5、结构 网站的连接结构 网站创意 网站布局,10,欣赏海尔集团的网站： ,该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块，中间的主体内容又分为“左、中、右”三个版块。 主要采用浅蓝和大红为主，浅灰色给人清爽、雅致的感受，大红给人温馨、浪漫的感受。 首页题头的动化效果体现了海尔集团的理念和品质，让人既想到家的感觉又能记住该品牌。 导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住下面正文的内容。,11,欣赏凤凰古城旅游网的网站： 输入网址：,12,首页的模块划分采用的是左右两大模块，内容划分清晰。该首页给人的视觉效果是一种古朴的气息迎面扑
6、来，整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。 首页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。导航栏的文字颇具特色。,13,欣赏中国大众体育网的网站：,该网站的引导页整体视觉感受简洁、现代感较强。背景用大块的红色，给人热烈、运动的感觉。在字体的运用上有大有小，有长有短，显得有对比，文字居中对齐，显得庄重。图片的动态效果突出主题，产生运动的视觉感受。该网站的首页整体视觉感受清晰、和谐。整体颜色采用红色，既统一又有变化，主体突出。,14,欣赏新东方教育网站：www.neworiental.org,该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“
7、左、中、右”三个板块 颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。 其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。 每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。,15,欣赏谷歌搜索（ Google ）网站： 欣赏百度搜索（ baidu ）网站：,16,课堂实践,浏览几个网站，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站中选择两个网站进行赏析。（1）青岛大学网站：（2）清华大学网站: （3）当当购物网站：（4）新浪网站： （5）太平洋电
8、脑网：（6）腾迅网站： ,17,1.1 定位网站的主题和名称,一、题材的选择 美国个人电脑杂志（PC Magazine评出的2009年度排名前100位的全美知名网站的十类题材。 第一类：网上求职 第二类：网上聊天/即时信息 第三类：网站社区/讨论邮件列表第四类：计算机技术 第五类：网页/网站开发 第六类：娱乐网站 第七类：旅行 第八类：参考/资讯 第九类：家庭/教育 第十类：生活/时尚,18,在选择题材时，可从下面几个方面进行考虑： 1主题要小而精 2题材最好是自己擅长或者喜爱的内容 3题材不要太滥或者目标太高,19,二、网站名称的选择一般建议按以下规则取名： 1名称要正气 2名称要易记 3名
9、称要有特色名称平实可以接受，但如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。在体现网站主题的同时，要有这画龙点睛之笔。,20,1.2 定位网站的CI形象,CI（Corporate Identity）是借用广告词语，意思是通过视觉来统一企业的形象。 1.设计网站的标志（logo） 2.设计网站的标准色彩 3.设计网站的标准字体 4.设计网站的宣传标语,21,22,1.3 确定网站的栏目和版块,栏目实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。在指定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几个方面： 1一定记住要紧扣主题 2设一个最近更新或
10、网站指南栏目 3设定一个可以双向交流的栏目 4设一个下载栏目或常见问题回答栏目,23,划分栏目需要注意的是： （1）尽可能将网站最有价值的内容列在栏目上。 （2）尽可能方便访问者的浏览和查询。 （3）尽可能删除与主题无关的栏目。,24,1.4 确定网站的目录结构和链接结构,一、网站的目录结构网站的目录是指你建立网站时创建的目录。清晰的目录结构有利于站点的维护， 而网站的链接结构是指页面之间相互链接的拓扑结构。研究网站的链接结构目的在于用最少的链接，使得浏览最有效率。,25,建立目录结构的一些建议： 1不要将所有文件都存放在根目录下 2按栏目内容建立子目录 3.在每个主目录下都建立独立的imag
11、es目录。 4.目录的层次不要太多，建议不要超过3层 （1）不要使用中文名字的目录名。 （2）不要使用过长的目录名。 （3）尽量使用意义明确的目录名，尽量做到“见名知意”。,26,二、网站的链接结构 建立网站的链接结构有以下两种基本方式： 1树状链接结构 2星状链接结构链接结构的设计，在实际的网页制作中是非常重要的一环，采用什么样的链接结构将直接影响到版面的布局。 首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。,27,内容不多的小型网站，链接结构比较简单，如左图所示。这种链接结构，可以称为树状结构。,内容比较丰富的中型网站，链接结构稍为复杂一点，它的链接关系往往采用星形结
12、构。,28,1.5 确定网站的整体风格和创意设计,一、 网站风格风格是指站点的整体形象给浏览者的感受。风格是独特的风格是有人性的,29,如何树立网站风格 ？ （1）要肯定风格是建立在有价值内容之上的。必须保证内容的质量和价值。 （2）要彻底搞清楚自己希望站点给人的印象是什么。 （3）在明确自己的网站印象后，开始努力建立和加强这种印象。,30,1.如果只用一句话来描述你的站点，应该是:_参考答案：有创意，专业，有(技术)实力，有美感，有冲击力2.想到你的站点，可以联想到的色彩是：_参考答案：热情的红色，幻想的天兰色，聪明的金黄色3.想到你的站点，可以联想到的画面是：_参考答案：一份早报，一辆法拉
13、利跑车，人群拥挤的广场，杂货店4.如果网站是一个人，他拥有的个性是：_参考答案：思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者5.作为站长，你希望给人的印象是：_参考答案：敬业，认真投入，有深度，负责，纯真，直爽，淑女6.用一种动物来比喻，你的网站最象：_参考答案：猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信)7.浏览者觉得你和其他网站的不同是：_参考答案：可以信赖，信息最快，交流方便，8.浏览者和你交流合作的感受是：_参考答案：师生，同事，朋友，长幼。,31,1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。 2.突出你的标准色彩。文字的
14、链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。 3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。 4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色是. 5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。 6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。 7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用等等。 8.用自己设计的花边，线条，点 9.展示你网站的荣誉和成功作品。 10.告诉网友关于你的真实的故事和想法。,32,二
15、、网站创意 创意是指站点的整体创意。 创意是传达信息的一种特别方式。 创意是将现有的要素重新组合。例如在线书店，电子社区，在线拍卖。,33,1.6 首页设计,首页的设计是一个网站成功与否的关键。 一般首页设计和制作占整个网站制作时间的40%。 首页，就是全网站内容的目录，是一个索引。 设计好一个首页，一般的步骤是： （1）确定首页的功能模块。包括：网站标志（logo）、主菜单（menu）、新闻（whats new）、搜索（search）、友情链接（links）、邮件列表（maillist）、计数器（count）、版权（copyright） （2）设计首页的版面。 （3）处理技术上的细节。,34
16、,一、 版面布局,版面指的是浏览器看到的完整的一个页面。 布局，就是以最适合浏览的方式将图片和文字排放 在页面的不同位置。 版面布局也是一个创意的问题，但要比站点 整体的创意容易，有规律。 版面布局一般可分为以下步骤： 1草案 2粗略布局 3定案,35,网页的布局一般可以分为：“厂”字型 “同”字型 标题正文型 分栏型 Flash型 封面型,36,颜色是因为光的折射而产生的，而红、黄、蓝是三原色。 网页HTML语言中的色彩表达就用这三种颜色的数值表示。 例如：红色是(255,0,0)，十六进制的表示方法为 (FF0000)，白色为(FFFFFF)，经常看到的bglor=#FFFFFF”就是指背
17、景色为白色。 在颜色中分非彩色和彩色两类， 非彩色是指黑、白、灰系统色，彩色是指除了非彩色以外的所有色彩。 任何色彩都有饱和度和透明度的属性。,二、 网页色彩搭配,37,通常的做法是：主要内容文字用非彩色（黑色），边框、 背景、图片用彩色。 1. 网页色彩搭配的原理 色彩的鲜明性。 (2) 色彩的独特性。(3) 色彩的合适性。(4) 色彩的联想性。 2. 网页色彩搭配的技巧 用一种色彩。(2) 用两种色彩。 (3) 用一个色系。 (4) 用黑色和一种彩色。在网页配色中，要注意的是：不要将所有颜色都用 到，尽最控制在三种色彩以内。背景和前文的对比尽最要大，绝对不要用花纹繁复的图案作背景。,38,
