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

1、实训一 创建和管理站点、制作站点首页实训目标：用Dreamweaver制作一个简单的网页一、用Dreamweaver创建和管理站点（一）在D盘上创建“畅想未来”站点在菜单栏中选择“站点”“新建站点”，在文本框中输入网站的名称“畅想未来”。（二）对站点进行规划1在文件面板中搭建站点的结构（1）在站点根文件夹下建立4个子文件夹“city”、“novel”、“outspace”和“travel”。在文件面板中右单击站点“畅想未来”，选择“新建文件夹”命令。（2）在文件夹“city”中建4个子文件夹“images”、“sound”、“swf”和“webpages”。（3）将文件夹“city”中的4个子

2、文件夹分别复制到“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）在站点的根文件

3、夹下新建2个子文件夹“images”和“webpages”，如下图所示。在Dreamweaver中打开文件“txt3_1.txt”，并将其另存为index.html。二、设置index.html网页属性选择“修改”“页面属性”，打开“页面属性”对话框。（一）设置页面外观在“分类”“外观”中按下图设置“页面字体”：宋体、“文本颜色”：#034881、“背景颜色”：#B8DCF4。（二）设置页面标题在“分类”“标题/编码”中按下图设置“标题”：畅想未来。（三）按F12键，保存并预览网页。三、制作index.html网页（一）编辑文本1编辑网页中的文本。按下图编辑index.html网页中的文本。换

4、行标记的使用HTML文件中任何位置只要使用了标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该标记就是起到换行的标记。段落标记的使用由标记所标识和文字，代表同一个段落的文字。在浏览器中，不同段落文字间除了换行外，有时还会以一行空白加以间隔，以便区别出文字的不同段落，其语法如下：文字和的有什么区别呢？通俗的讲就是，它们在分行的时候分得行比 分得行距比较大！在HTML代码中，是换行符，表示强制性换到下一行。而则是分段符，相当于回车，等同于两个。Copyright ? 2007 - 200x 畅想工作室， All Rights Reserved 如果您对我们的服务有任何意见或建议，请惠

5、赐E-mail至:teach_ie 联系电话联系人：丝雨轻梦Copyright ? 2007 - 200x 畅想工作室， All Rights Reserved如果您对我们的服务有任何意见或建议，请惠赐E-mail至:teach_ie联系电话联系人：丝雨轻梦2设置文本格式（1）在第一行前输入2个空格，并去掉最后3行之间的空行，如下图所示。（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”设置为“标题2”，并为其添加项目符号。（3）将“设为首页”、“加入收藏”、“联系我们”、“网站管理”设置为“标题5”。（4）

6、将最后4行文本的对齐方式设置为“居中”。（5）将最后3行文本的颜色设置为灰色（#999999）。3添加和删除中文字体（1）添加“隶书”、“华文行楷”等中文字体。（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文字的字体设置为华文行楷。（3）按F12，保存并预览网页。（二）在页面中插入和处理图象1插入图象（1）在index.html页面顶端插入图象“img3_1.jpg”。（a）将光标置于页面左上角的起始处，然后按回车键，生成一个空行。（b）在菜单栏中选择“插入”“图象”命令，找到素材文件夹webcoursechapter03images中的图象“img3_1.j

7、pg”。注意：要将其复制到站点的“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”，在“属性

8、”面板的“替换”文本框中输入“科幻图象”，然后按回车键。按F12，保存并预览网页，效果如下图所示。（三）插入水平线1在页面中插入水平线（1）将插入点置于“设为首页”文本前。（2）在菜单栏中选择“插入”“HTML”“水平线”。2修改水平线将水平线设置成居中对齐、宽：920像素、高：5像素。如下图所示。3将水平线的颜色设置为蓝色（1）选中水平线。（2）单击“属性”面板右侧的“快速标签编辑器”按钮，打开“快速标签编辑器”，如下图所示，在其中输入“color=”#024918”。（3）按F12键预览，可以看到水平线变为蓝色了。（四）插入特殊字符1在页面页脚插入版权字符“”（Ctrl+Alt+c）（1）

9、删除页脚中的“？”。（2）在菜单栏上选择“插入”“HTML”“特殊字符”，从单出的子菜单中选择“版权”。2改变栏目颜色将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文本的颜色设置为与顶端“畅想未来”logo相同的颜色。方法：先选中文本，然后在文本的“属性”面板上单击“文本颜色”按钮，拖动鼠标移动滴管到所要设置的颜色上单击即可，如下图所示。至此，本页面已完成，完成后的效果如下。四、实训总结（一）本实训介绍了利用Dreamweaver创建站点的方法1建立站点，首先要规划站点结构，然后创建站点。2其中重点介绍了利用“文件”面板管理站点文件的方法。（二）制作一个简单的网页1设置页面属性2网页中的基本元素（1）在网页中编辑文本字体格式和段落格式（2）在网页中插入图片图片格式的设置（3）在网页中插入水平线水平线格式的设置（4）在网页中插入特殊字符五、作业参照提供的作业结果，利用所给的素材文件，制作一个介绍台湾音乐团体“信乐团”的网站，要求如下：1在Dreamweaver创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中。2