作者：马娜 陈中元 王文兵

出版社：人民邮电出版社有限公司

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

中文版Dreamweaver CC基础培训教程(移动学习版)试读：

前言

随着近年来课程的不断深入、计算机软硬件的升级，以及教学方式的不断更新，市场上很多教材讲解的软件版本、硬件型号、教学结构等都已不再适应当前的教学环境。

鉴于此，我们认真总结了教材编写经验，用2~3年的时间深入调研各地、各类院校的需求，组织了一个优秀且具有丰富教学经验和实践经验的作者团队编写了本套教材，以帮助各类院校快速培养优秀的技能型人才。

本着“学用结合”的原则，我们在教学方法、教学内容、教学资源3个方面体现了自己的特色。

教学方法

本书精心设计了“课堂案例→知识讲解→课堂练习→上机实训→课后练习”5段教学法，以激发学生的学习兴趣。通过对理论知识的讲解和经典案例的分析，训练学生的动手能力，再辅以课堂练习与课后练习帮助学生强化并巩固所学的知识和技能，达到提高学生实际应用能力的目的。

◎课堂案例：除了基础知识部分，涉及操作的知识均在每节开头以课堂案例的形式引入，让学生在操作中掌握该节知识在实际工作中的应用。

◎知识讲解：深入浅出地讲解理论知识，对课堂案例涉及的知识进行扩展与巩固，让学生理解课堂案例的操作。

◎课堂练习：紧密结合课堂讲解的内容给出操作要求，并提供适当的操作思路及专业背景知识供学生参考。该部分要求学生独立完成，以充分训练学生的动手能力，并提高其独立完成任务的能力。

◎上机实训：精选案例，对案例要求进行定位，对案例效果进行分析，并给出操作思路，帮助学生分析案例，让学生能够根据思路提示独立完成操作。

◎课后练习：结合每章内容给出几道操作题，学生可通过练习，强化巩固每章所学知识，从而温故知新。

教学内容

本书的教学目标是循序渐进地帮助学生掌握使用DreamweaverCC进行网页设计与制作的相关知识。全书共10章，可分为以下6个方面的内容。

◎第1章：概述网页设计与制作的一些基础知识，如网站、网页、网页结构、HTML标记语言等基本概念，以及网站设计与制作的基本流程等。

◎第2章：主要讲解DreamweaverCC的基本操作，包括认识工作界面、创建与管理站点、网页文档的基本操作、页面属性的设置等。

◎第3~5章：主要讲解使用DreamweaverCC制作网页的相关知识，包括制作简单的文本网页、图文并茂的网页、带有超链接的网页等。

◎第6章：主要讲解网页布局的相关知识，包括使用表格布局和使用DIV+CSS布局等。

◎第7~9章：主要讲解网页的高级操作，包括使用模板、库、表单、行为等功能，以及移动端网页的设计与制作方法。

◎第10章：综合应用本书所学的Dreamweaver知识进行网页设计与制作，包括网页首页和网页二级页面的制作等。

教学资源

本书提供了立体化教学资源，以丰富教师的教学方式。读者可到box.ptpress.com.cn/y/51499下载资源。本书的教学资源包括以下3个方面的内容。

01视频资源

本书在讲解过程中提供了很多辅助学习的视频，读者用手机或平板电脑扫描对应二维码即可查看、学习相关操作的视频演示等。

02教学资源

本书配套了精心制作的教学资源包，包括丰富的网页结构设计参考、网页效果图参考、PPT、教学教案等资源，以便老师顺利开展教学工作。

03扩展资源

扩展资源包中包含每年定期更新的拓展案例。扩展资源中含有网页设计案例素材、网页设计中的网站发布技术等。

致谢

本书由马娜、陈中元、王文兵任主编，杜怡君、喻会、吴谦任副主编。另外，刘淼参与了编写，并为本书提供了很多精彩的商业案例，在此表示感谢。作者2019年3月第1章　网页的基本操作

随着科技的发展，网络以其独特的优势成为人们生活和工作中不可缺少的重要部分。它通过文字、图片、影音播放、下载传输、游戏、聊天软件等途径将各种信息通过网页传达给用户，为人们带来极其丰富的生活和美好的享受。Dreamweaver是网页制作的软件之一，在使用该软件制作网页前，读者需要先对网页的基本知识进行了解。本章将介绍制作网页的基础知识，包括网页设计基础、网页构建流程等。通过本章的学习，读者可以了解网页设计的相关基本操作。

课堂学习目标

●了解网站与网页的关系

●了解网站类型与基本结构

●掌握网页的基本构成要素

●掌握网站制作的基本流程

课堂案例展示赏析特色网站1.1　网页设计基础

在网络中，几乎所有的网络活动都与网页有关，要想学习网页制作，就需要先了解一些网页的基本知识，如网站与网页的关系、网站的类型、网站的结构、网页的基本构成要素和网页编辑语言等，本节将详细讲解这些知识。1.1.1　网站与网页的关系

互联网是由成千上万个网站组成的，而每个网站又由诸多网页构成，因此可以说网站是由网页组成的一个整体。下面分别对网站和网页进行介绍。

●网站：网站是指在互联网上根据一定的规则，使用HTML（标准通用标记语言）工具制作的用于展示特定内容的一组相关网页的集合。通常情况下，网站只有一个主页，主页中会包含该网站的标志和指向其他页面的链接。用户可以通过网站来发布想要公开的资讯，或者利用网站来提供相关的网络服务；也可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

●网页：网页是组成网站的基本单元，用户上网浏览的一个个页面就是网页。网页又称为Web页，一个网页通常就是一个单独的HTML文档，其中包含文字、图像、声音和超链接等元素。1.1.2　常见的网站类型

网站是多个网页的集合，按网站内容可将网站分为5种类型：门户网站、企业网站、个人网站、专业网站和职能网站，下面将分别对这几种类型的网站进行讲解。

●门户网站：门户网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻、娱乐等方面的内容，还具有论坛、搜索和短信等功能。国内较著名的门户网站有新浪网、搜狐网、网易网等，如图1-1所示。

●企业网站：企业网站是为了在互联网上展示企业形象和品牌产品，以对企业进行宣传而建设的网站。企业网站一般以企业的名义开发创建，其内容、样式、风格等都是为了展示自身的企业形象，如图1-2所示。图1-1　门户网站图1-2　企业网站

●个人网站：个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或为了展示、销售自己的作品、商品而制作的具有独立空间域名的网站，它具有较强的个性。图1-3所示为个人平面作品展示网站。

●专业网站：这类网站具有很强的专业性，通常只涉及某一个领域，如太平洋电脑网是一个电子产品专业网站平台，如图1-4所示。图1-3　个人网站图1-4　专业网站

●职能网站：职能网站具有特定的功能，如政府职能网站等。目前流行的电子商务网站也属于这类网站，较有名的电子商务网站有淘宝网、卓越网、当当网等，如图1-5所示。图1-5　职能网站1.1.3　页的分类

根据不同的分类方式，可以将网页分为不同的类型，下面分别进行介绍。

1.按位置分类

按网页在网站中的位置可将网页分为主页和内页。主页是指网站的主要导航页面，一般是进入网站时打开的第一个页面，也称为首页；内页是指与主页相链接的页面，也就是网站的内部页面。

2.按表现形式分类

按网页的表现形式可将网页分为静态网页和动态网页，并且静态网页与动态网页也是相对的，即静态网页的URL后缀是htm、html、shtml、xml等；而动态网页的URL后缀是asp、jsp、php、perl、cgi等。下面分别介绍静态网页和动态网页的特点。

●静态网页：静态网页的执行过程是浏览器向网络中的服务器发出请求，指向某个静态网页，服务器接收到请求后，将其传输给浏览器（传送的是一个文本文件），浏览器接收到服务器传来的文件后，解析HTML标记，再显示结果。

●动态网页：动态网页以数据库技术为基础，可以大大降低网站的维护量。动态网页可以实现注册、在线调查、用户登录及在线购物等功能，它并不是一个独立存在于服务器上的网页文件，而是当用户请求时，才从服务器中返回一个完整的网页。在浏览动态网页时，浏览器的地址栏中会有一个“？”符号。

虽然静态网页与动态网页都可以使用文字和图片展示网页信息，但是从网站的开发、管理和维护的角度来看，它们有很大的差别。1.1.4　网站的基本结构

网站结构的设计与规划对整个网站的最终呈现效果起着至关重要的作用，它不但直接关系到页面结构的合理性，而且还在一定程度上映射出该网站的类型定位。下面对常见网站的结构进行介绍。

●国字型：国字型是最常见的一种布局方式，其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方为站点信息。

●拐角型：拐角型与国字型相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下方为站点信息。

●标题正文式：这种结构的布局方式比较简单，主要用于突出需要表达的重点，通常最上方为通栏的标题和导航条，下方为正文部分。

●封面式：封面式常用于显示宣传网站首页，一般以精美大幅图像为主题，设计方式多为Flash动画，还有许多网站采用HTML5来制作封面。1.1.5　网页的构成要素

在网页中，文字和图像是构成网页最基本的两个元素。除此之外，构成网页的元素还包括动画、音频、视频和表单元素等，如图1-6所示。下面分别介绍网页各构成要素的作用。知识链接网页常用术语

●文字：文字是网页中最基本的组成元素之一，是网页主要的信息载体，通过它可以非常详细地将要传达的信息传送给用户。文字在网络上传输速度较快，用户可方便地浏览和下载文字信息。

●图像：图像也是网页中不可或缺的元素，它有着比文字更直观和生动的表现形式，并且可以传递一些文字不能传递的信息。图1-6　网页的元素

●LOGO：在网页设计中，LOGO起着相当重要的作用。一个好的LOGO不仅可以为企业或网站树立好的形象，还可以传达丰富的行业信息。

●表单元素：表单是功能型网站的一种元素，它用于收集用户信息、帮助用户进行功能性控制。表单的交互设计与视觉设计是网站设计中相当重要的环节，在网页中小到搜索框、大到注册表都需要使用它。

●导航：导航是网站设计中必不可少的基础元素之一，它是网站结构的分类，用户可以通过导航识别网站的内容及信息。

●动画：网页中常用的动画格式主要有两种：一种是GIF动画；另一种是SWF动画。GIF动画是逐帧动画，相对比较简单；SWF动画则更富表现力和视觉冲击力，还可结合声音和互动功能，给用户带来强烈的视听感受。

●超链接：用于指定从一个位置跳转到另一个位置的超链接，可以是文本链接、图像链接、锚链接等。可以在当前页面中进行跳转，也可以在页面外进行跳转。

●音频：音频文件可以使网页效果更加多样化，网页中常用的音乐格式有mid、mp3等。mid是通过计算机软、硬件合成的音乐，不能被录制；mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。

●视频：网页中的视频文件一般为flv格式。它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。1.1.6　网页制作的核心语言

在网页制作方面，一些新技术、新应用层出不穷，但不管怎样变化，在制作网页时也要掌握最基础、最重要的网页核心语言，如HTML语言、CSS语言（将在第7章进行介绍）和JaveScript脚本语言等，下面分别对这些语言的内容进行简单介绍。

1.HTML标记语言

HTML是标准通用标记语言下的一个应用，也是一种规范、一种标准，它通过标记符来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，如文字如何处理、画面如何安排、图片如何显示等。（1）HTML语言的特点

HTML语言不复杂，但功能很强大，可支持不同数据格式的文件嵌入，如图像、声音、视频、动画、表单和超链接等，这也是它在互联网中盛行的原因之一，其主要特点如下。

●简易性：HTML语言版本升级采用超集方式，从而更加灵活方便。

●可扩展性：HTML语言的广泛应用带来了加强功能、增加标记符等要求，它采取子类元素的方式，为系统扩展带来了保证。

●平台无关性：HTML语言是一种标准，使用同一标准的浏览器在查看一份HTML文档时的显示是一样的。但是网页浏览器的种类众多，为了让不同标准的浏览器用户查看同样显示效果的HTML文档，HTML语言使用了统一的标准，从而使其能显示于各个浏览器平台。（2）HTML语言的基本语法

HTML语言是一套指令，通过指令让浏览器识别页面类别，而浏览器识别页面类别也是通过页面的起始标记和结束标记来实现的。由此可见，在网页中，大多数标记都是成对出现的，而每个标记的结束标记都是以右斜杠加关键字来表示的。另外，HTML页面主要有头部和主体两个部分，下面分别对其进行介绍。

●头部：所有关于整个文档的信息都包含在头部中，即标记之间，如网页标题、描述及关键字等。

●主体：可以调用的任何语言的子程序都包含在主体中，网页中的所有标记内容都放在主体中，如文字、图像、嵌入的动画、Java小程序和其他页面元素等，即标记之间。提示在头部的标记之间还包括标记，主要用于设置页面标题，但此标题并不会出现在浏览器窗口中，而是显示在浏览器的标题栏中。（3）HTML语言的常用标记

在HTML语言中，各标记之间不区分大小写，不管是用大写字母、小写字母，还是大、小写字母混合使用，其作用都是相同的，但为了编码的美观，建议统一使用小写字母。下面介绍一些HTML语言中常用的标记符号。

●格式标记：在HTML语言中用于设置格式的标记主要有

●文字标记：文字标记主要用于设置文字格式，如

●图像标记：用于添加图像的标记，即。

●表格标记：主要用于添加表格，即

●链接标记：在网页文档中添加各种链接，即。

●表单及表单元素标记：主要用于添加表单及在表单中添加表单元素，如

2.HTML5语言的基本介绍

HTML5草案的前身名为Web Applications 1.0，2004年由WHATWG提出，于2007年被万维网联盟（World Wide Web Consortium，W3C）接纳，并成立了新的HTML工作团队，第一份正式草案于2008年1月22日公布。2012年12月17日，万维网联盟宣布HTML5规范正式定稿，并称“HTML5是开放的Web网络平台的奠基石”。下面将分别介绍HTML5中的新标记及HTML5语言的新特点。（1）HTML5中的新标记

在HTML5中提供了一些新的元素和属性，下面将分别介绍在HTML5语言中添加的常用标记。

●搜索引擎标记：主要是有助于索引整理，同时更好地帮助小屏幕装置和视障人士使用，即

●视频和音频标记：主要用于添加视频和音频文件，如和

●文档结构标记：主要用于在网页文档中进行布局分块，整个布局框架都使用

●文字和格式标记：HTML5语言中的文字和格式标记与HTML语言中的基本相同，但是去掉了

●表单元素标记：HTML5与HTML相比，在表单元素标记中，添加了更多的输入对象，即在中添加了电子邮件、日期、URL和颜色等输入对象。（2）HTML5语言的新特点

与之前的HTML语言相比，HTML5语言有两大特点：一方面，它强化了Web网页的表现性能；另一方面，它除了可描绘二维图形外，还添加了播放视频和音频的标签，追加了本地数据等Web的应用功能。其新特点具体介绍如下。

●全新且合理的标记：该特点主要体现于多媒体对象的绑定情况。以前的多媒体对象都绑定在

●Canvas对象：主要是给浏览器带来了直接绘制矢量图的功能，可摆脱Flash和Silverlight，直接在浏览器中显示图形或动画。

●本地数据库：主要是通过内嵌一个本地的SQL数据库，增加交互式搜索、缓存和索引功能。

●浏览器中的真正程序：在浏览器中提供API，可实现浏览器内的编辑、拖放和各种图形用户界面的功能。

3.JavaScript脚本语言

JavaScript是一种脚本编程语言，支持网页应用程序的客户机和服务器的开发。在客户机中，它可用于编写网页浏览器在网页页面中执行的程序；在服务器中，它可用于编写服务器程序，网页服务器程序用于处理浏览器页面提交的各种信息并相应地更新浏览器的显示。因此，JavaScript语言是一种基于对象和事件驱动且具有安全性能的脚本语言。下面简单介绍JavaScript脚本语言。（1）JavaScript脚本语言的特点

在网页中使用JavaScript脚本语言，可以与HTML语言一起实现在一个网页页面中与网页客户机交互的作用，并且它是通过嵌入或调入标准的HTML语言来实现的，弥补了HTML语言的缺陷。

JavaScript是一种比较简单的编程语言，在使用时直接在HTML页面中添加脚本，无需单独编译解释，在预览时直接读取脚本执行其指令。因此，JavaScript脚本语言使用起来简单方便、运行快，适用于简单应用。在Dreamweaver中的各种行为效果就是使用JavaScript脚本语言实现的。（2）JavaScript脚本语言的引用及位置

在Dreamweaver CC中，JavaScript脚本语言是引用在标记之间的，如图1-7所示。如果需要重复使用某个JavaScript程序，则可将这些代码作为一个单独的文件进行存放，其扩展名为js。在引用时，使用src属性，如图1-8所示。图1-7　脚本语言的引用图1-8　引用脚本文件1.1.7　屏幕分辨率和网页编辑器

通过前面的知识可了解网页是一个HTML格式的文件，并通过UTL来识别与存取，再通过浏览器显示结果。此外，屏幕分辨率决定着网页制作的尺寸，而网页编辑器则是实现网站制作的一个利器。下面将对屏幕分辨率和网页编辑器进行介绍。

1.屏幕分辨率

屏幕分辨率是指分辨图像的清晰度，它也是由一个个像素点组成的，且分辨率越高，像素点越多，显示的图像就越清晰。

在网页设计中，屏幕分辨率直接影响着网页的尺寸。因为在网页布局时，由于用户操作环境的不同，其网页设计的尺寸也有所区别。就目前而言，1920像素×1080像素和1280像素×1024像素的屏幕分辨率是最常用的，设计的网页看起来也较为美观。图1-9所示为1920像素×1080像素下的网页，图1-10所示则为1280像素×1024像素下的网页。图1-9　1920像素×1080像素下的网页图1-10　1280像素×1024像素下的网页

2.网页编辑器

网页编辑器是指设计网页并输入内容的相关操作工具，根据输入的方法可以分为HTML代码编辑器和可视化编辑器。HTML代码编辑器可直接在编辑器中输入HTML代码，如记事本。而可视化编辑器则可根据操作查看效果，如常用的Dreamweaver CC。下面分别对这两种编辑器进行介绍。

●HTML代码编辑器：记事本是最典型的HTML代码编辑器，熟悉HTML标记的用户可直接在记事本中输入HTML标记制作网页，但输入的HTML标记不能有半点差错，否则将导致网页错误。

●可视化编辑器：Dreamweaver CC是最常用的可视化编辑器之一。在该编辑器中，即使不熟悉HTML标记也可以制作出网页，只需在网页中输入相应的内容，就会自动生成相应的HTML标记，但有可能生成一些不必要的标记，从而使文件变大。1.1.8　网页色彩搭配

色彩是光刺激眼睛再传到大脑的视觉中枢而产生的一种感觉。良好的色彩搭配能够给网页浏览者带来很强的视觉冲击力，加深浏览者对网页的印象，是制作优秀网页的前提。下面介绍一些常用的网页色彩搭配方法。

1.网页安全色

即使设计了漂亮的配色方案，但由于浏览器、分辨率、计算机等配置不同，网页呈现在浏览者眼前的效果也不相同。为了避免这种情况发生，就需要使用网页安全色进行网页配色。

网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板或者色谱）。当使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。

网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）的颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，一共有216种颜色（其中彩色有210种，非彩色有6种）。Dreamweaver CC中直接提供了这些颜色，可以在颜色板中单击按钮展开色板，然后选择需要的颜色，如图1-11所示。图1-11　Dreamweaver安全色知识链接网站设计色彩联想

网页安全色在需要实现高精度的渐变效果、显示真彩图像或照片时有一定的欠缺，设计时并不需要刻意局限使用这216种安全色，而是应该更好地搭配安全色和非安全色，以制作出具有个性和创意的网页。

2.色彩表达方式

在Dreamweaver中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9、字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制代码来表示，并且需要在前面加上特殊符号“#”，如#0E533D。

除此之外，还可通过RGB、HSB、Lab、CMYK来表示。RGB色彩模式是通过对红（R）、绿（G）、蓝（B）3个颜色通道的变化及它们相互之间的叠加来得到各式各样的颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式，其中H代表色相；S代表饱和度；B代表亮度。Lab色彩模式由亮度（L）、a和b两个颜色通道组成。a包括的颜色是从深绿色（低亮度值）到灰色（中亮度值）再到亮粉红色（高亮度值）；b包括的颜色是从亮蓝色（低亮度值）到灰色（中亮度值）再到黄色（高亮度值）。因此，这种颜色混合后将产生具有明亮效果的色彩。CMYK也称为印刷色彩模式，由青、洋红（品红）、黄、黑4种色彩组合成各种颜色。

3.相近色的应用

相近色是指相同色系的颜色。使用相近色进行网页色彩的搭配，可以使网页的效果更加统一、和谐，如暖色调和冷色调就是相近色的两种运用。

●暖色调：暖色主要包括红色、橙色、黄色等色彩，能给人温暖、舒适、有活力的感觉，可以突出网页的视觉效果。在网页中应用相近色时，要注意色块的大小和位置。不同的亮度会对人们的视觉产生不同的影响，如果将同样面积和形状的几种颜色摆放在画面中，画面会显得单调、乏味，所以应该确定颜色最重的一种颜色为主要色，其面积最大，中间色稍小，浅色面积最小，以使画面效果显得丰富，如图1-12所示。

●冷色调：冷色主要包括青、蓝、紫等色彩，可以给人明快、硬朗的感觉。冷色调颜色的亮度越高，其特效越明显，其中蓝色是最为常用的一种冷色调颜色，如图1-13所示。技巧除了暖色调和冷色调外，与黑、白、灰3种中性色组合，能够带给人轻松、沉稳、大方的感觉。中性色主要用于调和色彩搭配，突出其他颜色。图1-12　暖色调图1-13　冷色调

4.对比色的应用

在色相环中每一个颜色对面（180°）的颜色，称为互补色，也是对比最强的色组。对比色也可以指两种可以明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝、紫和绿、红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。图1-14所示为对比色的网页效果。图1-14　对比色1.1.9　网页制作遵循的原则

网页设计与其他设计相似，需要内容与形式统一。除此之外，还要遵循风格定位、CIS的使用等原则。

●统一内容与形式：好的信息内容应当具有编辑的合理性与形式的统一性，形式是为内容服务的，而内容需要利用美观的形式才能吸引浏览者的关注。就如同产品与包装的关系，包装对产品销售有着重大的作用。网站类型不同，其表现风格也不同，通常表现在色彩、构图和版式等方面。例如，新闻网站多采用简洁的色彩和大篇幅的构图，娱乐网站多采用丰富的色彩和个性化的排版等。总之，设计时一定要遵循美观、科学的色彩搭配和构图原则。

●风格定位：确定网站的风格对网页设计具有决定性的作用，网站风格包括内容风格和设计风格。内容风格主要体现在文字的展现方法和表达方法上，设计风格则体现在构图和排版上。如主页风格，通常主页依赖于版式设计、页面色调处理、图文并茂等。这需要设计者具有一定的美术资质和修养。

●CIS的使用：CIS（Corporate Identity System，企业识别系统）设计是企业、公司、团体在形象上的整体设计，包括企业理念识别（Mind Identity，MI）、企业行为识别（Behavior Identity，BI）、企业视觉识别（Visual Identity，VI）3部分。VI是CIS中的视觉传达系统，对企业形象在各种环境下的应用进行了合理的规定。在网站中，标志、色彩、风格、理念的统一延续性是VI应用的重点。将VI设计应用于网页设计中，是VI设计的延伸，即网站页面的构成元素以VI为核心，并加以延伸和拓展。随着网络的发展，网站成为企业、集团宣传自身形象和传递企业信息的一个重要窗口，因此，VI系统在提高网站质量、树立专业形象等方面起着举足轻重的作用。疑难解答|如何保持网页设计风格的统一？一个简单的保持网站内部设计风格统一的方法是：保持网页某部分固定不变，如LOGO、徽标、商标或导航栏等，或者设计相同风格的图表或图片。通常，上下结构的网站保持导航栏和顶部的LOGO等内容固定不变。需要注意的是，不能陷入一个固定不变的模式，要在统一的前提下寻找变化，寻找设计风格的衔接和设计元素的多元化。1.2　制作网站的基本流程

网页设计是一项系统而又复杂的项目，因此，在设计时必须遵循一定的流程，进行规范的操作。这样才能有条不紊地制作网页，并减少工作量、提高工作效率。下面将对网站的策划、制作网站的准备工作和制作及上传网页的相关知识进行介绍。1.2.1　网站分析与策划

网站分析与策划是制作网页的基础。在确定要制作网页后，应该先对网页进行准确的定位，以确保网页设计效果和功能水平，包括网站的主题和定位、网站的目标、网站的内容与形象规划、素材和内容收集和推广网站等。

●确定网站的主题和定位：确定网站的主题是指在网站规划前，先对网站环境进行调查分析，包括社会环境调查、消费者调查、竞争对手调查、资源调查等。网站定位是指在调查的基础上进行进一步的规划，一般是根据调查结果确定网站的服务对象和内容。需要注意的是，网站的内容一定要有针对性。

●确定网站的目标：网站的目标是指从总体上为网站建设提供总的框架大纲和网站需要实现的功能等。

●内容与形象规划：网站的内容与形象是网站吸引浏览者的主要因素，与内容相比，多变的形象设计具有更加丰富的表现效果，如网站的风格设计、版式设计、布局设计等。这一过程需要设计师、编辑人员、策划人员的全力合作，才能达到内容与形象的高度统一。

●素材和内容收集：在确定好网页类型后，需要搜集和整理网页内容与相关文本，以及图形和动画等素材，并将其进行分类整理，如制作企业或公司的网站就需要搜集和整理企业或公司的介绍、产品、企业文化等信息。

●推广网站：网站推广是网页设计过程中必不可少的环节，一个优秀的网站，尤其是商业网站，有效的市场推广是成功的关键因素之一。因此，在进行网站分析与策划时还需要考虑网站推广的方式。1.2.2　网页效果图设计

网页效果图设计与传统的平面设计相同，通常使用Photoshop进行界面设计。图1-15为利用其图像处理上的优势制作多元化的效果图，最后对图像进行切片并导出为网页。图1-15　网页效果图设计软件提示也可以通过其他软件来制作网页需要的元素，如图像制作软件Illustrator、CorelDRAW，动画制作软件Flash，视频编辑软件Premiere、After Effect等。1.2.3　创建并编辑网页文档

完成前期的准备工作后，就可以启动Dreamweaver进行网页的初步设计了。此时应该先创建管理资料的场所——站点，并对站点进行规划，确定站点的结构，包括并列、层次、网状等结构，可根据实际情况选择。然后在站点中创建需要的文件和文件夹，并对页面中的内容进行填充和编辑，丰富网页中的内容。本书将主要介绍使用Dreamweaver CC制作网页的方法。1.2.4　优化与加工网页文档

为了增加网页被浏览者搜索到的概率，还需要适时地对网站进行优化。网站优化包含的内容很多，如搜索关键字的优化、清晰的网站导航、完善的在线帮助等，以最完整地体现和发挥出网站的功能和信息。用户可以从以下几个方面来考虑网站自身的优化。

●尽量多使用纯文本链接，并定义全局统一链接位置。

●标题中需要包含有优化关键字的内容，并且网站中的其他子页面标题不能雷同，必须要能展示当前网页所表达的内容。

●网页关键词要与网站相关，尽量选取较瞩目、热门的相关词汇。

●网站结构要清晰，明确每个页面的具体功能和位置。1.2.5　测试并发布HTML文档

完成网页的制作后，还需对站点进行测试并发布。站点测试可根据浏览器种类、客户端要求及网站大小等进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。测试站点时应注意以下几个方面。

●监测页面的文件大小及下载速度。

●运行链接检查报告对链接进行测试。因为页面在制作过程中可能会使某些链接指向的页面被移动或删除，需要检查是否有断开链接。

●一些浏览器不能很好地兼容网页中的某些样式、层、插件等，导致网页显示不正常。这需要测试人员检查浏览器的行为，将自动访问定位到其他页面。

●页面布局、字体大小、颜色、默认浏览窗口大小等在目标浏览器中无法预览，需要在不同的浏览器和平台上进行预览并调试。

●在制作过程中要经常对站点进行测试，及时发现并解决问题。

发布站点前需要在互联网上申请一个主页空间，指定网站或主页在网络中的位置。然后使用SharePoint Desiger或Dreamweaver对站点进行发布，也可使用FTP（File Transfer Protocol，文件传输协议）软件将文件上传到服务器申请的网址目录下。1.2.6　网站的更新与维护

将站点上传到服务器后，需要每隔一段时间对站点中的某些页面进行更新，保持网站内容的新鲜感以吸引更多的浏览者。此外，还应定期打开浏览器检查页面元素和各种超链接是否正常，以防止死链接情况的存在。最后还需要检测后台程序是否被不速之客篡改或注入，以便进行及时修正。1.3　上机实训——赏析特色网站1.3.1　实训要求

本实训要求对不同类型（如雅虎、网易和POCO等）的特色网站进行赏析，以加深对网页设计工作的基本理解。1.3.2　实训分析

对一些制作精美、浏览量大的网站进行分析，可以快速提高网站设计者的设计水平，主要包括网站的页面布局、界面设计、配色、功能实现和内容等方面的分析，以找出网站的设计优异性，并加以借鉴。当然，不同类型的网站设计的思路和风格不同，所需借鉴的网站也不相同，具体情况具体分析。另外，要制作出优秀的网站，最重要的还是设计人员的不断创新和练习。1.3.3　操作思路视频教学赏析特色网站

需要在浏览器中输入网站的地址进入网站首页，然后对网页的结构进行分析与学习。【步骤提示】STEP 01在浏览器地址栏中输入雅虎网的网址，打开雅虎首页，如图1-16所示。雅虎是著名的门户网站，其布局、设计、功能都被认为是门户网站设计的标杆。仔细分析网站的结构和布局，加深对国字型网站布局结构的理解。STEP 02在浏览器地址栏中输入网易网的网址，打开网易网首页。仔细分析网站的结构和布局，加深对标题正文型网站布局结构的理解。STEP 03在浏览器地址栏中输入POCO网的网址，打开POCO网首页，如图1-17所示。仔细分析网站的结构和布局，并学习网站的主色调和配色方案。图1-16　雅虎网首页图1-17　POCO网首页1.4　课后练习1.练习1——规划个人网站

本练习要求对个人网站进行规划。该网站主要用于展示用户的个人摄影作品、个人信息和最新动态，并且会和大家分享一些摄影作品的拍摄技巧。要求制作的网页能体现该网站的主要功能，界面设计要符合网站特色。要完成本练习需要先搜集相关的图像和文字等资料，然后制作草图并确认。站点规划草图参考效果如图1-18所示。图1-18　个人网站草图设计提示：根据个人需要绘制并修改网站站点基本结构；绘制草图并进行确认，然后搜集相关的文字、图像资料。2.练习2——规划灯饰照明网站

本练习要求对一个灯饰照明电商网站进行规划。该网站主要用于展示企业的产品、企业的相关信息和最新动态。要求制作的网页能体现该网站的主要功能，界面设计要符合网站特色。要完成本练习需要先搜集相关的图像和文字等资料，然后规划站点结构，参考效果如图1-19所示。图1-19　灯饰照明网站结构图第2章　Dreamweaver CC的基本操作

使用Dreamweaver CC可以快速、轻松地完成网页设计与开发、网站维护、Web应用程序设计的全部过程。它不仅适合初学者使用，也适合专业的网页设计者使用。本章将介绍Dreamweaver CC的基本操作，主要包括Dreamweaver CC工作界面、站点、网页文档等相关知识。通过本章的学习，读者可以使用Dreamweaver CC创建网站站点，并在其中创建网页文档。

课堂学习目标

●了解Dreamweaver CC的工作界面

●掌握站点的创建和管理方法

●掌握网页文档的相关基本操作

课堂案例展示创建站点制作代金券说明网页2.1　认识Dreamweaver CC的工作界面

Dreamweaver CC是集网页制作和网站管理于一身的网页编辑器，是针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的网页。选择【开始】/【Adobe Dreamweaver CC】命令，可快速启动Dreamweaver CC，其工作界面如图2-1所示。图2-1　Dreamweaver CC的工作界面知识链接启动与退出DreamweaverCC2.1.1　课堂案例——自定义工作界面

案例目标：Dreamweaver CC的工作界面可以根据用户的操作习惯来进行自定义。本例要求对Dreamweaver CC的工作界面进行自定义设置，完成后的效果如图2-2所示。

知识要点：关闭工作面板；移动工作面板；存储工作区。图2-2　自定义的工作界面

试读结束[说明：试读内容隐藏了图片]

下载完整电子书