网页制作(HTML语言).ppt

网页制作,一、网页技术概况 1.静态网页 静态网页是指这个网页不论在何时何地浏览，都将显示相同的画面与内容，且用户仅能浏览，而无法提供信息给网站，也不能让网站响应用户的需求。静态网页通常以.htm、.html、.xml等为后缀名。纯粹HTML格式的网页通常被称为“静态网页”。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。,HTML语言,特点：(1)静态网页的文件名以.htm、.html、.xml等常见形式为后缀；(2)静态网页的内容相对稳定，容易被搜索引擎检索;(3)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;(4)静态网页的交互性较差，在功能方面有较大的限制。,2.动态网页 动态网页是采用动态网站技术生成的网页。动态网页技术：PHP：即超文本预处理器(Hypertext Preprocessor)，它是当今Internet上最为火热的脚本语言。它与HTML语言具有非常好的兼容性。PHP提供了标准的数据库接口，数据库连接方便，兼容性强。,ASP：即Active Server Pages，由微软开发，它没有提供自己专门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应用程序。ASP是在Web服务器端运行，运行后再将运行结果以HTML格式传送至客户端的浏览器。因此ASP与一般的脚本语言相比，要安全得多。ASP的最大好处是可以包含HTML标签，在程序编制上比较方便且灵活。通过使用ASP的组件和对象技术，用户可以直接使用ActiveX控件，调用对象方法和属性，以简单的方式实现强大的交互功能。,JSP：即Java Server Pages，它是由Sun Microsystem公司于1999年6月推出的新技术，是基于Java Servlet以及整个Java体系的Web开发技术。JSP和ASP在技术方面有许多相似之处，不过两者来源于不同的技术规范组织，以至 ASP一般只应用于Windows NT/2000平台，而JSP则可以在85以上的服务器上运行，而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理，所以被许多人认为是未来最有发展前途的动态网站技术。,3.静态网页和动态网页 静态网页，动态网页主要根据网页制作的语言来区分：静态网页使用语言：HTML；动态网页使用语言：HTMLASP 或 HTMLPHP 或 HTMLJSP 等。,3.静态网页和动态网页 程序是否在服务器端运行，是重要标志：在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net等；运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等，它们是永远不变的。,3.静态网页和动态网页 静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。,二、HTML简介 HTML不是一种程序，它只是一种控制网页中资料显示的标识语言。HTML中定义了一系列标签。这些标签用于控制网页的文档格式、字符格式及段落格式等，还包括为达到网页的交互效果而对脚本语言和Java小程序等的支持和调用规则。因为HTML是一个文本文件，所以可以使用任何一个文本编辑器进行编写(Windows记事本)。在保存HTML文件时，需保存为纯文本文件，并用.html或.htm作为扩展名。HTML文件是运行在Web浏览器上的，通过浏览器解释执行。,三、HTML的基本结构 1、HTML标签 一个HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分，如：title(文件标题)、img(图像)及table(表格)等。元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。,HTML标签分为单标签和成对标签。成对标签的语法：要控制的元素 例：第一个网页 该标签用于界定标题元素的范围，即和 标签之间的部分是此HTML文件的标题。单标签语法：例：表示在当前位置插入一个换行符。注：HTML标签不区分大小写。,标签属性 一个标签为了明确它的功能，往往用一些属性参数来描述。标签属性是用于控制标签中元素的显示效果，如颜色、对齐方式等。这些属性位于所建立元素的首标签。语法：要控制的元素 注：各属性无先后顺序。例如：,一个简单的HTML文件：第一个HTML示例 HTML的基本结构,文件开始,文件头,文件标题,文件体,文件结束,2、HTML文件结构 文件标签 在任何一个HTML文件中最先出现的标签，用于表示该文件是以超文本标识语言HTML编写的。该标签是成对标签，首标签位于文件的最前面，尾标签位于文件的结尾，文件中所有文本和HTML标签都包含在其中。该标签不带有任何属性。,文件头部标签 文件头标签部分用来规定该文件的标题，(出现在web浏览器窗口的标题栏中)和文件的一些属性。该标签中可以插入其他标签，如、等，这些标签用于描述html文档的相关信息、定义样式或插入脚本语言。该标签可以省略。,文件标题标签 在浏览器中，文件名称作为窗口名称显示在窗口的最上方。该标签应包含在与标签之中。,Meta标签 meta标签的组成：meta标签共有两个属性，它们分别是 http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。,name属性 name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。name属性主要有以下几种参数：A、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。举例：meta name=keywords content=关键字,B、description(网站内容描述)说明：description用来告诉搜索引擎你的网站主要内容。举例：meta name=description content=“网页描述”C、author(作者)说明：标注网页的作者 举例：meta name=author content=你的名字,D、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。举例：meta name=robots content=“none”,http-equiv属性 http-equiv可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。meat标签的http-equiv属性语法格式是：meta http-equiv=参数 content=参数变量值,A、content-Type(显示字符集的设定)说明：设定页面使用的字符集。举例：meta http-equiv=“content-Type”content=“text/html;charset=gb2312”,B、Refresh(刷新)说明：自动刷新并指向新页面。举例：meta http-equiv=“Refresh”content=“2；URL=http:/”注意：其中的2是指停留2秒钟后自动刷新到URL网址。,C、Expires(期限)说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。举例：meta http-equiv=“expires”content=“Fri,12 Jan 2001 18:18:18 GMT”注意：必须使用GMT的时间格式。,D、Pragma(cache模式)说明：禁止浏览器从本地计算机的缓存中访问页面内容。举例：meta http-equiv=Pragma content=no-cache 注意：这样设定，访问者将无法脱机浏览。,E、Window-target(显示窗口的设定)说明：强制页面在当前窗口以独立页面显示。举例：meta http-equiv=“Window-target”content=“_top”注意：防止网页被别人作为一个Frame调用。,标记中的http-equiv属性用于设置一个http的标题域，但确定值由content属性决定；name属性用于设置元信息出现的形式，content属性用于设置元信息出现的内容。,F、实现网页转换时的动画效果 说明：使用meta标签，我们还可以在进入网页或者离开网页的一刹那实现动画效果，我们只要在页面的 html代码中的head/head标签之间添加如下代码就可以了：meta http-equiv=“Page-Enter”content=“revealTrans(duration=.,transition=)”meta http-equiv=“Page-Exit”content=“revealTrans(duration=.,transition=)”,G、打开一个相对地址 打开一个相对地址,文件体标签 文件主体部分就是在web浏览器窗口的用户区内看到的内容。该标签是成对标签，网页中的内容均写在该标签之间，而该标签包含在标签内。在此标签中可以包含众多的标签，如、等。网页中的所有内容、文字、图片、链接以及其他页面元素都包含在此标签对之间。,四、文字版面的编辑 1、页面布局 换行标签 换行标签是个单标签。效果：在HTML文件中的任何位置只要使用了标签，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。,作 业,br.html,强制不换行标签 不换行标签是个成对标签。效果：使用标签把语句强行放在一行中。,分段控制标签 由标签所标识的文字代表同一个段落的文字。效果：在浏览器中不同段落的文字间除了换行外，还会以一个空白行加以间隔。它可以单独使用，也可以成对使用。,分段控制标签 格式：文字 文字 文字 其中，align属性有left、center和right三个参数，这三个设置值依次将段落文字的水平对齐方式设置为左对齐、居中对齐和右对齐。,作 业,p.html,原样显示文字标签 将HTML文件中的文字编排方式，通过浏览器显示时，保留原始的文件排版方式。格式：预编排信息,作 业,pre.html,居中对齐标签 效果：将文字进行居中控制显示。为成对标签。格式：居中文字,作 业,center.html,引文标签 效果：用来建立一个引文，特别适合较长文本的引用，引文显示时将会自动右移，加以区别。格式：引文部分,水平分割线标签 效果：换行并在该行下画一条横线，横线的上下端都会留出一定的空白。单标签。给标签设置一些属性，可以使他具有更强的功能。,标签的属性有：size 设置水平分隔线的粗细；单位为px；默认为2 width 设置水平分隔线的宽度；单位为px、百分比；默认值为100%align 设置水平分隔线的对齐方式；参数取值为left/center/right；默认值为center color 设置水平分隔线的颜色；默认为黑色 noshade 水平分隔线不显示3D阴影,署名标签 署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。效果：在标签之间的文字显示效果是斜体字。,特殊字符 HTML常见特殊字符及其代码表,作 业,hr-特殊字符.html,版权符号,注释标签 注释标签中的内容主要起说明作用，并且不显示在网页中。注释标签的格式：,设定网页背景和文字的颜色 设置在标签内的属性，可控制整个页面的显示方式。格式：,说明：backgroud属性用于设置网页的背景图片 bgcolor属性设置网页的背景颜色，格式为：或 其中，“#nnnnnn”代表十六进制数，每两位的取值是从00FF。前两位设置红色的深浅，中间两位设置绿色的深浅，最后两位设置蓝色的深浅。,也可采用指定颜色名来设置背景颜色，颜色名即是该颜色对应的英文单词。例如：指定背景颜色为红色 或 text属性用于指定网页内文字的颜色。注:当bgcolor属性和background属性同时设置了值时，只取 background属性的值。,颜色代码表,四、文字版面的编辑 2、字体属性 标题文字标签 标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。格式 标题文字 说明：标签是成对标签。它总共分为六级，其中，是第一级标题，最大最粗；是第六级标题，最小最细。,align属性用于设置标题的对齐方式。标题文字具体的大小则因浏览器的不同而不同。标签本身具有换行的作用，标题总是从新的一行开始。,文字格式控制标签 标签用于控制文字的字体、大小和颜色。控制的方式是通过属性设置得以实现的。标题的属性：face 控制文字字体 size 控制文字的大小 color 控制文字的颜色,文字格式控制标签 格式：文字 说明：face属性指定的字体名称比如:宋体、楷体等。若用户的系统中不存在该字体，则使用默认字体。size属性的取值为17，默认值为3。同时可以用“+”或“-”来设定字号的相对值。color属性的格式为 或,特定文字样式标签 粗体标签 文字 用于以粗体方式显示标签内的文字。斜体标签 文字 用于以斜体方式显示标签内的文字。下划线 文字 用于在标签内的文字下加下划线。,五、建立超链接 1、超链接的建立 超链接标签 格式：超链接文字 说明：“超链接的文字”就是超链接的源点。“链接位置”就是超链接的目标，可使用URL指定。,URL格式：通信协议:/链接地址/文件位置/文件名 target属性决定链接到的文件在哪个框架或窗口中显示。默认方式是当前窗口。title属性设定在浏览器中鼠标指向链接时显示的提示文本。URL有绝对URL和相对URL,HTML的超链接主要有三种，分别是：在同一个文件中建立链接(锚点链接/书签)；在不同文件之间建立链接；建立URL(网址)链接。,在同一个文件中建立链接 语法格式：在源链接文件中 链接文字 在链接目标文件中 链接文字,在不同文件之间建立链接 语法格式：链接文字 注：当对不同文件进行链接时，需要有两个以上的 HTML文件，应明确哪个是主链接文件，哪个是被链接 文件。以上的语句是设置在主链接文件中的。同时，文件路径多采用相对路径。,链接到其他站点 语法格式：链接文字 注：href中的http:/部分不能省略。,说明：target的几种取值：_blank 在新窗口中显示页面 _self 在当前窗口中显示页面(课程案例a链接案例),2、超链接的应用 更改链接文字的颜色 格式：网页内容,说明：text属性：非可链接文字的颜色，默认为黑色(black)。link属性：可链接文字的颜色，默认为蓝色(blue)。vlink属性：已经被访问过的可链接文字的颜色，默认为栗色(maroon)。alink属性：正被单击的可链接文字的颜色，默认为红色(red),用链接实现发送邮件 格式：描述文字,六、图像的处理 1、网页中插入图形 标签 格式：是单标签,说明：src 是用来指定一个图像的文件名或指出 URL的路径名。如果图像的显示有问题，应检查以下内容：文件名是否正确；图像文件是否是bmp、gif、jpg格式；文件的路径是否正确。alt 是用来指定图像的替代文字。即当浏览器不能显示图像或找不到图像时，alt属性中的文字将显示在屏幕上，替代无法显示的图像。,说明：height/width 用来指定图像的高度和宽度，两者的单位有“像素”或“百分比”。(默认单位为像素)border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。align 用来控制图像相对于文字基准线(文字中线)的水平对齐方式。其取值有：top(上对齐)、middle(居中对齐)、bottom(下对齐)、left(左对齐)、right(右对齐),vspace/hspace 属性能够调整图像与其他文字之间的距离，两者均取值像素。vspace 为调整图像与上下文本的距离；hspace为调整图像与左右文本的距离。,七、列表项目 1、无序列表 格式：项目符号 项目符号 项目符号,说明：使用type属性来控制行的标号，type属性的取值和含义。,2、有序列表 格式：项目符号 项目符号 项目符号,说明：顺序编号是由属性type和start来设置。Type表示标号的类型，start属性表示列表清单的标号从第几项开始。,3、嵌套列表 将一个列表嵌入另一个列表中，作为另一个列表的一部分，叫做嵌套列表,八、表格 1、定义表格的基本语法(1)定义表格标签 标签用于定义一个表格元素，一个表格元素是由多个横行、单元格和表头单元格子元素所组成的。(2)定义表头标签 标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。(在一个表格的定义语法中叶可以不使用标签定义表头单元格。),(3)定义表格行标签 标签用于定义表格的一行，在一组标签内将建立一行表格，也可以包含多组由 或标签所定义的单元格。(4)定义单元格标签 标签用于定义表格的单元格。一组标签内将建立一个单元格。标签必须放在标签内。在一个最基本的表格元素中，必须包含一组标签、一组标签和一组标签。,2、表格属性说明(1)设置表格边框的尺寸 border(2)定义表头标签,