电子商务基础之网站建设剖析

《电子商务基础之网站建设剖析》由会员分享，可在线阅读，更多相关《电子商务基础之网站建设剖析（54页珍藏版）》请在金锄头文库上搜索。

1、第6章 Dreamweaver 8基础 6.1 Dreamweaver 8的操作界面 6.2 文档的基本操作 6.3 编辑网页内容 6.4构建网页布局 6.1 Dreamweaver 8的操作界面 vDreamweaver 8的操作界面是由标题栏、菜单栏、 插入栏、文档窗口、状态栏、属性面板以及多个浮 动面板组成，如图2.8所示。 6.1.1 菜单栏 v菜单栏中共包含10个菜单项，分别是【文件】 、【编辑】、【查看】、【插入】、【修改】 、【文本】、【命令】、【站点】、【窗口】 和【帮助】，如图2.9所示，下面逐一介绍每个 菜单的功能。 6.1.2 插入栏 v插入栏包含各种类型的对象，如图像、

2、表格 和层。每个对象都是一段HTML代码，允许 在插入时设置不同的属性，可以通过单击插 入栏中的按钮插入表格，也可以不使用插入 栏而使用插入菜单插入对象。如图2.10所示 。 6.1.3 浮动面板 vDreamweaver 8中的面板统 称为浮动面板，这些面板浮动 于文档窗口之外，如图2.11所 示，若要展开一个面板，单击 面板名称左侧的展开箭头。 vDreamweaver 8提供了多种 面板，可以利用【窗口】的子 菜单命令打开。 6.1.4 【属性】面板 v【属性】面板如图2.12所示，用于显示网页中各个元素的相 关属性，用户可以通过设置【属性】面板中的各选项，对网 页中的各个属性做精确的修

3、改。 v【属性】面板的内容会随当前所选定元素的不同而发生变化 ，在以后的章节中将结合具体的实例来讲述具体的设置。对 于【属性】面板所做的大多数设置会立刻应用到文档窗口中 。但是对于有些属性，则要在属性编辑文本域外单击并按 Enter键，或者按Tab键切换到其他属性才会使更改生效。 6.1.5 文档窗口 v如图2.13所示 是文档窗口， 文档窗口用于 显示当前创建 和编辑的网页 文档。可以在 设计视图、代 码视图、拆分 视图中查看文 档内容。 6.2.1 新建网页 (1)启动Dreamweaver 8软件。选择【文件】|【新建】命令 ，弹出【新建文档】对话框，在对话框中选择【类别】列 表框的【基

4、本页】选项，在【基本页】列表框中选择HTML 选项。 (2)单击【创建】按钮，显示创建的HTML网页编辑窗口。 (4)选择【文件】|【保存】命令，弹出【另存为】对话框， 在【保存在】下拉列表框中选择文件保存路径。在【文件 名】文本框中输入index。 (5)单击【保存】按钮，返回网页编辑窗口新的空白网页创 建完成。 6.2 文档的基本操作 6.2.2 打开网页 v要打开网页，在【文件】面板中展开Dreamweaver 文件夹，然后双击要打开的文件，该网页将出现在 新的文档窗口中；或者在本地电脑上打开网页文档 所在的文件，直接双击即可打开网页文档；或者在 要打开的网页上，单击鼠标右键，在弹出的快

5、捷菜 单中选择【打开】命令，即可打开网页文档。 6.2.3 保存网页 v新建网页后，需要对网页进行保存，在网页制作过 程中需要养成随时保存网页的良好习惯，防止由于 计算机的故障使制作好的网页丢失，造成不必要的 损失。 v(1) 在Dreamweaver编辑窗口中，选择【文件】|【 保存】命令，弹出【另存为】对话框，在对话框中 选择保存网页的位置，在【文件名】文本框中输入 要保存文档的名称index，【保存类型】设置为【* 所有文档(*.htm；)】。 v(2) 单击【保存】按钮，完成网页的保存。 6.2.4 设置页面属性 (1)选择【修改】|【页面属性】命令，弹出【页面属性】对话框，在 对话框

6、可以设置关于整个文档的一些信息，在【外观】选项中可以 设置页面的一些基本属性。在【外观】选项中可以进行如下设置。 (2)在【链接】选项中可以设置与页面链接有关的属性。在【链接】 选项中可以进行如下设置。 (3)在【标题】选项页中可以设置标题字体和颜色的一些属性。在【 标题】选项中可以进行如下设置。 (4)在【标题/编码】选项页中可以设置网页标题和文字编码。在【标 题/编码】选项页中可以进行如下设置。 (5)在【跟踪图像】选项页中可以设置跟踪图像的属性。跟踪图像一 般在设计网页时作为网页背景，用于引导网页的设计。单击文本框 右边的【浏览】按钮，弹出【选择图像源文件】对话框，选择一个 图像作为跟踪

7、图像。拖动【透明度】滑块可以指定图像的透明度， 透明度越高图像显示得越清晰。 (6)设置完成后，单击【确定】按钮。至此，页面属性设置完毕。 6.2.5 站点的建立 v一般来说，制作网站的第一步就是创建一个 本地站点。 v使用“站点定义向导”创建一个名为“宠物情缘 ”的站点。 v具体操作如下所示： 6.2.6 网页文件命名规则 v所有的文件名一律使用英文小写； v不要使用中文命名； v不要在文件名中加入空格； 6.3 编辑网页内容 v文本的输入与格式设置 v插入图像和动画 v制作超链接 3.1 文本的输入与格式设置 3.1.1 输入文本 在Dreamweaver中输入文本的方法非常简单， 只要将

8、光标定位在网页的某个位置，然后输入 文字就可以了。 另外，可以利用剪贴板将外部文本拷贝到网页 中，然后设置其格式和各种属性。 3.1.2 设置文本段落和字符格式 Dreamweaver中的文本格式设置与标准 字处理程序（如Word）类似。用户可以 利用“属性”面板为文本设置默认格式化样 式（段落、标题 1、标题 2等），或者直 接设置所选文本的字体、大小、颜色、 粗体、斜体、对齐方式和列表方式等。 1设置字体列表 Dreamweaver中自带的字体有限，一 般满足不了大多数网页设计者的需求 。我们可以通过设置字体列表来解决 这一问题。 选择 字体 单击添 加字体 2设置文本字体及大小 学会设置

9、字体列表后，就可以随心所欲 地设置文本的字体了。下面就来学习在 属性面板中设置文本字体及大小的方法 。 拖动鼠标 选中文本 设置字体、 大小等属性 3设置段落缩进 通过设置段落缩进格式，可以更好地布 局文档。将光标置于需要设置段落缩进 的任意段落中，然后在属性面板的“格 式”下拉列表中选择“段落”选项，单击“ 文本凸出”按钮 可使段落凸出，单击“ 文本缩进”按钮可使段落缩进。 4设置列表项 列表分为项目列表和编号列表，项目列表常 应用在“列举”类型的文本中，编号列表常应用 在“条款”类型的文本中，这种方式使得文本更 直观、明了。 选中所要设置的文本，然后单击属性面板上 的“项目列表”按钮 ，即

10、可设置列表项。 范例1 设置“公司介绍”网页文本 在学习了文本的输入和格式设置方法后，下面通过一 个小例子来练习和巩固一下这些知识（具体操作如下: 打开火百合网站，在com_a.html网页中进行设置）。 3.1.3 插入水平线和特殊字符 1水平线 水平线对于组织信息和区分版块很有帮助。要 插入水平线，可以选择“插入”“HTML”“水平 线”菜单。 2插入特殊字符 要插入特殊符号，可以选择“插入”“HTML”“特 殊字符”菜单，然后在弹出的菜单中选择相应的 特殊字符。 如果在“特殊字符”菜单下没有找到需要的字符， 可以通过选择该菜单中最下面的“其他字符”命令 打开“插入其他字符”对话框。 3.

11、2 插入图像和动画 3.2.1 插入并设置图像属性 在Dreamweaver中插入图像的方法非常简单， 在确定图像插入点后，单击“常用”插入栏中的“ 图像”按钮，打开“选择图像源文件”对话框，从 中选择要插入的图像，然后单击“确定”按钮即 可。 3.2.2 插入flash动画 确定插入点后，单击“常用”插入栏中的“媒 体：Flash”按钮 ，在弹出的“选择文件”对 话框中选择一个扩展名为.swf的Flash动 画，单击“确定”按钮，Flash动画就被插入 到了页面中。 范例2 在“火百合”主页中插入图像和动画 在学习了图像和动画的应用后，下面通 过一个例子来练习一下这方面的知识（ 具体操作见如

12、下）。 3.3 制作超链接 3.3.1 常规链接 常规超级链接包括内部超级链接和外部超级链接 ，内部超级链接是指目标文件位于站点内部的 链接；外部超级链接可实现网站与网站之间的 跳转，也就是从本网站跳转到其他网站。 1内部链接 内部链接的设置非常灵活，在选中要设置链接的 对象后，可以在属性面板的“链接”文本框中直接 输入要链接到的网址或网页名称；也可以单击属 性面板上“链接”文本框后的文件夹图标 ，在弹出 的“选择文件”对话框中选择要链接到的文件；还 有一种方法是单击并拖动“属性”面板上“链接”文本 框后的 按钮到“文件”面板中的文件上。 2外部链接 外部链接只能采用一种方法设置，就是在 选中

13、对象后，在“属性”面板的“链接”文本框 中输入要链接到的网址。 3.3.2 图片链接和下载链接 设置图片链接和下载链接的方法非常简单，选中 要设置为链接的文字或图片后，只要在“属性”面 板的“链接”文本框中将链接目标设置为图像文件 或压缩文件就可以了。 3.3.3 电子邮件链接 有些网站上留有电子邮件地址，单击该地 址可打开“Outlook Express”的“新邮件”窗口 。这是一种特殊类型的链接，又叫电子邮 件链接，下面看看此类链接的设置方法。 3.3.4 热点链接 如何为一张图片设置多个链接呢？这就 用到了热点。使用热点工具可以将一张 图片划分成多个区域，并为这些区域分 别设置链接。 范

14、例3 为“火百合”网页设置链接 在学习了超链接的设置方法后，下面通 过一个例子，来进一步巩固前面所学知 识（具体操作如下）。 6.4构建网页布局 v使用表格 v使用框架 4.1 使用表格 所谓表格就是由一个或多个单元格构成的 集合，表格中横向的多个单元格称为行， 垂直的多个单元格称为列。行与列的交叉 区域称为单元格，网页中的元素通常都被 放置在这些单元格中，以使其“各安其位”。 此处表示未 明确设置单 元格的宽度 此处显示了表格的宽 度。如果只显示一个 “”符号，表示未明 确设置表格宽度 4.1.1 创建表格 在Dreamweaver中创建表格的方法非常简单， 确定插入点后，单击“常用”插入栏

15、中的“表格”按 钮，打开“表格”对话框。设置各项参数后，单 击“确定”按钮，便可插入表格。 4.1.2 选择表格和单元格 v在Dreamweaver中选择表格的方法非常 简单，只需用鼠标单击表格边框线即可 。 v要选择某个单元格，可首先将光标放置 在该单元格内，然后按【CtrlA】组合 键或者单击“标签选择器”中对应的“” 标签。 v要选择某行或某列，可将光标置于该行 的左侧或该列的顶部，当光标形状变为 黑色箭头 或 时单击鼠标。 4.1.3 设置表格和单元格的属性 选中表格后，使用属性面板可以修改 表格的行、列、宽、高，以及填充、 间距等。 在单元格中单击，属性面板中将显示相应单 元格的属性。 1设置表格和单元格的宽度与高度 制作网页时，很多情况下都需要改变表 格和单元格的宽度与高度，通过拖动边 框或在属性面板的“宽”和“高”文本框中直 接输入数值，就可以非常方便地改变表 格和单元格的宽度与高度。 设置表 格高度 设置单元格“宽 ”和“高” 2为表格和单元格设置背景颜色及背景图像 为表格和单元格设置背景颜色及背景图 像的方法相当简单。 将光标置于 单元格中 单击“背景”文 本框后的文件 夹图标 选择 文件 4.1.4 合并与拆分单元格 1合并单元格 所谓合并单元格，就是将相邻的几个单元格合 并成一个单元格。 拖动鼠标选 中要合并的 单元格 单击“合并所 选单元格