第8讲 网页制作

1第8章网页制作8.1网页概述8.2HTML语言基础8.3使用FrontPage制作网页8.4网站发布与测试28.1概述(1)网页的基本概念是一个文本文件，以html或htm作为扩展名，通过html标记将文字、图片等信息组织在一起，在浏览器上呈现出一幅幅图片。网页的基本组成文字图像超级链接表格表单视频和音频其他网页元素38.1概述(2)网页制作方法利用HTML语言所定义的标记及其属性来编写一个文本文件。用htm或html作为文件的扩展名。网页制作软件文本编辑工具(记事本、EditPlus);专业网页制作软件，FrontPage、Dreamweaver等；一些图像处理软件，如PhotoShop等.网站将内容相关的网页、图片、视频和音频等信息集合在一起，存放在一台Web服务器中，供用户浏览。48.2.1HTML语言概述(1)HTML语言是创建网页的基础。网络中所有的网页都是以HTML为基础建立起来的。因此，制作网页必须了解HTML语言的语法、网页的结构、网页的创建方法和网页开发工具。那么，什么是HTML？58.2.1HTML语言概述(1)HTML（HypertextMarkupLanguage，超文本标记语言），专门用来编写网页。HTML描述文件结构格式的方法是利用一些指令符号，来标记表示出各种文件效果，再由浏览器来解读HTML的指令符号，将文件格式效果展现出来，HTML是一种标记式的语言。在HTML里，图形、声音必须用其它软件制作，再用HTML的标记编排在网页的原始文件里，然后浏览器才能解读这些原始文件，并在屏幕上展示其效果。68.2.1HTML语言概述(2)HTMLHEADTITLE网页标题/TITLE/HEADBODY正文部分/BODY/HTML7第一个HTML例子htmlheadtitleMyWebpage/title/headbodyh1align=“center”静夜思/h1fontcolor=“green”h2align=“center”窗前明月光，br疑是地上霜，br举头望明月，br低头思故乡。br/h2/font/body/html88.2.1HTML语言概述(3)HTML标签结构标签是用尖括号(英文半角)括起来的控制符。一般HTML标签都具有开始和结束控制符，如HTML和/HTML。也用少量没有标签相应的结束标签，如BR、HR等。大多数标签都具有属性，属性写在标签的开始控制符中。如：FONTcolor=redsize=5中国/FONT标签书写与字母大小写无关。98.2.1HTML语言概述(4)HTML文件结构一般来说，整个HTML文件以HTML开头，以HTML结束，中间分成两个部分：一部分是“标头区”；一部分是“主体区”。文件开始和结束标签以HTML开始，以/HTML标签结束，告诉浏览器这是一个HTML网页文件。标头区有一对HEAD/HEAD来定义，它紧跟在HTML之后。在此可以利用TITLE和/TITLE来定义网页的标题，以及其它的内容，如CSS，JavaScript和Meta等。主体区主体区使用BODY和/BODY来定义，网页中的主体内容都应用写在主体区中。108.2.2HTML基本标记(1)BODY标记常用属性：TEXT=文字的颜色LINK=链接文字颜色VLINK=已链接过的文字颜色ALINK=被按下链接文字颜色BGCOLOR=背景颜色BACKGROUND=背景图形颜色表示：以颜色的英文名表示，如White、red、blue等以RRGGBB代表各种颜色。RR=Red(红色)利用这三种颜色值的组合，可配出各种颜色。用色彩值，格式为：#后加6位16进制值，每两位一组。#FF0000表示红色。11第二个HTML例子htmlheadtitle网页属性设置/title/headbodybackground=“d1.jpg”text=“read”网页页面属性设置/body/html128.2.2HTML基本标记(2)文字的编辑Font…/Font（字体）属性：face=字体名属性：size=字体大小(1-7)属性：color=字体颜色P…/P（分段）属性：align=对齐方式,可以为left、center、rightBR(分行)B…/B、U…/U、I…/I（字体样式）Hn…/Hn(其中n=1..6)（标题）SUB下标、SUP上标HR（水平分隔线）138.2.2HTML基本标记(3)滚动字幕marquee标记(*)移动区域的大小设置width=?和height=?移动方向属性的设置direction=#,#=left,right,up,down(目的方向)移动方式属性的设置behavior=#,#=scroll,slide,alternate移动速度属性的设置scrollamount=#,默认值为6，越大移动越快特殊符号表示空格： 引号:"(大于号)：>(小于号)：<版权所有：©注册商标：®148.2.2HTML基本标记(4)用序列表OLtype=?Start=?p标题项/pLI列表项1LI列表项2/OL其中type=?，?可以为A、I、数字其中start=?，?指定序号开始的序号无序列表ULtype=?/ULtype=?,？可以为square、circle15htmlheadtitle有序列表/title/headbodyolp中国城市/pli北京/lili上海/li/ol/body/html168.2.2HTML基本标记(5)使用图像常用图片格式GIF格式：最多表示256色，支持透明和动画。JPEG格式：压缩率很高，颜色丰富。PNG格式：适应于任何类型、任何颜色深度的图片。IMG标记及其属性：src=要显示的图像的URLwidth=px或%height=px或%align=left或rightalt=？浏览器无法显示图形时，出现的替代文字178.2.2HTML基本标记(5)创建超级链接URL的概念HTML利用统一资源定位器（URL）定位Web上的文档信息。一个URL包括3个部分：一个协议代码、一个装有所需文件的计算机地址（或一个电子邮件地址或一个新闻组名称），以及包含有信息的文件地址和文件名。相对url和绝对url绝对URL是指Internet上资源的完全地址，包括协议种类、计算机域名和包含路径的文档名。如：相对URL是指Internet上，资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径。如：pub/text.htm它表示当前页面所在目录下pub子目录中的text.htm。188.2.2HTML基本标记(6)超级链接标记A/A及其常用属性href=超级链接的目的urltitle=提示信息（鼠标移动到超级链接上出现）A？/A之间是超级链在页面上的入口，可以是文字，图片等。例如：Ahref=信息工程学院/A198.2.2HTML基本标记(7)使用表格表格示例:TABLETRTH表头1/THTH表头2/TH/TRTRTD表项1/TDTD表项2/TD/TR/TABLE208.2.2HTML基本标记(8)表格标记表格标记符—TABLE使用TABLE(/TABLE)定义表格，表格的所有内容都放在开始标记TABLE和结束标记/TABLE之间。行TR用TR(/TR)定义表的行表头TH表头即表格的行标题或列标题。用TH(/TH)定义表格的表头，以居中对齐粗字体显示。表元(表格的具体数据)TD用TD(/TD)定义表格的列。218.2.2HTML基本标记(9)框架框架集FRAMESET使用FRAMESET…/FRAMESET定义框架，框架的所有内容都放在开始标记FRAMESET和结束标记/FRAMESET之间。框架frameframename=“窗口名”src=“显示的网页”框架集可也嵌套22FRAMESET的属性framesetrows=90,*frameborder=0border=0framespacing=2bordercolor=#008000/framesetframeset标记语法：cols=90,*:垂直切割画面(如分左右两个画面)，接受整数值、百分数，*则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如cols=30,*,50%可以切成三个视窗，第一个视窗是30pixels的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗后剩下的空间，第三个视窗则占整个视窗画面的50%宽度为一相对分割。你可自己调整数字。rows=“120,*”这是横向切割，将画面上下分开，数值设定同上。cols与rows俩参数尽量不要放在同一个frameset标记中。frameborder=0设定框架的边框，其值只有0和1，0表示不要边框，1表示要显示边框。border=0设定框架的边框厚度，以pixels为单位。bordercolor=#008000设定框架的边框颜色。framespacing=5表示框架与框架间保留的空白的距离。23fram的属性framename=topsrc=a.htmlmarginwidth=5marginheight=5scrolling=Autoframeborder=0noresizeframespacing=6bordercolor=#0000FFframe标记语法：src=a.html设定此框窗中要显示的网页档案名称，每个框窗一定要对应一个网页档案。name=top设定这个框窗的名称，这样才能指定框架来作链接，必须但任意命名。frameborder=0设定框架的边框，其值只有0和1，0表示不要边框，1表示要边框。framespacing=6表示框架与框架间的保留的空白的距离。bordercolor=#0000FF设定框架的边框颜色。scrolling=Auto设定是否要显示卷轴，YES表示要显示卷轴，NO表示无论如何都不要显示卷轴，AUTO视情况而定。noresize设定不让使用者可以改变这个框框的大小。marginhight=5表示框架高度部分边缘所保留的空间。marginwidth=5表示框架宽度部分边缘所保留的空间。24htmlheadtitleframeset示例/title/headframesetrows=15%,50%,35%cols=*frameborder=1framesrc=1.html/frameframesetcols=30%,70%scrolling=yesframename=saynoresize=truesrc=2.html/frameframename=messagenoresize=truesrc=11.html/frame/framesetframesrc=22.html/frameset/html258.3使用FrontPage制作网页本地站