《第7课 网页制作》精品教案.docx

学而优教有方

PAGEPage2/NUMPAGESPages2

第7课网页制作

一、教材与学情分析

学生有丰富的上网体验，但未曾想过用简单的Word也能制作网页。

二、教学目标

1.了解网页的HTML代码，知道如何用记事本编写简单的HTML。

2.熟悉使用Word制作网页的过程和方法。

3.了解并学会制作QQ客服网页。

三、重难点

本课的重点是让学生了解HTML，难点是制作一个简单的QQ客服网页并利用它进行小组交流。

四、教学过程

（一）问题导入

学生登陆网址/activities/，思考以下问题：

①该网页包含了哪些元素？它们是如何整齐有序地分布在网页中的？你能从中得到哪些信息，是否能很好表达主题思想？

②点击网页中的图片或文字，会发生什么变化？

学生回答：这是上海迪士尼的官网，里面有一些游乐信息包括游乐设施、娱乐表演、迪士尼朋友、商店。

学生回答：点击图片或者“游乐设施”文字会跳转到更详细的内容。

老师提问：页面上有哪些地方是可以被点击的。

学生回答：鼠标变成手的形状则能点击。

老师回答：这些地方设置了超链接，点击后会自动弹到相应位置。

讲授新知

老师：在这个网页上，有看得见的导航栏、图片、文字，还有看不见的超链接。

查看网页源代码的方法

选择任意网页，鼠标右键“查看网页的源代码”。

网页的构成元素

文字：一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。

图像：丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。

（3）超级链接：Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。

（4）导航栏：网站的“地图”，没有它，浏览者就会“迷路”。导航栏一般由多个按钮或者多个文本超级链接组成。

3、HTML简介

HTML是创建网页的基础语言，也是创建网页的标准语言。HTML代码是用来规定文字、图片等信息在网页中的显示方式。

基本结构：

HTML的基本结构：

①html/html根标签，页面中最大的标签，只能有一个；

②head/head头部标签，里面的内容主要给浏览器看，head标签中必须包含title标签，让网页有一个自己的网页标题；

③body/body身体标签，里面的内容主要给用户看，页面内容基本都放在body里，我们写的html代码也基本都是在body里面。

图片标签：imgsrc=“…”/

src属性的值就是要使用图片的路径（存放目录），建议图片和网页放在同一个文件夹内，路径直接写图片的名字。

超链接标签：ahref=“路径”/a

活动：请查找该页面中的图片标签和超链接标签（在网页中输入Ctrl+F快速搜索）

课堂实践

老师：其实很多文字处理软件都可以设计网页，如Word中利用“另存为web页”就可以将文档保存为网页，Windows“记事本”也可以制作网页等。利用这些方法编辑网页，可以规避不会写代码的问题。

活动：创建简单的网页

步骤一：在桌面新建一个名为“建立网站”的文件夹，用于保存老师发的宣传图和其余网页源素材。

步骤二：在文件夹内新建Word文档，将视图调整为“Web版式”。输入标题“欢迎来到迪士尼”，并输入以下介绍文字，注意空格及行距。

欢迎来到一个前所未见的神奇世界，在此点亮您的心中奇梦。这就是上海迪士尼乐园，无论老幼，都可以在此感受充满创造力、冒险和刺激的乐趣！把目光投向奇幻童话城堡，世界上最大的迪士尼城堡，准备好开始探索这七大各具魅力而令人难忘的神奇园区：米奇大街、奇想花园、梦幻世界、探险岛、宝藏湾、明日世界和迪士尼·皮克斯玩具总动员主题园区。

步骤三：插入图片

步骤四：网页另存为“.html”格式