1、网页制作与设计教案网页制作与设计教案第一讲 网页设计概述【教学内容】讲解网页设计的相关术语及网站制作的基本流程。【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】网页设计中的若干术语。【教学难点】理解网页设计中的若干术语。【教学方式】讲授式、讨论式、案例分析式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、Internet 网页工场Wittime工作室 重庆出版社。3、WEB网站设计Joel Sklar著 高等教育出版社。4、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1.1 WWW和URL1.1.1 Web的起源W
2、eb是World Wide Web的简称，一般也称之为WWW或3W1.1.2 Web的特点和结构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等
3、1.2.1 IE5的界面1.2.2 IE5的使用1.3 网页中所使用的技术1.3.1 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.
4、1 制作网页的基本步骤1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择网页的设计方法1.4.2 制作网页时要注意的问题1、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。4、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。第二讲 HTML的基本标志与格式标志【教学内容】讲解HTML基本标志对和格式标志。【教学目的】使学生标志对与格式标志对的使用。【
5、教学重点】格式标志的使用。【教学难点】列表标志的使用。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.1 HTML文档的基本结构2.1.1 HTML语法1、双标记 语法： 内容2、单标记语法：最常用的单标记是3、标记属性语法例子4、注释语句格式例子 2.1.2 HTML文档的基本结构【课后小结】通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表,有序列表,无序列表标志及属性。第三讲
6、HTML的文本、图片与超级链接标志【教学内容】讲解HTML标准中的文本、图片与超级链接标志【教学目的】* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。* 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片。* 使学生掌握超级链接标志的使用。【教学重点】* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入 。【教学难点】* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义 。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel S
7、klar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.2 插入文字2.2.1 划分段落格式段落内容2.2.2 插入标题文字格式标题内容2.2.3 字号属性设置基准字号：网页内的其他文字，采用下面的格式来定义.Size的有效范围是1（最大）到7（最小）。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。2.2.4 颜色属性两种方式字符串2.2.5 字体属性2.2.6 文本修饰.，文字以粗体显示。.，文字显示为斜体。.，显示下划线。.，中心线贯穿文字。.，强调文字，通常用斜体。 .，特别强调的文字，通常用黑体。 .，以等宽体
8、显示西文字符。.，使文字大小相对于前面的文字增大一级。.，使文字大小相对于前面的文字减小一级。.，使文字成为前一个字符的上标。.，使文字成为前一个字符的下标。.，使文字显示为闪烁效果。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、有
9、序列表 列表条目1列表条目2.3、定义列表列表条目1条目1的说明列表条目2条目2的说明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 图像地图【课后小结】本节介绍
10、了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。第四讲 HTML表格、表单与框架标志【教学内容】讲解HTML中制作表格、表单与框架的标志。【教学目的】使学生掌握简单表格、表单与框架的制作。【教学重点】* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。* 理解表单中相应元素对应标志
11、及属性的含义。【教学方式】案例分析式、项目教学【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。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）单行文本
12、输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮2.6.3 定义下拉式菜单你选修的课程： 计算机 英语 逻辑学 心理学2.6.4 定义多行文字输入区域请输入你的详细介绍：文字2.7 框架窗口框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。2.7.1 框架的定义2.7.2 框架属性设置 2.7.3 子窗口属性设置 2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分 （3）目录和标题，分为左上、左下、右三部分（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上
13、、右下三部分2.7.5 不支持框架的网页 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。 2.7.6 内部框架【课后小结】表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超级链接时目标框架位置的设置。表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。第五讲 HTML标志综合运用案例【教学内容】综合运用所学过的HTML
14、标志书写网页。【教学目的】使学生能够书写简单的HTML网页。【教学重点】使用所学的HTML标志书写网页。【教学难点】HTML的综合运用。【教学方式】案例分析式、讨论式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1、用记事本书写HTML网页。2、利用案例进行HTML网页的综合讲解。3、要求学生按规定书写一个完整的HTNL网页。【课后小结】HTML是目前制作网页时必须掌握的一种语言，学好HTML语言是为以后对网页设计这门课程更深入的学习打下扎
15、实的基础。第六讲 Dreamweaver中简单WEB站点建立与管理【教学内容】讲解Dreamweaver的工作界面和基本操作。【教学目的】使学生掌握网页制作工具Dreamweaver的基本操作方式。【教学重点】网页制作工具Dreamweaver的界面和基本基本操作。【教学难点】掌握一个新的开发工具。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制
16、作姜楠编著 中国青年出版社。【新课内容】3.1 Dreamweaver概述3.1.1 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
17、 用Dreamweaver创建和管理站点1、创建本地站点“站点”“新建站点”2、管理站点“站点”“定义站点”3、上传和下载文件【课后小结】Dreamweaver是一款由Macromedia公司开发的专业HTML编辑器，用于对WEB站点、WEB页面和WEB应用程序进行设计、编码和开发。无论是刚接触网页设计的初学者还是专业的WEB开发人员，Dreamweaver都在前卫的设计理念和强大的软件功能方面给予了充分可靠的支持。因此学好Dreamweaver对以后的网页设计有很大的帮助。第七讲 Dreamweaver中静态网页设计【教学内容】讲解利用Dreamweaver进行静态页面的制作。【教学目的】使
18、学生掌握利用Dreamweaver对页面进行文本、图象、超级链接、表格以及框架等的编辑。【教学重点】通过对工具软件Dreamweaver的操作，制作出完整的静态页面。【教学难点】了解静态网页的含义【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】3.2 在页面中加入文字和图像3.2.1 文字的添加和处理（1）
19、文字属性面板的使用3.2.2 插入和优化图像（1）准备图像把网页中所用到的图像文件预先拷贝到站点文件夹中（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
20、地址。利用对象面板插入E-mail（4）锚点链接建立锚点:“隐藏” “插入命令锚点” 填入锚点的名称建立锚点链接:在链接栏中输入符号“#”和锚点名称。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）添加文本域“插入”“表
21、单对象”“文本域”设置TextField，字符宽度，最多字符，类型（2）添加选择域 在表单中插入单选按钮。“插入”“表单对象”“单选按钮” 在表单中插入复选按键。“插入”“表单对象”“复选钮”（3）添加列表和下拉式菜单（4）添加按钮（5）添加文件域【课后小结】了解静态网页的含义，利用Dreamweaver MX 2004的强大功能制作出各色各样的页面，为以后的学习打下坚实的基础。第八讲 Dreamweaver中动态网页设计【教学内容】讲解利用Dreamweaver进行动态页面的制作。【教学目的】使学生掌握利用Dreamweaver作出简单的动态页面。【教学重点】理解动态页面的含义以及数据库的使
22、用。【教学难点】了解动态网页的含义。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】1、初识数据库与ASP2、建立数据库3、在Dreamweaver MX 2004中连接数据库4、绑定数据库5、显示记录6、添加记录7、修改记录8、删除记录【课后小结】了解动态网页的含义，本节详细的介绍了如何在Dreamwea
23、ver MX 2004中实现与数据库的连接。动态网页是当今的主流，学好动态网页的制作是必须的。第九讲 Dreamweaver综合性网页设计案例【教学内容】实例讲解利用Dreamweaver进行留言本的制作。【教学目的】使学生掌握利用Dreamweaver作出简单的动态站点。【教学重点】动态站点的制作流程。【教学难点】数据库的创建、连接与显示。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】1、制定网站设计方案。2、建立数据库。3、在Dreamweaver MX 2004中创建站点。4、在Dreamweaver MX 2004中连接数据库。5、发表、编辑、删除留言部分制作。6、管理留言【课后小结】通过具体实例的讲解剖析，使学生更加直观的了解了动态网站的制作流程。留言本是一个典型的并且简单的动态站点案例，上手容易。第十讲 VBScript概述【教学内容】讲解VBScript的基本概念及其特点。【
