网页设计与制作综述

上传人:tian****1990 文档编号:75493457 上传时间:2019-01-31 格式:PPT 页数:99 大小:6.52MB
返回 下载 相关 举报
网页设计与制作综述_第1页
第1页 / 共99页
网页设计与制作综述_第2页
第2页 / 共99页
网页设计与制作综述_第3页
第3页 / 共99页
网页设计与制作综述_第4页
第4页 / 共99页
网页设计与制作综述_第5页
第5页 / 共99页
点击查看更多>>
资源描述

《网页设计与制作综述》由会员分享,可在线阅读,更多相关《网页设计与制作综述(99页珍藏版)》请在金锄头文库上搜索。

1、网页设计与制作案例教程(第2版) http:/,第1章 网页设计与制作综述,网页设计与制作案例教程(第2版),本章学习内容,1.1 学习任务:认识网页 1.2 学习任务:认识网站 1.3 学习任务:第2章 网页版式设计与色彩搭配,网页设计与制作案例教程(第2版),1.1 学习任务:认识网页,本节学习任务 认识什么是网页,了解网页的类型,为学习 网页设计与制作打好基础。 1.1.1 什么是网页 网页是一种可以在互联网上传输、能被浏览器识别和 翻译成页面并显示出来的文件,网页是网站的基本构成 元素。在联网的计算机上安装浏览器后,在浏览器的地 址栏中输入诸如http:/的网址,即 可在浏览器中打开网

2、页,如图1-1所示。,网页设计与制作案例教程(第2版),1.1 学习任务:认识网页,图1-1,网页设计与制作案例教程(第2版),1.1 学习任务:认识网页,1.1.2 网页类型 网页分为静态网页和动态网页两种类型。 1静态网页 在网站设计中,使用纯HTML格式的网页通 常称为静态网页,它运行于客户端。早期的网 站一般都是由静态网页组成的,它们是 以.htm、.html为扩展名。,网页设计与制作案例教程(第2版),1.1 学习任务:认识网页,静态网页的基本特点归纳如下。 每个静态网页都有一个固定的URL,且网页URL的扩展名为.htm、.html格式。 网页内容发布到网站服务器上之后,无论是否有

3、用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件。 静态网页的内容相对稳定,因此容易被搜索引擎检索。 静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难。 静态网页的交互性较差,在功能方面有较大的限制。,网页设计与制作案例教程(第2版),1.1 学习任务:认识网页,2动态网页 采用了动态网页技术,在服务器端运行的网 页和程序被称为动态网页,它们会根据编写的 程序访问数据库,并动态地生成页面。动态网 页的优点是效率高、更新快、移植性强,可以 根据先前制定

4、好的程序页面,根据用户的不同 请求返回其相应的数据,从而达到资源的最大 利用和节省服务器上的物理资源。,网页设计与制作案例教程(第2版),1.1 学习任务:认识网页,动态网页的基本特点归纳如下。 动态网页以数据库技术为基础,可以大大降低网站维护的工作量。 采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等。 动态网页实际上不是存在于服务器上的独立网页文件,只有当用户请求时,服务器才生成并返回一个完整的网页。 动态网页中URL的字符“?”对搜索引擎检索存在一定的问题。搜索引擎一般不可能从一个网站的数据库中检索全部网页,或者出于技术方面的考虑,搜索引擎不

5、会去抓取网址中“?”后面的内容,因此,采用动态网页的网站在进行搜索引擎检索设计时,需要做一定的技术处理才能适应搜索引擎的要求。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,本节学习任务 认识什么是网站,理解网址与域名,熟悉网页的 基本构成元素,了解设计网页制作常用软件和技术。 1.2.1 什么是网站 网站是提供各种信息和服务的平台,如用户熟悉的 新浪、搜狐、京东网、当当网等都是典型网站。网站 由许多网页组成,也可以通俗地理解成网站是存储在 某个服务器上的,包含了网页、图片、数据库和多媒 体信息等资源的一个文件夹。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,

6、提示:在Dreamweaver中,网页设计都是 以一个完整的Web站点为基本对象的,所有的 资源和网页的编辑都在此站点中进行,建议不 要脱离站点环境,初学者要养成良好的习惯。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,1.2.2 网址与域名 1网址 浏览网页时,在浏览器地址栏中输入的诸如 http:/这样的字符串就是一 个网址,浏览器访问网页是通过统一资源定位 器(Uniform Resource Locator,URL)的 方式来实现的。这里所说的网址实际上有两个 内涵,即IP地址和域名地址。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,2域名 域名就是

7、网站的名称,企业在注册域名时一般都会申请 一个符合网站特点的域名,甚至会把域名看做企业的网上 商标。在Internet中,域名与IP地址之间是一一对应的, 它们之间的转换工作称为域名解析,这项工作专门由域名 系统(Domain Name System,DNS)来完成。此外使 用域名也便于网址的分层管理和分配。 一个完整的域名通常由几个层次组成,不同层次之间用 “.”隔开,例如,http:/,其中为域名,sina是第三层次域名,com是 第二层次域名,cn是国家顶级域名。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,1.2.3 网页基本元素 设计网页时要组织好页面的基本元素,同

8、时 再配合一些特效,这样才能构成一个图文并茂、 绚丽多彩的网页。网页包括文本、图像、音频、 视频、动画和超链接等基本元素。 1文本 文本是网页传递信息的主要载体,如图1-2所 示。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,2图像 图像给人的视觉效果要比文字强烈得多,在 网页中灵活运用图像可以起到点缀的效果,如 图1-3所示。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,3动画 动画是网页上最活跃的元素,通常制作优秀、创意出众 的动画

9、是吸引浏览者的最有效的方法。但如果网页中存有太 多的动画,会使浏览者眼花缭乱,无心细看,所以现在对动 画制作的要求越来越高。在网页中加入的动画一般是GIF格 式的动画和Flash动画等。 4超链接 在一个完整的网站中,通常包括站内链接和站外链接。 在网页中单击链接对象,即可实现在不同页面之间的跳转或 者访问其他网站,以及下载文件或发送E-mail等功能。网页 是否能够实现如此多的功能,取决于超链接的规划。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,5音频和视频 在网上浏览时,时常可以发现一些网页设置了背景 音乐,伴随着轻柔优美的乐曲,使浏览者在网上冲浪 成了更加惬意的休闲活

10、动。加入音乐后,网页文件变 大,下载时间就会增加。 在网页中加入视频,使得网页形象生动、易于理 解。常见的网络视频有视频短片、远程教学、视频聊 天、视频点播和DV播放等。但是,在应用视频时要考 虑网速问题,如果视频播放不流畅也会影响浏览效果。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,1.2.4 网页制作常用软件和技术 1网页编辑排版软件Dreamweaver Dreamweaver是一款由Macromedia公司(现已 被Adobe公司并购)开发的专业网页编辑工具,是一 个优秀的所见即所得的网页编辑器。它集网页设计与 多网站管理于一身,能够使网页和数据库关联起来, 支持最

11、新的HTML和CSS,用于对Web站点、Web页 面和Web应用程序进行设计、编码和开发。网页设计 者利用它可以轻而易举地制作出跨平台和跨浏览器的 网页。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,2网页图像处理软件Photoshop和Fireworks Photoshop是Adobe公司最为著名、也最为流行的专业 平面图像处理软件,一直占据着图像处理软件的领袖地位。 Photoshop支持多种图像及色彩模式,使用Photoshop可 以设计出网页的整体效果图,并且可以设计网页Logo、网页 按钮和网页宣传广告等图像。 Fireworks是Macromedia公司发布的一款

12、用来设计网 页图形的编辑软件。使用Fireworks工具可以在单个文件中 创建和编辑位图和矢量图像、设计网页效果、修剪和优化图 形以减少其文件大小,并能制作出精美的GIF动画。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,3网页动画制作软件Flash Flash是Macromedia公司推出的矢量动画制作软 件,是当今功能最丰富、最优秀的动画制作软件之 一,它和Dreamweaver、Fireworks一起被誉为“网 页设计三剑客”。Flash以界面简洁、功能强大而见 长,具有强大的动画编辑功能,能把动画、音效、交 互方式完美地融合在一起,是动画设计初学者和专业 动画制作人员

13、的首选。使用Flash可以制作体积非常小 的幻灯片、小游戏、MTV、广告等动画效果,是最主 要的Web动画形式之一。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,4网页标签语言HTML HTML是用来制作网页的标签语言。HTML是 Hyper Text Markup Language的英文缩写,即超文 本标签语言。用HTML编写的超文本文档称为HTML文 档,必须使用 .html或 .htm为文件扩展名,它不需 要编译,直接由浏览器执行。HTML是网页技术的核 心与基础,不管是制作静态网页,还是编写动态交互 网页,都离不开HTML语言。所以,要灵活地实现想 要的网页效果,必须

14、了解HTML语言。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,5网页脚本语言JavaScript 使用HTML只能制作出静态的网页,无法独立完成 与客户端动态交互的网页。JavaScript是一种通用 的、跨平台的、基于原型的、面向对象的脚本语言,它 不同于一般的程序设计语言,它不需要事先进行编译, 而是嵌入到HTML文本中,由客户端浏览器对其进行解 释执行。JavaScript是动态特效网页设计的最佳选 择,它的作用在于控制网页中的对象元素,实现网页浏 览者与网页内容之间的动态交互。,网页设计与制作案例教程(第2版),1.2 学习任务:认识网站,6动态交互式网页编程语言

15、在当前的网站开发中,动态网页已经成为和 用户交互必不可少的形式。常用的动态交互式 网页设计语言有ASP、PHP、JSP、ASP.net 等。有关它们的介绍请参看第14章。,网页设计与制作案例教程(第2版),1.3学习任务:第2章 网页版式设计与色彩搭配,网页设计与制作案例教程(第2版),对于一个网页,在设计过程中,首先要进行前期规划。前期规划的主要目的主要是从形式上对网页进行整体把握,包括网页版式设计和色彩搭配两个方面。网页的版式设计指网页各种多媒体元素进行合理组合,网页的色彩搭配指网页各种多媒体元素的配色方案。,网页设计与制作案例教程(第2版),本章学习内容,2.1 案例分析 2.2 网页版

16、式设计 2.3 网页色彩基本原理 2.4 色彩视觉效果及配色 2.5 实训,网页设计与制作案例教程(第2版),2.1 案例分析:不同风格网页作品欣赏与解析,Internet上的网页不计其数,风格各异,有的网页看起来热情奔放,让人心潮澎湃,有的网页则有强烈神秘气息,吸引年轻人的眼球,有的网页沉稳庄重,有的网站轻松活泼。网页给浏览者带来的视觉感受,是由其页面版式、色彩等风格决定的。下面给出几个比较有代表性的网页。,网页设计与制作案例教程(第2版),网页作品欣赏之一:可口可乐公司网页,网页设计与制作案例教程(第2版),赏析,网页版面设计采用四角对称型,主色调采用红色。四角对称的版式设计,稳重、权威、大方,符合公司类网站的形象需求;网页四周及底部用很多看似零散但有序的点进行

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 高等教育 > 大学课件

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号