网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop＋HTML+CSS+JavaScript

网站建设与网页设计从入门到精通 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript

网络技术的日益成熟，给人们带来了诸多方便。如今，网络正在各个领域发挥着巨大的作用，是人们日常生活中不可或缺的部分。人们足不出户就可以网上购物，随时查询股票信息，在自己的博客上发表文字和图片……以上这些都离不开最基本的网页设计、制作与维护。

随着网页制作技术的不断发展和完善，产生了众多网页制作与网站建设软件。但是目前使用最多的是Photoshop、Dreamweaver和Flash这3款软件，它们已经成为网页制作的梦幻工具组合，以其强大的功能和易学易用的特性，赢得了广大网页制作与网站建设人员的青睐。这些软件的功能相当强大，使用非常方便，但是对于高级的网页制作人员来讲，仍需了解HTML、CSS、JavaScript等网页设计语言和技术的使用，这样才能充分发挥自己丰富的想象力，更加随心所欲地设计符合标准的网页，以实现网页设计软件不能实现的许多重要功能。

本书主要内容

本书紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用Dreamweaver、Photoshop、Flash、HTML、CSS、JavaScript进行网站建设和网页设计的各方面内容和技巧。本书不仅仅局限于基本工具和语法的讲解，更重要的是通过一个个鲜活、典型的实例来达到学以致用的目的。

本书主要内容分为以下7个部分。

第1部分是网页设计基础与HTML篇，包括网页设计基础知识、HTML基础。

第2部分是Dreamweaver CS6网页制作篇，包括Dreamweaver CS6创建基本文本网页、创建超级链接、使用图像和多媒体创建丰富多彩的网页、使用表格布局排版网页、使用模板和库批量制作风格统一网页、使用行为创建特效网页、创建动态数据库网页。

第3部分是CSS美化布局网页篇，包括使用CSS样式表美化网页、使用CSS属性网页美化布局的基础、CSS+Div布局方法。

第4部分是 JavaScript 网页特效篇，包括 JavaScript 脚本基础、JavaScript 中的事件、JavaScript函数与对象。

第5部分是Flash动画设计篇，包括Flash绘制图形和编辑对象、使用文本工具创建炫目的网页特效文字、使用时间轴与图层、创建基本Flash动画、使用ActionScript制作交互动画。

第6部分是Photoshop CS6图像处理篇，包括Photoshop的基础操作、使用绘图工具绘制图像、图层与文本的使用、设计制作网页中的图像。

第7部分是网站综合案例篇，讲述了一个完整的企业网站的建设过程，包括网站规划、设计网站封面型首页、使用CSS+Div布局网站主页。

本书主要特色

本书不仅介绍了 Photoshop、Dreamweaver、Flash 这 3 款软件使用方法和技巧，还介绍了网页制作的核心语言HTML、CSS、JavaScript，介绍了网站建设与网页设计的方方面面的知识，完成由入门到精通的转变。

作者在编写时，将平时工作中总结的创建模型的实战技巧与设计经验毫无保留地奉献给读者，不仅大大丰富和提高了本书的含金量，更方便读者提升自己的实战技巧与经验，让读者举一反三，从而学到更多的方法。

全书贯穿了不同行业的多种实例应用，书中各实例均经过精心设计，操作步骤清晰简明，技术分析深入浅出，实例效果精美实用。

在正文中，每一个操作步骤后均附上对应的操作截屏图，便于读者直观、清晰地看到操作效果，牢牢记住操作的各个细节。

本书还精心配备了PPT电子课件，便于老师课堂教学和学生把握知识要点。

本书读者对象

本书由一线的网页制作和网站建设人员以及资深网页设计培训教师共同策划、编写。适合网页设计与制作人员、网站建设与开发人员、大中专院校相关专业师生、网页制作培训班学员和个人网站爱好者阅读。本书在编写过程中，力求精益求精，但书中难免存在一些不足之处，请读者批评指正。

Dreamweaver CS6是业界领先的Web开发工具，使用该工具可以高效地设计、开发和维护网站。利用Dreamweaver CS6中的可视化编辑功能，可以快速地创建网页而不需要编写任何代码，这对于网页制作者来说，工作变得很轻松。文本是网页中最基本和最常用的元素，是网页信息传播的重要载体。学会在网页中使用文本和设置文本格式对于网页设计人员来说是至关重要的。

Dreamweaver CS6工作环境

掌握添加文本元素

掌握编辑文本格式

掌握设置头信息

Dreamweaver与Flash、Fireworks这3款软件被用户称为“网页设计三剑客”。Dreamweaver的优势在于它不仅是优秀的所见即所得的编辑软件，同时也兼顾了HTML源代码，可以让用户很方便地在两种模式之间切换。

Dreamweaver CS6是最新版本的网页制作工具，用于对站点、页面和应用程序进行设计和开发。它不仅继承了前几个版本的出色功能，新版本在界面整合和易用性方面更加贴近用户。它不仅是专业人员制作网站的首选工具，而且也在广大网页制作爱好者中广泛应用。

Dreamweaver CS6提供众多的可视化设计工具、应用开发环境以及代码编辑支持。如利用鼠标拖曳来添加表格、图像等元素，在文档中直接输入文本，直接插入一些常用的特殊符号和对象等。用户在没有输入代码的情况下完成了上述工作时，Dreamweaver 会自动将结果转换为HTML源代码。用户也可以随时查看文档的HTML源代码，在代码视图中进行修改。

图 3.1所示的是Dreamweaver CS6的工作界面，由菜单栏、文档窗口、属性面板以及浮动面板组组成，整体布局紧凑、合理、高效。

菜单栏包括【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】共10个菜单，如图3.2所示。

【文件】菜单：用来管理文件，包括创建和保存文件、导入与导出文件、浏览和打印文件等。

【编辑】菜单：用来编辑文本，包括撤消与恢复、复制与粘贴、查找与替换、参数设置和快捷键设置等。

【查看】菜单：用来查看对象，包括代码的查看、网格线与标尺的显示、面板的隐藏和工具栏的显示等。

【插入】菜单：用来插入网页元素，包括插入图像、多媒体、表格、布局对象、表单、电子邮件链接、日期和HTML等。

【修改】菜单：用来实现对页面元素修改的功能，包括页面属性、CSS样式、快速标签编辑器、链接、表格、框架、AP元素与表格的转换、库和模板等。

【格式】菜单：用来对文本进行操作，包括字体、字形、字号、字体颜色、HTML/CSS样式、段落格式化、扩展、缩进、列表、文本的对齐方式等。

【命令】菜单：收集了所有的附加命令项，包括应用记录、编辑命令清单、获得更多命令、扩展管理、清除HTML/Word HTML、检查拼写和排序表格等。

【站点】菜单：用来创建与管理站点，包括新建站点、管理站点、上传与存回和查看链接等。

【窗口】菜单：用来打开与切换所有的面板和窗口，包括插入栏、【属性】面板、站点窗口和【CSS】面板等。

【帮助】菜单：内含Dreamweaver帮助、Spry框架帮助、Dreamweaver支持中心、产品注册和更新等。

文档窗口主要用于文档的编辑，可同时打开多个文档进行编辑，可以在【代码】视图、【拆分】视图和【设计】视图中分别查看文档，如图3.3所示。

【代码视图】：显示HTML源代码视图。

【拆分视图】：同时显示HTML源代码和设计视图。

【设计视图】：是系统默认设置，只显示设计视图。

【实时视图】：显示不可编辑的、交互式的、基于浏览器的文档视图。

【属性】面板主要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。在【属性】面板包括两种选项，一种是【HTML】选项，如图 3.4 所示，将默认显示文本的格式、样式和对齐方式等属性。另一种是【CSS】选项，单击【属性】面板中的【CSS】选项，可以在【CSS】选项中设置各种属性。

在Dreamweaver工作界面的右侧排列着一些浮动面板，这些面板集中了网页编辑和站点管理过程中最常用的一些工具按钮。这些面板被集合到面板组中，每个面板组都可以展开或折叠，并且可以和其他面板停靠在一起。面板组还可以停靠到集成的应用程序窗口中，这样就能够很容易地访问所需的面板，而不会使工作区变得混乱。面板组如图3.5所示。

插入栏中放置的是编写网页的过程中经常用到的对象和工具，通过该面板可以很方便地使用网页中所需的对象以及对对象进行编辑所要用到的工具，如图3.6所示。

【超级链接】

：创建超级链接。

【电子邮件链接】

：创建电子邮件链接，只要指定要链接邮件的文本和邮件地址，就可以自动插入邮件地址发送链接。

【命名锚记】

：设置链接到网页文档的特定部位。

【水平线】

：插入水平线。

【表格】

：建立主页的基本构成元素，即表格。

【插入Div标签】

：可以使用Div标签创建CSS布局块并在文档中对它们进行定位。

【图像】

：在文档中插入图像和导航栏等，单击右侧的小三角，可以看到其他与图像相关的按钮。

【媒体】

：插入Flash，单击右侧的小三角，可以看到其他媒体类型的按钮。

【日期】

：插入当前时间和日期。

【服务器端包括】

：是对Web服务器的指令，它指示Web服务器在将页面提供给浏览器前在Web页面中包含指定的文件。

【注释】

：在当前光标位置插入注释，便于以后进行修改。

【文件头】

：按照指定的时间间隔进行刷新。

【脚本】

：包含几个与脚本相关的按钮。

【模板】

：单击此按钮，可以从下拉列表中选择与模板相关的按钮。

【标签选择器】

：标签编辑器可用于查看、指定和编辑标签的属性。

在使用Dreamweaver制作网页前，最好先定义一个站点，这是为了更好地利用站点对文件进行管理，尽可能减少错误，如路径出错、链接出错等。

Dreamweaver 是最佳的站点创建和管理工具，使用它可以创建完整的站点。创建本地站点的具体操作步骤如下。

1 选择菜单中【站点】|【管理站点】命令，弹出【管理站点】对话框，在对话框中单击【新建站点】按钮，如图3.7所示。

2 弹出【站点设置对象】对话框，在对话框中选择【站点】选项卡，在【站点名称】文本框中输入名称，可以根据网站的需要任意起一个名字，如图3.8所示。

3 单击【本地站点文件夹】文本框右边的浏览文件夹按钮，弹出【选择根文件夹】对话框，选择站点文件存放的根文件夹位置，如图3.9所示。

4 单击【选择】按钮，选择站点文件位置，如图3.10所示。

5 单击【保存】按钮，更新站点缓存，回到【管理站点】对话框，站点列表框中显示了新建的站点，如图3.11所示。

6 单击【完成】按钮，此时在【文件】面板中可以看到创建的站点文件，如图 3.12所示。

利用 3.2.1 节中的方法建立的站点只是站点雏形，还可以在【站点设置对象】对话框中选择【高级设置】选项卡，通过直接设置【本地信息】、【遮盖】、【设计备注】、【文件视图列】、【Contribute】、【模板】、【Spry】和【Web字体】中的参数来快速创建更细致的本地站点。

选择菜单中【站点】|【管理站点】命令，弹出【管理站点】对话框，在对话框中选择站点。弹出【站点设置对象效果】窗口，在窗口的【高级设置】中选择【本地信息】，如图3.13所示。

在【本地信息】选项中可以设置以下参数。

在【默认图像文件夹】文本框中，输入此站点的默认图像文件夹的路径，或者单击浏览文件夹按钮浏览到该文件夹。此文件夹是Dreamweaver上传到站点上的图像的位置。

【站点范围媒体查询文件】充当站点内所有媒体查询的中央存储库。创建此文件后，从站点内必须使用此文件中的媒体查询才能显示的页面中链接到此文件。

【链接相对于】表示在站点中创建指向其他资源或页面的链接时，指定 Dreamweaver创建的链接类型。Dreamweaver可以创建两种类型的链接：文档相对链接和站点根目录相对链接。

在【Web URL】文本框中，输入已完成的站点将使用的URL。

【区分大小写的链接检查】表示在Dreamweaver检查链接时，将检查链接的大小写与文件名的大小写是否相匹配。此选项用于对文件名大小写敏感的UNIX系统。

【启用缓存】复选框表示是否创建本地缓存以提高链接和站点管理任务的速度。

在对话框的【高级设置】中选择【遮盖】选项，如图3.14所示。

在【遮盖】选项中可以设置以下参数。

选中【启用遮盖】后激活文件遮盖。

遮盖具有以下扩展名的文件：勾选此复选框，可以对特定文件名结尾的文件使用遮盖。

在对话框中的【高级设置】中选择【设计备注】选项，在最初开发站点时，需要记录一些开发过程中的信息和备忘。如果在团队中开发站点，需要记录一些与别人共享的信息，然后上传到服务器，供别人访问，如图3.15所示。

在【设计备注】选项中可以进行如下设置。

维护设计备注：可以保存设计备注。

清理设计备注：单击此按钮，可以删除过去保存的设计备注。

启用上传并共享设计备注：在上传或取出文件的时候，设计备注会上传到远端服务器上。

在对话框的【高级设置】中选择【文件视图列】选项，用来设置站点管理器中文件浏览器窗口所显示的内容，如图3.16所示。

在【文件视图列】选项中可以设置如下内容。

名称：显示文件名。

备注：显示设计备注。

大小：显示文件大小。

类型：显示文件类型。

修改：显示修改内容。

取出者：正在被谁打开和修改。

在对话框的【高级设置】中选择【Contribute】选项，勾选【启用Contribute兼容性】复选框可以提高与Contribute用户的兼容性，如图3.17所示。

在对话框的【高级设置】中选择【模板】选项，如图3.18所示。

提示相对路径就是指由这个文件所在的路径引起的跟其他文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。

在对话框的【高级设置】中选择【Spry】选项，如图3.19所示。

在对话框的【高级设置】中选择【Web字体】选项，如图3.20所示，在这里可以设置网站所需字体的存储位置。

文本是传递信息的基础，浏览网页内容时，大部分时间是浏览网页中的文本，所以学会在网页中创建文本至关重要。在Dreamweaver CS6中可以很方便地创建出所需的文本，还可以对创建的文本进行段落格式的排版。

文本是基本的信息载体，是网页中最基本的元素，在浏览网页时，获取信息最直接、最直观的方法就是阅读文本。下面通过实例讲述如何在网页中添加文本，如图3.21所示。

1 打开原始文件CH03/3.3.1/index.htm，如图3.22所示。

2 将光标放置在要输入文本的位置，输入文本，如图3.23所示。

3 保存文档，按F12键在浏览器中预览，效果如图3.21所示。

在Dreamweaver中插入日期非常方便，它提供了一个插入日期的快捷方式，用任意格式即可在文档中插入当前时间，同时它还提供了日期更新选项，当保存文件时，日期也随着更新。插入日期的效果如图3.24所示，具体操作步骤如下。

1 打开原始文件CH03/3.3.2/index.htm，如图3.25所示。

2 将光标置于要插入日期的位置，选择菜单中【插入】|【日期】命令，弹出【插入日期】对话框，如图3.26所示。

3 在【插入日期】对话框中，在【星期格式】、【日期格式】和【时间格式】列表中分别选择一种合适的格式。勾选【储存时自动更新】复选框，每一次存储文档都会自动更新文档中插入的日期，如图3.27所示。

4 单击【确定】按钮，即可插入日期，如图3.28所示。

提示显示在【插入日期】对话框中的时间和日期不是当前的日期，它们也不会反映访问者查看用户网站的日期/时间。

5 保存文档，按F12键在浏览器中浏览效果，如图3.24所示。

特殊字符包含换行符、不换行空格、版权信息和注册商标等，它们是网页中经常用到的元素。当在网页文档中插入特殊字符时，在代码视图中显示的是特殊字符的源代码，在设计视图中显示的是一个标志，只有在浏览器窗口中才能显示真正面目，如图3.29所示。下面通过实例讲述版权字符的插入，具体操作步骤如下。

1 打开原始文件CH03/3.3.3/index.htm，如图3.30所示。

2 将光标置于要插入特殊字符的位置，选择菜单中的【插入】|【HTML】|【特殊字符】|【版权】命令，即可插入版权，如图3.31所示。

3 保存文档，按F12键在浏览器中浏览效果，如图3.59所示。

提示选择菜单中的【插入】|【HTML】|【特殊字符】|【其他字符】命令，弹出【插入其他字符】对话框，在对话框中可以选择更多的特殊字符，如图3.32所示。

水平线在网页文档中经常用到，它主要用于分隔文档内容，使文档结构清晰明了，合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档，如果合理放置水平线，会变得层次分明、易于阅读。

下面通过实例讲述在网页中插入水平线的效果，如图3.33所示，具体操作步骤如下。

1 打开原始文件CH03/3.3.4/index.htm，如图3.34所示。

2 将光标置于要插入水平线的位置，选择菜单中的【插入】|【HTML】|【水平线】命令，插入水平线，如图3.35所示。

提示将光标放置在插入水平线的位置，单击【常用】插入栏中的【水平线】

按钮，也可插入水平线。在【窗口】下拉列表中选择“插入”即可把【常用】插入栏调出。

3 选中水平线，打开【属性】面板，可以在【属性】面板中设置水平线的高、宽、对齐方式和阴影，如图3.36所示。

在水平线【属性】面板中可以设置以下参数。

【宽】和【高】：以像素为单位或以页面尺寸百分比的形式设置水平线的宽度和高度。

【对齐】：设置水平线的对齐方式，包括“默认”、“左对齐”、“居中对齐”和“右对齐”4个选项。只有当水平线的宽度小于浏览器窗口的宽度时，该设置才适应。

【阴影】：设置绘制的水平线是否带阴影。取消选择该项将使用纯色绘制水平线。

提示设置水平线颜色：在【属性】面板中并没有提供关于水平线颜色的设置选项，如果需要改变水平线的颜色，只需要直接进入源代码更改〈hr color=“对应颜色的代码”〉即可。

4 保存文档，按F12键在浏览器中浏览效果，如图3.33所示。

HTML代码分析

1．插入水平线hr

水平线标记用于在页面中插入一条水平标尺线，使页面看起来整齐明了。

在网页中输入一个<hr>标记，就添加了一条默认样式的水平线。

2．水平线宽度width

默认情况下，水平线的宽度为100%，可以使用width手动调整水平线的宽度。

在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口的百分比。

3．水平线高度size

默认情况下，可以使用size标记用于改变水平线的高度。

在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口的百分比。水平线的高度只能使用绝对的像素来定义。

4．水平线去掉阴影noshade

默认的水平线是空心立体的效果，可以将其设置为实心并且不带阴影的水平线。

noshade是布尔值的属性，它没有属性值，如果在<hr>元素中写上了这个属性，则浏览器不会显示立体形状的水平线，反之则无需设置该属性，浏览器默认显示一条立体形状带有阴影的水平线。

5．水平线颜色color

在网页设计过程中，如果随意利用默认水平线，常常会出现插入的水平线与整个网页颜色不协调的情况。设置不同颜色的水平线可以为网页增色不少。

颜色代码是十六进制的数值或者颜色的英文名称。

6．水平线排列align

水平线在默认情况下是居中对齐的，如果想让水平线左对齐或右对齐，就需要设置对齐方式。

在该语法中对齐方式可以有3种，包括center、left和right，其中center的效果与默认的效果相同。

Dreamweaver 中的文本格式设置与使用标准字处理程序类似。可以为文本块设置默认格式设置样式（段落、标题1、标题2等）、更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体、代码和下划线）。

输入文本后，可以在【属性】面板中对文本的大小、字体和颜色等进行设置。设置文本属性的具体操作步骤如下。

1 在【属性】面板中【CSS】选项卡的【字体】下拉列表中选择“编辑字体列表”选项，如图3.37所示。

2 在对话框中的【可用字体】列表框中选择要添加的字体，单击

按钮添加到左侧的【选择的字体】列表框中，在【字体】列表框中就会显示新添加的字体，如图3.38所示。重复以上操作即可添加多种字体。若要取消已添加的字体，可以在【字体列表】选中该字体组合，相应的多个字体会出现在【选择的字体】列表框中，然后选中要取消的字体，单击

按钮即可。

3 完成一个字体样式的编辑后，可进行下一个样式的编辑。若要删除某个已经编辑的字体样式，可选中该样式单击

按钮。完成字体样式的编辑后，单击【确定】按钮确认修改并关闭该对话框。

[这里选择【字体】为“宋体”，弹出【新建 CSS 规则】对话框，在对话框的【选择器类型】中选择“类（可应用于任何HTML元素）”，在【选择器名称】中输入名称“.contenta”，在【规则定义】中选择“仅限该文档”，如图3.39所示。

选择一种合适的字体，是决定网页美观、布局合理的关键，在设置网页时，应对文本设置相应的字号。选中要设置字号的文本，在【属性】面板中的【大小】下拉列表中选择字号的大小，或者直接在文本框中输入相应大小的字号，如图3.40所示。

还可以改变网页文本的颜色，设置文本颜色的具体操作步骤如下。

1 选中设置颜色的文本，在【属性】面板中单击【文本颜色】按钮，打开如图 3.41 所示的调色板。

2 在调色板中选中所需的颜色，光标变为

形状，单击鼠标左键即可选取该颜色。单击【确定】按钮，设置文本颜色，如图3.42所示。

提示如果调色板中的颜色不能满足需要时，单击

按钮，弹出【颜色】对话框，在对话框中选择需要的颜色即可。

HTML代码分析

1．字体属性face

Face属性规定的是字体的名称，如中文字体的【宋体】、【楷体】、【隶书】等。可以通过字体的face属性设置不同的字体，设置的字体效果必须在浏览器中安装相应的字体后才可以正确浏览，否则有些特殊字体会被浏览器中的普通字体所代替。

……

face属性用于定义该段文本所采用的字体名称。如果浏览器能够在当前系统中找到该字体，则使用该字体显示。

2．字号属性size

文字的大小也是字体的重要属性之一。除了使用标题文字标记设置固定大小的字号之外，HTML语言还提供了标记的size属性来设置普通文字的字号。

……

size 属性用来设置字体大小，它有绝对和相对两种方式。Size 属性有 1 到 7 个等级，1级最小，7级的字体最大，默认的字体大小是3号字。可以使用“Size=?”定义字体的大小。

提示 标记和它的属性可影响周围的文字，该标记可应用于文本段落、句子和单词，甚至单个字母。

3．颜色属性color

在HTML页面中，还可以通过不同的颜色表现不同的文字效果，从而增加网页的亮丽色彩，吸引浏览者的注意。

……

它可以用浏览器承认的颜色名称和十六进制数值表示。

提示注意，字体的颜色一定要鲜明，并且和底色配合，否则你想象一下白色背景和灰色的字或是蓝色的背景红色的字有多么难看刺眼。

文件头标签也就是通常说的<meta>标签，文件头标签在网页中是看不到的，它包含在网页中的<head>...</head>标签之间。所有包含在该标签之间的内容在网页中都是不可见的。

文件头标签主要包括标题、META、关键字、说明、刷新、基础和链接，下面分别介绍常用的文件头标签的使用。

META对象常用于插入一些为Web服务器提供选项的标记符，方法是通过http-equiv属性和其他各种在 Web 页面中包括的、不会使浏览者看到的数据。设置 META 的具体操作步骤如下。

1 选择菜单中的【插入】|【HTML】|【文件头标签】|【META】命令，打开【META】对话框，如图3.43所示。

2 在【属性】下拉列表中可以选择【名称】或【http-equiv】选项，指定<meta>标签是否包含有关页面的描述信息或http标题信息。

3 在【值】文本框中指定在该标签中提供的信息类型。

4 在【内容】文本框中输入实际的信息。

5 设置完毕后，单击【确定】按钮即可。

提示单击【HTML】插入栏中的

按钮，在弹出的菜单中选择 META选项，打开【META】对话框，插入META信息。

关键字也就是与网页的主题内容相关的简短而有代表性的词汇，这是给网络中的搜索引擎准备的。关键字一般要尽可能概括网页内容，这样浏览者只要输入很少的关键字，就能最大程度地搜索网页。插入关键字的具体操作步骤如下。

1 选择菜单中的【插入】|【HTML】|【文件头标签】|【关键字】命令，打开【关键字】对话框，如图3.44所示。

2 在【关键字】文本框中输入一些值，单击【确定】按钮即可。

提示单击【HTML】插入栏中的

按钮，在弹出的菜单中选择【关键字】选项，打开【关键字】对话框，插入关键字。

插入说明的具体操作步骤如下。

1 选择菜单中的【插入】|【HTML】|【文件头标签】|【说明】命令，打开【说明】对话框，如图3.45所示。

2 在【说明】文本框中输入一些值，单击【确定】按钮即可。

提示单击【HTML】插入栏中的

按钮，在弹出的菜单中选择【说明】选项，打开【说明】对话框，插入说明。

设置网页的自动刷新特性，使其在浏览器中显示时，每隔一段指定的时间，就跳转到某个页面或是刷新自身。插入刷新的具体操作步骤如下。

1 选择菜单中的【插入】|【HTML】|【文件头标签】|【刷新】命令，打开【刷新】对话框，如图3.46所示。

2 在【延迟】文本框中输入刷新文档要等待的时间。

3 在【操作】选项区域中，可以选择重新下载页面的地址。勾选【转到 URL】单选按钮时，单击文本框右侧的【浏览】按钮在打开的【选择文件】对话框中选择要重新下载的Web页面文件。勾选【刷新此文档】单选按钮时，将重新下载当前的页面。

4 设置完毕后，单击【确定】按钮即可。

提示单击【HTML】插入栏中的

按钮，在弹出的菜单中选择【刷新】选项，打开【刷新】对话框，插入刷新。

本章主要讲述了Dreamweaver CS6的操作界面、在网页中插入文本和设置文本属性等，下面通过以上所学的知识讲述如何创建基本文本网页，效果如图3.47所示，具体操作步骤如下。

1 打开原始文件CH03/3.6/index.htm，将光标置于要输入文字的位置，如图3.48所示。

2 在表格中输入相应的文字内容，如图3.49所示。

3 选择文字，在【属性】面板中单击【大小】右边的文本框，弹出【新建 CSS 规则】对话框，在对话框中的【选择器类型】中选择“类（可应用于任何HTML元素）”，在【选择器名称】中输入名称“.daxiao”，在【规则定义】中选择“仅限该文档”，如图3.50所示。

4 单击【确定】按钮，设置【大小】为“12px”，单击【文本颜色】按钮，在弹出的颜色框中设置字体颜色为“#663300”，如图3.52所示。

5 将光标置于要插入时间的位置，选择菜单中的【插入】|【日期】命令，弹出【插入日期】对话框，在对话框中进行相应的设置，如图3.52所示。

6 单击【确定】按钮，插入时间，如图3.53所示。

7 保存文档，在浏览器中的预览效果如图3.47所示。

图书在版编目（CIP）数据

网站建设与网页设计从入门到精通：Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript/何新起编著.--北京：人民邮电出版社，2013.9

ISBN　978-7-115-32665-2

Ⅰ.①网…　Ⅱ.①何…　Ⅲ.①网页制作工具　Ⅳ.①TP393.092

中国版本图书馆CIP数据核字（2013）第169536号

本书紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用Dreamweaver、Photoshop、Flash、HTML、CSS、JavaScript 进行网站建设和网页设计的各方面内容和技巧。本书不仅仅着眼于基本工具和语法讲解上，更重要的是通过一个个鲜活、典型的实例来达到学以致用的目的。

本书主要内容分为7个部分。

第1部分是网页设计基础与HTML篇，包括网页设计基础知识、HTML基础。

第2部分是Dreamweaver CS6网页制作篇，包括Dreamweaver CS6创建基本文本网页、创建超级链接、使用图像和多媒体创建丰富多彩的网页、使用表格布局排版网页、使用模板和库批量制作风格统一的网页、使用行为创建特效网页、创建动态数据库网页。

第3部分是CSS美化布局网页篇，包括使用CSS样式表美化网页、CSS属性网页美化布局的基础、CSS+Div布局方法。

第4部分是JavaScript网页特效篇，包括JavaScript脚本基础、JavaScript中的事件、JavaScript函数与对象。

第5部分是Flash动画设计篇，包括使用Flash绘制图形和编辑对象、使用文本工具创建炫目的网页特效文字、使用时间轴与图层、创建基本Flash动画、使用ActionScript制作交互动画。

第6部分是Photoshop CS6图像处理篇，包括Photoshop的基础操作、使用绘图工具绘制图像、图层与文本的使用、设计制作网页中的图像。

第7部分是网站综合案例篇，讲述了一个完整的企业网站的建设过程，包括网站规划、设计网站封面型首页、使用CSS+Div布局网站主页。

全书贯穿了不同行业的多种实例，各实例均经过精心设计，操作步骤清晰简明，技术分析深入浅出，实例效果精美。本书还精心配备了PPT电子课件，便于老师课堂教学和学生把握知识要点。

本书语言简洁、内容丰富，适合网页设计与制作人员、网站建设与开发人员、大中专院校相关专业师生、网页制作培训班学员和个人网站爱好者阅读。