HTML教案（中青出版社）资源-CSDN文库

5星 · 超过95%的资源需积分: 9 65 浏览量 2009-02-02 23:36:07 上传评论收藏 700KB DOC 举报

资源推荐

资源详情

资源评论

授课题目（章，

节）

第 1 章网页制作技术基础与准备

第 2 章创建页面及代码基础

授课类型（请打

√）

理论课□√ 研讨课□ 习题课□ 复习课□ 其他□

教学目的：

1）了解 HTML 概念、CSS 基础、JavaScript 基础、Deamweaver 8

基础

2）掌握创建本地站点准备页面的制作

3）从建立的文件了解 HTML 文件的基本结构

4）掌握创建本地站点准备页面的制作

教学方法：

课堂讲解与多媒体课件演示相结合；讲授与上机操作相结合。

教学重点、难点：

教学重点

1） Deamweaver 8 基础

2）创建本地站点准备页面的制作

3）从建立的文件了解 HTML 文件的基本结构

4）掌握创建本地站点准备页面的制作

教学难点

1） Deamweaver 8 基础

2）创建本地站点准备页面的制作

3）从建立的文件了解 HTML 文件的基本结构

4）掌握创建本地站点准备页面的制作

前课复习导入：

我想每位同学都上过网，而且都非常喜欢上网，因为网上有海量的信息，漂亮的网页

和丰富的媒体表现形式，但是同学们想过这些精美的网页是怎么做出来的吗？同学们又有

没有想过建立自己的个人页面，发布一些自己的东西让大家去访问，去评论，去追捧。如

果以前只是想过而不知道怎么去实现的话，那么现在就让我们一起去学习，当然当我们学

完这门课程后，希望你的个人主页已经建立了起来，到时大家一起来比比，谁的个人主页

更漂亮。

在这个学期的课程中，我们将学到建立网页的基础语言 HTML，可以说不管是最简单

的纯静态的页面，还是高级的动态页面都离不开 HTML 的支持，它在页面制作中就像我们

每天都要吃饭一样的重要。但网页发展到现在，单单只有 HTML 是无法完成的，我们还会

进一步学习 CSS 及 JAVASCRIPT。它们虽然听起来很难的样子，但是在 DREAMWEAVER

的帮助下，使用起它们来会变的非常的简单，即使对页面建设一点都不懂的人也会很快上

手。我们作为准专业人士，将去系统的学习这四项 -----HTML 语

言、CSS、JAVASCRIPT、DREAMWEAVER。下面让我们先来了解一下它们都是什么，又

都起什么作用。

第 1 次课，学时 2

教学内容补充内容和时间分配

1.1 HTML 基础

1.1.1 HTML 概念

HTML 语言（Hypertext Markup Language，中文通常称作超文本

标识语言，或超文本标记语言）是一种文本类解释执行的标记语言。

HTML 页面的特点如下：

1）页面都是由起始标记<HTML>开始，以结束标记</HTML>结

束。

2）绝大多数的 HTML 标记都是成对出现<> </>，比如：<HTML>

</HTML>。

3）页面分两段，执行页面不可见的<head>区和执行页面可见的

<body>区。

4）有关整个文档的信息都包含在<head>分段中，如：标题、描

述、关键字。

5）可以调用的任何语言的子程序，还有所有文本、图形、嵌入的

动画，Java 小程序都包括在<body>标签中。

1.1.2 关于 HTML 源文件

1）HTML 是纯文本类型的语言，HTML 编写的网页也是标准的纯

文本文件。

2）可以用任何文本编辑器打开页面，如记事本。

3）编辑——查看——源文件/右键-----查看-----源文件。

4）HTML 文件可直接解释执行，无需编译。

1.2 CSS 基础

1.2.1 CSS 概念

CSS 是 Cascading Style Sheets 的缩写，一般译为层叠样式表。

1）样式是一个规则，告诉浏览器如何表现特定的 HTML 标签中的

内容。用户可以利用 CSS 精确地控制页面里每一个元素的文字样

式、背景、排列方式、区域尺寸、四周加入边框等。

2）表达一个样式表的基本写法有 3 种：内联样式表、文档级样式

表、使用外部样式表。

3）W3C 把 DHTML(Dynamic HTML)分为 3 个部分来实现：脚本语

言（JavaScript、VBScript 等），支持动态效果的浏览器（Internet

Explorer，Netscape Navigator 等）和 CSS 样式表。

1.2.2 使用 CSS 的优点

1）风格统一，便于修改。

2）CSS 能实现一些特殊的效果。

3）可以制作出体积更小，下载更快的网页。

CSS 由 CSS 样式语句组成，分为内嵌式 CSS 和外部链接 CSS，内

嵌式 CSS 只对一个网页起作用，外部链接式 CSS 对所有调用了这个

外部链接式 CSS 的网页起作用。

1.3 JavaScript 基础

JavaScript 是一种基于对象和事件驱动并且有安全性能的脚本语

第一章一个课时

言，使用它的目的是与 HTML 超文本标记语言一起实现在一个 Web

页面中与 Web 客户交互的目的。

1.4 Dreamweaver 8 基础

1.4.1 Dreamweaver 8 介绍

Dreamweaver 8 已归到 Adobe 公司旗下和该公司的 Flash 8（用于制

作矢量动画），Firework 8（用于图像处理）一起被誉为“网页制作三

剑客”。（Photoshop 用于制作位图）

Dreamweaver 8 的特点：

1）生成的代码简洁，网页可读性强，网页浏览速度更快。

2）利用强大的编码功能（如代码提示、标记编辑器、可扩展的颜

色编码、标记选择器、代码片段和代码确认）可以加快代码编写速

度。

3）能统一网站风格，统一实现网站更新。

4）在用户不懂代码的情况下也能生成动态网页。

5）更好地与 Flash 8 和 Firework 8 集成，方便对网页动画和图像

的操作。

6）在用户不懂代码的情况下，能够生成支持数据库的动态网

页，开发网络应用程序。

7）对 XML 支持率高。

8）可扩展性好。

1.4.2 Dreamweaver 8 界面

1）两个布局：设计器和编码器。

2）默认情况下显示“代码”视图。

3）Dreamweaver 8 的菜单栏。

“文件”菜单：新建、打开、保存、在浏览器中预览、打印代

码。

“编辑”菜单：剪切、拷贝、粘贴、选择父标签、查找和替换、

首选参数。

“查看”菜单：视图、显示/隐藏工具。

“插入”菜单：提供插入栏的替代项。

“修改”菜单：更改选定页面元素或项的属性。

“文本”菜单：设置文本的格式。

“命令”菜单：提供对各种命令的访问。

“站点”菜单：创建、打开和编辑站点、管理当前站点中的文

件。

“窗口”菜单：对所有面板、检查器和窗口的访问。

“帮助”菜单：帮助系统、各种代码的参考材料。

1.5 创建本地站点准备页面的制作

创建网站的实际过程：

1）创建本地站点；

2）在本地站点中新建和编辑网页；

3）测试本地站点并做必要的修改；

4）上传本地站点到远程服务器上。

Photoshop，flash，dre

amweaver 被称为新的

网页三剑客。

由静态网页组成的网站称为静态站点，使用了服务器技术，包含

动态网页的网站称为动态站点。

1.5.1 建立本地站点

一般情况下应该在本地站点中新建一个名为 images 的文件夹放

置文件；新建一个名为 media 的子文件夹来放置包括 Flash、小电

影、Shockwave 小电影在内的多媒体文件；新建一个名为 Script 的子

文件夹来放置脚本文件。

站点创建实例：

1）“窗口”菜单中“文件” ----打开文件面板----文件面板中单击“管

理站点”----打开“管理站点”对话框来新建一个站点/“站点”菜单----“新

建站点”菜单项----打开“定义站点”对话框----文本框中填写这个网站的

名称；

2）----单击“下一步”----进入“定义站点”对话框----选择“否，我不

想使用服务器技术”；

3）----单击“下一步”----进入“定义站点”对话框----选择“编辑我的

计算机上的本地副本，完成后再上传到服务器（推荐）”选项----选择

存放文件的地点；

4）----单击“下一步”----选择“无”；

5）----单击“下一步”----检查信息无误后----单击“完成”按钮；

6）至此，新建静态站点完成。

静态站点中一定要有一个文件名为 index.htm 的网页，这是站点

的首页。

1.5.2 管理站点

1）编辑网页或进行网站管理时，每次只能操作一个站点。

2）“文件”面板左边的下拉列表框中选中某个已创建的站点就切

换到这个站点。

3）“文件”面板左边的下拉列表中选择“管理站点” ----弹出“管理

站点”对话框。

4）“管理站点”对话框中：

“新建”按钮----创建一个站点。

“编辑”按钮----再次弹出“定义站点”对话框----重新编辑。

“复制”按钮----复制这个站点。

“删除”按钮----删除这个站点。

用户可以将站点信息导出为 XML 文件，然后将其导入回

Dreamweaver 8。

2 创建页面及代码基础

2.1 从建立的文件了解 HTML 的基本结构

2.1.1 创建、打开与保存页面

创建一个页面实例：

打开“文件”菜单----选择“新建”菜单项----出现“新建文档”对话

框----“常规”选项卡----“类别”列表框中选择“基本页”类别 ----选择

HTML 选项----单击右下角的“创建”按钮----在标题栏中输入标题名称

“我的第一个网页”----在“编辑区”输入“大家好，欢迎浏览我的第一个页

名字其实可以自由命

名，但要在服务器端

进行设置，一般默认

的首页为 index.htm 或

index.html，在动态网

站中首页也可为

index.asp 或

index.aspx 或 index.jsp

或 index.php。

在使用生成静态页面

的网站中，.htm 结尾

的页面一般做为模

板，生成的浏览的页

面为.html 结尾。

第二章一个课时

文件的名称和路径一

定要用英文，因为其

面，祝大家愉快”----打开“文件”----选择“保存”----出现“另存为”对话

框----输入名称，选择格式----单击“保存”----按 F12 快捷键查看页面的

效果----完成。

文件名前的星号表示当前文件包含尚未保存的更改，默认标题

是“无标题文档”。

打开页面实例：

“文件”菜单----选择“打开”菜单项----选择文件----单击“打开”按

钮----编辑文件----保存文件。

2.1.2 了解 HTML 文件的基本结构

三种视图：

代码视图：查看或编辑源代码；

设计视图：显示效果，静态页面下，基本实现所见即所得。

代码视图和设计视图：窗口被拆分，上面显示代码，下面显示

效果，单击“拆分”按钮进入。

HTML 文件由元素与标签组成。元素即嵌入网页中的字、图片

等，标签即像<HTML></HTML>一样的，放在开始和结束括号之间

的用于分割并描述元素的标记。

所有标签都有一个标签名称，有些标签后面还有一个可选的属

性列表，标签和属性名不区分大小写。

赋给特定属性的值都可能是要区分大小写的，尤其是对文件位

置和名称的引用，以及统一资源定位符（URL），这些都要区分大小

写。

属性跟随在标签名称的后面，每个属性都由一个或者多个制表

符、空格或者回车符分开。但是它们出现的顺序无关要紧。

大多数只包括字母、数字、连字符和点号的属性值不需要引

号，其它的值必须加单引号或双引号。

HTML

文档的基本结构实例：

<HTML>

<HEAD>

…………

</HEAD>

<BODY>

………….

</BODY>

</HTML>

对应的结束标签只是在标签名称前面加一个“/”，结束标签没有

属性，可以自如地运用硬回车、空格和 Tab 键来编排代码文档，使它

更易于阅读。

2.1.3 HTML 整体结构标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

对中文支持不好，路

径中有中文易出错。

URL 中不要使用中

文，因为对中文支持

不好，会出现一些问

题。

如果是第一次引用引

号用双引号，如果所

要引用的引号在一对

双引号中则用单引

号。

剩余63页未读，继续阅读

评论收藏

内容反馈

yawyuw

2012-05-01

作为教学参考还是可以的，谢谢
lichuanglove2002

2013-06-05

很好的HTML+DREAMWEAVER的教案资料，非常感谢！

yufei_yuxuan

粉丝: 4
资源: 8

HTML教案（中青出版社）

山东教育出版社四年级下册美术教案.doc

江西美术出版社三年级美术教案.doc

电子工业出版社信息技术第8册最新教案.docx

三年级(下册)信息技术教案(电子工业出版社).pdf

三年级信息技术下册教案电子工业出版社.docx

自动看 中青看点 的脚本

中青杯特等奖论文.rar

2021中青杯B题港珠澳大桥

大连理工出版社信息技术四年级上册全册教案.docx

五年级上册《信息技术》教案_南方出版社.pdf

江西科技出版社信息技术六年级上册教案.pdf

甘肃声像出版社信息技术六年级上册教案.doc

南方出版社信息技术五年级下册教案收集.pdf

中青世纪录音芯片资料手册

2021年中青杯B题 完整思路代码.zip

2021-中青杯-C 在线教学的分析与研究.pdf

2021中青杯A题思路及代码

中青杯B题参考文献.zip

上海科技出版社信息技术八年级下教案.pdf

浙江摄影出版社信息技术五年级下教案.doc

福建教育出版社信息技术五年级下册教案.pdf

南方出版社信息技术五年级上册全册教案.pdf

河北大学出版社信息技术第二册教案借鉴.pdf

中青杯数学建模论文 股指与国家经济.docx

V2P跑中青晶彩不会？从入门到入土的百图教程！包教包会_科技玩家.html

2021中青杯数学建模A题 汽车组装车间流水线物料配送问题

中青宝：2021年半年度报告.PDF

2022年中青杯A--数学建模竞赛与课程思政教育评价问题

最新资源

自动看中青看点的脚本

2021年中青杯B题完整思路代码.zip

中青杯数学建模论文股指与国家经济.docx

2021中青杯数学建模A题汽车组装车间流水线物料配送问题