作者：主编 刘望海
出版社：中国人民大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页制作与维护实训(教育部中等职业教育专业技能课立项教材)试读：
前言
本书根据中职生需要掌握的职业技能特点，结合电子商务企业实际岗位的各项需求，以及电子商务高考改革思路等相关内容，通过层层递进的项目教学，使学生了解网页制作与维护的工作内容、工作性质等，从而培养学生网页制作与维护的工作能力。本书的特点
本书经过精心策划与测试，主要有以下特色。
一、科学的知识分布
本书采用了网页的亲密接触、前导篇、基础篇、提高篇和测试篇的写法，将知识点根据读者学习的难易程度以及在实际工作中应用的顺序进行安排，真正为读者的学习考虑，以让不同读者能在学习的过程中有针对性地选择学习内容。如果把本书整个结构比作五级阶梯，那每一篇就是一级阶梯，学习完一篇就能达到该阶梯所对应的高度。
二、专业的知识体现
为了体现本书的专业性和实用性，体现知识的递进关系，本书设计了五个项目，每个项目又设计了以下五个主要栏目：
项目引言——简要介绍本项目的内容和学习目标；
任务下达——介绍任务并说明任务要求；
知识准备——描述完成任务所必须了解或掌握的知识；
小试牛刀——检测学生对所学知识的掌握程度；
项目评价——按实训标准进行自评、互评和师评，保障任务的落实。
三、清新的阅读环境
本书深入考虑读者的实际需求以及接受能力的差异性，版式设计清晰、典雅，内容安排简洁、实用，就像一位贴心的朋友、老师在您面前将枯燥的网页制作与维护的知识面对面地讲授给您。本书的创作团队
我们编写本书的宗旨是保证每个知识点都能让读者学以致用，基于这个宗旨，参与本书编写的人员都要求在网页制作与维护教学方面具有较丰富的经验。本书的作者为刘望海、朱明、葛云龙、薛珊珊、杜洁莹等。在编写本书的过程中，他们付出了大量心血，对知识点进行了实用性、功能性的测试，在此表示感谢。
本书的编写得到了宁波市教育局职成教教研室、宁海县教育局等单位领导的大力支持。在本书的编写过程中，编者参考了一些书籍和电子商务网站的资料及相关的视频教程，在此一并表示衷心的感谢！
由于作者水平有限，其中可能存有疏漏和不足之处，恳请读者提出宝贵意见和建议。
项目一 初识网页——网页的亲密接触
项目引言设计网页并非十分复杂，但是想要设计出合理而精美的网页作品，则需要严谨的理性分析、敏锐的观察以及感性的审美与创意技巧。
信息是网站的核心，是网页设计的依据，分析和理解信息内容是网页设计的起点也是终点。色彩是网页设计的灵魂之一，是最先也是最持久地印记在浏览者脑海中的网站印象，它对形成网站风格、网站气氛等感觉性设计的作用非常大。
合理的网站布局可以带给浏览者赏心悦目的感觉，增强网站的吸引力。
根据这些要求，本项目应完成以下四个任务：
任务一 大开眼界——欣赏优秀网站；
任务二 绝佳组合——赏析网页版面布局；
任务三 精彩纷呈——赏析网页色彩搭配；
任务四 一网打尽——掌握网站设计流程。任务一 大开眼界——欣赏优秀网站任务下达
在宽带网进入家庭已经成为潮流的今天，网络的发展可谓日新月异、一日千里，互联网（Internet）已经渗透社会生活的各个方面，通过Internet，人们可以了解最新的新闻动态、气象消息和旅游信息，浏览当天的报纸，待在家里收发电子邮件、网上购物、网上炒股，到各类数字图书馆查阅资料、享受远程教育等。
在Internet这个庞大的互联系统中，万维网是其重要的组成部分，万维网使得浏览Internet变得非常简单，只需用鼠标点击图标，就可以显示图文并茂的网页，网页中可以包含声音、视频、动画等，这也是万维网在Internet中最受欢迎、使用最多的原因。本课程的学习目标是：在能评价各类网站的基础上，让每个学生都能设计并制作一个专业且较优秀的网站。
在学习创建网站、制作网页之前，我们先浏览几个优秀的网站。知识准备
1.如何上网浏览网站
先启动浏览器Internet Explorer（简称IE）或者Netscape Navigator，然后在地址栏中输入相应的网址并按“回车”键，这样就能浏览该网站的首页或引导页。
问题：除了以上两款浏览器之外，还有哪些浏览器？试列举。
2.如果不知道某个网站的网址，怎样获得该网站的网址或浏览该网站
可以利用搜索引擎网站进行搜索。方法是：先打开搜索引擎网站，然后在搜索引擎的检索框中输入你需要查询网站的相关关键词，例如“旅游”“IT教育”等。然后直接按“回车”键或单击“搜索”按钮，就会列出大量与所输入的关键词相关的网站标题条目，在所列的条目中找到所需网站的标题后双击即可打开该网站，该网站的网址也就知道了。
3.常用的搜索引擎网站有哪些（1）百度网：www.baidu.com；（2）有道网：www.youdao.com；（3）壹搜网：www.yiso.com；（4）好搜：http://www.haosou.com/；（5）搜狗搜索：http://www.sogou.com/。网站赏析
本任务主要欣赏五个主题网站，在以后的任务中，将具体分析如何赏析网站。（1）电商网站：凡客诚品首页，如图1-1所示。图1-1 凡客诚品首页（2）教育网站：中国教育在线首页，如图1-2所示。图1-2 中国教育在线首页（3）旅游网站：携程网首页，如图1-3所示。图1-3 携程网首页（4）博客网站：杨青的BLOG，如图1-4所示。图1-4 杨青的BLOG（5）个人网站：Feng，如图1-5所示。图1-5 Feng小试牛刀
搜索上述五个主题的网站各一个。任务二 绝佳组合——赏析网页版面布局任务下达
在上一个任务中，我们已经欣赏过各类主题的网站，那么应该如何赏析网页呢？本次任务主要分析如何在版面布局方面赏析网页。知识准备
网页布局结构知识介绍见表1-1。表1-1 网页布局网站赏析
表1-2列出了几种网页类型的实例。表1-2 网页类型小试牛刀
搜索五个网站并分析其各是什么布局。任务三 精彩纷呈——赏析网页色彩搭配任务下达
在分析过各网站的版面布局之后，本次任务主要分析如何从色彩方面赏析网站。知识准备1.色彩基本概念
自然界中有很多种色彩，比如玫瑰是红色的，大海是蓝色的，橘子是橙色的……但是最基本的色彩只有三种（红、黄、蓝），其他的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。
现实生活中的色彩可以分为彩色和非彩色。其中，黑、白、灰属于非彩色系列，其他的色彩都属于彩色。任何一种彩色都具备三个特征：色相、明度和纯度。非彩色只有明度属性。
色相：指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。例如紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，调整一下亮度或者纯度会出现不同的色彩，例如深绿、暗绿、草绿、亮绿。
明度：也叫亮度，指的是色彩的明暗程度。明度越高，色彩越亮，例如一些购物、儿童类网站，用的就是一些鲜亮的颜色，使人感觉绚丽多姿，生机勃勃；明度越低，颜色越暗，这类色彩主要用于—些游戏类网站，给人一种神秘感。一些个人站长为了体现自身的个性，运用一些暗色调来表达个人的孤僻或者忧郁等性格。有明度差的色彩更容易调和。
纯度：指色彩的鲜艳程度。纯度高的色彩纯、鲜亮。纯度低的色彩暗淡，含灰色。
相近色：色环中相邻的三种颜色。如黄绿色、黄色和橘黄色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站设计中极为常用。
互补色：色环中相对的两种色彩。如亮绿色和紫色、红色和绿色、蓝色和橙色等。互补色在网站设计中用得也很普遍。
暖色：如橙色、红色、紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站、电子商务网站、儿童类网站等，用以体现商品的琳琅满目，儿童类网站的活泼、温馨等效果。
冷色：如绿色、蓝色、蓝紫色等都属于冷色系列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技、游戏类网站，主要表现严肃、稳重等效果。2.各种颜色体现的含义
红色：代表热情、活泼、热闹、温暖、幸福、吉祥；
橙色：代表光明、华丽、兴奋、甜蜜、快乐；
黄色：代表明朗、愉快、高贵、希望；
绿色：代表新鲜、平静、和平、柔和、安逸、青春；
蓝色：代表深远、永恒、沉静、理智、诚实、寒冷；
紫色：代表优雅、高贵、魅力、自傲；
白色：代表纯洁、纯真、朴素、神圣、明快；
灰色：代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞；
黑色：代表崇高、坚实、严肃、刚健、粗莽；3.网页色彩搭配原则（1）特色鲜明。一个网站的用色必须要有自己独特的风格，这样才能突出鲜明的个性，给浏览者留下深刻的印象。（2）搭配合理。网页设计虽然属于平面设计的范畴，但它又与其他平面设计不同。它在遵从艺术规律的同时，还考虑人的生理特点，即色彩搭配一定要合理，要给人一种和谐、愉快的感觉；避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。（3）讲究艺术性。网站设计也是一种艺术活动，因此它必须遵循艺术规律。即在考虑网站本身特点的同时，可按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。4.网页色彩搭配技巧（1）使用单色。尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生一定变化，使网站避免显得单调。（2）使用邻近色。邻近色是指在色带上相邻近的颜色，如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。（3）使用对比色。看到对比色是人的视觉感官所产生的一种生理现象，是视网膜对色彩的平衡作用。在色相环中，每一个颜色对面（180度对角）的颜色称为对比色。把对比色放在—起，会给人强烈的排斥感。若混合在一起，则会调出浑浊的颜色。例如，红与绿、蓝与橙、黄与紫就互为对比色。
对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，能起到画龙点睛的作用。（4）使用黑色。黑色是一种特殊的颜色，如果使用恰当，设计合理，往往会产生强烈的艺术效果。黑色一般用来做背景色，与其他纯度色彩搭配使用。（5）使用背景色。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。（6）色彩的数量。一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在三种色彩以内，同时通过调整色彩的各种属性来产生变化。网站赏析
表1-3对几个网页实例进行了色彩分析。表1-3 网页色彩分析小试牛刀
搜索五个网站，分析它们的色彩特征，以及其所表达的设计者的思想。任务四 一网打尽——掌握网站设计流程任务下达
前几个任务中，我们赏析了各类网站，并介绍了一些网站设计的基础知识，现在该考虑自己动手设计网页了，到底该如何设计呢？本次任务将学习网站设计流程。知识准备
网站设计流程如下所述。1.决定网站的主题和名称
设计一个站点，首先遇到的问题就是定位网站主题。—个网站必须要有一个明确的主题。特别是个人网站，不可能像综合网站那样做得内容多而全、包罗万象。所以必须找一个自己最感兴趣的内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。2.确定网站栏目
在确定网站主题后，接下来要画出网站的设计草图，在草图中设计好网站的栏目。
栏目的实质是一个网站的内容索引。索引应该将网站的主题明确显示出来。在制定栏目的时候，要仔细考虑、合理安排。网站栏目一定要紧扣网站的主题，一般的做法是：将主题按一定的方法分类，并将它们作为网站的主栏目。如图1-6所示。图1-6 网站栏目3.确定网站整体风格
一个网站就是一个作品，必须具有自己的风格。而网站风格对网站的整体形象、传播效果等都会产生重要影响。如何设计出既有吸引力又能体现网站特色的特定形象，成为网站设计者最应注重的事情。网站风格涉及以下几个方面，而每一项之间都是有关联性的。（1）色彩：网页的底色、文字字形、图片的色系、颜色等；（2）版面：版面布局，如表格和框架的应用、文字缩排、段落等；（3）窗口：窗口效果，如全屏幕窗口、特效窗口等；（4）程序：网页互动程序；（5）特效：让网页看起来生动活泼的各种应用；（6）架构：目录规划、层次浅显易懂、单选应用等；（7）内容：网站主题、整体实用性、文件关联性、内容契合度、是否有不必要的档案等；（8）走向：网站的未来规划、整体内容的走向等。4.规划网站的目录结构和链接结构
在设计草图上设计好网站栏目并确定了网站的风格后，就要根据它来创建网站的基本框架。5.首页设计
首页设计的质量是一个网站成功与否的关键。能否促使浏览者继续点击进入，能否吸引浏览者留在站点上，与首页设计的好坏有很大关系。所以，一般首页设计的时间会占整个设计时间的40%。
首页从根本上说就是全站内容的目录，是一个索引。但只罗列目录显然是不够的。如何设计好一个首页呢？一般步骤如下：（1）确定首页的功能模块；（2）设计首页的版面。小试牛刀
根据前几次课的学习，请写出设计一个实训网站的步骤。网站主题自拟。项目总结
在实施项目过程中，我们学习了如何赏析网站及网站设计流程，涉及的知识内容与应掌握的技能具体如下所述：（1）能搜索目标网页。（2）能保存网页，包括文字、图片、声音、动画、视频。（3）网页布局主要分为“T”形布局、“口”形布局、“三”形布局、对称对比布局、POP布局、其他布局。（4）能分析网页布局。（5）能分析网页色彩特征。（6）能分析网页设计技巧——使用单色、使用邻近色、使用对比色、使用黑色、使用背景色、色彩的数量。（7）熟悉网站设计的流程。挑战自我
设计一个主题网站，包括主题、栏目的选择及首页的设计（手绘首页草图）。项目评价任务评价表项目二 准备工作“拉练”——宁海职教中心实训网之前导篇项目引言
为扩大“宁海职教中心”电子商务的实训、实践特色，电子商务技能团队需要根据本实训的经营项目制作一个实训网站。请根据本实训销售的各个产品制作一个实训网站，网站要能方便、快捷地反映出各种产品的特点。
根据企划部提供的一系列信息，利用Dreamweaver 8网页编辑软件，设计并制作一个文具实训网站。本项目主要完成以下三个任务：
任务一 熟悉新环境——认识Dreamweaver 8；
任务二 开辟新天地——管理站点；
任务三 抓住你的眼球——设计首页。任务一 熟悉新环境——认识Dreamweaver 8任务下达
最初接触Dreamweaver 8可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了解Dreamweaver 8的操作环境吧。知识准备1.Dreamweaver 8概况
Dreamweaver 8是美国Macromedia公司开发的集网页制作和网站管理于一身且所见即所得的网页编辑器，它是第一套针对专业网页设计师而开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨平台和跨浏览器的充满动感的网页。2.网页编辑器的发展过程
随着互联网的家喻户晓、HTML技术的不断发展和完善，产生了众多网页编辑器，按基本性质网页编辑器可以分为所见即所得网页编辑器和非所见即所得网页编辑器（即原始代码编辑器），两者各有千秋。所见即所得网页编辑器的优点是具有直观性，使用方便，容易上手，甚至不会感到在所见即所得网页编辑器中进行网页制作和在Word中进行文本编辑有太大的区别。3.Dreamweaver 8的特点
最佳的制作效率、完善的网站管理功能、无可比拟的控制能力。4.Dreamweaver 8新增功能
Dreamweaver 8新增18个功能：可视化操作XML数据、统一CSS面板、CSS可视化布局、样式渲染工具条、增强XML编辑与验证、增强基于CSS设计的渲染、增强整合的Accessibility参考、更多预建的Accessibility设计与模板、增强动态跨浏览器验证、增强手机内容创作能力、放大功能、导引线、编码工具条、代码折叠、文件比较功能、编码功能改进、支持WebDAV、插入FLASH视频。实践向导
Dreamweaver 8的操作环境如下：
在首次启动Dreamweaver 8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver 8的设计视图，右侧是Dreamweaver 8的代码视图。Dreamweaver 8的设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。
在Dreamweaver 8中，首先会显示一个起始页，可以勾选这个窗口下面的“不再显示此对话框”来隐藏它。这个页面包括“打开最近项目”“创建新项目”“从范例创建”三个方便实用的项目。
新建或打开一个文档，进入Dreamweaver 8的标准工作界面。Dreamweaver 8的标准工作界面包括：标题栏、菜单栏、插入栏、文档栏、文档窗口、状态栏、属性栏和文件面板等，如图2-1所示。图2-1 Dreamweaver 8的标准工作界面注意 Dreamweaver 8的标准工作界面与Macromedia公司其他产品的工作界面很相似。（1）标题显示栏。启动Dreamweaver 8后，标题栏将显示文字Macromedia Dreamweaver 8，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称，如图2-2所示。图2-2 标题栏（2）菜单栏。Dreamweaver 8的菜单共有10个，即文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助，如图2-3所示。其中，编辑菜单里提供了对Dreamweaver 8菜单中【首选参数】的访问。图2-3 菜单栏
文件：用来管理文件，如新建、打开、保存、另存为、导入、输出打印等；
编辑：用来编辑文本，如剪切、复制、粘贴、查找、替换和参数设置等；
查看：用来切换视图模式以及显示、隐藏标尺、网格线等；
插入：用来插入各种元素，如图片、多媒体组件、表格、框架及超级链等；
修改：具有对页面元素修改的功能，如插入表格，拆分、合并单元格，对齐对象等；
文本：用来对文本进行操作，如设置文本格式等；
命令：所有的附加命令项；
站点：用来创建和管理站点；
窗口：用来显示和隐藏控制面板以及切换文档窗口；
帮助：联机帮助功能，例如按下F1键，就会打开电子帮助文本。注意 在学习过程中，应尽可能通过按下F1键获得帮助。Dreamweaver 8的很多功能都能在“帮助”中找到。（3）插入栏。插入栏集成了所有可以在网页应用的对象，包括“插入”菜单中的选项。插入栏其实就是图像化了的插入指令，通过一个个按钮，可以很容易地加入图像、声音、多媒体动画、表格、图层、框架、表单、Flash和ActiveX等网页元素，如图2-4所示。图2-4 插入栏（4）文档栏。文档栏包含各种按钮，它们提供各种文档窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览），如图2-5所示。图2-5 文档栏（5）“标准”工具栏。“标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作按钮：“新建”“打开”“保存”“保存全部”“剪切”“复制”“粘贴”“撤销”和“重做”，如图2-6所示。图2-6 “标准”工具栏（6）文档窗口。打开或创建一个项目，进入文档窗口，就可以在文档区域中进行输入文字、插入表格和编辑图片等操作。文档窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，在该视图中，Dreamweaver 8显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容；“代码”视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境；“代码和设计”视图可以让我们在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。（7）状态栏。文档窗口底部的状态栏提供与正创建的文档有关的其他信息，如图2-7所示。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可选择该标签及其全部内容。单击可以选择文档的整个正文。图2-7 状态栏（8）属性栏。属性栏并不是将所有的属性加载在面板上，而是根据选择的对象动态显示对象的属性。属性栏的状态完全由当前在文档中选择的对象来确定，如图2-8所示。例如，当前选择了一幅图像，那么属性栏上就会出现该图像的相关属性；如果选择了表格，那么属性栏上的内容则会相应地变化成表格的相关属性。图2-8 属性栏（9）浮动面板。其他面板可以统称为浮动面板，这些面板都浮动于编辑窗口之外。在初次使用Dreamweaver 8的时候，这些面板根据功能被分成了若干组。在窗口菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其他面板组。小试牛刀
请打开Dreamweaver 8，新建一个页面并说出页面中各元素。任务二 开辟新天地——管理站点任务下达
用户设计的网页和相关素材，一般都要求放在同一个文件夹内，这样方便对网站进行维护和管理。特别是将网站发布到服务器上，这点尤为重要，建立站点的目的也在于此。因此，用户在用Dreamweaver 8软件设计网页前，应先将站点建立好，同时将做好的网页全部保存在此站点内。知识准备（1）创建网站，其实就是绑定一个文件夹。（2）通过站点的相关功能，可创建空白网页和各网页间的相互关系，与网页相关的素材可自动保存至站点文件夹内。实践向导
新建站点：（1）打开Dreamweaver 8，选择“站点”菜单下的“新建站点”命令，如图2-9所示。图2-9 选择“新建站点”命令问 除此之外，还可以通过什么方式新建（管理）站点？（2）在弹出的对话框中，选择“基本”标签，在“您打算为您的站点起什么名字？”下的文本框中输入本站点名字——宁海职教中心—实训网。单击“下一步”按钮，如图2-10所示。图2-10 为站点命名（3）弹出对话框，询问是否打算使用服务器技术，有ColdFusion、ASP.NET、ASP、JSP或PHP等，这里我们选择“否，我不想使用服务器技术。”并单击“下一步”按钮，如图2-11所示。图2-11 选择是否使用服务器技术（4）在弹出的对话框中，询问是否在服务器上编辑，我们选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”。在“您将把文件存储在计算机上的什么位置？”下的文本框中输入站点位置，或使用文本框后的按钮选择合适路径。单击“下一步”按钮，如图2-12所示。图2-12 确定站点路径（5）在弹出的对话框中，询问如何连接到远程服务器，选择“无”。单击“下一步”按钮，如图2-13所示。图2-13 选择如何连接到远程服务器（6）在弹出的对话框中有站点定义的总结，显示了站点建立过程中涉及的各种信息，用户应仔细检查，如有异议则单击“上一步”按钮重新定义，如无异议，则单击“完成”按钮，如图2-14所示。图2-14 站点定义总结（7）此时编辑区右侧“文件”面板下的“文件”标签下的站点名已改为“宁海职教中心—实训网”，但是站点为空。我们可以通过站点面板来新建网页文件和文件夹，如图2-15所示。
试读结束[说明：试读内容隐藏了图片]