网页设计与制作基础知识.ppt

《网页设计与制作基础知识.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作基础知识.ppt（81页珍藏版）》请在三一文库上搜索。

1、,主讲人：物理与电子工程学院 张亮,网页设计与制作 概述,教学内容,概述 HTML Dreamweaver Firework CMS,考核,平时作业（40%） 期末考试 （个人网页）（60%）,主要教学环节,五、知识讲解与操作示范,一、课程引导,二、明确知识技能目标,三、展示网页浏览效果,四、分析操作任务,六、课堂模仿实践,七、疑难解析,八、归纳总结,九、布置习题,网络计算机网络在信息时代中的作用,21 世纪的一些重要特征就是数字化、网络化和信息化，它是一个以网络为核心的信息时代。 因特网是自印刷术以来人类通信方面最大的变革。 现在人们的生活、工作、学习和交往都已离不开因特网。,Interne

2、t的历史,20 世纪 60 年代美苏冷战时期的产物。 第一阶段是从单个网络 ARPANET 向互联网发展的过程。 第二阶段的特点是建成了三级结构的因特网。 第三阶段的特点是逐渐形成了多层次 ISP 结构的因特网。,用户,因特网,ISP1,ISP2,因特网 服务提供者,根据提供服务的覆盖面积大小以及所拥有的 IP 地址数目的不同，ISP 也分成为不同的层次。,Internet提供的主要服务,WWW服务（网上冲浪） 电子邮件服务（Email） 网上传呼（OICQ） 文件传输（FTP） 网络游戏,网络协议,网络复杂性、异构性 为计算机网络中进行数据交换而建立的规则、标准或约定的集合。 TCP/IP

3、HTTP（HyperText TransferProtocol超文本传输协议） FTP,WEB简介,一、网页设计相关概念,2.WEB服务器及客户机,一、网页设计相关概念,客户端浏览器：通过在地址栏中输入Web服务器地址从而访问Web服务器的软件； 目前主要是Internet Explorer（IE）和Netscape：,一、网页设计相关概念,浏览网页的工作过程,用户通过浏览器发出请求 WEB服务器接到请求后选择相应的网页发给用户的浏览器 浏览器接收到网页文件（HTML文件）后，根据HTML标记符解释和显示各种内容。,浏览网页的工作过程,一、网页设计相关概念,用URL发出请求,送出网页,http

4、:/,客户机,统一资源定位器（URL） URL的全文为Uniform Resource Locator，译为统一资源定位器 用于指定要取得的Internet上资源的位置与方式,超链接（Hyper Link）超链接是特殊的文字标记，它指向了万维网中的其他资源，如另外一个网页、一个声音文件，或者是网页的另一个段落等，而且这些资源均可以存放在任何一个服务器上。 在浏览网页时，如果你用鼠标单击超链接，那么就会跳转到超链接所指向的资源,二、 网页、网页设计、网站和主页,以目前的网页技术来说，大致可分为三个方面来加以说明 静态网页（HTML、CSS）：仅展示信息 静态网页是用HTML编写，扩展名为.htm

5、或.html。 静态网页只能单纯地在网页中展示文字与图片，它是所有网页的基础技术。 网页美工（Flash、Fireworks） 动态网页（JavaScript/VBScript、ASP） ）：可实现互交功能,一个网站的制作流程类似与一个电视节目的制作过程，包括:,四、网站建设的基本步骤及应注意的问题,1.网页设计基本步骤 （1）设计网页栏目及组织结构 （2）准备素材 （3）界面设计 （4）网页排版（页面实现） （6）网页测试与发布 （7）网页推广与维护,2.制作网页时要注意的问题 网页的标题要简洁，明确。 对重点内容要强调显示。 网页中插入的图片要尽量的小。 图形要附加文字说明，以便关闭图像时

6、查看。 网页中引用的资料及商标（或图标），不能侵犯版权。,四、网站建设的基本步骤及应注意的问题,2019/2/24,19,设计并制作网页,图 “网上书苑”网站主页的页面设计,2019/2/24,20,设计并制作网页,图 “网上书苑”网站“文学作品”网页的页面设计,2019/2/24,21,“T”结构布局,2019/2/24,22,“口”型布局,2019/2/24,23,对称对比布局,2019/2/24,24,POP布局（自由布局）,版式设计的构成类型,在网页设计中较常见的网页版式构成类型主要有：水平分割式、垂直分割式、水平与垂直分割交叉式、斜线式、“S”曲线式、重复式等。,水平分割的页面具有较

7、强的视觉稳定性，给人平静、安定的感觉,返 回,垂直分割强调的是垂线的视觉冲击力，体现坚强、理智与秩序的感觉,返 回,曲线、弧线、曲线形状的应用能够产生运动、韵律的动感，形成富有活力的视觉效果。,返 回,曲形与直形的综合应用是将以上两种线条和形状结合起来运用，不仅能够丰富网页的表现力，还能使网页更富于变化，艺术效果更丰富多彩。,返 回,页面中的点、线、面及留白的处理,点的作用,www2.coca-,线与面的作用,版面的大面积的空白给人以无限的想象空间,留白的运用,点、线、面关系的处理,由文字构成的点、线、面关系的标题与导航按钮,版式设计的构成形式,分割与比例,2019/2/24,36,版面布局与

8、首页设计（草案）,应遵循对比、统一、平衡、节奏的原则,2019/2/24,37,5 网页色彩的搭配,色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。,非彩色的搭配,黑白两色是最简单基本的搭配，黑底白字，白字黑底都能清晰明了表现网页内容,色彩的搭配,色彩的鲜明性 色彩的独特性 色彩的适合性 色彩的联想性,鲜艳的色彩容易引人注目,与众不同的色彩，人印象强烈,所选色彩和表

9、达的内容气氛适合,不同色彩会产生不同的联想,网页色彩配置的方法,同一色彩的不同明度 使用对比色 使用同类色、类似色 非彩色与有彩色结合,首先确定运用一种色彩，然后调整透明度或者饱和度，将网页背景、文字、边框等元素都控制在此色彩中，只是在明度上有所变化 。,同一色彩的不同明度,返 回,需要你熟悉色环，准备一个色环参考。首先选定一种色彩，然后选择它的对比色。影响对比色配色效果的重要因素在于使用的色调。,使用对比色,返 回,同类色、类似色适合凝造整齐统一的气氛，但是应注意避免缺少对比，而使画面不够响亮。,使用同类色、类似色,返 回,深浅不同的灰色与较单一的有彩色搭配是比较安全的配色方案。非彩色与彩色

10、搭配时，可以起到突出色彩的效果。,非彩色与有彩色结合,返 回,2019/2/24,45,一、红色 1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。 2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。 4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。,6 色彩的心理感受,2019/2/24,46,二、黄色 1、 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。 2、 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分

11、寸感的热情、温暖。 3、 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 4、 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。,2019/2/24,47,2019/2/24,48,三、蓝色 色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响

12、力。,2019/2/24,49,2019/2/24,50,绿色 具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。 1、 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。 2、 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。 3、 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。,2019/2/24,51,2019/2/24,52,白色 色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性

13、格变的含蓄。 1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。 2、 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。 3、 在白色中混入少量的蓝，给人感觉清冷、洁净。 4、 在白色中混入少量的橙，有一种干燥的气氛。 5、 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉 6、 在白色中混入少量的紫，可诱导人联想到淡淡的芳香,2019/2/24,53,网页色彩搭配方案,奔放、激情的配色,自然、静寂的配色,宁静、朴素的配色,亲切的配色,柔和、女性的配色,神秘的配色,职业的配色,动态效果强烈的鲜明对比色彩赋于站点奔放、激情的个性。,奔放、激情的配色,返 回,自然的、静寂的配

14、色,返 回,宁静、朴素的氛围要以整洁的环境为基础，所以在创造这种环境时要避免运用过多的颜色，尽量运用浅淡清爽的色调，才能得到较好的效果。,宁静、朴素的配色,返 回,亲切的配色,返 回,女性带给人的感觉多是柔美、典雅的，粉质的色彩用来表现女性的温柔和典雅魅力再合适不过了。,柔和、女性的配色,返 回,蓝紫色、金色等能营造神秘的高层感觉。,神秘的配色,返 回,职业的配色,返 回,网页美化工具（图像）： Photoshop和Fireworks等 网页美化工具（动画）： Flash和Swish等 网页排版工具： DreamWeaver和FrontPage等,三、网页设计常用工具,网页欣赏,（1）欣赏优秀

15、的网页，学习他人之长，激发学习网页设计的兴趣。 （2）分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习制作网页奠定基础。 （3）对网页的组成元素有一个初步印象。,（三）知识讲解,欣赏海尔集团的网站： 启动IE浏览器，输入网址：（回车） 展显在眼前便是该网站独具特色的首页。 该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块，中间的主体内容又分为“左、中、右”三个版块。,1.1 公司类网站赏析,（三）知识讲解,颜色对比较为强烈，重点突出 主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅致的感受，玫瑰红给人温馨、浪漫的感受，。 首页题头的动化效果体现了海尔集团的

16、理念和品质，让人既想到家的感觉又能记住该品牌。 导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住下面正文的内容。,1.1 公司类网站赏析,欣赏“凤凰古城旅游网”，网址是：。 该首页给人的视觉效果是一种古朴的气息迎面扑来， 整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。 主页题头的凤凰古城图片恰到好处，突出了主题， 同时也起到了广告作用。 导航栏的文字颇具特色。 首页的模块划分采用的是左右两大模块， 内容划分清晰。,1.2 旅游类网站赏析,（三）知识讲解,图1-1 凤凰古城旅游网的首页,1.3 体育类网站赏析,（三）知识讲解,欣赏新东方教育

17、网站，网址是：www.neworiental.org 其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。 颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。 该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块 每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。,1.4 教育培训类网站赏析,（三）知识讲解,图1-4 新东方教育网的新闻网页,（三）知识讲解首页欣赏,浏览几个网站，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站

18、中选择两个网站进行赏析。 （1）当当购物网站： （2）南开大学网站: （3）且听风吟文学网： （4）叱进军个人网站： （5）携程旅游网： （6）中国体育资讯网： （7）太平洋电脑网： （8）班级网站：,（四）课堂实践,（五）课堂拓展实践,1浏览以下网站，分析这些网站首页的特色和不足。 （1）天津大学网站： （2）易趣网： （3）木叶之家个人网： （4）求职网： （5）开心购物网： （6）湖南张家界旅游网： （7）曙光人才网： 2利用搜索引擎网站查找四川长虹集团、深圳TCL集 团、九天音乐网的网址。,（六）本章小节,本章主要欣赏了几个优秀网站的首页，通过分析对这些网站的布局结构、颜色搭配、视觉效果留下了初步印象。,利用搜索引擎获取广东“李宁体育用品公司”的网址和“遛狗网”的网址，并简要说明这两个网站首页的特色。,（七）布置习题,