网页制作与设计教案-计算机教学

1、网页制作与设计教案网页制作与设计教案- 1 -网页制作与设计教案网页制作与设计教案文档下载资料下载文档下载资料下载第一讲第一讲 网页设计概述网页设计概述3 31.1 WWW 和 URL.31.2 IE5 的使用.31.3 网页中所使用的技术 .41.4 制作网页的基本方法 .4第二讲第二讲 HTMLHTML 的基本标志与格式标志的基本标志与格式标志4 42.1 HTML 文档的基本结构.5第三讲第三讲 HTMLHTML 的文本、图片与超级链接标志的文本、图片与超级链接标志5 52.2 插入文字 .62.3 插入图片 .82.4 建立超级链接 .8第四讲第四讲 HTMLHTML 表格、表单与框架

2、标志表格、表单与框架标志9 9网页制作与设计教案网页制作与设计教案- 2 -2.5 插入表格 .92.6 表单的应用 .102.7 框架窗口 .10第五讲第五讲 HTMLHTML 标志综合运用案例标志综合运用案例1111第六讲第六讲 DREAMWEAVERDREAMWEAVER 中简单中简单 WEBWEB 站点建立与管理站点建立与管理12123.1 DREAMWEAVER概述.12第七讲第七讲 DREAMWEAVERDREAMWEAVER 中静态网页设计中静态网页设计13133.2 在页面中加入文字和图像 .143.3 超级链接的运用 .143.4. 表格的应用 .143.5. 在网页中创建表

3、单 .15第八讲第八讲 DREAMWEAVERDREAMWEAVER 中动态网页设计中动态网页设计1515第九讲第九讲 DREAMWEAVERDREAMWEAVER 综合性网页设计案例综合性网页设计案例1616第十讲第十讲 网站的设计、制作、发布和宣传网站的设计、制作、发布和宣传1919网页制作与设计教案网页制作与设计教案- 3 -第一讲第一讲 网页设计概述网页设计概述【教学内容】讲解网页设计的相关术语及网站制作的基本流程。【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】网页设计中的若干术语。【教学难点】理解网页设计中的若干术语。【教学方式】讲授式、讨论式、

4、案例分析式。【教学参考】1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、 Internet 网页工场Wittime 工作室 重庆出版社。3、 WEB 网站设计Joel Sklar 著 高等教育出版社。4、 HTML 网页制作教程材义语编著 铁道出版社。【新课内容】网页制作与设计教案网页制作与设计教案- 4 -1.1 WWW 和和 URL1.1.1 Web 的起源Web 是 World Wide Web 的简称，一般也称之为 WWW 或 3W1.1.2 Web 的特点和结构Web 最大的特点是使用了超文本（Hypertext）WWW 采用 C/S（客户机/服务器）工作模式在浏

5、览器和服务器之间应用 HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议1.1.3 URLURL 的完整格式协议:/主机名或 IP 地址：端口号/路径名/文件名1.2 IE5 的使用Web 浏览器是浏览 Internet 资源的客户端软件在 Windows 环境下使用的浏览器主要有 Internet Explorer、Netscape Navigator、Mosaic 等1.2.1 IE5 的界面1.2.2 IE5 的使用1.3 网页中所使用的技术1.3.1 HTML 语言和 XML 语言网页制作与设计教案网页制作与设计教案- 5 -1、

6、HTML 语言HTML 只使用 SGML 中很小一部分标记HTML 语言（Hyper Text Markup Language 超文本标记语言）HTML 是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如 FrontPage、Dreamweaver 等实际上是自动生成 HTML 源代码的工具2、XML 语言XML（eXtensible Markup Language）1.3.2 动态网页1.3.3 多媒体技术的应用1.3.4 Web 服务器端程序1.4 制作网页的基本方法1.4.1 制作网页的基本步骤1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择

7、网页的设计方法1.4.2 制作网页时要注意的问题1、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。网页制作与设计教案网页制作与设计教案- 6 -4、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标） ，不能侵犯版权。【课后小结】通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。第二讲第二讲 HTML 的基本标志与格式标志的基本标志与格式标志【教学内容】讲解 HTML 基本标志对和格式标志。【教学目的】使学生标志对与格式标志对的使用。【教学重点】

8、格式标志的使用。【教学难点】列表标志的使用。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。网页制作与设计教案网页制作与设计教案- 7 -2、 WEB 网站设计Joel Sklar 著 高等教育出版社。3、 HTML 网页制作教程材义语编著 铁道出版社。【新课内容】2.1 HTML 文档的基本结构文档的基本结构2.1.1 HTML 语法1、双标记 语法： 内容2、单标记语法：最常用的单标记是3、标记属性语法例子4、注释语句格式例子 网页制作与设计教案网页制作与设计教案- 8 -2.1.2 HTML 文档的基本结构【课后小结】通

9、过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表,有序列表,无序列表标志及属性。第三讲第三讲 HTML 的文本、图片与超级链接标志的文本、图片与超级链接标志【教学内容】讲解 HTML 标准中的文本、图片与超级链接标志【教学目的】* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。* 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片。* 使学生掌握超级链接标志的使用。【教学重点】* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入 。【教学难点】* 理解特殊符号对应的标志。网页制作与设计教案网页制作与设计教案- 9 -* 理解

10、 img 标志中属性的意义。* 理解书签超级链接的意义 。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、 WEB 网站设计Joel Sklar 著 高等教育出版社。3、 HTML 网页制作教程材义语编著 铁道出版社。【新课内容】2.2 插入文字2.2.1 划分段落格式段落内容2.2.2 插入标题文字格式标题内容2.2.3 字号属性设置基准字号：网页内的其他文字，采用下面的格式来定义网页制作与设计教案网页制作与设计教案- 10 -.Size 的有效范围是 1（最大）到 7（最小） 。如果在 Size 的值前面带上“+”号或

11、“-”号，则表示相对于基础字体增大或减小若干字号。2.2.4 颜色属性两种方式字符串2.2.5 字体属性2.2.6 文本修饰.，文字以粗体显示。.，文字显示为斜体。.，显示下划线。.，中心线贯穿文字。.，强调文字，通常用斜体。 .，特别强调的文字，通常用黑体。 .，以等宽体显示西文字符。.，使文字大小相对于前面的文字增大一级。.，使文字大小相对于前面的文字减小一级。网页制作与设计教案网页制作与设计教案- 11 -.，使文字成为前一个字符的上标。.，使文字成为前一个字符的下标。.，使文字显示为闪烁效果。2.2.6 文本修饰2.2.7 预格式化文本使用预格式化标记不再忽略在此之间的空格、制表符与回

12、车符等元素2.2.8 转义字符与特殊字符一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格2.2.9 文本强制换行和不换行文本强制换行 不换行2.2.10 插入水平线使用标记属性：Width，Size，Align，Noshade，color2.2.11 使用列表1、无序列表 列表条目 1列表条目 2网页制作与设计教案网页制作与设计教案- 12 -.2、有序列表 列表条目 1列表条目 2.3、定义列表列表条目 1条目 1 的说明列表条目 2条目 2 的说明2.3 插入图片2.3.1 在网页中插入图片基本格式2.3.2 图片的属性网页制作与设计教案网页制作与设计教案- 13

13、 -2.4 建立超级链接2.4.1 指向一个目标1、建立超级链接字符串2、为图片建立超级链接 3、链接到邮件和多媒体文件链接到邮件请与我联系2.4.2 使用锚点 使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。 建立锚点：锚点文字 使超级链接指向已定义的锚点。网页制作与设计教案网页制作与设计教案- 14 -文字文字2.4.3 新窗口和基准链接1、打开新窗口开一个新窗口2、基准链接在 与 之间设定 2.4.4 图像地图图像地图的格式为：.2.4.4 图像地图【课后小结】本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标

14、志网页制作与设计教案网页制作与设计教案- 15 -中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML 中超级链接标志的难点。第四讲第四讲 HTML 表格、表单与框架标志表格、表单与框架标志【教学内容】讲解 HTML 中制作表格、表单与框架的标志。【教学目的】使学生掌握简单表格、表单与框架的制作。【教学重点】* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】* 理解表格属性 rowspan 与 colspan 的含义以及表格嵌套实现的基本思想。* 理解框架属性 name、target 的意义。* 理解表单中相应元素对应标志及属性的

15、含义。【教学方式】案例分析式、项目教学【教学参考】1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出网页制作与设计教案网页制作与设计教案- 16 -版社。2、 WEB 网站设计Joel Sklar 著 高等教育出版社。3、 HTML 网页制作教程材义语编著 铁道出版社。【新课内容】2.5 插入表格2.5.1 在网页中插入表格表格的基本构成元素：表头，单元格，列，行第一行第一列第一行第二列第二行第一列第二行第二列2.5.2 嵌套的表格2.5.3 表格的属性设置2.5.4 单元格属性设置网页制作与设计教案网页制作与设计教案- 17 -2.6 表单的应用表单在 Web 网页中用来给访问者填写

16、信息，从而能获得用户信息，使网页具有交互的功能。2.6.1 创建表单2.6.2 用定义用户交互（1）单行文本输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮2.6.3 定义下拉式菜单你选修的课程： 计算机 英语 逻辑学 心理学2.6.4 定义多行文字输入区域网页制作与设计教案网页制作与设计教案- 18 -请输入你的详细介绍：文字2.7 框架窗口框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML 文档，最后形成充满整个窗口的网页。2.7.1 框架的定义2.7.2 框架属性设置 2.7.3 子窗口属性设置 2.7.4 常见的框架窗口划分方法网页制作与设计教案网页制作

17、与设计教案- 19 -（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分 （3）目录和标题，分为左上、左下、右三部分（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分2.7.5 不支持框架的网页 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。 2.7.6 内部框架【课后小结】表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。网页制作与设计教案网页制作与设计教案- 20 -框

18、架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超级链接时目标框架位置的设置。表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。第五讲第五讲 HTML 标志综合运用案例标志综合运用案例【教学内容】综合运用所学过的 HTML 标志书写网页。【教学目的】使学生能够书写简单的 HTML 网页。【教学重点】使用所学的 HTML 标志书写网页。【教学难点】HTML 的综合运用。【教学方式】案例分析式、讨论式、练习式。【教学参考】1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、 WEB 网站设计Joel Sklar 著 高等教育

19、出版社。3、 HTML 网页制作教程材义语编著 铁道出版社。网页制作与设计教案网页制作与设计教案- 21 -【新课内容】1、用记事本书写 HTML 网页。2、利用案例进行 HTML 网页的综合讲解。3、要求学生按规定书写一个完整的 HTNL 网页。【课后小结】HTML 是目前制作网页时必须掌握的一种语言，学好 HTML 语言是为以后对网页设计这门课程更深入的学习打下扎实的基础。第六讲第六讲 Dreamweaver 中简单中简单 WEB 站点建立与管理站点建立与管理【教学内容】讲解 Dreamweaver 的工作界面和基本操作。【教学目的】使学生掌握网页制作工具 Dreamweaver 的基本操

20、作方式。【教学重点】网页制作工具 Dreamweaver 的界面和基本基本操作。【教学难点】掌握一个新的开发工具。【教学方式】讲授式、项目模块式、演示教学。【教学参考】网页制作与设计教案网页制作与设计教案- 22 -1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、 WEB 网站设计Joel Sklar 著 高等教育出版社。3、 Dreamweaver 网页设计案例教程白煜编著 清华大学出版社。4、 Dreamweaver MX 2004 完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】3.1 Dreamweaver 概述3.1.1 Dreamweaver 的工作界面

21、3.1.2 Dreamweaver4 的基本操作1、直接建立新网页“文件”“新建”(Ctrl+N)2、打开已有的网页“文件”“打开”3、保存编辑过的网页“文件”“保存”，直接保存 “文件”“另存为”,换名保存4、预览正在编辑的网页“文件”“在预览器中预览”5、设置网页属性网页制作与设计教案网页制作与设计教案- 23 -“修改”“页面设置”（1）标题（2）背景图像（3）背景色（4）文字颜色（5）超级链接颜色（6）左边界上边界（7）文件编码方式（8）网页蓝图6、导入 Word 文件“文件”“导入” “导入 Word HTML”3.1.3 用 Dreamweaver 创建和管理站点1、创建本地站点“

22、站点”“新建站点”2、管理站点“站点”“定义站点”3、上传和下载文件【课后小结】Dreamweaver 是一款由 Macromedia 公司开发的专业 HTML 编辑网页制作与设计教案网页制作与设计教案- 24 -器，用于对 WEB 站点、WEB 页面和 WEB 应用程序进行设计、编码和开发。无论是刚接触网页设计的初学者还是专业的 WEB开发人员，Dreamweaver 都在前卫的设计理念和强大的软件功能方面给予了充分可靠的支持。因此学好 Dreamweaver 对以后的网页设计有很大的帮助。第七讲第七讲 Dreamweaver 中静态网页设计中静态网页设计【教学内容】讲解利用 Dreamwe

23、aver 进行静态页面的制作。【教学目的】使学生掌握利用 Dreamweaver 对页面进行文本、图象、超级链接、表格以及框架等的编辑。【教学重点】通过对工具软件 Dreamweaver 的操作，制作出完整的静态页面。【教学难点】了解静态网页的含义【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。网页制作与设计教案网页制作与设计教案- 25 -2、 WEB 网站设计Joel Sklar 著 高等教育出版社。3、 Dreamweaver 网页设计案例教程白煜编著 清华大学出版社。4、 Dreamweaver MX 2004 完美

24、网页设计与制作姜楠编著 中国青年出版社。【新课内容】3.2 在页面中加入文字和图像在页面中加入文字和图像3.2.1 文字的添加和处理（1）文字属性面板的使用3.2.2 插入和优化图像（1）准备图像把网页中所用到的图像文件预先拷贝到站点文件夹中（2）插入图像（3）设置图像属性（4）创建图像地图3.3 超级链接的运用超级链接的运用3.3.1 插入超级链接（1）直接在属性面板的链接项填入链接的地址。（2）在属性面板单击浏览文件按钮打开浏览窗口来选择链接的网页。网页制作与设计教案网页制作与设计教案- 26 -（3）利用指向文件图标创建链接。3.3.2 超级链接的运用（1）链接其他网站在链接栏填写 UR

25、L选择目标网页显示的窗口。 _blank、parent、_self、_top（2）链接其他文件输入网页文件名外使用属性面板上的指向文件图标，创建内部链接（3）链接 E-mail直接在链接栏填写 E-mail 地址。利用对象面板插入 E-mail（4）锚点链接建立锚点:“隐藏” “插入命令锚点” 填入锚点的名称建立锚点链接:在链接栏中输入符号“#”和锚点名称。3.4. 表格的应用表格的应用3.4.1 表格的创建A.创建表格（1）使用菜单“插入”“表格” 。（2）单击对象面板上的子菜单中插入表格按钮。（3）按 CTRL+ALT+T 组合键。B.选择表格元素网页制作与设计教案网页制作与设计教案- 2

26、7 -（1）选取整个表格（2）选择行和列（3）选择单元格3.4.2 表格属性的设置1、表格整体属性设置2、行列和单元格属性设置3.5. 在网页中创建表单在网页中创建表单A 创建表单“插入”“表单”使用菜单“窗口”调出“对象”面板， “表单” “插入”B 添加表单元素（1）添加文本域“插入”“表单对象”“文本域”设置 TextField，字符宽度，最多字符，类型（2）添加选择域 在表单中插入单选按钮。 “插入”“表单对象”“单选按钮” 在表单中插入复选按键。 “插入”“表单对象”“复选钮”（3）添加列表和下拉式菜单（4）添加按钮网页制作与设计教案网页制作与设计教案- 28 -（5）添加文件域【课

27、后小结】了解静态网页的含义，利用 Dreamweaver MX 2004 的强大功能制作出各色各样的页面，为以后的学习打下坚实的基础。第八讲第八讲 Dreamweaver 中动态网页设计中动态网页设计【教学内容】讲解利用 Dreamweaver 进行动态页面的制作。【教学目的】使学生掌握利用 Dreamweaver 作出简单的动态页面。【教学重点】理解动态页面的含义以及数据库的使用。【教学难点】了解动态网页的含义。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、 网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、 WEB 网站设计Joel Sklar 著 高等教育出版社。3、 Dreamweaver 网页设计案例教程白煜编著 清华大学出版网页制作与设计教案网页制作与设计教案- 29 -社。4、 Dreamweaver MX 2004 完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】1、初识数据库与 ASP2、建立数据库3、在 Dreamweaver MX 2004 中连接数据库4、绑定数据库5、显示记录6、添加记录7、修改记录8、删除记录【课后小结】了解动态网页的含义，本节详细的介绍了如何在 Dreamweaver MX 2004 中实现与数据库的连接。动态网页是当今的主流，学好动态网页的制作是必须的。第九讲第九讲 Dreamw