文档介绍：该【Html设计实验报告 】是由【雨林书屋】上传分享，文档一共【46】页，该文档可以免费在线阅读，需要了解更多关于【Html设计实验报告 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。山东信息职业技术学院
《网页设计》实验报告
(2010—2011学年第二学期)
班级:
姓名:
学号:
指导老师:
山东信息职业技术学院《网页设计》实验报告
实验一认识DreamweaverCS3
一、实验目的
1、熟习DreamweaverCS3环境。
2、认识HTML文件构造。
二、实验环境
计算机
三、实验内容
创办站点有两种方式:使用导游有序地进行设置,也许经过在“管理站点"对话框中设置“高级”选项卡信息来创办。无论哪一种方式,都要早先在当地磁盘上建立一个用来存放站点的文件夹,这个文件夹就是当地站点的根目录。下边介绍一下这两种方式的详尽操作步骤。
使用导游建立站点的步骤以下:(1)打开建立站点导游的方法有3种.
①在进入Dreamweaver的初步页界面中选择“新建"→“Dreamweaver站点"命令,以以下图。
②选择“站点”菜单中的“新建站点"命令。
③选择“站点”菜单中的“管理站点"命令,打开以以下图的“管理站点”对话框,执行“新
建”→“站点”命令。
初步页中新建站点“管理站点"对话框
(2)打开“站点定义为”对话框,在“您打算为您的站点起什么名字?”文本框中输入站点名
字,“您的站点的HTTP地址(URL)是什么?”文本框中填入
申请的域名地址。以以下图。
设置站点名和URL地址
-1-
山东信息职业技术学院《网页设计》实验报告
3)单击“下一步”按钮,咨询能否使用服务器技术,以以下图。若是静态站点则选中“否,我不想使用服务器技术”单项选择按钮,若是动向站点可以进一步设置使用哪一种服务器技术。
选择能否使用服务器技术
(4)单击“下一步”按钮,在“您将把文件储存在计算机上的什么地址?”文本框中直接输入
站点根目录的路径,也许单击“阅读”按钮,选择文件夹目录.
(5)单击“下一步”按钮,在“您如何连接到远程服务器?”下拉列表框中选择一种连接到远
程服务器的方式,这里选择“无”选项.
(6)单击“下一步”按钮,将显示前几步设置的总结信息,若需更正可单击“上一步”按钮
返回重新设置,若确立设置则单击“达成”按钮。
站点创办达成后将在“文件”面板中显示出站点的构造和文件。
使用高级设置建立站点的第一步同前,在以以下图的“站点定义为”对话框中切换到“高级”
选项卡,以以下图。在左边的分类中选择“当地信息”选项,而后分别设置“站点名称”、“当地
根文件夹"、“默认图像文件夹”、“HTTP地址”等信息。如有需要还可以在左边的分类中选择其
他项目进行设置,达成今后单击“确立”按钮,即可创办站点。
关于已经创办好的站点,可以执行编写、复制、删除、导出和导入等操作。
假如要重新设置站点的属性,可以执行以下步骤:
(1)单击“站点"→“管理站点”选项.(2)从站点列表中选摘要编写的站点名称,单击“编
辑"按钮。可以参照前面创办站点的方法重新设置站点属性。(3)编写达成后,单击“确立”按钮,
返回到“管理站点"对话框,单击“达成”按钮。
假如要创办多个构造相同或相似的站点,可以利用站点的复制功能,详尽步骤以下:
1)单击“站点”→“管理站点”选项。
2)从列表中选摘要复制的站点名称,单击“复制”按钮。
3)若要对复制的站点进行编写,可以从站点列表中选中新复制的站点,单击“编写”按钮,
-2-
山东信息职业技术学院《网页设计》实验报告
编写达成返回到“管理站点"对话框,单击“达成”按钮。
假如某个站点在Dreamweaver中不再需要编写了可以删除该站点,详尽步骤以下:
1)单击“站点"→“管理站点”选项。
2)从列表中选摘要删除的站点名称,单击“删除"按钮。
3)在弹出的提示对话框中,单击“是”按钮,即可删除选定的站点。四、实验要求
1、认真预习,写出操作步骤。
2、遵守机房纪录,填好设备档案。
3、认真写实验总结,实验步骤。
五、实验总结
DreamweaverCS3创办网站的步骤?
-3-
山东信息职业技术学院《网页设计》实验报告
实验二网页基础练习
一、实验目的
1、掌握html文件的基本构造
2、熟练使用head元素、body元素的各个属性
二、实验环境
计算机
三、实验内容
1、打开“记事本”,,。html为扩展名的web文件,双击该文件,观察显示成效。(注意标题栏的显示内容和正文部分的对齐方式)
2、启动DreamweaverCS3,切换到HTML视图下,达成课本第一章中出现的所有HTML源文件,而后切换到预览视图下观察成效。
3、练习使用导游建立当地站点;练习在“文件”面板中新建目录及文件的操作。达成第一章中
的练习2和练习3
4、登录网站,单击申请空间链接,按其要求认真填写相关注册信息,达成个人免费
空间的申请。(记住自己申请成功的用户名和密码)并利用ftp工具上传所做网页,而后进行测试。
四、实验要求
1、认真预习,写出操作步骤.
2、遵守机房纪录,填好设备档案。
3、认真写实验总结,实验步骤。
五、实验总结
1、HTML文件的基本构造是?
2、如何经过HTML代码实现设置网页的背景颜色?
-4-
山东信息职业技术学院《网页设计》实验报告
实验三文本格式练习
一、实验目的
1、掌握html文件的基本构造
2、熟练使用P、BR、HR、Hn等标志符的基本用法
3、掌握align属性的用法
4、掌握font标志符的用法
二、实验环境
计算机
三、实验内容
1、练习在DreamweaverCS3中新建网页、打开网页、预览网页以及保存网页的方法
2、练习文字的输入,一般文字的输入,特别文字的输入并写出其过程。
3、练习标题的设置,文字字体、颜色、款式、对齐的设置。将网页中文本的标题、作者、正文
设置为不一样的字体、大小,使其看起来拥有层次感;设置所有文本居中对齐,使其看起来更加雅观。成效如图
四、实验步骤
、主要操作步骤以下:
1)启动Dreamweaver,单击“标准”工具栏的“新建"按钮,在弹出的“新建文档"对话框中新建一个基本页HTML文档。
2)单击“更正”→“页面属性”命令,弹出“页面属性”对话框,在“分类”下拉列表
中选择“外观”选项,在“外观”选项区中的“背景图像"文本框中设置背景图片,单击“确立”按钮。
(3)在文档中输入如图1-1所示的文本.
(4)选中标题“偶遇”,在“属性”面板的“字体”下拉列表框中选择“黑体”选项,在“大
小”下拉列表框中选择36,成效如图1—2所示.
-5-
山东信息职业技术学院《网页设计》实验报告
图1—1输入文本图1-2设置标题格式
(5)将标题下“徐志摩”文本的字体设置为隶书,大小为18磅,如图1—3所示。
(6)选中正文文本,将其字体设置为幼圆,大小为16磅,如图1-4所示。
图1-3设置文本图1—4设置正文文本
(7)选中所有文本后在属性面板中单击“居中对齐”按钮使其居中,而后单击“颜色”按
钮,在打开的“颜色”面板中选择深蓝色.
(8)保存文件,选择“文件”→“在阅读器中预览"→IExplore命令对网页进行预览,最后
的成效以以下图。
五、实验要求
1、认真预习,写出操作步骤。
2、遵守机房纪录,填好设备档案。
3、认真写实验总结,实验步骤。
六、实验总结
1、在网页中如何输入多个空格?
2、〈P〉标志与<br>标志的差别是什么?
3、align属性的属性值有哪几个?这个属性可用于哪几个标志?
-6-
山东信息职业技术学院《网页设计》实验报告
实验四列表制作
一、实验目的:
。
。
。
二、实验环境
计算机
三、实验内容
1、在“记事本”顶用HTML语言编写吻合以下要求的webpage1。htm
标题为“网页制作练习”;
阅读器窗口用户区内有两行内容:
第一行:“欢迎抵达web世界!"
第二行:“网上生活今后开始!”(换执行用〈br>标志)
2、。html,(使背景有水印成效),设置页面文字的颜色为紫色,、,
第一行以四级标题(<h4〉)显示:“欢迎抵达web世界!”
第二行以一级标题(<h1〉)显示:“网上生活从这里开始!”
最后插入一条水平线。(<hr>)
4、,存为webpage4。:“我做
的第一个网页”,当阅读者单击“第一个网页"时,可打开网页webpage1。htm
5、:
在文档最后加入一行:“返回”二字
当阅读者单击“返回”时,
6、在网站文件夹下,建立一个子页,标题为“列表练习”,在网页中使用列表进行嵌套列表的制
作。成效所以下图示:
Ⅰ前言
Ⅱ第一部分
说明
B。例子
事例1
事例2
Ⅲ第二部分
Ⅳ总结
-7-
山东信息职业技术学院《网页设计》实验报告
四、实验要求
1、认真预习,写出操作步骤。
2、遵守机房纪录,填好设备档案。
3、认真写实验总结,实验步骤。
五、实验总结
1、第四题创办嵌套列表的html代码?
2、写出下边各种水平线成效的html代码
默认水平线
2)粗为5像素的水平线
3)长度为100像素的水平线
4)长度为屏幕宽度50%的水平线
5)粗为5像素的实心水平线
红色的水平线
-8-
山东信息职业技术学院《网页设计》实验报告
实验五图像和超链接的应用
一、实验目的
1、熟习DreamweaverCS3的编写环境。
2、掌握如何向文档中增加图像和多媒体元素。
3、熟习图像相关属性的设置。
二、实验环境
计算机
三、实验内容
1、练习在网页中插入图像,而且设置图像与文本的环绕,创办网页保存为1。htm
2、制作周庄网页:内容要求
(1)
练习在“周庄”网页中增加图像;
(2)
练习原始图像和鼠标经过图像的增加;
(3)
使用表格对页面进行布局。
图1“周庄"页面
-9-