网页设计与制作综述

《网页设计与制作综述》由会员分享，可在线阅读，更多相关《网页设计与制作综述（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版）,赏析,网页版面设计采用四角对称型，主色调采用红色。四角对称的版式设计，稳重、权威、大方，符合公司类网站的形象需求；网页四周及底部用很多看似零散但有序的点进行