第七课 网页制作教学设计 2024—2025学年新世纪版（2018）初中信息技术七年级上册

授课日期 第 周星期 第 节 授课班级 章节或课题 第七课 网页制作 目标与要求 1、了解网页的HTML代码，知道如何用记事本编写简单的HTML。 2、熟悉使用Word制作网页的过程和方法。 3、了解并学会制作QQ客服网页。 重点与难点 本课的重点是让学生了解HTML,难点是制作一个简单的QQ客服网页并利 用它进行小组交流。 授课课时 1节时 授课类型 新授课 一、什么是HTML 二、编写HTML代码 三、用word制作网页 四、制作QQ客服网页 教学后记： 教案用纸 20 —20 学年度第 一 学期 年级： 科目：信息技术 教 学 过 程 互联网上的网站、论坛、微博等都由有众多的网页组成的，网页可以通过超链接相互，天连接，形成一个巨大的“网”。点击鼠标，就可以漫游网上世界。 1、 什么是HTML 1、概念 任何打开一个网页，右击鼠标，在弹出的菜单中选择[查看源文件]，就可以看到用笔记本打开的密密麻麻的符号，符号就是网页的html 代码。html 代码即“超文本标记语言”。 HTML (HyperText Markup Language)是一种简单、通用的超文本标记语言，用它可以制作包含文字、图形图像、声音等精彩内容的网页。HTML是带有标签的纯ASCII文件，其源代码可以用ASCII文本编辑器，如Windows附件中的“记事本”、“写字板”等进行编辑。如果掌握了HTML语言，那么，利用简单的文本编辑器就可以制作出内容丰富多彩的网页 在HTML文档中，字符和数据的语法结构是通过标记来表示的。标记是HTML语言的标签符号以及用标签符号构成的各种元素的统称。标签是描述性的标记，用一对< >中间包含若干字符表示。一般HTML标签是成对出现的，前一个是起始标签，后一个是结束标签。 例如： <HTML> HTML文档开始标签。   </HTML> HTML文档结束标签。 Web浏览器根据< HTML >文档的开始标签和</HTML>文档结束标签，就可以识别出在这两个标签之间使用的是超文本标记语言(网页文件)。 2、HTML文档的基本结构 基本的HTML文件一般由HTML(开始信息)、HEAD(头部信息)和BODY(主体信息)三部分组成，其结构形式如下： <HTML> 表示网页文件的开始。 <HEAD> 表示头部信息。头部信息主要包含 <TITLE></TITLE>、<STYLE> </STYLE>、<SCRIPT></SCRIPT>等用来说明当前HTML文档附加信息的说明标签。 </HEAD> 表示头部信息结束。 教 案 用 纸 教 案 用 纸 教 学 过 程 HTML基本格式： 1. <html>   2.    3.        <head>   4.    5.               <title>标题</title>   6.    7.        </head>   8.    9.        <body>   10.    11.    12.    13.        <!—添加内容 -->   14.    15.    16.    17.        </body>   18.    19. </html>   2、 编写HTML代码 用笔记本就能编写一个简单的网页代码，图3-7.3所示。（课本p95页） 将上面，编辑的文本文件保存为“exp-1.html”。在怎样管理器中双击“exp-1.html”，浏览器就会自动打开这个文件，显示的画面如图3-7.4所示。（课本p96页） 教 案 用 纸 教 学 过 程 三、用word制作网页 1、 在网页中插入图片 第一步：单击菜单“插入”→“图片”→“来自文件”； 第二步：在“插入图片”对话框中选择图片，单击“确定”按钮； 第三步：单击“格式”菜单中的“图片”，弹出“设置图片格式”对话框； 第四步：在弹出的“设置图片格式”对话框中，将插入的图片设置为“衬于文字下方”版式（以便在图片上输入文字）。 第五步：调整图片的位置与大小； 2、 为网页输入文字 第一步：在图上输入标题文字，并设置文字的位置、大小和字体； 第二步：在图片下方输入各个标题下的具体内容。 3、 在网页中建立超链接 第一步：选择需要设置超链接的位置，如标题文字“个人简介”，然后单击“插入”菜单中的“超级链接”； 第二步：在“插入超链接”对话框中选择“本文档中的位置”，然后在选框中选择书签如“基本资料”，设定完毕后单击确定。 此时，在标题的下面出现下划线，表示这里有一个超链接，当鼠标移到文字上面就会变成“手型指针”； 第三步：用同样的方法设置其它超链接。 4、 将文档保存为网页 使用Word软件编辑好文章后，可以将其保存为网页形式。 第一步：单击“文件”菜单中的“保存”，弹出“另存为”对话框； 第二步：学则好保存的位置，输入文件名“自我介绍”，并在“保存类型”中选择“web页”； 第三步：单击“保存”按钮，将Word软件编辑的文档保存为网页形式。 这时，我们就可以用浏览器打开并浏览自己制作的网页了。 教 案 用 纸 教 学 过 程 四 、制作QQ客服网页 客户服务网页的制作方法是：先将网页制作好，然后在网页中插入一段“客服代码”。 QQ客服代码需要到QQ推广网站申请。制作步骤如下： 步骤一：进驻QQ推广网站：h t t p：//shang.qq.com 步骤二：选择“推广工具”栏目，在弹出的登录对话框中输入你的QQ账号。 步骤三：在“QQ通讯组件”在[1请选择组件样式]中选择“组件样式”，例如选择“拓展型”（在线咨询/QQ交谈）；在“设置”中设置“自动回复语”等。然后再回到“QQ通讯组件”。 步骤四：等待一段时间后，[2在复制这段代码并将其粘贴到你的网页上]下面的文本中将出现一段代码,单击“复制代码”按钮。 步骤五：找到需要加入QQ客服的网页适当位置，粘贴代码，然后保存网页。 访客打开网页，就可以和网页的版主进行QQ交流了. 1 学科网（北京）股份有限公司 $$