《网页设计与制作基础知识.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作基础知识.ppt（81页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 主讲人：物理与电子工程学院张亮主讲人：物理与电子工程学院张亮网页设计与制作网页设计与制作网页设计与制作网页设计与制作概述概述概述概述教学内容教学内容l概述lHTMLlDreamweaverlFireworklCMS考核考核l平时作业（40%）l期末考试 （个人网页）（60%）主主要要教教学学环环节节五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题网络计算机网络在信息时代中的作用网络计算机网络在信息时代中的作用 21 世纪的一些重要特征就是数字化、网络化和信息化，它是一个以网络为核心的信息时代。因特网
2、是自印刷术以来人类通信方面最大的变革。n现在人们的生活、工作、学习和交往都已离不开因特网。InternetInternet的历史的历史20 20 世纪世纪 60 60 年代美苏冷战时期的产物。年代美苏冷战时期的产物。l第一阶段是从单个网络 ARPANET 向互联网发展的过程。l第二阶段的特点是建成了三级结构的因特网。l第三阶段的特点是逐渐形成了多层次 ISP 结构的因特网。用户因特网ISP1ISP2因特网服务提供者根据提供服务的覆盖面积大小以及所拥有的IP 地址数目的不同，ISP 也分成为不同的层次。InternetInternet提供的主要服务提供的主要服务lWWW服务（网上冲浪）l电子邮件
3、服务（Email）l网上传呼（OICQ）l文件传输（FTP）l网络游戏网络协议网络协议 网络复杂性、异构性网络复杂性、异构性网络复杂性、异构性网络复杂性、异构性为计算机网络中进行数据交换而建立的规则、标准为计算机网络中进行数据交换而建立的规则、标准或约定的集合。或约定的集合。l lTCP/IPTCP/IPl lHTTPHTTP（HyperTextHyperText TransferProtocolTransferProtocol超文本传输协议超文本传输协议）l lFTPFTPWWWWorld Wide Web（世界宽边网（世界宽边网络）的缩写，也可以简称为络）的缩写，也可以简称为Web，中文名
4、字为，中文名字为“万维网万维网”。能够处。能够处理文字、图像、声音、视频等多理文字、图像、声音、视频等多媒体信息，是一个多媒体信息系媒体信息，是一个多媒体信息系统。统。lWEB简介2.WEB2.WEB服务器及客户机服务器及客户机 客户端浏览器：客户端浏览器：通过在地址栏中输入Web服务器地址从而访问Web服务器的软件；目前主要是Internet Explorer（IE）和Netscape：浏览网页的工作过程浏览网页的工作过程浏览网页的工作过程浏览网页的工作过程n用户通过浏览器发出请求nWEB服务器接到请求后选择相应的网页发给用户的浏览器n浏览器接收到网页文件（HTML文件）后，根据HTML标记
5、符解释和显示各种内容。浏览网页的工作过程浏览网页的工作过程浏览网页的工作过程浏览网页的工作过程用用URLURL发出请求发出请求送出网页送出网页客户机客户机统一资源定位器（统一资源定位器（URLURL）URL的全文为Uniform Resource Locator，译为统一资源定位器用于指定要取得的Internet上资源的位置与方式位置与方式超链接（超链接（Hyper LinkHyper Link）超链接是特殊的文字标记，它指向了万维网中的其他资源，如另外一个网页、一个声音文件，或者是网页的另一个段落等，而且这些资源均可以存放在任何一个服务器上。在浏览网页时，如果你用鼠标单击超链接，那么就会跳转
6、到超链接所指向的资源 以目前的网页技术来说，大致可分为三个方面来加以说明以目前的网页技术来说，大致可分为三个方面来加以说明n静态网页（静态网页（HTML、CSS）：仅展示信息）：仅展示信息静态网页是用静态网页是用HTML编写，扩展名为编写，扩展名为.htm或或.html。静态网页只能单纯地在网页中展示文字与图片，它是所有网页的基础技静态网页只能单纯地在网页中展示文字与图片，它是所有网页的基础技术。术。n网页美工（网页美工（Flash、Fireworks）n动态网页（动态网页（JavaScript/VBScript、ASP）：可实现互交）：可实现互交功能功能n一个网站的制作流程类似与一个电视节目
7、的制作过程，包括:策划制作宣传更新1.1.1.1.网页设计基本步骤网页设计基本步骤网页设计基本步骤网页设计基本步骤（1）设计网页栏目及组织结构 （2）准备素材（3）界面设计（4）网页排版（页面实现）（6）网页测试与发布（7）网页推广与维护层状层状线性线性网状网状2.2.制作网页时要注意的问题制作网页时要注意的问题网页的标题要简洁，明确。对重点内容要强调显示。网页中插入的图片要尽量的小。图形要附加文字说明，以便关闭图像时查看。网页中引用的资料及商标（或图标），不能侵犯版权。5/16/202319设计并制作网页设计并制作网页图 “网上书苑”网站主页的页面设计 5/16/202320 设计并制作网页
8、设计并制作网页图 “网上书苑”网站“文学作品”网页的页面设计 5/16/202321“T”结构布局结构布局5/16/202322“口口”型布局型布局5/16/202323对称对比布局对称对比布局 5/16/202324POP布局（自由布局）布局（自由布局）版式设计的构成类型版式设计的构成类型在网页设计中较常见的网页版式构成类型主要有：水平分割式、垂直分割式、水平与垂直分割交叉式、斜线式、“S”曲线式、重复式等。水平分割水平分割的页面具有较强的视觉稳定性，给人平的页面具有较强的视觉稳定性，给人平静、安定的感觉静、安定的感觉 返 回垂直分割强调的是垂线的视觉冲击力，体现坚强、理智与秩序的感觉 返
9、回曲线、弧线、曲线形状的应用能够产生运动、韵律的动感，形成富有活力的视觉效果。返 回曲形与直形的综合应用是将以上两种线条和形状结合起来运用，不仅能够丰富网页的表现力，还能使网页更富于变化，艺术效果更丰富多彩。返 回页面中的点、线、面及留白的处理页面中的点、线、面及留白的处理 点的作用点的作用 线与面的作用线与面的作用版面的大面积的空白给人以无限的想象空间 留白的运用留白的运用 点、线、面关系的处理点、线、面关系的处理 由文字构成的点、线、面关系的标题与导航按钮 版式设计的构成形式版式设计的构成形式 分割与比例分割与比例 5/16/202336版面布局与首页设计（草案）版面布局与首页设计（草案）
10、应遵循对比、统一、平衡、节奏的原则应遵循对比、统一、平衡、节奏的原则5/16/2023375 网页色彩的搭配网页色彩的搭配 色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。非彩色的搭配非彩色的搭配 黑白两色是最简单基本的搭配，黑底白字，白字黑底都能清晰明了表现网页内容 色彩的搭配色彩的搭配 色彩的鲜明性 色彩的独特性色彩的适合性色彩的联想性 鲜艳的
11、色彩容易引人注目 与众不同的色彩，人印象强烈 所选色彩和表达的内容气氛适合 不同色彩会产生不同的联想 网页色彩配置的方法网页色彩配置的方法 同一色彩的不同明度 使用对比色使用同类色、类似色非彩色与有彩色结合 首先确定运用一种色彩，然后调整透明度或者饱和度，将网页背景、文字、边框等元素都控制在此色彩中，只是在明度上有所变化 。同一色彩的不同明度 返 回需要你熟悉色环，准备一个色环参考。首先选定一种色彩，然后选择它的对比色。影响对比色配色效果的重要因素在于使用的色调。使用对比色返 回同类色、类似色适合凝造整齐统一的气氛，但是应注意避免缺少对比，而使画面不够响亮。使用同类色、类似色返 回深浅不同的灰
12、色与较单一的有彩色搭配是比较安全的配色方案。非彩色与彩色搭配时，可以起到突出色彩的效果。非彩色与有彩色结合 返 回5/16/202345一、红色 1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。2 2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。3 3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。4 4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、在红中加入少量的白，会使其性格变
13、的温柔，趋于含蓄、羞涩、娇嫩。娇嫩。6 色彩的心理感受色彩的心理感受5/16/202346二、黄色1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。格也随之消失，趋于一种平和、潮润的感觉。2 2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。高傲转化为一种有分寸感的热情、温暖。3 3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显在黄色中加入少量的黑，其色
14、感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。橄榄绿的复色印象。其色性也变的成熟、随和。4 4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。淡化，趋于含蓄，易于接近。5/16/2023475/16/202348三、蓝色蓝色 色感冷静，性格朴实而内向，是一种有助于人头脑冷色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的具有较强
15、扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。对蓝色的性格构成较明显的影响力。5/16/2023495/16/202350绿色绿色 具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒
16、冷感相抵消。这色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。优美的色。1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。幼稚性。2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。5/16/2023515/16/202352白色白色 色感
17、光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。3、在白色中混入少量的蓝，给人感觉清冷、洁净。在白色中混入少量的蓝，给人感觉清冷、洁净。4、在白色中混入少量的橙，有一种
18、干燥的气氛。在白色中混入少量的橙，有一种干燥的气氛。5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉在白色中混入少量的绿，给人一种稚嫩、柔和的感觉6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香在白色中混入少量的紫，可诱导人联想到淡淡的芳香5/16/202353网页色彩搭配方案网页色彩搭配方案 奔放、激情的配色自然、静寂的配色 宁静、朴素的配色 亲切的配色柔和、女性的配色神秘的配色 职业的配色 动态效果强烈的鲜明对比色彩赋于站点奔放、激情的个性。奔放、激情的配色返 回自然的、静寂的配色返 回宁静、朴素的氛围要以整洁的环境为基础，所以在创造这种环境时要避免运用过多的颜色，尽量运用浅淡清爽的色
19、调，才能得到较好的效果。宁静、朴素的配色 返 回亲切的配色 返 回女性带给人的感觉多是柔美、典雅的，粉质的色彩用来表现女性的温柔和典雅魅力再合适不过了。柔和、女性的配色返 回蓝紫色、金色等能营造神秘的高层感觉。神秘的配色返 回职业的配色 返 回n网页美化工具（图像）：PhotoshopPhotoshop和FireworksFireworks等n网页美化工具（动画）：FlashFlash和SwishSwish等n网页排版工具：DreamWeaverDreamWeaver和FrontPageFrontPage等网页欣赏网页欣赏 （1 1）欣赏优秀的网页，学习他人之长，激发学习）欣赏优秀的网页，学习
20、他人之长，激发学习网页设计的兴趣。网页设计的兴趣。（2 2）分析优秀网页的布局结构、颜色搭配、视觉）分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习制作网页奠定基效果，留下直观的第一印象，为学习制作网页奠定基础。础。（3 3）对网页的组成元素有一个初步印象。）对网页的组成元素有一个初步印象。（三）知识讲解（三）知识讲解 欣赏海尔集团的网站：欣赏海尔集团的网站：启动启动IEIE浏览器，输入网址：（回车）浏览器，输入网址：（回车）展显在眼前便是该网站独具特色的首页。展显在眼前便是该网站独具特色的首页。该首页给人以清新、爽朗的感受，首页的整体布局为该首页给人以清新、爽朗的感受，
21、首页的整体布局为“上、中、下上、中、下”三个版块，中间的主体内容又分为三个版块，中间的主体内容又分为“左、左、中、右中、右”三个版块。三个版块。1.1公司类网站赏析公司类网站赏析（三）知识讲解（三）知识讲解颜色对比较为强烈，重点突出颜色对比较为强烈，重点突出主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅致主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅致的感受，玫瑰红给人温馨、浪漫的感受，。的感受，玫瑰红给人温馨、浪漫的感受，。首页题头的动化效果体现了海尔集团的理念和品质，首页题头的动化效果体现了海尔集团的理念和品质，让人既想到家的感觉又能记住该品牌。让人既想到家的感觉又能记住该品牌。导航栏的颜色鲜
22、明，文字与背景色对比强烈，引人注导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住下面正文目。二级导航采用横式排列，其优点是不会遮住下面正文的内容。的内容。1.1公司类网站赏析公司类网站赏析 欣欣赏赏“凤凤凰古城旅游网凰古城旅游网”，网址是：。，网址是：。该该首首页给页给人的人的视觉视觉效果是一种古朴的气息迎面扑来，效果是一种古朴的气息迎面扑来，整体色彩、整体色彩、图图文搭配十分文搭配十分协调协调，咖啡色的运用和，咖啡色的运用和图图片的片的搭配十分和搭配十分和谐谐。主主页题头页题头的的凤凤凰古城凰古城图图片恰到好片恰到好处处，突出了主，突出了主题题，同同时
23、时也起到了广告作用。也起到了广告作用。导导航航栏栏的文字的文字颇颇具特色。具特色。首首页页的模的模块块划分采用的是左右两大模划分采用的是左右两大模块块，内容划分清晰。内容划分清晰。1.2旅游类网站赏析旅游类网站赏析（三）知识讲解（三）知识讲解图1-1凤凰古城旅游网的首页 1.3体育类网站赏析体育类网站赏析（三）知识讲解（三）知识讲解 欣赏新东方教育网站，网址是：欣赏新东方教育网站，网址是：其首页主要列出了导航菜单和网站地图，简洁明了、其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。排列整齐。颜色的搭配主要采用黄、绿色调，采用了类似色的搭颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，
24、给人以清新、和谐的视觉美感。配，给人以清新、和谐的视觉美感。该网页给人的视觉感受是和谐美观，在模块的划分上该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用比较明显，采用“左、中、右左、中、右”三个板块三个板块每个内容板块都采用了不同颜色和形式做标题装饰，每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。在视觉方面也给人以醒目和新颖的感觉。1.4教育培训类网站赏析教育培训类网站赏析（三）知识讲解（三）知识讲解图1-4新东方教育网的新闻网页（三）知识讲解首页欣赏（三）知识讲解首页欣赏 浏览几个网站，对所浏览网站首页的特色和不足进行赏析说浏览几个网站，对所
25、浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站中选择两个网站进行赏析。效果、动画效果等。从以下网站中选择两个网站进行赏析。（1 1）当当购物网站：）当当购物网站：/（2 2）南开大学网站）南开大学网站:（3 3）且听风吟文学网：）且听风吟文学网：/（4 4）叱进军个人网站：）叱进军个人网站：（5 5）携程旅游网：）携程旅游网：（6 6）中国体育资讯网：）中国体育资讯网：（7 7）太平洋电脑网：）太平洋电脑网：（8 8）班级网站：）班级网站：（四）课堂实践（四）课堂
26、实践（五）课堂拓展实践（五）课堂拓展实践 1 1浏览以下网站，分析这些网站首页的特色和不足。浏览以下网站，分析这些网站首页的特色和不足。（1 1）天津大学网站：）天津大学网站：（2 2）易趣网：）易趣网：/（3 3）木叶之家个人网：）木叶之家个人网：/（4 4）求职网：）求职网：（5 5）开心购物网：）开心购物网：/（6 6）湖南张家界旅游网：）湖南张家界旅游网：（7 7）曙光人才网：）曙光人才网：2 2利用搜索引擎网站查找四川长虹集团、深圳利用搜索引擎网站查找四川长虹集团、深圳TCLTCL集集 团、九天音乐网的网址。团、九天音乐网的网址。（六）本章小节（六）本章小节 本章主要欣赏了几个优秀网站的首页，通本章主要欣赏了几个优秀网站的首页，通过分析对这些网站的布局结构、颜色搭配、视过分析对这些网站的布局结构、颜色搭配、视觉效果留下了初步印象。觉效果留下了初步印象。利用搜索引擎获取广东利用搜索引擎获取广东“李宁体育用品公李宁体育用品公司司”的网址和的网址和“遛狗网遛狗网”的网址，并简要说明的网址，并简要说明这两个网站首页的特色。这两个网站首页的特色。（七）布置习题（七）布置习题