《html网页编程基础讲义》由会员分享，可在线阅读，更多相关《html网页编程基础讲义（65页珍藏版）》请在金锄头文库上搜索。
1、项目二HTML网页编程基础,任务一使用HTML语言来制作网页 任务二在网页中应用JavaScript 任务三使用样式表（CSS）来美化网页,任务一使用HTML语言来制作网页,【任务要点】 1.使用记事本来制作HTML网页 2.使用DreamWeaver来制作HTML网页 【案例1】使用记事本来制作HTML网页 【具体步骤】（在Windows XP中完成） （1）双击【我的电脑】图标，选择【工具】【文件夹选项】命令，从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文件的扩展名显示出来。,下一页,返回,任务一使用HTML语言来制作网页,
2、（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】【文本文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3所示的样式。 （3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。 （4）在打开的记事本中，输入以下代码： 网页标题 这是我的第一个主页 ,下一页,返回,上一页,任务一使用HTML语言来制作网页,要浏览这个index.htm文件，只需在桌面上双击它，或者打开浏览器，选择【File】【Open】命令，然后选择这个文件就行了。效果
3、如图2-5所示。 【案例2】使用DreamWeaver来制作HTML网页 【具体步骤】（在DreamWeaver 8中完成） （1）在D盘根目录下建立文件夹并命名为website（网站）。 （2）打开DreamWeaver，选择【文件】【新建】【基本页】【HTML】【创建】命令，将出现Unitiled-1（未命名1）的页面，如图2-6所示。,下一页,返回,上一页,任务一使用HTML语言来制作网页,（3）选择【文件】【保存】命令，在弹出的【另存为】对话框的【保存在】下拉列表框中，选择第一步建立的文件夹website，在【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。 （4）在
4、上半部分的代码区的内，输入“我的第一个首页”，在内，输入“此处显示网页的主体内容”。 （5）按F12键运行网页，得到图2-7所示的网页。,下一页,返回,上一页,任务一使用HTML语言来制作网页,【案例3】在DreamWeaver中进行站点发布 【具体步骤】 （1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹出【计算机管理】对话框，选择【Internet信息服务】【网站】【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】【虚拟目录】【下一步】命令，如图2-8图2-10所示。 （2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】按钮，单击打开的对话框中【目录】文本框后的【
5、浏览】按钮，选择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，将【本地
6、文件夹】设置为D:website，如图2-15所示。 （6）在【远程信息】中，将【访问】下拉列表框中的值设置为“本地/网络”，将【远程文件夹】设置为“D:website”，并对应图将复选框进行勾选，如图2-16所示。,下一页,返回,上一页,任务一使用HTML语言来制作网页,（7）在【测试服务器】中，将【服务器模型】设置为“ASP JavaScript”，将【访问】设置为“本地/网络”，在【URL前缀】中的http:/localhost/后加上“webtest”，结果如图2-17所示。,下一页,返回,上一页,任务一使用HTML语言来制作网页,【背景知识】 一、HTML概述 HTML是Hypert
7、ext Marked Language的简写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准，用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作（World Wide Web，也可称为Web，中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过Web浏览器显示出效果。,下一页,返回,上一页,任务一使用HTML语言来制作网页,所谓超文本，是因为它可以加入图片、声音、动画、影视等内容
8、，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术，即通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接，直接获取相关的主题。 HTML只是一个纯文本文件。创建一个HTML文档只需要两个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用来打开Web网页文件，提供给用户查看Web资源的客户端程序。,下一页,返回,上一
9、页,任务一使用HTML语言来制作网页,二、HTML的基本结构 一个HTML文档是由一系列的元素和标签组成的，元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。,下一页,返回,上一页,任务一使用HTML语言来制作网页,下面是一个最基本的HTML文档的代码： -|开始标签 -|头部标签开始 一个简单的HTML示例 -|Title标签对用来在标题栏内显示网页主题 -|头部标签结果 -|主体开始 这是网页的文档的显示部分（大部分代码是在这个标签对里面的） -|主体
10、结束 -|结尾标签,下一页,返回,上一页,任务一使用HTML语言来制作网页,三、HTML的标签与属性 对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用“”括起来的句子，称之为标签，它是用来控制文本的布局、文字的格式以及五彩缤纷的页面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项，HTML的标签分单标签和成对标签两种。成对标签是由首标签（）和尾标签（）组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式的（），单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性,属性要写在首标签内，属性用于进一步改变显示的效果,各属性之间无先后次序
11、，属性是可选的，属性也可以省略而采用默认值；其格式如下： 内容,下一页,返回,上一页,任务一使用HTML语言来制作网页,作为一般的原则，大多数属性值不用加双引号。但是包括空格、等特殊字符的属性值必须加双引号。为了培养良好的习惯，提倡对属性值全部加双引号。如： 字体设置 四、常用标记（tag）及属性的英文识记 常用标记及属性的英文识记见表2-1。,返回,上一页,任务二在网页中应用JavaScript,【任务要点】 1.学会事件驱动（处理）的编程思想 2.掌握对象及对象的事件、方法、属性 3.掌握基于对象化的编程 【案例1】应用JavaScript事件、属性、方法来制作网页 【具体步骤】 （1）在
12、DreamWeaver中新建一个网页，命名为index.htm，并保存在D:website中。 （2）打开index.htm，并在其代码框的标签对中输入以下代码，如图2-21所示。,下一页,返回,任务二在网页中应用JavaScript,【案例2】应用JavaScript内置对象来制作网页 【具体步骤】 （1）如前所述，在D:website中使用DreamWeaver建立一个页面，并命名为default.htm。 （2）在DreamWeaver中，选择【文件】【新建】命令，在弹出的对话框中的【常规】选项卡中，选择【基本页】选项，单击【创建】按钮，并命名为default.html。 （3）在标签对
13、中输入以下代码，如图2-22所示。,下一页,返回,上一页,任务二在网页中应用JavaScript,（4）继续在DreamWeaver中进行操作，选择【文件】【新建】命令，在弹出的对话框中的【常规】选项卡中，选择【基本页】选项，单击【创建】按钮，并命名为default1.html。 （5）在内输入文字“这是弹出的一个通知窗口”，如图2-23所示。 （6）在DreamWeaver中，选择【文件】【新建】命令，在弹出的对话框中的【常规】选项卡中，选择【基本页】选项，单击【创建】按钮，并命名为default2.html。 （7）在内输入代码，如图2-24所示。 （8）按照前面所学的知识，在DreamW
14、eaver中设置站点，并在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文件之中。这
15、是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是使HTML与JavaScript语言一样实现与Web客户进行交互，从而可以开发客户端的应用程序等。JavaScript的出现使得信息和用户之间不仅只是一种显示和浏览的关系，而且实现了一种实时的、动态的、可交互式的表达能力。,下一页,返回,上一页,任务二在网页中应用JavaScript,一、事件 事件定义了用户与Web页面交互时产生的各种操作。简单地说，点击一个超链接或按钮，就会产生一个事件，告诉浏览器发生了需要进行处理的单击操作。事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可能产生事件。比如说，浏览器载入一个网页时，就会产生一个Load事件。 在JavaScript中对象事件的处理通常由函数Function来担任，其基本格式与函数完全一样，格式如下： Function事件处理名（参数表） 事件处理语句集 ,下一页,返回,上一页,任务二在网页中应用JavaScript,下面介绍常用事件及处理。 1.浏览器事件 （1）Load事件 当文档载入时，产生该事件。onLoad的一个作用就是在
