网页设计与制作基础知识

网页设计与制作基础知识第一页，共八十一页，编辑于2023年，星期三教学内容概述HTMLDreamweaverFireworkCMS考核平时作业（40%）期末考试（个人网页）（60%）第二页，共八十一页，编辑于2023年，星期三主要教学环节五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题第三页，共八十一页，编辑于2023年，星期三网络计算机网络在信息时代中的作用

21世纪的一些重要特征就是数字化、网络化和信息化，它是一个以网络为核心的信息时代。因特网是自印刷术以来人类通信方面最大的变革。现在人们的生活、工作、学习和交往都已离不开因特网。第四页，共八十一页，编辑于2023年，星期三Internet的历史20世纪60年代美苏冷战时期的产物。第一阶段是从单个网络ARPANET向互联网发展的过程。第二阶段的特点是建成了三级结构的因特网。第三阶段的特点是逐渐形成了多层次ISP结构的因特网。第五页，共八十一页，编辑于2023年，星期三用户因特网ISP1ISP2因特网服务提供者根据提供服务的覆盖面积大小以及所拥有的IP地址数目的不同，ISP也分成为不同的层次。第六页，共八十一页，编辑于2023年，星期三Internet提供的主要服务WWW服务（网上冲浪）电子邮件服务（Email）网上传呼（OICQ）文件传输（FTP）网络游戏第七页，共八十一页，编辑于2023年，星期三网络协议

网络复杂性、异构性为计算机网络中进行数据交换而建立的规则、标准或约定的集合。

TCP/IPHTTP（HyperTextTransferProtocol——超文本传输协议）FTP第八页，共八十一页，编辑于2023年，星期三WWWWorldWideWeb（世界宽边网络）的缩写，也可以简称为Web，中文名字为“万维网”。能够处理文字、图像、声音、视频等多媒体信息，是一个多媒体信息系统。WEB简介第九页，共八十一页，编辑于2023年，星期三2.WEB服务器及客户机第十页，共八十一页，编辑于2023年，星期三客户端浏览器：通过在地址栏中输入Web服务器地址从而访问Web服务器的软件；目前主要是InternetExplorer（IE）和Netscape：第十一页，共八十一页，编辑于2023年，星期三浏览网页的工作过程用户通过浏览器发出请求WEB服务器接到请求后选择相应的网页发给用户的浏览器浏览器接收到网页文件（HTML文件）后，根据HTML标记符解释和显示各种内容。第十二页，共八十一页，编辑于2023年，星期三浏览网页的工作过程第十三页，共八十一页，编辑于2023年，星期三统一资源定位器（URL）URL的全文为UniformResourceLocator，译为统一资源定位器

用于指定要取得的Internet上资源的位置与方式超链接（HyperLink）超链接是特殊的文字标记，它指向了万维网中的其他资源，如另外一个网页、一个声音文件，或者是网页的另一个段落等，而且这些资源均可以存放在任何一个服务器上。

在浏览网页时，如果你用鼠标单击超链接，那么就会跳转到超链接所指向的资源

第十四页，共八十一页，编辑于2023年，星期三以目前的网页技术来说，大致可分为三个方面来加以说明静态网页（HTML、CSS）：仅展示信息静态网页是用HTML编写，扩展名为.htm或.html。静态网页只能单纯地在网页中展示文字与图片，它是所有网页的基础技术。网页美工（Flash、Fireworks）动态网页（JavaScript/VBScript、ASP））：可实现互交功能第十五页，共八十一页，编辑于2023年，星期三一个网站的制作流程类似与一个电视节目的制作过程，包括:策划制作宣传更新第十六页，共八十一页，编辑于2023年，星期三1.网页设计基本步骤（1）设计网页栏目及组织结构（2）准备素材（3）界面设计（4）网页排版（页面实现）（6）网页测试与发布（7）网页推广与维护第十七页，共八十一页，编辑于2023年，星期三2.制作网页时要注意的问题网页的标题要简洁，明确。对重点内容要强调显示。网页中插入的图片要尽量的小。图形要附加文字说明，以便关闭图像时查看。网页中引用的资料及商标（或图标），不能侵犯版权。第十八页，共八十一页，编辑于2023年，星期三2023/6/1319设计并制作网页图“网上书苑”网站主页的页面设计

第十九页，共八十一页，编辑于2023年，星期三2023/6/1320

设计并制作网页图“网上书苑”网站“文学作品”网页的页面设计

第二十页，共八十一页，编辑于2023年，星期三2023/6/1321“T”结构布局第二十一页，共八十一页，编辑于2023年，星期三2023/6/1322“口”型布局第二十二页，共八十一页，编辑于2023年，星期三2023/6/1323对称对比布局

第二十三页，共八十一页，编辑于2023年，星期三2023/6/1324POP布局（自由布局）第二十四页，共八十一页，编辑于2023年，星期三版式设计的构成类型

在网页设计中较常见的网页版式构成类型主要有：水平分割式、垂直分割式、水平与垂直分割交叉式、斜线式、“S”曲线式、重复式等。第二十五页，共八十一页，编辑于2023年，星期三

水平分割的页面具有较强的视觉稳定性，给人平静、安定的感觉返回第二十六页，共八十一页，编辑于2023年，星期三

垂直分割强调的是垂线的视觉冲击力，体现坚强、理智与秩序的感觉返回第二十七页，共八十一页，编辑于2023年，星期三曲线、弧线、曲线形状的应用能够产生运动、韵律的动感，形成富有活力的视觉效果。

返回第二十八页，共八十一页，编辑于2023年，星期三曲形与直形的综合应用是将以上两种线条和形状结合起来运用，不仅能够丰富网页的表现力，还能使网页更富于变化，艺术效果更丰富多彩。返回第二十九页，共八十一页，编辑于2023年，星期三页面中的点、线、面及留白的处理点的作用第三十页，共八十一页，编辑于2023年，星期三线与面的作用第三十一页，共八十一页，编辑于2023年，星期三版面的大面积的空白给人以无限的想象空间

留白的运用第三十二页，共八十一页，编辑于2023年，星期三点、线、面关系的处理第三十三页，共八十一页，编辑于2023年，星期三由文字构成的点、线、面关系的标题与导航按钮第三十四页，共八十一页，编辑于2023年，星期三版式设计的构成形式分割与比例第三十五页，共八十一页，编辑于2023年，星期三2023/6/1336版面布局与首页设计（草案）应遵循对比、统一、平衡、节奏的原则第三十六页，共八十一页，编辑于2023年，星期三2023/6/13375网页色彩的搭配

色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。第三十七页，共八十一页，编辑于2023年，星期三非彩色的搭配黑白两色是最简单基本的搭配，黑底白字，白字黑底都能清晰明了表现网页内容

第三十八页，共八十一页，编辑于2023年，星期三色彩的搭配色彩的鲜明性色彩的独特性色彩的适合性色彩的联想性鲜艳的色彩容易引人注目与众不同的色彩，人印象强烈

所选色彩和表达的内容气氛适合

不同色彩会产生不同的联想

第三十九页，共八十一页，编辑于2023年，星期三网页色彩配置的方法

同一色彩的不同明度

使用对比色

使用同类色、类似色

非彩色与有彩色结合

第四十页，共八十一页，编辑于2023年，星期三

首先确定运用一种色彩，然后调整透明度或者饱和度，将网页背景、文字、边框等元素都控制在此色彩中，只是在明度上有所变化。同一色彩的不同明度返回第四十一页，共八十一页，编辑于2023年，星期三

需要你熟悉色环，准备一个色环参考。首先选定一种色彩，然后选择它的对比色。影响对比色配色效果的重要因素在于使用的色调。

使用对比色返回第四十二页，共八十一页，编辑于2023年，星期三

同类色、类似色适合凝造整齐统一的气氛，但是应注意避免缺少对比，而使画面不够响亮。

使用同类色、类似色返回第四十三页，共八十一页，编辑于2023年，星期三

深浅不同的灰色与较单一的有彩色搭配是比较安全的配色方案。非彩色与彩色搭配时，可以起到突出色彩的效果。

非彩色与有彩色结合

返回第四十四页，共八十一页，编辑于2023年，星期三2023/6/1345一、红色

1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

6色彩的心理感受第四十五页，共八十一页，编辑于2023年，星期三2023/6/1346二、黄色

1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。第四十六页，共八十一页，编辑于2023年，星期三2023/6/1347第四十七页，共八十一页，编辑于2023年，星期三2023/6/1348三、蓝色

色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

第四十八页，共八十一页，编辑于2023年，星期三2023/6/1349第四十九页，共八十一页，编辑于2023年，星期三2023/6/1350绿色

具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。第五十页，共八十一页，编辑于2023年，星期三2023/6/1351第五十一页，共八十一页，编辑于2023年，星期三2023/6/1352白色

色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

3、在白色中混入少量的蓝，给人感觉清冷、洁净。

4、在白色中混入少量的橙，有一种干燥的气氛。

5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉

6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香第五十二页，共八十一页，编辑于2023年，星期三2023/6/1353第五十三页，共八十一页，编辑于2023年，星期三网页色彩搭配方案奔放、激情的配色自然、静寂的配色宁静、朴素的配色

亲切的配色柔和、女性的配色神秘的配色

职业的配色

第五十四页，共八十一页，编辑于2023年，星期三动态效果强烈的鲜明对比色彩赋于站点奔放、激情的个性。

奔放、激情的配色返回第五十五页，共八十一页，编辑于2023年，星期三自然的、静寂的配色返回第五十六页，共八十一页，编辑于2023年，星期三宁静、朴素的氛围要以整洁的环境为基础，所以在创造这种环境时要避免运用过多的颜色，尽量运用浅淡清爽的色调，才能得到较好的效果。宁静、朴素的配色

返回第五十七页，共八十一页，编辑于2023年，星期三亲切的配色返回第五十八页，共八十一页，编辑于2023年，星期三女性带给人的感觉多是柔美、典雅的，粉质的色彩用来表现女性的温柔和典雅魅力再合适不过了。柔和、女性的配色返回第五十九页，共八十一页，编辑于2023年，星期三

蓝紫色、金色等能营造神秘的高层感觉。神秘的配色返回第六十页，共八十一页，编辑于2023年，星期三职业的配色返回第六十一页，共八十一页，编辑于2023年，星期三网页美化工具（图像）：Photoshop和Fireworks等网页美化工具（动画）：Flash和Swish等网页排版工具：DreamWeaver和FrontPage等第六十二页，共八十一页，编辑于2023年，星期三网页欣赏（1）欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣。（2）分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习制作网页奠定基础。（3）对网页的组成元素有一个初步印象。第六十三页，共八十一页，编辑于2023年，星期三（三）知识讲解欣赏海尔集团的网站：启动IE浏览器，输入网址：（回车）展显在眼前便是该网站独具特色的首页。该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块，中间的主体内容又分为“左、中、右”三个版块。

1.1公司类网站赏析第六十四页，共八十一页，编辑于2023年，星期三第六十五页，共八十一页，编辑于2023年，星期三第六十六页，共八十一页，编辑于2023年，星期三（三）知识讲解颜色对比较为强烈，重点突出主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅致的感受，玫瑰红给人温馨、浪漫的感受，。首页题头的动化效果体现了海尔集团的理念和品质，让人既想到家的感觉又能记住该品牌。导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住下面正文的内容。1.1公司类网站赏析第六十七页，共八十一页，编辑于2023年，星期三欣赏“凤凰古城旅游网”，网址是：。该首页给人的视觉效果是一种古朴的气息迎面扑来，整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。导航栏的文字颇具特色。首页的模块划分采用的是左右两大模块，内容划分清晰。1.2旅游类网站赏析（三）知识讲解第六十八页，共八十一页，编辑于2023年，星期三图1-1凤凰古城旅游网的首页第六十九页，共八十一页，编辑于2023年，星期三1.3体育类网站赏析（三）知识讲解第七十页，共八十一页，编辑于2023年，星期三欣赏新东方教育网站，网址是：其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。1.4教育培训类网站赏析（三）知识讲解第七十一页，共八十一页，编辑于2023年，星期三图1-4新东方教育网的新闻网页（三）知识讲解－首页欣赏第七十二页，共八十一页，编