【新编】HTML网页编程基础讲义

《【新编】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 命令 然后选择这个文件就行 了 效果如图2 5所示 案例2 使用Dre

3、amWeaver来制作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 在 别名 文本框中填入要给网站起的别名后 单击 下一步 按钮 单击打开的对话框中 目录 文本框后的 浏览 按钮 选择D website 下一步 下一步 完成 命令 如图 2 11和图2 12所示 下一页返

5、回上一页 任务一使用HTML语言来制作网页 3 打开IE浏览器 在 地址 栏中输入 http localhost webtest index htm即可 出现如图2 13所示的页面 4 打开DreamWeaver 选择 站点 新建站点 命令 在弹出 的对话框中打开 高级 选项卡 按照步骤 5 6 7 分别完成 本地信息 远程信息 测试服务器 的配置 就可以了 如图2 14所示 5 在 本地信息 中 在 站点名称 文本框中给站点起名为 myWebsite 将 本地文件夹 设置为D website 如图2 15所示 6 在 远程信息 中 将 访问 下拉列表框中的值设置为 本地 网络 将 远程文件夹

6、 设置为 D website 并对应图将复选 框进行勾选 如图2 16所示 下一页返回上一页 任务一使用HTML语言来制作网页 7 在 测试服务器 中 将 服务器模型 设置为 ASP JavaScript 将 访问 设置为 本地 网络 在 URL前缀 中 的http localhost 后加上 webtest 结果如图2 17所示 下一页返回上一页 任务一使用HTML语言来制作网页 背景知识 一 HTML概述 HTML是Hypertext Marked Language的简写 即超文本标 记语言 是一种用来制作超文本文档的简单标记语言 超文本传 输协议规定了浏览器在运行HTML文档时所遵循的规

7、则和进行的 操作 HTTP协议的制定使浏览器在运行超文本时有了统一的规则 和标准 用HTML编写的超文本文档称为HTML文档 它能独立 于各种操作系统平台 自1990年以来HTML就一直被用作 World Wide Web 也可称为Web 中文叫做万维网 的信息表 示语言 使用HTML语言描述的文件 需要通过Web浏览器显示 出效果 下一页返回上一页 任务一使用HTML语言来制作网页 所谓超文本 是因为它可以加入图片 声音 动画 影视等 内容 事实上每一个HTML文档都是一种静态的网页文件 这个 文件里面包含了HTML指令代码 这些指令代码并不是程序语言 它只是一种排版网页中资料显示位置的标记

8、结构语言 易学易 懂 非常简单 HTML的普遍应用就是带来了超文本的技术 即 通过单击鼠标从一个主题跳转到另一个主题 从一个页面跳转到 另一个页面 与世界各地主机的文件链接 直接获取相关的主题 HTML只是一个纯文本文件 创建一个HTML文档只需要两 个工具 一个是HTML编辑器 另一个是Web浏览器 HTML编 辑器是用于生成和保存HTML文档的应用程序 Web浏览器是用 来打开Web网页文件 提供给用户查看Web资源的客户端程序 下一页返回上一页 任务一使用HTML语言来制作网页 二 HTML的基本结构 一个HTML文档是由一系列的元素和标签组成的 元素名不 区分大小写 HTML用标签来规

9、定元素的属性和它在文件中的位 置 HTML超文本文档分文档头和文档体两部分 在文档头里 对这个文档进行了一些必要的定义 文档体中才是要显示的各种 文档信息 下一页返回上一页 任务一使用HTML语言来制作网页 下面是一个最基本的HTML文档的代码 开始标签 头部标签开始 一个简单的HTML示例 Title标签对用来在标题栏内显示网页主题 头部标签结果 主体开始 这是网页的文档的显示部分 大部分代码是在这个标签对里面的 主体结束 结尾标签 下一页返回上一页 任务一使用HTML语言来制作网页 三 HTML的标签与属性 对于刚刚接触超文本的朋友 遇到的最大的障碍就是一些用 括起来的句子 称之为标签 它

10、是用来控制文本的布局 文字的格式以及五彩缤纷的页面 标签通过指定某块信息为段 落或标题等来标识文档某个部件 属性是标志里的参数的选项 HTML的标签分单标签和成对标签两种 成对标签是由首标签 和尾标签 组成的 成对标签的作用域只 作用于这对标签中的文档 单独标签的格式的 单 独标签在相应的位置插入元素就可以了 大多数标签都有自己的 一些属性 属性要写在首标签内 属性用于进一步改变显示的效果 各属性之间无先后次序 属性是可选的 属性也可以省略而采用 默认值 其格式如下 内容 下一页返回上一页 任务一使用HTML语言来制作网页 作为一般的原则 大多数属性值不用加双引号 但是包括空 格 等特殊字符的

11、属性值必须加双引号 为了培养良好的 习惯 提倡对属性值全部加双引号 如 字体设置 四 常用标记 tag 及属性的英文识记 常用标记及属性的英文识记见表2 1 返回上一页 任务二在网页中应用JavaScript 任务要点 1 学会事件驱动 处理 的编程思想 2 掌握对象及对象的事件 方法 属性 3 掌握基于对象化的编程 案例1 应用JavaScript事件 属性 方法来制 作网页 具体步骤 1 在DreamWeaver中新建一个网页 命名为index htm 并保存在 D website中 2 打开index htm 并在其代码框的标签对中输入以 下代码 如图2 21所示 下一页返回 任务二在网

12、页中应用JavaScript 案例2 应用JavaScript内置对象来制作网页 具体步骤 1 如前所述 在D website中使用DreamWeaver建立一个页面 并 命名为default htm 2 在DreamWeaver中 选择 文件 新建 命令 在弹出的对 话框中的 常规 选项卡中 选择 基本页 选项 单击 创建 按钮 并命名为default html 3 在标签对中输入以下代码 如图2 22所示 下一页返回上一页 任务二在网页中应用JavaScript 4 继续在DreamWeaver中进行操作 选择 文件 新建 命令 在弹出的对话框中的 常规 选项卡中 选择 基本页 选项 单击

13、 创建 按钮 并命名为default1 html 5 在内输入文字 这是弹出的一个通知窗口 如图2 23所示 6 在DreamWeaver中 选择 文件 新建 命令 在弹出的对 话框中的 常规 选项卡中 选择 基本页 选项 单击 创建 按钮 并命名为default2 html 7 在内输入代码 如图2 24所示 8 按照前面所学的知识 在DreamWeaver中设置站点 并在IIS中 设置Web站点发布 9 运行结果如图2 25所示 下一页返回上一页 任务二在网页中应用JavaScript 10 单击 单击我 仔细查看标题样和窗口内容 按钮 可得到如 图2 26所示的页面 11 在如图2 25

14、所示的页面中点击 跳转到default2 html 超链接 得 到如图2 27所示的页面 12 在图2 27中 点击 返回到default html 超链接 就回到图2 26 所示的页面 下一页返回上一页 任务二在网页中应用JavaScript 背景知识 JavaScript是一种新的描述性语言 可以被嵌入到HTML文件 之中 这是一种基于对象和事件驱动并具有安全性能的脚本语言 使用它的目的是使HTML与JavaScript语言一样实现与Web客户 进行交互 从而可以开发客户端的应用程序等 JavaScript的出现 使得信息和用户之间不仅只是一种显示和浏览的关系 而且实现 了一种实时的 动态

15、的 可交互式的表达能力 下一页返回上一页 任务二在网页中应用JavaScript 一 事件 事件定义了用户与Web页面交互时产生的各种操作 简单地说 点击一个超链接或按钮 就会产生一个事件 告诉浏览器发生 了需要进行处理的单击操作 事件不仅可以在用户交互过程中产 生 而且浏览器自己的一些动作也可能产生事件 比如说 浏览 器载入一个网页时 就会产生一个Load事件 在JavaScript中对象事件的处理通常由函数Function来担任 其基本格式与函数完全一样 格式如下 Function事件处理名 参数表 事件处理语句集 下一页返回上一页 任务二在网页中应用JavaScript 下面介绍常用事件

16、及处理 1 浏览器事件 1 Load事件 当文档载入时 产生该事件 onLoad的一个作用就是在首次 载入一个文档时检测Cookie的值 并用一个变量为其赋值 使它 可以被源代码使用 2 unLoad事件 当Web页面退出 关闭或转向另一个页面 时会引发 onUnload事件 并可更新Cookie的状态 3 Submit事件 Submit事件在完成信息的输入 准备将信息提交给服务器处 理时发生 onSumbit句柄在Submit事件发生时由JavaScript自动调 用执行 onSubmit句柄通常在标记中声明 下一页返回上一页 任务二在网页中应用JavaScript 2 鼠标事件 鼠标事件是常见的事件 经常用到有onClick onMouseDown onMouseOver onMouseOut等 3 文本框事件 在文本框事件中有很多事件 下面主要介绍onChange onSelect onFocus onBlue四种事件 onChange事件 当利用Text或TextArea元素输入字符值改 变时会引发该事件 同时 当在Select表格项中的一个选项状态改 变后也会引发该事件 On