第8讲 网页制作

1,第8章网页制作,8.1网页概述8.2HTML语言基础8.3使用FrontPage制作网页8.4网站发布与测试,2,8.1概述(1),网页的基本概念是一个文本文件，以html或htm作为扩展名，通过html标记将文字、图片等信息组织在一起，在浏览器上呈现出一幅幅图片。网页的基本组成文字图像超级链接,表格表单视频和音频其他网页元素,3,8.1概述(2),网页制作方法利用HTML语言所定义的标记及其属性来编写一个文本文件。用htm或html作为文件的扩展名。网页制作软件文本编辑工具(记事本、EditPlus);专业网页制作软件，FrontPage、Dreamweaver等；一些图像处理软件，如PhotoShop等.网站将内容相关的网页、图片、视频和音频等信息集合在一起，存放在一台Web服务器中，供用户浏览。,4,8.2.1HTML语言概述(1),HTML语言是创建网页的基础。网络中所有的网页都是以HTML为基础建立起来的。因此，制作网页必须了解HTML语言的语法、网页的结构、网页的创建方法和网页开发工具。那么，什么是HTML？,5,8.2.1HTML语言概述(1),HTML（HypertextMarkupLanguage，超文本标记语言），专门用来编写网页。HTML描述文件结构格式的方法是利用一些指令符号，来标记表示出各种文件效果，再由浏览器来解读HTML的指令符号，将文件格式效果展现出来，HTML是一种标记式的语言。在HTML里，图形、声音必须用其它软件制作，再用HTML的标记编排在网页的原始文件里，然后浏览器才能解读这些原始文件，并在屏幕上展示其效果。,6,8.2.1HTML语言概述(2),网页标题正文部分,7,第一个HTML例子,MyWebpage静夜思窗前明月光，疑是地上霜，举头望明月，低头思故乡。,8,8.2.1HTML语言概述(3),HTML标签结构标签是用尖括号(英文半角)括起来的控制符。一般HTML标签都具有开始和结束控制符，如和。也用少量没有标签相应的结束标签，如、等。大多数标签都具有属性，属性写在标签的开始控制符中。如：中国标签书写与字母大小写无关。,9,8.2.1HTML语言概述(4),HTML文件结构一般来说，整个HTML文件以开头，以结束，中间分成两个部分：一部分是“标头区”；一部分是“主体区”。文件开始和结束标签以开始，以标签结束，告诉浏览器这是一个HTML网页文件。标头区有一对来定义，它紧跟在之后。在此可以利用和来定义网页的标题，以及其它的内容，如CSS，JavaScript和等。主体区主体区使用和来定义，网页中的主体内容都应用写在主体区中。,10,8.2.2HTML基本标记(1),标记常用属性：TEXT=文字的颜色LINK=链接文字颜色VLINK=已链接过的文字颜色ALINK=被按下链接文字颜色BGCOLOR=背景颜色BACKGROUND=背景图形颜色表示：以颜色的英文名表示，如White、red、blue等以RRGGBB代表各种颜色。RR=Red(红色)利用这三种颜色值的组合，可配出各种颜色。用色彩值，格式为：#后加6位16进制值，每两位一组。#FF0000表示红色。,11,第二个HTML例子,网页属性设置网页页面属性设置,12,8.2.2HTML基本标记(2),文字的编辑（字体）属性：face=字体名属性：size=字体大小(1-7)属性：color=字体颜色（分段）属性：align=对齐方式,可以为left、center、right(分行)、（字体样式）(其中n=1.6)（标题）下标、上标（水平分隔线）,13,8.2.2HTML基本标记(3),滚动字幕标记(*)移动区域的大小设置width=?和height=?移动方向属性的设置direction=#,#=left,right,up,down(目的方向)移动方式属性的设置behavior=#,#=scroll,slide,alternate移动速度属性的设置scrollamount=#,默认值为6，越大移动越快特殊符号表示空格：,14,8.2.2HTML基本标记(4),用序列表标题项列表项1列表项2其中type=?，?可以为A、I、数字其中start=?，?指定序号开始的序号无序列表type=?,？可以为square、circle,15,有序列表中国城市北京上海,16,8.2.2HTML基本标记(5),使用图像常用图片格式GIF格式：最多表示256色，支持透明和动画。JPEG格式：压缩率很高，颜色丰富。PNG格式：适应于任何类型、任何颜色深度的图片。标记及其属性：src=要显示的图像的URLwidth=px或%height=px或%align=left或rightalt=？浏览器无法显示图形时，出现的替代文字,17,8.2.2HTML基本标记(5),创建超级链接URL的概念HTML利用统一资源定位器（URL）定位Web上的文档信息。一个URL包括3个部分：一个协议代码、一个装有所需文件的计算机地址（或一个电子邮件地址或一个新闻组名称），以及包含有信息的文件地址和文件名。相对url和绝对url绝对URL是指Internet上资源的完全地址，包括协议种类、计算机域名和包含路径的文档名。如：,18,8.2.2HTML基本标记(6),超级链接标记及其常用属性href=超级链接的目的urltitle=提示信息（鼠标移动到超级链接上出现）？之间是超级链在页面上的入口，可以是文字，图片等。例如：信息工程学院,19,8.2.2HTML基本标记(7),使用表格表格示例:表头1表头2表项1表项2,20,8.2.2HTML基本标记(8),表格标记表格标记符使用()定义表格，表格的所有内容都放在开始标记和结束标记之间。行用()定义表的行表头表头即表格的行标题或列标题。用()定义表格的表头，以居中对齐粗字体显示。表元(表格的具体数据)用()定义表格的列。,21,8.2.2HTML基本标记(9),框架框架集使用定义框架，框架的所有内容都放在开始标记和结束标记之间。框架框架集可也嵌套,22,的属性,标记语法：cols=90,*:垂直切割画面(如分左右两个画面)，接受整数值、百分数，*则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如cols=30,*,50%可以切成三个视窗，第一个视窗是30pixels的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗后剩下的空间，第三个视窗则占整个视窗画面的50%宽度为一相对分割。你可自己调整数字。rows=“120,*”这是横向切割，将画面上下分开，数值设定同上。cols与rows俩参数尽量不要放在同一个标记中。frameborder=0设定框架的边框，其值只有0和1，0表示不要边框，1表示要显示边框。border=0设定框架的边框厚度，以pixels为单位。bordercolor=#008000设定框架的边框颜色。framespacing=5表示框架与框架间保留的空白的距离。,23,的属性,标记语法：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,frameset示例,25,8.3使用Front