整理Html设计实验报告.pptxVIP

;山东信息职业技术学院《网页设计》实验报告 实验一 认识 Dreamweaver CS3 一、实验目的 1、熟悉 Dreamweaver CS3 环境。 2、了解 HTML 文件结构。 二、实验环境 计算机 三、实验内容 创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高 级”选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹， 这个文件夹就是本地站点的根目录。下面介绍一下这两种方式的具体操作步骤。 1．使用向导建立站点 使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有 3 种。 ①在进入Dreamweaver 的起始页界面中选择“新建”→“Dreamweaver 站点”命令，如图所 示。 ②选择“站点”菜单中的“新建站点”命令。 ③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新 建”→“站点”命令。;山东信息职业技术学院《网页设计》实验报告 （3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。若是静态站点则选中“否， 我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。; ; ;山东信息职业技术学院《网页设计》实验报告 实验三 文本格式练习 一、实验目的 1、掌握 html 文件的基本结构 2、熟练使用 P、BR、HR、Hn 等标记符的基本用法 3、掌握align 属性的用法 4、掌握 font 标记符的用法 二、实验环境 计算机 三、实验内容 1、练习在 Dreamweaver CS3 中新建网页、打开网页、预览网页以及保存网页的方法 2、练习文字的输入，普通文字的输入，特殊文字的输入并写出其过程。 3、练习标题的设置，文字字体、颜色、样式、对齐的设置。将网页中文本的标题、作者、正文 设置为不同的字体、大小，使其看起来具有层次感；设置所有文本居中对齐，使其看起来更加美 观。效果如图 四、实验步骤 3、主要操作步骤如下： 启动 Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对 话框中新建一个基本页 HTML 文档。 单击“修改”→“页面属性”命令，弹出“页面属???”对话框，在“分类”下拉列表 中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置背景图片，单击“确定” 按钮。 在文档中输入如图 1-1 所示的文本。 选中标题“偶遇”，在“属性”面板的“字体”下拉列表框中选择“黑体”选项，在“ 大小”下拉列表框中选择 36，效果如图 1-2 所示。 ;山东信息职业技术学院《网页设计》实验报告; ;- 8 -;山东信息职业技术学院《网页设计》实验报告 实验五 图像和超链接的应用 一、实验目的 1、熟悉 Dreamweaver CS3 的编辑环境。 2、掌握如何向文档中添加图像和多媒体元素。 3、熟悉图像相关属性的设置。 二、实验环境 计算机 三、实验内容 1、练习在网页中插入图像，并且设置图像与文本的环绕，创建网页保存为 1.htm ;山东信息职业技术学院《网页设计》实验报告 3、课本 P34 页 图 3.2 4、课本 P36 页 图 3.4 5、 创建热区超链接，效果图如下： ;山东信息职业技术学院《网页设计》实验报告 （8）设置后的“插入鼠标经过图像”对话框如图 4 所示，单击“确定”按钮关闭对话框。 ;山东信息职业技术学院《网页设计》实验报告 实验六 表格基本练习 一、实验目的 1、掌握 HTML 代码创建表格的基本步骤； 2、熟练表格属性的设置 3、掌握 Dreamweaver 创建表格的方法 二、实验内容 1、新建一个文档，然后在文档中创建一个 4×6 列的表格。其中含有标题行和数据行。如下图： 学生情况表 ;山东信息职业技术学院《网页设计》实验报告 3、利用表格，完成如下的页面制作： ; ;;山东信息职业技术学院《网页设计》实验报告;山东信息职业技术学院《网页设计》实验报告 实验八 创建框架网页 一、实验目的： 掌握利用框架进行页面布局。 掌握在框架中打开网页 二、实验环境 计算机 三、实验内容 1.制作精美散文框架页面 思路要求：先制作主体框架页面，再制作框架各区域页面，最后设置链接和背景图片。 效果图： ;山东信息职业技术学院《网页设计》实验报告 （3）向框架各区域输入文字，上方框架内输入“精美散文”，左方框架内输入散文名，如图 2 所示。 ;山东信息职业技术学院《网页设计》实验报告;山东信息职业技术学院《网页设计》实验报告 实验九 表单的创建