Dreamweaver新建HTML网页

Dreamweaver新建HTML网页
实验2 新建HTML网页
实验要求
通过实验，掌握创建HTML网页的方法，以及如何在网页中输入文本、插入日期和水平线等元素，并在属性面板中进行相应得设置。

说明在web世界中，内容和样式起
着设计网页的重要作用。

在网页上输入、编辑、格式化文本是网络开发者的重要工作之一。

Dreamweaver 提供了必要的工具使用户能够轻松地完成这些任务。

对应知识点：
新建、打开和保存文件的方法
在Dreamweaver中创建标题
输入文本和特殊字符
输入日期和水平线
实验素材
将在网页中显示的Word电子文档一份
实验步骤
1．启动Dreamweaver MX 2004 程序，选择菜单“文件”“新建”命令，打开“新建文档”对话框。

在对话框“常规”标签下选择“类型”列表中的“基本页”选项。

2．随后在中间显示的“基本页”列表中单击“HTML”选项。

如图2-1所示。

3．单击“创建”按钮，完成HTML网页的创建，打开HTML网页进行编辑。

说明在新启动的Dreamweaver MX 2004 程序中间位置，会显示一个快
捷菜单“开始页”面板。

选择中间“创建新项目”列表内的“HTML”选项，可以直接创建HTML 网页。

如图2-2所示。

单击后，打开新建网页的编辑窗口，进行编辑。

图2-1 “新建文档”对话框图2-2 选择HTML 选项
图2-3 选择“新建”命令图2-4 “另存为”对话框
12 Macromedia Dreamweaver MX 2004 试验手册
5.单击“保存”按钮，返回网页编辑窗口，此时可以看到网页名称为变为“page.htm”。

如图２－５所示。

图2-4 保存后网页名称改变
６．切换到中文输入模式，在网页编辑窗口空白处单击，在光标处开始输入文本。

首先，输入网页标题“系统集成———城建信息港网络工程”。

７．拖动鼠标选项中标题文字。

选择菜单“窗口”“属性”命令，打开属性面板。

在属性面板“格式”下拉列表中选择“标题1”；单击“粗体”按钮和“斜体”按钮；单击“文本颜色”按钮，打开调色板，使用吸管选取蓝色（色标值为:
#0033CC）。

如图2-6所示。

此时标题效果和属性面板如图2-7所示。

图2-6 吸取文
本颜色
图2-7 在属性面板中设置标题效果
说明标题是用来分隔和介绍文档的重要部分。

HTML包含6级标题，标题标签的语法为<hn>，其中n代表从1-6的数字。

最大的标题为<h1>, 最小
的是<h6>。

在Dreamweaver中将文本设置为特定的标题大小有两种方法。

无论哪一中方法，用户要首先选定要更改的文本。

如果用户将一个单独的行或段落设计为标题，只需将光标停放在段落中的任意地方就可以了。

8．将光标定位在标题右侧，按Enter键换行。

选择菜单“窗口”“插入”命令，打开插入面板。

9．单击左侧的向下箭头，选择“HTML”选择，切换到HTML面板。

在面板中单击“水平线”按钮按钮，在网页中插入水平线。

如图２－８所示。

图2-8 插入水平线
选中水平线，在属性面板中可以设置水平线的宽、高、对齐方式等。

10．下面需要输入网页的详细内容。

通常我们
可以将以编辑好的Word文档直接导入到网页中。

选择菜单“文件”“导入”“Word 文档”命令，弹出“打开”对话框。

11．在“打开”按钮，Word文档中的内容将立即出现在网页中。

Dreamweaver对于文本编辑所起的作用，就像一个字处理程序。

在段落前面设置中文输出方式为全角，按两次空格键，使段落前空两格。

当文本超出右页边界的时候，文字会自动地换到下一行中。

按Enter键可以结束当前的段落，并开始下一个段落。

13．选中“用户需求分析”小标题，在属性面板“格式”下拉列表中选择“标题３”。

单击属性面板中“编号列表”按钮按钮，文字缩进并显示标题号“１”。

单击属性面板的“列表项目”按钮按钮，打开“列表属性”对话框。

14 Macromedia Dreamweaver MX 2004 实验手册
14．在对话框“样式”下拉列表中选择“大写罗马字母”选项。

如图2-10所示。

单击“确定”按钮，标题号1将变成大写罗马字母I。

图2-9 复制文字内容图2-10 “列表属性”对话框
15．同样对“方案设计、实施”小标题做如上设置，但需要在“列表属性”对话框“开始计数”编辑框内输入“２”，这样就会按序排列，效果如图2-11所示。

图2-11 编号列表效
果
说明编号列表的主要有点是：在连续的段落中，它能自动地产生列表项目的编号，并且当用户进行编辑时，会自动地重新进行编号。

在编号样式中有许多可选项，如小写罗马字母、小写字母、大写字母等。

16．选中“分为下面几个系统”文字后面的若干段落，单击属性面板中“项目列表”按钮按钮。

如图２－１２所示。

此时文字显示效果如图２－１３。

说明在字处理和排版软件中所提到的项目编号列表，在Dreamweaver中称为无序列表。

当被排列项目的顺序不重要时，就可以采用无序列表。

每一个无序列表项目都以一个领头的字符作为开始，行的其它部分被缩进。

默认时，领头的字符是符号；在HTML中，通过CSS样式还可以使用转义字符和自定义项目符号来指定另外两种标志符号，甚至可以使用乳片作为项目符号。

17．选中其它文字内容，在属性面板中选择“大
小”下拉列表中的“14”选项，单位为“像素（px）”。

图2-12 选中段落单击“项目列表”按钮图2-13 项目列表效果
说明字体大小列
表中能够不仅有7种不同的大
小供选择（绝对大小），还可
以选择与页面的基本字体相关的大小（相对大小）。

18．在段落最后，按Enter键换行。

输入文字“最后更新时间：”，单击“插入”面板菜单项，选择“常用”选项，在“常用”面板中单击“日期”按钮按钮，打开“插入日期”对话框。

19．在对话框“星期格式”、“日期格式”、“时间格式”下拉列表中分别选择相应的格式。

如图2-14所示。

图2-14 “插入日期”对话框
说明在“插入日期”对话框中选择“储存时自动更新”多选框，这样每次保存网页后日期会自动显示为最后更新日期。

这对于新闻网页很有必要。

20．单击“确定”按钮，在网页中显示当前日期和时间。

如图2-15所示。

图2-15 网页中插入日期和时间21．在日期后单击，按Enter键换行。

选择“插入”面板的“HTML”选项，单击“水平线”按钮，插入水平线。

16 Macromedia Dreamweaver MX 2004 实验手册
22．按Enter键换行，输入文字“北京企业自动网版权所有”。

选中文字，在属性面板中单击“居中对齐”按钮按钮，使文字显示在网页中间。

23．把光标定位在“版权所有”前，选择菜单“插入”“HTML”“特殊字符”“版权”命令，在文字内插入版权标记。

如图2-16所示。

说明在特殊字符菜单中还有一些经常会用到的字符项，如注册商标、英镑标记、日元标记、欧元标记等。

选择“其他字符”选项，弹出“插入其他字符”对话框，可以插入更多的字符。

如图2-17所示。

在“插入”面板的“文本”选项中同样可以找到这些特殊字符。

图2-16 插入版权标记图2-17 “插入其他字符”对话框
24．选择菜单“文件”“保存”命令，或按Ctrl+S键即可保存网页。

25．选择菜单“文件”“在浏览器中预览”“iexplore”命令，或按F12键，弹出IE浏览器察看完成之后的网页效果。

如图2-18所示
图2-18 浏览网页效果
实验作业
模仿
1．在Dreamweaver MX 2004 编辑窗口下，
创建HTML网页。

2．保存新建网页，在“另存为”对话框中设
置网页名为“page”。

3．在网页内导入Word文档，并在属性面板
中进行文字标题、大小、颜色、
对其方式等文本编辑。

4．在文档中插入水平线。

5．设置编号列表和项目列表。

6．制作版权信息文字，并插入版权标记。

创作
1．本书配套光盘的exp2-3\site02 文件夹提供了许多网页文件。

请根据图2-19~图2-22，创建HTML网页。

着重编辑网页的标题、文本、水平线等内容。

图2-19 标题和文本效果
图2-20 文本属性和时间
图2-21 文本属性
图2-22 文本属性和时间。