网页设计与制作
实验指导书
黄石理工学院计算机学院
二○○八年八月二十月
目录
实验一 HTML的基本标志的使用 4学时
实验二 HTML表格、表单与框架标志使用 6学时
实验三 CSS层叠样式表的使用 4学时
实验四网页图像处理与动画制作 6学时
实验五使用Dreamweaver编辑网站 4学时
实验六网站设计与制作 6学时
实验一 HTML的基本标志的使用
【实验目的】
使学生掌握HTML的基本标志的使用方法
掌握Dreamweaver 的基本使用方法,并利用 Dreamweaver 工具制作一个比较完整的网页。
【实验器材】安装有Windows 98/2000/xp;Dreamweaver MX,Flash MX,Fireworks MX;Scape浏览器, 等软件的计算机。
【实验内容】
基本HTML标记符的使用;
Dreamweaver的使用;
本地站点的创建;
网页页面属性设置;
【实验步骤】
一、使用Windows操作系统自带的记事本程序编写一个网页。
要求窗体标题为“这是我的第一个网页”,使用<title>********</title>。HTML文档由head和body两部分组成,使用<head>***</head>和<body>***</body>。用浏览器阅读时要看见4段文字,每段文字的size分别是8、6、4、2,使用<font size="6">***</font>,其中要求每段文字的颜色不同,分别为#00ffff、#882299、#ff0088、#aa,使用<font color="#00ffff">*******</font>,每段文字要求居中排列,使用<p align="center">******</p>。编写完成后用HTML为文件扩展名存盘。
使用浏览器浏览编写的HTML文档。
二、在Dreamweaver中建立本地站点
1、在Dreamweaver文档窗口中,依次单击“站点”菜单→“新建站点”命令或者是在“站点”面板中单击“站点”菜单→“新建站点”命令,打开“站点定义”对话框。如图所示。选择“高级”选项卡建立站点(也可以按“基本”选项卡中的向导进行操作,但不如用“高级”选项卡方便)。
“站点定义”对话框
2、管理本地站点
选择“站点”面板“文件”菜单中对应命令,即可对选取文件进行编辑操作。例如,选择文件后,在“站点”面板中选择“文件”菜单中的“打开”命令,则Dreamweaver在文档窗口中打开该文件(当然最简单的方法是在站点中双击相应的文件图标)。在对站点中的文件或文件夹进行操作时,合理地使用右键快捷菜单能大大加快操作速度。例如,在选中的文件夹上单击鼠标右键,然后选择“新建文件夹”命令,可以在相应文件夹中新建一个文件夹。
3、编辑站点具体操作步骤如下:
在站点面板中单击“站点名称”框右边的下拉列表按钮,在下拉列表中选择“编辑站点”命令,打开“编辑站点”对话框,如图所示。
“编辑站点”对话框
三、使用超级链接实现站内网页的跳转。
使用Dreamweaver建立一个Web站点,在站点内部新建5个HTML页面,分别为首页()、汽车()房产()、运动()、游戏()。
要求在每个页面里分别添加对其它四个页面的链接,保证用户能够在五个页面中正常的跳转。
切换到代码视图认真观察超链接标记的使用方法,在浏览器中测试链接的有效性。
四、图像映射超链接
选中网页中插入的图片,打开属性控制面板,其面板的左下角区域即用于设置图片映像的区域。如图所示。
属性控制面板热区设置工具
选中图中绘制工具:矩形热区绘制工具圆形热区绘制工具多边形热区绘制工具,其中一种,就可以在图片上绘制热区了。当绘制完热区后,属性控制面板中显示出热区的属性,在link栏内输入网址或网页文件名,或点击link栏右侧的文件夹按钮,在打开的对话框中选择一个网页文件作为链接地址。
五、利用Dreamweaver为修改网页的页面属性
打开Dreamweaver,新建一个网页。打开页面属性面板,修改网页的字体、文本颜色、和背景颜色,修改超级链接的颜色和样式,添加网页标题,设置网页跟踪图像。
预览修改后的页面。
【问题讨论】
如果超链接的对象不是某个文件,而是同一个文件中的某个段落区域,该如何编写HTML代码。
如何给网页添加水印效果。
如何给网站添加虚拟目录。
实验二 HTML表格、表单与框架标志使用
【实验目的】使学生掌握表格插入、修改、删除及应用,表单的制作和框架的建立及实际应用。
【实验器材】安装有Windows 98/2000/x
网页设计与制作实验指导书 来自淘豆网m.daumloan.com转载请标明出处.
