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

实训一 创建和管理站点、制作站点首页 实训目标：用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）将文件重命名为“index.html”。 （3）将其设置成首页。 2．重新搭建站点结构 （1）将站点的根文件夹下的4个子文件夹“city”、“novel”、“outspace”和“travel”删除。 （2）在站点的根文件夹下新建2个子文件夹“images”和“webpages”，如下图所示。 在Dreamweaver中打开文件“txt3_1.txt”，并将其另存为index.html。 二、设置index.html网页属性 选择“修改”→“页面属性”，打开“页面属性”对话框。 （一）设置页面外观 在“分类”→“外观”中按下图设置“页面字体”：宋体、“文本颜色”：#034881、“背景颜色”：#B8DCF4。 （二）设置页面标题 在“分类”→“标题/编码”中按下图设置“标题”：畅想未来。 （三）按F12键，保存并预览网页。 三、制作index.html网页 （一）编辑文本 1．编辑网页中的文本。 按下图编辑index.html网页中的文本。 换行标记br的使用 HTML文件中任何位置只要使用了br标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该br标记就是起到换行的标记段落标记p的使用 由p标记所标识和文字，代表同一个段落的文字。在浏览器中不同段落文字间除了换行外有时还会以一行空白加以间隔以便区别出文字的不同段落其语法如下p文字/pbr和p的有什么区别呢？通俗的讲就是，它们在分行的时候br分得行比 p分得行距比较大！在HTML代码中，br是换行符，表示强制性换到下一行。而p则是分段符，相当于回车，等同于两个br。webcourse\chapter03\images中的图象“img3_1.jpg”。注意：要将其复制到站点的“images”文件夹中。 （c）用同样的方法，在第一段下面插入图象“img3_2.jpg”，效果如下图所示。 2．调整图象“img3_1.jpg”、“img3_2.jpg”的对齐方式 （1）使图象“img3_1.jpg”居中对齐。方法：选中图象“img3_1.jpg”，在属性面板中单击“居中对齐”按钮。 （2）使图象“img3_2.jpg”左对齐。方法同上。 3．调整图象“img3_2.jpg”的周边间距 选中图象“img3_2.jpg”，按下图设置图象的垂直边距和水平边距。 4．为图象“img3_2.jpg”添加提示文本：科幻图象 方法：选中图象“img3_2.jpg”，在“属性”面板的“替换”文本框中输入“科幻图象”，然后按回车键。 按F12，保存并预览网页，效果如下图所示。 （三）插入水平线 1．在页面中插入水平线 （1）将插入点置于“设为首页”文本前。 （2）在菜单栏中选择“插入”→“HTML”→“水平线”。 2．修改水平线 将水平线设置成居中对齐、宽：920像素、高：5像素。如下图所示。 3．将水平线的颜色设置为蓝色 （1）选中水平线。 （2）单击“属性”面板右侧的“快速标签编辑器”按钮，打开“快速标签编辑器”，如下图所示，在其中输入“color=”#024918””。 （3）按F12键预览，可以看到水平线变为蓝色了。 （四）插入特殊字符 1．在页面页脚插入版权字符“?”（Ctrl+Alt+c） （1）删除页脚中的“？”。 （2）在菜单栏上选择“插入”→“HTML”→“特殊字符”，从单出的子菜单中选择“版权”。 2．改变栏目颜色 将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文本的颜色设置为与顶端“畅想未来”logo相同的颜色。 方法：先选中文本，然