Html设计实验报告
信息职业技术学院
《网页设计》实验报告（2010—2011学年第二学期）
班级：
姓名：
学号：
指导老师：
实验一认识Dreamweaver CS3
一、实验目的
1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境
计算机
三、实验容
创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点
使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入站点名字，如travel。若已申请域名则可以在“您的站点的HTTP地址（URL）是什么？”文本框中填入申请的域名地址。如图所示。
设置站点名和URL地址
（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术
（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器？”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
站点创建完成后将在“文件”面板中显示出站点的结构和文件。
2．使用高级设置建立站点
使用高级设置建立站点的第一步同前，在如图所示的“站点定义为”对话框中切换到“高级”选项卡，如图所示。在左边的分类中选择“本地信息”选项，然后分别设置“站点名称”、“本地根文件夹”、“默认图像文件夹”、“HTTP地址”等信息。若有需要还可以在左边的分类中选择其他项目进行设置，完成以后单击“确定”按钮，即可创建站点。
对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。
1．编辑站点
如果要重新设置站点的属性，可以执行以下步骤：
（1）单击“站点”→“管理站点”选项。（2）从站点列表中选择要编辑的站点名称，单击“编辑”按钮。可以参考前面创建站点的方法重新设置站点属性。（3）编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮。
2．复制站点
如果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下：
（1）单击“站点”→“管理站点”选项。
（2）从列表中选择要复制的站点名称，单击“复制”按钮。
（3）若要对复制的站点进行编辑，可以从站点列表中选中新复制的站点，单击“编辑”按钮，编辑完成返回到“管理站点”对话框，单击“完成”按钮。
3．删除站点
如果某个站点在Dreamweaver中不再需要编辑了可以删除该站点，具体步骤如下：
（1）单击“站点”→“管理站点”选项。
（2）从列表中选择要删除的站点名称，单击“删除”按钮。
（3）在弹出的提示对话框中，单击“是”按钮，即可删除选定的站点。
四、实验要求
1、认真预习，写出操作步骤。
2、遵守机房纪录，填好设备档案。
3、认真写实验总结，实验步骤。
五、实验总结
Dreamweaver CS3创建的步骤？
实验二网页基础练习
一、实验目的
1、掌握html文件的基本结构
2、熟练使用head元素、body元素的各个属性
二、实验环境
计算机
三、实验容
1、打开“记事本”，输入课本P5图1.3所示代码，保存为以.htm或.html为扩展名的web文件，双击该文件，观察显示效果。（注意标题栏的显示容和正文部分的对齐方式）
2、启动Dreamweaver CS3,切换到HTML视图下,完成课本第一章中出现的所有HTML 源文件,然后切换到预览视图下观察效果。
3、练习使用向导建立本地站点；练习在“文件”面板中新建目录及文件的操作。完成第一章中的练习2和练习3
4、登录,单击申请空间，按其要求认真填写相关注册信息，完成个人免费空间的申请。（记住自己申请成功的用户名和密码）并利用ftp工具上传所做网页，然后进行测试。
四、实验要求
1、认真预习，写出操作步骤。
2、遵守机房纪录，填好设备档案。
3、认真写实验总结，实验步骤。
五、实验总结
1、HTML文件的基本结构是？
2、如何通过HTML代码实现设置网页的背景颜色？
实验三文本格式练习
一、实验目的
1、掌握html文件的基本结构
2、熟练使用P、BR、HR、Hn等标记符的基本用法
3、掌握align属性的用法
4、掌握font标记符的用法
二、实验环境
计算机
三、实验容
1、练习在Dreamweaver CS3中新建网页、打开网页、预览网页以及保存网页的方法
2、练习文字的输入，普通文字的输入，特殊文字的输入并写出其过程。
3、练习标题的设置，文字字体、颜色、样式、对齐的设置。将网页中文本的标题、作者、正文设置为不同的字体、大小，使其看起来具有层次感；设置所有文本居中对齐，使其看起来更加美观。效果如图
四、实验步骤
3、主要操作步骤如下：
（1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。
（2）单击“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置背景图片，单击“确定”按钮。
（3）在文档中输入如图1-1所示的文本。
（4）选中标题“偶遇”，在“属性”面板的“字体”下拉列表框中选择“黑体”选项，在“大小”下拉列表框中选择36，效果如图1-2所示。