1.6 Dreamweaver简介_网页设计与制作项目教程（微课版）-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

1.6 Dreamweaver简介

1.6.1 Dreamweaver界面介绍

一、工作区布局

双击桌面上的Dreamweaver软件图标，进入Dreamweaver软件界面，为了统一，建议大家选择菜单栏中的【窗口】→【工作区布局】→【经典】选项，如图1-11所示。

图1-11 Dreamweaver工作区布局

二、新建文档

选择菜单栏中的【文件】→【新建】选项，会出现“新建文档”窗口。这时，在文档类型下拉选项中选择HTML，单击【创建】按钮，如图1-12所示，即可创建一个空白的HTML文档。

图1-12 创建HTML文档

三、软件的操作界面

Dreamweaver的操作界面主要由六部分组成，包括菜单栏、插入栏、文档工具栏、文档窗口、属性面板及其他常用面板，每个部分的具体位置如图1-13所示。

图1-13 Dreamweaver的操作界面

1.6.2 Dreamweaver初始化设置

一、工作区布局设置

打开Dreamweaver工具界面，选择菜单栏里的【窗口】→【工作区布局】→【经典】选项。

二、必备面板

设置为“经典”模式后，需要把常用的3个面板调出来，也就是菜单栏【窗口】菜单项下的【插入】【属性】【文件】3个选项。

三、新建默认文档设置

单击菜单栏中的【编辑】→【首选参数】选项，组合键为＜Ctrl+U＞，选中左侧分类中的“新建文档”菜单，右边就会出现对应的设置，如图1-14所示，选择目前最常用的HTML文档类型和编码类型。

网页能通过背景图像给人留下第一印象，如节日题材的网站一般采用喜庆祥和的图片来突出效果，所以在网页设计中，控制背景颜色和背景图像是一个很重要的步骤。

四、代码提示

Dreamweaver有强大的代码提示功能，可以提高书写代码的速度。在“首选参数”对话框中可设置代码提示，选择【代码提示】菜单，然后选中【结束标签】选项中的第2项，单击【确定】按钮即可，如图1-15所示。

图1-14 新建默认文档设置

图1-15 设置代码提示

五、浏览器设置

对于初学者来说，计算机上必备的三大浏览器分别是火狐浏览器、IE 浏览器和谷歌浏览器。建议将Dreamweaver的默认预览浏览器设置为“火狐浏览器”，也就是主浏览器，使用主浏览器预览网页的快捷键为<F12>，一般把IE浏览器或谷歌浏览器设为次浏览器，组合键为＜Ctrl+F12＞，如图1-16所示。

图1-16 设置默认浏览器

1.6.3 使用Dreamweaver创建网页

一、编写HTML代码

（1）打开Dreamweaver，新建一个HTML默认文档，组合键为＜Ctrl+Shift+N＞。切换到“代码”视图，这时在文档窗口中会出现Dreamweaver自带的代码，如图1-17所示。

图1-17 编写HTML代码

（2）在代码的第5行，<title>与</title>标记之间，输入HTML文档的标题，这里将“无标题文档”修改为“我的第一个网页”。

（3）在<body>与</body>标记之间添加网页的主体内容，即输入以下代码：

……

　　　<body>

　　　　　<p>这是我的第一个网页哦。</p>

　　　</body>

……

（4）在菜单栏中选择【文件】→【保存】选项，组合键为＜Ctrl+S＞。接着，在弹出来的【另存为】对话框中选择文件的保存地址并输入文件名即可保存文件。这里将文件命名为example01.html。

（5）在浏览器中运行example01.html（即双击example01.html文件），效果如图1-18所示。

图1-18 在浏览器中运行example01.html的效果

这样就使用HTML完成了一个简单的网页。

二、编写CSS代码

（1）在<head>与</head>标记中添加CSS样式，CSS样式需要写在<style></style>标记内，具体代码如下：

……

　　　p{font-size:36px;　　　　　　　　/ *设置字号为36像素* /

　　　　color:red;　　　　　　　　　　　/ *设置字体颜色为红色* /

　　　　text-align:center;　　　　　　　/ *设置文本居中显示* /

　　　　}

　</style>

……

这时Dreamweaver中的效果如图1-19所示。

图1-19 Dreamweaver中编写CSS代码

（2）在菜单栏中选择【文件】→【保存】选项，或使用组合键＜Ctrl+S＞，即可完成文件的保存。这时，在火狐浏览器中刷新example01.html页面，效果如图1-20所示。

图1-20 浏览器中example01.html页面效果

HTML和CSS就是这么简单，易学易用，在后面的内容中我们会陆续学习HTML和CSS的语法格式，以及常用的HTML标记和CSS样式。

1.6.4 使用Dreamweaver创建站点

Dreamweaver可以用于创建单个网页，但在大多数情况下，是将这些单独的网页组合起来成为站点。Dreamweaver 不仅提供了网页编辑特性，而且带有强大的站点管理功能。

有效地规划和组织站点，对建立网站是非常必要的。合理的站点结构能够加快对站点的设计，提高工作效率，节省时间。如果将所有的网页都存储在一个目录下，当站点的规模越来越大时，管理起来就会变得很不容易。因此一般来说，应该充分利用文件夹来管理文件。

一、认识站点

Dreamweaver站点是一种管理网站中所有关联文件的工具，通过站点可以实现将文件上传到网络服务器、自动跟踪和维护、管理文件以及共享文件等功能。严格地说，站点也是一种文件的组织形式，由文件和文件所在的文件夹组成，不同的文件夹保存不同的网页内容，如images文件夹用于存放图片，这样便于以后管理与更新。

Dreamweaver中的站点包括本地站点、远程站点和测试站点3类。

（1）本地站点用于存放整个网站框架的本地文件夹，是用户的工作目录，一般制作网页时只需建立本地站点。

（2）远程站点是存储于 Internet 服务器上的站点和相关文件。通常情况下，为了不连接 Internet 而对所建的站点进行测试，可以在本地计算机上创建远程站点，来模拟真实的Web服务器进行测试。

（3）测试站点是Dreamweaver处理动态页面的文件夹，使用此文件夹生成动态内容并在工作时连接到数据库，用于对动态页面进行测试。在制作静态网页时，不需要设置测试站点。

二、站点及目录的作用

站点是用来存储一个网站的所有文件的，这些文件包括网页文件、图片文件、服务器端处理程序和Flash动画等。

在定义站点之前，首先要做好站点的规划，包括站点的目录结构和链接结构等。这里讲的站点目录结构是指本地站点的目录结构，远程站点的结构应该与本地站点相同，便于网页的上传与维护。链接结构是指站点内各文件之间的链接关系。

三、合理建立目录

站点的目录结构与站点的内容多少有关。如果站点的内容很多，就要创建多级目录，以便分类存放文件；如果站点的内容不多，目录结构可以简单一些。创建目录结构的基本原则是方便站点的管理和维护。目录结构创建是否合理，对于网站的上传、更新、维护、扩充和移植等工作有很大的影响。特别是大型网站，目录结构设计不合理时，文件的存放就会混乱。甚至到了无法更新维护的地步。因此，在设计网站目录结构时，应该注意以下几点。

（1）无论站点的大小，都应该创建一定规模的目录结构，不要把所有文件都存放在站点的根目录中。如果把很多文件都放在根目录中，很容易造成文件管理的混乱，影响工作效率，也容易发生错误。

（2）按模块及其内容创建子目录。

（3）目录层次不要太深，一般控制在5级以内。

（4）不要使用中文目录名，防止因此而引起的链接和浏览错误。

（5）为首页建立文件夹，用于存放网站首页中的各种文件，首页使用率最高，为它单独建一个文件夹很有必要。

（6）目录名应能反映目录中的内容，方便管理维护。但是这也容易导致一个安全问题，浏览者很容易猜测出网站的目录结构，也就容易对网站实施攻击。所以在设计目录结构的时候，尽量避免目录名和栏目名完全一致，可以采用数字、字母、下画线等组合的方式来提高目录名的猜测难度。

四、创建本地站点

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

所谓本地站点，就是本地硬盘中存放远程网站所有文档的地方（文件夹）。简单地说，就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。通过这个文件夹（站点）对网站进行管理，有次序，一目了然。

创建本地站点有以下两种方法。

方法一使用Dreamweaver的向导创建本地站点。其具体操作步骤如下。

（1）打开Dreamweaver，在菜单栏中选择【站点】→【新建站点】选项，接着，在弹出来的【站点设置对象】对话框中输入站点的名称，如图1-21所示。