Dreamweaver CS5网页制作pdf/doc/txt格式电子书下载
本站仅展示书籍部分内容
如有任何咨询
请加微信10090337咨询
书名：Dreamweaver CS5网页制作pdf/doc/txt格式电子书下载
推荐语：
作者：杨杰,段欣等编
出版社：电子工业出版社
出版时间：2013-08-01
书籍编号：30467239
ISBN：9787121195068
正文语种：中文
字数：73184
版次：1
所属分类：教材教辅-中职/高职
版权信息
书名：Dreamweaver CS5网页制作
作者：杨杰 段欣
ISBN：9787121195068
版权所有 · 侵权必究
前言
为适应中等职业学校课程改革的需要，根据教育部《中等职业学校专业目录（2010修订）》中“信息技术类”专业课程方案的要求，从网页制作技能培训的实际出发，结合当前网页制作软件的最流行版本Dreamweaver CS5，我们组织编写了本书。本书的编写从满足经济发展对高素质劳动者和技能型人才的需要出发，以利于学生更好地掌握本课程为目标，在课程结构、教学内容、教学方法等方面进行了新的探索与改革创新，有利于学生对理论知识的掌握和实际操作技能的提高。
本书按照“以服务为宗旨，以就业为导向”的职业教育办学指导思想，采用“行动导向，任务驱动”的方法，以实训引领知识的学习，通过实训的具体操作引出相关的知识点，通过“案例描述”、“案例分析”和“操作步骤”，引导学生在“学中做”、“做中学”，把基础知识的学习和基本技能的掌握有机地结合在一起，从具体的操作实践中培养自己的应用能力，并通过“知识拓展”、“小技巧”等环节，进一步开拓学生视野，最后通过“上机实训”，促进读者巩固所学知识并熟练操作。本书的经典案例来自于生活，更符合中职学生的理解能力和接受程度。
本教材采用模块教学方式，共分5个模块，依次介绍了网页设计基础、Dreamweaver CS5 基本操作、Dreamweaver CS5高级应用、网站的测试与发布、Dreamweaver CS5综合应用等内容。
本书由杨杰、段欣担任主编，由宁阳职业中专宁留文、济南商贸学校张加青担任副主编，寿光工贸学校张荣美担任参编，曲波、张丽等一些职业学校的老师参与了程序测试、试教和修改工作，在此表示衷心的感谢。
由于编者水平有限，难免有错误和不妥之处，恳请广大读者批评指正。
为了提高学习效率和教学效果，方便教师教学，本书还配有教学指南、电子教案、素材以及习题答案，请有此需要的读者登录华信教育资源网（http：//www.hxedu.com.cn）免费注册后进行下载，有问题时请在网站留言板留言或与电子工业出版社联系（E-mail：hxedu＠phei.com.cn）。
编者
2013年7月
模块1 网页设计基础
实训1 体验HTML文档
实训目的
1.了解HTML文档的基本结构。
2.学会使用HTML源代码制作简单网页的方法。
实训步骤
1.将素材库中的chapter1文件夹复制到D盘根目录，选择“开始→程序→附件→记事本”命令，打开记事本窗口，在记事本中输入以下HTML代码：
2.代码输入完毕，选择“文件→保存”命令，打开“另存为”对话框，选择保存位置为D：\\chapter1文件夹，文件名为“myweb1.html”，保存类型为“所有文件”，如图1-1所示，单击“保存”按钮。
图1-1“另存为”对话框
3.在“我的电脑”中打开D：\\chapter1文件夹，双击myweb1.html打开浏览器浏览该网页，可以看到字幕“大家好！这是我用记事本编写的第一个网页。”。从右向左滚动，标题“滚动的字幕”出现在浏览器的标题栏，如图1-2所示。
图1-2 浏览myweb1.html网页
4.选择“收藏→添加到收藏夹”命令，可以将该网页以名称“滚动的字幕”添加到收藏夹中，如图1-3所示。
图1-3 添加到收藏夹
5.选择“开始→程序→Adobe Dreamweaver CS5”，启动Dreamweaver CS5软件，选择“文件→打开”命令，打开D：\\chapter1\\myweb2.html，如图1-4所示。
图1-4 在Dreamweaver CS5中打开myweb2.html
6.按【F4】键隐藏所有面板，单击“文档”工具栏上的“代码”按钮，切换到Dreamweaver CS5的“代码”视图，对代码进行如图1-5所示的修改。
7.单击“设计”按钮切换到“设计”视图，按【F12】键保存并浏览网页，如图1-6所示。单击“Adobe官方网站”，将在浏览器的新窗口中打开Adobe官方网站。
图1-5 Dreamweaver CS5“代码”视图
图1-6 预览myweb2.html文件
8.打开D：\\chapter1文件夹，选择myweb3.html文件，单击鼠标右键，在弹出的快捷菜单中选择“打开方式→记事本”命令打开该HTML文档。
9.在<body>和</body>标记之间添加以下代码。
10.选择“文件→保存”命令，关闭记事本。双击myweb3.html，打开浏览器浏览网页，如图1-7所示。
图1-7 浏览lx.html网页
11.单击“我的地盘”将打开myweb1.html，单击“一听音乐”将打开音乐网欣赏MP3，单击“与我联系”将启动Outlook Express软件发送邮件，如图1-8所示。
图1-8 使用Outlook Express发送邮件
1.1 网页基础知识
1.Internet概述
Internet，中文名称为“因特网”或“国际因特网”，是利用通信线路和通信设备将世界各地的计算机网络、主机和个人计算机互相连接起来，在网络协议控制下所构成的全球因特网系统，如图1-9所示。
图1-9 Internet示意图
Internet提供的服务主要包括万维网（WWW）、电子邮件（E-mail）、文件传输（FTP）、远程登录（Telnet）。对于我们这些生活在现代社会的人，没有Internet的生活简直无法想象，从每天的新闻报告、天气资讯，到形形色色的在线音乐、网络视频，再到外出旅行的机票预订、旅馆安排，甚至网上购物、网上银行、网络证券交易等活动，网络已经渗透到我们生活的各个角落。
2.WWW服务
WWW是World Wide Web的缩写，其含义是“全球网”，很多人也称其为“万维网”。WWW是一种基于HTTP（超文本传输协议）的交互式多媒体信息检索工具。使用WWW，只需单击就可以在Internet上浏览各种信息资源。
WWW服务采用客户机/服务器工作模式，由WWW浏览器、Web服务器和WWW协议组成。WWW的信息资源以页面（也称网页、Web页）的形式存储在Web服务器中，用户通过客户端的浏览器，向Web服务器（通常也称为WWW站点或Web站点）发出URL（Uniform Resource Locators，统一资源定位符，也称为网址）请求，服务器接收并处理用户请求后，将网页返回给客户端，浏览器接收到网页后对其进行解释，最终将文字、图片、声音、动画、影视并茂的画面呈现给用户，如图1-10所示。
WWW浏览器是专门来定位和访问Web信息的应用程序。常用的浏览器软件包括Microsoft公司的Internet Explorer。
Web服务器是对浏览器的请求提供服务的计算机及其相应的服务程序。网页设计者将制作好的网站上传到Web服务器上才能被用户浏览。
图1-10 WWW服务的工作流程
3.Web站点和网页
Web站点，又称为网站，指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，Web站点是一种通信工具，人们可以通过网站来发布自己想要公开的资讯，或者利用Web站点来提供相关的网络服务，通过上传下载软件上传到Web服务器，浏览者可以通过网页浏览器来访问Web网站，获取自己需要的资讯或者享受网络服务，其工作原理如图1-11所示。
图1-11 Web站点工作原理
网页是构成网站的基本元素，一般又称作HTML文档，是一种可以在因特网上传输，能被浏览器识别和翻译成页面并显示出来的文件。通常看到的网页，都是以 htm 或 html 为扩展名的文件，这些网页称为静态网页。根据采用的服务器技术的不同，网页扩展名又有asp、php、jsp等，这些网页称为动态网页。当用户在浏览器的地址栏中输入网站的URL后见到的第一个网页称为网站的主页，主页是网站中所有网页的索引页，通过单击主页上的超链接可以打开其他的网页。
4.HTTP和URL
HTTP：超文本传输协议，是因特网上应用最为广泛的一种网络协议，它允许将HTML文档从Web服务器传送到WWW浏览器。
URL：Internet中的Web服务器数量众多，且每台服务器都包含有多个网页，用户要想在众多的网页中指明要获得的网页，就必须借助于URL进行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例如：某网页的URL为http：//www.rsnyl.com/news/wj1.html，其中http：是采用的协议，www.rsnyl.com是主机名，news指网页的路径（存储网页的文件夹），wj1.html是要访问的网页文件名。用户只要在浏览器的地址栏中输入要浏览网页的URL，便可以浏览到该网页。
1.2 网站配色方案
色彩是人的视觉最敏感的东西。网站主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则是“总体协调，局部对比”，也就是说主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。
1.色彩的搭配原则
（1）色彩的鲜明性
如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。
（2）色彩的独特性
网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印象。
（3）色彩的艺术性
网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。
（4）色彩搭配的合理性
色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。
2.色彩搭配方案
色环实质上就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色。一个色环通常包括12种明显不同的颜色，如图1-12所示。
（1）单色方案
单色方案指在网站设计中始终使用一种基本颜色。为避免单调，可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案，如图1-13所示的网站即采用了单色配色方案。
图1-12 色环图
图1-13 单色方案网站案例
单色方案是一种比较稳重的方案，给人整洁、经典的感觉，最适合于内容比较严肃的网站，例如政府网站、学术网站、企业网站、高雅艺术网站。同时，一些商业网站也比较适合使用此种配色方案，因为这种方案给人一种稳定感，使访问者容易建立对网站的信任。
（2）相似色配色方案
相似色配色方案指在色彩圆环上选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色，以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色，如果再加上亮度和饱和度的变化，可以构成的颜色就非常多，如图1-14所示的网站即采用了相似色配色方案。
图1-14 相似色配色方案网站案例
通常，相似色配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。典型的运用方法就是用一种颜色作为页面背景，而另外一种在色环中与其相邻的颜色作为前景色。
（3）互补色配色方案
互补色配色方案指在色彩圆环上沿直径选择相对应的两种颜色构成配色方案。如图1-15所示的网站即采用了互补色配色方案。
图1-15 互补色配色方案网站案例
互补色配色方案虽然略显烦琐，但是在现在的网站设计中非常流行。由于互补色适合于呈现活泼时尚的效果，因此可以让网站魅力四射。
（4）三色配色方案
三色配色方案指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。三色方案中使用了三种彼此之间差别明显，对比强烈的颜色，因此页面显得相当不稳定，给人带来另类的感觉，给予浏览者某种紧张感。如图1-16所示的网站即采用了三色配色方案。
图1-16 三色配色方案网站案例
1.3 网站设计常用软件
1.网站设计开发软件
（1）文本编辑器
制作网页通常使用HTML语言，HTML文档可以使用多种文本编辑器进行编辑，如记事本、Word写字板、UltraEdit等。其中，UltraEdit是一套功能最强大的文本编辑器，可以编辑文本、十六进制、ASCII码，具有HTML标签颜色显示、搜寻替换，以及无限制的还原功能，但不具备所见即所得功能，适合编辑HTML文档源代码，也称为源代码编辑器。
（2）FrontPage
FrontPage是微软公司出品的一款网页制作入门级软件。FrontPage使用方便简单，会用Word就能做网页，所见即所得是其特点。该软件结合了设计、HTML、预览三种显示模式。相对于其他专业设计软件，其功能简单，不适合制作复杂的动态网页，而只适合于初学者。
（3）Dreamweaver
Dreamweaver是由Adobe公司推出一款优秀的网站开发工具，是网页设计师在选择开发工具时一个不错的选择，能更有效地设计、开发和维护基于网站标准化的网站。它集成了众多网站开发中涉及的最新技术，扩展了页面设计与制作、多媒体开发和动画设计等功能，是当前最为流行的网站设计工具之一。
2.网页美化工具软件
（1）Photoshop
Photoshop是由Adobe公司开发的一种的图形图像软件，是目前最好的平面设计软件之一。其功能完善、性能稳定、使用方便，是美化网页的常用工具。
（2）Fireworks
Fireworks是一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。
（3）Flash
Flash是专业的矢量图形编辑和动画创作软件，是一种交互式动画设计工具，用它可以将音乐、声效、动画，以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。
1.4 HTML文档入门
1.HTML语言概述
HTML（Hypertext Marked Language，超文本标记语言）是用于创建Web文档的一种标记语言。自1990年首次用于网页编辑后，由于其编写的简易性，HTML迅速成为网页编程的主流语言，几乎所有的网页都是由HTML或其他语言程序嵌套在HTML语言中编写的。
在IE浏览器中任意打开一个网页，选择“查看→源文件”命令，系统会启动记事本程序，打开该网页的源程序代码，如图1-17所示。
这些文本其实就是HTML源代码，可使用任意文字编辑器来编写，保存为.htm或.html格式即可。要制作HTML文档，一般有两种方法：一种是使用记事本之类的工具，直接输入HTML的源代码，然后保存为以html或htm为扩展名的网页文件；另一种方法是使用可视化的网页制作工具，根据用户的操作自动生成HTML代码，如Dreamweaver、FrontPage等软件。
图1-17 查看源程序代码
2.HTML文档基本结构
一个HTML文档是由一系列的元素和标记组成的，HTML用标记来规定元素的属性和它在文件中的位置。HTML文档的结构包括头部分（head）和主体部分（body）两大部分，其中头部分描述浏览器所需的信息，主体部分则包含了所要说明的具体内容，具体结构如图1-18所示。
图1-18 HTML文档结构
由图1-18可以看出：
① HTML文档包括3个主要标记，文档标记<html>……</html>、头部标记<head>……</head>和主体标记<body>……</body>。
② 标记不区分大小写。
③ 所有的标记都要用尖括号<>括起来。
④ 标记中如果包含多个参数，各参数之间用空格分隔，参数位置不受限制。
<html>标记用于HTML文档的最前面，用来标识HTML文档的开始，而</html>标记恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，这两个标记必须成对使用。
在<head>……</head>内，称为文件头部，可以包含<title></title>、<script></script>等标记，这部分信息不会在浏览器的窗口中显示出来。
在<body>……</body>内，称为正文主体，可包含<p></p>、<img>、<br>、<a></a>等标记，其内容将在浏览器窗口中显示出来。
3.HTML文档常用标记
（1）标题标记
格式：<title>网页的标题</title>
说明：该标记在<head></head>标记中，所包含的文字将出现在浏览器的标题栏上。当用户将此页面添加到收藏夹时，也会默认以该标题为名称，如图1-19所示。
图1-19 添加到收藏夹
（2）主体标记
格式：
说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。背景颜色和文本颜色可以使用颜色名（如蓝色：blue）或颜色代码值（如蓝色：＃0000FF）来表示。
例如：将图像tx.jpg设置为网页背景图像，网页文字颜色为蓝色。
（3）文字标记
格式：
说明：<font>标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时，<font size=1>（最小）、<font size=7>（最大）、<font size=+1>（比预设字大一级）、<font size=-1>（比预设字小一级）。
例如：将文本“最新通知”设置为楷体_GB2312，大小为4。
（4）段落标记
格式：
说明：由<p>标记所标识的文字代表同一个段落的文字。其中align属性有left、center和right三个参数，这三个设置分别代表左对齐、居中对齐和右对齐。
例如：将标题“会议通知”居中显示。
（5）换行标记
格式：
说明：<br>是个单标记，HTML文件中任何位置只要使用了<br>标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。
（6）水平线标记
格式：
说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清晰、明确。noshade用于设置水平为实心线（默认情况下为阴影线）。
例如：插入一条宽度800像素的红色水平线，并居中显示。
（7）图像标记
格式：
说明：在页面中插入一幅图像，图像地址可以在本地计算机，也可以是一个URL地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插入到网页中。Alt参数用于设置图像的说明信息，当浏览器不能显示图像时，则用该参数指定的文本替换特定的图片。若图片正常显示，则当鼠标指向该图片时也会显示该文字。
例如：插入images文件夹中的图像tx.jpg，宽度和高度均为300像素，鼠标指向图像或图像不能正常浏览时提示“风景图片”。
（8）超链接标记
格式：
说明：为标记中的文本或图像添加超链接目标，浏览网页时单击可打开指定的目标文件。target 用于指定打开目标窗口的方式，默认情况是在当前窗口中打开，如果要在新窗口中打开目标窗口，则可将target的属性值设为＂_blank＂。
根据链接目标的不同，可将超链接分为以下几项：
① 内部链接。链接到本地计算机上的文件，例如：
② 外部链接。链接到本地站点以外其他任何一个站点上的文件，例如：
③ E-mail链接。链接到一个电子邮件地址，单击将启动默认E-mail程序发送信件，例如：
④ 锚记链接。在某个Web页面中创建一个被称为“锚点”的标记，让页面上的另外一个位置引用，相当于在某个文件中重要之处做上书签，需要该部分时直接查找书签就能找到此部分。
例如：在某HTML文档中定义一个abc的锚记。
然后在该文档的另外一个位置创建一个锚记链接。
（9）表格标记
表格标记由表格标记、行标记和单元格标记3部分组成。
① 表格标记
② 行标记
③ 单元格标记
说明：单元格边距指单元格内容与单元边框之间的像素数，单元格间距指相邻单元格之间的距离。
例如：创建一个如图1-20所示的表格，对应的源代码如下。
图1-20 表格
（10）表单标记
格式：
说明：表单标记与动态网站制作是分不开的，form 标记中，action=＂文件＂指这个表单提交后，将传送给哪个文件处理；method=＂提交方式＂指将表单信息提交服务器的方式，一般包括 POST（以文件形式不限制长度提交）和 GET（附加在 URL 地址后限制长度提交）两种。
使用<form>标记定义表单后，就要通过具体的表单对象添加信息，常见的表单对象有以下几种。
① 文本域
◇ 单行文本域，用户输入的信息原样显示。其语法格式为：
◇ 密码文本域：用户输入的信息以“●”形式显示。其语法格式为：
◇ 多行文本域：输入信息可以是多行，一般用于简介、留言等选项。其语法格式为：
② 选择域
◇ 单选按钮：只允许选取一项，一般用于性别等选项。其语法格式为：
◇ 复选框：可以多项选取，一般用于爱好、特长等选项。其语法格式为：
③ 菜单域
可提供让浏览者在给出的菜单中作一个选择，如选择籍贯、类别、日期、学历等。
◇ 下拉菜单：提供一个下拉式菜单，其语法格式为：
◇ 滚动菜单：提供一个带滚动条的菜单，其语法格式为：
④ 按钮域
◇ 提交按钮：将所输入的内容提交给相关程序，让服务器对其进行处理。其语法格式为：
◇ 重置按钮：把刚输入的内容清除，重新输入。其语法格式为：
例如，创建如图1-21所示的表单，对应的源代码如下。
图1-21 表单
（11）滚动标记
格式：
说明：方向（direction）：left（左）、right（右）、up（上）、down（下）。
方式（behavior）：alternate（来回滚动）、slide（滚动一圈）、scroll（循环滚动）。
速度（scrollamount）：值越大速度越快。
例如：让“今天天气不错，心情很好！”从左向右循环滚动。
思考与实训1
一、填空题
1.静态网页的扩展名一般是__________或__________。
2.__________是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。
3.WWW 在服务上采用的是__________模式，用户创建的网站必须放到__________上才能被浏览者访问。
4.网页一般又称作__________，是一种可以在因特网上传输，能被浏览器识别和翻译成页面并显示出来的文件。
5.色彩总的应用原则应该是__________。
6.__________实质上就是在彩色光谱中所见的长条形的色彩序列。
7.在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是__________。
8.在HTML文档中，__________标记用于HMTL文档的最前面，用来标识HTML文档的开始。
9.在HTML文档中，标记中如果包含多个参数，各参数之间用__________分隔。
10.在＜a＞超链接标记中，如果要在新窗口中打开目标窗口，则可将target的属性值设为__________。
11.在＜img＞标记中，要设置图像的对齐方式，可使用的参数是__________。
12.在＜form＞标记中，要使提交内容不受长度限制，参数method的值必须是__________。
13.在表单对象中，最适合表示性别项的是__________。
14.在＜input＞标记中，当参数 type的值为submit时，则代表的表单对象是__________。
15.在＜marquee＞标记中，要让字幕始终循环滚动，则参数behavior的值为__________。
二、上机实训
1.在记事本中创建如图1-22所示的网页，网页背景色为＃CCCCCC，保存在D：\\chapter1文件夹中，网页文件名为web1.html。
图1-22 web1.html网页文件
2.在记事本或Dreamwever CS5代码视图中编辑D：\\chapter1\\web2.html的源代码，实现以下预览效果，如图1-23所示。
图1-23 web2.html预览效果
说明：“规范、精准、熟练、全面”从右向左循环滚动，在“项目搜索”中输入要查找的项目，单击“搜索”按钮表单将以POST方法提交到cl.asp文件。图片dstp.jpg位于images文件夹中，单击“全国职业院校技能大赛官方网站”将在新窗口中打开http：//www.nvsc.com.cn/。web2.html的源代码如下所示。
模块2 Dreamweaver CS5基本操作
实训2 快乐驿站——创建与管理本地站点
实训目的
1.学会本地站点的创建与编辑方法。
2.学会网页文件的新建、保存、预览等基本操作。
实训步骤
1.在D盘根目录中新建文件夹klyz，将素材shixun
....
本站仅展示书籍部分内容
如有任何咨询
请加微信10090337咨询
