实训一 制作一个简单的网页_制作一个简单的网页
实训一 制作一个简单的网页由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“制作一个简单的网页”。
实训一 创建和管理站点、制作站点首页
实训目标：用Dreamweaver制作一个简单的网页
一、用Dreamweaver创建和管理站点
（一）在D盘上创建“畅想未来”站点
在菜单栏中选择“站点”→“新建站点”，在文本框中输入网站的名称“畅想未来”。
（二）对站点进行规划
1．在文件面板中搭建站点的结构
（1）在站点根文件夹下建立4个子文件夹“city”、“novel”、“outspace”和“travel”。在文件面板中右单击站点“畅想未来”，选择“新建文件夹”命令。
2）在文件夹“city”中建4个子文件夹“images”、“sound”、“swf”和“webpages”。
3）将文件夹“city”中的4个子文件夹分别复制到“novel”、“outspace”和“travel”中。6（（方法：依次选中“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网页中的文本。
换行标记的使用
HTML文件中任何位置只要使用了标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该标记就是起到换行的标记。段落标记
的使用
由
标记所标识和文字，代表同一个段落的文字。在浏览器中，不同段落文字间除了换行外，有时还会以一行空白加以间隔，以便区别出文字的不同段落，其语法如下：
文字
和的有什么区别呢？通俗的讲就是，它们在分行的时候分得行比
分得行距比较大！
在HTML代码中，是换行符，表示强制性换到下一行。而
则是分段符，相当于回车，等同于两个。
Copyright ? 2007200x 畅想工作室，All Rights Reserved 如果您对我们的服务有任何意见或建议，请惠赐E-mail至:teach_ie@163.com 联系电话：0755-12345678 联系人：丝雨轻梦
2．设置文本格式
（1）在第一行前输入2个空格，并去掉最后3行之间的空行，如下图所示。
（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”设置为“标题2”，并为其添加项目符号。
（3）将“设为首页”、“加入收藏”、“联系我们”、“网站管理”设置为“标题5”。（4）将最后4行文本的对齐方式设置为“居中”。（5）将最后3行文本的颜色设置为灰色（#999999）。
3．添加和删除中文字体
（1）添加“隶书”、“华文行楷”等中文字体。
（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文字的字体设置为华文行楷。
（3）按F12，保存并预览网页。
（二）在页面中插入和处理图象
1．插入图象
（1）在index.html页面顶端插入图象“img3_1.jpg”。
（a）将光标置于页面左上角的起始处，然后按回车键，生成一个空行。
（b）在菜单栏中选择“插入”→“图象”命令，找到素材文件夹webcoursechapter03images中的图象“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相同的颜色。
方法：先选中文本，然后在文本的“属性”面板上单击“文本颜色”按钮，拖动鼠标移动滴管到所要设置的颜色上单击即可，如下图所示。
至此，本页面已完成，完成后的效果如下。
四、实训总结
（一）本实训介绍了利用Dreamweaver创建站点的方法
1．建立站点，首先要规划站点结构，然后创建站点。2．其中重点介绍了利用“文件”面板管理站点文件的方法。
（二）制作一个简单的网页
1．设置页面属性 2．网页中的基本元素
（1）在网页中编辑文本 字体格式和段落格式（2）在网页中插入图片 图片格式的设置
（3）在网页中插入水平线 水平线格式的设置
（4）在网页中插入特殊字符
五、作业
参照提供的作业结果，利用所给的素材文件，制作一个介绍台湾音乐团体“信乐团”的网站，要求如下：
1．在Dreamweaver创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中。2．新建index.html文件，设置页面背景图象为bg.jpg，网页标题为“信乐团”。3．插入基本页面元素，包括文本、图象、水平线和日期对象，效果如下图所示。
4．对图象进行适当的调整，包括大小、对齐方式、与周边对象的距离及环绕方式等，效果如下图所示。5．对文本设置相应的字符格式和段落格式，效果如下图所示。
《网站设计与制作》实训报告X学院XX班XXX号一．实训时间：2010年6月7日到2010年6月13日二．实训地点：XXX学院XXX班级三．实训组员：XXX、XXX四．实训目标：运用网页设计方法，设计一个网站，提......
一周的网站规划实训又结束了，在这短短的一周实训中，我们每一个学生都受益匪浅。时间过得真快呀，这也是这学期我们最后一次在学校里的实训，每一个同学都怀着饱满的热情，都在积极紧......
网页实训报告新闻系统前后台交互组长：组员：指导老师：实训目的………………………………………………………………………2 项目思路………………………………………………………......
项目名称：站点的建立任课教师：翟英杰分组情况：1人/组实训指导老师：翟英杰实训时间：2010年9月7日星期二5、6（7、8）节；实训目的及理论依据：熟悉网页制作基本流程和dw基本界面实训要求及......
《网页设计与制作》实习报告指导老师：实习地点：实习时间：实习班级：学生姓名：一、实习目的① 学会制作新闻发布系统。② 学会制作在线调查系统。③ 熟悉购物网站的主要功能和栏目......
