第7课 网页制作（教案）-七年级信息技术上册同步精品课堂（新世纪版2018）

第三单元第7课 网页制作 一、教材与学情分析 学生有丰富的上网体验，但未曾想过用简单的Word也能制作网页。 二、教学目标 1.了解网页的HTML代码，知道如何用记事本编写简单的HTML。 2.熟悉使用Word制作网页的过程和方法。 3.了解并学会制作QQ客服网页。 三、重难点 本课的重点是让学生了解HTML，难点是制作一个简单的QQ客服网页并利用它进行小组交流。 四、教学过程 （一）问题导入 学生登陆网址https://www.shanghaidisneyresort.com/activities/，思考以下问题： ①该网页包含了哪些元素？它们是如何整齐有序地分布在网页中的？你能从中得到哪些信息，是否能很好表达主题思想？ ②点击网页中的图片或文字，会发生什么变化？ 学生回答：这是上海迪士尼的官网，里面有一些游乐信息包括游乐设施、娱乐表演、迪士尼朋友、商店。 学生回答：点击图片或者“游乐设施”文字会跳转到更详细的内容。 老师提问：页面上有哪些地方是可以被点击的。 学生回答：鼠标变成手的形状则能点击。 老师回答：这些地方设置了超链接，点击后会自动弹到相应位置。 （2） 讲授新知 老师：在这个网页上，有看得见的导航栏、图片、文字，还有看不见的超链接。 1、 查看网页源代码的方法 选择任意网页，鼠标右键“查看网页的源代码”。 2、 网页的构成元素 （1） 文字：一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。 （2） 图像：丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。 （3）超级链接：Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。 （4）导航栏：网站的“地图”，没有它，浏览者就会“迷路”。导航栏一般由多个按钮或者多个文本超级链接组成。 3、HTML简介 HTML 是创建网页的基础语言，也是创建网页的标准语言。HTML代码是用来规定文字、图片等信息在网页中的显示方式。 （1） 基本结构： HTML的基本结构： ①<html></html>根标签，页面中最大的标签，只能有一个； ②<head></head>头部标签，里面的内容主要给浏览器看，<head>标签中必须包含<title>标签，让网页有一个自己的网页标题； ③<body></body>身体标签，里面的内容主要给用户看，页面内容基本都放在<body>里，我们写的html代码也基本都是在<body>里面。 （2） 图片标签：<img src=“…” /> src属性的值就是要使用图片的路径（存放目录），建议图片和网页放在同一个文件夹内，路径直接写图片的名字。 （3） 超链接标签：<a href=“路径”></a> 活动：请查找该页面中的图片标签和超链接标签（在网页中输入Ctrl+F快速搜索） （3） 课堂实践 老师：其实很多文字处理软件都可以设计网页，如 Word 中利用“另存为 web 页”就可以将文档保存为网页，Windows“记事本”也可以制作网页等。利用这些方法编辑网页，可以规避不会写代码的问题。 活动：创建简单的网页 步骤一：在桌面新建一个名为“建立网站”的文件夹，用于保存老师发的宣传图和其余网页源素材。 步骤二：在文件夹内新建Word文档，将视图调整为“Web版式”。输入标题“欢迎来到迪士尼”，并输入以下介绍文字，注意空格及行距。 欢迎来到一个前所未见的神奇世界，在此点亮您的心中奇梦。这就是上海迪士尼乐园，无论老幼，都可以在此感受充满创造力、冒险和刺激的乐趣！把目光投向奇幻童话城堡，世界上最大的迪士尼城堡，准备好开始探索这七大各具魅力而令人难忘的神奇园区：米奇大街、奇想花园、梦幻世界、探险岛、宝藏湾、明日世界和迪士尼·皮克斯玩具总动员主题园区。 步骤三：插入图片 步骤四：网页另存为“.html”格式 原创精品资源学科网独家享有版权，侵权必究！1 学科网（北京）股份有限公司 $