网页设计—HTML.ppt

5/8/2020,1,第六章网络编程技术,内容提要：6.1HTML基础知识6.2HTML语言结构6.3表格与框架6.4表单设计6.5嵌入图片、声音和视频图像,5/8/2020,2,6.1HTML基础知识HTML(HypertextMarkupLanguage)超文本标记语言一种描述文档结构的标记语言，它使用一些约定的标记对WWW上的各种信息进行标注。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，显示结果相同。HTML文件的后缀名为.htm或.html的文件。标记：组成HTML的“命令”。在HTML中，标记用符号“”括起来。作用：标注各种元素的输出格式。,5/8/2020,3,一个HTML文件的例子西北工业大学我的第一个主页演示,5/8/2020,4,HTML标记分类：(1)单边；(2)双边。单边标记：单边标记元素为开放式标记，不需要用结束标记来包含文本。如表示回车换行。双边标记：双边标记元素提供了开始和结束，将文本包含在其中，故也称为容器(container)。如与、与等。说明：1.“”之间是标记元素名及其参数。标记元素往往都带有若干参数，用以表明元素的属性，属性是对标记更详细的规定，并具有不同的取值。2.标记元素不区分大小写。格式：输出内容,5/8/2020,5,6.2HTML语言结构HTML文件的基本结构：HTML文件开始文件头开始头信息部分文件头结束文件体开始正文部分文件体结束HTML文件结束说明：HTML文件由头信息和正文两部分组成，其中，用包围的是HTML语言标记，控制网页中各种元素的显示状态。,5/8/2020,6,6.2.1HTML文档的头信息举例：这是一个头文件的例子正文部分演示,5/8/2020,7,说明：1)用和标记括起来的部分是网页的标题，其内容被显示在浏览器窗口的标题条中。2)在头部分还可以定义类(class)及嵌入程序。3)title的长度没有限制，但一般情况下它的长度不应超过64个字符。4)title标记只能出现在文件头中。title标记格式：文件标题,5/8/2020,8,6.2.2页面排版1.标题字体标题字体标记：h1h6表示6种大小标题字体。举例：标题大小这是一号标题这是二号标题这是三号标题这是四号标题这是五号标题这是六号标题演示,5/8/2020,9,hn标记的对齐属性：格式：#：left文本内容为左对齐center文本内容为中间对齐right文本内容为右对齐举例：标题对齐属性二号标题居左显示三号标题居中显示四号标题居右显示演示,5/8/2020,10,2.文字字体字体的大小格式：从17共有7级字体。字体的颜色格式：#在000000FFFFFF(十六进制)之间，前两位代表红色(red)，中间两位代表绿色(green)，后两位代表蓝色(blue)，每种色彩为256级颜色，通过配比不同的红、绿、蓝三种颜色的分量可以得出不同的颜色。常用颜色代码如表所示。,5/8/2020,11,颜色代码表,5/8/2020,12,字体样式粗体与斜体粗体标记：或斜体标记：或或上标与下标上标标记：下标标记：大字体与小字体大字体标记：小字体标记：下划线与删除线下划线标记：删除线标记：或,5/8/2020,13,3.文字效果标记文字闪烁文字闪烁标记：注意：IE不支持此效果，而Netscape支持。背景色与背景图背景色标记：背景图标记：,5/8/2020,14,举例：文字字体与效果加粗字体斜体加下划线7号字体蓝色加删除线上标字体E=mc2下标字体H2O,演示,5/8/2020,15,4.转行标记格式：作用：强迫文字转行。举例：文字转行沧海笑，滔滔两岸潮浮沉随浪，只记今朝苍天笑，纷纷世上潮谁负谁胜出，天知晓江山笑，烟雨遥涛浪淘尽，红尘俗世几多娇清风笑，竟惹寂寥豪情还胜了一襟晚照苍生笑，不再寂寥豪情仍在，痴痴笑笑,演示,5/8/2020,16,关闭转行标记格式：作用：关闭文字转行功能，改由滚动条控制。举例：关闭文字转行沧海笑，滔滔两岸潮浮沉随浪，只记今朝苍天笑，纷纷世上潮谁负谁胜出，天知晓江山笑，烟雨遥涛浪淘尽，红尘俗世几多娇苍生笑，不再寂寥豪情仍在，痴痴笑笑,演示,5/8/2020,17,分段标记格式：功能：对文本进行分段操作，且段与段之间有一空行。断行标记格式：功能：通知浏览器，在输出时，对中内容的格式不做修改地输出。,5/8/2020,18,举例：关于分段与断行这是文章的第一段，这里使用了段标记这是文章的第二段，这里使用了段标记。并在此使用了行标记。请留意，这里使用了两个行标记。以下将使用预格式文本标记，请留意。我们成功地按照所输入的文本格式得到输出。请比较程序与所显示的结果。,演示,5/8/2020,19,水平线标记格式：作用：分割文档。举例：关于水平线标记的使用星期一的课程8:009:50DataStructure10:2012:00Mathematk82:304:20Html星期二的课程,演示,5/8/2020,20,5.居中标记格式：功能：对整段文本进行居中。举例：居中标记的应用网页浏览器是基于屏幕显示窗口大小的可以看到，center标记的作用与在标记中定义对齐属性是同样有效的但是，可以控制所有在其中的标记的对齐方式为中央对齐,演示,5/8/2020,21,6.特殊符号举例：特殊符号都是事实,演示,5/8/2020,22,6.2.3列表格式1.无序列表列表格式：格式1：格式2：格式3：列表项标记属性：type格式1：格式2：其中#表示符号名称：disk实心圆点(默认设置)chrcle空心圆点square实心方块,5/8/2020,23,举例：无序列表列表项列表项1列表项2列表项3,演示,5/8/2020,24,2.有序列表列表格式：列表项标记属性：1)type数字形式属性：用type属性选择列表项符号格式的数字。数字type=11，2，3，小写字母type=aa，b，c，大写字母type=AA，B，C，小写罗马字母type=，大写罗马字母type=，2)start起始数字属性：所有标号均从最小数字开始，若要改变标号起始数字，可用start属性，其格式：#代表起始数字,5/8/2020,25,举例：有序列表第1章第2章第3章第4章,演示,5/8/2020,26,3.定义型列表(definitionlists)列表格式：定义型列表用标记括起来，并使用标记对文本进行缩排。举例：定义型列表标题一以下的文字将比标题一低若干个格，并该段文字会左对齐，形成一文字块，使得标题一处于明显突出的位置标题二,演示,5/8/2020,27,4.列表嵌套举例：Web图像处理Firework列表嵌套专家级网页编制脚本编辑互联网学习的步骤动态服务器页面编制掌握高级协议掌握初步的知识配置电脑联网关于Windows的作用拨号接入Internet进阶学习Win9X系列Win9X的两个版本主要针对普通用户，是游戏的好平台网页编制的三大工具Win2000系列Win2000主要针对企业级用户，基于WinNT发展而来网页织梦Dreamweaver流光异彩Flash,演示,5/8/2020,28,6.3表格与框架6.3.1创建表格1.创建标记表格由标记开始，标记结束，其内容有,标记定义，边框类型由标记属性指定，#为数字，默认为0。：说明表格的一行。：说明表格的列数及相应的单元格，一般在标记之内。：定义表格的标题行，其定义的单元格的内容有“居中”和“粗体”的效果。,5/8/2020,29,举例：定义表格手机价格行情产品价格折扣Nokia885045009折Nokia8810260085折,演示,5/8/2020,30,有时表格的某些单元格中没有内容，为使边框仍可见，需要使用符号“,演示1,演示2,5/8/2020,31,TABLE标记的常用属性：border：设置表格边框的宽度。格式：#为数字，默认为0。width：设定整个表格的宽度，可以像素为单位(绝对方式)，也可用占浏览器窗口的百分比来定义(相对方式)。格式：绝对方式相对方式bgcolor：设置单元格的背景颜色。格式：align：用来控制表格本身在页面上的对齐方式。其取值可是left(左对齐)、center(居中对齐)、right(右对齐)。,5/8/2020,32,2.标记caption标记设置表格标题。caption标记必须紧接在table开始标记之后放在第一个tr标记之前。通过该标记所定义的表格标题一般显示在表格的上方，而且其水平方向是居中对齐。在caption标记之间加入其它对字体进行加重显示的标记，可使表格的标题突出显示。如：表格标题强调,5/8/2020,33,6.3.2框架框架能够将页面分成数个独立变化的窗口，每个窗口可显示不同的Web页。语法：其中：(1).中的内容显示在不支持分框的浏览器窗口中。(2)：指定分框，并可嵌套，分区中各部分显示的内容用指定。说明：分框可以将窗口横向分成几个部分，也可以纵向分成几个部分，还可以混合分框。,5/8/2020,34,1.垂直划分纵向框架纵向框架：用指定，#：为一百分数，规定各框占主窗口的百分比；为一整数，指定各框的绝对大小。2.水平划分横向框架横向框架：用指定，#：为一百分数，规定各框占主窗口的百分比；为一整数，指定各框的绝对大小。举例：在index.htm中将主窗口分成50%，30%，20%的几个区域，各区域的内容分别为left.htm，middle.htm，right.htm。,5/8/2020,35,index.htm：纵向框架left.htm：left.htm文件这里是左框架,middle.htm：middle.htm文件这里是中框架right.htm：right.htm文件这里是右框架,演示1,演示2,5/8/2020,36,3.混合划分框架的嵌套框架的嵌套：将窗口横纵几个区域。举例：将窗口分成20%，80%，然后将右边区域再分成分别占40%和60%的上下两个区域。框架,演示,5/8/2020,37,6.4表单设计表单用来将用户数据从浏览器传递给Web服务器。利用表单可以建立一个录入界面，也可以对数据库进行查询。表单的操作是与服务器进行交互的操作，服务器端的操作是通过服务器端的程序来实现的。ASP程序在服务器端工作，通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。,5/8/2020,38,1.表单的标记格式：method：指定表单数据的提交方式，*代表GET或POST，表示浏览器与服务器之间的通信方式。GET：默认方式，用户提交的内容显示在提交后的新页面中，它的信息长度不超过255个字符，适合传输少量数据。POST：数据流，不显示，输入的数据放入数据缓冲区，它对传送给服务器的信息长度没有限制，适合传输较大量数据。action：指出该表单所对应处理程序的位置。其参数值为程序的URL。举例：,5/8/2020,39,表单中提供给用户的输入形式*代表text,password,checkbox,radio,image,hidden,submit,reset之一的输入元素类型。#代表表单元素的名称，即所附信息同时发给服务器的一个信息名称。注意：必须嵌套在表单中。表单中主要的控件元素按钮：单选按钮(radio)，提交按钮(submit)，复位按钮(reset)，图像字段(image)。选择框：复选框按钮(checkbox)。文本框：文本输入框(text)，密码输入(password)。下拉菜单：,5/8/2020,40,2.提交与复位按钮(1)提交按钮(submit)格式：作用：控制将表单的内容发送给服务器。type：按钮的动作属性。#：按钮上显示的文本，如“提交表单”。(2)复位按钮(reset)格式：作用：清除表单中已填写的内容，恢复为初始值。type：按钮的动作属性。#：按钮上显示的文本，如“重新填写”。,5/8/2020,41,3.文字输入和密码输入格式：*：为text(文字输入)或password(密码输入)。#：为文本的初始值。n1：文本框的长度。n2：文本框的最大长度。,5/8/2020,42,举例：提交、复位按钮和文字密码输入请填入您相关的资料：姓名：电子邮件地址：主页网址：密码：,演示,5/8/2020,43,4.单选按钮和复选框(1)单选按钮格式1：格式2：value：当该项被选中并提交后，浏览器要传送给服务器的数据，该属性是不可缺省的。checked：初始状态被选中，用于指定默认值。(2)复选框格式1：格式2：value属性与checked属性同单选按钮。复选框使用户可以同时选中表单的一个或几个复选项作为输入信息。,5/8/2020,44,举例：单选按钮与复选框选择一种你喜爱的水果:香蕉草莓橘子选择你所喜爱的运动:足球篮球排球,演示,5/8/2020,45,6.5嵌入图片、声音和视频图像1.嵌入图片格式：#：图片的URL，可用相对路径和