上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第2章制作文本与图像混排的页面

2.1 网页制作入门

“工欲善其事，必先利其器”。网页设计和制作技术是随着互联网及电子商务的发展应运而生的，利用这种技术，可以设计制作出各种不同风格的网页，向人们展示互联网最生动的一面。下面主要以Dreamweaver为基础，来学习网页的设计与制作，完成教学站点的初步创建。

2.1.1 网页制作软件概述

1. Dreamweaver简介

Dreamweaver是集网页制作和网站管理于一身的网页编辑器，利用Dreamweaver可以轻而易举地制作出跨平台限制和浏览器限制的充满动感的网页或网站。它的主要特点有：

（1）可视化的网页制作工具，容易上手，可以让你轻松地制作出自己的网页。

（2）较高的制作效率。Dreamweaver集合了制作各种各样网页效果的功能键，使复杂的网页效果，只需要通过鼠标操作就能实现。

（3）创建专业网站的最佳途径。Dreamweaver是一款优异的网络编程工具，支持ASP、PHP、JSP等各种网站开发语言。开发人员能在一个环境内快速创建和管理网站及Internet应用程序。

2. Dreamweaver系统要求

本书以安装Dreamweaver 8为例，其系统配置如下：

● 处理器：Intel Pentium Ⅲ 800 MHz处理器及以上；

● 操作系统：Windows 2000/XP/2003；

● 内存：256 MB（建议采用1 GB）；

● 显示器：显示分辨率1024×768像素，16位（建议采用32位）；

● 硬盘：650 MB可用磁盘空间。

3. Dreamweaver 8安装与卸载

（1）安装Dreamweaver 8

在安装Dreamweaver 8之前，安装软件会给我们一些安装选项。

① 单击Dreamweaver 8安装软件，将弹出下面的窗口，单击“下一步”按钮。如图2-1所示。

图2-1 “欢迎使用”对话框

② 进入“许可证协议”对话框，选择接受该许可协议中的条款，单击“下一步”按钮，如图2-2所示。

图2-2 “许可证协议”对话框

③ 进入“目标文件夹和快捷方式”对话框，可以单击“更改”按钮来设置安装Dreamweaver 8的路径，然后按需要选择要创建的快捷方式，单击“下一步”按钮，如图2-3所示。

图2-3 “目标文件夹和快捷方式”对话框

④ 进入“默认编辑器”对话框，默认是全选，然后单击“下一步”按钮，如图2-4所示。

图2-4 “默认编辑器”对话框

⑤ 进入“已做好安装程序的准备”对话框。单击“安装”按钮开始安装，如图2-5所示。

图2-5 “已做好安装程序的准备”对话框

⑥ 进入“正在安装Macromedia Dreamweaver 8”对话框，提示安装正在进行，在“状态”区域显示安装的进度，如图2-6所示。

图2-6 “正在安装Macromedia Dreamweaver 8”对话框

⑦ 进入“Installshield Wizard完成”对话框，单击“完成”按钮结束安装，如图2-7所示。

图2-7 “Installshield Wizard完成”对话框

（2）卸载Dreamweaver 8

卸载Dreamweaver的方法如下：打开“开始菜单”→“设置”→“控制面板”→“添加或删除程序”，然后找到Dreamweaver 8软件的位置，直接单击“删除”按钮即可，如图2-8所示。

图2-8 “添加或删除程序”对话框

2.1.2 启动程序

双击计算机桌面的“Macromedia Dreamweaver 8”图标即可启动Dreamweaver 8，并进入其工作界面。在首次启动Dreamweaver 8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver 8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver 8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局，如图2-9所示。

图2-9 “工作区设置”对话框

在Dreamweave 8中首先将显示一个起始页，可以勾选这个窗口下面的“不再显示此对话框”来隐藏它。在这个页面中包括“打开最新项目”、“创建新项目”、“从范例创建”3个方便实用的项目，建议大家保留，如图2-10所示。

图2-10 Dreamweave 8起始页

新建或打开一个文档，进入Dreamweaver 8的标准工作界面。Dreamweaver 8的标准工作界面包括：标题栏、菜单栏、插入工具栏、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板等，如图2-11所示。

图2-11 Dreamweave 8工作界面

（1）标题栏

启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称，如图2-12所示。

图2-12 标题栏

（2）菜单栏

Dreamweave 8的菜单共有10个，即文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问，如图2-13所示。

图2-13 菜单栏

● 文件（F）：用来管理文件，如新建、打开、保存、另存为、导入、输出打印等；

● 编辑（E）：用来编辑文本，如剪切、复制、粘贴、查找、替换和参数设置等；

● 查看（Ⅴ）：用来切换视图模式及显示、隐藏标尺、网格线等辅助视图功能；

● 插入（I）：用来插入各种元素，如图片、多媒体组件，表格、框架及超链接等；

● 修改（M）：具有对页面元素修改的功能，如在表格中插入表格、拆分、合并单元格等；

● 文本（T）：用来对文本操作，如设置文本格式等；

● 命令（C）：所有的附加命令项；

● 站点（S）：用来创建和管理站点；

● 窗口（W）：用来显示和隐藏控制面板及切换文档窗口；

● 帮助（H）：联机帮助功能，如按下F1键，就会打开电子帮助文本。

（3）插入工具栏

插入工具栏集成了所有可以在网页应用的对象，包括“插入”菜单中的选项。插入工具栏其实就是图像化了的插入指令，通过一个个的按钮，可以很容易地插入图像、声音、多媒体动画、表格、图层、框架、表单、Flash和ActiveX等网页元素，如图2-14所示。

图2-14 插入工具栏

（4）文档工具栏

文档工具栏包含各种按钮，它们提供各种文档窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览），如图2-15所示。

图2-15 文档工具栏

（5）标准工具栏

标准工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”，如图2-16所示。

图2-16 标准工具栏

（6）文档窗口

当打开或创建一个项目，进入文档窗口，就可以在文档区域中进行输入文字、插入表格和编辑图片等操作。

文档窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码及任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。

（7）状态栏

文档窗口底部的状态栏提供文档有关的信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容，如图2-17所示。单击<body>可以选择文档的整个正文。

图2-17 状态栏

（8）属性面板

属性面板并不是将所有的属性加载在面板上，而是根据选择的对象来动态显示对象的属性，属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择一幅图像，那么属性面板上就出现该图像的相关属性；如果选择表格，那么属性面板会相应地变化成表格的相关属性，如图2-18所示。

图2-18 属性面板

（9）浮动面板

其他面板可以统称为浮动面板，这些面板都浮动于编辑窗口之外。在初次使用Dreamweave 8的时候，这些面板根据功能被分成了若干组。在窗口菜单中，选择不同的命令可以打开基本面板、设计面板、代码面板、应用程序面板、资源面板等。

终于把Dreamweave 8的基本工作界面介绍完了，读者是否已经了解它？从现在开始，让我们一起来建造一座“小房子”。

2.1.3 本地站点的搭建与管理

要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的Web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网Web服务器中的网站被称为远程站点。Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。

1. 规划站点结构

网站是多个网页的集合，包括一个首页和若干分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何Web站点页面之前，要对站点的结构进行规划和设计。决定要创建多少页，每页上显示什么内容，页面布局的外观及各页是如何互相连接起来的。

我们可以通过把文件分门别类放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。

2. 创建站点

在Dreamweave 8中可以有效F建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设置来完成。

在搭建站点前，先在自己的计算机硬盘上建一个以英文或数字命名的空文件夹。

（1）选择“菜单栏”→“站点”→“管理站点”命令，出现“管理站点”对话框。单击“新建”按钮，选择弹出菜单中的“站点”项，如图2-19所示。

图2-19 “管理站点”对话框

进入“未命名站点1的站点定义为”对话框，在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置之间切换。这里选择“基本”标签，如图2-20所示。

图2-20 “未命名站点1的站点定义为”对话框

在文本框中，输入一个站点名字以在Dreamweaver 8中标识该站点。这个名字可以是任何用户需要的名字。例如，输入站点名字xmweb，标题栏出现“xmweb的站点定义为”对话框，单击“下一步”按钮。出现向导的下一个界面，询问是否要使用服务器技术。我们现在建立的是一个静态页面，所以选择“否”，如图2-21所示。