网页设计与制作教案.docx
- 文档编号:10286119
- 上传时间:2023-05-24
- 格式:DOCX
- 页数:40
- 大小:103.74KB
网页设计与制作教案.docx
《网页设计与制作教案.docx》由会员分享,可在线阅读,更多相关《网页设计与制作教案.docx(40页珍藏版)》请在冰点文库上搜索。
网页设计与制作教案
中国人民公安大学
教案
课程:
多媒体技术应用教师:
王任华
性质:
公共必修课单位:
信息安全工程系
学时:
52学生:
07级成教
学期:
07-08学年上教材:
《网页设计三合一实用教程》
教务处制
教案序号:
01
授课时间
第7周周一3、4节
授课学时
2
教学内容
第一部分:
网页网站设计基础及开发环境
Ch1综述
本课程主要从网络和网页制作的基本知识出发,讲解网站概念和网站设计基础知识。
并介绍“网页三剑客”——Dreamweaver、Fireworks和Flash的MX2004版软件,它们将是后续章节所讲述的主要软件环境。
教学目的与要求
学生通过学习本讲内容,从网站及网页设计开发人员的角度了解网站建设的环境要件和基本设计方法,进一步明确该课程要完成的学习任务和能够达到的网页网站设计水平。
要求学生在已有的关于网络理论和操作等基础知识(如了解网络协议、Internet中的WWW服务及Web网页浏览功能)的基础之上进行学习。
教学重点
与难点
教学重点:
网站建设基本环境及设计。
教学难点:
网站规划
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.Web网页设计的基本环境有哪些?
2.站点创建的策划流程有哪些内容?
3.网页制作工具有哪些?
参考资料:
网络教程
课后小结
讲授内容与课堂组织
综述
⏹关于课程描述
⏹课程涉及内容
⏹学习目标
第1章网页设计基础及开发环境
1.1Internet与网页
1.1.1什么是Internet
1.1.2Web网页解析
1.2网站的设计与规划
1.2.1网站的设计
1.2.2网站的规划
1.2.3网站信息的收集
1.2.4建设网站所需的工具
1.3HTML语言
1.3.1认识HTML
1.3.2HTML的基本语法
1.3.3HTML的发展
1.4MacromediaStudioMX2004的安装与启动
1.4.1Macromedia程序组
1.4.2三剑客的安装与启动
1、基本概念
1)什么是WEB?
♦Web的全称是WORLDWIDEWeb,是Internet发展的产物。
♦Web是运行在Internet之上的所有HTTP服务器软件和它们所管理的对象(及其作用)的集合。
其中的“对象”实际上包括了WebPage/Web文档和程序,程序可以动态生成Web文档。
♦另一种定义:
Web是一种体系结构,是一种基于Internet、采用Internet协议的体系结构。
它包含如下几层意思:
Web是Internet提供的一种服务。
Web是存储在全世界Internet计算机中、数量巨大的文档的集合。
Web上的海量信息是由彼此关联的文档组成的。
这些文档称为主页(HomePage)或页面(Page).。
Web的内容保存在Web服务器中,用户可通过浏览器(Browser)访问Web站点。
2)什么是WEB文档?
❑Web文档是指可以被Web服务器传递的信息。
❑Web文档内容包括传统的Text、Image,也可以是Sound、Movie等多种数据类型。
❑超链接/锚点是Web文档的一个主要特征。
3).Web中的服务器/客户端模式
❑Web的B/S结构,其逻辑层次为“客户-WEB-服务器”结构。
❑客户由TCP/IP与WEB浏览器组成,WEB服务器由HTTP加后台数据库组成。
❑客户的浏览器和服务器均使用TCP/IP的HTTP协议建立连接。
❑客户端和服务器端都是相对的概念。
客户的浏览器和服务器均使用TCP/IP的HTTP协议建立连接,利于客户与服务器之间的超媒体传输。
所有的客户及WEB服务器统一使用TCP/IP,统一分配IP,使得客户和服务器的逻辑连接变成简单的点对点连接。
URL实现了单一文档在因特网主机中的定位。
客户请求通过WEB服务器CGI(公用网关接口)可以容易地与后台的各种类型数据接口。
4).什么是网站?
❑Web是众多服务器和客户端通过Internet形成的分布式的信息网络,网站即是众多服务器中的一个来提供信息。
❑根据服务内容的各有侧重,不一定是一台机器。
5).几种典型的网站
⏹大众类型:
新浪,网易,搜户等
⏹媒体站:
人民日报,中央电视台
⏹娱乐站:
联众游戏
⏹搜索引擎
⏹商业网站当当书店
⏹政府网站海淀区人民政府
2、基本环境
⏹网络操作系统:
⏹winNT/2000server,linux,unix
⏹支撑工具:
即支持不同平台的web服务器软件,
⏹WindowsNT/2000/XP集成的IIS(InternetInformationServer)
⏹Windows98下的PWS
⏹Linux下的Apachewebserver
1.2网站建设
1.常用技术:
静态网页,动态网页技术
HTMLDHTMLjavaappletjavascriptActiveXCGIASPPHPJSPFlashVRMLWAPJ2EE
HTML(HypertextMark-upLanguage)-超文本标记语言
DHTML(DynamicHTML)-动态HTML
CGI(CommonGatewayInterface)-公用网关接口
IIS(InternetInformationServer)-IIS服务管理器
ASP(ActiveServerPage)-动态网页技术标准,微软推出
PHP(PersonalHomePage)-跨平台服务器脚本语言,是Unix/Linux服务器首选的技术
JSP(JavaServerPage)-SUN公司提出,多家公司参与制定的动态网页技术标准
2.常见的功能:
留言,论坛,聊天室,计数器,电子邮件,搜索引擎
3.架设虚拟网站:
为什么虚拟。
静态IP。
申请空间申请域名
注意事项:
容量,速度,提供的动态方案,相关服务,FTP维护吗?
简单方式:
申请主页空间
4.网站策划设计
⏹主题,名称,服务对象,内容收集,整理,风格创意
⏹构成布局
⏹数据库技术sqlservermysql
⏹制作工具:
三剑客
⏹发布与维护
本讲为教材第1章的部分内容,有扩展。
由基本概念和基础知识引入网页及网站设计的总体思想。
结合站点网页的实例讲解概念,可以使学生容易接受理解。
教案序号:
02
授课时间
第7周周三3、4节
授课学时
2
教学内容
HTML语言
(一)
1、HTML语言初步
介绍HTML语言基础知识,包括HTML的基本概念、语法、HTML文档的组成、主要标记及其属性,还包括网页基本元素信息设计。
教学目的与要求
学生通过学习本讲内容,对网页基本代码HTML知识有比较清楚的认识和掌握,会使用HTML代码实现基本网页的创建,并能够实用标记及属性修改现有的网页内容。
要求学生使用Windows系统提供的基本编辑器软件如“记事本”来编写HTML代码,并在IE浏览器中测试页面效果。
教学重点
与难点
教学重点:
HTML语言的特点和代码编写方法。
教学难点:
关于标记及其属性所体现的网页结构特征。
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.HTML语言与高级程序设计语言的区别是什么?
2.HTML语言中超链接的类型有哪几种?
如何实现?
3.HTML与XML语言有哪些主要区别?
参考资料:
《HTML参考大全》(第三版),清华大学出版社
课后小结
讲授内容与课堂组织
HTML语言
⏹1、HTML语言初步
(1)HTML基本概念——HypertextMarkupLanguage超文本标记语言
(2)HTML名词解释
——超文本文件、网页、网站、浏览器
(3)HTML文件构成
——文件头和文件体
(4)HTML语法
●元素是网页的组成部分,元素由起始标记,内容,结束标记构成。
●属性是元素的特征,由属性名和属性值构成,每个元素有特定的属性。
●“属性名=属性值”每个属性用空格隔开,写在起结标记里面。
●大部分元素有几个属性,当我们不设置元素的属性时,以属性的默认值显示。
(5)应用HTML创建基本网页
1、熟悉标记:
、
、
等。
2、创建超链接,介绍标记;介绍网页超链接类型
3、插入图像、声音等媒体
浏览一个网页实例,查看源代码,打开记事本编辑器编写简单网页代码,然后在IE浏览器窗口浏览网页页面效果。
在最简单的编辑环境中书写HTML源码文件,可以使学生对HTML语言的应用有更清晰的认识。
结合元素的实例分析HTML的语法规则和使用方法。
概述HTML语言的发展。
使学生了解新的网页代码标准的使用。
教案序号:
03
授课时间
第8周周一3、4节
授课学时
2
教学内容
HTML语言
(二)
2、HTML语言进阶
介绍使用HTML表格(Table)、列表(OL/UL)和表单(Form)的方法。
还补充介绍HTML的一些特殊标记的使用。
教学目的与要求
学生通过学习本讲内容,进一步掌握HTML标记的应用。
了解如何对网页的文件头信息进行加载,以及使用特殊标记来增加网页的功能效果。
要求学生在上一堂课已掌握的知识基础上,继续深入了解HTML的内容,并结合HTML相关手册自学,最终全面掌握该语言的应用,这将为后面学习脚本语言打下好的基础。
教学重点
与难点
教学重点:
使用HTML设计网页表格、有序列表、无序列表、表单等内容。
教学难点:
创建HTML文档的文件头信息,实现添加作者信息、关键字信息、网页超时信息、替换网页等功能。
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.
…… | ——表示一个单元格
实例分析:
上网方式
上网时间
(小时)
上网数量
拨号上网
300
200
专线上网
600
1000
(3)表单的使用
标记:
………….
作用:
form用来定义一个表单
input用来定义一个表单域
(4)其他标记举例
⏹滚动字幕
⏹标记:
⏹属性解释:
⏹direction=#设置滚动方向#的取值有left,right,up,down
bgcolor=#设置滚动区域的背景色
height=n设置滚动区域的高度
width=n设置滚动区域的宽度
网页中表单的实际应用需要有动态编程手段作支持,将表单与后台数据库进行数据连接和访问。
教案序号:
04
授课时间
第8周周三3、4节
授课学时
2
教学内容
第2章DreamweaverMX2004入门知识
介绍Dreamweaver主要功能及新增功能、工作界面、文件操作。
教学目的与要求
学生通过学习本讲内容,了解可视化网页编辑器Dreamweaver的基本环境和主窗口工具的使用方法,文档的创建、保存,使用Dreamweaver创建和管理一个基本站点。
要求学生掌握创建基本网页的途径,包括插入文本、图像等基本信息。
掌握如何使用Dreamweaver创建并管理站点及站点内文档,以及熟悉几种编辑视图环境。
教学重点
与难点
教学重点:
了解Dreamweaver的主界面环境,掌握网页文档的创建、编辑和保存操作。
教学难点:
浮动面板的主要功能。
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.Dreamweaver中文档的视图方式有哪几种?
2.如何实现对Dreamweaver中打开的文档进行测试预览?
3.Dreamweaver中“文件”面板的主要功能是什么?
课后小结
讲授内容与课堂组织
第二部分:
DreamweaverMX2004应用
⏹Ch2Dreamweaver基础知识
2.1主要功能及新增功能介绍
DreamweaverMX2004是一个可视化网页编辑软件,具有简洁高效的设计、开发界面;新式的页面布局和设计环境;强大和开放的编码环境。
2.2工作环境介绍
用户界面环境——选择用户工作布局;
DreamweaverMX2004工作界面:
●标题栏、菜单栏、起始页
●工具栏:
“插入”栏,“标准”栏,“文档”栏
●文档的“视图”窗口:
代码视图、设计视图、代码和设计视图;
●属性面板
●状态栏
●面板和面板组
2.3Dreamweaver的文件操作
包括文档的创建、打开和保存等操作
关于“DreamweaverMX2004应用”所介绍的内容与教材配套进行讲解。
教案序号:
05
授课时间
第9周周一3、4节
授课学时
2
教学内容
第3章站点的创建与管理
3.1建立站点
3.2站点的编辑与管理
3.3站点地图
教学目的与要求
学生通过学习本讲内容,了解使用Dreamweaver创建和管理一个基本站点。
要求学生掌握如何使用Dreamweaver创建并管理站点及站点内文档,以及熟悉几种编辑视图环境。
教学重点
与难点
教学重点:
站点创建。
教学难点:
站点管理。
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.Dreamweaver中文档的视图方式有哪几种?
2.如何实现对Dreamweaver中打开的文档进行测试预览?
王宇编著.《梦幻劲爆网页——中文版FlashMX/DreamweaverMX/FireworksMX三合一教程》,中国电力出版社
课后小结
讲授内容与课堂组织
第二部分:
DreamweaverMX2004应用
⏹Ch3建立与管理站点
在DreamweaverMX2004中不仅可以创建单独的文档,作为一个站点的创建和管理工具,它还可以创建完整的Web站点,以取得链接文档和资源的共享。
站点通常包含两部分:
本地计算机(本地站点)上的一组文件和远程Web服务器上的一个位置(远程站点)。
3.1实例引导——新建一个自己的网站空间
3.2建立站点
定义站点
站点信息发布
3.3站点的编辑与管理
打开本地站点
编辑站点内文件夹与文件
重新编辑站点
删除站点
3.4站点地图
3.2建立站点
1、定义站点
实现方法有两种,一种是通过定义站点向导来实现,另一种是直接定义站点。
2、站点信息的上传与下载
1.将本地站点文件上传到局域网服务器上
2.用FTP将本地站点发送到远程Web服务器上
3.下载(获取)站点文件
3.3编辑与管理站点
编辑与管理工作包括:
如打开、编辑、删除和复制;设置远程站点;站点文件的上传与下载;站点地图的应用等。
3.4站点地图
站点地图用树形结构方式显示站点文件的链接关系。
在站点地图中可以添加、修改、删除文件间的链接关系。
Dreamweaver不仅可以创建单独的文档,作为一个站点的创建和管理工具,它还可以创建完整的Web站点,以取得链接文档和资源的共享。
分别演示两种创建站点的方式,注意区分异同。
教案序号:
06
授课时间
第9周周三3、4节
授课学时
2
教学内容
第二部分:
DreamweaverMX2004应用
(二)
Ch4静态页面设置
教学目的与要求
学生通过学习本讲内容,基本掌握如何对网页进行布局设计,应用表格布局、“布局”模式的设计方法排版页面,还需要掌握插入页面元素的类型和操作等。
要求学生会利用页面布局设计不同的页面效果,会使用超链接实现网页间元素的超链接效果。
教学重点
与难点
教学重点:
实现页面布局的操作。
教学难点:
不同类型的超链接实现。
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.使用布局模式设计页面的特点是什么?
2.如何在网页中直接插入背景音乐?
图片可以作为超链接对象吗?
参考资料:
《网页制作MX中文版》,中国铁道出版社,2003
课后小结
讲授内容与课堂组织
第二部分:
DreamweaverMX2004应用
Ch4Dreamweaver静态页面设置
4.1页面的属性设置
网页标题信息的设置可以通过使用工具栏设置标题信息。
在网页的“页面属性”对话框中,用户可以针对实际需要来设置网页的外观、超链接、标题,及跟踪图像等项目。
4.2表格布局与布局模式
页面的布局在网页设计的基本工作中显得尤为重要,页面布局的好坏直接影响到整体的页面效果和页面质量。
在Dreamweaver中,可以采用多种方法对页面进行布局,包括:
“表格”布局;“布局模式”布局;“框架”布局;“CSS样式”布局
4.3创建超链接
1)文件的路径
绝对路径、根目录相对路径、文档相对路径
2)创建超链接的方法
3)超链接的分类
4)创建导航条
4.4插入页面元素
使用DreamweaverMX2004中的工具可以向Web页添加各种页面元素,这些元素包括文本、图像、颜色、影片、声音和其它媒体形式等。
教案序号:
07
授课时间
第10周周一3、4节
授课学时
2
教学内容
第二部分:
DreamweaverMX2004应用(三)
Ch5层与行为的应用
教学目的与要求
学生通过学习本讲内容,进一步掌握Dreamweaver提供的其他网页设计功能,包括层的应用和行为的应用。
要求学生熟悉使用层进行页面布局;并结合行为面板的操作设计出灵活的页面风格,实现动态页面功能。
教学重点
与难点
教学重点:
层与行为的应用。
教学难点:
评价不同布局方法的优缺点。
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.表格和层之间能够相互转换吗?
如何操作?
参考资料:
光盘资料,电子文档
课后小结
讲授内容与课堂组织
Ch5层与行为的应用
5.1层与嵌套层的创建
1.层的基本操作
创建层、创建嵌套层、层的属性面板、层的管理面板。
2.利用层排版
使用层进行页面布局,可以达到丰富页面的效果。
对层的基本操作包括选择层、移动层、复制层、删除层、调整层大小和对齐层等。
3.行为与行为面板
DreamweaverMX2004中的行为将JavaScript代码放置在文档中,允许访问者与Web页进行交互,从而以多种方式更改页面或引起某些任务的执行。
行为是事件和由该事件触发的动作的组合。
5.2系统内嵌行为的具体应用与网页设计实现
通过“行为”面板中弹出菜单命令,可以设置实现多种动态网页效果。
关于“框架”布局;“CSS样式”布局两种方法将在下一讲中介绍。
演示菜单命令,逐一实现相关动态效果,操作时注意及时保存更新文档,并刷新IE浏览器窗口查看效果。
注意提高显示事件的浏览器版本。
教案序号:
08
授课时间
第10周周三3、4节
授课学时
2
教学内容
第二部分:
DreamweaverMX2004应用(四)
Ch6CSS样式和框架
教学目的与要求
学生通过学习本讲内容,进一步掌握Dreamweaver提供的其他网页设计功能,包括CSS样式的应用和框架的应用。
要求学生熟悉使用CSS样式和样式表来布局页面,对页面元素进行统一的格式化处理,这也是设计网页的一个重要环节。
掌握已经介绍的4种页面布局方法,能够评价其各自的优缺点。
教学重点
与难点
教学重点:
CSS样式和CSS样式表的应用。
教学难点:
评价不同布局方法的优缺点。
教学方法
与手段
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多媒体课件和多媒体设备辅助教学。
思考题与
参考书
1.对文档添加样式的方法有哪几种?
各有什么优缺点?
2.能够将框架集保存为模板吗?
参考资料:
电子文档
课后小结
讲授内容与课堂组织
第二部分:
DreamweaverMX2004应用
Ch6CSS样式的应用
1、概念
CSS-CascadingStyleSheet(层叠样式表)
2、历史:
1996年W3C标准化组织推出了CSS1规范
目前W3C已经制定了CSS3标准
3、目的意义:
网页设计者使用样式表来控制页面的格式。
为特定的网页元素或者一系列网页元素创建表现样式
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 教案