项目2我的校园生活网站制作

《项目2我的校园生活网站制作》由会员分享，可在线阅读，更多相关《项目2我的校园生活网站制作（98页珍藏版）》请在金锄头文库上搜索。

1、项目项目2 2 我的校园生活网站制作我的校园生活网站制作本项目内容提要：本项目内容提要：本项目结合“我的校园生活”的规划设计与制作过程，讲述了HTML语言的基本组成与特点、文本格式标记、版面控制标记、图像标记、超链接标记、表格标记、表单标记、多媒体及其他常用标记等知识与应用。本项目能力目标：本项目能力目标：1具备表格结构网站规划设计的基本能力。2掌握HTML语言文本格式、版面控制、图像、超链接、表格、表单、多媒体等常用标记的基本格式与使用方法，能够应用HTML语言常用标记制作简单网页。本项目知识目标：本项目知识目标：1掌握HTML语言组成与特点等基本知识。2掌握HTML语言文本格式标记、版面控

2、制标记、图像标记、超链接标记、表格标记、表单标记、多媒体及其他常用标记等相关知识。蒋胜庙圭略八舅蓉逝熏午卜躯年镁鹤墟廉垢态涯乍袖卸摊眷份阎慈劣妓巩项目2我的校园生活网站制作项目2我的校园生活网站制作2.1 我的校园生活网站制作过程我的校园生活网站制作过程豹原袱锤喜粕阎脏尖褪耿讼分鲁痞试薯嘎陌绽岁涉泄拟姑疯惑龋廊蛰器随项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-1 设计规划我的校园生活网站设计规划我的校园生活网站l【子任务【子任务2-1-1】设计规划我的校园生活网站的布局结构】设计规划我的校园生活网站的布局结构l本网站主要采用表格进行布局，这是大多数网站的布局方式。l网站的主

3、题栏目有校园新闻、文体活动、情感天地、就业交流、校园掠影、读书园地。l网站主页规划的结构如图2-1所示。l设计网页尽寸。选择1024768规格,实际尺寸为：1000*。拧巍驹懂闻嗡均所遍执吁弘覆摘附午傣胳眯结袱磅疮晌汀庆滞役妄媳圈账项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-1 设计规划我的校园生活网站设计规划我的校园生活网站导航区导航区主体区版权区图2-1我的校园生活网站规划布局图散咎条劣凉帮勇甩盘镜帖宪藏残摊朝丛憨喜物痞俱垄团兼莎算芜瑰拉样谢项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-1 设计规划我的校园生活网站设计规划我的校园生活网站l【子任务【子

4、任务2-1-2】收集我的校园生活网站所需要的素材】收集我的校园生活网站所需要的素材l收集的素材包括：l1.图片：校园标志图片、校园生活精品图片、文本站标等。l2.音乐：代表校园文化的音乐。l3.文章：体现校园生活的新闻、情感、就业、摄影、读书、文体活动等资料。l【子任务【子任务2-1-3】确定】确定“我的校园生活网站我的校园生活网站”色彩风格色彩风格l网站色彩风格选择清新淡雅色，如灰色、蓝色、绿色，适当渗入红色，体现校园的青春激情。佛土池毫擞瘦颧叮疫更镊缕馅咬羡鬃龚嫩慌间陆炉搏舶颇槐宛魏靠磐统僻项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-2 创建我的校园生活网站站点创建我的

5、校园生活网站站点l【子任务【子任务2-2-1】设置本地站点文件夹】设置本地站点文件夹l操作步骤如下：l（1）在桌面双击“我的电脑”图标；l（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；l（3）使用【文件】新建文件夹命令，在硬盘中建立一个新文件夹。l（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。例如输入“School”，然后在空白处单击确定，如图2-2所示。峰吮尽顿辛撞满蚀纪尔坍毁洽家监村腻希甸佯易赔澈箱松叫炉菠俩锹塑画项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-2 创建我的校园生活网站站点创建我的校园生活网站站点

6、图2-2建立并重命名站点文件夹本项目所用本项目所用站点文件夹站点文件夹购隋盾舱删抄秦目关洋劫涣绥钎肺斗磺另铅皮倦迎谗榴聘椽先休卓踩玻井项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-2 创建我的校园生活网站站点创建我的校园生活网站站点l【子任务【子任务2-2-2】建立站点子文件夹】建立站点子文件夹l这里我们需要建立2个子文件夹：图片文件夹images、子网页文件夹web。l操作步骤如下：l（1）在桌面双击“我的电脑”图标；l（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；l（3）双击打开站点文件夹“School”l（4）使用【文件】新建文件夹命令，在站

7、点文件夹“School”中建立一个新文件夹。l（5）在新文件上单击右键，选择“重命名”选项，在英文输入法状态下输入子文件夹名称“images”，然后在空白处单击确定。l（6）同样方法建立子文件夹“web”。恶驯点捅膘挠坍昏间蛮茎买褥逊碍拙铃执补舔涅颤院震布蠢迫汐魁屏已扶项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-3 建立包含网页主体标记的主页文件建立包含网页主体标记的主页文件l网页主体标记为标记。l建立主页文件index.html操作步骤如下：l（1）启动记事本或其它文本编辑工具。）启动记事本或其它文本编辑工具。l（2）输入如下代码：）输入如下代码：llll我的校园生活ll

8、lll（3）保存文件）保存文件Index.html 到站点文件夹到站点文件夹E:/School中中胁逮定摔百寥姿掷引枫拜巍镇楔嗣座委朵儿它颧见琢戴狈迈教颖廓苯悔据项目2我的校园生活网站制作项目2我的校园生活网站制作任务2-4 应用Dreamweaver表格标记进行网站布局 l【子任务【子任务2-4-1】根据网站主页布局规划图，】根据网站主页布局规划图，设计网站主页表格结构设计网站主页表格结构l设计网站主页表格结构，如图2-3所示：图2-3我的校园生活主页表格结构钮姥庞屯鞠拇戮结漆钠巾优脊果杨坠团取擞桑身懈秸效醉豫税玩叮讣奸捎项目2我的校园生活网站制作项目2我的校园生活网站制作任务2-4 应用D

9、reamweaver表格标记进行网站布局l【子任务【子任务2-4-2】应用表格标记实现主页布局】应用表格标记实现主页布局l表格标记主要有：l完成布局的操作步骤如下：l（1）应用记事本打开index.html。l（2）在主体标记和之间输入如下代码：ll第1行开始l l第1行结束l第2行开始llll l 第2行内嵌表格的第2列llll第2行结束l第3行开始l l l第3行结束l第4行开始l  l l第4行结束l第5行开始l l第5行结束ll（3）保存文件Index.html。l（4）运行Index.html，效果如图2

10、-4所示。（操作演示）姆猫塘住参斡踪茬掳作曾侵黍堰嚼舔坊桐冲据姻壮莱鸵痔旬限芍述里每虽项目2我的校园生活网站制作项目2我的校园生活网站制作任务2-4 应用Dreamweaver表格标记进行网站布局图2-4应用表格布局的index.html文件运行效果图熙俱愈叔狭逮漳短稻蓑米惨拾帘家涤购列绚散蝎剿跑然望滩身覆杨卞奈篮项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-5 应用文本格式标记编辑文本应用文本格式标记编辑文本l文本格式标记为l【子任务【子任务2-5-1】编辑导航区文本】编辑导航区文本l在第2行内嵌表格的第2列单元格标记与之间，编辑输入导航文字内容：l首页校园新闻文体活动情感

11、天地就业交流校园掠影读书园地l设置文字格式：字体为宋体，字号为5，颜色为红色（#ff0000），并设该单元格align属性为center，实现代码如下：lll首页  校园新闻  文体活动  情感天地  就业交流  读书园地  校园掠影lll运行修改后的index.html文件，局部效果如图2-5所示。（操作演示）图2-5导航区文本编辑后运行效果人绅椒而即代柬爸汪菜营式狐鸡幽她锑居袒请灿谦绝屹惩婆契蜗狭坡斋摈项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-5 应

12、用文本格式标记编辑文本应用文本格式标记编辑文本l【子任务【子任务2-5-2】编辑主体区文本】编辑主体区文本l操作步骤如下：l（1）在主体表格的第3行第1列单元格标记与之间内嵌一个3行2列表格，并对第1行，第3行并行单元格合并，代码如下：ll内嵌表格第1行开始l ll内嵌表格第2行开始l l ll内嵌表格第3行开始l lll（2）在内嵌表格的第1行的与之间输入“欢迎光临我的校园生活网”并设居中、黑体、4号字、蓝色，代码如下：ll欢迎光临我的校园生活网l默馆廖彝还柯脑樟淬智薪另镇兔谭饮眠欠舜顿嫂臣钠追蓝苟递炊巳套臀桅项目2我的校园生活网站制作项目2我的校园生

13、活网站制作任务任务2-5 应用文本格式标记编辑文本应用文本格式标记编辑文本l（3）在内嵌表格的第2行第1列的与之间，输入网站栏目“校园新闻”、“文体活动”介绍文本，并加项目编号，设为宋体、2号字，栏目名称加粗。代码如下：lll：在第一时间向您报道，校园里所发生的有趣事、感人事、奇异事。l：记录校园体育赛事活动、文化交流活动、文娱赛事活动。ll郎茵浙述琶襄府家蚁滞败旭泼坪弥耶饯萤女汇蔷髓夷坝床谈幕查娶蛔赌傈项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-5 应用文本格式标记编辑文本应用文本格式标记编辑文本l（4）在内嵌表格的第3行的与之间，输入网站栏目“”、“”、“”、“”介绍文

14、本，并加项目编号，设为宋体、2号字，栏目名称加粗。代码如下：lll读书园地：这里有古典文学作品品评，这里有现代文学作品欣赏，这里有校园文学精品介绍，这里有网络文学作品推荐，请驻足读书园地。ll校园掠影：教室、长廊、花园、宿舍、食堂、图书馆、运动场，都留下了我们青春的足迹，校园掠影将为您保留大学校园的美好回忆。ll情感天地：同学间的情感互助，师生间的真挚友谊，名人爱情故事。情感天地与您分享。ll就业交流：介绍相关就业政策，帮您提高面试技巧，提高您的自主创业能力。请关注就业交流。lll陌怨炽泡瞅芽忱娜尤多云象符年珍赃督戮翰蘸连纷么灵宦贴废蔼浚超风棠项目2我的校园生活网站制作项目2我的校园生活网站制

15、作任务任务2-5 应用文本格式标记编辑文本应用文本格式标记编辑文本主体区文本编辑结束后，局部运行效果如图2-6所示（操作演示）图2-6主体区文本编辑结束后局部运行效果图分吾辙醛肃才观祝暖晾宣匀惫恕遵每帅狐淫僵节柠物沾遥仿报路柿蛇鬃撮项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-5 应用文本格式标记编辑文本应用文本格式标记编辑文本l【子任务【子任务2-5-3】编辑版权区文本】编辑版权区文本l操作步骤如下：l（1）在主体表格的第5行单元格标记与之间，输入版权信息文本“Copyright20102016版权所有：我的校园生活创意工作室地址;辽宁省辽阳市八一街11号邮编：111000

16、”，并设置文本居中，文本颜色为蓝色，其它参数默认。代码如下：llCopyright20102016版权所有：我的校园生活创意工作室l地址;辽宁省辽阳市八一街11号邮编：111000ll版权区文本编辑结束后，运行的局部效果如图2-7所示：图2-7版权区文本编辑结束后运行效果图妮辣旱揍饭葬咋妆尽督亿丧转醚忆瞥鱼旱逐货俘哺棵言癌巩斧歹奥矾屯彝项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用图像标记插入图像l【子任务【子任务2-6-1】在标题区插入站标图像】在标题区插入站标图像l站标图像文件为zb1.gif，在站点文件夹的images文件夹下。l在主表格第1

17、行第1列的单元格标记与之间插入图像标记，宽度：1000，高度：120。具体代码如下：llll插入站标图像后运行效果如图2-8所示。图2-8在标题区插入站标图像的运行效果蹄戏嘘感凸大颇授基年们株橇岗虱朵醋培曝头忆利椎杰俗译吱谆汀商琴奄项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用图像标记插入图像l【子任务【子任务2-6-2】在导航区插入站标文字图像】在导航区插入站标文字图像l在第2行的内嵌表格的第1列的单元格标记与之间，插入图像标记，宽度：138，高度：45。具体代码如下：llll在导航区插入站标文字图像后运行效果如图2-9所示。图2-9在导航区插入

18、站标文字图像后运行效果图城锡妖扁负蚤注厦爸鸳耗亭确照栈屎禹邑妹秀疟氢反讳负隆岁戒输控蓖硒项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用图像标记插入图像l【子任务【子任务2-6-3】在主体文本区插入文字图像】在主体文本区插入文字图像l在主体区的内嵌表格的第2行第2列单元格标记与之间，插入图像标记，宽度：180，高度：55。具体代码如下：llll在主体文本区插入文字图像后的运行效果如图2-10所示。溶硬荡虞未农悉移斩洁艳仟炉砧状失擂吃极啤快雇垢咱尹身胆贷察烃画试项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用

19、图像标记插入图像图2-10在主体文本区插入文字图像后的运行效果图盘十志筹世虎阔训菇寓起樟骗眯孔透滇贞顷视禹峨熄霹中吸馆邹啪琼胸璃项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用图像标记插入图像l【子任务【子任务2-6-4】在主体图像区插入校园生活精品图片】在主体图像区插入校园生活精品图片l操作步骤如下：l（1）在主表格的第4行第1列的单元格标记与之间插入表格标记，表格为2行4列，并将第1行的4个单元格合并。代码如下：ll内嵌表格第1行l ll内嵌表格第2行l l l l ll去义鼎人陕佃水仆窃启戌靶谭

20、汉佛碳京峰疙昔咏津亩芭潍购闭柜泵傍新弘项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用图像标记插入图像l（2）在内嵌表格第1行的单元格标记与之间输入文本“校园生活精品图片”，并设置居中、黑体、5号字、蓝色。代码如下：ll校园生活精品图片ll（3）在内嵌表格第2行的各单元格标记与之间输入图像标记，并设置图像大小，宽度：168，高度：100，代码如下：lllllll在主体图像区插入校园生活精品图片后的运行效果如图2-11所示。峭买钥娠临汞拄韩屿赂诞梭茎彻申先糜熄褐抓则枚闸糕嫁慰斟猩县抿鼓皋项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6

21、 应用图像标记插入图像应用图像标记插入图像图2-11在主体图像区插入校园生活精品图片后的运行效果图许噬巢芽腥胶侍致信拯碧描搪秽铂幸曙阔倦拳猩囊吭暇僧瘪炼嚷锦替颖恒项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用图像标记插入图像l【子任务【子任务2-6-5】设置单元格背景图像】设置单元格背景图像l分别设置导航区、主体区标题等背景。l（1）设置导航区所在单元格的背景images/bj2.gif，具体代码如下：l首页校园新闻文体活动读书园地校园掠影情感天地就业交流ll（2）设置主体区标题单元格背景images/bj.gif，具体代码如下：l欢迎光临我的校园

22、生活网lll校园生活精品图片ll背景图像设置后运行效果如图2-12所示。l注意:这里我们适当调整了主体区文本的行间距，使文本更紧凑。褥阮别祝享顿助颈驱兵雏成甫嗡瞅管缝宰怔宏耽糙并琅乓饿悼赊瘫三吃睁项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-6 应用图像标记插入图像应用图像标记插入图像图2-12背景图像设置后运行效果图怯怜标管坦夕游静拭哉汤民犯议交速嘲币歉界家肤胖味仙间饶贩敝诅运皇项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-7 应用表单标记制作表单应用表单标记制作表单l【子任务【子任务2-7-1】设计一名为userinfo的表单,放在主表格的第3行的第2列

23、中，用以收集注册用户的：用户名、密码、性别、教育水平、电子信箱等信息,并将其提交给userlogin.asp页面处理。实现的HTML代码为：l操作步骤如下：l（1）在主表格的第3行第2列的单元格标记与之间，插入一个2行1列表格，代码如下：ll内嵌表格第1行lll内嵌表格第2行llll（2）在内嵌表格第1行单元格标记中输入文本“用户注册”，黑体、黄色、4号字、居中。并设单元格背景色为#3366FF（天蓝色）代码如下：l用户注册l撇奏琉乔氨翰第稼幂瞩铸帚诅茫赫佯圭剂铅销仰怂础成姑己闷米负洼局低项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-7 应用表单标记制作表单应用表单标记制作表

24、单l（3）在内嵌表格第2行单元格标记中输入以下表单代码：llll用户名：lllll密码：llll性别：ll男l女ll教育水平：lll硕士以上l大学本科l大专l中专以下llll电子信箱：lllllll角峙稽鄙尧菠灰屈衰霄怪撅虹稻籍呛系粹便岛襟捞绞烩疏站隙搁箔从雁淬项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-7 应用表单标记制作表单应用表单标记制作表单表单运行结果如图2-13所示。图2-13表单运行结果图岭骇栗正有泼鄂蔑律烧负谜袄肾勤鳞毋庇兜宏喧兰蜀券杉城苍寞笺博梗兰项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-8 应用多媒体标记插入多媒体对像应用多媒体标记插

25、入多媒体对像l【子任务【子任务2-8-1】制作滚动字幕，用于滚动显示友情链接网站名称，要求垂直向上滚动。该滚动栏用一个2行1列，第1行用于显示“友情链接”，文本颜色为白色，背景颜色为#339999，表格边框宽度为1，边框颜色为#339999。第2行用作文本滚动区域，背景颜色为#eeffee，要滚动的文本是：中央电视台、百度搜索、辽宁教育信息网，人人网，腾讯网。l分析：该例实质是设计一个带链接的滚动文本，这可通过标记符来实现。l操作步骤如下：绅抠诛洪线把喇姿跪末人喉芽损巷骋痹灌哑厉烟妹棋留驹跳寻恫亲诬等助项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-8 应用多媒体标记插入多媒体

26、对像应用多媒体标记插入多媒体对像l（1）在主表格的第4行第2列单元格标记之间，嵌入一个2行1列表格标记，表格宽度为192，表格边线宽度为1,内嵌表格第2行行距为18pt。l实现的HTML代码为：ll内嵌表格第1行lll内嵌表格第2行llll（2）在内嵌表格的第1行的单元格标记与之间，输入“友情链接”，并设字号为4，颜色为白色，居中对齐。代码如下：l友情链接产撬寅史恶透也援滔唤泞贫阁固挡烹片糕喊秽绅勾泄滑绪剧酮违棵裹统滁项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-8 应用多媒体标记插入多媒体对像应用多媒体标记插入多媒体对像l（3）在内嵌表格的第2行的单元格标记与之间输入滚动标

27、记，向上滚动，行程150。其它参数按任务要求执行。代码如下：lll中央电视台l辽宁教育信息l百度搜索l腾讯网l人人网ll晋隋执釉焚梳瘟龙仟识嘘彼景减钥稚魏玉普顿鳖飘璃沪战扣膨对苑卷育审项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-8 应用多媒体标记插入多媒体对像应用多媒体标记插入多媒体对像l完成任务的完整代码如下：lll友情链接llllll中央电视台l辽宁教育信息l百度搜索l腾讯网l人人网llll煞招轮浚榨服铬凹痈舟湛郁蠢挚防胎丰贸甸敲月宋拾肌辅辙薄湛渐楷圈掩项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务2-8 应用多媒体标记插入多媒体对像应用多媒体标记插入多媒

28、体对像滚动字幕运行效果如图2-14所示。图2-14滚动字幕运行效果图疆嫌款东守套汕根苞传捆俺捅药客勿魔狄筷扰皂浊宦锁阉催咒芳促隙枝筒项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务任务任务2-9 2-9 制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接l【子任务【子任务2-9-1】制作子网页】制作子网页l操作步骤如下：操作步骤如下：l（1）在子文件夹web中建立扩展子网页文件，分别为xyxw.html、wthd.html、dsyd.html、xylyhtml、qgtd.html、jyjl

29、.html。l（2）在文件编辑软件中打开子网页文件，如dsyd.html。l（3）应用所学标记，编辑相关HTML代码。llll读书园地ll1.这里有古典文学作品品评ll2.这里有现代文学作品欣赏ll3.这里有校园文学精品介绍ll4.这里有网络文学作品推荐llll具体制作过程这里不再详述。疡沧横贫戒坟藏阅明瑚鲸与荫狸酌莉踌巧华十芋椒刨挂巳庭响谚趾倘宏果项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务任务任务2-9 2-9 制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接l【子任务【子任务2

30、-9-2】应用超级链接标记建立导航文本与各子网页的链接】应用超级链接标记建立导航文本与各子网页的链接l超级链接标记为文本或图像l建立超级链接的操作步骤如下：建立超级链接的操作步骤如下：l（1）将“首页”作为超级链接的文本放在与之间，并设url为index.htmll代码如下：l首页l（2）将“校园新闻”作为超级链接的文本放在与之间，并设url为web/xyxw.htmll代码如下：l校园新闻l（3）采用同样方法，设置“文体天地”、“读书园地”、“校园掠影”、“情感天地”、“就业”的超级链接。l代码如下：l文体活动l读书园地l校园掠影l情感天地l就业交流l设置好超级链接后，运行主页，设有超级链接

31、的文本将变蓝，并加上下划线，如图2-13所示。伎墓姿称含蓖芜汉若持拭郴纂陇糠耀擅沾滁糯嚼线下敖笆夏肃践苟话哎注项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务任务任务2-9 2-9 制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接l【子任务【子任务2-9-3】应用超级链接标记建立友情链接，在【子】应用超级链接标记建立友情链接，在【子任务任务8-1】基础上实现对】基础上实现对“中央电视台中央电视台”等网站的访问。等网站的访问。l要求实现当用户鼠标移入滚动区域时，则停止滚动，移出时继续滚动，

32、当用户单击滚动文本时，则链接到相应的网站。l分析：标记支持stop()和start()方法，分别用于控制滚动的停止和开始。当鼠标移入滚动区域时，将触发OnMouseOver事件，当移出时，又会触发OnMouseOut事件，因此，可通过两个事件来分别调用stop()方法和start()方法，从而实现滚动与停止的自动控制。瑚雅庭忿倔咕乔嫩询丙孪利昌烛寺坊借礼嫩弃涵绊笼撅剔今挨畦捏芥辰帧项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务任务任务2-9 2-9 制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记

33、建立导航链接l这里只修改代码如下：lll中央电视台ll辽宁教育信息ll百度搜索ll腾讯网ll人人网l塌组宗创千司觅魔森丹傲杭忿杰伙寅发迪霸学怒胡礁祸靖贷而卓酸攘嘉早项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务任务任务2-9 2-9 制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接l在滚动字幕字完成外部链接后，相应文本下将添加下划线，效果如图2-15所示。至此，我的校园生活网站创建完成。对代码进行适当优化，去除不必要的表格边线等。运行效果如图2-16所示：图2-15能够实现外部链接的滚

34、动字幕告低拢波花敏簿柱可氦条细彪峡障围寡唾错吕筏施联耗袜煮蛤苯拄吝规鹅项目2我的校园生活网站制作项目2我的校园生活网站制作任务任务任务任务2-9 2-9 制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接制作子网页并应用链接标记建立导航链接图2-16“我的校园生活”网站运行效果图既试屏阎左燕广续湃枪捏衣蒙识倦此域微龄信亚约懊撤承淀鄂簧平箔速凡项目2我的校园生活网站制作项目2我的校园生活网站制作2.2 我的校园生活网站制作相关知识我的校园生活网站制作相关知识衅厦侦庙浅阔滓将厩雕式箕橇镰舍朔镐蜜倾蓟翱耕冒垄做渭吕叛措县韭饿项目2我的校园生活

35、网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点HTML是超文本标记语言（Hypertext Mark-up Language）的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言，而是一种描述性的标记语言。所有网页软件都是以HTML为基础，学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中，常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码，此时就必须对HTML标记相当熟悉才行。HTML文件是纯文本文件，能用任意的文本编辑器编辑，如：记事本、写字板、Word、Dreamweaver、Fro

36、ntpage等。醒揉杖喧诡氮胀赁简贰往船推酸皂钝苦旋冲海纳宪同野诞描俄柴客赵铜比项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点1.用HTML制作网页的简单实例【实例2-1】制作李白诗望庐山瀑布制作过程：（1）用任何文本编辑器（如记事本、写字板、WORD等）输入下列文本（代码）：李白诗望庐山瀑布望庐山瀑布李白日照香炉生紫烟遥望瀑布挂前川飞流直下三千尺疑是银河落九天（2）以纯文本格式存为2-1.htm文件（假设位置为：E:Item2）。（3）打开浏览器，在地址栏中输入E:Item22-1.htm，就会看到所制

37、作的网页。如图2-17所示。市凸仕谱券木段口乓崎角轮鳃勤香荒棵状抠绵泅耽肩琐晨按坪撤舶射寅霄项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点图2-17李白诗望庐山瀑布网页效果簧哨拔厩输幻悬馏痘沉炙堪则表胁信奠文膊傅轩低咎维子兢决否蓖汰劣认项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点启动Dreamweaver后，切换到代码浏览窗口，此时看到的HTML代码，即是网页的基本组成部分，其代码为：李白诗望庐山瀑布从中可见，一个

38、最基本的网页一般由三个部分组成，分别是：（1）标记用于定义网页文件的开始，对应的结束标记为则定义网页的结束。（2）该组标记用于定义网页的头，用来说明文件的一些基本信息，如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。在这里，和标记定义网页的标题，该标题将显示在浏览器的标题栏中。标记有很多用法，这里是用于指定网页所使用的字符集，是可选项。（3）用于定义网页的正文开始，用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间，bgcolor为标记的属性，用于指定网页的背景颜色，text也为标记的属性，用于指定网页正文的前景色。椰噪陌根棒

39、啡菏厚横盼泰鞋荤斗株熊捶恫氧厉处粪尺众噪掳澜搁检蔫坐锥项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点HTML文件是标准的文本文件，以纯文本形式存放，扩展名为*.htm或*.html。若系统为UNIX系统,则扩展名为*.html。HTML是由若干标记符和文本构成，标记符适用于组织网页的内容和控制输出格式，HTML具有以下几个特点：（1）HTML标记的一般格式HTML标记均是用括起来的，大多数标记是成对出现的，有开始标记和对应的结束标记，结束标记多一根斜杠。许多标记还有属性，用于对标记进行详细设置。HTML标

40、记的一般格式为：例如：但有的标记没有结束标记，称为单标记，如：（2）各属性项间用空格分隔，属性值可用双引号或单引号引起来，也可不引而直接表达。例如控制文本字体的标记为，该标记有face、size、color属性，分别用于控制字体名、字体大小和字体颜色，用法为：字体属性测试（3）HTML标记不区分大小写，与和是相同的。舱激户甭毁枯原壁现桨驾疙迸遥枯宅铲纫绝硷潍禹照也析灼暑匀轿磅浮周项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点（4）HTML中一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。例

41、如：2020年,我国将全面建成小康社会！和2020年,我国将全面建成小康社会！都是正确的，且显示效果相同，但HTML标记中的一个单词不能分两行书写，如：2020年,我国将全面建成小康社会！是不正确的。烁汽男桂瓜赖闻油培和市赂安肤杖社蹈掂遵屎虱矾楞墅且疽蜗直峡樟悸灶项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用标记，换段用标记，表示段落开始，表示段落结束。如果源文件中有多个连续空格，显示时也只显示一个，若要显示多个空格，

42、可以使用多个 。例如：2020年我国将全面建成小康社会！与2020年我国将全面建成小康社会！的浏览器显示效果均为2020年我国将全面建成小康社会！2020年我国将全面建成小康社会!与2020年我国将全面建成小康社会!的浏览器显示效果均为2020年我国将全面建成小康社会!但是，我们注意到时：在源文件中加换行符，虽然显示效果不换行，但在原换行符处会加一个空格。肄惭捍密褒杏季芽牡黄勃宗畸余挚站嘎奸僧膛叉拈松姨蜜歇残午嗜够检殊项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-1 HTML2-1 HTML网页的基本组成与特点网页的基本组成与特点（6）网页中所有的显示内容都应受限

43、于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。（7）HTML标记可以嵌套使用，实现从不同角度对文本进行格式控制。嵌套使用时注意不要发生交叉嵌套。比如若要以加粗、居中、红色显示“小康社会”文本，则实现的代码为：小康社会判断是否发生交叉嵌套的方法是：分别将标记符的开始标记和对应结束标记用线连接起来，只要这些连接彼此不相交，则嵌套就正确，否则嵌套错误。比如以下用法就发生了嵌套错误。小康社会各种标记符书写的先后顺序没有特别要求，只要不发生交叉嵌套就行。因此，以下三种用法等效。小康社会小康社会小康社会（8）可以为网页加上注释，如例2-1中即为网页的注释部分，注释可以放在网页开头部分

44、用于说明网页的功能等，或放在某个标记之后对标记加以说明。注释用“！”标记，“”表示注释结束，中间的所有内容表示注释，且可以换行。注释不是必须的，注释的内容不在浏览器中显示出来，仅为设计人员阅读方便。蔽见唉四啮究嵌逐词妨酿轰窃创匀卜差坛呆辽账钳妒度屡敷删烦关咎瘴漏项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-2 2-2 文本格式标记文本格式标记1.文本格式标记文本控制主要是控制文本的字体、字体大小和颜色，这通过标记来实现。格式：文本功能：设置网页中普通文字的显示效果。属性：(1)Face属性用于指定文字字体，如“楷体_GB2312”、“宋体”、“黑体”等。但要注意，浏览器显

45、示的字体与客户端安装的字体有关，如果网页文件中设置了客户端没安装的字体，则以默认的宋体字显示。因此，在使用字体时，应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。(2)color属性用于设置字体的颜色。在HTML中颜色通常用#RRGGBB来表达，RR、GG、BB分别代表红色、绿色、和蓝色的分量值，用十六进制数表示，取值范围为00FF。通过改变三基色的混合量，即可形成各种各样的颜色。另外，颜色也可以用英文单词来表示。下面是常用颜色的取值及英文单词表。表2-1常用颜色的取值及英文单词表颜色红色绿色蓝色黄色黑色白色紫色浅蓝色取值#FF0000#00FF00#0000FF#FFFF00#00000

46、0#FFFFFF#FF00FF#00FFFF单词RedGreenBlueYellowBlackWhitePurpleAqua勋归蔫痰足昆憨漂库鸵钩如梢忠凝盟滋讥放遭墅郁援债钡卜网逸孟谍铣恕项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-2 2-2 文本格式标记文本格式标记(3)size属性用于指定字体的大小。字体大小的表达方法有两种，一是设置为绝对字号，此时的设置值可以是1号，1号最小，7号最大，默认字号为3，可利用设置或更改默认字号。例如，若要以蓝色，宋体2号字输出“网页设计技术”，则实现的代码为：网页设计技术另一种是设置为相对字号大小，此时的用法为，其中n代表字号改变的

47、量，+表示字体在默认字号的基础上增大几号，-表示在默认字号的基础上递减几号字。例如：网页设计技术果查涡帧膝一煎椅穷媒怨苔舍沏锅酝后声舶居害箩仓介赊葵膛楚埂旦崭务项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-2 2-2 文本格式标记文本格式标记2.标题格式标记标题格式使用标记控制。格式：标题文本功能：用于定义文章内章节标题的显示格式，同时包括了标题的字体、大小、和段落间距。说明：n表示标题字号，共六级，分别是1，2，3，4，5，6，数字越大，字号越小。Align表示水平对齐方式，取值为left、right或center。【例2-2】在网页中分别用六级标题标记符输出一个测试效

48、果文本。实现的代码为：演示标题字体这是第一级标题这是第二级标题这是第三级标题这是第四级标题这是第五级标题这是第六级标题蹬笆橱郎满别肖爪倦沧霹误陷帅盎恰回裴启虽果溺礁反皑童烦汲拳适噶辣项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-2 2-2 文本格式标记文本格式标记标题字体运行效果如图2-18所示。图2-18标题字体演示图注意：用该标记实现的文章标题效果有限，通常还是用FONT标记实现文章实际标题的丰富多彩效果。茎拼媒奶蠢阶立乓挛冰攀些毫踩苟悯瓶兰它啼坪瘪溢钨乾租继肾固债供刽项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-2 2-2 文本格式标记文本格式

49、标记3.字体效果（字型设置）标记HTML中还定义了一些用于改变字体效果的标记符，常用的有加粗、斜体、加下划线等。各种标记的格式和具体功能如表2-2所示：注意：不要频繁使用各种效果，太花哨的网页反而会引起读者的反感。一些浏览器不能正常显示某些效果，如加粗和斜体时却加了下划线或反向显示，或忽略。可以将几种效果混用，如：霜叶红于二月花焉爆雀盐慰炕利挂人勋硅签讼捕敝梦悲吧誊卓恍贮沉暮谷烹含扫样连汾脸项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-2 2-2 文本格式标记文本格式标记表2-2字体效果标记表标记格式功能受影响的文字加粗受影响的文字倾斜受影响的文字加下划线受影响的文字标准

50、打印机字体受影响的文字加删除线受影响的文字产生下标受影响的文字产生上标受影响的文字大字体文本受影响的文字小字体文本受影响的文字闪烁字直逢硬垛敏龟复奎沛弥包罗宦辗挫翅理删陛营浮辆沟颖涩鞘寒军萄靡忽轻项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-3 2-3 版面控制标记版面控制标记l1. 网页整体风格控制（文件主体）标记网页整体风格控制（文件主体）标记l对网页整体风格的控制主要通过文件主体标记及其相关属性来实现。l格式：ll功能：设置文件主体。l属性：l(1)background设置网页背景图像，图像以平铺方式作为网页背景。image-url是图像文件的路径。l例如，若要用i

51、mages/bg.gif作为网页的背景图像，则设置方法为：ll(2)bgcolor设置网页的背景颜色，默认为白色。l(3)text设置网页非超链接文字的色彩，默认为黑色。l(4)link设置网页超链接文字的色彩，默认为蓝色。lalink设置网页活动链接文字的色彩，默认为蓝色。lvlink设置网页已访问过链接的文字色彩，默认为蓝色。l(5)leftmargin设置页面左边空白。ltopmargin设置页面上边空白。lvalue是空白量，可以是数值，也可以是相对页面窗口宽度和高度的百分比。l(6)bgproperties该属性只有一个取值，即为FIXED，用于锁定网页的背景图像。锁定后，当前滚动页

52、面时，背景图片就不会跟着滚动了。例如：ll说明：l(1)body标记说明文件的主体，可以省略，中间可以插入其他标记和文字。l(2)其属性可以省略，也可以有一个或多个。贼埂甫悬豺泞荐惺戴讯嘘岸慎截茅虾捷铺硅曾纹孜警怒使把棠爽摇炕偷名项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-3 2-3 版面控制标记版面控制标记l2. 段落标记段落标记l格式：l功能：设置文章段落开始和结束。l属性：align是水平对齐方式，取值为left、right或center。l说明：段落结束标记可以省略，因为一个段落的开始表示上一个段落的结束。l例如：l白日依山尽黄河入海流l和l白日依山尽黄河入海流

53、l都是合法的，显示效果一样。l注意：HTML中显示文字的分段不能通过源文件中的回车来实现。澈肃搅嘎蚌虑醒彝坎缘埠弃炙嵌枯吩英俩埋峡边撵院悸钓釉换禹体腆威琢项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-3 2-3 版面控制标记版面控制标记l3.换行标记l格式：l功能：另起一行显示文字。l说明：l(1)该标记是单标记。l(2)标记标记中在显示效果上都是另起一行书写。它们的不同之处是标记的行距较大，标记的行距较小。另外换行后的文本与前面的文本仍属同一段落，因此换行后字符和段落格式不会改变，这也与标记不同。l(3)为保证某一单词的完整性，有时需要禁止在某处换行，此时可使用标记来实

54、现。其用法为：文本该标记符作用的文本将在同一行显示，若一行显示不下，则超出部分将被裁剪掉。迢年抽仔抠菲丸贬捣惩洼痕篡挎调钎睡场斡幻月夺聪铲摔托孕颧婶侍抗客项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-3 2-3 版面控制标记版面控制标记l4.文本对齐方式标记l格式：文本l功能：设置多个段落的文本居中、居左、或者居右。l属性：align是水平对齐方式，取值为center、left、或right。l说明：l(1)对齐方式可以在多个标记中实现，如、等。如果多个段落有相同的对齐方式，则可以将这些段落嵌套进、之中。l(2)如果多个段落居中，还可以使用center标记，格式为：l多个

55、段落文本爆特耍召皱婆米嫩剖豹锭挡泞掘翼洲粥庶贤亨串挪盏千茎喳讣见孜边失童项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-3 2-3 版面控制标记版面控制标记l5. 画线标记画线标记l格式：ll功能：在页面上画横线。l属性：l(1)width用于指定横线的宽度，宽度值的指定方式有两种，一种是用像素点来指定，如50、100、200、500等，这种方式当窗口大小改变时，横线宽度不变。l例如：l另一种方式是用相对窗口的百分比来表示，如50%、75%、100%，默认是100%。l例如：l(2)size用于指定横线的高度，其值可以是绝对点数或相对百分比。默认高度为1。l(3)align

56、用于指定横线水平位置，取值为left、right或center，默认是center。l(4)color用于指定横线的颜色。l(5)noshade用于指定横线是否有阴影。若带有此参数则横线无阴影。l说明：l(1)标记一般用于产生水平分隔线，若要产生竖线，可将width设置为1,size设置为竖直线的高度值。例如：l(2)当width与size值都较大时，可以产生长方形或正方形图形。l例如：l(3)产生的横线在预览输出后才能完全看到效果。西另栽穴访祝柠嚎良妙浴吝库盎霖挨榔溃祥额革橡蓟痢轰姑砌圭瞄恋旁首项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-4 图像标记图像标记l在网页中

57、插入图像使用标记来实现，没有对应的结束标记。l格式：l功能：在当前位置插入图像。l属性：l(1)src要插入的图像文件的URL地址，通常图像的格式为jpg或gif。l(2)alt当图像无法显示时所给出的提示文本。l(3)longdesc关于图像的详细说明。l(4)width图像的宽度，可以为点数或相对窗口宽度的百分比。l(5)height图像的高度，可以为点数或相对窗口宽度的百分比。l(6)boder图像的边框宽度，其值为非负整数。l(7)hspace水平方向空白（图像左右留多少空白）。l(8)vspace垂直方向空白（图像上下留多少空白）。菌痊哦胚颠颧关京湖般拒孪掂泞进贿烦寐示陇吨滚急聂览衷

58、霹稿矛烛艘酱项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-4 图像标记图像标记l(9)align用于设置图像的对齐与布局。可设置为left、right或center等，使图像向页面窗口的左边、右边或中间对齐，图像附近的文本在图像右或左侧环绕。align还可以是其他取值，则指定图像与文本在垂直方向上的相对对齐方式，取值与对应的含义为：lTop将文本行中的最高字符的顶端与图像的顶端对齐lTexttop该项的功能与top相同lMiddle使当前行的基准线与图像的中线对齐lAbsmiddle使当前行的中线与图像的中线对齐lBaseline使图像的基准线与当前的基准线对齐lBott

59、om使图像的底部与当前基准线对齐lAbsbottom使图像的底部与当前的底部对齐l说明：图像的宽度与高度指图像显示时的大小，与图像的真实大小无关。l例如：l在网页的当前位置插入images/flower.jpg图形，宽度为300，高度为200，边框宽度设置为1，图像放在页面的右边，则实现的代码为：l岿樱础六凝烹乐伏哆叁宙刀昼以劫巨梗怕幌纹寓闭朗荐铡蹋岳馆羞裁掉趋项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-5 超链接标记超链接标记具备超链接能力是HTML的最大优势，利用超链接可实现由一个网页切换到另一个网页，或跳转到同一网页的某一个指定地方，也可由一个网页跳到另一个网站，

60、可以说，利用超链接能链接到世界的任何一个地方。1. 超链接的定义超链接的定义格式：文本或图像属性：(1)href要链接到目标的url地址。(2)url要链接到的网站、网页（包括同一站点内的网页文件、图像文件等）或电子邮件，可以是绝对地址（用于外部链接），也可以是相对地址（用于内部链接），如http:/,research.htm,images/chinamap.jpg,mailto:等。(3)target指出要显示超链接内容的窗口名，默认时在当前窗口中显示。window_name显示超链接内容的窗口名，如果该窗口不存在，则打开一个新窗口。婶排鳖诉哟锄讨延聋攘涌亡萧袍疗海阔匝峪要激点够崭蜒毡汗敖遁

61、钳花瓜项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-5 超链接标记超链接标记说明：(1)建立超链接时，标记中间可以嵌套其他标记，如图像标记、文本格式标记等。(2)超链接标志一般呈蓝色显示，当鼠标停在上面时，会显示为手形鼠标指针，表示它是一个链接，当用户单击时，就会跳转到url指定的目标。例如：百度搜索单击百度搜索，打开一个名为baidu的新窗口，在其中显示百度主页。关于本站单击关于本站时，将在当前窗口显示当前目录下的introself.htm文件。中国地图单击中国地图时，将在当前窗口中显示images目录下的chinamap.jpg图像。联系我们单击联系我们时，将打开电子

62、邮件软件，收件人地址为，可以给他写信了。用图像链接到清华大学网站卧震孰楷呈九铂蓑脾琉这疹迷怯琢蛹囤牛貉绕窖允具弊譬哪花惜谦精佛淬项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-5 超链接标记超链接标记l2. 定义锚点定义锚点l若要跳转到网页的某一指定位置，则必须事先在该位置定义一个锚点(anchor)，锚点主要起位置标识的作用。定义锚点用标记的name属性来实现。l定义格式：l定义好后，若要链接到网页的某一锚点，则要用标记链接。l链接格式：文本l比如：要链接到vbscript.htm网页的vbkey1锚点，则链接的方法为：l文本l若要链接到当前网页的某一个锚点，则网页名可以

63、缺省，而直接用锚点名来链接，其格式为：文本l注意：在需要定义锚的地方，加上代码即可，锚名要唯一，不要重复。咋咆式尚承瘪罚市占削锚伟驰痉戒卸熊尾土怯胰宠腐喘砖羹唤帮济茫涨赌项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记 l表格是HTML网页的一个非常重要的元素，除了规范数据的输出外，在网页设计中，常常用来进行版面布局的设计和定位。l1. 定义表格定义表格l表格是由多个部分构成的，因此定义表格时，将用到多种标记符，这些标记符是：l（1）定义表格的开始和结束。l（2）定义表格标题的开始和结束。l（3）定义表格行的开始与结束，一组和产生一个表格行。l（4）定义单元格的开始与

64、结束，一组和产生一个单元格。在和之间的部分，即为该单元格显示的数据，若该单元格无数据，显示为空，则应表达为 。l（5）定义表头(表格第一行)单元格的开始与结束，一组和产生一个表头单元格。和之间的部分，即为单元格所显示的数据，该数据以加粗居中方式显示。表头也可不用标记产生，而直接用标记来产生。遂闭禾钨烁拨剥争姆悍念昭萨幽艺翘广踩从右节互果呀琳拟而荫矣站桥苇项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记l2. 表格标记的属性表格标记的属性l对表格的更详细控制，可通过表格标记符的相关属性来实现。l(1)标记的属性l标记的属性用于从整体上控制表格的外观和形状，常用的

65、主要有：lwidth、height属性：该组属性用于设置表格的宽度和高度。其宽度或高度值可用像素值表示，也可用百分数表示。l例如，若要产生宽度为800，高度为400像素的表格，则定义方法为：ll若要产生一个宽度是网页宽度的85%的表格，则定义的方法为：llborder属性:定义表格边框的边线的宽度。若设置为0或不设置，则为无边框的表格。若要产生一个宽度为800，边线宽度为1的表格，则定义方法为：llbgcolor、bordercolor属性：bgcolor用于设置整个表格的背景颜色；bgcolor属性对于和标记也有效，作用于标记时，用于设置该行的背景颜色；作用于标记，则设置该单元格的背景颜色。

66、bordercolor用于设置表格的边框颜色，只有在border属性设置为非0时有效。lbackground属性：用于设置表格的背景图像。设置表格的背景图像后，表格的背景颜色失效。l例如：若要设置表格的背景图像为images/bg.jpg，则设置方法为：llcellpadding、cellspacing属性：cellpadding属性用于设置单元格中的文本与表格边线的间距；cellspacing属性用于设置表格的各单元格之间的间距。l例如：若要设置单元格间距为1，单元格文本与表格边线的间距为2，则设置方法为：lalign属性：用于设置表格在网页中的对齐方式，取值有left、center和rig

67、ht。l例如：若要设置表格在网页中居中，则设置方法为：l少薪匝腰惧怎鹏恨醋占滨季训谱钦怔爷枯兑况陀饺秉键夯羹撂崇晃裸指快项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记l(2)标记的属性l标记常用的属性主要有bgcolor和align，分别用于设置该行的背景颜色和文本的对齐方式，利用的bgcolor属性，可以实现不同行显示不同的背景颜色。l(3)标记的属性l标记常用的属性主要有bgcolor、bordercolor、width、height、align和valign,分别用于设置该单元格的背景颜色、单元格的边框颜色、宽度、高度、单元格文本在水平方向的对齐方式和在垂直方

68、向的对齐方式。销迸蜜米筏菩启或幼季菌钠草具册瘴队骚狰幂羡锨幼菲坟心乍令凛拣侯叛项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记l【实例2-3】试用HTML标记产生图2-19所示的表格。l表格宽度为400，各行的行高为24，l表格在网页中居中对齐；l表头背景颜色为#0000CC，l表头文本颜色为#FFFFFF，l表格边框宽度为1，l边框颜色为#0099CC；l各数据项均居中对齐，l第1列的宽度为53，第2列的宽度为116，l第3列宽度为134，第4列宽度为87。敞剑旱整尺腻丢奈满绿又农踌然容葵郴检拱迭曙还配柿碉烤睛裳鸥账寝剿项目2我的校园生活网站制作项目2我的校园生活网

69、站制作知识点2-6 表格标记图2-19表格IDUserNamePasswordState001zhangZh09855&1002wang86$0%!10僻柑沁趣溃娜闲骂蘑遵已专烟怜断竿砍蛹磷尊锰趾泼哗捎缺业绚伯涩顾吁项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记l实现的HTML代码为：lllIDlUserNamelPasswordlStatelll001lzhanglzh09855&l1lll002lwangl86$0%!1l0ll徽婶镶辜邢肖换拍岛店骇趣身湖光傀妙铸酬剖签尿官构陶伎恼范重果粮搏项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标

70、记l【实例2-4】试产生一个2行3列，宽度400，边线宽度为1的表格，然后将第1行的第2和3两个单元格合并。l实现的HTML代码为：lll第1行1列这是合并后的单元格lll第2行1列第2行2列第2行3列ll搭盘颊幻算繁奇膝洽秽骏螟社毕炮傲迸蜕茶织圾伸竣实谐咳帜苔节颜年雪项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记图2-20表格的跨列合并第1行1列这是合并后的单元格第2行1列第2行2列第2行3列产生的表格效果如图2-20所示。啸辟炔盔皑榔配奶防内樱缺金附阵胜千卵洁绿夺峨纤寐劝挣展瓣琉龟吱桩项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记l(

71、2)行合并l行合并通过标记的rowspan属性来实现，其用法为：l文本l【实例2-5】试产生一个3行3列，宽度为400，边线宽度为1的表格，然后将第1列的第1行和第2行的两个单元格合并。l实现的HTML代码为：lll第1、2行合并后的单元格l第1行2列l第1行3列lll第2行2列l第2行3列lll l l ll孙当琢钻箔捞类期稠死关窟梳呈张晌从从游顾刚绢止蛇驳裸诚要镣慕徽舆项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-6 表格标记图2-21表格的跨行合并第1、第2行合并后的单元格第1行2列第1行3列第2行2列第2行3列产生的表格效果如图2-21所示

72、。若要同时跨行和跨列合并，只需同时使用rowspan和colspan属性即可。琅型骸葱谣麓禹旷津碎砧晨策诚玲莽恕壳桑弛鄙滨徐攒侣联来皋晃蕾折脖项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记 l为了提高网页的交互性，收集用户在网页中输入的信息，HTML专门提供了表单，在表单中可以添加使用命令按钮、文本框、密码输入框、复选框、单选钮、列表框、组合框等界面对象，以便接收用户输入的数据。利用表单可以集中管理这些界面对象，并提供提交和重置数据的方法。镊爵脾唾欠颠怪饲比夸憎抠恕城左掇梳讥隅偿皿瘩境因惟厚繁拓盆钢钥冗项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7

73、 表单标记 l1. 表单的定义表单的定义l(1)表单的定义方法l在HTML中，表单利用和标记定义。l格式：lll参霸狠募伎攻弦刮刀婶示孪斟沫庞蛋顾萧房痊汽硼这晓腻玲随足靶怯的侮项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l（2）表单的属性lName属性：用于定义表单对象的名称。定义表单对象名后，可方便程序中引用表单中的对象，为可选项。l若将表单的对象定义为thisform，在程序中就可通过以下方式来访问或设置表单中界面对象的值：lDocument.thisform.界面对象名.valuel表单中界面对象的值由value属性来设置或返回。Document是浏览器提供

74、的一个对象，代表当前页面，可直接访问。阀狭吐豁妊笺羡品找软此醚陇俞通妆哥鼠允喊鳞舶兰峙致琴矽随腔逾泌秤项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l（2）表单的属性lMethod属性：用于设置表单提交数据的方法，其取值为Post或Get。Get方法是将单数据附加在action属性指定的URL地址之后，并在url地址与表单数据间加上一个“?”分隔符，表单的各数据项间用“&”进行分隔，然后将形成的url地址串发送给服务器，该地址串的格式如下：lhttp:/localhost/test.asp?txtID=012&txtUserName=ucau&Submit=Subm

75、itl此处是将表单数据提交给test.asp页面处理，txtID代表表单中一个名为txtID的界面对象，等号后面的012代表用户在该界面对象中所输入或选择的值，其余依次类推，可知用户在名为txtUserName界面对象中输入或选择值为ucau，最后的Submit是提交命令按钮的对象名，等号后面的Submit是该按钮的标题文本。这是因为表单提交数据时，提交的是表单中各界面对象的Value属性值，文本框的Value属性值即是文本框中的内容，而命令按钮的Value属性值则是按钮标题。lGet方法一次最多只能提交256个字符的数据。Post方法是将表单数据作为一个独立的数据块直接发给服务器，不受长度限

76、制，因此，若提交的数据量较多，则最好采用Post方法，若较少，可以使用Get方法，一般使用Post方法来提交表单数据。默模粥较核疚烤嘲蚕堂闷凉馋慧普祟庞始销阑蔼浇拼竞蜂升鱼搏烁芝夸珍项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记lEnctype属性：该属性用于指定表单提交数据时所采用的编码方式，默认的编码方式是“application/x-www-form-urlencoded”，即采用URL编码方式。通常情况下都应采用这种编码方式，所以Enctype属性通常可以不指定。lAction属性：该属性用于设置一个接收和处理表单提交数据的脚本程序。即设置将表单数据提交给谁

77、处理。在ASP应用中，通常设置为某一个ASP页面，另外，也可将表单数据提交给某个指定的电子邮件信箱。l例如，若要将当前表单数据提交到邮件地址为“”的信箱中，则此时的用法应为：ll注意：此时必须指定表单的enctype属性值为text/plain颇捏咙嚎惜脱统墓嗡报号氏襄疮任巳抉缴唬肝唱伎免元织盐渠园挞斥药探项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l（3）表单的方法l表单对象提供有submit和reset方法，分别用于实现表单数据的提交和重置操作。lsubmit方法：该方法用于将表单数据提交给action属性指定的脚本程序。功能与表单中的提交命令按钮（submi

78、t）等效。l例如，若要提交login表单中数据，则实现的代码为：lDocument.login.submit();lreset方法：该方法用于将表单中各个界面对象的值重置为空，或重置为初始状态。在用户填写表单数据时，若需要全部重新填写，则可调用该方法来使表单数据复位。l例如，若要使名为login表单数据复位，则实现的代码为：lDocument.login.reset()；l使用时注意这两个方法名必须小写，且加括号，而且必须在JavaScript中使用。拷扼药宙褂庄擦蔼小诽沙新毡毯昭取浚毡钮贵藩功扮趁剥玉愿什渺锗踞绣项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l2.

79、 表单的界面对象表单的界面对象l表单相当于一个载体，必须在表单中添加界面对象，才能实现接收数据的目的，表单界面对象通常也称为表单域对象。下面分别介绍表单中可使用的界面对象，以及这些对象的用法和功能。l（1）单行文本域l单行文本域用于产生一个文本输入框，以实现单行数据的输入。定义方法为：ll其中，Type和Name属性是必须设置的，其他属性为可选项。Type属性决定所产生的界面对象的类型；Name属性用于定义该文本域的名称；Size用于设置文本域的显示宽度是多少个字符宽，Maxlength设置文本域最多可以接收多少个字符，value属性用于给文本域指一个初始值。l例如，若要定义一个名为frmus

80、erinfo的表单，在表单中定义一个用于接收用户名的输入框username，输入框的宽度为15，最多可接收12个字符，表单数据提交给userconfirm.asp，则定义方法为：ll用户名：ll表单中各界面对象的值，均是通过value属性来存储的，通过访问该属性，可获得或设置界面对象的值。访问表单中各界面对象的属性的格式为：ldocument.表单名.界面对象名.属性名l因此,若要获得frmuserinfo表单中名为username的文本域中的值,则获取方法为:ldocument.frmuserinfo.Username.Valuel若要设置表单中该文本域的值为trainingguest,则设

81、置方法为:ldocument.frmuserinfo.Username.Value=trainingguest渣违里崎尉河骤讲陈葫设朝剧隋粗男夹单抓植莲促赚逛骆娶榴朝亿宿碉什项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l（2）口令输入框l口令输入框是单行文本域的一种特例，外观上与单行文本域一样，但当用户输入数据时，数据会用“*”，替代显示，可防止他人看到用户所输入的真实数据，常用于密码输入。其定义方法为：ll（3）隐藏表单域l隐藏表单域不会显示出来，用户当然也无法更改其数据。通过隐藏表单域，可悄悄向服务器发送一些用户不知的信息。其定义方法为：ll（4）多行文本域l

82、多行文本域常用于接收大数据量的场合，可同时显示多行文本，定义方法为：l初始文本lReadonly为可选项，若选用，则多行文本域变为只读。l例如，若要产生一个6行40列的多行文本域，则定义的方法为：l初始文本需顾燃罚卡囊市贩凝耗窒呈例杜窘辟瞒洗娱窗抛闪街妹潦弹坪妇岁避淀狮项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l（5）列表框l利用列表框可以提供一些候选项供用户选择，列表框用标记符定义，其定义方法为：ll列表项文本1l列表项文本2ll列表项文本2ll说明：lSize属性用于定义列表框的高度，即一次能看到的列表项的数目。若设置为1或不设置，则为下拉式列表框；若设置为

83、大于或等于2的值，则为滚动式列表框。lMultiple为可选项，若选用该参数项，则允许多项选择。l和标记用于定义具体的列表项，Value属性用于设置该列表项代表的值，即当用户选中该列表项后，表单所提交的值。Selected为可选项，用于指定默认的候选项，只能有一个列表项可选用该参数。摈叉帖界营哑益达秒主鄂辈涛奴屯卞栽忌蔫侍磁禾令龙舜道益原郁钡练扒项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l【实例【实例2-6】试分别用下拉式列表框和滚动式列表框显示供用户选择的籍贯。l分析：为便于各数据项的定位和对齐，在表单中采用表格进行定位。实现的代码为：llll下拉式列表框滚动

84、式列表框lll籍贯：ll北京l上海l天津l重庆l广州lll籍贯：ll北京l上海l天津l重庆l广州lll搏戮类芥滴嘘戎汪弊酪姐也杀袍淌彬掘烤江拧仪纺原木弹否邢趁杭烁点扳项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记运行效果如图2-22所示图2-22下拉式列表框与滚动式列表框满黎渡碰睬慎奈合识弥喊豺悉拨粱影啃喳惕点然衅询议安泅杆良栽汁疚麻项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l（6）复选框与单选钮l复选框与单选钮也是提供候选的一种方法，复选框允许多选，常用于多项选择；单选钮常成组使用，在同一组中只能任选其一，常用于单项选择。l复选框的

85、定义l复选框用标记进行定义，其定义方法为：l选项文本l一个产生一个复选框，有多少个候选项，就用多少个标记。Value用于设置当用户选中该项后，表单所提交的值。checked为可选项，若选用该参数项，则该复选项呈选中状态。盼毗凭硝酬拯巨败芳惫它争槽脖息江肖颐锐搞类咽锰崭爬吱脸仓咆扎黑揣项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l【实例2-7】试用复选框提供预设的爱好,供用户选择。可供选择的爱好有：旅游，玩游戏，阅读，体育运动，唱歌、听音乐。l实现的HTML代码为：ll爱好:l旅游l玩游戏l阅读l体育运动l唱歌、听音乐l另毒限熬忱尧敌邻遂伤补僳纸眩崭岭畦纵价买驾转溅

86、坤毒核洲氨匆轿妖匡项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记运行效果如图2-23所示图2-23复选框缨履蔫鸡介等回祸与盂座婿雾脐稽崩函富去牌暗闯馁杂股趣寸氧褂赦芬文项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l单选钮l定义方法：l选项文本l单选钮常成组使用，为了将多个单选钮定义成一组，需要将各选项的name属性值设置为相同。l【实例2-8】试用单选钮为用户提供一组职业选项，以供用户选择。l实现的HTML代码为：ll您的职业是：l教师l学生l工人l工程师l程序员ll运行效果如图2-24所示图2-24单选钮挽冬俊碱何乳榆刊裕硼尽感季抱里

87、吠铃落灵陡搓宪胆摆低习傍板寝笑指郎项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l(7)命令按钮l表单中可使用的命令按钮有提交命令、复位命令按钮和普通命令按钮三种，提交命令按钮具有内建的表单提交功能，复位命令按钮具有重置表单数据的功能，普通命令按钮不具有内建的行为，需要指定OnClick事件处理函数，才能实现具体的操作。l提交命令按钮l提交命令按钮用于表单数据的提交，上与表单对象的submit方法相同。提交命令按钮的定义方法为：ll例如,若要在表单中定义一个标题为“登录”的提交命令按钮，则定义方法为：ll复位命令按钮l复位命令按钮功能与表单对象的reset方法相同,

88、其定义方法为：ll例如,若要在表单中定义一个标题为“重新填写”的命令按钮，则定义方法为：l化桨多汰踊妥肛康忌扎堡卵体惦蜘惑苛近物镣屋讳甘凝毁陀教扛隧辽砒逢项目2我的校园生活网站制作项目2我的校园生活网站制作知识点2-7 表单标记l普通命令按钮l普通命令按钮不具有内建的行为，但可通过指定事件处理函数，来为命令按钮指定具体的操作，因此，通用性更强，另外，普通命令按钮可用在表单中，也可脱离表单而直接使用。其定义方法为：ll命令按钮常用的主要是鼠标单击事件（click）,可通过OnClick来为其指定事件处理函数或语句，当单击命令按钮时，系统就会自动调用用执行所指定的事件处理函数或语句。l例如，若要在

89、单击普通命令按钮时，在网页中输出“thisisatest！”的字符串，则实现的方法为：ll另外利用普通按钮通过调用表单对象的submit方法，也可实现提交命令按钮的功能。例如，若当前表单对象名为login,则用普通命令实现表单提交的代码为：l嘴敷蛊挛浊非顽蓟汞穆剧坯知基俊诊卵塘管腕倒契狐镍冒改里粮蓟辕囱滁项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-8 多媒体及其他常用标记多媒体及其他常用标记l1. 嵌入多媒体文件嵌入多媒体文件l(1)使用标记l在网页中使用和嵌入多媒体文件可通过标记来实现，利用该标记可以实现对声音、AVI动画和电影文件的播放。l格式：ll属性说明：lur

90、l用于设置要嵌入或播放的媒体文件，系统根据扩展名来识别媒体的类型，并自动调用相应的播放器来播放这些媒体，通常是调用媒体播放器来播放，要播放的媒体主要有AVI动画，波形声音文件（.wav）和MIDI音乐文件。lwidth和height用于设定嵌入对象的宽度和高度，可以缺省，缺省后采用媒体文件自身的大小进行播放。lautostart用于设置是否自动开始播放，若设置为true或缺省该属性，则启动网页后，将自动播放指定的媒体文件；若设置为false,则不自动播放，只有在网页中单击播放按钮后，才开始播放。lLoop属性用于设置是否循环播放。若设置为true，则将循环播放，若缺省该属性，则默认只播放一次。

91、l例如，若要在打开网页时自动播放当前目录下的demo.avi动画,则实现播放的代码为:ll若要播放波形声音文件test.avi动画,则实现播放的代码为:llMIDI音乐的播放方法相同。播放声音时，没有视频显示，但仍会显示媒体播放的控制面板。寐斩胞辟儡俯份漱敲炼兄累惩丙特馅坟丽焙杂第株壤策洒奇豺恩站翟鸳禹项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-8 多媒体及其他常用标记多媒体及其他常用标记l(2)使用标记l标记除了用于向网页插入图形外，还可实现对动画的播放，此时的用法格式为：ll其中，dynsrc属性用于指定所要播放的动画文件(.avi)。start用于控制播放的方式，

92、该属性的默认值是fileopen，即链接到含本标记的页面时，即开始播放；若设置为mouseover，则当鼠标移到视频播放区之上时，才开始播放。l例如，当访问页面时，即开始播放当前目录下的demo.avi动画,则实现播放的代码为:ll若要在鼠标移动到播放区之后，才开始播放，则实现的代码应为：ll在未播放之前会自动显示动画的第一帧图像。屹再规志脉吵禽扮滥届堡啪牢帚德圈童寓捞留址话吸技计翟通享操风胃珐项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-8 多媒体及其他常用标记多媒体及其他常用标记l2. 播放背景音乐播放背景音乐l用标记播放声音或音乐时，会在网页中显示媒体播放器的播放控

93、制面板，若要不显示该控制面板，而又要为网页添加背景音乐，此时应放弃使用标记，而改用标记来实现，该标记是专为播放背景音乐而设计的，其用法格式为：ll该标记可以播放波形文件(.wav)或MIDI音乐,由于波形文件较大，网页应用中，通常播放的是MIDI音乐文件。Src用于指定所要播放的文件，loop设置循环播放的次数，若要无限地循环播放，则应设置该属性为infinite或-1。l例如：若要循环播放当前目录下的bg.mid音乐3次，则播放方法为：ll当浏览器窗口最小化时，背景音乐的播放将暂停，窗口还原后会继续播放。激率烃晋炙央文攀多厘抚驾精猪亨淬膊义捏墙吵腔哈侧茬签烟臃添操毙嘶项目2我的校园生活网站制

94、作项目2我的校园生活网站制作知识点知识点2-8 多媒体及其他常用标记多媒体及其他常用标记l3. 创建滚动文字创建滚动文字l利用标记，可创建滚动文本。该标记的用法格式为：ll要滚动的文本或图像（可包含其他HTML标记符）ll属性说明：ldirection属性:该属性用于设置滚动的方向，取值可以是left、right、up或down分别代表向左、向右、向上、或向下运行。lbehavior属性：用于设置滚动的方式。scroll代表循环滚动，slide代表只滚动一次，alternate代表来回滚动。例如：l我是循环滚动的l我只滚动一次l我是来回滚动的l将以上代码加入到网页的与之间，然后然后浏览网页，即

95、可看到相应的效果和区别。lloop属性：用于设置滚动的次数。若未指定，对于scroll和alternate滚动方式而言，将一直滚动下去。lwidth，height属性：width用于设置滚动的行程（水平方向滚动）或宽度（垂直方向行程），height属性用于滚动区域的高度。lscrollamount属性：用于设置滚动的速度。lscrolldelay属性：用于设置滚动一次后的延迟时间，单位为毫秒。lbgcolor属性：用于设置滚动区域的背景颜色。江椭捻曰唱桑楼滥埠我尝邑价般悬褐木斋合陡芯扮旭芜棱崎委缚函呼系芦项目2我的校园生活网站制作项目2我的校园生活网站制作知识点知识点2-8 多媒体及其他常用标记多媒体及其他常用标记l【实例2-9】试在网页中设计一个水平滚动文本，滚动方向为向左，滚动速度为5，滚动延迟时间为100毫秒，滚动区域的背景的颜色为#eeffee，滚动文本为“本站永久国际域名：http:/”,并且网址采用红色显示。l实现的代码为：l本站永久国际域名：http:/穴寞醇凑葱惕艾翁伊滑料新蹿血购沦阳藻节偏掐矢率籍侩笔章肆函毕垄拣项目2我的校园生活网站制作项目2我的校园生活网站制作