网页制作与设计教案 第2章

2020/7/151电子商务网页制作技术主讲教师李兴旺第2章超文本标记语言HTML主讲教师李兴旺本章要点HTML语言概述HTML语言的基本结构用HTML代码编写网页上的基本元素表格以及表格相关的代码编写方法用手写代码制作复杂框架结构的页面HTML语言的常用标识2.1初识HTML1．HTML语言简介2．HTML文件基本架构1．HTML语言简介HTML超文本标识语言HTML是一种建立网页文件的语言，通过对各种标记式的指令、元素、属性、对象等的定义，将影像、声音、图片、文字等连接显示出来。HTML标记由和所括住的指令，主要分为单标记指令、双标记指令（由起始标记和/结束标记所构成)。1．HTML语言简介HTML语言的三种形式标记，非封闭的类型。很少用，最常用的如换行标记br。标记对象/标记，封闭类型。大多数标记都是封闭类型的。封闭类型的标记都是成对出现。标记属性1=参数1标记属性2=参数2对象/标记，封闭类型的扩展形式，后面的各种属性参数可以进一步设置对象在某方面的内容。说明几乎所有的HTML代码都是由上面三种形式组合而成的，标记之间可以相互嵌套，形成更为复杂的语法。1．HTML语言简介HTML文件组成一个完整的HTML文件由head和body两部分组成。head部分包含标题、网页语言等基本信息，还可包含作者信息、网页关键字、网页说明等；body部分其中的内容是网页显示的主要内容，由表格、图片、表单等各种对象组成。1．HTML语言简介说明一可以使用任何文本编辑器打开、浏览、编辑HTML代码，最简单的是Windows自带的记事本。说明二HTML文件编辑完成后以.htm或.html为文件后缀保存，可由浏览器打开显示。说明三习惯上一个网站的首页名称通常为index.htm或index.html。2．HTML文件基本架构HTML文件的基本架构：HTML文件开始HEAD文件头开始TITLE.../TITLE标题区/HEAD文件头结束BODY文本区开始......文本区内容/BODY文本区结束/HTML文件结束网页的头部网页的主体内容HTML文件标识2.2HTML的简单应用1．编写第一个网页2．注意事项1．编写第一个网页使用记事本编写第一个网页，步骤如下：选择【开始】/【所有程序】/【附件】/【记事本】”命令，打开记事本程序。在记事本中输入HTML代码。保存文件，在保存类型中选择【所有文件】，在编码中选择ANSI，文件名设为“myfirst.htm”。关闭记事本，回到存盘的文件夹，双击myfirst.htm文件，在InternertExplore浏览器中浏览页面。第一个网页的代码及页面效果htmlheadtitle初识HTML语言/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/headbodyp我的第一个HTML文件/p/body/html2．注意事项“”、“”是任何标记的开始和结束。标记与标记之间可以嵌套。在源代码中不区分大小写。任何换行和空格在源代码里面不起作用。HTML标记中可以放置各种属性。可以在源代码中添加注释，注释以“!--”开始，以“--”结束。2.3添加各种网页元素2.3.1向页面中添加文字2.3.2设置页面中的标题2.3.3设置页面的背景颜色和背景图片2.3.4在页面中插入图片2.3.5设置文字和图片链接2.3.6给网页加上声音2.3.1向页面中添加文字（1）将需要添加的文字输入到body与/body标识之间。（2）pre/pre是“原样显示文本”的标识。（3）br称为行中断标识。标识后面的内容另起一行显示。（4）段落标识p/p分别放在段首和段尾。p/p比br多一行空行，也就是空一行，再另起一行显示文本内容。2.3.1向页面中添加文字（5）font/font是字体标识，对标识中的文本字体起控制作用，有“size”和“color两个属性：“size”表示字体的大小。“color表示字体的颜色。（6）在文字前后加上b/b标识，可以使文字加粗显示。b/b为粗体显示标识；i/i为斜体显示标识；u/u为带下划线显示标识。（7）center与/center是居中显示标识。应用上述标识后的完整程序htmlheadtitle/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/headbodycenterfontsize=6color=redb西红柿/b/fontbr/center[名称]西红柿br[性味]味酸甘、性微寒。br[归经]入心、肺、胃经。br[作用]润肺生津、和胃止渴。用于暑热烦渴、咽干、恶心欲吐、厌食、大便秘结、小便黄赤等。br[成分]含大量维生素C、A、B1、B2、及磷、铁、钙等，还含有较多的苹果酸、柠檬酸等有机酸。现代医学研究证实，它有抗衰老、降压、褪色素的作用。br/body/html2.3.2设置页面中的标题在title/title标识中输入网页的标题文字，并进行相应的设置。说明在Dreamweaver中输入的标题文字实际就是被解析到了title/title标识中。2.3.3设置页面的背景颜色和背景图片通过bgcolor属性可设置页面的背景颜色。例如：输入“bgcolor=red”或者“bgcolor=blue”，页面的背景就能按照输入显示成红色或者蓝色。通过background属性可设置页面的背景图片。例如：将光盘的“tomato.gif”图片文件复制到用户站点文件夹下的“\img\1”目录中，进行如下设置：background=img/1/tomato.gif设置网页背景图片应用举例源文件页面效果2.3.4在页面中插入图片在body标识之后，文字之前的位置输入代码imgsrc=img/1/tomato1.jpgalt=西红柿width=150height=112源文件页面效果2.3.4在页面中插入图片说明“img”表示插入一张图片；“src”属性的值是图片文件的路径；“src=img/1/tomato1.jpg”表示插入的是与本文件在同目录下的“img\1\tomato1.jpg”文件；“alt”后面是图片的说明文字，在浏览器中当鼠标移到图片上时会显示出图片的说明文字；“width”和“height”是图片的宽度和高度信息，单位是像素。（3）“align”是图片的位置属性，在img标识中加入“align=left”代码可使图片移到行的最左面，文字移到与图片同一行。将“align”的值设为“right”可使图片出现在行的最右侧。源文件页面效果2.3.5设置文字和图片链接1．设置文字链接2．设置图片链接1．设置文字链接在HTML语言中，超级链接的标识是ahref=链接目标路径链接文字/a。源文件页面效果1．设置文字链接设置一个“Target=_blank”属性，可使链接文件在一个新弹出的窗口中打开。源文件页面效果2．设置图片链接在HTML语言中，超级链接的标识是ahref=链接目标路径链接图片/a。源文件页面效果2．设置图片链接通过“border”属性可以设置超级链接图片周围的边框。例如：设置“border=0”可以去掉图片链接的边框。2．设置图片链接添加“Target=_blank”可使链接的图片在新窗口中打开。源文件页面效果2.3.6给网页加上声音将音乐文件“music.mid”复制站点文件夹的相应目录下。在body与/body之间任何位置加入代码“embedsrc=sound/music.midautostart=trueloop=truewidth=100height=100”。源文件页面效果2.4表格的使用2.4.1插入表格2.4.2合并单元格2.4.3拆分单元格2.4.1插入表格源文件页面效果2.4.2合并单元格列合并源文件页面效果2.4.2合并单元格行合并源文件页面效果2.4.3拆分单元格找到单元格的td/td标识，在里面插入如下所示的一个2行1列表格的代码。源文件页面效果2.5框架结构页面的制作2.5.1基本结构2.5.2框架的各种属性2.5.3框架结构之间的链接2.5.1基本结构htmlheadtitle框架结构/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/headframesetrows=150,*framesrc=frametop.htmname=topframesrc=framedown.htmname=down/frameset/html源文件页面效果2.5.1基本结构在框架中再分框架源文件页面效果2.5.2框架的各种属性（1）在frame尖括号中加上“noresize”这个属性可以使浏览者无法改变边框的大小。（2）在frameset标识的尖括号中加上“frameborder=0”，可以隐藏这个框架中各个分框架的边框线（3）改变边框的粗细，需要先将“frameborder”属性设为“yes”，再设置一个“border”属性，将它的数值设为具体宽度数值即可。（4）在frameset标识的尖括号中加“bordercolor”属性，可以改变边框线的颜色。2.5.3框架结构之间的链接HTML的代码一般形式：“ahref=链接目标文件的路径target=目标框架名称链接文字或图片/a”说明在框架结构的页面中做超级链接，和普通页面中的超级链接类似，只是框架结构页面的超级链接可以在同一屏幕上的其他框架中打开，这时“target”属性的值要设为目标框架的“name”属性的值。2.6其他HTML标记一览1．Web页面结构纲要2．链接标识3．列表标识4．格式化标识5．段落类标识6．位置类标记7．表格类标识8．表单类标识1．Web页面结构纲要htmlheadtitle页面标题/title/headbody……网页主体内容/body/html2．链接标识外部链接ahref=目标文件路径链接文本/a锚点链接aname=锚点名称链接文本/a电子邮件ahref＝“mailto:电子邮件地址”链接文本/a3．列表标识（1）编号列表ULLI第一项LI第二项……/UL（2）符合列表OLLI第一个符号LI第二个符号……/OL4．格式化标识粗体：B要显示为粗体的文本/B斜体：I要显示为斜体的文本/I下划线：U要显示为带下划线的文本/U预格式化：PRE定义好的文本/PRE上标字：sup要显示为上标的文本/sup下标字：sub要显示为下标的文本/sub5．段落类标识新段落：P/P水平线：HR换行符：BR6．位置类标记居中显示center要居中显示的文本/center居左显示palign=center要居左显示的文本/p居右显示palign=right要居右显示的文本/p7．表格类标识（1）基本表格标识tabletrtd第一个单元格中的内容/tdtd第二个单元格中的内容/td/tr/table（2）表格中的位置标识水平对齐tdalign=left|center|ri