网页设计与制作教程_邓长寿胡日新主编；史姣丽梅园周顽副主编；杨焱林主审；曾令院董西伟蔡报勤参编.pdf

书书书网页设计与制作教程主审:杨焱林主编:邓长寿史姣丽副 主 编:董西伟梅园周顽参编人员:曾令院胡日新蔡报勤江 西 高 校 出 版 社书书书图书在版编目(C I P)数据网页设计与制作教程/邓长寿，史姣丽主编 南昌:江西高校出版社，2009 11ISBN 978 7 81132 803 5.网 .邓 史 .网页制作 教材.TP393 092中国版本图书馆 CIP 数据核字(2009)第 215112 号出 版 发 行社址邮 政 编 码总编室电话销 售 电 话网址印刷经销开本印张字数版次印数书号定价江西高校出版社江西省南昌市洪都北大道 96 号330046(0791)8504319(0791)8513417www juacp com南昌市光华印刷有限责任公司各地新华书店787mm 1092mm1/1618 25420 千字2011 年 1 月第 1 版第 2 次印刷3001 6000 册ISBN 978 7 81132 803 532 00 元版权所有侵权必究前櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜言近年来，网络信息技术在我国得到了迅速发展，电子商务、电子社区、网络政府、网络文化等构筑了一个异彩纷呈的网络世界，它正在慢慢地改变人们的生活和工作方式。每个企事业单位、政府机关和个人纷纷建立网站和制作网页来宣传自己的形象。网络应用技术特别是网页制作技术已不再是专业人员应该熟练掌握的技术了，普及和推广网络应用技术已经成为各类大、中专院校计算机基础教育改革的重要课题。为了提高学生的实践动手能力，培养学生掌握较为扎实的基础知识，并能学以致用，我们在编写本教材时注重知识与技术并重，理论与实践互补，将 Adobe 公司的 Dreamweaver CS、Flash、FireworksCS 三个流行软件综合在一起，介绍这三个软件的特点和常用的方法、技巧。本书从网页与网站设计的基本原理和概念出发，由浅入深地介绍网页设计与制作所需的技术基础。在编写上按照循序渐近、由浅入深、理论与实践相结合的原则安排教学内容，每章都有理论知识、练习、实验指导和实践环节等内容。全书共分为 14 章，第 1 2 章讲解网页设计与制作的基础知识，包括:网页设计基础、HTML 语言简介。第 3 8 章讲解Dreamweaver CS3 网页编辑器，包括:Dreamweaver CS 3 0 简介、简单网页的设计与制作、超链接、网页的布局、表单、模板和库、CSS 样式表和行为;第 9 11 章讲解 Flash CS 3 0，包括:Flash的基本概念、Flash 动画的基本原理以及基本动画的制作方法、交互动画设计与制作;第 12 章讲解 Fireworks CS 3 0，包括:Fireworks CS 3 0 的基本概念、Fireworks CS 3 0 绘图工具的使用、Fireworks CS 3 0 动画制作;第 13 章以个人站点“青青子衿网”为例，讲解网站在制作过程中将要利用到的主要知识和技1术;第 14 章实验指导，共有 13 个实验。本书由杨焱林教授担任主审，由邓长寿、胡日新任主编，史姣丽、梅园、周顽任副主编，参与编写的还有曾令院、董西伟、蔡报勤。本书还得到了江西高校出版社的领导、九江学院信息科学与技术学院的领导和同事们的大力帮助，在此表示感谢，同时还对参考文献的作者表示感谢。本书可作为高校各专业本科专科的教学用书，也可作为高职高专相关专业的教学用书，还可作为公务员、企事业管理人员、网页设计爱好者的自学用书。由于网页设计与制作技术的发展很快，加之编者学术水平有限，书中难免会有不妥之处，恳请广大读者和有关专业人士给予批评指正。编者2009 年 11 月2目櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜櫜录第一章网页设计入门(1)1 1万维网(1)1 2初识网页与网站(2)1 3网站开发工作流程(4)1 4常用网页制作软件(6)1 5网页色彩与布局(8)1 6本章小结(13)第二章HTML 语言简介(14)2 1了解 HTML(14)2 2HTML 的组成结构(16)2 3常用 HTML 代码(24)2 4本章小结(30)第三章Dreamweaver CS 3 0 简介(32)3 1安装与启动(32)3 2功能介绍(34)3 3工作界面简介(36)3 4电子相册的创建(40)3 5站点的创建、管理与发布(43)3 6本章小结(50)第四章简单网页的设计与制作(52)4 1一个简单网站的设计案例(52)4 2网页文档的基本操作(59)4 3页面元素的使用(64)4 4本章小结(75)1第五章超链接(77)!5 1一个简单的超链接案例(77)5 2超链接基础(80)5 3创建超链接(82)5 4管理超链接(88)5 5本章小结(91)第六章网页的布局(93)6 1表格的使用(93)6 2框架的使用(102)6 3AP Div 的使用(108)6 4本章小结(112)第七章表单、模板和库(114)7 1表单(114)7 2模板(119)7 3库(124)7 4本章小结(127)第八章CSS 样式表和行为(129)8 1CSS 样式表(129)8 2行为(134)8 3本章小结(141)第九章Flash CS 3 0 简介(142)9 1Flash 的起始页(142)9 2Flash 的工作环境(143)9 3Flash CS3 0 工具的使用(144)9 4Flash 的发布(149)9 5Flash 绘图技巧(150)9 6图形绘制案例演示(151)9 7本章小结(152)第十章Flash CS 3 0 动画基础(153)10 1动画设计基本概念(153)10 2Flash CS 3 0 基本动画设计(159)10 3引导线和遮罩(172)10 4本章小结(180)2第十一章交互动画设计与制作(181)!11 1动作脚本介绍(181)11 2动作脚本的应用(187)11 3交互动画设计案例演示(194)11 4本章小结(197)第十二章Fireworks CS 3 0 简介(198)12 1Fireworks CS 3 0 工作界面(198)12 2Fireworks CS 3 0 绘图工具的使用(204)12 3Fireworks CS 3 0 动画制作(224)12 4本章小结(238)第十三章综合案例(241)13 1案例说明(241)13 2前期工作制作网页素材(242)13 3中期工作创建网站与制作主页(253)13 4本章小结(258)第十四章实验指导(260)实验一网页基础知识(260)实验二简单的 HTML 文档(261)实验三创建本地站点(262)实验四某个人的简单网站(263)实验五创建锚点链接(264)实验六图像与表格操作(265)实验七框架与表单(265)实验八模板(266)实验九CSS(267)实验十层与行为(268)实验十一形状补间动画综合案例(269)实验十二动画补间动画综合案例(272)实验十三使用 Fireworks 开发 RSS 图标(277)参考文献(283)3书书书第一章网页设计入门随着 Internet 的迅猛发展和快速普及，网络购物、QQ、MSN、远程教育、电子商务、网上医疗等构筑了一个绚丽多彩的网络世界，现代人的工作、生活和学习越来越离不开 Inter-net。Internet 作为公用信息的载体，以其快速、高效、使用方便等优点实现了信息资源共享与传递。越来越多的政府部门、机构、企业创建了网站，大量网民也通过个人空间、博客、个人网站等形式创建自己的“网上家园”。因此，网页设计与制作技术成为当前社会需求的一项基本的计算机技能。本章主要知识点:万维网 网页和网站的基本概念 网站开发流程 常用网页制作工具 网页色彩与布局1 1万维网早期 Internet 使用技术比较复杂，掌握 Internet 的使用需要大量的学习时间，因此只有计算机专家才能使用。1989 年 3 月，在欧洲核子研究中心担任软件工程师的蒂姆伯纳斯李(Tim Berners Lee)为了方便与其他科学家共享研究成果，向研究中心主管提出设计万维网的构想。1991 年，蒂姆伯纳斯李利用业余时间完成万维网实验室设计。万维网的诞生给全球信息交流和传播带来了革命性变化，一举打开了人们获取信息的方便之门，蒂姆伯纳斯李也因此被世人誉为“万维网之父”。万维网(World Wide Web，简称 WWW)，是 Internet 上基于浏览器/服务器体系结构的分布式多平台的超文本超媒体信息服务系统。它是 Internet 最主要的信息服务，允许用户在一台计算机上通过 Internet 存取另一台计算机上的信息。万维网使得 Internet 的操作变得异常简便，利用 Web 页(网页)巧妙地将因特网上的文本、图像、声音等各种信息链接到了一起，并且以这些 Web 页和它们之间的链接为基础，构成了一个庞大的信息网。111 2初识网页与网站1 2 1网页、网站与主页(1)网页网页(Web page)，是网站中的一“页”，通常是由 HTML 语言(超文本标记语言)创建的，这种语言能将文字、图片、声音等各种多媒体文件组合在一起。网页存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址(URL:U-niform Resource Locator 统一资源定位器)来识别与存取。在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，显示给用户。文字与图片是构成一个网页的两个最基本的元素。文字，可以表达网页的内容;图片，即可以丰富网页的内容，还可以使网页更美观。除此之外，网页的元素还包括动画、声音、超链接、表单、程序等等。在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的代码内容。可以看出，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小)，而浏览器则对这些标记进行解释并生成页面，于是就得到现在所看到的画面。网页有多种分类，最常见的分类是静态网页和动态网页。静态网页是事先做好并存放在 WWW 服务器中的网页，当客户通过浏览器向 WWW服务器发出网页请求时，服务器查找相应的网页，不加处理直接运行在客户端的浏览器上。动态网页指的是通过网站服务器运行程序，利用网页脚本与语言自动处理即时生成的页面，它可以实现客户端和服务器端即时信息交流，即服务器可以根据浏览者的请求做出相应的动作或回复，比如网络查分、在线聊天、信息检索等。静态网页需要事先做好，如果网站的网页都做成静态网页，那么时效上就比较滞后，效率会非常低下，更不能实现客户端和服务器端的即时交互。目前万维网上运行的网页绝大多数都是动态网页。静态网页和动态网页在制作技术上并不是完全割裂开的，制作静态网页是制作动态网页的基础，动态网页制作中包含了很多静态网页制作的内容。(2)网站网站(Web Site)是指在 Internet 上，根据一定的规则，利用 HTML 等工具制作的用于展示特定内容的相关网页的集合，这些网页通过各种链接相关联，实现网页之间的跳转。简单地说，网站是一种通讯平台，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。WWW 由众多网站组成，网站存放在世界某个角落的某台计算机中，而这台计算机必22须是与互联网相连的，网页经由网址来识别与存取。网址指明了特定的计算机和路径名，用户通过它可对信息资源进行访问。在 Internet 的早期，网站还只能保存单纯的文本。当万维网出现之后，图像、声音、动画、视频，甚至 3D 技术开始在 Internet 上流行起来，网站也慢慢地发展成现在看到的图文并茂的样子。通过动态网页技术，用户也可以与其他用户或者网站管理者进行交流。此外，也有一些网站提供电子邮件服务。网站有多种分类，根据网站所用编