网页建设与维护

网站建设与维护--电子商务专业课程改革成果教材/徐芳一、网页与网站网页2网站是网页的集合，通常一个网站是由众多不同内容的网页组成的。网页是网站的基本信息单位，是网上的各个超文本文件。网站1那么什么是超文本文件呢?二、HTML概述HTML标签2•HTML指的是超文本标记语言(HyperTextMarkupLanguage)•HTML不是一种编程语言，而是一种标记语言(markuplanguage)•标记语言是一套标记标签(markuptag)•HTML使用标记标签来描述网页•HTML标签是由尖括号包围的关键词，比如html•HTML标签通常是成对出现的，比如b和/b•标签对中的第一个标签是开始标签，第二个标签是结束标签•开始和结束标签也被称为开放标签和闭合标签什么是HTML？1网页的本质：超文本，即HTML文档HTML基本结构htmlheadtitle第一个HTML网页/title/headbodyHello,world!这里是内容区域！！！/body/html任何的HTML都是以html开始，以/html结束定义了HTML文档的页头部分指出文档的标题，这种标题会在浏览器上的标题条内显示出来HTML的内容都定义在它们之间三、HTML文本排版控制标记符1、段落标记p…/p•HTML分段标记P，用来定义文档中的一个段落。•标记P可看作是段落的开始，而标记/P则可视作段落的结束。•单独一个P会添加一个空行。格式：p这是一个段落/pp这是一个新的段落/p三、HTML文本排版控制标记符HTMLHEADTITLE简单页面/TITLE/HEADBODYP这是我的第一个段落/PP这是我的/PP第二个段落/P/BODY/HTML实例1：三、HTML文本排版控制标记符•标记的属性标记规定了这是什么信息，属性是用来描述对象特征的特性。属性值使用双引号括起来，属性间无先后次序要求。格式：标记属性名1=”属性值1”属性名2=”属性值2”…受影响的内容/标记如：BODYBGCOLOR=grayTEXT=white这是我的第一个段落/BODY三、HTML文本排版控制标记符段落标记p…/p属性“ID”属性PID=F1MyfirstParagraph./PPID=F2MysecondParagraph./P三、HTML文本排版控制标记符styleP#F1{Color:navy;Background:lime}P#F2{Color:white;Background:black}/style通过“ID”属性，可以将段落与相应的样式规则联系起来。右边的代码定义了两段各自的颜色三、HTML文本排版控制标记符HTMLHEADstyleP#F1{Color:navy;Background:lime}P#F2{Color:white;Background:black}/styleTITLE简单页面/TITLE/HEADBODYPID=F1第一个段落/PPID=F2第二个段落/P/BODY/HTML实例2：三、HTML文本排版控制标记符2、通用块标记DIV•DIV…/DIV可以把文档分割为独立的部分，可以包含任何行内或块级标记，以及多个嵌套。与很多通用属性的联合使用非常有效，“CLASS”属性在DIV…/DIV标记中的使用方法如下：DIVCLASS=”news”PThisisthefirstnews/P/DIVDIVCLASS=”news”PThisisthesecondnews/P/DIV三、HTML文本排版控制标记符3、行内标记SPANSPAN…/SPAN可以通过使用通用属性来提供外加的结构，和包含块级元素的DIV相对应。“STYLE”属性允许为一个单独出现的元素指定样式，比如下面的例子。PApopularfontforon-screenreadingisSPANSTYLE=”font-family:Verdana”Verdana/SPAN/P三、HTML文本排版控制标记符HTMLHEADstyle.jiahei{font-family:黑体;/styleTITLESPAN标记实例/TITLE/HEADBODYPspanclass=jiahei电子商务专业/span是融计算机科学、市场营销学、管理学、法学和现代物流于一体的新型交叉学科。培养掌握计算机信息技术、市场营销、国际贸易、管理、法律和现代物流的基本理论及基础知识，具有利用网络开展商务活动的能力和利用计算机信息技术、现代物流方法改善企业管理方法，提高企业管理水平能力的创新型复合型电子商务高级专门人才。/P/BODY/HTML实例3：四、HTML常用标记符1、元数据标记META•元数据标记META定义HTML页面中的相关信息，语法格式如下：METANAME=CONTENT=•使用元数据标记还可以指定编码格式，以保证网页中的汉字正常显示，比如：METAhttp-equiv=Content-Typecontent=text/html;charset=gb2312/四、HTML常用标记符2、图像标记IMG•IMG行内标记定义了一个行内图像，使用格式如下所示。imgsrc=lotus.jpgalt=莲花之美border=10width=400height=300align=left四、HTML常用标记符HTMLHEADmetahttp-equiv=content-Typecontent=text/html;charset=gb2312TITLEIMG标记实例/TITLE/HEADBODYPimgsrc=pic1.jpgalign=leftwidth=108height=134alt=电子商务电子商务专业是融计算机科学、市场营销学、管理学、法学和现代物流于一体的新型交叉学科。/pp培养掌握计算机信息技术、市场营销、国际贸易、管理法律和现代物流的基本理论及基础知识，具有利用网络开展商务活动的能力和利用计算机信息技术、现代物流方法改善企业管理方法，提高企业管理水平能力的创新型复合型电子商务高级专门人才。/P/BODY/HTML实例4：四、HTML常用标记符3、框架容器标记FRAMESET•FRAMESET…/FRAMESET是一个框架容器，取代了BODY…/BODY的位置，紧接HEAD标记之后。该标记要用到的属性有“ROWS”、“COLS”、“ONLOAD”、“ONUNLOAD”以及除了“LANG”和“DIR”属性之外的通用属性。四、HTML常用标记符4、子框架标记FRAME•FRAME定义了一个框架设置文档中的子区域，包含在定义了框架尺寸的FRAMESET…/FRAMESET中。四、HTML常用标记符由于框架网页的出现，从根本上改变了HTML文档的传统结构,因此在出现Frameset标记的文档中，将不再使用Body标记基本结构HtmlHead/HeadFramesetFramesrc=url/Frameset/HtmlFRAMESET是用来划分框窗，每一窗框由一个FRAME标记所标示，FRAME必须在FRAMESET范围中使用设计框架页面时，Frame标记和Frameset标记用于定义框架网页的结构四、HTML常用标记符我们可以将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现例如：framesetcols=#framesetcols=100，200，300framesetrows=#framesetrows=10%，20%，70%其中的任何一个数字也可以由“*”来代替如：framesetcols=100，200，*framesetcols=100，*，*将100像素以外的窗口平均分配framesetcols=*，*，*将窗口分为三等份s四、HTML常用标记符首先我们先创建3个html文件，其文件名分别为“a.html、b.html、c.html”a.htmlHtmlHeadTitleA/Title/HeadBodyh1align=centerA/h1/Body/Htmlb.Htmlc.html同样四、HTML常用标记符HtmlHeadTitle横向排列多个窗口/Title/HeadFramesetcols=25%，50%，25%Framesrc=a.htmlFramesrc=b.htmlFramesrc=c.html/Frameset/Html横向排列多个窗口混合排列多个窗口纵向排列多个窗口四、HTML常用标记符HtmHeadTitle纵向排列多个窗口/Title/HeadFramesetrows=25%,25%,50%Framesrc=a.htmlFramesrc=b.htmlFramesrc=c.html/Frameset/Html纵向排列多个窗口四、HTML常用标记符HtmlHeadTitle混合排列多个窗口/Title/HeadFramesetrows=30%，70%Framesrc=a.htmlFramesetcols=20%，80%Framesrc=b.htmlFramesrc=c.html/Frameset/Frameset/Html混合排列多个窗口四、HTML常用标记符各窗口间相互操作(FrameTarget)•由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化•我们必须为每一个窗口起一个名字，这个名字用属性Name来定义格式：framesrc=urlname=“窗口名”例如：framesrc=frame/a.htmlname=“left”四、HTML常用标记符Target属性定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称，也可以是以下四类值:ahref=urltarget=_blank显示一个新窗口ahref=urltarget=_self显示在同一个窗口ahref=urltarget=_parent显示在Frameset的前一份文件的窗口ahref=urltarget=_top显示在整个浏览器窗口四、HTML常用标记符Frameborder属性用来设定各窗口边框的设置，yes表示有边框，no表示没有边框这里使用一下前面介绍的例子HtmlHeadTitle窗口边框的设置/Title/HeadFramesetrows=30%，70%frameborder=1Framesrc=a.htmlFramesetcols=20%，80%frameborder=0Framesrc=b.htmlFramesrc=c.html/Frameset/Frameset/Html各窗口边框的设置四、HTML常用标记符边框色彩bordercolor=#属性用来设定边框色彩例Framesetrows=30%，70%bordercolor=redHtmlHeadTitle边框色彩/Title/HeadFramesetrows=30%，70%bordercolor