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

项目2 我的校园生活网站制作,本项目内容提要：本项目结合“我的校园生活”的规划设计与制作过程，讲述了HTML语言的基本组成与特点、文本格式标记、版面控制标记、图像标记、超链接标记、表格标记、表单标记、多媒体及其他常用标记等知识与应用。本项目能力目标：1 具备表格结构网站规划设计的基本能力。2 掌握HTML语言文本格式、版面控制、图像、超链接、表格、表单、多媒体等常用标记的基本格式与使用方法，能够应用HTML语言常用标记制作简单网页。本项目知识目标：1 掌握HTML语言组成与特点等基本知识。2 掌握HTML语言文本格式标记、版面控制标记、图像标记、超链接标记、表格标记、表单标记、多媒体及其他常用标记等相关知识。,2.1 我的校园生活网站制作过程,任务2-1 设计规划我的校园生活网站,【子任务2-1-1】设计规划我的校园生活网站的布局结构本网站主要采用表格进行布局，这是大多数网站的布局方式。网站的主题栏目有校园新闻、文体活动、情感天地、就业交流、校园掠影、读书园地。网站主页规划的结构如图2-1所示。设计网页尽寸。选择1024768规格,实际尺寸为：1000*。,任务2-1 设计规划我的校园生活网站,图2-1 我的校园生活网站规划布局图,任务2-1 设计规划我的校园生活网站,【子任务2-1-2】收集我的校园生活网站所需要的素材收集的素材包括：1.图片：校园标志图片、校园生活精品图片、文本站标等。2.音乐：代表校园文化的音乐。3.文章：体现校园生活的新闻、情感、就业、摄影、读书、文体活动等资料。【子任务2-1-3】确定“我的校园生活网站”色彩风格网站色彩风格选择清新淡雅色，如灰色、蓝色、绿色，适当渗入红色，体现校园的青春激情。,任务2-2 创建我的校园生活网站站点,【子任务2-2-1】设置本地站点文件夹操作步骤如下：（1）在桌面双击“我的电脑”图标；（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；（3）使用【文件】新建文件夹命令，在硬盘中建立一个新文件夹。（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。例如输入“School”，然后在空白处单击确定，如图2-2所示。,任务2-2 创建我的校园生活网站站点,图2-2 建立并重命名站点文件夹,本项目所用站点文件夹,任务2-2 创建我的校园生活网站站点,【子任务2-2-2】建立站点子文件夹这里我们需要建立2个子文件夹：图片文件夹images、子网页文件夹web。操作步骤如下：（1）在桌面双击“我的电脑”图标；（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；（3）双击打开站点文件夹“School”（4）使用【文件】新建文件夹命令，在站点文件夹“School”中建立一个新文件夹。（5）在新文件上单击右键，选择“重命名”选项，在英文输入法状态下输入子文件夹名称“images”，然后在空白处单击确定。（6）同样方法建立子文件夹“web”。,任务2-3 建立包含网页主体标记的主页文件,网页主体标记为标记。建立主页文件index.html操作步骤如下：（1）启动记事本或其它文本编辑工具。（2）输入如下代码：我的校园生活（3）保存文件Index.html 到站点文件夹E:/School中,任务2-4 应用Dreamweaver表格标记进行网站布局,【子任务2-4-1】根据网站主页布局规划图，设计网站主页表格结构设计网站主页表格结构，如图2-3所示：,图2-3 我的校园生活主页表格结构,任务2-4 应用Dreamweaver表格标记进行网站布局,【子任务2-4-2】应用表格标记实现主页布局表格标记主要有：完成布局的操作步骤如下：（1）应用记事本打开index.html。（2）在主体标记和之间输入如下代码：第1行开始 第5行结束（3）保存文件Index.html。（4）运行Index.html，效果如图2-4所示。（操作演示）,任务2-4 应用Dreamweaver表格标记进行网站布局,图2-4 应用表格布局的index.html文件运行效果图,任务2-5 应用文本格式标记编辑文本,文本格式标记为【子任务2-5-1】编辑导航区文本在第2行内嵌表格的第2列单元格标记与之间，编辑输入导航文字内容：首页校园新闻文体活动情感天地就业交流校园掠影读书园地设置文字格式：字体为宋体，字号为5，颜色为红色（#ff0000），并设该单元格align属性为center，实现代码如下：首页校园掠影运行修改后的index.html文件，局部效果如图2-5所示。（操作演示）,图2-5 导航区文本编辑后运行效果,任务2-5 应用文本格式标记编辑文本,【子任务2-5-2】编辑主体区文本操作步骤如下：（1）在主体表格的第3行第1列单元格标记与 之间内嵌一个3行2列表格，并对第1行，第3行并行单元格合并，代码如下：内嵌表格第1行开始（2）在内嵌表格的第1行的与之间输入“欢迎光临我的校园生活网”并设居中、黑体、4号字、蓝色，代码如下：欢迎光临我的校园生活网,任务2-5 应用文本格式标记编辑文本,（3）在内嵌表格的第2行第1列的与之间，输入网站栏目“校园新闻”、“文体活动”介绍文本，并加项目编号，设为宋体、2号字，栏目名称加粗。代码如下：在第一时间向您报道，校园里所发生的有趣事、感人事、奇异事。：记录校园体育赛事活动、文化交流活动、文娱赛事活动。,任务2-5 应用文本格式标记编辑文本,（4）在内嵌表格的第3行的与之间，输入网站栏目“”、“”、“”、“”介绍文本，并加项目编号，设为宋体、2号字，栏目名称加粗。代码如下：读书园地：这里有古典文学作品品评，这里有现代文学作品欣赏，这里有校园文学精品介绍，这里有网络文学作品推荐，请驻足读书园地。校园掠影：教室、长廊、花园、宿舍、食堂、图书馆、运动场，都留下了我们青春的足迹，校园掠影将为您保留大学校园的美好回忆。情感天地：同学间的情感互助，师生间的真挚友谊，名人爱情故事。情感天地与您分享。就业交流：介绍相关就业政策，帮您提高面试技巧，提高您的自主创业能力。请关注就业交流。,任务2-5 应用文本格式标记编辑文本,主体区文本编辑结束后，局部运行效果如图2-6所示（操作演示）,图2-6 主体区文本编辑结束后局部运行效果图,任务2-5 应用文本格式标记编辑文本,【子任务2-5-3】编辑版权区文本操作步骤如下：（1）在主体表格的第5行单元格标记与 之间，输入版权信息文本“Copyright20102016 版权所有：我的校园生活创意工作室 地址;辽宁省 辽阳市八一街11号 邮编：111000”，并设置文本居中，文本颜色为蓝色，其它参数默认。代码如下：Copyright20102016 版权所有：我的校园生活创意工作室 地址;辽宁省 辽阳市八一街11号 邮编：111000版权区文本编辑结束后，运行的局部效果如图2-7所示：,图2-7 版权区文本编辑结束后运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-1】在标题区插入站标图像站标图像文件为zb1.gif，在站点文件夹的images文件夹下。在主表格第1行第1列的单元格标记与之间插入图像标记，宽度：1000，高度：120。具体代码如下：插入站标图像后运行效果如图2-8所示。,图2-8 在标题区插入站标图像的运行效果,任务2-6 应用图像标记插入图像,【子任务2-6-2】在导航区插入站标文字图像在第2行的内嵌表格的第1列的单元格标记与之间，插入图像标记，宽度：138，高度：45。具体代码如下：在导航区插入站标文字图像后运行效果如图2-9所示。,图2-9在导航区插入站标文字图像后运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-3】在主体文本区插入文字图像在主体区的内嵌表格的第2行第2列单元格标记与之间，插入图像标记，宽度：180，高度：55。具体代码如下：在主体文本区插入文字图像后的运行效果如图2-10所示。,任务2-6 应用图像标记插入图像,图2-10 在主体文本区插入文字图像后的运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-4】在主体图像区插入校园生活精品图片操作步骤如下：（1）在主表格的第4行第1列的单元格标记与之间插入表格标记，表格为2行4列，并将第1行的4个单元格合并。代码如下：内嵌表格第1行,任务2-6 应用图像标记插入图像,（2）在内嵌表格第1行的单元格标记与之间输入文本“校园生活精品图片”，并设置居中、黑体、5号字、蓝色。代码如下：校园生活精品图片（3）在内嵌表格第2行的各单元格标记与之间输入图像标记，并设置图像大小，宽度：168，高度：100，代码如下：在主体图像区插入校园生活精品图片后的运行效果如图2-11所示。,任务2-6 应用图像标记插入图像,图2-11 在主体图像区插入校园生活精品图片后的运行效果图,任务2-6 应用图像标记插入图像,【子任务2-6-5】设置单元格背景图像分别设置导航区、主体区标题等背景。（1）设置导航区所在单元格的背景images/bj2.gif，具体代码如下：首页 校园新闻 文体活动 读书园地 校园掠影 情感天地 就业交流（2）设置主体区标题单元格背景images/bj.gif，具体代码如下：欢迎光临我的校园生活网校园生活精品图片背景图像设置后运行效果如图2-12所示。注意:这里我们适当调整了主体区文本的行间距，使文本更紧凑。,任务2-6 应用图像标记插入图像,图2-12 背景图像设置后运行效果图,任务2-7 应用表单标记制作表单,【子任务2-7-1】设计一名为userinfo的表单,放在主表格的第3行的第2列中，用以收集注册用户的：用户名、密码、性别、教育水平、电子信箱等信息,并将其提交给userlogin.asp页面处理。实现的HTML代码为：操作步骤如下：（1）在主表格的第3行第2列的单元格标记与之间，插入一个2行1列表格，代码如下：内嵌表格第1行 内嵌表格第2行（2）在内嵌表格第1行单元格标记中输入文本“用户注册”，黑体、黄色、4号字、居中。并设单元格背景色为#3366FF（天蓝色）代码如下：用户注册,任务2-7 应用表单标记制作表单,（3）在内嵌表格第2行单元格标记中输入以下表单代码：用 户 名：密 码：性 别：男 女 教育水平：硕士以上 大学本科 大专 中专以下 电子信箱：,任务2-7 应用表单标记制作表单,表单运行结果如图2-13所示。,图2-13 表单运行结果图,任务2-8 应用多媒体标记插入多媒体对像,【子任务2-8-1】制作滚动字幕，用于滚动显示友情链接网站名称，要求垂直向上滚动。该滚动栏用一个2行1列，第1行用于显示“友情链接”，文本颜色为白色，背景颜色为#339999，表格边框宽度为1，边框颜色为#339999。第2行用作文本滚动区域，背景颜色为#eeffee，要滚动的文本是：中央电视台、百度搜索、辽宁教育信息网，人人网，腾讯网。分析：该例实质是设计一个带链接的滚动文本，这可通过 标记符来实现。操作步骤如下：,任务2-8 应用多媒体标记插入多媒体对像,（1）在主表格的第4行第2列单元格标记之间，嵌入一个2行1列表格标记，表格宽度为192，表格边线宽度为1,内嵌表格第2行行距为18pt。实现的HTML代码为：内嵌表格第1行 内嵌表格第2行（2）在内嵌表格的第1行的单元格标记与之间，输入“友情链接”，并设字号为4，颜色为白色，居中对齐。代码如下：友情链接,任务2-8 应用多媒体标记插入多媒体对像,（3）在内嵌表格的第2行的单元格标记与之间输入滚动标记，向上滚动，行程150。其它参数按任务要求执行。代码如下：中央电视台辽宁教育信息百 度 搜 索腾 讯 网人 人 网,任务2-8 应用多媒体标记插入多媒体对像,完成任务的完整代码如下：友情链接 中央电视台辽宁教育信息百 度 搜 索腾 讯 网人 人 网,任务2-8 应用多媒体标记插入多媒体对像,滚动字幕运行效果如图2-14所示。,图2-14滚动字幕运行效果图,任务2-9 制作子网页并应用链接标记建立导航链接,【子任务2-9-1】制作子网页操作步骤如下：（1）在子文件夹web中建立扩展子网页文件，分别为xyxw.html、wthd.html、dsyd.html、xylyhtml、qgtd.html、jyjl.html。（2）在文件编辑软件中打开子网页文件，如dsyd.html。（3）应用所学标记，编辑相关HTML代码。读书园地1.这里有古典文学作品品评2.这里有现代文学作品欣赏3.这里有校园文学精品介绍4.这里有网络文学作品推荐具体制作过程这里不再详述。,任务2-9 制作子网页并应用链接标记建立导航链接,【子任务2-9-2】应用超级链接标记建立导航文本与各子网页的链接超级链接标记为文本或图像建立超级链接的操作步骤如下：（1）将“首页”作为超级链接的文本放在与 之间，并设url为index.html代码如下：首页（2）将“校园新闻”作为超级链接的文本放在与 之间，并设url为web/xyxw.html代码如下：校园新闻（3）采用同样方法，设置“文体天地”、“读书园地”、“校园掠影”、“情感天地”、“就业”的超级链接。代码如下：文体活动读书园地校园掠影情感天地就业交流设置好超级链接后，运行主页，设有超级链接的文本将变蓝，并加上下划线，如图2-13所示。,任务2-9 制作子网页并应用链接标记建立导航链接,【子任务2-9-3】应用超级链接标记建立友情链接，在【子任务8-1】基础上实现对“中央电视台”等网站的访问。要求实现当用户鼠标移入滚动区域时，则停止滚动，移出时继续滚动，当用户单击滚动文本时，则链接到相应的网站。分析：标记支持stop()和start()方法，分别用于控制滚动的停止和开始。当鼠标移入滚动区域时，将触发OnMouseOver事件，当移出时，又会触发OnMouseOut事件，因此，可通过两个事件来分别调用stop()方法和start()方法，从而实现滚动与停止的自动控制。,任务2-9 制作子网页并应用链接标记建立导航链接,这里只修改代码如下：中央电视台辽宁教育信息百 度 搜 索腾 讯 网人 人 网,任务2-9 制作子网页并应用链接标记建立导航链接,在滚动字幕字完成外部链接后，相应文本下将添加下划线，效果如图2-15所示。至此，我的校园生活网站创建完成。对代码进行适当优化，去除不必要的表格边线等。运行效果如图2-16所示：,图2-15 能够实现外部链接的滚动字幕,任务2-9 制作子网页并应用链接标记建立导航链接,图2-16“我的校园生活”网站运行效果图,2.2 我的校园生活网站制作相关知识,知识点2-1 HTML网页的基本组成与特点,HTML是超文本标记语言（Hypertext Mark-up Language）的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言，而是一种描述性的标记语言。所有网页软件都是以HTML为基础，学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中，常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码，此时就必须对HTML标记相当熟悉才行。HTML文件是纯文本文件，能用任意的文本编辑器编辑，如：记事本、写字板、Word、Dreamweaver、Frontpage等。,知识点2-1 HTML网页的基本组成与特点,1.用HTML制作网页的简单实例【实例2-1】制作李白诗望庐山瀑布制作过程：（1）用任何文本编辑器（如记事本、写字板、WORD等）输入下列文本（代码）：李白诗望庐山瀑布望庐山瀑布李白日照香炉生紫烟遥望瀑布挂前川飞流直下三千尺疑是银河落九天（2）以纯文本格式存为2-1.htm文件（假设位置为：E:Item2）。（3）打开浏览器，在地址栏中输入E:Item22-1.htm，就会看到所制作的网页。如图2-17所示。,知识点2-1 HTML网页的基本组成与特点,图2-17 李白诗望庐山瀑布网页效果,知识点2-1 HTML网页的基本组成与特点,启动Dreamweaver后，切换到代码浏览窗口，此时看到的HTML代码，即是网页的基本组成部分，其代码为：李白诗望庐山瀑布从中可见，一个最基本的网页一般由三个部分组成，分别是：（1）标记用于定义网页文件的开始，对应的结束标记为则定义网页的结束。（2）该组标记用于定义网页的头，用来说明文件的一些基本信息，如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。在这里，和标记定义网页的标题，该标题将显示在浏览器的标题栏中。标记有很多用法，这里是用于指定网页所使用的字符集，是可选项。（3）用于定义网页的正文开始，用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间，bgcolor为标记的属性，用于指定网页的背景颜色，text也为标记的属性，用于指定网页正文的前景色。,知识点2-1 HTML网页的基本组成与特点,HTML文件是标准的文本文件，以纯文本形式存放，扩展名为*.htm或*.html。若系统为UNIX系统,则扩展名为*.html。HTML是由若干标记符和文本构成，标记符适用于组织网页的内容和控制输出格式，HTML具有以下几个特点：（1）HTML标记的一般格式HTML标记均是用括起来的，大多数标记是成对出现的，有开始标记和对应的结束标记，结束标记多一根斜杠。许多标记还有属性，用于对标记进行详细设置。HTML标记的一般格式为：例如：但有的标记没有结束标记，称为单标记，如：（2）各属性项间用空格分隔，属性值可用双引号或单引号引起来，也可不引而直接表达。例如控制文本字体的标记为，该标记有face、size、color属性，分别用于控制字体名、字体大小和字体颜色，用法为：字体属性测试（3）HTML标记不区分大小写，与和是相同的。,知识点2-1 HTML网页的基本组成与特点,（4）HTML中一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。例如：2020年,我国将全面建成小康社会！和2020年,我国将全面建成小康社会！都是正确的，且显示效果相同，但HTML标记中的一个单词不能分两行书写，如：2020年,我国将全面建成小康社会！是不正确的。,知识点2-1 HTML网页的基本组成与特点,（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用标记，换段用标记，表示段落开始，表示段落结束。如果源文件中有多个连续空格，显示时也只显示一个，若要显示多个空格，可以使用多个&nbsp。例如：2020年我国将全面建成小康社会！与2020年我国将全面建成小康社会！的浏览器显示效果均为2020年我国将全面建成小康社会！2020年我国将全面建成小康社会!与2020年我国将全面建成小康社会!的浏览器显示效果均为2020年我国将全面建成小康社会!但是，我们注意到时：在源文件中加换行符，虽然显示效果不换行，但在原换行符处会加一个空格。,知识点2-1 HTML网页的基本组成与特点,（6）网页中所有的显示内容都应受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。（7）HTML标记可以嵌套使用，实现从不同角度对文本进行格式控制。嵌套使用时注意不要发生交叉嵌套。比如若要以加粗、居中、红色显示“小康社会”文本，则实现的代码为：小康社会判断是否发生交叉嵌套的方法是：分别将标记符的开始标记和对应结束标记用线连接起来，只要这些连接彼此不相交，则嵌套就正确，否则嵌套错误。比如以下用法就发生了嵌套错误。小康社会各种标记符书写的先后顺序没有特别要求，只要不发生交叉嵌套就行。因此，以下三种用法等效。小康社会小康社会小康社会（8）可以为网页加上注释，如例2-1中即为网页的注释部分，注释可以放在网页开头部分用于说明网页的功能等，或放在某个标记之后对标记加以说明。注释用“！”标记，“”表示注释结束，中间的所有内容表示注释，且可以换行。注释不是必须的，注释的内容不在浏览器中显示出来，仅为设计人员阅读方便。,知识点2-2 文本格式标记,1.文本格式标记文本控制主要是控制文本的字体、字体大小和颜色，这通过标记来实现。格式：文本功能：设置网页中普通文字的显示效果。属性：(1)Face属性用于指定文字字体，如“楷体_GB2312”、“宋体”、“黑体”等。但要注意，浏览器显示的字体与客户端安装的字体有关，如果网页文件中设置了客户端没安装的字体，则以默认的宋体字显示。因此，在使用字体时，应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。(2)color属性用于设置字体的颜色。在HTML中颜色通常用#RRGGBB来表达，RR、GG、BB分别代表红色、绿色、和蓝色的分量值，用十六进制数表示，取值范围为00FF。通过改变三基色的混合量，即可形成各种各样的颜色。另外，颜色也可以用英文单词来表示。下面是常用颜色的取值及英文单词表。表2-1 常用颜色的取值及英文单词表颜色 红色 绿色 蓝色 黄色 黑色 白色 紫色 浅蓝色取值#FF0000#00FF00#0000FF#FFFF00#000000#FFFFFF#FF00FF#00FFFF单词 Red Green Blue Yellow Black White Purple Aqua,知识点2-2 文本格式标记,(3)size属性用于指定字体的大小。字体大小的表达方法有两种，一是设置为绝对字号，此时的设置值可以是1号，1号最小，7号最大，默认字号为3，可利用设置或更改默认字号。例如，若要以蓝色，宋体2号字输出“网页设计技术”，则实现的代码为：网页设计技术另一种是设置为相对字号大小，此时的用法为，其中n代表字号改变的量，+表示字体在默认字号的基础上增大几号，-表示在默认字号的基础上递减几号字。例如：网页设计技术,知识点2-2 文本格式标记,2.标题格式标记标题格式使用标记控制。格式：标题文本功能：用于定义文章内章节标题的显示格式，同时包括了标题的字体、大小、和段落间距。说明：n表示标题字号，共六级，分别是1，2，3，4，5，6，数字越大，字号越小。Align表示水平对齐方式，取值为left、right或center。【例2-2】在网页中分别用六级标题标记符输出一个测试效果文本。实现的代码为：演示标题字体这是第一级标题这是第二级标题这是第三级标题这是第四级标题这是第五级标题这是第六级标题,知识点2-2 文本格式标记,标题字体运行效果如图2-18所示。,图2-18 标题字体演示图注意：用该标记实现的文章标题效果有限，通常还是用FONT标记实现文章实际标题的丰富多彩效果。,知识点2-2 文本格式标记,3.字体效果（字型设置）标记HTML中还定义了一些用于改变字体效果的标记符，常用的有加粗、斜体、加下划线等。各种标记的格式和具体功能如表2-2所示：注意：不要频繁使用各种效果，太花哨的网页反而会引起读者的反感。一些浏览器不能正常显示某些效果，如加粗和斜体时却加了下划线或反向显示，或忽略。可以将几种效果混用，如：霜叶红于二月花,知识点2-2 文本格式标记,表2-2 字体效果标记表,知识点2-3 版面控制标记,1.网页整体风格控制（文件主体）标记对网页整体风格的控制主要通过文件主体标记及其相关属性来实现。格式：功能：设置文件主体。属性：(1)background 设置网页背景图像，图像以平铺方式作为网页背景。image-url是图像文件的路径。例如，若要用images/bg.gif作为网页的背景图像，则设置方法为：(2)bgcolor 设置网页的背景颜色，默认为白色。(3)text 设置网页非超链接文字的色彩，默认为黑色。(4)link 设置网页超链接文字的色彩，默认为蓝色。alink 设置网页活动链接文字的色彩，默认为蓝色。vlink 设置网页已访问过链接的文字色彩，默认为蓝色。(5)leftmargin 设置页面左边空白。topmargin 设置页面上边空白。value 是空白量，可以是数值，也可以是相对页面窗口宽度和高度的百分比。(6)bgproperties 该属性只有一个取值，即为FIXED，用于锁定网页的背景图像。锁定后，当前滚动页面时，背景图片就不会跟着滚动了。例如：说明：(1)body标记说明文件的主体，可以省略，中间可以插入其他标记和文字。(2)其属性可以省略，也可以有一个或多个。,知识点2-3 版面控制标记,2.段落标记格式：功能：设置文章段落开始和结束。属性：align是水平对齐方式，取值为left、right或center。说明：段落结束标记可以省略，因为一个段落的开始表示上一个段落的结束。例如：白日依山尽黄河入海流和白日依山尽黄河入海流都是合法的，显示效果一样。注意：HTML中显示文字的分段不能通过源文件中的回车来实现。,知识点2-3 版面控制标记,3.换行标记格式：功能：另起一行显示文字。说明：(1)该标记是单标记。(2)标记标记中在显示效果上都是另起一行书写。它们的不同之处是标记的行距较大，标记的行距较小。另外换行后的文本与前面的文本仍属同一段落，因此换行后字符和段落格式不会改变，这也与标记不同。(3)为保证某一单词的完整性，有时需要禁止在某处换行，此时可使用标记来实现。其用法为：文本该标记符作用的文本将在同一行显示，若一行显示不下，则超出部分将被裁剪掉。,知识点2-3 版面控制标记,4.文本对齐方式标记格式：文本功能：设置多个段落的文本居中、居左、或者居右。属性：align是水平对齐方式，取值为center、left、或right。说明：(1)对齐方式可以在多个标记中实现，如、等。如果多个段落有相同的对齐方式，则可以将这些段落嵌套进、之中。(2)如果多个段落居中，还可以使用center标记，格式为：多个段落文本,知识点2-3 版面控制标记,5.画线标记格式：功能：在页面上画横线。属性：(1)width用于指定横线的宽度，宽度值的指定方式有两种，一种是用像素点来指定，如50、100、200、500等，这种方式当窗口大小改变时，横线宽度不变。例如：另一种方式是用相对窗口的百分比来表示，如50%、75%、100%，默认是100%。例如：(2)size用于指定横线的高度，其值可以是绝对点数或相对百分比。默认高度为1。(3)align用于指定横线水平位置，取值为left、right或center，默认是center。(4)color用于指定横线的颜色。(5)noshade用于指定横线是否有阴影。若带有此参数则横线无阴影。说明：(1)标记一般用于产生水平分隔线，若要产生竖线，可将width设置为1,size设置为竖直线的高度值。例如：(2)当width与size值都较大时，可以产生长方形或正方形图形。例如：(3)产生的横线在预览输出后才能完全看到效果。,知识点2-4 图像标记,在网页中插入图像使用标记来实现，没有对应的结束标记。格式：功能：在当前位置插入图像。属性：(1)src 要插入的图像文件的URL地址，通常图像的格式为jpg或gif。(2)alt 当图像无法显示时所给出的提示文本。(3)longdesc关于图像的详细说明。(4)width 图像的宽度，可以为点数或相对窗口宽度的百分比。(5)height 图像的高度，可以为点数或相对窗口宽度的百分比。(6)boder 图像的边框宽度，其值为非负整数。(7)hspace 水平方向空白（图像左右留多少空白）。(8)vspace 垂直方向空白（图像上下留多少空白）。,知识点2-4 图像标记,(9)align用于设置图像的对齐与布局。可设置为left、right或center等，使图像向页面窗口的左边、右边或中间对齐，图像附近的文本在图像右或左侧环绕。align还可以是其他取值，则指定图像与文本在垂直方向上的相对对齐方式，取值与对应的含义为：Top 将文本行中的最高字符的顶端与图像的顶端对齐Texttop 该项的功能与top相同Middle 使当前行的基准线与图像的中线对齐Absmiddle 使当前行的中线与图像的中线对齐Baseline 使图像的基准线与当前的基准线对齐Bottom 使图像的底部与当前基准线对齐Absbottom 使图像的底部与当前的底部对齐说明：图像的宽度与高度指图像显示时的大小，与图像的真实大小无关。例如：在网页的当前位置插入images/flower.jpg图形，宽度为300，高度为200，边框宽度设置为1，图像放在页面的右边，则实现的代码为：,知识点2-5 超链接标记,具备超链接能力是HTML的最大优势，利用超链接可实现由一个网页切换到另一个网页，或跳转到同一网页的某一个指定地方，也可由一个网页跳到另一个网站，可以说，利用超链接能链接到世界的任何一个地方。1.超链接的定义格式：文本或图像属性：(1)href 要链接到目标的url地址。(2)url 要链接到的网站、网页（包括同一站点内的网页文件、图像文件等）或电子邮件，可以是绝对地址（用于外部链接），也可以是相对地址（用于内部链接），如http:/,research.htm,images/chinamap.jpg,mailto:等。(3)target 指出要显示超链接内容的窗口名，默认时在当前窗口中显示。window_name 显示超链接内容的窗口名，如果该窗口不存在，则打开一个新窗口。,知识点2-5 超链接标记,说明：(1)建立超链接时，标记中间可以嵌套其他标记，如图像标记、文本格式标记等。(2)超链接标志一般呈蓝色显示，当鼠标停在上面时，会显示为手形鼠标指针，表示它是一个链接，当用户单击时，就会跳转到url指定的目标。例如：百度搜索单击百度搜索，打开一个名为baidu的新窗口，在其中显示百度主页。关于本站单击关于本站时，将在当前窗口显示当前目录下的introself.htm文件。中国地图单击中国地图时，将在当前窗口中显示images目录下的chinamap.jpg图像。联系我们单击联系我们时，将打开电子邮件软件，收件人地址为，可以给他写信了。用图像链接到清华大学网站,知识点2-5 超链接标记,2.定义锚点若要跳转到网页的某一指定位置，则必须事先在该位置定义一个锚点(anchor)，锚点主要起位置标识的作用。定义锚点用标记的name属性来实现。定义格式：定义好后，若要链接到网页的某一锚点，则要用标记链接。链接格式：文本比如：要链接到vbscript.htm网页的vbkey1锚点，则链接的方法为：文本若要链接到当前网页的某一个锚点，则网页名可以缺省，而直接用锚点名来链接，其格式为：文本注意：在需要定义锚的地方，加上代码即可，锚名要唯一，不要重复。,知识点2-6 表格标记,表格是HTML网页的一个非常重要的元素，除了规范数据的输出外，在网页设计中，常常用来进行版面布局的设计和定位。1.定义表格表格是由多个部分构成的，因此定义表格时，将用到多种标记符，这些标记符是：（1）定义表格的开始和结束。（2）定义表格标题的开始和结束。（3）定义表格行的开始与结束，一组和产生一个表格行。（4）定义单元格的开始与结束，一组和产生一个单元格。在和之间的部分，即为该单元格显示的数据，若该单元格无数据，显示为空，则应表达为&nbsp。（5）定义表头(表格第一行)单元格的开始与结束，一组和产生一个表头单元格。和之间的部分，即为单元格所显示的数据，该数据以加粗居中方式显示。表头也可不用标记产生，而直接用标记来产生。,知识点2-6 表格标记,2.表格标记的属性对表格的更详细控制，可通过表格标记符的相关属性来实现。(1)标记的属性标记的属性用于从整体上控制表格的外观和形状，常用的主要有：width、height属性：该组属性用于设置表格的宽度和高度。其宽度或高度值可用像素值表示，也可用百分数表示。例如，若要产生宽度为800，高度为400像素的表格，则定义方法为：若要产生一个宽度是网页宽度的85%的表格，则定义的方法为：border属性:定义表格边框的边线的宽度。若设置为0或不设置，则为无边框的表格。若要产生一个宽度为800，边线宽度为1的表格，则定义方法为：bgcolor、bordercolor属性：bgcolor用于设置整个表格的背景颜色；bgcolor属性对于和标记也有效，作用于标记时，用于设置该行的背景颜色；作用于标记，则设置该单元格的背景颜色。bordercolor用于设置表格的边框颜色，只有在border属性设置为非0时有效。background属性：用于设置表格的背景图像。设置表格的背景图像后，表格的背景颜色失效。例如：若要设置表格的背景图像为images/bg.jpg，则设置方法为：cellpadding、cellspacing属性：cellpadding属性用于设置单元格中的文本与表格边线的间距；cellspacing属性用于设置表格的各单元格之间的间距。例如：若要设置单元格间距为1，单元格文本与表格边线的间距为2，则设置方法为：align属性：用于设置表格在网页中的对齐方式，取值有 left、center和right。例如：若要设置表格在网页中居中，则设置方法为：,知识点2-6 表格标记,(2)标记的属性标记常用的属性主要有bgcolor和align，分别用于设置该行的背景颜色和文本的对齐方式，利用的bgcolor属性，可以实现不同行显示不同的背景颜色。(3)标记的属性标记常用的属性主要有bgcolor、bordercolor、width、height、align和valign,分别用于设置该单元格的背景颜色、单元格的边框颜色、宽度、高度、单元格文本在水平方向的对齐方式和在垂直方向的对齐方式。,知识点2-6 表格标记,【实例2-3】试用HTML标记产生图2-19所示的表格。表格宽度为400，各行的行高为24，表格在网页中居中对齐；表头背景颜色为#0000CC，表头文本颜色为#FFFFFF，表格边框宽度为1，边框颜色为#0099CC；各数据项均居中对齐，第1列的宽度为53，第2列的宽度为116，第3列宽度为134，第4列宽度为87。,知识点2-6 表格标记,图2-19 表格,知识点2-6 表格标记,实现的HTML代码为：ID UserName Password State 001 zhang zh09855&1 002 wang 86$0%!1 0,知识点2-6 表格标记,【实例2-4】试产生一个2行3列，宽度400，边线宽度为1的表格，然后将第1行的第2和3两个单元格合并。实现的HTML代码为：第1行1列这是合并后的单元格第2行1列第2行2列第2行3列,知识点2-6 表格标记,图2-20 表格的跨列合并,产生的表格效果如图2-20所示。,知识点2-6 表格标记,(2)行合并行合并通过标记的rowspan属性来实现，其用法为：文本【实例2-5】试产生一个3行3列，宽度为400，边线宽度为1的表格，然后将第1列的第1行和第2行的两个单元格合并。实现的HTML代码为：第1、2行合并后的单元格 第1行2列 第1行3列 第2行2列 第2行3列,知识点2-6 表格标记,图2-21 表格的跨行合并,产生的表格效果如图2-21所示。,若要同时跨行和跨列合并，只需同时使用rowspan和colspan属性即可。,知识点2-7 表单标记,为了提高网页的交互性，收集用户在网页中输入的信息，HTML专门提供了表单，在表单中可以添加使用命令按钮、文本框、密码输入框、复选框、单选钮、列表框、组合框等界面对象，以便接收用户输入的数据。利用表单可以集中管理这些界面对象，并提供提交和重置数据的方法。,知识点2-7 表单标记,1.表单的定义(1)表单的定义方法在HTML中，表单利用和标记定义。格式：,知识点2-7 表单标记,（2）表单的属性 Name属性：用于定义表单对象的名称。定义表单对象名后，可方便程序中引用表单中的对象，为可选项。若将表单的对象定义为thisform，在程序中就可通过以下方式来访问或设置表单中界面对象的值：Document.thisform.界面对象名.value 表单中界面对象的值由value属性来设置或返回。Document是浏览器提供的一个对象，代表当前页面，可直接访问。,知识点2-7 表单标记,（2）表单的属性 Method属性：用于设置表单提交数据的方法