文档介绍：信息学院
本科教学实验讲义
(实验)课程名称:
网页制作与网站设计
贵州财经学院教务处制
2010 年 3 月
目录
实验项目一基础资料的设置 9
一、实验内容、目标及要求 9
(一)实验内容 9
(二)实验目标 9
(三)实验要求 9
二、实验准备 9
(一)运行环境说明 9
(二)基础数据设置及说明 9
三、实验基本操作流程及说明 9
(一)系统界面及说明 9
(二)操作步骤 9
四、实验测评与考核 9
实验项目一
一、实验内容、目标及要求
(一)实验内容
HTML基础知识: HTML定义、基本语法、标记符属性、注释、显示特殊字符
页面背景与颜色控制:页面背景、背景颜色、背景图案、字符和链接的颜色
文本格式: 字符格式、段落格式、分段与换行、段落对齐
插入图象: WEB页图象格式、IMG标记符及其基本属性、图象布局
使用超链接:绝对URL与相对URL、创建各类超链接(指向本地网页的链接、指向其他网页的链接、指向页面中特定部分的链接、指向电子邮件的链接)、图象与超链接
表格:表格的基本标记符、表格的修饰、行组、列组、使用表格设计网页布局
(二)实验目标
解网页设计的基本方法,包含的基本技术,HTML语言的特点和使用方法,并掌握常用HTML标记的使用
(三)实验要求
独立操作,小组合作完成
二、实验准备
(一)运行环境说明
Dreamweaver CS3
(二)基础数据设置及说明
作品带学生姓名
三、实验基本操作流程及说明
(一)系统界面及说明
(二)操作步骤
第一节处理文本
1、段落
<P>开始一个新段落
使用该标签,文本段落间会空出一行。另外对于<P>标志符来说,可不用</P>来做结尾。例:
如果学校中所有学生在某一天都不去上学,那么学校就拿大家没办法了。<P>我的意思是说,如果<i>所有人</i>都呆在家里,校方就无法专门严厉地惩罚某一个学生,实际上也许学校要花费整整一天的时间给每位学生的家长打电话通报这件事。
将显示为:
如果学校中所有学生在某一天都不去上学,那么学校就拿大家没办法了。
我的意思是说,如果所有人都呆在家里,校方就无法专门严厉地惩罚某一个学生,实际上也许学校要花费整整一天的时间给每位学生的家长打电话通报这件事。
2、分行
<br>重起一行,但在新行与上一行之间并不出现一空行。例:
我非常喜欢互联网,<br>在这里我可以足足冲浪一天也不觉得累!<br>幸好我的老板还没有抓到我,<br>如果真被他抓到,恐怕我的工资就要泡汤了!
显示效果:
我非常喜欢互联网。
在这里我可以足足冲浪一天也不觉得累!
幸好我的老板还没有抓到我,
如果真被他抓到,恐怕我的工资就要泡汤了!
3、排列文本
<p align=?>        ?=left、right、center
如:
<p align=left>我喜欢看蜘蛛织网,蜘蛛织出的网太漂亮了!<p align=center> 从另外一角度说,如果我看到家中有一只蜘蛛,我又会立刻把它踩死。<p align=right>有时我也担心,不知这样是否会遭到报应,因为它们并没有招惹你。
在浏览器中将显示为:
我喜欢看蜘蛛织网,蜘蛛织出的网太漂亮了!
从另外一角度说,如果我看到家中有一只蜘蛛,我又会立刻把它踩死。
有时我也担心,不知这样是否会遭到报应,因为它们并没有招惹你。
第二节:超链接
基本形式:<a href="?">创建链接的文字</a>
其中:<a></a>定义一个超链接,href指定了目标网页的URL地址,这个地址可以是形如"网络地址,也可为同一网站下网页的相对路径,还可以是一个电子邮件地址、一个书签(锚点),甚至一个空链接。
一般情况下,凡链接的地方都有下划线,并显示出不同颜色(多数默认情况下链接显示为蓝色,除非对此进行了特殊设置。)。
1、链接到绝对地址
<a href="/">网站</a>!
在浏览器中显示效果为:
网站!
2、链接到相对路径
文件a引用b: url=""
文件e引用a: url="/"
文件a引用e: url="../"
文件a引用c: url="../file2/"
文件a引用d: url="../file2/file/"
文件f引用d: url="/file2/file/"
3、空链接
<a href="#">,提供了一种机制,可将被链接文字做为一个对象看待,用来处理一些事件。
4、链接到命名锚点(书签),即链接到本页面或另一页面的特定位置
锚点的命名方法:在需要插入锚点处加入<a name="锚点名字">