Html设计实验报告.doc

《网页设计》实验报告 （2010—2011学年第二学期） 班 级： 姓 名： 学 号： 指导老师： 实验一 认识Dreamweaver CS3 一、实验目的 1、熟悉Dreamweaver CS3环境。 2、了解HTML文件结构。 二、实验环境 计算机 三、实验内容 创建站点有两种方式：使用向导地进行设置，或者通过在管理站点中设置高级选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。下面介绍一下这两种方式的具体操作步骤。1．使用向导建立站点 使用向导建立站点的步骤如下：打开建立站点向导的方法有3种在进入Dreamweaver的起始页界面中选择新建→“Dreamweaver站点，如图所示。 选择站点菜单中的新建站点命令。 选择站点菜单中的管理站点命令，打开如图所示的管理站点对话框，执行新建→“站点。 起始页中新建站点管理站点对话框打开站点定义为对话框，在您打算为您的站点起什么名字文本框中输入站点名字，如travel。若已申请域名则可以在您的站点的HTTP地址（URL）是什么？框中填入申请的域名地址。如图所示。 设置站点名和URL地址单击下一步按钮，询问是否使用服务器技术，若是静态站点则选否，我不想使用服务器技术，若是动态站点可以进一步设置使用哪一种服务器技术。 选择是否使用服务器技术 单击下一步按钮，在您将把文件存储在计算机上的什么位置？文本框中直接输入站点根目录的路径，或者单击按钮，选择文件夹目录。 （5）单击下一步按钮，在您如何连接到远程服务器框中选择一种连接到远程服务器的方式，这里选择无单击下一步按钮，将显示前几步设置的总结，若需修改可单击上一步按钮返回重新设置，若确定设置则单击完成按钮站点创建完成后将在文件面板中显示出站点的结构和文件2．使用高级设置建立站点 使用高级设置建立站点的第一步同前，在如图所示的站点定义为对话框中切换到高级选项卡，如图所示。在左边的分类中选择本地信息，然后分别设置站点名称、本地根文件夹、默认图像文件夹、HTTP地址等信息。若有需要还可以在左边的分类中选择其他项目进行设置，完成以后单击确定按钮，即可创建站点。对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。1．编辑站点 如果要重新设置站点的属性，可以执行以下步骤： 单击站点→“管理站点。从站点列表中选择要编辑的站点名称，单击编辑按钮。可以参考前面创建站点的方法重新设置站点属性。编辑完毕后，单击确定按钮，返回到管理站点对话框，单击完成按钮。2．复制站点 如果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下： 单击站点→“管理站点。 从列表中选择要复制的站点名称，单击复制按钮。 若要对复制的站点进行编辑，可以从站点列表中选中新复制的站点，单击编辑按钮，编辑完成返回到管理站点对话框，单击完成按钮。3．删除站点 如果某个站点在Dreamweaver中不再需要编辑了可以删除该站点，具体步骤如下： 单击站点→“管理站点。 从列表中选择要删除的站点名称，单击删除按钮。在弹出的提示对话框中，单击是按钮，即可删除选定的站点。练习使用向导建立本地站点；练习在文件面板中新建目录及文件的操作将网页中文本的标题、作者、正文设置为不同的字体、大小，使其看起来具有层次感；设置所有文本居中对齐，使其看起来更加美观。 四、实验步骤 3、主要操作步骤如下： （1）启动Dreamweaver，单击标准工具栏的新建按钮，在弹出的新建文档对话框中新建一个基本页HTML文档。 单击修改→“页面属性命令，弹出页面属性对话框，在分类下拉列表中选择外观选项，在外观选项区中的背景图像文本框中设置背景图片，单击确定按钮在文档中输入图所示的文本。 选中标题偶遇，在属性面板的字体下拉列表框中选择黑体选项，在大小下拉列表框中选择36，效果如图所示。 图输入文本图设置标题格式将标题下徐志摩文本的字体设置为隶书，大小为18，如图所示。 选中正文文本，将其字体设置为幼圆，大小为16，如图所示。 图设置文本图设置正文文本选中所有文本后在属性面板中单击居中对齐按钮使其居中，然后单击按钮，在打开的颜色面板中选择深蓝色。保存文件，选择文件→“在浏览器中预览→IExplore命令对网页进行预览，最终效果如图所示。1)默认水平线 2)粗为 5 像素的水平线 3)长度为100像素的水平线 4)长度为屏幕宽度 50% 的水平线 5)粗为 5 像素的实心水平线