网页设计教案.docx

1、网页设计教案网页设计（教 案） 体育与艺术学院艺术系课程名称网页设计授 课 人李霞授课时间2008/09第1学期授课班级07100441 07100442学 时32网页制作与设计教案第一讲 网页设计概述 31.1 WWW和URL 31.2 IE5的使用 31.3 网页中所使用的技术 41.4 制作网页的基本方法 4第二讲 HTML的基本标志与格式标志 42.1 HTML文档的基本结构 5第三讲 HTML的文本、图片与超级链接标志 52.2 插入文字 62.3 插入图片 82.4 建立超级链接 8第四讲 HTML表格、表单与框架标志 92.5 插入表格 92.6 表单的应用 102.7 框架窗口

2、 10第五讲 HTML标志综合运用案例 11第六讲 Dreamweaver中简单WEB站点建立与管理 123.1 Dreamweaver概述 12第七讲 Dreamweaver中静态网页设计 133.2 在页面中加入文字和图像 143.3 超级链接的运用 143.4. 表格的应用 143.5. 在网页中创建表单 15第八讲 Dreamweaver中动态网页设计 15第九讲 Dreamweaver综合性网页设计案例 16第十讲 VBScript概述 174.1 VBScript语言简介 17第十一讲 VBScript的基本元素与输入输出 184.2.基本数据类型 184.2. 表达式和运算符 1

3、9第十二讲 VBScript的条件语句、循环语句和过程 204.3 VBScript基本语句 20第十三讲 VBScript文档对象模型 214.4基于对象的VBScript语言 214.5 使用内部对象系统 22第十四讲 ASP概述 235.1 ASP概述 23第十五讲 使用ASP对象 245.2 ASP的内置对象 25第十六讲 使用ASP组件 255.3 ASP的内置组件 26第十七讲 使用ADO对象 265.5 ADO数据对象 26第十八讲 设计实例论坛 27第十九讲 设计实例成绩管理系统 28第二十讲 网站的设计、制作、发布和宣传 29第一讲 网页设计概述【教学内容】讲解网页设计的相关

4、术语及网站制作的基本流程。【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】网页设计中的若干术语。【教学难点】理解网页设计中的若干术语。【教学方式】讲授式、讨论式、案例分析式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、Internet 网页工场Wittime工作室 重庆出版社。3、WEB网站设计Joel Sklar著 高等教育出版社。4、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1.1 WWW和URL1.1.1 Web的起源Web是World Wide Web的简称，一般也称之为WWW或3W1.1.2 Web的

5、特点和结构Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式在浏览器和服务器之间应用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

6、HTML语言和XML语言1、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、对重点段落要强调显示。4、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。第二讲 HTML的基本标志与格式标志【教学内容】讲解HTML基本标志对和格式标志。【教学目的】使学生标志对与格式标志对的使用。【教学重点】格式标志的使用。【教学难点】列表标志的使用。【教学方式】讨论式、案例分析式、

8、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.1 HTML文档的基本结构2.1.1 HTML语法1、双标记 语法： 内容2、单标记语法：最常用的单标记是3、标记属性语法例子4、注释语句格式例子 2.1.2 HTML文档的基本结构【课后小结】通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表,有序列表,无序列表标志及属性。第三讲 HTML的文本、图片与超级链接标志【教学内容】讲解HTML标准中的文本、图片与超级链接

9、标志【教学目的】* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。* 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片。* 使学生掌握超级链接标志的使用。【教学重点】* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入 。【教学难点】* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义 。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容

10、】2.2 插入文字2.2.1 划分段落格式段落内容2.2.2 插入标题文字格式标题内容2.2.3 字号属性设置基准字号：网页内的其他文字，采用下面的格式来定义.Size的有效范围是1（最大）到7（最小）。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。2.2.4 颜色属性两种方式字符串2.2.5 字体属性2.2.6 文本修饰.，文字以粗体显示。.，文字显示为斜体。.，显示下划线。.，中心线贯穿文字。.，强调文字，通常用斜体。 .，特别强调的文字，通常用黑体。 .，以等宽体显示西文字符。.，使文字大小相对于前面的文字增大一级。.，使文字大小相对于前面的文字减

11、小一级。.，使文字成为前一个字符的上标。.，使文字成为前一个字符的下标。.，使文字显示为闪烁效果。2.2.6 文本修饰2.2.7 预格式化文本使用预格式化标记不再忽略在此之间的空格、制表符与回车符等元素2.2.8 转义字符与特殊字符一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格2.2.9 文本强制换行和不换行文本强制换行 不换行 2.2.10 插入水平线使用标记属性：Width，Size，Align，Noshade，color2.2.11 使用列表1、无序列表 列表条目1列表条目2.2、有序列表 列表条目1列表条目2.3、定义列表列表条目1条目1的说明列表条目2条目2的说明

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

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

14、宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.5 插入表格2.5.1 在网页中插入表格表格的基本构成元素：表头，单元格，列，行第一行第一列第一行第二列第二行第一列第二行第二列2.5.2嵌套的表格2.5.3 表格的属性设置2.5.4单元格属性设置2.6 表单的应用表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。2.6.1 创建表单2.6.2 用定义用户交互（1）单行文本输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮2.6.3 定义

15、下拉式菜单你选修的课程： 计算机 英语 逻辑学 心理学2.6.4 定义多行文字输入区域请输入你的详细介绍：文字2.7 框架窗口框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。2.7.1 框架的定义2.7.2 框架属性设置 2.7.3 子窗口属性设置 2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分 （3）目录和标题，分为左上、左下、右三部分（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分2.7.5 不支持框架的网页 很抱歉，馈下使用的浏览器不支援框架功能，请转

16、用新的浏览器。 2.7.6 内部框架【课后小结】表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超级链接时目标框架位置的设置。表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。第五讲 HTML标志综合运用案例【教学内容】综合运用所学过的HTML标志书写网页。【教学目的】使学生能够书写简单的HTML网页。【教学重点】使用所学的HT

17、ML标志书写网页。【教学难点】HTML的综合运用。【教学方式】案例分析式、讨论式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1、用记事本书写HTML网页。2、利用案例进行HTML网页的综合讲解。3、要求学生按规定书写一个完整的HTNL网页。【课后小结】HTML是目前制作网页时必须掌握的一种语言，学好HTML语言是为以后对网页设计这门课程更深入的学习打下扎实的基础。第六讲 Dreamweaver中简单WEB站点建立与管理【教学内容】讲解Dr

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

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

20、点“站点”“定义站点”3、上传和下载文件【课后小结】Dreamweaver是一款由Macromedia公司开发的专业HTML编辑器，用于对WEB站点、WEB页面和WEB应用程序进行设计、编码和开发。无论是刚接触网页设计的初学者还是专业的WEB开发人员，Dreamweaver都在前卫的设计理念和强大的软件功能方面给予了充分可靠的支持。因此学好Dreamweaver对以后的网页设计有很大的帮助。第七讲 Dreamweaver中静态网页设计【教学内容】讲解利用Dreamweaver进行静态页面的制作。【教学目的】使学生掌握利用Dreamweaver对页面进行文本、图象、超级链接、表格以及框架等的编辑

21、。【教学重点】通过对工具软件Dreamweaver的操作，制作出完整的静态页面。【教学难点】了解静态网页的含义【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】3.2 在页面中加入文字和图像3.2.1 文字的添加和处理（1）文字属性面板的使用3.2.2 插入和优化图像（1）准备图像把网页中所用到的图像文件预先

22、拷贝到站点文件夹中（2）插入图像（3）设置图像属性（4）创建图像地图3.3 超级链接的运用3.3.1 插入超级链接（1）直接在属性面板的链接项填入链接的地址。（2）在属性面板单击浏览文件按钮打开浏览窗口来选择链接的网页。（3）利用指向文件图标创建链接。3.3.2 超级链接的运用（1）链接其他网站在链接栏填写URL选择目标网页显示的窗口。 _blank、parent、_self、_top（2）链接其他文件输入网页文件名外使用属性面板上的指向文件图标，创建内部链接（3）链接E-mail直接在链接栏填写E-mail地址。利用对象面板插入E-mail（4）锚点链接建立锚点:“隐藏” “插入命令锚点”

23、填入锚点的名称建立锚点链接:在链接栏中输入符号“#”和锚点名称。3.4. 表格的应用3.4.1 表格的创建A.创建表格（1）使用菜单“插入”“表格”。（2）单击对象面板上的子菜单中插入表格按钮。（3）按CTRL+ALT+T组合键。B.选择表格元素（1）选取整个表格（2）选择行和列（3）选择单元格3.4.2 表格属性的设置1、表格整体属性设置2、行列和单元格属性设置3.5. 在网页中创建表单A创建表单“插入”“表单”使用菜单“窗口”调出“对象”面板， “表单” “插入”B添加表单元素（1）添加文本域“插入”“表单对象”“文本域”设置TextField，字符宽度，最多字符，类型（2）添加选择域 在表单中插入单选按钮。“插入”“表单对象”“单选按钮” 在表单中插入复选按键。“插入”“表单对象”“复选钮”（3）添加列表和下拉式菜单（4）添加按钮（5）添加文件域【课后小结】了解静态网页的含义，利用Dreamweaver MX 2004的强大功能制作出各色各样的页面，为以后的学习打下坚实的基础。第八讲 Dreamweaver中动态网页设计【教学内容】讲解利用Dreamweaver进行动态页面的制作。【教学目的】使学生掌握利用Dreamweaver作出简单的