网页设计与制作综述.

《网页设计与制作案例教程》（第2版）章网页设计与制作综述《网页设计与制作案例教程》（第2版）本章学习内容1.1学习任务:认识网页1.2学习任务:认识网站1.3学习任务:网站建设的一般流程1.4学习任务:HTML基础知识1.5学习任务:初识HTML5.01.6实训《网页设计与制作案例教程》（第2版）1.1学习任务:认识网页本节学习任务认识什么是网页，了解网页的类型，为学习网页设计与制作打好基础。1.1.1什么是网页网页是一种可以在互联网上传输、能被浏览器识别和翻译成页面并显示出来的文件，网页是网站的基本构成元素。在联网的计算机上安装浏览器后，在浏览器的地址栏中输入诸如的网址，即可在浏览器中打开网页，如图1-1所示。《网页设计与制作案例教程》（第2版）1.1学习任务:认识网页图1-1《网页设计与制作案例教程》（第2版）1.1学习任务:认识网页1.1.2网页类型网页分为静态网页和动态网页两种类型。1．静态网页在网站设计中，使用纯HTML格式的网页通常称为静态网页，它运行于客户端。早期的网站一般都是由静态网页组成的，它们是以.htm、.html、.shtml和.xml等为扩展名。《网页设计与制作案例教程》（第2版）1.1学习任务:认识网页静态网页的基本特点归纳如下。每个静态网页都有一个固定的URL，且网页URL的扩展名为.htm、.html和.shtml等格式。网页内容发布到网站服务器上之后，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。静态网页的内容相对稳定，因此容易被搜索引擎检索。静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。静态网页的交互性较差，在功能方面有较大的限制。《网页设计与制作案例教程》（第2版）1.1学习任务:认识网页2．动态网页采用了动态网页技术，在服务器端运行的网页和程序被称为动态网页，它们会根据编写的程序访问数据库，并动态地生成页面。动态网页的优点是效率高、更新快、移植性强，可以根据先前制定好的程序页面，根据用户的不同请求返回其相应的数据，从而达到资源的最大利用和节省服务器上的物理资源。《网页设计与制作案例教程》（第2版）1.1学习任务:认识网页动态网页的基本特点归纳如下。动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。动态网页实际上不是存在于服务器上的独立网页文件，只有当用户请求时，服务器才生成并返回一个完整的网页。动态网页中URL的字符“?”对搜索引擎检索存在一定的问题。搜索引擎一般不可能从一个网站的数据库中检索全部网页，或者出于技术方面的考虑，搜索引擎不会去抓取网址中“?”后面的内容，因此，采用动态网页的网站在进行搜索引擎检索设计时，需要做一定的技术处理才能适应搜索引擎的要求。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站本节学习任务认识什么是网站，理解网址与域名，熟悉网页的基本构成元素，了解设计网页制作常用软件和技术。1.2.1什么是网站网站是提供各种信息和服务的平台，如用户熟悉的新浪、搜狐、京东网、当当网等都是典型网站。网站由许多网页组成，也可以通俗地理解成网站是存储在某个服务器上的，包含了网页、图片、数据库和多媒体信息等资源的一个文件夹。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站提示：在Dreamweaver中，网页设计都是以一个完整的Web站点为基本对象的，所有的资源和网页的编辑都在此站点中进行，建议不要脱离站点环境，初学者要养成良好的习惯。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站1.2.2网址与域名1．网址浏览网页时，在浏览器地址栏中输入的诸如这样的字符串就是一个网址，浏览器访问网页是通过统一资源定位器（UniformResourceLocator，URL）的方式来实现的。这里所说的网址实际上有两个内涵，即IP地址和域名地址。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站2．域名域名就是网站的名称，企业在注册域名时一般都会申请一个符合网站特点的域名，甚至会把域名看做企业的网上商标。在Internet中，域名与IP地址之间是一一对应的，它们之间的转换工作称为域名解析，这项工作专门由域名系统（DomainNameSystem，DNS）来完成。此外使用域名也便于网址的分层管理和分配。一个完整的域名通常由几个层次组成，不同层次之间用“.”隔开，例如，，其中sina.com.cn为域名，sina是第三层次域名，com是第二层次域名，cn是国家顶级域名。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站1.2.3网页基本元素设计网页时要组织好页面的基本元素，同时再配合一些特效，这样才能构成一个图文并茂、绚丽多彩的网页。网页包括文本、图像、音频、视频、动画和超链接等基本元素。1．文本文本是网页传递信息的主要载体，如图1-2所示。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站2．图像图像给人的视觉效果要比文字强烈得多，在网页中灵活运用图像可以起到点缀的效果，如图1-3所示。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站3．动画动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。但如果网页中存有太多的动画，会使浏览者眼花缭乱，无心细看，所以现在对动画制作的要求越来越高。在网页中加入的动画一般是GIF格式的动画和Flash动画等。4．超链接在一个完整的网站中，通常包括站内链接和站外链接。在网页中单击链接对象，即可实现在不同页面之间的跳转或者访问其他网站，以及下载文件或发送E-mail等功能。网页是否能够实现如此多的功能，取决于超链接的规划。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站5．音频和视频在网上浏览时，时常可以发现一些网页设置了背景音乐，伴随着轻柔优美的乐曲，使浏览者在网上冲浪成了更加惬意的休闲活动。加入音乐后，网页文件变大，下载时间就会增加。在网页中加入视频，使得网页形象生动、易于理解。常见的网络视频有视频短片、远程教学、视频聊天、视频点播和DV播放等。但是，在应用视频时要考虑网速问题，如果视频播放不流畅也会影响浏览效果。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站1.2.4网页制作常用软件和技术1．网页编辑排版软件DreamweaverDreamweaver是一款由Macromedia公司（现已被Adobe公司并购）开发的专业网页编辑工具，是一个优秀的所见即所得的网页编辑器。它集网页设计与多网站管理于一身，能够使网页和数据库关联起来，支持最新的HTML和CSS，用于对Web站点、Web页面和Web应用程序进行设计、编码和开发。网页设计者利用它可以轻而易举地制作出跨平台和跨浏览器的网页。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站2．网页图像处理软件Photoshop和FireworksPhotoshop是Adobe公司最为著名、也最为流行的专业平面图像处理软件，一直占据着图像处理软件的领袖地位。Photoshop支持多种图像及色彩模式，使用Photoshop可以设计出网页的整体效果图，并且可以设计网页Logo、网页按钮和网页宣传广告等图像。Fireworks是Macromedia公司发布的一款用来设计网页图形的编辑软件。使用Fireworks工具可以在单个文件中创建和编辑位图和矢量图像、设计网页效果、修剪和优化图形以减少其文件大小，并能制作出精美的GIF动画。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站3．网页动画制作软件FlashFlash是Macromedia公司推出的矢量动画制作软件，是当今功能最丰富、最优秀的动画制作软件之一，它和Dreamweaver、Fireworks一起被誉为“网页设计三剑客”。Flash以界面简洁、功能强大而见长，具有强大的动画编辑功能，能把动画、音效、交互方式完美地融合在一起，是动画设计初学者和专业动画制作人员的首选。使用Flash可以制作体积非常小的幻灯片、小游戏、MTV、广告等动画效果，是最主要的Web动画形式之一。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站4．网页标签语言HTMLHTML是用来制作网页的标签语言。HTML是HyperTextMarkupLanguage的英文缩写,即超文本标签语言。用HTML编写的超文本文档称为HTML文档，必须使用.html或.htm为文件扩展名，它不需要编译，直接由浏览器执行。HTML是网页技术的核心与基础，不管是制作静态网页，还是编写动态交互网页，都离不开HTML语言。所以，要灵活地实现想要的网页效果，必须了解HTML语言。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站5．网页脚本语言JavaScript使用HTML只能制作出静态的网页，无法独立完成与客户端动态交互的网页。JavaScript是一种通用的、跨平台的、基于原型的、面向对象的脚本语言，它不同于一般的程序设计语言，它不需要事先进行编译，而是嵌入到HTML文本中，由客户端浏览器对其进行解释执行。JavaScript是动态特效网页设计的最佳选择，它的作用在于控制网页中的对象元素，实现网页浏览者与网页内容之间的动态交互。《网页设计与制作案例教程》（第2版）1.2学习任务：认识网站6．动态交互式网页编程语言在当前的网站开发中，动态网页已经成为和用户交互必不可少的形式。常用的动态交互式网页设计语言有ASP、PHP、JSP、ASP.net等。有关它们的介绍请参看第14章。《网页设计与制作案例教程》（第2版）1.3学习任务：网站建设的一般流程本节学习任务掌握网站建设的一般流程：网站策划、网站结构规划、网页设计、网页制作、网站测试与发布、网站宣传与维护。1.3.1网站策划1．确定行业策划一个网站之前首先要确定所要策划的网站所属的行业，也只有明确了这一点，后期的网站内容规划才能有的放矢。《网页设计与制作案例教程》（第2版）1.3学习任务：网站建设的一般流程2．确定网站主题网站的主题就是网站的题材，即做一个什么类型的网站。当前的网站有很多，按类型分有行业站、地方站，按领域分有游戏类、教育类、IT类等，也可以按网站模式和网站的服务人群进行细分。3．用户定位与分析网站用户的定位很重要，只有用户定位对了，网站的自身内容规划才能把握准确。用户分析包括用户群以及用户群规模的分析、用户特点的分析、用户需求的分析、以及用户需求满足情况的分析等。《网页设计与制作案例教程》（第2版）1.3学习任务：网站建设的一般流程4．确定网站的配色方案一个成功的网站，首先吸引访问者目光的就是网站良好的颜色搭配，其次才是网站的内容，由此可见，良好的配色方案对于网站成功与否也起到非常重要的作用。有关网站的色彩配色，将在第2章详细介绍。5．规划网站结构规划网站结构可以用树状结构先把每个页面的内容大纲列出来，尤其当制作一个很大的网站时，特别需要把这个架构规划好，也要考虑到可扩充性，免得做好以后又要一改再改，带来不必要的麻烦。如图1-4所示是一个企业网站的栏目结构图。《网页设计与制作案例教程》（第2版）1.3学习任务：网站建设的一般流程《网页设计与制作案例教程》（第2版）1.3学习任务：网站建设的一般流程1.3.2收集网站的素材和内容网站建设过程中常常需要大量的素材、资料。明确网站的主题后，要想让设计