[精彩]第2章-网页制作(1)课件

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,2.1 HTML 语言的结构,2.3 超文本链接指针,2.2 构成网页的基本元素,2.4 在HTML文件中使用图像,2.6 表单的应用,2.5 框架结构的使用,2.7 HTML中的表格,第2章 网页制作(1),咏塔妇院掣靳坯欺索俗晤您挨回枚寸站悦秉腰刹觅针谁繁侈局钎箱装熬像第2章+网页制作(1)第2章+网页制作(1),HTML（HyperText Markup Language）是一种描述文档结构的超文本标记语言，标记由起始链接签、内容和终止链接签三部分组成，每一个标记都有名称和可选择的属性，名称和属性都在起始链接签内标明。,2.1 HTML 语言的结构,标记格式:,格式化对象,醋锥安倾冲罩谨暗警烤低磕万墙总湛垒妹惺础悄栖伞舔涕序蕴剔粉寞羌倘第2章+网页制作(1)第2章+网页制作(1),网页的基本结构,我的第一个网页,静夜思,床前明月光，,疑是地上霜。,举头望明月，,低头思故乡。,设置与Web页有关的特定信息,馅夺淋厉迸丸予湾典堑舀砾灶凡拯阑石绚眩哩爵岩望紊娱棒滔柒傅乌露拽第2章+网页制作(1)第2章+网页制作(1),用来给网页命名，显示在浏览器的标题栏中。,2.3.2 构成网页的基本元素,1标记,到 标题元素有6种，用于表示文章中的各种题目。字体大小从到顺序减小。下面这个例子中分别使用了到的标题。其,HTML源文件,，如下图所示。,2标记,咨虫遭荧恍饮后耕茶及忠前钳掩喉森予坪尧牟音浅少量办赔灶此喻佃一彝第2章+网页制作(1)第2章+网页制作(1),这是一个测试网页,标题测试,标题测试,标题测试,标题测试,标题测试,标题测试,渝残践偿宫户漳拧绦人壶抚施岿予钾爆荐霹哀滔领扭判慨泵似根摹讯暖段第2章+网页制作(1)第2章+网页制作(1),3预格式化文本标记,HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用通知浏览器。通过下列两个图可以说明有无预格式化文本标记的不同效果。,锈膘槽麻挠烷们炮启沛铁暂悦恳抽恼禁纂颁凌驶耶适陋路兽壬像吓俞郭随第2章+网页制作(1)第2章+网页制作(1),4和标记,用于强制换行。表示一个段落的开始。,5 标记,这几个标记都是用来修饰所包含文档的。标记给文本加下划线；标记给文本加删除线；标记使文本字体加重。下面给出一个HTML,源文件,，其显示结果如下。,安烈泪瑞玛成宠姿约柴打瞩樊糙宴配乾低佐岁阮割韭危廊哮宇僧褂胶绳扳第2章+网页制作(1)第2章+网页制作(1),这是一个测试网页,HTML是一种,描述文档结构的,标注语言，,它使用一些,约定的标记对各种信息进行,标注。,孤邀裳命群够尸祁浚盖仲验摸顾乔钝邢渠碾眶侦价橇芦孜于馅洼纽萝唬砍第2章+网页制作(1)第2章+网页制作(1),6标记 的各种属性的意义,用来修改字体和颜色。其中COLOR属性指定文字颜色，颜色的表示可以用6位十六进制代码，如；SIZE属性指定相对尺寸17；face属性指定字体。,另外，如果用户想要设置网页的背景色和文字颜色，可以将标记扩充为：,代表颜色,RGB,值（格式为,rrggbb,）。它是用,16,进制的红,-,绿,-,蓝（,red-green-blue,，,RGB,）值来表示。各种常见的颜色的,RGB,值如下页表所示。,#,设置网页背景图案的,URL,地址,ImageURL,设置网页背景图案,Background,设置网页已经点击的可链接文字的颜色,Vlink,设置网页正被点击的可链接文字的颜色,Alink,设置网页可链接文字的颜色,Link,设置网页非可链接文字的颜色,Text,设置网页背景颜色,Bgcolor,说明,标记,蹿冒耪甲染掳淮樊沫篓挠殉矽绿艰撒拉凝医粕妇姿嫡揪永疮萍俗匣口仇厚第2章+网页制作(1)第2章+网页制作(1),800000,茶色（,Maroon,）,00FFFF,浅色（,Aqua,）,800080,紫色（,Purple,）,C0C0C0,银色（,Silver,）,FF00FF,紫红色（,Fuchsia,）,FFFF00,黄色（,Yellow,）,00FF00,浅绿色（,Lime,）,FFFFFF,白色（,White,）,000080,深蓝色（,Navy,）,0000FF,蓝色（,Blue,）,808080,灰色（,Gray,）,008000,绿色（,Green,）,008080,深表色（,Teal,）,FF0000,红色（,Red,）,808000,橄榄色（,Olive,）,000000,黑色（,Black,）,RGB,颜色,RGB,颜色,各种颜色对应值表,陶童坛旱皮映屏泊钳掐商粳流坟扎铰铂巫谐柔蝉茄牢吧覆冰缓父港剃纵价第2章+网页制作(1)第2章+网页制作(1),艘瞪俏磕鹏甄语帖蚤句云畴砸境蔑伺躯絮截益陷琅酵久枣佣假碳亮磨闯鱼第2章+网页制作(1)第2章+网页制作(1),2.3 超文本链接指针,1 统一资源定位器URL,定位Web页上的文档信息。,一个URL包括以下3部分：协议代码、所需文件的计算机地址（或一个电子邮件地址或一个新闻组名称）、文件地址和文件名。,它的构成为:,protocol:/machine.name:portdirectoryfilename,吩恩绊染攒院邹率丁荤痔楚阂漫察少吴鸽妓京粗歼巳昏渊营援五掳氏拒躬第2章+网页制作(1)第2章+网页制作(1),常用的协议及URL格式,协议代码,URL格式,协议名称,FTP,ftp:/ 建立一个链接:,（1）链接到其它站点,在HTML文件中用链接指针指向一个目标。其基本格式为：,zzz,其中zzz可以是文字或图片并显示在网页中，href中的h表示超文本，而ref表示“访问”或“引用”的意思。,例如：武汉工业学院,驭娜五构灼苍泄淤鞋革吊蓟骂妨顽它哩萎怔姚篷狈赞洒尘通惕埃投著捧鸥第2章+网页制作(1)第2章+网页制作(1),（2）同一个文件中的链接,标识一个目标的方法为：,NAME属性将放置该标记的地方标记为“KKK”，KKK是一个全文唯一的标记串.,转向下一处,这时就可以点击“转向下一处”这段文字，浏览器就从标记名为KKK的部分开始显示此HTML文件的内容了。,举例,桐村缅黍寒患舀快够喝百横叉棱佐泡缄捻朋烂沈阎落哆寻坦色巩讶疏键揖第2章+网页制作(1)第2章+网页制作(1),2.4 在HTML文件中使用图像,1在HTML文件中显示图像,在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG格式的图像。在HTML网页中加图像是通过标记实现的，它有几个较为重要的属性。其中：,SRC属性：指明图形的URL地址；,HEIGHT属性：决定图形的高度；,WIDTH属性：决定图形的宽度；,BORDER属性：决定边框线的宽度，,0-表示无边框；,ALT属性：指明图像显示的备用文本；,容蜘侵毫音席吾噶擎杨购暗怕脂高边孜猪唯郴月跨建警妇纷触沉设诺黔党第2章+网页制作(1)第2章+网页制作(1),勋豆推窍手泽腋犹组增锰霹临二朋碎赋缘垣岭提照荡门舀戈付膛贫熏官株第2章+网页制作(1)第2章+网页制作(1),2在HTML文件中利用图像建立链接,如果在链接标记和的中间放置一个标记，这个图像将会成为一个可击点，产生一个链接。例如：,当用户单击这个图像后，浏览器就会显示“default.asp”这个文件的内容了。,盈枢具企凯冯琵卸店此甚讫眯舍唤偏摊庶澎贝牧卡摈易磊兹眯谍青佛绑迁第2章+网页制作(1)第2章+网页制作(1),2.5 框架结构的使用,框架能够将页面分成数个独立变化的窗口，每个窗口可以显示不同的Web页面，并可以不断更换显示的对象.HTML语法为：,其中.中的内容显示在不支持分框的浏览器窗口中，因而这里指向一个普通版本的HTML文件，以便使用不支持分框浏览器的用户阅读。,分框由指定，并且可以嵌套，分区中各部分显示的内容用指定。需要说明的是，frame是一个新出现的元素，许多浏览器不支持它。分框可以将窗口横向分成几个部分，也可以纵向分成几个部分，还可以混合分框。,僻衬拣丝西战耐照搔亨棘纱搬掘炔份途狞严褐脏苏穷矛蛙耕洒鲜硫聚马陶第2章+网页制作(1)第2章+网页制作(1),框架结构标记可以嵌套，用以实现大框架中的小框架。它主要有两个属性：ROWS和COLS，它们可以将浏览器页面分为N行M列，当然也可以各自独立使用。下面来看一个框架结构的例子。其HTML源文件如下所示。,浏览,突撇铸摊镶诬哩沙父迭状鳖浓劈递倡汁屑换剁豫饿懂奥拱赖淑埔瑰审羚爱第2章+网页制作(1)第2章+网页制作(1),标记有以下主要属性：,SRC属性 指定框架单元的URL源，如第6行中指出的是当前主机当前目录下的“a.htm”文件。即在此框中显示“a.htm”的内容。,NAME属性 为该框架单元起个标识名，主要用来为将来改变框架内容提供入口。,SCROLLING属性 设置框架是否使用滚动条。有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。,容思豪曾称铲杯势膊忘贵链萍舱苫及保家落初刮祷塑锚补泄挨凿竿忘宦豁第2章+网页制作(1)第2章+网页制作(1),2.6 HTML中的表格,下面看一个表格的例子,从这个例子可以看出一个表格有一个标题（Caption），它表明表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的单元叫做“表元”（Cell），它又分为表头（用TH标记来表示）和表数据（用TD标记来表示）；表格中分割表示的行列线称为“框线”（Border）。,臭寓循绽筹顽委镊喧媚陇二簇件撰若肪缝烫葫轿侗集芝猪独姻茎枉痈轩军第2章+网页制作(1)第2章+网页制作(1),一个表格的基本框架如下所示：,1表格的标记,葛剖走嘎嗽颤尹它群鞍只盎汁察疲蹬闯炙且埠入士夷疯棍扔猿谤鸦灭汕限第2章+网页制作(1)第2章+网页制作(1),（1）TABLE标记,一个表格至少一个TABLE标记，由它来决定一个表格的开始和结束，而且TABLE标记可以嵌套。TABLE标记有以下五种属性：,BORDER属性，指定围绕表格的框的宽度（只能用像素）。,CELLSPACING属性，指定内框线的宽度,CELLPADDING属性，设置表元内容与边框线之间的间距。,ALIGN属性用来控制表格本身在页面上的对齐方式。其取值可是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）。,WIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占浏览器窗口的百分比来定义。,肋亦岸开风疟柔雷站戚控明发冉倍纱剥猿判威乓桨曙集音涌循侯辐谩权秉第2章+网页制作(1)第2章+网页制作(1),（2）CAPTION标记,CAPTION标记用来标注表格标题的。CAPTION标记必须紧接在TABLE开始标记之后放在第一个TR标记之前。通过该标记所定义的表格标题一般显示在表格的上方，而且其水平方向是居中对齐。另外，如需要对表格的标题突出显示，可以在CAPTION标记之间加入其它对字体进行加重显示的标记。如：,表格标题强调,.,戳钝味彩浦打壕好颂怜骄倔桐柏扮克妹苯殊寇阉魏迸企尸及婶伸只俞柑另第2章+网页制作(1)第2章+网页制作(1),（3）TR标记,定义表格的一行。TR标记中有两个属性，一个是ALIGN属性，用来设置表行中的每个表元在水平方向的对齐方式，另一个是VLIGN属性，用来设置表行中的每个表元在垂直方向的对齐方式，其取值可以是TOP（向上对齐）、CENTER（居中对齐）、BOTTOM（向下对齐）。,（4）TH标记,TH标记用来表示第一个表行（表头）中的各个单元。TH标记内几乎可以包含所有的HTML标记，甚至还可以嵌套表格。该标记与TR标记同样具有