实训一制作一个简单的网页

实训一创建和管理站点、制作站点首页实训目标：用Dreamweaver制作一个简单的网页

一、用Dreamweaver创建和管理站点

（一）在D盘上创建“畅想未来”站点

在菜单栏中选择“站点”→“新建站点”，在文本框中输入网站的名称“畅想未来”。

（二）对站点进行规划

1．在文件面板中搭建站点的结构

（1）在站点根文件夹下建立4个子文件夹“city”、“novel”、“outspace”和“travel”。在文件面板中右单击站点“畅想未来”，选择“新建文件夹”命令。

（2）在文件夹“city”中建4个子文件夹“images”、“sound”、“swf”和“webpages”。

（3）将文件夹“city”中的4个子文件夹分别复制到“novel”、“outspace”和“travel”中。

方法：依次选中“images”、“sound”、“swf”和“webpages”，然后按住Ctrl键，分别将其拖动到“novel”、

“outspace”和“travel”中。

结果如下图所示。

（二）设置网站首页，重新搭建站点结构

1．设置网站首页

（1）右单击站点的根文件夹，从弹出的快捷菜单中选择“新建文件”命令。（2）将文件重命名为“”。

（3）将其设置成首页。

2．重新搭建站点结构

（1）将站点的根文件夹下的4个子文件夹“city”、“novel”、“outspace”和“travel”删除。

（2）在站点的根文件夹下新建2个子文件夹“images”和“webpages”，如下图所示。

在Dreamweaver中打开文件“”，并将其另存为。

二、设置网页属性

选择“修改”→“页面属性”，打开“页面属性”对话框。

（一）设置页面外观

在“分类”→“外观”中按下图设置“页面字体”：宋体、“文本颜色”：#034881、“背景颜色”：#B8DCF4。

（二）设置页面标题

在“分类”→“标题/编码”中按下图设置“标题”：畅想未来。

（三）按F12键，保存并预览网页。

三、制作网页

（一）编辑文本

1．编辑网页中的文本。

按下图编辑网页中的文本。

换行标记
的使用

HTML文件中任何位置只要使用了
标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该
标记就是起到换行的标记。

段落标记

的使用

由

标记所标识和文字，代表同一个段落的文字。在浏览器中，不同段落文字间除了换行外，有时还会以一行空白加以间隔，以便区别出文字的不同段落，其语法如下：

文字

和

的有什么区别呢通俗的讲就是，它们在分行的时候
分得行比

分得行距比较大！

在HTML代码中，
是换行符，表示强制性换到下一行。而

则是分段符，相当于回车，等同于两个
。

Copyright 2007 - 200x 畅想工作室，All Rights Reserved

如果您对我们的服务有任何意见或建议，请惠赐E-mail至

联系电话：8 联系人：丝雨轻梦

Copyright 2007 - 200x 畅想工作室，All Rights Reserved

如果您对我们的服务有任何意见或建议，请惠赐E-mail至

联系电话：8 联系人：丝雨轻梦

2．设置文本格式

（1）在第一行前输入2个空格，并去掉最后3行之间的空行，如下图所示。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”设置为“标题2”，并为其添加项目符号。

（3）将“设为首页”、“加入收藏”、“联系我们”、“网站管理”设置为“标题5”。（4）将最后4行文本的对齐方式设置为“居中”。

（5）将最后3行文本的颜色设置为灰色（#999999）。

3．添加和删除中文字体

（1）添加“隶书”、“华文行楷”等中文字体。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文字的字体设置为华文行楷。

（3）按F12，保存并预览网页。

（二）在页面中插入和处理图象

1．插入图象

（1）在页面顶端插入图象“”。

（a）将光标置于页面左上角的起始处，然后按回车键，生成一个空行。

（b）在菜单栏中选择“插入”→“图象”命令，找到素材文件夹webcourse\chapter03\images中的图象“”。注意：要将其复制到站点的“images”文件夹中。

（c）用同样的方法，在第一段下面插入图象“”，效果如下图所示。

2．调整图象“”、“”的对齐方式

（1）使图象“”居中对齐。方法：选中图象“”，在属性面板中单击“居中对齐”按钮。

（2）使图象“”左对齐。方法同上。

3．调整图象“”的周边间距

选中图象“”，按下图设置图象的垂直边距和水平边距。

4．为图象“”添加提示文本：科幻图象

方法：选中图象“”，在“属性”面板的“替换”文本框中输入“科幻图象”，然后按回车键。按F12，保存并预览网页，效果如下图所示。

（三）插入水平线

1．在页面中插入水平线

（1）将插入点置于“设为首页”文本前。

（2）在菜单栏中选择“插入”→“HTML”→“水平线”。

2．修改水平线

将水平线设置成居中对齐、宽：920像素、高：5像素。如下图所示。