HTML网页编程基础课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
上一页 下一页 返回
任务一使用HTML语言来制作网页
所谓超文本，是因为它可以加入图片、声音、动画、影视等 内容，事实上每一个HTML文档都是一种静态的网页文件，这个 文件里面包含了HTML指令代码，这些指令代码并不是程序语言， 它只是一种排版网页中资料显示位置的标记结构语言，易学易懂， 非常简单。HTML的普遍应用就是带来了超文本的技术，即通过 单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一 个页面，与世界各地主机的文件链接，直接获取相关的主题。
上一页 下一页 返回
ห้องสมุดไป่ตู้
任务一使用HTML语言来制作网页
（3）打开IE浏览器，在【地址】栏中输入 http://localhost/webtest/index.htm即可，出现如图2-13所示的页面。
（4）打开DreamWeaver，选择【站点】→【新建站点】命令，在弹 出的对话框中打开【高级】选项卡，按照步骤（5）、（6）、（7） 分别完成【本地信息】、【远程信息】、【测试服务器】的配置 就可以了，如图2-14所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（7）在【测试服务器】中，将【服务器模型】设置为“ASP JavaScript”，将【访问】设置为“本地/网络”，在【URL前缀】 中的http://localhost/后加上“webtest”，结果如图2-17所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】 →【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。
（4）在打开的记事本中，输入以下代码： <html><head> <title>网页标题</title></head> <body> 这是我的第一个主页 </body> </html>
项目二HTML网页编程基础
任务二在网页中应用JavaScript 任务三使用样式表（CSS）来美化网页
任务一使用HTML语言来制作网页
【任务要点】
1.使用记事本来制作HTML网页 2.使用DreamWeaver来制作HTML网页
【案例1】使用记事本来制作HTML网页 【具体步骤】（在Windows XP中完成）
【具体步骤】 （1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹
出【计算机管理】对话框，选择【Internet信息服务】→【网站】 →【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】 →【虚拟目录】→【下一步】命令，如图2-8～图2-10所示。 （2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】 按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮， 选择D:\website→【下一步】→【下一步】→【完成】命令，如图 2-11和图2-12所示。
HTML只是一个纯文本文件。创建一个HTML文档只需要两 个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编 辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用 来打开Web网页文件，提供给用户查看Web资源的客户端程序。
上一页 下一页 返回
（1）双击【我的电脑】图标，选择【工具】→【文件夹选项】命令， 从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文 件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文 件的扩展名显示出来。
下一页 返回
任务一使用HTML语言来制作网页
（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】→【文本 文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如 图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3 所示的样式。
上一页 下一页 返回
任务一使用HTML语言来制作网页
要浏览这个index.htm文件，只需在桌面上双击它，或者打开 浏览器，选择【File】→【Open】命令，然后选择这个文件就行 了。效果如图2-5所示。
【案例2】使用DreamWeaver来制作HTML网页
【具体步骤】（在DreamWeaver 8中完成） （1）在D盘根目录下建立文件夹并命名为website（网站）。 （2）打开DreamWeaver，选择【文件】→【新建】→【基本页】→
（5）在【本地信息】中，在【站点名称】文本框中给站点起名为 myWebsite，将【本地文件夹】设置为D:\website，如图2-15所示。
（6）在【远程信息】中，将【访问】下拉列表框中的值设置为“本地 /网络”，将【远程文件夹】设置为“D:\website”，并对应图将复 选框进行勾选，如图2-16所示。
（4）在上半部分的代码区的<title></title>内，输入“我的第一个首 页”，在<body></body>内，输入“此处显示网页的主体内容”。
（5）按F12键运行网页，得到图2-7所示的网页。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【案例3】在DreamWeaver中进行站点发布
【背景知识】
一、HTML概述 HTML是Hypertext Marked Language的简写，即超文本标
记语言，是一种用来制作超文本文档的简单标记语言。超文本传 输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的 操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则 和标准，用HTML编写的超文本文档称为HTML文档，它能独立 于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ （World Wide Web，也可称为Web，中文叫做万维网）的信息表 示语言，使用HTML语言描述的文件，需要通过Web浏览器显示 出效果。
【HTML】→【创建】命令，将出现Unitiled-1（未命名1）的页 面，如图2-6所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）选择【文件】→【保存】命令，在弹出的【另存为】对话框的 【保存在】下拉列表框中，选择第一步建立的文件夹website，在 【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。
任务一使用HTML语言来制作网页
所谓超文本，是因为它可以加入图片、声音、动画、影视等 内容，事实上每一个HTML文档都是一种静态的网页文件，这个 文件里面包含了HTML指令代码，这些指令代码并不是程序语言， 它只是一种排版网页中资料显示位置的标记结构语言，易学易懂， 非常简单。HTML的普遍应用就是带来了超文本的技术，即通过 单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一 个页面，与世界各地主机的文件链接，直接获取相关的主题。
上一页 下一页 返回
ห้องสมุดไป่ตู้
任务一使用HTML语言来制作网页
（3）打开IE浏览器，在【地址】栏中输入 http://localhost/webtest/index.htm即可，出现如图2-13所示的页面。
（4）打开DreamWeaver，选择【站点】→【新建站点】命令，在弹 出的对话框中打开【高级】选项卡，按照步骤（5）、（6）、（7） 分别完成【本地信息】、【远程信息】、【测试服务器】的配置 就可以了，如图2-14所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（7）在【测试服务器】中，将【服务器模型】设置为“ASP JavaScript”，将【访问】设置为“本地/网络”，在【URL前缀】 中的http://localhost/后加上“webtest”，结果如图2-17所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】 →【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。
（4）在打开的记事本中，输入以下代码： <html><head> <title>网页标题</title></head> <body> 这是我的第一个主页 </body> </html>
项目二HTML网页编程基础
任务二在网页中应用JavaScript 任务三使用样式表（CSS）来美化网页
任务一使用HTML语言来制作网页
【任务要点】
1.使用记事本来制作HTML网页 2.使用DreamWeaver来制作HTML网页
【案例1】使用记事本来制作HTML网页 【具体步骤】（在Windows XP中完成）
【具体步骤】 （1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹
出【计算机管理】对话框，选择【Internet信息服务】→【网站】 →【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】 →【虚拟目录】→【下一步】命令，如图2-8～图2-10所示。 （2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】 按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮， 选择D:\website→【下一步】→【下一步】→【完成】命令，如图 2-11和图2-12所示。
HTML只是一个纯文本文件。创建一个HTML文档只需要两 个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编 辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用 来打开Web网页文件，提供给用户查看Web资源的客户端程序。
上一页 下一页 返回
（1）双击【我的电脑】图标，选择【工具】→【文件夹选项】命令， 从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文 件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文 件的扩展名显示出来。
下一页 返回
任务一使用HTML语言来制作网页
（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】→【文本 文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如 图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3 所示的样式。
上一页 下一页 返回
任务一使用HTML语言来制作网页
要浏览这个index.htm文件，只需在桌面上双击它，或者打开 浏览器，选择【File】→【Open】命令，然后选择这个文件就行 了。效果如图2-5所示。
【案例2】使用DreamWeaver来制作HTML网页
【具体步骤】（在DreamWeaver 8中完成） （1）在D盘根目录下建立文件夹并命名为website（网站）。 （2）打开DreamWeaver，选择【文件】→【新建】→【基本页】→
（5）在【本地信息】中，在【站点名称】文本框中给站点起名为 myWebsite，将【本地文件夹】设置为D:\website，如图2-15所示。
（6）在【远程信息】中，将【访问】下拉列表框中的值设置为“本地 /网络”，将【远程文件夹】设置为“D:\website”，并对应图将复 选框进行勾选，如图2-16所示。
（4）在上半部分的代码区的<title></title>内，输入“我的第一个首 页”，在<body></body>内，输入“此处显示网页的主体内容”。
（5）按F12键运行网页，得到图2-7所示的网页。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【案例3】在DreamWeaver中进行站点发布
【背景知识】
一、HTML概述 HTML是Hypertext Marked Language的简写，即超文本标
记语言，是一种用来制作超文本文档的简单标记语言。超文本传 输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的 操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则 和标准，用HTML编写的超文本文档称为HTML文档，它能独立 于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ （World Wide Web，也可称为Web，中文叫做万维网）的信息表 示语言，使用HTML语言描述的文件，需要通过Web浏览器显示 出效果。
【HTML】→【创建】命令，将出现Unitiled-1（未命名1）的页 面，如图2-6所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）选择【文件】→【保存】命令，在弹出的【另存为】对话框的 【保存在】下拉列表框中，选择第一步建立的文件夹website，在 【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。