书名：网页设计与制作（Dreamweaver CS6）pdf/doc/txt格式电子书下载

推荐语：

作者：杨杰编

出版社：电子工业出版社

出版时间：2016-02-01

书籍编号：30468045

ISBN：9787121249617

正文语种：中文

字数：133855

版次：1

所属分类：教材教辅-中职/高职

版权信息

书名：网页设计与制作（Dreamweaver CS6）

作者：杨杰

ISBN：9787121249617

版权所有 · 侵权必究

编审委员会名单

主任委员：

武马群

副主任委员：

王健 韩立凡 何文生

委员：

丁文慧 丁爱萍 于志博 马广月 马永芳 马玥桓 王帅 王苒 王彬 王晓姝 王家青 王皓轩 王新萍 方伟 方松林 孔祥华 龙天才 龙凯明 卢华东 由相宁 史宪美 史晓云 冯理明 冯雪燕 毕建伟 朱文娟 朱海波 向华 刘凌 刘猛 刘小华 刘天真 关莹 江永春 许昭霞 孙宏仪 杜珺 杜宏志 杜秋磊 李飞 李娜 李华平 李宇鹏 杨杰 杨怡 杨春红 吴伦 何琳 佘运祥 邹贵财 沈大林 宋薇 张平 张侨 张玲 张士忠 张文库 张东义 张兴华 张呈江 张建文 张凌杰 张媛媛 陆沁 陈玲 陈颜 陈丁君 陈天翔 陈观诚 陈佳玉 陈泓吉 陈学平 陈道斌 范铭慧 罗丹 周鹤 周海峰 庞震 赵艳莉 赵晨阳 赵增敏 郝俊华 胡尹 钟勤 段欣 段标 姜全生 钱峰 徐宁 徐兵 高强 高静 郭荔 郭立红 郭朝勇 黄彦 黄汉军 黄洪杰 崔长华 崔建成 梁姗 彭仲昆 葛艳玲 董新春 韩雪涛 韩新洲 曾平驿 曾祥民 温晞 谢世森 赖福生 谭建伟 戴建耘 魏茂林

序

当今是一个信息技术主宰的时代，以计算机应用为核心的信息技术已经渗透到人类活动的各个领域，彻底改变着人类传统的生产、工作、学习、交往、生活和思维方式。和语言和数学等能力一样，信息技术应用能力也已成为人们必须掌握的、最为重要的基本能力。可以说，信息技术应用能力和计算机相关专业，始终是职业教育培养多样化人才，传承技术技能，促进就业创业的重要载体和主要内容。

信息技术的发展，特别是数字媒体、互联网、移动通信等技术的普及应用，使信息技术的应用形态和领域都发生了重大的变化。第一，计算机技术的使用扩展至前所未有的程度，桌面电脑和移动终端（智能手机、平板电脑等）的普及，网络和移动通信技术的发展，使信息的获取、呈现与处理无处不在，人类社会生产、生活的诸多领域已无法脱离信息技术的支持而独立进行。第二，信息媒体处理的数字化衍生出新的信息技术应用领域，如数字影像、计算机平面设计、计算机动漫游戏和虚拟现实等。第三，信息技术与其他业务的应用有机地结合，如商业、金融、交通、物流、加工制造、工业设计、广告传媒和影视娱乐等，使之各自形成了独有的生态体系，综合信息处理、数据分析、智能控制、媒体创意和网络传播等日益成为当前信息技术的主要应用领域，并诞生了云计算、物联网、大数据和3D打印等指引未来信息技术应用的发展方向。

信息技术的不断推陈出新及应用领域的综合化和普及化，直接影响着技术、技能型人才的信息技术能力的培养定位，并引领着职业教育领域信息技术或计算机相关专业与课程改革、配套教材的建设，使之不断推陈出新、与时俱进。

2009年，教育部颁布了《中等职业学校计算机应用基础大纲》。2014年，教育部在2010年新修订的专业目录基础上，相继颁布了“计算机应用、数字媒体技术应用、计算机平面设计、计算机动漫与游戏制作、计算机网络技术、网站建设与管理、软件与信息服务、客户信息服务、计算机速录”等9个信息技术类相关专业的教学标准，确定了教学实施及核心课程内容的指导意见。本套教材就是以以上大纲和标准为依据，结合当前最新的信息技术发展趋势和企业应用案例组织开发和编写的。

本书的主要特色

● 对计算机专业类相关课程的教学内容进行重新整合

本套教材本套教材面向学生的基础应用能力，设定了系统操作、文档编辑、网络使用、数据分析、媒体处理、信息交互、外设与移动设备应用、系统维护维修、综合业务运用等内容；针对专业应用能力，根据专业和职业能力方向的不同，结合企业的具体应用业务规划了教材内容。

● 以岗位工作过程来确定学习任务和目标，综合提升学生的专业能力、过程能力和职位差异能力

本套教材通过以工作过程为导向的教学模式和模块化的知识能力整合结构，力求实现产业需求与专业设置、职业标准与课程内容、生产过程与教学过程、职业资格证书与学历证书、终身学习与职业教育的“五对接”。从学习目标到内容的设计上，本套教材不再仅仅是专业理论内容的复制，而是经由职业岗位实践—工作过程与岗位能力分析—技能知识学习应用内化的学习实训导引和案例。借助知识的重组与技能的强化，达到企业岗位情境和教学内容要求相贯通的课程融合目标。

● 以项目教学和任务案例实训为主线

本套教材通过项目教学，构建了工作业务的完整流程和岗位能力需求体系。项目的确定应遵循三个基本目标：核心能力的熟练程度，技术更新与延伸的再学习能力，不同业务情境应用的适应性。教材借助以校企合作为基础的实训任务，以应用能力为核心、以案例为线索，通过设立情境、任务解析、引导示范、基础练习、难点解析与知识延伸、能力提升训练和总结评价等环节，引领学习者在完成任务的过程中积累技能、学习知识，并迁移到不同业务情境的任务解决过程中，使学习者在未来可以从容面对不同应用场景的工作岗位。

当前，全国职业教育领域都在深入贯彻全国职教工作会议精神，学习领会中央领导对职业教育的重要批示，全力加快推进现代职业教育。国务院出台的《加快发展现代职业教育的决定》明确提出要“形成适应发展需求、产教深度融合、中职高职衔接、职业教育与普通教育相互沟通，体现终身教育理念，具有中国特色、世界水平的现代职业教育体系”。现代职业教育体系的建立将带来人才培养模式、教育教学方式和办学体制机制的巨大变革，这无疑给职业院校信息技术应用人才培养提出了新的目标。计算机类相关专业的教学必须要适应改革，始终把握技术发展和技术技能人才培养的最新动向，坚持产教融合、校企合作、工学结合、知行合一，为培养出更多适应产业升级转型和经济发展的高素质职业人才做出更大贡献！

2014年11月于大连

前言

为建立健全教育质量保障体系，提高职业教育质量，教育部于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）在<body>和</body>之间添加以下代码。

（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文档包括三个主要标记，文档标记<html>……</html>、头部标记<head>……</head> 和主体标记<body>……</body>。

（2）标记不区分大小写。

（3）所有的标记都要用尖括号<>括起来。

<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设置为网页背景图像，网页文字颜色为蓝色的代码如下。

</body>

3）文字标记

格式：

<font size=\"文字大小\" face=\"字体\" color=\"文本颜色\">文本内容</font>

说明：<font>标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时，<font size=1>（最小）、<font size=7>（最大）、<font size=+1>（比预设字大一级）、<font size=-1>（比预设字小一级）。

例如，将文本“最新通知”设置为楷体_GB2312，大小为4的代码如下。

<font size=\"4\" face=\"楷体_GB2312\">最新通知</font>

4）段落标记

格式：

<p class=\"对齐方式\">段落文本</p>

说明：由<p>标记所标识的文字代表同一个段落的文字。其中align属性有left、center和right三个参数，这三个参数分别代表左对齐、居中对齐和右对齐。

例如，将标题“会议通知”居中显示的代码如下。

<p class=\"center\">会议通知</p>

5）换行标记

格式：

<br>

说明：<br>是一个单标记，HTML文件中任何位置只要使用了<br>标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。

6）水平线标记

格式：

<hr class=\"对齐方式\" color=\"颜色\" width=\"宽度\" size=\"高度\" noshade>

说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清晰、明确。noshade用于设置水平线为实心线（默认情况下为阴影线）。

例如，插入一条宽度800像素的红色水平线，并居中显示的代码如下。

<hr width=\"800\" color=\"#ff0000\" class=\"center\" >

7）图像标记

格式：

说明：在页面中插入一幅图像，图像可以是本地计算机上的文件，也可以是一个URL地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插入到网页中。alt参数用于设置图像的说明信息

....