HML网编程基础讲义_第1页
HML网编程基础讲义_第2页
HML网编程基础讲义_第3页
HML网编程基础讲义_第4页
HML网编程基础讲义_第5页
已阅读5页，还剩61页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目二HTML网页编程基础

任务一使用HTML语言来制作网页

任务二在网页中应用JavaScript

任务三使用样式表（CSS）来美化网页任务一使用HTML语言来制作网页【任务要点】1.使用记事本来制作HTML网页2.使用DreamWeaver来制作HTML网页【案例1】使用记事本来制作HTML网页【具体步骤】（在WindowsXP中完成）（1）双击【我的电脑】图标，选择【工具】→【文件夹选项】命令，从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文件的扩展名显示出来。下一页返回任务一使用HTML语言来制作网页（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】→【文本文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3所示的样式。（3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】→【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。（4）在打开的记事本中，输入以下代码：<html><head><title>网页标题</title></head><body>这是我的第一个主页</body></html>下一页返回上一页任务一使用HTML语言来制作网页要浏览这个index.htm文件，只需在桌面上双击它，或者打开浏览器，选择【File】→【Open】命令，然后选择这个文件就行了。效果如图2-5所示。【案例2】使用DreamWeaver来制作HTML网页【具体步骤】（在DreamWeaver8中完成）（1）在D盘根目录下建立文件夹并命名为website（网站）。（2）打开DreamWeaver，选择【文件】→【新建】→【基本页】→【HTML】→【创建】命令，将出现Unitiled-1（未命名1）的页面，如图2-6所示。下一页返回上一页任务一使用HTML语言来制作网页（3）选择【文件】→【保存】命令，在弹出的【另存为】对话框的【保存在】下拉列表框中，选择第一步建立的文件夹website，在【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。（4）在上半部分的代码区的<title></title>内，输入“我的第一个首页”，在<body></body>内，输入“此处显示网页的主体内容”。（5）按F12键运行网页，得到图2-7所示的网页。下一页返回上一页任务一使用HTML语言来制作网页【案例3】在DreamWeaver中进行站点发布【具体步骤】（1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹出【计算机管理】对话框，选择【Internet信息服务】→【网站】→【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】→【虚拟目录】→【下一步】命令，如图2-8～图2-10所示。（2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮，选择D:\website→【下一步】→【下一步】→【完成】命令，如图2-11和图2-12所示。下一页返回上一页任务一使用HTML语言来制作网页（3）打开IE浏览器，在【地址】栏中输入http://localhost/webtest/index.htm即可，出现如图2-13所示的页面。（4）打开DreamWeaver，选择【站点】→【新建站点】命令，在弹出的对话框中打开【高级】选项卡，按照步骤（5）、（6）、（7）分别完成【本地信息】、【远程信息】、【测试服务器】的配置就可以了，如图2-14所示。（5）在【本地信息】中，在【站点名称】文本框中给站点起名为myWebsite，将【本地文件夹】设置为D:\website，如图2-15所示。（6）在【远程信息】中，将【访问】下拉列表框中的值设置为“本地/网络”，将【远程文件夹】设置为“D:\website”，并对应图将复选框进行勾选，如图2-16所示。下一页返回上一页任务一使用HTML语言来制作网页（7）在【测试服务器】中，将【服务器模型】设置为“ASPJavaScript”，将【访问】设置为“本地/网络”，在【URL前缀】中的http://localhost/后加上“webtest”，结果如图2-17所示。下一页返回上一页任务一使用HTML语言来制作网页【背景知识】一、HTML概述HTML是HypertextMarkedLanguage的简写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准，用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（WorldWideWeb，也可称为Web，中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过Web浏览器显示出效果。

下一页返回上一页任务一使用HTML语言来制作网页所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术，即通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接，直接获取相关的主题。HTML只是一个纯文本文件。创建一个HTML文档只需要两个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用来打开Web网页文件，提供给用户查看Web资源的客户端程序。下一页返回上一页任务一使用用HTML语言来制制作网页二、HTML的基本本结构一个HTML文档是是由一系列列的元素和和标签组成成的，元素素名不区分分大小写。。HTML用标签来来规定元素素的属性和和它在文件件中的位置置，HTML超文本本文档分文文档头和文文档体两部部分，在文文档头里，，对这个文文档进行了了一些必要要的定义，，文档体中中才是要显显示的各种种文档信息息。下一页返回上一页任务一使用用HTML语言来制制作网页下面是一个个最基本的的HTML文档的代代码：<HTML>-----------------------------------------------|开始标标签<HEAD>---------------------------------------------|头头部标签开开始<TITLE>一个个简单的HTML示示例</TITLE>------------|Title标签对对用来在标标题栏内显显示网页主主题</HEAD>------------------------------------------------|头头部标签结结果<BODY>-----------------------------------------|主主体开始这是网页的的文档的显显示部分（（大部分代代码是在这这个标签对对里面的））</BODY>----------------------------------------|主主体结束</HTML>-----------------------------------------------|结尾尾标签下一页返回上一页任务一使用用HTML语言来制制作网页三、HTML的标签签与属性对于刚刚接接触超文本本的朋友，，遇到的最最大的障碍碍就是一些些用“<””和“>””括起来的的句子，称称之为标签签，它是用用来控制文文本的布局局、文字的的格式以及及五彩缤纷纷的页面。。标签通过过指定某块块信息为段段落或标题题等来标识识文档某个个部件。属属性是标志志里的参数数的选项，，HTML的标签分分单标签和和成对标签签两种。成成对标签是是由首标签签（<标签签名>）和和尾标签（（</标签签名>）组组成的，成成对标签的的作用域只只作用于这这对标签中中的文档。。单独标签签的格式的的（<标签签名>），，单独标签签在相应的的位置插入入元素就可可以了，大大多数标签签都有自己己的一些属属性,属性性要写在首首标签内，，属性用于于进一步改改变显示的的效果,各各属性之间间无先后次次序，属性性是可选的的，属性也也可以省略略而采用默默认值；其其格式如下下：<标签名名字属性性1属性性2属性性3…>内容</标签签名字>下一页返回上一页任务一使使用HTML语语言来制制作网页页作为一般般的原则则，大多多数属性性值不用用加双引引号。但但是包括括空格、、％、＃＃等特殊殊字符的的属性值值必须加加双引号号。为了了培养良良好的习习惯，提提倡对属属性值全全部加双双引号。。如：<fontcolor="#ff00ff"face="宋宋体"size="30">字体设设置</font>四、常用用标记（（tag）及属属性的英英文识记记常用标记记及属性性的英文文识记见见表2-1。返回上一页任务二在在网页中中应用JavaScript【任务要要点】1.学会会事件驱驱动（处处理）的的编程思思想2.掌握握对象及及对象的的事件、、方法、、属性3.掌握握基于对对象化的的编程【案例1】应用用JavaScript事件件、属性性、方法法来制作作网页【具体步步骤】（1）在在DreamWeaver中中新建一一个网页页，命名名为index.htm，并并保存在在D:\website中。。（2）打打开index.htm，并并在其代代码框的的<head></head>标签签对中输输入以下下代码，，如图2-21所示。下一页返回任务二在在网页中中应用JavaScript【案例2】应用用JavaScript内置置对象来来制作网网页【具体步步骤】（1）如如前所述述，在D:\website中使用用DreamWeaver建建立一个个页面，，并命名名为default.htm。（2）在在DreamWeaver中中，选择择【文件件】→【【新建】】命令，，在弹出出的对话话框中的的【常规规】选项项卡中，，选择【【基本页页】选项项，单击击【创建建】按钮钮，并命命名为default.html。。（3）在在<head></head>标签签对中输输入以下下代码，，如图2-22所示。下一页返回上一页任务二在在网页中中应用JavaScript（4）继继续在DreamWeaver中进进行操作作，选择择【文件件】→【【新建】】命令，，在弹出出的对话话框中的的【常规规】选项项卡中，，选择【【基本页页】选项项，单击击【创建建】按钮钮，并命命名为default1.html。（5）在在<body></body>内输输入文字字“这是是弹出的的一个通通知窗口口”，如如图2-23所示。（6）在在DreamWeaver中中，选择择【文件件】→【【新建】】命令，，在弹出出的对话话框中的的【常规规】选项项卡中，，选择【【基本页页】选项项，单击击【创建建】按钮钮，并命命名为default2.html。（7）在<body></body>内输入代代码，如图2-24所示。（8）按照前前面所学的知知识，在DreamWeaver中中设置站点，，并在IIS中设置Web站点发布布。（9）运行结结果如图2-25所示。下一页返回上一页任务二在网网页中应用用JavaScript（10）单单击【单击击我，仔细细查看标题题样和窗口口内容】按按钮，可得得到如图2-26所示的页面面。（11））在在如如图2-25所示示的的页页面面中中点点击击““跳跳转转到到default2.html””超超链链接接，，得得到到如如图2-27所示示的的页页面面。。（12））在在图2-27中，，点点击击““返返回回到到default.html””超超链链接接，，就就回回到到图2-26所示示的的页页面面。。下一一页页返回回上一一页页任务务二二在在网网页页中中应应用用JavaScript【背背景景知知识识】】JavaScript是是一一种种新新的的描描述述性性语语言言，，可可以以被被嵌嵌入入到到HTML文文件件之之中中。。这这是是一一种种基基于于对对象象和和事事件件驱驱动动并并具具有有安安全全性性能能的的脚脚本本语语言言。。使使用用它它的的目目的的是是使使HTML与与JavaScript语语言言一一样样实实现现与与Web客客户户进进行行交交互互，，从从而而可可以以开开发发客客户户端端的的应应用用程程序序等等。。JavaScript的的出出现现使使得得信信息息和和用用户户之之间间不不仅仅只只是是一一种种显显示示和和浏浏览览的的关关系系，，而而且且实实现现了了一一种种实实时时的的、、动动态态的的、、可可交交互互式式的的表表达达能能力力。。下一一页页返回回上一一页页任务二二在网网页中中应用用JavaScript一、事事件事件定定义了了用户户与Web页面面交互互时产产生的的各种种操作作。简简单地地说，，点击击一个个超链链接或或按钮钮，就就会产产生一一个事事件，，告诉诉浏览览器发发生了了需要要进行行处理理的单单击操操作。。事件件不仅仅可以以在用用户交交互过过程中中产生生，而而且浏浏览器器自己己的一一些动动作也也可能能产生生事件件。比比如说说，浏浏览器器载入入一个个网页页时，，就会会产生生一个个Load事件件。在JavaScript中对对象事事件的的处理理通常常由函函数Function来来担任任，其其基本本格式式与函函数完完全一一样，，格式式如下下：Function事事件处处理名名（参参数表表）｛事件处处理语语句集集……｝下一页页返回上一页页任务二二在网网页中中应用用JavaScript下面介介绍常常用事事件及及处理理。1.浏浏览器器事件件（1））Load事件件当文档档载入入时，，产生生该事事件。。onLoad的一一个作作用就就是在在首次次载入入一个个文档档时检检测Cookie的的值，，并用用一个个变量量为其其赋值值，使使它可可以被被源代代码使使用。。（2））unLoad事件件当Web页页面退退出（（关闭闭或转转向另另一个个页面面）时时会引引发onUnload事事件，，并可可更新新Cookie的状状态。。（3））Submit事件件Submit事事件在在完成成信息息的输输入，，准备备将信信息提提交给给服务务器处处理时时发生生，onSumbit句句柄在在Submit事件件发生生时由由JavaScript自动动调用用执行行。onSubmit句句柄通通常在在标记记中声声明。。下一页页返回上一页页任务二二在网网页中中应用用JavaScript2.鼠鼠标事事件鼠标事事件是是常见见的事事件，，经常常用到到有onClick、onMouseDown、onMouseOver、onMouseOut等等。3.文文本框框事件件在文本本框事事件中中有很很多事事件，，下面面主要要介绍绍onChange、onSelect、、onFocus、、onBlue四种种事件件。onChange事事件，，当利利用Text或或TextArea元素素输入入字符符值改改变时时会引引发该该事件件，同同时，，当在在Select表格格项中中的一一个选选项状状态改改变后后也会会引发发该事事件。。OnSelect事件件，当当Text或Textarea对对象中中的文文字被被加亮亮（选选中））后，，引发发该事事件。。获得得焦点点事件件onFocus，，当用用户单单击Text或或TextArea以及及Select对象象时，，产生生该事事件。。此时时该对对象成成为前前台对对象。。失去去焦点点事件件onBlur，当当Text对象象或TextArea对对象以以及Select对对象不不再拥拥有焦焦点、、而退退到后后台时时，引引发该该文件件，它它与onFocas事件件是一一个对对应的的关系系。下一页页返回上一页页任务二二在网网页中中应用用JavaScript二、内内置对对象JavaScript的的一个个重要要功能能是基基于对对象功功能。。JavaScript的内内置对对象极极大地地简化化了JavaScript程程序设设计，，使其其可以以用更更直观观、模模块化化和可可重用用的方方式进进行程程序开开发。。它支支持开开发对对象模模型并并可将将这些些类型型实例例化，，创建建对象象实例例。JavaScript中中的对对象由由属性性和方方法两两个基基本元元素构构成。。属性性是对对象在在实施施其行行为的的过程程中，，实现现信息息的装装载单单位，，从而而与变变量相相关联联。方方法是是指对对象能能够按按照设设计者者的意意图而而被执执行，，从而而与特特定的的函数数关联联。下一页页返回上一页页任务二二在网网页中中应用用JavaScript一般来来说，，JavaScript对象象具有有以下下对象象：Windows、Document、、History、、Navigator、、Location、Date、、Math、Array、Boolean、Number、、String等。。Windows对象象包括括许多多属性性、方方法和和事件件，可可以利利用这这些对对象控控制浏浏览器器窗口口显示示的各各个方方面。。Document可可用于于输出出，主主要有有write()和和writeln()，，主要要用来来实现现在Web页面面上显显示输输出信信息。。History对象象是指指浏览览器的的浏览览地址址，History对象象中常常用的的方法法包括括back()、forward()和go()。。back()和forward()主要要实现现页面面的后后退和和前进进，go()用用来进进入指指定的的界面面。Navigator对象象可用用来存存取浏浏览器器的相相关信信息，，浏览览器对对象Navigator中包包括的的常用用属性性有浏浏览器器的名名称、、版本本、代代码名名称、、Cookie功能能是否否打开开等。。下一页页返回上一页页任务二二在网网页中中应用用JavaScriptLocation对对象是是当前前网页页的URL地址址，可可以使使用Location对对象来来打开开网页页，Location对对象中中常用用的方方法包包括reload()，，replace。。Reload()相当当于IE浏浏览器器上的的“刷刷新””功能能。Replace()打开开一个个URL，，并取取代历历史对对象中中当前前位置置的地地址。。JavaScript没没有时时间类类型，，但可可以用用Date对象象及其其方法法来取取得日日期和和时间间。Date对对象有有许多多方法法来设设置、、提取取和操操作时时间，，它没没有任任何属属性。。预定义义的Math对对象具具有数数学常常量和和函数数的属属性和和方法法。同同样地地，标标准的的数学学函数数也是是Math对象象的方方法。。与别别的对对象不不同，，不能能自己己创建建一个个Math对象象，所所有的的Math对象象都是是预定定义的的。JavaScript可可以使用预定定义的Array对象及及其方法提供供对创建任何何数据类型的的支持。数组组是一套数值值的序列，它它由一个名字字和索引所组组成。创建数数组有两种方方法来定义一一个数组。下一页返回上一页任务二在网页页中应用JavaScriptBoolean对象是数数据类型的包包装器。每当当Boolean数据类类型转换为Boolean对象时，，JavaScript都隐含地使使用Boolean对象象。Number对象代表数数值数据类型型和提供数值值常数的对象象。Number对象最最主要的用途途是将其属性性集中到一个个对象中，以以及使数字能能够通过toString方法转换换为字符串。。String对象可用于于处理或格式式化文本字符符串，以及确确定和定位字字符串中的子子字符串。不不要将它同字字符串常量相相混淆。用户户可以在一个个字符串常量量中调用任何何String对象方法法，JavaScript自动将字字符串常量转转换为一个临临时的String对象象并调用其方方法，然后丢丢弃该临时的的String对象。用用户也可以在在一个字符串串常量中使用用String.length等属属性。预定义的function对对象指定一一个JavaScript字字符串码，，它可以像像函数一样样进行编译译。返回上一页任务三使用用样式表（（CSS））来美化网网页【任务要点点】1.使用内内部样式表表美化网页页2.使用外外部样式表表美化网页页【案例1】】使用内部样样式表对网网页的字体体、字号、、字色、字字样进行美美化设置【具体步骤骤】（1）如前前所述，在在D:\website中使使用DreamWeaver建立一个个页面，并并命名为cssTest1.htm。。（2））打打开开cssTest1.htm页页面面，，并并将将方方框框内内的的CSS代代码码（（<style></style>标标记记内内的的代代码码））加加入入到到代代码码编编辑辑区区，，如如图2-28所示示。。下一一页页返回回任务务三三使使用用样样式式表表（（CSS））来来美美化化网网页页（3））继继续续将将方方框框内内的的代代码码放放入入<body></body>标标记记内内，，如如图2-29所示示。。（4））在在DreamWeaver中中按按F12键键，，即即可可得得到到图2-30所示的结果。。【案例2】使用外部样式式表对网页的的字体、字号号、字色、字字样进行美化化设置【具体步骤】】（1）如前所所述，在D:\website中使使用DreamWeaver建立一一个页面，并并命名为cssTest2.htm。下一页返回上一页任务三使用样样式表（CSS）来美化化网页（2）在DreamWeaver中中，选择【文文件】→【新新建】命令，，在弹出的对对话框中的【【常规】选项项卡中，选择择【基本页】】→【CSS】选项，单单击【创建】】按钮，得到到如图2-31所示。（3）选择【【文件】→【【保存】命令令，在弹出的的【另存为】】对话框的【【文件名】下下拉列表框中中输入cssTest2.css，，然后单击【【保存】按钮钮。（4））在cssTest2.css文文件中中，并并将CSS代码码加入入到编编辑区区中去去，如如图2-32所示。。（5））切换换到cssTest2.htm页页面，，将方方框内内的代代码，，加入入到网网页中中，如如图2-33所示。。（6））仍然然在cssTest.htm页面面，在在DreamWeaver的的右侧侧窗口口中（（如图2-34所示）），单单击链链接按按钮，，弹出出【链链接外外部样样式表表】对对话框框，如如图2-35所示。。下一页页返回上一页页任务三三使用用样式式表（（CSS））来美美化网网页（7））单击击【浏浏览】】按钮钮，在在D:\website目录录中选选择cssTest.css即可可，出出现图2-36所示椭椭圆内内的代代码。。【背景景知识识】1996年年底的的时候候悄悄悄诞生生了一一种叫叫做样样式表表（stylesheets）的的技术术。它它向世世人保保证：：将对对布局局、字字体、、颜色色、背背景和和其他他文图图效果果实现现更加加精确确的控控制。。只通通过修修改一一个文文件就就改变变页数数不计计的

人人文库> 全部分类> 专业文献 > 生活休闲

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论