收藏 分销(赏)

ASP动态网页设计教程1005页教学课件全书电子教案.ppt

上传人:w****g 文档编号:3256530 上传时间:2024-06-27 格式:PPT 页数:1005 大小:14.84MB
下载 相关 举报
ASP动态网页设计教程1005页教学课件全书电子教案.ppt_第1页
第1页 / 共1005页
ASP动态网页设计教程1005页教学课件全书电子教案.ppt_第2页
第2页 / 共1005页
ASP动态网页设计教程1005页教学课件全书电子教案.ppt_第3页
第3页 / 共1005页
ASP动态网页设计教程1005页教学课件全书电子教案.ppt_第4页
第4页 / 共1005页
ASP动态网页设计教程1005页教学课件全书电子教案.ppt_第5页
第5页 / 共1005页
点击查看更多>>
资源描述

1、ASPASP动态网页设计教程动态网页设计教程 1内内 容容 简简 介介 本书从实用的角度介绍了网站架设与网页制作的相关技术。全书共分11章:第1章介绍了互联网的基础知识;第2章介绍了IIS网站规划与管理;第3章是对HTML的简介;第4章介绍了VBScript的用法;第5章介绍了ASP的基础知识及简单应用;第6章介绍了HTML表单与ASP的应用;第7章介绍了ASP中的对象;第8章介绍了ASP与SQLServer的结合;第9章介绍了数据库查询的技巧;第10章介绍了如何访问文本文件;第11章是一个综合的设计实例。书2内内 容容 简简 介介 中每一章的例题几乎都与网站常用的功能有关,例如计数器、在线交

2、易、动态切换网页、密码修改、聊天室等,方便读者学以致用。本书适合作为高职高专相关网站架设和网页制作课程的教材。也可作为对网站架设和网页制作感兴趣的初、中级读者的参考书籍。3目录目录第1章 认识互联网第2章 IIS网站规划与管理第3章 HTML简介第4章 VBScript第5章 ASP的第一次接触第6章 HTML表单与ASP第7章 ASP对象4目录目录第8章 ASP与SQLServer第9章 数据库查询的技巧第10章 文本文件的访问第11章 设计实例5参考文献参考文献1 志凌团队,陈世明,江高举编著.ASP从入门到精通.北京:中国铁道出版社,20012 荣钦科技主笔室编著.ASP入门与应用.北京

3、:中国铁道出版社,20013 黄刚等编著.MacromediaStudioMX网页设计培训教程.北京:清华大学出版社,20034 林义证等编著.HTML与ASP网页制作教程.北京:中国铁道出版社,20006第第1 1章章 认识互联网认识互联网ASPASP动态网页设计教程动态网页设计教程第第1 1章章 认识互联网认识互联网国际互联网自1996年开始蓬勃地发展,发展初期都是以静态网站为主,主要提供公司基本信息、产品的介绍等,这种纯粹以提供信息为主的网站,是第一代互联网的基本特点。后来在美国由华人杨智远领军的Yahoo网站,在网络上提供网站黄页簿分类检索的服务(类似电信局的电话簿),让网友通过Yah

4、oo的搜索引擎(SearchEngine)快速地在茫茫网海中找到所要的信息,而逐渐在网络上崭露头角,并得到全球上网人士的青睐,成为第二代网络应用的主流。到了最后,由于网站具有全球可用及全球统一的用户界面,因此许多的企业将原本在局域网使用的数据库,移植到互联网上,并与电子商务结合而成为第三代网站的主要应用。本章主要以介绍WindowsXP架设IIS(InternetInformationServer)网站为基础,针对架设Web网站所需的相关知识做一个基本的介绍,让读者可以轻松及快速地进入网络世界的实际应用层次。8第第1 1章章 认识互联网认识互联网1.1什么是互联网1.2架站所需配置1.3网站服

5、务器1.4完整的运行流程91.11.1什么是互联网什么是互联网互联网(Internet)是以标准的TCP/IP通讯协议为基础,将分布在全球各地的局域网串联在一起,完成资源共享的网络世界。目前全世界约有千万个主机串联在互联网上,形成一个相连的Internet世界,这些主机是由个人、教育机构及企业用户等相关单位所设立,通过Internet可以达到资源共享的目的。101.11.1什么是互联网什么是互联网 1.1.1互联网的架构1.1.2客户端上网所需的配置111.11.1什么是互联网什么是互联网1.1.1互联网的架构互联网的硬件架构如下图所示:121.11.1什么是互联网什么是互联网1.1.2客户端

6、上网所需的配置下面是个人拨号上网所需准备的软、硬件设备:(1)个人计算机(2)调制解调器(3)电话线(4)操作系统(5)浏览器(6)向ISP公司申请一个上网的账号(7)设置拨号上网的参数131.11.1什么是互联网什么是互联网1.1.2客户端上网所需的配置1.个人计算机个人计算机上网所需的基本配置建议如下:PentiumII以上的CPU;64MB以上的内存;3.5英寸软驱;4.3GB以上的硬盘;32倍速以上的光驱;一个鼠标;101键的标准键盘;56K调制解调器;Windows操作系统;InternetExplorer浏览器(已内置于操作系统中)141.11.1什么是互联网什么是互联网1.1.2

7、客户端上网所需的配置2.调制解调器调制解调器是一种数字与模拟信息转换的设备,个人计算机可以处理的是数字信息,而数据通过电话线传输至远程时必须转换为模拟信号,当另一端收到模拟信号时,必须通过调制解调器再将模拟信号转为数字信号后,交给计算机处理。151.11.1什么是互联网什么是互联网1.1.2客户端上网所需的配置3.Windows操作系统操作系统是个人计算机必备的软件,通常个人计算机的硬件厂商均会随机附赠Windows操作系统,例如Windows98,Windows2000或WindowsXP等。另外,由于互联网采用TCP/IP通讯协议,因此您的操作系统一定要安装TCP/IP通讯协议,才可以连接

8、上网。161.11.1什么是互联网什么是互联网1.1.2客户端上网所需的配置4.浏览器Microsoft网络探险家浏览器的用户界面如下图所示。171.11.1什么是互联网什么是互联网1.1.2客户端上网所需的配置5.ISPISP即为互联网服务提供者(InternetServiceProvider),它主要是提供企业及个人用户拨号上网的服务,当您准备好个人计算机等相关配置后,必须向ISP申请一个账号,方能利用Modem拨号上网。当然,也可以直接申请ADSL或其它专线服务,国内的ISP企业如163、236等。181.11.1什么是互联网什么是互联网1.1.2客户端上网所需的配置6.IP地址在TCP

9、/IP通讯协议的Internet环境上,每一部计算机主机均有一个地址(用以代表该主机),此地址是由四段0255的数字所组成,例如203.70.56.129,这组数字称为IP地址。说明:拨号上网时,个人计算机的IP是由ISP主机动态指定,因此每次上网的地址均不相同,只有固定式的用户才有固定的IP地址。191.21.2架站所需配置架站所需配置个人利用个人计算机及ADSL线路架设Web网站,其架构最为简单,如下图所示。201.21.2架站所需配置架站所需配置若是小型公司架站的话,目前有一种利用ADSL架站的服务,它同时可让公司的多部个人计算机同时上网(ISP会提供5个IP地址),利用该方案提供的路由

10、器或集线器,即可立即连接到Internet。其系统架构如下图所示。211.21.2架站所需配置架站所需配置若是企业用户架站,则系统的需求较为复杂,仅有Web网站需求的企业,可参考的网站架构如下图所示。221.31.3网站服务器网站服务器 1.3.1浏览器与网站服务器的关系1.3.2WebServer与数据库服务器231.31.3网站服务器网站服务器1.3.1浏览器与网站服务器的关系Web技术架构在主从(Client/Server)架构的环境下,Client端用户接口的标准为浏览器,Server端则是网站服务器(WebServer)。Client端与Server端通过HTML语言沟通,达到信息共

11、享的目的,如下图所示。浏览器与WebServer间的通讯是采用标准的HTTP通讯协议。241.31.3网站服务器网站服务器1.3.2WebServer与数据库服务器在电子商务网站中,数据库与WebServer均为独立的主机,当客户通过浏览器进行下载时,系统的运作流程如下图所示。251.41.4完整的运行流程完整的运行流程 Web的详细运行流程整理如下:(1)客户拨号上网。(2)打开浏览器,输入网址,如http:/(此为新浪网的网址)。(3)浏览器发出Request信息,向“新浪”网站要求提供主页的HTML文件。(4)“新浪”的WebServer读取主页(HomePage),并返回信息给浏览器。

12、(5)浏览器解析WebServer送来的主页(HTML文件),根据主页的HTML文件的内容,编排输出格式后显示在浏览器的画面上,完成整个流程。26第第1 1章章 认识互联网认识互联网相信读者看完本章,对互联网的运作已有初步的了解,对于阅读后续的章节将有相当大的帮助,您若对互联网有兴趣的话,可以到W3C的网站查询相关技术数据。27第第2 2章章IISIIS网站规划与管理网站规划与管理 ASPASP动态网页设计教程动态网页设计教程第第2 2章章 IISIIS网站规划与管理网站规划与管理 WebServer是网络系统平台上最重要的组件之一,由于WindowsXP与Unix操作系统上的差异,IIS除提

13、供标准的CGI接口以外,还为利用Windows操作系统特有的DLL模块,提供了特别量身订做的ISAPI接口,以提高整个IIS的运行效率。本章我们将针对IIS的基本硬件需求、网站的规划管理,为读者介绍Internet服务管理器等相关工具的使用说明,让您在管理WebServer时,更得心应手。29第第2 2章章 IISIIS网站规划与管理网站规划与管理 2.1什么是IIS2.2Internet服务管理器302.12.1什么是什么是IISIISIIS全名为InternetInformationServer,它是为微软针对WindowsNT操作系统所设计的WebServer,其最大特色是可与Windo

14、wsNT做紧密的结合。312.12.1什么是什么是IISIIS2.1.1软硬件需求2.1.2IP地址的查询及设置322.12.1什么是什么是IISIIS2.1.1软硬件需求1.硬件需求CPU:PentiumII以上,速度越快越好(也要考虑成本)。内存:基本需求为128MB,建议安装256MB以上。硬盘:建议采用SCSI硬盘,例如UltraSCSI-3的硬盘。2.软件需求操作系统:WindowsXPProfessional。网站服务器:IIS5.1。安装SMTP服务。安装FTP服务。332.12.1什么是什么是IISIIS2.1.2IP地址的查询及设置有关TCP/IP中IP的设置步骤,请参考如下

15、:1.342.12.1什么是什么是IISIIS2.1.2IP地址的查询及设置2.352.12.1什么是什么是IISIIS2.1.2IP地址的查询及设置3.362.2Internet2.2Internet服务管理器服务管理器 Internet服务管理器是Microsoft针对互联网相关的服务,例如WWW、FTP、SMTP等服务所提出的管理工具,通过它我们可以管理各种Internet的服务。本节要介绍的Internet服务管理器内容如下:372.2Internet2.2Internet服务管理器服务管理器 2.2.1监视系统运行状态2.2.2设置主目录2.2.3调整默认的Web文档2.2.4停止W

16、ebServer服务2.2.5重新启动WebServer服务2.2.6新建虚拟目录2.2.7Web的日志382.2Internet2.2Internet服务管理器服务管理器2.2.1监视系统运行状态操作步骤如下:1.392.2Internet2.2Internet服务管理器服务管理器2.2.1监视系统运行状态2.402.2Internet2.2Internet服务管理器服务管理器2.2.1监视系统运行状态3.412.2Internet2.2Internet服务管理器服务管理器2.2.1监视系统运行状态4.WWW服务的状态为运行中422.2Internet2.2Internet服务管理器服务管理

17、器2.2.1监视系统运行状态5.可以看到“默认网站”中所有的目录信息432.2Internet2.2Internet服务管理器服务管理器2.2.2设置主目录操作步骤如下:1.442.2Internet2.2Internet服务管理器服务管理器2.2.2设置主目录2.452.2Internet2.2Internet服务管理器服务管理器2.2.3调整默认的Web文档操作步骤如下:1.462.2Internet2.2Internet服务管理器服务管理器2.2.3调整默认的Web文档2.472.2Internet2.2Internet服务管理器服务管理器2.2.4停止WebServer服务482.2I

18、nternet2.2Internet服务管理器服务管理器2.2.5重新启动WebServer服务492.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录虚拟目录是采用“别名(Alias)”的方式创建目录的对应关系。创建虚拟目录的操作步骤如下:1.502.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录2.512.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录3.522.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录4.532.2Internet2.2Int

19、ernet服务管理器服务管理器2.2.6新建虚拟目录5.542.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录6.552.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录7.562.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录8.572.2Internet2.2Internet服务管理器服务管理器2.2.6新建虚拟目录9.新建的别名vba所对应的目录下,所有的文件已出现在画面上582.2Internet2.2Internet服务管理器服务管理器2.2.7Web的日志IIS会将网络访问的记

20、录存放在日志中,此日志的格式可以为下列3种:NCSA公用日志文件格式ODBC日志W3C扩充日志文件格式其中ODBC日志是将Web的日志存放在ODBC数据库中,其余的是放在传统的顺序文件,默认值为W3C扩充日志文件格式。592.2Internet2.2Internet服务管理器服务管理器2.2.7Web的日志设置步骤如下:1.602.2Internet2.2Internet服务管理器服务管理器2.2.7Web的日志2.612.2Internet2.2Internet服务管理器服务管理器2.2.7Web的日志3.“日志文件目录”的默认位置为C:WINDOWSsystem32LogFiles62第第

21、2 2章章 IISIIS网站规划与管理网站规划与管理本章针对IIS的基本硬件需求、网站的规划管理,为读者介绍了Internet服务管理器等相关工具的使用说明,使您在管理WebServer时,更得心应手。63第第3 3章章 HTMLHTML简介简介ASPASP动态网页设计教程动态网页设计教程第第3 3章章 HTMLHTML简介简介 3.1什么是HTML3.2背景设置3.3文字属性的变化3.4图文并茂的文件3.5超级链接3.6表格3.7段落3.8水平线3.9什么是CSS653.13.1什么是什么是HTMLHTMLHTML全名为HyperTextMarkupLanguage,中文译为超文本标记语言,

22、这是创建网页的脚本语言,它提供了精简而有力的文件定义,使我们可以设计出多姿多彩的超媒体文件(HypermediaDocument),通过HTTP(HyperTextTransferProtocol)通讯协议,使得HTML文件可以在全球互联网(WorldWideWeb,WWW)上进行跨平台的文件交换。HTML文件为纯文本的文件格式,可以用任何的文本编辑器来编辑,HTML是以标记来描述文件中的多媒体信息。663.13.1什么是什么是HTMLHTML3.1.1HTML文件3.1.2HTML组成的基本组件673.13.1什么是什么是HTMLHTML3.1.1HTML文件HTML文件的结构是由HEAD及

23、BODY两大部分所组成,如下图所示。683.13.1什么是什么是HTMLHTML3.1.2HTML组成的基本组件此标记必须分别置于HTML文件的开头和结尾,其主要的功能是告诉浏览器(Browser)这是HTML文件,且文件是由起始标记开始,至结束标记结束。此标记为文件的表头区,主要作用是用来描述关于网页的相关信息,例如编码方式、网页的标题等。网页输出编排的重头戏几乎全部放在与之间,凡在网页上显示的各种文字或图片等,均必须置于这一标记的范围内。693.13.1什么是什么是HTMLHTMLHTML文件范例(page3_1.htm)HTML第一步Howdoyoudo!执行结果如图所示。703.23.

24、2背景设置背景设置 在HTML中,可以自行定义网页的背景颜色或以某张图片填满网页的背景,而这些设置必须在的属性里进行,其用法如下:Body的相关属性说明请见下页表所示。713.23.2背景设置背景设置 属 性说 明Text=“颜色值”设置网页默认的字体颜色,对于没有特别指定颜色的文字,都以此设置为准。颜色值有两种表示方式,第一种为常数表示方式,例如red代表红色,yellow代表黄色等。另一种表示方式为RGB三原色的表示,颜色值是以三组十六进制的RGB数值来表示(十六进制的前导字符为“#”),颜色值的格式如下“#RRGGBB”,例如红色的值为“#FF0000”,绿色的值为“#00FF00”,蓝

25、色的值为“#0000FF”Link=“颜色值”超级链接文字的字体颜色,默认值为蓝色加下划线的字,颜色的指定方法同上Vlink=“颜色值”已点击(Click)过的超级链接文字的字体颜色Bgcolor=“颜色值”指定网页的背景颜色,仅能指定单一颜色(无法指定渐变的颜色)Background=“图形名”指定背景图将使图片充满整个浏览器的显示区,背景图片的格式以浏览器支持的图形格式为主,通常为.jpg或.gif的图形,目前有许多浏览器已支持Kodak所发表的.png文件格式。若bgcolor与background同时指定,浏览器以background的设置为主723.23.2背景设置背景设置 说明:浏

26、览器对于每一个标记均有默认值,因此,上述的参数如果都不设置,也不会影响网页正常的显示。理论上不设置背景及字体颜色,反而会加速网页的下载速度,像鼎鼎大名的Yahoo,其网页都是不设置背景颜色。如下图所示:733.33.3文字属性的变化文字属性的变化 HTML允许我们对文件中的文字做各种的变化,这些变化就如同使用Word设置文字的属性一样,可以设置文字的大小、颜色、使用的字体名称及字体样式等,详细的使用说明分述如下。743.33.3文字属性的变化文字属性的变化 3.3.1设置文字的字体、大小及颜色3.3.2文字的样式3.3.3空格符3.3.4换行3.3.5预先编排好的文字3.3.6编号及项目符号7

27、53.33.3文字属性的变化文字属性的变化3.3.1设置文字的字体、大小及颜色在HTML中我们可以使用标记设置文字属性,它的语法如下:显示的文字HTML当初定义时,将字体由小到大排列,分为17个等级(字体的大小视浏览器的定义而异),若不设置字体大小,其默认值为3。此外,字体大小也可以以3为基准用相对大小来表示,例如:+1代表4;-2代表1;以此类推。763.33.3文字属性的变化文字属性的变化3.3.1设置文字的字体、大小及颜色设置文字属性范例(page3_2.htm)如下:设置文字属性文字之美773.33.3文字属性的变化文字属性的变化3.3.1设置文字的字体、大小及颜色上述范例在Micro

28、softInternetExplorer浏览器中输出的画面如下图所示。783.33.3文字属性的变化文字属性的变化3.3.2文字的样式HTML文件提供的文字样式有粗体字、斜体字、及加下划线等3种样式,且样式可混合指定使用,其使用方法如下:粗体字:粗体字斜体字:斜体字加下划线:加下划线粗体字+斜体字:粗体字+斜体字粗体字+加下划线:粗体字+加下划线文字的样式范例(page3_3.htm)见下页:793.33.3文字属性的变化文字属性的变化3.3.2文字的样式文字的样式粗体字斜体字加下划线粗体字+斜体字粗体字+加下划线斜体字+加下划线803.33.3文字属性的变化文字属性的变化3.3.2文字的样式

29、在MicrosoftInternetExplorer浏览器中,输出的画面如下图所示。813.33.3文字属性的变化文字属性的变化3.3.3空格符在HTML中,空格符并不具有调整间距的功能(连续出现多个空格符时,仅第一个空格符有效),若要正确的使用空格符,请改用HTML空格符的编码值( ),这样才能完成空格符的功效,例如(page3_4.htm):空格符第一行前面按了三次空格符   改用三个编码值 823.33.3文字属性的变化文字属性的变化3.3.3空格符执行结果如下图所示:这里按了3次空格符,结果只出现一个空格改用3个编码值 则在结果

30、中出现了3个空格。833.33.3文字属性的变化文字属性的变化3.3.4换行在HTML文件中,换行必须使用标记,范例如下:page3_5.htm换行第一行第二行我不换行执行结果如图所示。843.33.3文字属性的变化文字属性的变化3.3.5预先编排好的文字可以使用标记,将已编辑好的文件置于此标记之中,它就可以按照您所想要的格式输出。范例page3_6.htm:预先编排好的文字现在我想换行就换行,再也不用看HTML的脸色了。就算没有<BR>标记也没关系853.33.3文字属性的变化文字属性的变化3.3.5预先编排好的文字执行结果如下图所示:863.33.3文字属性的变化文字属性的变化

31、3.3.6编号及项目符号1.编号在HTML文件中项目编号是以标记并搭配标记表示。项目编号的用法如下:范例page3_7.htm:雄壮编号威武男生要873.33.3文字属性的变化文字属性的变化3.3.6编号及项目符号执行结果如下图所示。883.33.3文字属性的变化文字属性的变化3.3.6编号及项目符号标记还可以TYPE属性设置不同的项目编号,可用的TYPE属性值如下表所示。属性值说 明“A”项目符号为A,B,C,“a”项目符号为a,b,c,“I”项目符号为I,II,III,“i”项目符号为i,ii,iii,“1”项目符号为1,2,3,(默认值)893.33.3文字属性的变化文字属性的变化3.3

32、.6编号及项目符号范例page3_8.htm:女生要不同的项目编号温柔贤淑男生要雄壮威武903.33.3文字属性的变化文字属性的变化3.3.6编号及项目符号执行结果如下图所示。913.33.3文字属性的变化文字属性的变化3.3.6编号及项目符号2.项目符号项目符号是以特定的字符为编号,在HTML文件中是以标记表示,并须搭配.标记使用。项目符号的用法(范例page3_9.htm)如下:女生要项目符号温柔贤淑男生要雄壮威武923.33.3文字属性的变化文字属性的变化3.3.6编号及项目符号执行结果如下图所示。933.43.4图文并茂的文件图文并茂的文件 在HTML文件中,图形文件与HTML文件是分

33、开存放的,通过HTML的标记,描述欲显示的图形文件名称,即可在浏览器中显示图片。标记的语法如下:943.43.4图文并茂的文件图文并茂的文件 3.4.1指定文件来源3.4.2指定图形的宽度及高度3.4.3图片边框3.4.4图形或文字3.4.5对象居中953.43.4图文并茂的文件图文并茂的文件3.4.1指定文件来源在src=“文件名”中,文件的名称有两种表示方式,一种是明确的指出图形文件的完整路径,称为绝对路径;另一种是以目前网页所在的目录为基准(作为参考路径),称为相对路径。1.绝对路径使用绝对路径显示图片实例的HTML源代码(page3_10.htm)如下:imgsrc=http:/ 超级

34、链接的概念:所谓超级链接(Hyperlink),就是当用鼠标点选文字、图片时,可以链接文字或图片到其他网页的功能(可跨网站链接),而超级链接又可分为文字超级链接和图片超级链接。1103.53.5超级链接超级链接 3.5.1文字超级链接3.5.2图片超级链接3.5.3页内超级链接3.5.4超级链接电子邮件账号1113.53.5超级链接超级链接3.5.1文字超级链接如果要让网页中的某一段文字成为超级链接,只要在链接标题前后分别加入及两个标记就可以了。范例(page3_15.htm)如下:超链接找工作、找人才,请单击hlfjob人才求职网1123.53.5超级链接超级链接3.5.1文字超级链接结果显

35、示如图所示。当用户点选“hlfjob人才求职网”的超级链接时,将超级链接至http:/。1133.53.5超级链接超级链接3.5.2图片超级链接图片超级链接的语法,大致上与文字超级链接相同,只是链接标题的部分改为图片。插入图片的方式是在与之间加入,范例(page3_16.htm)如下:图片超链接hlfjob人才求职网1143.53.5超级链接超级链接3.5.2图片超级链接InternetExplorer浏览器中的显示效果如下图所示。当用户点选“02.bmp”图片或“hlfjob人才求职网”文字的超级链接时,将超级链接至http:/。1153.53.5超级链接超级链接3.5.3页内超级链接除了文

36、字与图形的链接以外,超级链接也可以发生在同一个网页之中,也就是文件内部的自我链接,此种链接方式比较适合长篇幅的网页。通常网页设计师会在页首标明网页的主题(Subject),通过点选主题的方式,让光标直接移到主题所指的内容部分,减少用户拖动滚动条或点击滚动条的次数。下面是一篇HTML电子图书的网页,在“USB接口应用指南”题目下方为同一网页内容中的所有主题,见下页图示。说明:该范例(page3_17.htm)HTML源代码内容太多,在此略去。1163.53.5超级链接超级链接3.5.3页内超级链接网页内超级链接的HTML语法,与外部超级链接的用法是相同的,惟一不同的是链接的标题若为同一网页,则必

37、须使用页内链接的方式来处理,其页内链接的表示方式,是使用“#”字符加上标记名称,例如:一、让电脑支持USB当我们点选“一、让电脑支持USB”的主题后,画面自动移至该主题上,如下页图所示。1173.53.5超级链接超级链接3.5.3页内超级链接为了配合上述的页内链接,此主题须加上页内标记名称。如此,当用户点选该主题时,浏览器才能识别要将页面移往何处。页内标记的用法如下:一、让电脑支持USB1183.53.5超级链接超级链接3.5.4超级链接电子邮件账号超级链接也可指定与用户计算机默认的电子邮件软件进行链接,以利于与电子邮件集成。例如在网页的页尾通常会摆放网站的服务信箱,如下图所示。网站服务信箱1

38、193.53.5超级链接超级链接3.5.4超级链接电子邮件账号当用户点选该信箱时,会自动启动用户计算机内部默认的电子邮件软件(例如Outlook、OutlookExpress等),并将其E-mail地址放在收件人位置,如下图所示。E-mail地址1203.53.5超级链接超级链接3.5.4超级链接电子邮件账号链接电子邮件是使用“mailto:”,后面加上电子邮件账号而成;要链接电子邮件软件时,若有参数要自动带至电子邮件软件时(如电子邮件主题),则可由URL带参数来完成。范例(page3_19.htm)如下:超级链接电子邮件1213.53.5超级链接超级链接3.5.4超级链接电子邮件账号在Int

39、ernetExplorer中浏览的效果如下图所示。当点选邮件账号后,OutlookExpress将自动被启动,且“主题”已自动填入“建议”等文字,如下页图所示。1223.53.5超级链接超级链接3.5.4超级链接电子邮件账号自动填入“建议”等文字1233.53.5超级链接超级链接3.5.4超级链接电子邮件账号电子邮件软件的相关参数很多,例如:抄送(CC)、主题(Subject)及信件内容等,都可以使用URL指定,要注意的是参数与参数之间须以“&”符号隔开,范例的HTML源代码(page3_20.htm)如下:超级链接电子邮件1243.53.5超级链接超级链接3.5.4超级链接电子邮件账号范例(

40、page3_20.htm)在InternetExplorer中运行效果如下图所示。当用户点选后,在OutlookExpress自动被启动时,相关的字段已自动填入适当的值,如下页图所示。1253.53.5超级链接超级链接3.5.4超级链接电子邮件账号相关的字段已自动填入适当的值1263.63.6表格表格 在HTML输出编排的标记当中,并没有指定显示位置的功能(例如文字要显示在x坐标等于5,y坐标等于100处),因此对于复杂的版面就无法精确地编辑,此时只好通过表格来定位。在HTML中表格可以用来定位。在HTML中表格的起始标记为,结束标记为,完整的标记语法如下:实际上,表格又可分为列(Column

41、)和行(Row)。竖的称为Column,横的我们称为Row。1273.63.6表格表格 3.6.1行与列3.6.2行与列的背景颜色3.6.3表格边框的颜色3.6.4表格间距3.6.5合并单元格1283.63.6表格表格3.6.1行与列行的标记.必须配合表格使用,与之间代表一行。一般在编写表格时,必须先写行,然后再写列于其中,范例(page3_21.htm)如下:第二行,第一列第二行,第二列HTML的表格第二行,第三列第三行,第一列第三行,第二列第一行,第一列第三行,第三列第一行,第二列第一行,第三列这是一个3行3列(33)的表格1293.63.6表格表格3.6.1行与列利用InternetEx

42、plorer来观看的结果如下图所示。说明:tr是tablerow的意思,td是tabledata的意思。1303.63.6表格表格3.6.2行与列的背景颜色在IE浏览器中,及标记均可以指定背景颜色,使用的原则是同一行的背景相同则在中指定。例如:.若每一列的颜色均不相同,则可以在中指定颜色。例如:.1313.63.6表格表格3.6.3表格边框的颜色HTML表格的边框(Border)若未指定,其默认值为0,也即无边框。要显示出表格,Border的值必须大于0,至于边框的颜色可以使用BorderColor属性来指定,其用法范例(page3_22.htm)如下:第二行,第一列第二行,第二列表格边框的颜

43、色第二行,第三列第三行,第一列第三行,第二列第一行,第一列第三行,第三列第一行,第二列第一行,第三列1323.63.6表格表格3.6.3表格边框的颜色利用浏览器InternetExplorer观看时,其显示的效果如下图所示。1333.63.6表格表格3.6.4表格间距在HTML中,表格间距有两个选项,一个是定义表格间的距离(CellSpacing),默认值为2;另一个是定义表格内的字符与表格边界本身的距离(CellPadding),默认值为1,未设置CellSpacing和CellPadding时的效果如图所示。1343.63.6表格表格3.6.4表格间距当设置cellspacing=“5”和

44、cellpadding=“10”时的效果如下页图所示。1353.63.6表格表格3.6.4表格间距若我们将上述两个属性都改为“0”,则其显示效果如下图所示。1363.63.6表格表格3.6.5合并单元格虽然表格是由列(Column)和行(Row)所组成的,但却不一定是固定的个数,有时候我们必须使用合并表格的功能,合并表格又可分为:行合并与列合并两种,合并的原则为由上到下、由左到右。1.合并列假如某一列横跨3个列(占3个列的空间),则可以在标记的属性colspan=n,指定占用的列数,范例(page3_25.htm)HTML代码见下页:1373.63.6表格表格3.6.5合并单元格合并列第一行,

45、第一列第一行,第二列第一行,第三列第一行,第四列第二行,本列占3列第二行,第四列1383.63.6表格表格3.6.5合并单元格利用InternetExplorer来观看的结果如下图所示。colspan=3,本列占3列1393.63.6表格表格3.6.5合并单元格2.合并行可以在标记的属性rowspan=n,指定占用的行数,范例(page3_26.htm)HTML代码如下:合并行第三行,第二列第三行,第三列第三行,第四列第一行,本列纵跨3行第四行,第一列第一行,第二列第四行,第二列第一行,第三列第四行,第三列第一行,第四列第四行,第四列第二行,第二列第二行,第三列第二行,第四列1403.63.6

46、表格表格3.6.5合并单元格执行结果如图3.32所示。rowspan=3,本列纵跨3行1413.73.7段落段落 HTML是当初科学家们用来在网络上发表研究成果的工具,而研究成果不外乎是一些技术性的文件,因此HTML在设计之初即有段落标记的定义,段落标记是以开始,而以为结束标记。1423.73.7段落段落 范例(page3_27.htm)如下:html段落让电脑支持USB现在的大部分电脑带有USB端口。一些老式主板和机箱中也有USB连接器,但可能不起作用。所以一定要检查主板或电脑操作手册,以便查出怎样使USB工作。在老式电脑上,可以在启动时查看电脑的BIOS,以确定它是否支持USB。为了使US

47、B键盘或鼠标在DOS状态下工作,应该选择USBLegacy支持选项(如果有该选项的话)。如果该主板不能接入USB设备,你就应该买一块PCI卡,以便将USB插槽添加到老式电脑中。让Windows系统支持USB并非所有的Windows版本都支持USB。Windows98对很多外设都提供了全面的USB支持。Windows95的零售版则不支持USB,只有后来与PC捆绑销售的Windows95版本才支持USB。你可以看看你的Windows95版本信息(可右击“我的电脑”图标并选择“属性”),如果版本号是以B或者C结尾,则你的这个Windows95只对有限范围的设备提供USB支持。1433.73.7段落段

48、落 显示的效果如下图所示。在段落中也可以指定段落对齐方式,如靠左(Left)、靠右(Right)以及居中(Center)等,其用法如下:段落文字说明:使用段落标记,浏览器会自动在段落后面插入一空白行(这就是段落的定义)。1443.83.8水平线水平线 标记是提供HTML画水平线的功能,并可指定水平线的宽度、大小等。其语法如下:其中“宽度”可指定水平线的点数,也可指定显示屏幕宽度的百分比。例如:显示Size为1,宽度为浏览器画面80%的水平线显示Size为1,宽度为480pixel的水平线1453.83.8水平线水平线 标记的用法范例(page3_28.htm)HTML代码如下:水平线1463.

49、83.8水平线水平线 利用InternetExplorer来观看结果如下图所示。说明:宽度若用屏幕宽度的百分比显示,将随屏幕宽度的变化而变化。1473.83.8水平线水平线 在实际应用上,通常是用水平线将文本与页尾分隔开,并在水平线下方显示版权声明或服务信箱等,请参考下图。1483.93.9什么是什么是CSSCSSCSS是CascadingStyleSheet的缩写,中文译为“层叠样式表”。CSS样式表可以定义网页相关组件的各种属性变化,例如文字背景、字体、字体大小、对齐方式等,它也可以创建一个共同的样式表,让网站的相关网页直接套用,完全跳脱HTML语法及输出编排上的束缚。让网页更具视觉效果,

50、并可大幅度节省维护的时间。在HTML4.0版以后,每一个HTML的标记(Tag)都有一个Class属性,Class的值须套用CSS的定义,方可做出各种精确的排版及样式指定的功能,令HTML输出的画面变得非常的精美及细致。1493.93.9什么是什么是CSSCSS3.9.1CSS类型3.9.2CSS在超级链接中的运用3.9.3实际范例1503.93.9什么是什么是CSSCSS3.9.1CSS类型在HTML网页中,CSS有下列3种不同的使用类型:内嵌CSS将CSS的定义写在HTML源代码标记之间,样式表的有效范围仅为此份HTML文件。局部套用CSS此类型的CSS与特定的HTML标记合并使用,它与内

展开阅读全文
相似文档                                   自信AI助手自信AI助手
猜你喜欢                                   自信AI导航自信AI导航
搜索标签

当前位置:首页 > 教育专区 > 其他

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        获赠5币

©2010-2024 宁波自信网络信息技术有限公司  版权所有

客服电话:4008-655-100  投诉/维权电话:4009-655-100

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :gzh.png    weibo.png    LOFTER.png 

客服