作者：杨杰
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页设计与制作(Dreamweaver CS6)试读：
前言
为建立健全教育质量保障体系，提高职业教育质量，教育部于2014年颁布了中等职业学校专业教学标准（以下简称专业教学标准）。专业教学标准是指导和管理中等职业学校教学工作的主要依据，是保证教育教学质量和人才培养规格的纲领性教学文件。在“教育部办公厅关于公布首批《中等职业学校专业教学标准（试行）》目录的通知”（教职成厅[2014]11号文）中，强调“专业教学标准是开展专业教学的基本文件，是明确培养目标和规格、组织实施教学、规范教学管理、加强专业建设、开发教材和学习资源的基本依据，是评估教育教学质量的主要标尺，同时也是社会用人单位选用中等职业学校毕业生的重要参考。”
本书特色
本书根据教育部颁发的《中等职业学校专业教学标准（试行）信息技术类（第一辑）》中的相关教学内容和要求编写。
本书按照“以服务为宗旨，以就业为导向”的职业教育办学指导思想，采用“行动导向，任务驱动”的方法，以任务引领知识的学习，通过任务的具体操作引出相关的知识点，通过“任务描述”、“知识准备”和“实施步骤”，引导学生在“学中做”、“做中学”，把基础知识的学习和基本技能的掌握有机地结合在一起，从具体的操作实践中培养自己的应用能力，并通过相关“知识拓展”追加相关小技巧等提高性知识，进一步开拓学生视野，最后通过“达标检测”，促进读者巩固所学知识并熟练操作。本书的经典案例来自于生活，更符合中职学生的理解能力和接受程度。
本教材采用模块教学方式，共分6个模块，依次介绍了网页设计基础、初级应用、页面布局、高级应用、网站的测试和发布、综合应用等内容。
本书作者
本书由杨杰等主编，段欣主审，宁阳职业中专宁留文、济南商贸学校张加青、济南信息工程学校付浩、寿光职教中心张荣美参编，曲波、张丽等一些职业学校的老师参与了程序测试、试教和修改工作，在此表示衷心的感谢。
教学资源
为了提高学习效率和教学效果，方便教师教学，本书还配有电子教学参考资料包，包括电子教案、教学指南、素材文件、微课等，请有此需要的教师登录华信教育资源网（www.hxedu.com.cn）免费注册后下载。有问题时请在网站留言板留言或与电子工业出版社（E-mail：hxedu＠phei.com.cn）联系。
由于作者水平有限，书中难免有错误和不妥之处，恳请广大师生和读者批评指正。编者模块1网页设计基础任务1.1 体验HTML文档
任务描述
通过在记事本和Dreamweaver中使用HTML代码制作网页，介绍HTML代码的常用标记及使用HTML代码制作简单网页的方法。
任务解析
在本任务中，需要完成以下操作：
①在记事本中输入HTML代码制作简单网页。
②在Dreamweaver中使用代码视图查看网页代码。
③在Dreamweaver的代码视图中编辑HTML代码。（1）选择“开始→程序→附件→记事本”命令，打开记事本窗口，在记事本中输入以下HTML代码。（2）输入完毕后选择“文件→保存”命令，打开“另存为”对话框，选择保存位置为素材库的chapter1文件夹，文件名为“myweb1.html”，保存类型为“所有文件”，如图1-1所示，单击“保存”按钮。（3）在“我的电脑”中打开chapter1文件夹，双击myweb1.html，打开浏览器浏览该网页，可以看到字幕“大家好！这是我用记事本编写的第一个网页。”从右向左滚动，标题“滚动的字幕”出现在浏览器的标题栏，如图1-2所示。图1-1 “另存为”对话框图1-2 浏览myweb1.html（4）选择“收藏→添加到收藏夹”命令，将该网页以名称“滚动的字幕”添加到收藏夹中，如图1-3所示。图1-3 添加到收藏夹（5）选择“开始→程序→Adobe Dreamweaver CS6”命令，启动Dreamweaver CS6，选择“文件→打开”命令，打开chapter1文件夹中的myweb2.html，如图1-4所示。（6）按【F4】键隐藏所有面板，单击“文档”工具栏中的“代码”按钮，切换到Dreamweaver 的“代码”视图，对代码进行如图1-5所示的修改。图1-4 在Dreamweaver 中打开myweb2.html图1-5 Dreamweaver代码视图（7）单击“设计”按钮，切换到设计视图，按【F12】键保存并浏览网页，如图1-6所示。单击“Adobe官方网站”超链接，将在浏览器的新窗口中打开Adobe官方网站。图1-6 预览myweb2.html文件（8）在Dreamweaver中打开chapter1文件夹中的myweb3.html，切换到代码视图。（9）在
和之间添加以下代码。（10）选择“文件→保存”命令，按【F12】键浏览该网页，效果如图1-7所示。（11）单击“网站主页”超链接将打开myweb1.html，单击“梨花小镇”超链接将打开梨花小镇的网站，单击“与我联系”超链接将启动Outlook Express软件，并可以发送邮件，如图1-8所示。图1-7 浏览myweb3.html文件图1-8 使用Outlook Express发送邮件1.1.1 网页基础知识1.Internet概述
Internet的中文名称为“因特网”或“国际互联网”，是利用通信线路和通信设备将世界各地的计算机网络、主机和个人计算机互相连接起来，在网络协议控制下所构成的全球互联网系统，如图1-9所示。图1-9 Internet示意图
Internet提供的服务主要包括万维网（WWW）、电子邮件（E-mail）、文件传输协议（FTP）、远程登录（Telnet）等。对于生活在现代社会的人，没有Internet的生活简直无法想象，从每天的新闻报告、天气资讯，到形形色色的在线音乐、网络视频、QQ、微博、微信，再到外出旅行的机票预订、旅馆预订、网上购物、证券交易等活动，网络已经渗透到人们生活的各个角落。
2.WWW服务
WWW是World Wide Web的缩写，其含义是“全球网”，也称为“万维网”。WWW是一种基于HTTP的交互式多媒体信息检索工具。使用WWW，只需单击超链接就可以在Internet上浏览各种信息资源。
WWW服务采用客户机/服务器工作模式，由WWW浏览器、Web服务器和WWW协议组成。WWW的信息资源以网页的形式存储在Web服务器中，用户通过客户端的浏览器，向Web服务器发出URL请求，Web服务器接收并处理用户请求后，将网页返回给客户端，浏览器接收到网页后对其进行解释，最终将文字、图片、声音、动画、影视等画面呈现给用户，如图1-10所示。图1-10 WWW服务的工作流程
WWW浏览器是专门用于定位和访问Web信息的应用程序。常用的浏览器软件包括Microsoft公司的Internet Explorer和Netscape公司的Navigator。
Web服务器是对浏览器的请求提供服务的计算机及其相应的服务程序。网页设计者将制作好的网站上传到Web服务器上才能被用户浏览。
3.Web站点和网页
Web站点又称为网站，是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，Web站点是一种通信工具，人们可以通过网站来发布自己想要公开的资讯，或者利用Web站点来提供相关的网络服务，浏览者可以通过网页浏览器来访问Web网站，获取需要的资讯或者享受网络服务，其运作原理如图1-11所示。图1-11 Web站点运作原理
网页是构成网站的基本元素，一般又称为HTML文档，是一种可以在互联网上传输，能被浏览器识别和翻译成页面并显示出来的文件。通常人们看到的网页，都是以.htm 或.html 为扩展名的文件，这些网页称为静态网页。
根据采用服务器技术的不同，网页扩展名有.asp、.php、.jsp等，这些网页称为动态网页。在浏览器的地址栏中输入网站的URL后见到的第一个网页称为网站的主页，主页是网站中所有网页的索引页，通过单击主页上的超链接可以打开其他网页。
4.HTTP和URL
HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议，它允许将HTML文档从 Web 服务器传送到WWW浏览器。
Internet中的Web服务器数量众多，且每台服务器包含多个网页，用户要想在众多的网页中指明要获得的网页，就必须借助于统一资源定位符（Uniform Resource Locators，URL）进行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例如，某网页的URL为
http://www.sdcjgk.net/news/wj1.html
其中，http是采用的协议，www.sdcjgk.net是主机名，news指网页的路径（存储网页的文件夹），wj1.html是要访问的网页文件名。用户只要在浏览器的地址栏中输入要浏览网页的URL，便可以浏览到该网页。1.1.2 网站配色方案
1.色彩的基础知识
色彩是网站中最主要的组成部分，网站页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩一般分为无彩色和有彩色两大类。无彩色是指黑、灰、白等不带颜色的色彩，有彩色是指红、黄、蓝等带有颜色的色彩。
1）色彩的三要素（1）色相：指色彩的相貌，也就是各种颜色之间的区别，是色彩最显著的特征。（2）明度：指色彩本身的明暗深浅程度，简单来说就是指色彩的程度。（3）纯度：指色彩本身的鲜艳程序，又称为色彩的饱和度。
2）色彩的感觉（1）红色：最引人注目的色彩，具有强烈的感染力，象征热情、喜庆、幸福。红色在色彩配合中常起着主色和重要的调和对比作用，是使用最多的颜色。（2）绿色：植物的色彩，象征着平静、健康、健全、和谐和安全。（3）蓝色：使人联想到天空、海洋，给人以爽朗、清凉的感觉，象征着平静、稳定、和谐、统一、信任。（4）黄色：给人明朗愉快的感觉，象征着光明、希望、高贵、愉快。（5）橙色：介于红色与黄色之间，可以营造一种温馨的氛围，象征着温馨、时尚、轻快。（6）紫色：一种优雅、高贵、充满灵性并能激发创造力的颜色，象征着优雅、神秘、忧郁。（7）白色：给人以干净整洁的感觉，象征着纯洁、天真、干净、轻松、神圣。（8）黑色：一种比较经典的色彩，象征着严肃、神秘、威严、深沉、压抑。（9）灰色：一种可以衬托任何色彩的颜色，象征温和、谦让、平凡、考究。
2.色彩的搭配原则（1）网页色彩搭配时，要善用单色、对比色、邻近色和同类色。（2）网页要使用与众不同的色彩，不同类型的网站配以不同的色彩，从而表达不同的情感诉求。（3）色彩要和网站的内容、文化氛围相符合，以便更好地突出网站的特色。（4）网页配色时，尽量把颜色控制在三种之内，以免使页面产生“乱”的效果。
3.网站常见的配色方案（1）儿童类网站：常运用幸福感强烈、充满温情、智慧和希望的黄色；干净、清澈的蓝色；渲染朝气、健康、自然的绿色；营造温馨氛围、活泼、朝气的橙色，如图1-12所示。（2）教育类网站：常运用平静、清澈的蓝色；充满希望的绿色；营造活泼、朝气氛围的橙色，如图1-13所示。图1-12 儿童网站图1-13 教育网站（3）企业类网站：常运用沉稳、冷静、严谨、成熟的冷色调蓝色，给人一种稳定感，使访问者容易建立对网站的信任，如图1-14所示。图1-14 企业网站（4）购物类网站：常运用红色、黄色、橙色等暖色调渲染氛围，让浏览者感觉到轻松和愉快，如图1-15所示。图1-15 购物网站（5）旅游休闲类网站：常运用代表大自然、健康和希望的绿色，代表天空、海洋、干净、清澈的蓝色，如图1-16所示。图1-16 旅游网站1.1.3 网站设计常用软件
1.网站设计开发软件
1）文本编辑器
制作网页通常使用HTML，HTML文档可以使用多种文本编辑器进行编辑，如记事本、Word、写字板、UltraEdit等。其中，UltraEdit是一套功能强大的文本编辑器，可以编辑文本、十六进制、ASCII码，具有HTML标签颜色显示、搜寻替换及无限制的还原功能，但不具备所见即所得功能，适合编辑HTML文档源代码，也称为源代码编辑器。
2)FrontPage
FrontPage是Microsoft公司出品的一款网页制作入门级软件。FrontPage使用方便简单，会用Word就能做网页，所见即所得是其特点，该软件结合了设计、HTML、预览三种显示模式，相对于其他专业设计软件而言，其功能简单，不适合制作复杂的动态网页，适合初学者使用。
3)Dreamweaver
Dreamweaver是由Adobe公司推出的一款优秀的网站开发工具，是网页设计师在选择开发工具时一个不错的选择，能更有效地设计、开发和维护基于网站校准化的网站，它集成了众多网站开发中涉及的最新技术，扩展了页面设计与制作、多媒体开发和动画设计等功能，是当前最为流行的网站设计工具之一。
2.网页美化工具
1)Photoshop
Photoshop是由Adobe公司开发的一种图形图像软件，是目前最好的平面设计软件之一，其功能完善、性能稳定、使用方便，是美化网页的常用工具。
2)Fireworks
Fireworks是一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计者还是业余爱好者，使用Fireworks不仅可以轻松地制作出十分动感的GIF动画，还可以轻松地完成大图切割、动态按钮、动态翻转图等。
3)Flash
Flash是专业的矢量图形编辑和动画创作软件，是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，制作出高品质的网页动态效果。1.1.4 HTML文档入门
1.HTML语言概述
HTML（Hypertext Marked Language，超文本标记语言）是用于创建Web文档的一种标记语言。自1990年首次用于网页编辑后，由于其编写制作简易，HTML迅速成为网页编程的主流语言，几乎所有的网页都是由HTML或其他语言程序嵌套在HTML中编写的。
在IE浏览器中任意打开一个网页，选择“查看→源文件”命令，系统会启动记事本程序，打开该网页的源程序，如图1-17所示。图1-17 查看源程序
这些文本其实就是HTML源代码，可使用任意文字编辑器来编写，保存为HTM或HTML格式即可。要制作HTML文档，一般有两种方法：一种方法是使用记事本之类的工具，直接输入HTML的源代码，然后保存为以.html或.htm为扩展名的网页文件；另一种方法是使用可视化的网页制作工具，根据用户的操作自动生成HTML代码，如Dreamweaver、FrontPage等软件。
2.HTML文档基本结构
一个HTML文档是由一系列的网页元素和标记组成的，HTML用标记来规定元素的属性和它在文件中的位置。HTML文档的结构包括头部分（head）和主体部分（body）两大部分，其中，头部分用于描述浏览器所需的信息，主体部分包含了所要说明的具体内容，具体结构如图1-18所示。图1-18 HTML文档结构
由上面可以看出：（1）HTML文档包括三个主要标记，文档标记……、头部标记
…… 和主体标记……。（2）标记不区分大小写。（3）所有的标记都要用尖括号<>括起来。标记用于HTML文档的最前面，用来标识HTML文档的开始，而标记恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，这两个标记必须成对使用。
……中的内容称为文件头部，可以包含、等标记，其内容将在浏览器窗口中显示出来。
3.HTML文档常用标记
1）标题标记
格式：
说明：该标记在
标记中，所包含的文字将出现在浏览器的标题栏中。当用户将此页面添加到收藏夹时，会默认以该标题为名称收藏，如图1-19所示。图1-19 添加到收藏夹2）主体标记
格式：
说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。背景颜色和文本颜色可以使用颜色名（如蓝色blue）或颜色代码值（如蓝色＃0000FF）来表示。
例如，将图像tx.jpg设置为网页背景图像，网页文字颜色为蓝色的代码如下。
3）文字标记
格式：
文本内容
说明：标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时，（最小）、（最大）、（比预设字大一级）、（比预设字小一级）。
例如，将文本“最新通知”设置为楷体_GB2312，大小为4的代码如下。
最新通知
4）段落标记
格式：
段落文本
说明：由
标记所标识的文字代表同一个段落的文字。其中align属性有left、center和right三个参数，这三个参数分别代表左对齐、居中对齐和右对齐。
例如，将标题“会议通知”居中显示的代码如下。
会议通知
5）换行标记
格式：
说明：
是一个单标记，HTML文件中任何位置只要使用了
标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。
6）水平线标记
格式：
说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清晰、明确。noshade用于设置水平线为实心线（默认情况下为阴影线）。
例如，插入一条宽度800像素的红色水平线，并居中显示的代码如下。
7）图像标记
格式：
说明：在页面中插入一幅图像，图像可以是本地计算机上的文件，也可以是一个URL地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插入到网页中。alt参数用于设置图像的说明信息，当浏览器不能显示图像时，用该参数指定的文本替换特定的图片。若图片正常显示，则当鼠标指针指向该图片时也会显示该文字。
例如，插入images文件夹中的图像tx.jpg，宽度和高度均为300像素，鼠标指针指向图像或图像不能正常浏览时提示“风景图片”。
8）超链接标记
格式：
说明：为标记中的文本或图像添加超链接目标，浏览网页时单击超链接可打开指定的目标文件。target用于指定打开目标窗口的方式，默认情况是在当前窗口中打开，如果要在新窗口中打开目标窗口，则可将target的属性值设为"_blank"。
根据链接目标的不同，可将超链接分为以下几项。（1）内部超链接，链接到本地计算机上的文件，例如：
单击查看1.html文件内容（2）外部超链接，链接到本地站点以外其他任何一个站点上的文件，例如：
单击打开新浪网（3）E-mail链接，链接到一个电子邮件地址，单击超链接将启动默认E-mail程序并发送信件，例如：
请给我发信（4）锚记链接，在某个Web页面中创建一个被称为“锚点”的标记，使页面上的另外一个位置引用，相当于在某个文件的重要之处加上书签，需要该部分时直接查找书签就能找到。
例如，在某HTML文档中定义一个abc的锚记。
然后在该文档的另外一个位置创建一个锚记链接。
9）表格标记
表格标记由表格标记、行标记和单元格标记三部分组成。（1）表格标记：
说明：单元格边距指单元格内容与单元边框之间的像素数，单元格间距指相邻单元格之间的距离。
例如，创建一个如图1-20所示的表格，对应的源代码如下。图1-20 表格
10）表单标记
格式：
说明：表单标记与动态网站制作是分不开的，在form标记中，action="文件"是指这个表单提交后，将传送给哪个文件处理；method="提交方式"是指将表单信息提交给服务器的方式，一般包括POST（以文件形式、不限制长度）和GET（附加在URL地址后、限制长度）两种。
试读结束[说明：试读内容隐藏了图片]