网页设计教案

《网页设计与制作》课程教案姓名部门总学时学分2011年10月1【课程概述】本课程主要是依据人民邮电出版社出版的的《网页设计与web编程》，共包含有4个部分，即基础篇、图形动画篇、网页设计与制作篇、web编程篇。Web网站的架构与HTML基础构成网页制作的基础知识；图形动画篇包含第2、3章，介绍Fireworks和Flash两款软件的基本应用；第4-9章均属于网页设计与制作篇，涵盖应用Dreamweaver制作网页的重要方法与技巧；第10-12章为web编程篇，介绍动态网页的制作与实现。【课程安排】本课程主要是培养学生的网页制作技能，从网页三剑客着手。同时网页有静态和动态之分，在本书中均有涉及。根据网页制作的实际情况，以及学生的知识基础与接受能力，本门课程将着重于第3部分网页设计与制作，即静态网页的制作。另外，介绍目前一款主流的图像处理软件Photoshop，以辅助进行网页设计。本课程的理论授课共34课时，具体安排如下：第1部分基础篇（6课时）第1章Web网站的架构与HTML基础（6课时）第3部分网页设计与制作篇（18课时）第4章DreamweaverCS3入门（6课时）第5章网页布局与框架（6课时）第6章CSS层叠样式表（4课时）第9章层与行为（2课时）第2部分图形动画篇（10课时）第2章Photoshop入门及制作实例（5课时）第3章Flash入门及制作实例（5课时）共34课时本门课是实践性很强的课程，除理论讲授外，还包括28课时的上机练习。具体安排为：练习1HTML练习（2课时）练习2表格布局与多媒体综合应用（6课时）练习3框架的应用（4课时）练习4模板的应用（2课时）练习5CSS样式设定（4课时）练习6层与行为的应用（2课时）练习7Photoshop应用（4课时）练习8Flash应用（4课时）共28课时2【课程要求】在课程结束时，需完成一份比较完整的网页作品。可以个人独立完成，也可小组合作。小组合作时，小组成员不得大于4人，小组作品完成后，需要详细注明各个成员的工作内容。主题不限，禁止在网上整站下载。【最后成绩】卷面成绩60%+平时成绩40%（课堂考勤、平时作业、小组作品成绩）3第1章Web网站架构与HTML基础本章将主要讲解1.1Web的特点和结构、1.4HTML基础这两部分，授课6课时。授课题目网页制作概述、Web基本介绍授课时间2课时教学目的1.对网站及网页有一定的认识，激发学生学习网页设计的兴趣2.了解网页中包含的基本元素3.了解Web的一些基本术语教学重难点认识网页与网站，了解其中的基本术语教学过程1.网页实例展示2.分析网页设计的基本流程和网页元素3.Web的特点和结构介绍授课内容1.网页中常包含的元素：文本、图像、动画、声音、视频2.什么是？WorldWideWeb，简称为Web（万维网）。是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。（企业内部网）的信息系统。3.的特点分布式的信息资源；统一的用户界面；支持各种信息资源和各种媒体的演播；广泛的用途。4.是成千上万个网站连结而成的页面式网络信息系统。是采用“客户机/服务器”（C/S）结构。5.静态网页和动态网页静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改的网页，通常用HTML语言编写其代码，保存为.htm或.html文件。动态网页是在发送到浏览器之前由应用程序服务器修改的网页。动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写，保存为.asp文件，也称为Web应用程序。授课题目1.4HTML基础授课时间4课时教学目的1.了解HTML文档的基本结构2.掌握各种标记的结构、作用及书写方法教学重难点重点：各种标记的应用难点：表格标记教学过程1.概念讲解2.实例操作4授课内容一、什么是HTML？超文本标记语言（HTML，HyperTextMarkupLanguage）是用于设计网页源文件（网页文档）的语言。每一个页面的代码保存为一个网页源文件（.htm或.html文件）。HTML包括一些定义页面内容和格式的符号，称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。二、什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。1.HTML文档的结构标记【例1】2.格式标记（1）p…/p（段落标记）用来创建一个段落，在此标记之间的文本将按照段落的格式显示。（2）br（换行标记）（3）blockquote…/blockquote（两边缩进标记）在此标记之间的文本将按照两边缩进的方式显示。（4）dl/dldt/dtdd/dd（列表标记）【例2】（5）ol/olul/ulli/li（有数字或圆点的列表标记）【例3】（6）div/div（分段标记）3.文本标记（1）h1/h1……h6/h6（六级标题标记）h1/h1是最大的标题，h6/h6则是最小的标题。（2）b/bi/iu/u（字体标记）（3）em/emstrong/strong（强调加重标记）（4）font/font（字体的大小颜色标记）【例4】font/font可以指定输出文本的字体大小、颜色，它主要两个属性size和color。4.链接标记【例5】（1）ahref=地址…/a（超链接标记）链接对象为文本时（例：ahref=百度/a）链接对象为图像时，需使用imgsrc=标记指定图像。（例：ahref==d:\pic1.gif/a）href的值也可以是mailto:形式，即发送E-Mail形式。5语法为：ahref=mailto:E-Mail地址/a具有target属性，用来指明显示的目标窗口。（2）aname=标签名/a（标签标记）——建立锚点5.图像标记和多媒体标记（1）图像标记：imgsrc=”图像文件名”【例6】（2）多媒体标记【例7】直接将音乐或影像嵌入网页，使用embed标记embedsrc=”名称”width=”宽度”height=”高度”autostart=”true”loop=”次数”/播放网页背景音乐,使用bgsound标记bgsoundsrc=”音乐文件名”loop=”次数”/6.表格标记（用于制作表格或网页结构）【例8】（1）table/table（创建一个表格）（2）tr/tr和td/td（创建表格中的每一行和每一格）（3）th/th（创建表格头）7.表单标记（用于制作对话框）【例9】8.其他常用标记【例10】（1）空格标记 （2）自动切换标记meta——可使网页显示几秒种后，自动切换到另一网页。metahttp-equiv=”refresh”content=”秒数;URL=文件名称或网址”（3）水平线标记hr（4）滚动的文本标签marqueemarqueedirection=”方向”behavior=”方式”loop=”次数”scrollamount=”速度”scrolldelay=”延时”Width=n%onMouseOver=this.stop()onMouseOut=this.start()/marquee6第4章DreamweaverCS3入门本章包括7节内容，其中4.3插入表格和4.4插入多媒体对象是本章的重点内容。本章理论授课有6个课时。授课题目4.1文本及排版授课时间1课时教学目的1.熟悉Dreamweaver的界面2.掌握在Dreamweaver中文本的插入方法3.能够熟练使用属性面板设置文本格式教学重难点重点：文本的插入和格式设置难点：1.站点的建立与管理2.属性面板的应用教学过程1.安装Dreamweaver，软件介绍2.软件界面讲解3.创建与管理站点4.实例分析5.结合HTML标记知识，介绍文本的插入与格式设置方法6.文本格式化的实例讲解授课内容一、Dreamweaver界面介绍、站点管理Dreamweaver主要由菜单栏、工具栏、制作窗口、属性面板以及右侧的一些面板组成。要使用此软件制作网页，第一步、也是最关键的一步就是创建站点。【演示站点的创建与管理过程】二、插入文本1.插入文本的方法直接输入法；复制粘贴法；导入已有Word文档2.插入特殊符号三、格式化文本【例1】1.设置字符格式使用属性面板，选择字体、设置文字的大小及颜色2.使用段落和标题属性面板中的“格式”下拉列表框段落——p标签的默认格式标题——h1、h2…h6标签3.对齐文本“属性面板”“对齐方式”（右对齐、居中、左对齐、两端对齐）4.缩进与扩展——使得内容在blockquote/blockquote对标签之间5.首行缩进7四、创建项目列表【例2】1.项目列表（几何符号来表示其列表关系）2.有序项目列表（编号列表）3.嵌套项目列表（列表显示不同级别的文本内容）——配合使用缩进与扩展按钮授课题目4.2设置文件头和网页属性授课时间1课时教学目的1.了解网页的编码方式2.掌握添加网页关键字和设置网页刷新的方法教学重难点重点：理解网页编码的含义难点：插入meta对象的方法教学过程1.讲解网页文件头设置的意义及方法2.实例演示授课内容选择菜单“查看”“文件头内容”1.设置网页的编码UTF-8是一种被广泛应用的编码，致力将全球语言纳入统一的编码；GB2312是简体中文编码。2.设定文档标题——等同于在title/title之间添加标题3.设置网页的刷新4.添加关键字——协助网络索引擎寻找网页5.插入meta对象（记录有关当前页面的信息）设置刷新代码：metahttp-equiv=Refreshcontent=5;URL=1font.html/设置网页编码：metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/授课题目4.3插入表格授课时间2课时教学目的1.掌握表格的制作与编辑方法2.能够熟练应用表格布局页面教学重难点重点：表格的制作与编辑难点：使用表格进行页面布局教学过程1.制作与编辑表格的操作演示2.综合实例讲解授课内容一、制作表格【例1】1.插入表格设置表格的行数和列数设置表格的宽度，单位有像素、百分比两种8设置表格边框，边框若为0则不显示边框，在设计页面中以虚线表示单元格边距：单元格边框与内容之间的距离单元格间距：单元格与单元格间的距离值带有页眉的单元格为th，文本被加粗并居中2.制作嵌套表格在表格中再插入新的表格，在页面布局中特别常用二、编辑表格【例2】1.选择表格2.选择行列选择可以直接运用鼠标点击进行选取，也可以点击标记来选取3.选定单元格（按住键盘的Ctrl键，可选择多个不相邻的单元格）4.合并与拆分单元格→使用属性面板5.插入行列插入单行/列：右键“表格”→插入行/列（插在上或前）插入多行/列：右键“表格”→“插入行或列”6.删除行列7.隐藏单元格之间的分隔线【例3】（1）控制单元格边框的显示（参数rules取值）cols——只显示单元格列边框rows——只显示单元格行边框none——不显示单元格边框all——显示所有单元格边框（2）控制表格外边框的显示（参数frame取值）vsides——只显示表格左右边框hsides——只显示表格上下边框lhs——只显示表格左边框rh