第1篇 Dreamweaver篇

第01章 网页制作基础

Dreamweaver是一款“所见即所得”的网页编辑软件，也是第一款针对专业网页设计师的视觉化网页制作软件，利用它可以轻而易举地制作出跨平台限制和跨浏览器限制且充满动感的网页。

实例001 创建与打开网页

网页文件操作是制作网页的最基本操作，它包括网页文件的打开、保存、关闭等。本实例将介绍如何在Dreamweaver CC中创建新页面和在Dreamweaver CC中打开HTML页面。

·源文件 无

·视频 光盘/视频/第1章/实例1.swf

·知识点 创建HTML页面、打开网页

·学习时间 5分钟

实例分析

在开始制作网站页面之前，首先需要在Dreamweaver中创建一个空白页面，或者是在Dreamweaver中打开一个网页进行编辑。界面显示如图1-1所示。

知识点链接

在Dreamweaver中可以创建多种类型的文档，各种类型的文档都可以通过“新建文档”对话框来创建。

在Dreamweaver中打开网页的方式有多种：可以执行“文件>打开”命令；也可以通过“文件”面板；还可以直接将需要打开的文件拖入到Dreamweaver软件窗口中。

操作步骤

01 启动Dreamweaver CC，执行“文件>新建”命令，弹出“新建文档”对话框，如图1-2所示。

02 在“新建文档”对话框的左侧单击选择“空白页”选项；在“页面类型”选项中选择一种需要的类型，这里选择“HTML”选项；在“布局”选项中选择一种布局样式，一般默认情况下为“无”。单击“创建”按钮，即可创建一个空白的HTML文档，如图1-3所示。

03 在Dreamweaver CC中执行“文件>打开”命令，弹出“打开”对话框，如图1-4所示。“打开”对话框和其他的Windows应用程序类似，包括“查找范围”列表框、导航、视图按钮、文件名输入框以及文件类型列表框等。

04 选择需要打开的网页文件，单击“打开”按钮，即可在Dreamweaver CC中打开该网页文件，如图1-5所示。

Q 在“新建文档”对话框中可以创建多种类型的文档，它们分别有什么含义？

A “新建文档”对话框中可以创建的多种类型的文档，其含义分别如下。

·空白页：在“空白页”选项卡中可以新建基本的静态网页和动态网页，其中最常用的就是HTML选项。

·流体网格布局：单击“流体网格布局”选项卡，可以切换到“流体网格布局”选项中，可以新建基于“移动设备”“平板电脑”和“桌面电脑”3种设备的流体网格布局。

·启动器模板：单击“启动器模板”选项卡，可以切换到“启动器模板”选项中，在该选项中提供了“Mobile起始页”示例页面，在Dreamweaver CC中共提供了3种Mobile起始示例页面，选中其中一个示例，即可创建jQuery Mobile页面。

·网站模板：单击“网站模板”选项卡，可以切换到“网站模板”选项中，可以创建基于各站点中的模板的相关页面，在“站点”列表中可以选择需要创建基于模板页面的站点，在“站点的模板”列表中列出了所选中站点中的所有模板页面，选中任意一个模板，单击“创建”按钮，即可创建基于该模板的页面。

Q 在Dreamweaver中可以打开哪些格式的文件？

A 在Dreamweaver中可以打开多种格式的文件，它们的扩展名分别为．htm、.html、.shtml、.asp、.php、.jsp、.js、.xml、.as、.css等。

实例002 预览网页

·源文件 无

·视频 光盘/视频/第1章/实例2.swf

·知识点 实时视图、预览

·学习时间 2分钟

操作步骤

01 单击Dreamweaver文档工具栏上的“实时视图”按钮，如图1-6所示。

02 可在Dreamweaver的实时视图中预览该网页文件在浏览器中的显示效果，如图1-7所示。

03 单击工具栏上的“在浏览器中预览”按钮，在弹出的菜单中选择一种浏览器，如图1-8所示。

04 使用所选择的浏览器预览该网页，如图1-9所示。

Q“实时视图”与“传统的Dreamweaver”有什么不同之处？

A “实时视图”与传统的Dreamweaver“设计视图”的不同之处在于，它提供了页面在某一浏览器中的不可编辑、更逼真的外观。在“设计视图”中操作时可以随时切换到“实时视图”查看，进入“实时视图”后，“设计视图”变为不可编辑。

Q 如何在Dreamweaver中添加多浏览器预览选项？

A 在操作系统中安装了多个不同类型的浏览器；在Dreamweaver中执行“编辑>首选项”命令，弹出“首选项”对话框；在左侧的“分类”列表中选择“在浏览器中预览”选项；在该选项的设置界面中可以为Dreamweaver添加多浏览器预览选项，如图1-10所示。

实例003 创建企业站点并设置远程服务器

无论是一个网页制作的新手，还是一个专业的网页设计师，都要从构建站点开始，理清网站结构的脉络。Dreamweaver CC改进了以前版本中创建本地站点的方法，使得创建本地站点更加简便、快捷。

·源文件 无

·视频 光盘/视频/第1章/实例3.swf

·知识点 创建站点、设置远程服务器信息

·学习时间 8分钟

实例分析

在Dreamweaver中创建站点时，可以设置站点相关的远程服务器信息，这样便于在Dreamweaver中制作完网站页面后，直接使用Dreamweaver将网页上传到远程服务器。如图1-11所示。

知识点链接

在创建站点的过程中定义远程服务器是为了方便本地站点能够随时与远程服务器相关联，上传或下载相关的文件。如果用户希望在本地站点中将网站制作完成后再上传到远程服务器，则可以选不定义远程服务器，待需要上传时再定义。

操作步骤

01 执行“站点>新建站点”命令，弹出“站点设置对象”对话框，在“站点名称”对话框中输入站点的名称，单击“本地站点文件夹”后的“浏览”按钮，弹出“选择根文件夹”对话框，浏览到站点的根目录文件夹，如图1-12所示。单击“选择”按钮，选定站点根目录文件夹，如图1-13所示。

02 单击“站点设置对象”对话框左侧的“服务器”选项，切换到“服务器”选项设置界面，如图1-14所示。单击“添加新服务器”按钮，弹出“添加新服务器”对话框，对远程服务器的相关信息进行设置，如图1-15所示。

03 单击“测试”按钮，弹出“文件活动”对话框，显示正在与设置的远程服务器连接，如图1-16所示。连接成功后，弹出提示对话框，提示“Dreamweaver已成功连接到您的Web服务器”，如图1-17所示。

04 单击“添加新服务器”对话框上的“高级”选项卡，切换到“高级”选项卡的设置中，在“测试服务器”下拉列表中选择“PHP MySQL”选项，如图1-18所示。单击“保存”按钮，完成“添加新服务器”对话框的设置，如图1-19所示。

05 单击“保存”按钮，完成该站点的创建并设置了远程服务器，“文件”面板将自动切换为刚建立的站点，如图1-20所示。单击“文件”面板上的“连接到远程服务器”按钮，即可在Dreamweaver中直接连接到服务器，如图1-21所示。

Q 为什么要创建站点？

A 在创建站点之前，需要对站点的结构进行规划，特别是大型网站，更需要对站点结构有好的规划，这样可以使网站的结构目录更加清晰。完成站点的创建后，可以在站点中进行新建文件夹、新建页面等基本操作，以及在站点中复制文件和调整文件的位置等。通过Dreamweaver中的站点功能可以更好地管理整个网站中的所有文件。

Q 如何对站点的设置进行编辑？

A 如果需要对站点的设置进行编辑，可以执行“站点>管理站点”命令，在弹出的“管理站点”对话框中选择需要编辑的站点，单击“编辑当前选择的站点”按钮，弹出“站点设置对象”对话框，即可对该站点的设置进行编辑修改。

实例004 创建本地静态站点

·源文件 无

·视频 光盘/视频/第1章/实例4.swf

·知识点 “站点设置对象”对话框

·学习时间 3分钟

操作步骤

01 执行“站点>新建站点”命令，弹出“站点设置对象”对话框，如图1-22所示。

02 在“站点名称”文本框中输入站点的名称，并且设置“本地站点文件夹”选项，浏览到本地站点的位置，如图1-23所示。

03 单击“选择”按钮，确定本地站点根目录的位置，如图1-24所示。

04 单击“保存”按钮，即可完成本地站点的创建，打开“文件”面板，在“文件”面板中显示刚刚创建的本地站点，如图1-25所示。

Q 在Dreamweaver中如何快速切换多个站点？

A 在使用Dreamweaver CC编辑网页或进行网站管理时，每次只能操作一个站点。在“文件”面板左侧的下拉列表中选择已经创建的站点，就可以快速切换到对这个站点进行操作的状态。另外，在“管理站点”对话框中选中需要切换到的站点，单击“完成”按钮，同样可以切换到所选择的站点。

Q 什么是Business Catalyst站点？

A Business Catalyst是从Dreamweaver CS6开始新增的一项功能，在Dreamweaver CC中同样集成了该功能。Business Catalyst可以提供一个专业的在线远程服务器站点，使设计者能够获得专业的在线平台。在Dreamweaver CC中可以更加方便地创建Business Catalyst站点，就像是创建本地静态站点一样。

实例005 在设计视图中创建HTML页面

设计视图是用Dreamweaver制作网页时最常用也是最重要的视图之一，它是“所见即所得”的视图窗口，在该窗口中可以直接看到制作的HTML页面的显示效果。

·源文件 光盘/最终文件/第1章/实例5.html

·视频 光盘/视频/第1章/实例5.swf

·知识点 设计视图

·学习时间 5分钟

实例分析

通过Dreamweaver CC中的设计视图，可以轻松地制作复杂的HTML页面。接下来，本书将通过一个小实例，让读者学会如何使用Dreamweaver的设计视图制作HTML页面。如图1-26所示。

知识点链接

Dreamweaver的设计视图窗口不仅可以显示当前所制作页面的效果，同时它也是可视化操作的窗口，可以使用各种工具，在该窗口中输入文字、插入图像等，是“所见即所得”的视图窗口。

操作步骤

01 新建HTML文档，单击“文档”工具栏上的“设计”按钮，即可进入设计视图的编辑窗口，如图1-27所示。在“文档”工具栏上的“标题”文本框中输入页面标题，并按键盘上的Enter键确认，如图1-28所示。

02 在空白的文档窗口中输入页面的正文内容，如图1-29所示。完成页面的制作，将页面保存为“光盘/源文件/第12章/实例91.html”，在浏览器中预览页面可以看到页面的效果，如图1-30所示。

Q 在Dreamweaver中新建的HTML页面默认遵守什么规范？

A 目前，在Dreamweaver CC中新建的HTML页面默认为遵循HTML5规范，如果需要新建其他规范的HTML页面，例如XHTML的页面，需要在“新建文档”对话框中的“文档类型”下拉列表中进行选择。

Q 在Dreamweaver的设计视图中如何为文字换行？

A 在Dreamweaver的设计视图中，如果需要为文字换行，可以按Ctrl+Enter组合键，即可在光盘所在位置插入一个换行符<br >标签。

实例006 在代码视图中创建HTML页面

·源文件 光盘/最终文件/ 第1章/实例6.html

·视频 光盘/视频/第1章/实例6.swf

·知识点 代码视图

·学习时间 3分钟

操作步骤

01 创建一个HTML页面，单击“文档”工具栏上的“代码”按钮，转换到代码视图，可以看到页面的代码，如图1-31所示。

02 在页面HTML代码中的<title>与</title>标签之间输入页面标题，如图1-32所示。

03 在<body>与</body>标签之间输入页面的主体内容如图1-33所示。

04 保存页面，在浏览器中预览页面，如图1-34所示。

Q 如何使用代码视图？

A Dreamweaver的代码视图窗口会显示当前所编辑页面的相应代码，在代码视图窗口左侧是相应的代码工具，通过使用这些工具，可以在代码视图中进行插入注释、简化代码等操作。

Q HTML页面的基本代码结构是什么？

A 编写HTML文件的时候，必须遵循HTML的语法规则。一个完整的HTML文件由标题、段落、列表、表格、单词和嵌入的各种对象所组成。这些逻辑上统一的对象被统称为元素，HTML使用标签来分割并描述这些元素。实际上整个HTML文件就是由元素与标签组成的。

HTML文件基本结构如下：

<html>                                           <! --HTML文件开始-->
<head>                                           <! --HTML文件的头部开始-->
</head>                                          <! --HTML文件的头部结束-->
<body>                                           <! --HTML文件的主体开始-->
</body>                                          <! --HTML文件的主体结束-->
</html>                                          <! --HTML文件结束-->

可以看到，代码分为以下3部分。

<html>……</html>：告诉浏览器HTML文件开始和结束，其中包含<head>和<body>标记；HTML文档中所有的内容都应该在两个标记之间，一个HTML文档总是以<html>开始，以</html>结束的。

<head>……</head>:HTML文件的头部标记。

<body>……</body>:HTML文件的主体标记，绝大多数内容都放置在这个区域中；通常它在</head>标记之后，</html>标记之前。