第3章 使用Dreamweaver制作网页项目一 建立网站3.1.1网站与网页基本概念网页就是把文字、图像、图形、声音、动画、视频等多种形
式的信息，以分布在因特网上的各种相关信息，相互链接起来而构成的一种信息表达方式。 网页、支持网页各种效果的程序文件、数据文件，甚至
说明文档的集合，就是我们常说的网站。 3.1.2 HTML语言HTML语言是一种超文本标记语言，它用来描述某个事物应该如何合理地
显示在计算机屏幕上。也可以这么说，HTML就是以特殊的标记形式存储为通常的文本文件。 例如，我们要在网页上实现“欢迎参观我的主页”
这句话为黑体18号字并居中显示，相应的HTML语句为： =18>欢迎参观我的主页3.1.3 网站工作原理 因特网采用浏览器/服务器模
式。采用浏览器/服务器模式时，客户机通过浏览器软件接收用户输入的服务请求并把它发送给WWW服务器，WWW服务器再把这个服务请求发送
给相关的服务器（如数据库服务器、电子邮件服务器），由相关的服务器向用户提供相应的服务。 3.1.4 静态网页与动态网页在浏览静
态网页时，该网页是在网站所在的服务器上真实存在的。当我们在浏览器上输入网页的网址时，网站服务器就将该网页下载到浏览器中并打开，供浏
览者浏览。在浏览动态网页时，那个网页可能并不是真实存在的，或者不是完整存在的。而仅仅是一个模板，网页中的一些内容来自数据库等信息源
，由相关的网页程序来控制那些信息显示在模板的什么位置上。3.1.5 ASP动态网页 ASP并不是一种编程语言，而是由微软公司开发的
一种服务器端脚本环境，其原理是通过在HTML页面中加入VBScript或JavaScript代码，由服务器执行程序命令，产生结果，
显示在浏览器上的。和HTML语言编辑的静态网页不同，ASP网页不需要由浏览器来解释网页语言所要表达的内容，而是由网站服务器来解释相
关内容，然后传送到浏览器端并显示出来。这避免了部分浏览器因为版本低无法解释特殊代码，造成网页无法正确显示的情况。 3.1.6 网
页制作工具 Adobe公司的Dreamweaver现在占据网页制作软件的最大市场份额。该软件除了本身具有的强大功能以外，还得益于其
他相应软件的有力支持。它和该公司的另外两个产品Flash（动画制作工具）、Fireworks（图像编辑工具）一起被称为“网络三剑客
”。和其他网页制作工具相比，Dreamweaver是更专业的网页制作工具，拥有更广泛的网页制作者群。它主要有以下优点。（1）不生成
冗余代码。（2）强大的动态页面支持。（3）优秀的网站管理功能。（4）便于扩展。 子项目一： 熟悉Dreamweaver操作环境 单
击任务栏上的“开始”按钮，打开“开始”菜单；将鼠标指针指向“开始”菜单中的“所有程序”，打开“程序”菜单；再单击子菜单中的“Ado
be Dreamweaver CS”，启动Dreamweaver。 子项目二： 规划网站在开始建立网站之前，首先要确定网站的主题，
根据主题确定这个网站需要由多少个网页构成，以及这些网页之间的关联关系等。 通常，网页中除了文字之外，还应该包含图片、声音、动画等内
容。这些资料都要在确定网站主题后、制作网页之前准备好，并存放在一个专门的文件夹中。子项目三： 建立一个空站点单击“站点”菜单中的“
新建站点”命令，打开“未命名站点1的站点定义为”对话框。 在“您打算为您的站点起什么名字？”下面的文本框中，输入新站点的名称。 选
择是否需要使用服务器技术。 选择编辑网页的方式。 单击“您如何连接到远程服务器？”下拉列表框右侧的按钮，从下拉列表中选择“本地/网
络”方式；在“您打算将您的文件存储在服务器上的什么文件夹中？”文本框内输入网站文件所在的文件夹名称，也可以单击文本框右侧的按钮更改
保存位置。 选择是否让别人和你同时编辑同一个网页，该选项主要用于多人同时操作建立的大型网站。本例采用默认值“否”，单击“下一步”
按钮。单击“完成”，完成新建网站的操作，返回Dreamweaver工作窗口。 子项目四： 在网站中添加网页 在浮动面板“文件”项
的“站点”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜单中选择“新建文件”命令 。网页建立以后，名称栏中的“unt
itled.htm”处在选定状态，可直接输入“index.htm”作为新的网页文件名，今后该网页将作为整个网站的主页。网站主页的名
字通常都是“index.htm”或“index.asp”等。 用同样的方法可以建立其他网页 。子项目五： 创建站点地图单击“站点”
选项卡中的“展开以显示本地和远端站点”按钮，展开网站中所有的网页 。单击“站点地图”按钮，从弹出的菜单中选择“地图和文件”命令，打
开“站点地图”窗口。 在窗口右侧文件列表中找到站点下的“index.htm”，用鼠标右键单击该文件名，在弹出的快捷菜单中选择“设成
首页”命令，把“index.htm”设置为这个网站的主页 。拖动标志符号，确定各网页间的关系 。子项目六： 在站点地图中更改网页标
题 网页标题又称网页名字，它指的是浏览该网页时显示在浏览器标题栏中的名字，而不是这个网页的文件名。在“站点地图”窗口中双击“ind
ex.htm”网页文件图标，打开这个网页。单击窗口顶端的“标题”栏，将其中的“无标题文档”字样删除，输入网站主页的标题。保存网页。
关闭网页单击“文件”菜单中的“关闭”命令，或者单击网页编辑窗口右上角的“关闭”按钮，都可关闭这些网页的编辑窗口。项目二 设计网
页的布局 3.2.1 网页布局实例 所谓网页的布局，通俗地说，就是确定网页上的网站标志、导航栏、菜单等元素的位置。不同的网页，各
种网页元素所处的地位不同，它们的位置也就不同。简单划分，网页的布局一般可以分为“厂”字型、“同”字型、标题正文型、分栏型、Flas
h型和封面型等 3.2.2 网页布局注意事项 1.平衡性 2. 对称性3. 对比性4. 疏密度5. 反复性6. 韵律感7. 颜色
搭配 3.2.3 画出网页布局草图 子项目一： 在网页中插入表格 单击“插入”面板的“表格”按钮。输入行列数，以及百分比。 子项
目一： 在网页中插入表格单击表格最下面一行，使光标出现在该行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使
之弹出子菜单，在子菜单中单击“插入行”，可以发现在光标所在行上面插入一个新行。插入列的方法相同。 首先单击鼠标，使光标出现在被删除
行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使之弹出子菜单，在子菜单中单击“删除行”，则该行被删除。删除
累的方法和它相同。拖动鼠标指针同时选中第三行的两个单元格，移动鼠标指针到“属性”面板上，如图3.2.16所示，单击“合并单元格”按
钮，则两个单元格被合并 。单击鼠标，使光标出现在被拆分单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮 。选中“把单
元格拆分”后面的“列”，在“列数”右端的输入栏中输入“2”。单击“确定”按钮，则该单元格被分为两个单元格。 单击鼠标，将光标移动到
要插入表格的单元格中，单击“插入”面板的“表格”按钮，打开“插入表格”对话框。输入“5”行“1”列，单击“确定”按钮 ，嵌套一个表
格。子项目二：使用表格规划网页布局表格被选中后，表格的外框呈黑粗线显示，同时出现3个黑色小正方形，将鼠标指针放在上面拖动，可以更改
表格大小。 单击“宽”右边的按钮，选择“像素”，然后将“100”改成“1010”，在空白处单击鼠标可以发现，表格宽度发生了变化。将
表格框线的宽度更改为“0”，可以发现表格的框线变成虚线，这样在浏览器中，表格将被隐藏 。 项目三： 在布局模式下绘制布局表格 在“
插入”面板中，单击“布局”选项卡 。单击“查看”菜单，在“表格模式”的子菜单中选择“布局模式”。单击绘制“布局表格”按钮，移动鼠标
到编辑区，指针变成状，按住鼠标指针拖动，画出一个绿色的表格 。用同样的方法，在第一个表格的下面再画其他的布局表格 。项目三： 在布
局模式下绘制布局表格子项目四：使用框架规划网页布局框架的一个巨大优势是，当在一个框架页面中单击超链接时，可以在另一个框架页面中显示
内容，而不需要将第一个框架页面中的内容再做一遍。这一点在服务性网站的页面中非常有用。在“插入”面板中的“布局”选项卡中单击“框架”
按钮，在弹出的下拉菜单中选择“上方和下方框架”命令 。在弹出“框架标签辅助功能属性”对话框中可以为每一个框架编写标题，这些标题和网
页是一样的。 将光标置于中间的框架文件中，单击“修改”菜单，在“框架集”的子菜单中选择“拆分左框架”命令， 将其拆分。在默认的情况
下，框架的框线是隐藏的，也就是说，在浏览器中是根本看不到框架存在的。在“属性”面板中，更改边框为“是”，边框宽度为“1” ，可以让
框线显示出来。 框架的保存与单个网页的保存稍有不同，Dreamweaver为每一个框架提供一个“保存”对话框。单击菜单栏上的“文件
”，可以发现“文件”菜单下的“保存”命令变成了“保存框架”和“框架另存为”等。单击“保存框架”命令，可以保存当前光标所在的网页。
项目三 使用文字与图片在网页上浏览时，可以发现，任何一个网页，不论绚丽多彩，还是简洁明了，都含有两个要素，即文字和图片。其中文字是
一个网页最基本的要素，而添加适当的图片，可以令网页生色不少。子项目一： 设置文字的字体、字号与颜色 在“属性”面板中，单击“默认
字体”右端的下拉箭头，在下拉菜单中选择“编辑字体列表”。在弹出的“编辑字体列表”对话框中，选中“可用字体”栏中的中文字体，例如选中
“仿宋_GB2312”，单击“《”，字体出现在“选择的字体”栏中。单击“确定”按钮，“仿宋_GB2312”被加入到“属性”面板的字
体列表下拉菜单中。用同样的方法，将“宋体”、“黑体”、“隶书”、“楷书_GB2312”、“幼圆”等几种字体都添加到“属性”面板的字
体列表下拉菜单中。 选择文字，然后，在“属性”面板中单击“默认字体”下拉框，在下拉列表中选择“楷体GB_2312”，将字体设为楷体
；单击“大小”，在下拉列表中选择“16”，将字体设为16号字。在 “属性”面板中打开颜色面板，选择褐色色块，可以将文字设为褐色。在
“属性”面板中，可以很容易地设置加粗、倾斜等文字风格。子项目二： 设置对齐方式 1.对齐方式 在默认情况下，文字均紧靠在
表格框线上。这样非常影响美观，特别是当相邻单元格都有文字时，显得十分拥挤。 选中整个表格，将“属性”面板中的“填充”值更改为
“10”，则表格中的文字与表格框线的距离变成10像素；将“间距”值更改为“10”，则各个单元格间的距离更改为10像素。 按照中文的
行文习惯，在段落的首行要空两个格。在操作时会发现：在Dreamweaver中，不能像Word一样拖动首行缩进按钮，也不能连续按空格
，Dreamweaver没有这个功能。要实现在段首空两个格，应该切换到代码编辑区，在段首文字前输入代码“ ；”（注意不要漏
掉“；”）。首先需要切换到代码编辑区。单击“查看”菜单，在下拉菜单中选择“代码和设计”命令。这时，窗口分为两部分，上面为HTML代
码编辑区域，下面为普通编辑区域。 在HTML代码编辑区域中，找到要段首缩进的文字，在文字前插入“ ；”（不包括双引号） 。
用鼠标单击“文件”菜单，在下拉菜单中选择“保存”命令，将网页文件保存，单击“查看”菜单，在下拉菜单中选择“设计”命令，切换到设计编
辑区。单击菜单栏上的“文件”，移动鼠标指针到“在浏览器中预览”上，在其下一级菜单中单击“IExplore”。将网页在浏览器中打开，
可以看见每一段首行已经缩进两格 。2.设置行间距当你按回车键换行后，你会发现默认的行间距比较大。这是因为用键盘操作换行有两种方法：
按Enter键和按Enter+Shift组合键。按Enter键，换行的行间距较大；一般换行使用Enter+Shift组合键，这样换
行才是正常行间距。 子项目三： 插入水平线 在网页中插入一条水平线，可以将网页底端的文字与正文分开，可以使网页段落分明。 将光标
移动到合适位置，单击菜单栏上的“插入记录”，然后选择“HTML”子菜单下的“水平线”命令，网页上自动插入一条水平线 。要更改水平线
的颜色，必须通过更改代码来完成。首先选中水平线，然后在水平线上单击鼠标右键，弹出快捷菜单，选择“编辑标签”命令，打开“标签编辑器”
对话框。在 “标签编辑器”对话框中，在左侧窗口选择“浏览器特定的”，右侧窗口选择需要的颜色，单击“确定”按钮即可。注意：更改水平线
颜色以后，在Dreamweaver中不能看到水平线新的颜色，要想看到其新的颜色，必须在浏览器中预览。 子项目四： 插入图片 相关
知识：图片的格式Internet上应用最广泛的图片格式有三种：GIF文件、JPEG文件和PNG文件。GIF（Grappler In
terchange Format ）图片文件是第一种被WWW（World Wide Web）所支持的图形文件，它采用LZW压缩算法
，存储格式从1位到8位，最多支持256种颜色。另外，GIF文件中的GIF89a格式可以存放多张图片，凭借这一功能，使其实现了简单的
动画功能。GIF文件相对体积较小，多数用于图标、按钮、滚动条和背景等的使用。JPEG或JPG称为联合图片专家组（Joint Pho
tograph Expert Group）格式，它主要应用于摄影图片的存储和显示，是一种静态影像压缩标准。和BMP文件、GIF文件
不同，JPEG文件采用有损压缩标准，即在压缩的过程中损失了一些图片信息，而且压缩比越大，损失越大。但这些压缩引起的信息丢失人眼难以
察觉。它是专为有几百万种颜色的图片和图形设计的，它在处理颜色和图形细节方面做得比GIF要好，因而在图片、复杂徽标和图片镜像方面使用
得更为广泛。如图3.28所示，是一些JPEG图片。近几年，PNG（Portable Network Graphic Format）
格式文件又开始流行。它的特点是：只需下载图像的1/64，就可以在网页上显示一个低分辨率的图片，随着图片信息的下载，图片也越来越清晰
。对于网络日益拥挤的今天，这种图片格式显然更受欢迎。插入图片首先确定光标的位置，单击“插入”面板上的“图像”按钮，在弹出的菜单中选
择“图像”，弹出“选择图像源”对话框，再单击“查找范围”，找到相应的图片文件。保存网页时，Dreamweaver会弹出一个对话框，
提示是否将图片保存到网站中。单击“是” ，同时打开复制文件的对话框， 将图片保存到网站中。注意：最好创建“images” 新文件夹
，将图片保存在改文件夹中，否则在根目录下，文件太多，显得凌乱。设置图片 单击图片，使图片被一个矩形框住，同时出现三个小的实心矩形
。鼠标指针指向图片右下角，当鼠标指针变成双向箭头时，拖动鼠标，就可以更改图片的大小。在单击图片时，“属性”面板同时被打开，单击“对
齐”右边的，选择“居中”。在“替代”框中输入图片的说明文字。这样，当鼠标在浏览器中移动到该图片上时，会显示图片说明文字几个字。由于
网络慢等原因，图片不能正常下载时，图片区域会显示替代文字，从而不会影响到网页的整体浏览效果。子项目五： 设置网页背景 图片除了可以
插入到网页的特定位置，帮助文字表达网页的内容外，还可以作为背景图片，美化网页。需要注意的是，一些特殊类型的图片并不能被很好地支持，应该在使用之前通过某些图片编辑软件转换成JPG、GIF、PNG等格式。 背景颜色单击菜单栏上的“修改”，在下拉菜单中单击“页面属性”，打开“页面属性”对话框。“页面属性”对话框中，单击“背景颜色” ，选择一种颜色，将网页背景设置成该颜色。 背景图像在“页面属性”对话框中，单击背景图像栏右边的“浏览”，找到存放图像的文件夹，单击“确定”按钮，打开“选择图像源”对话框。与插入图片的操作一样，在文件夹“网页素材”的子文件夹“图片”中选中要使用的图片文件，单击“确认”，然后将图片保存到网站站点的文件夹“图片”中，返回“页面属性”对话框，单击“确定”按钮， 表格背景在编辑窗口中拖动鼠标选中嵌套表格中的单元格，注意是选中所有单元格，不是选中整个表格。单击“属性”面板上单击右下角的展开箭头，然后单击“背景颜色”后面的，在弹出的调色板中选择一种颜色，单元格背景颜色即被改变。 |
|
