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

Internet提供的主要服务 浏览网页的工作过程 用户通过浏览器发出请求 WEB服务器接到请求后选择相应的网页发给用户的浏览器 浏览器接收到网页文件（HTML文件）后，根据HTML标记符解释和显示各种内容。 统一资源定位器（URL） URL的全文为Uniform Resource Locator，译为统一资源定位器用于指定要取得的Internet上资源的位置与方式 浏览几个网站，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站中选择两个网站进行赏析。 （1）当当购物网站：/ （2）南开大学网站: /index.asp （3）且听风吟文学网：/ （4）叱进军个人网站： （5）携程旅游网： （6）中国体育资讯网： （7）太平洋电脑网： （8）班级网站： （五）课堂拓展实践 1．浏览以下网站，分析这些网站首页的特色和不足。 　（1）天津大学网站： 　（2）易趣网：/ 　（3）木叶之家个人网：/ 　（4）求职网： 　（5）开心购物网：/ 　（6）湖南张家界旅游网： 　（7）曙光人才网： 2．利用有哪些信誉好的足球投注网站引擎网站查找四川长虹集团、深圳TCL集 团、九天音乐网的网址。 （六）本章小节 本章主要欣赏了几个优秀网站的首页，通过分析对这些网站的布局结构、颜色搭配、视觉效果留下了初步印象。 利用有哪些信誉好的足球投注网站引擎获取广东“李宁体育用品公司”的网址和“遛狗网”的网址，并简要说明这两个网站首页的特色。 网页美化工具（图像）： Photoshop和Fireworks等 网页美化工具（动画）： Flash和Swish等 网页排版工具： DreamWeaver和FrontPage等 网页欣赏 （1）欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣。 （2）分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习制作网页奠定基础。 （3）对网页的组成元素有一个初步印象。 （三）知识讲解 欣赏海尔集团的网站： 　　启动IE浏览器，输入网址：（回车） 　　展显在眼前便是该网站独具特色的首页。 该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块，中间的主体内容又分为“左、中、右”三个版块。 1.1　公司类网站赏析 （三）知识讲解 　　颜色对比较为强烈，重点突出 　　主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅致的感受，玫瑰红给人温馨、浪漫的感受，。 　　首页题头的动化效果体现了海尔集团的理念和品质，让人既想到家的感觉又能记住该品牌。 导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住下面正文的内容。 1.1　公司类网站赏析 　 欣赏“凤凰古城旅游网”，网址是：。 该首页给人的视觉效果是一种古朴的气息迎面扑来， 　 整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。 主页题头的凤凰古城图片恰到好处，突出了主题， 同时也起到了广告作用。 导航栏的文字颇具特色。 首页的模块划分采用的是左右两大模块， 内容划分清晰。 1.2　旅游类网站赏析 （三）知识讲解 图1-1　　凤凰古城旅游网的首页 1.3　体育类网站赏析 （三）知识讲解 欣赏新东方教育网站，网址是： 其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。 　颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。 　该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块 　每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。 1.4　教育培训类网站赏析 （三）知识讲解 图1-4　　新东方教育网的新闻网页 （三）知识讲解－首页欣赏 （四）课堂实践 （七）布置习题 页面中的点、线、面及留白的处理 点的作用 线与面的作用 版面的大面积的空白给人以无限的想象空间 留白的运用 点、线、面关系的处理 由文字构成的点、线、面关系的标题与导航按钮 版式设计的构成形式 分割与比例 * * 版面布局与首页设计（草案） 应遵循对比、统一、平衡、节奏的原则 * * 5 网页色彩的搭配 色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。 非彩色的搭配