大学计算机基础教案计算机网页制作教案

  • 格式:pdf
  • 大小:457.07 KB
  • 文档页数:4

第11讲 网页制作 课时内容 网页制作 授课时间 课时 2

教学目标  熟悉网页制作的基本元素;

 掌握Dreamweaver 20软件的基本操作方法;

 掌握在网页中插入文字、图片、声音、flash等的方法;

 掌握在网页中使用表格和表单的方法;

 掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。

教学重点  掌握在网页中插入文字、图片、声音、flash等的方法;

 掌握在网页中使用表格和表单的方法;

教学难点  掌握在网页中使用表格和表单的方法;

教学设计 1、教学思路:(1)对于本节的重点知识,主要采用操作演示、案例说明和任务驱动法

来展开教学。采用理实一体化教学模式,要求学生将理论知识运用到实际操作中,

用理论指导实践,并逐步总结经验,掌握专业技能。在实践的过程中锻炼学生思

考问题、分析问题、解决问题的能力,达到掌握网页制作和设计的技能的目的。

2、教学手段:(1)对于课程的难点知识,主要用实际操作和案例法分析,将操作的注

意事项给学生做演示和分解说明,这样化解难点,让学生通过操作、思考和总结,

尽快掌握相应知识。

3、教学资料及要求:除了本章学到的网页制作的相关知识外,还要让学生了解网页制

作的其他知识与设计技巧,能够设计企业网站、政府门户网站、学校网站等常见

网站的基本静态页面;能够运用理论知识发现问题、分析问题并解决问题的能力,

同时能够不断学习,不断创新,让自己的设计越来越完善,有止于至善的精神。

教学内容

知识回顾:回顾前面讲解的程序设计基础的相关知识。本章重点对网页制作进行讲解。

讨论问题:1、平时上网看到的网页都是哪些风格的?

2、网页上都包含哪些元素?

3、要设计一个网站,都要掌握哪些知识呢?

内容大纲:具体可结合本章的PPT课件进行配合讲解。

任务一 网站与网页

任务要求:掌握网站与网页的基本概念;掌握网页中的基本包含元素;网站制作的基本流程

等。

任务实现:

(一)网页的相关知识

网页是构成网站的基本单位;网页是用HTML语言编写的,通过万维网(WWW)传输,并被Web浏

览器翻译成可以显示出来的集文本、图片、声音和数字电影等信息形式的页面文件。网页根据页面

内容可以分为主页、专栏网页、内容网页以及功能网页等类型,其中最重要的就是网站的主页。主

页通常设有网站的导航栏,是所有站点网页的链接中心。网站就是由网页通过超链接形式组成的。 (二)网页的主要元素

网页上最常见的功能组件元素有站标(Logo)、导航栏、广告条等。色彩、文本、图片和动画

是网页最基本的信息形式和表现手段。

(三)网站制作的基本流程

通常,一个网站的开发过程分为3个阶段,分别是规划与准备阶段、网页制作阶段和网站的测

试发布与维护阶段。

任务二 简单网站的创建

任务要求:掌握如何创建站点;掌握如何添加本地文件夹;掌握如何创建页面;掌握如何创建

网页

任务实现:

(一)创建本地站点

在Dreamweaver 20中建立一个站点的一般操作步骤如下。

(1)在任意一个根目录下创建一个文件夹(假设为E盘),并取名为MyWeb。注意,网站中所用

的文件都要用英文名。

(2)打开Dreamweaver,选择“站点”→“新建站点”命令,打开图11.3所示的对话框。在

“站点名称”中输入网站的名称(可用中文,如个人主页),在“本地站点文件夹”中选择刚才创

建的文件夹(E:\MyWeb),然后单击“保存”按钮即可,如图11.3所示。

图11.3 新建站点

(二)添加站点文件夹

网站建完之后要在站点下建立文件夹,用于存储一些必要的内容。若要在站点中新建文件夹,

可在“文件”浮动面板的“站点”根目录上单击鼠标右键,然后在弹出的快捷菜单中选择“新建文

件夹”命令,如图11.4所示。

图11.4 添加站点文件夹

(三)创建页面

在“文件”浮动面板中的“站点”根目录上单击鼠标右键,然后在弹出的快捷菜单中选择“新

建文件”命令,这样就建好了一个页面,默认的文件名为untitled.html。这里给它改名为

index.html。网站第一页的名字通常是index.htm或index.html,其他页面的名字可以自己取,如

图11.5所示。

图11.5 创建页面

(四)创建网页基本元素

任务三 网页中表格的应用

任务要求:掌握如何在网页中添加表格,及修改表格属性等。

任务实现:

(一)创建表格

创建表格的步骤如下。

(1)打开文档窗口的设计视图,将插入点放在需要插入表格的位置。

(2)单击“插入”面板中的“Table”按钮。

(3)在弹出的对话框中设置参数,如行数、列数、表格宽度等。

(二)表格的基本操作和属性

(1)表格的基本操作

(2)查看和设置表格属性 (3)设置单元格、行和列属性

(4)添加、删除行和列

(5)合并、拆分表格中的两个或多个单元格

(6)剪切、复制和粘贴单元格

任务四 表单的使用

任务要求:掌握如何在网页中添加表单,并添加表单元素

任务实现:

(一)向文档中添加一个表单

(二)向表单中添加表单元素

任务五 课程思政

浏览网站:学习各地的脱贫攻坚精神和网页制作技术。

新建一个网站,选择当地脱贫攻坚的人物和事迹,搜集资料图片,制作宣传册,对所学网站制

作技术知识进行综合运用,使学员对党和人民为扶贫脱贫做出的努力奋斗精神更加深刻。

课后练习

制作一个介绍精品课堂的小型网站。

小结 1. 熟悉网页制作的基本元素;

2. 掌握Dreamweaver 20软件的基本操作方法;

3. 掌握在网页中插入文字、图片、声音、flash等的方法;

4. 掌握在网页中使用表格和表单的方法;

思考及作

业 想一想:

1.制作网站的流程有哪些?

2.Dreamweaver 20的工作界面由哪些部分组成?浮动面板有哪些是常用的?如何

拆分和组合这些面板?

3.怎样快速选择表格的行和列?如何拆分合并单元格?

4.表单的用途有哪些?

5.如何添加表单元素和设置它们的属性?