【Jsp精品源码栏目提醒】:网学会员为需要Jsp精品源码的朋友们搜集整理了网页设计与制作教案 - 其它资料相关资料,希望对各位网友有所帮助!
中国人民公安大学 教 案课程: 多媒体技术应用 教师: 王任华性质: 公共必修课 单位: 信息安全工程系学时: 52 学生: 07 级成教学期: 07-08 学年上 教材:《网页设计三合一实用教程》 教 务 处 制 教案序号:01授课时间 第 7 周 周一 3、4 节 授课学时 2 第一部分:网页网站设计基础及开发环境 Ch1 综述教学内容 本课程主要从网络和网页制作的基本知识出发, 讲解网站概念和网站 设计基础知识。
并介绍“网页三剑客”——Dreamweaver、Fireworks 和 Flash 的 MX 2004 版软件,它们将是后续章节所讲述的主要软件环境。
学生通过学习本讲内容,从网站及网页设计开发人员的角度了解网站 建设的环境要件和基本设计方法, 进一步明确该课程要完成的学习任务和教学目的 能够达到的网页网站设计水平。
要求学生在已有的关于网络理论和操作等基础知识(如了解网络协 与要求 议、Internet 中的 WWW 服务及 Web 网页浏览功能)的基础之上进行学习。
教学重点:网站建设基本环境及设计。
教学重点 教学难点:网站规划 与难点 采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多教学方法 媒体课件和多媒体设备辅助教学。
与手段 1. Web 网页设计的基本环境有哪些?思考题与 2. 站点创建的策划流程有哪些内容? 3. 网页制作工具有哪些? 参考书 参考资料:网络教程课后小结 -1- 网页设计与制作 07 级成教 讲 授 内 容 与 课 堂 组 织综述关于课程描述课程涉及内容学习目标第1章 网页设计基础及开发环境 本讲为教材第 1 章的部分内容,有扩 1.1 Internet与网页 展。
1.1.1 什么是Internet 1.1.2 Web网页解析 由基本概念和 1.2 网站的设计与规划 基础知识引入网页 1.2.1 网站的设计 及网站设计的总体 1.2.2 网站的规划 思想。
1.2.3 网站信息的收集 1.2.4 建设网站所需的工具 1.3 HTML语言 结合站点网页的实 1.3.1 认识HTML 例讲解概念,可以使 1.3.2 HTML的基本语法 学生容易接受理解。
1.3.3 HTML的发展 1.4 Macromedia Studio MX 2004的安装与启动 1.4.1 Macromedia 程序组 1.4.2 三剑客的安装与启动1、基本概念1)什么是WEB? Web的全称是WORLD WIDE Web,是Internet发展的产物。
Web是运行在Internet之上的所有HTTP服务器软件和它们所管理 的对象(及其作用)的集合。
其中的“对象”实际上包括了Web Page/Web文档和程序,程序可以动态生成Web文档。
另一种定义:Web是一种体系结构,是一种基于Internet、采用 Internet协议的体系结构。
它包含如下几层意思: Web 是Internet 提供的一种服务。
Web是存储在全世界Internet计算机中、数量巨大的文档的集合。
Web上的海量信息是由彼此关联的文档组成的。
这些文档称为主页(Home Page)或页面(Page).。
Web的内容保存在Web 服务器中,用户可通过浏览器(Browser)访问Web站点。
-2- 网页设计与制作 07 级成教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). 几种典型的网站 大众类型: 新浪,网易,搜户等 媒体站:人民日报,中央电视台 娱乐站:联众游戏 搜索引擎 http://www.google.com 商业网站 当当书店 http://www.dangdang.com 政府网站 海淀区人民政府 http://www.bjhd.gov.cn2、基本环境 网络操作系统: win NT/2000server ,linux , unix 支撑工具:即支持不同平台的web 服务器软件, Windows NT/2000/XP 集成的IIS Internet Information Server Windows 98 下的PWS Linux 下的Apache web server -3- 网页设计与制作 07 级成教1.2 网站建设1. 常用技术: 静态网页,动态网页技术 HTML DHTML java applet javascript ActiveXCGI ASP PHP
JSP Flash VRML WAP J2EEHTMLHypertext Mark-up Language-超文本标记语言DHTMLDynamic HTML-动态 HTMLCGI(Common Gateway Interface)-公用网关接口IISInternet Information Server-IIS 服务管理器ASP(Active Server Page)-动态网页技术标准,微软推出PHP(Personal Home Page)-跨平台服务器脚本语言,是 Unix/Linux 服务器首选的技术
JSP(Java Server Page)-SUN 公司提出,多家公司参与制定的动态网页技术标准2. 常见的功能: 留言,论坛,聊天室,计数器,电子邮件,搜索引擎3. 架设虚拟网站: 为什么虚拟。
静态 IP 。
申请空间 申请域名 注意事项: 容量,速度,提供的动态方案,相关服务,FTP 维护吗? 简单方式: 申请主页空间4.网站策划设计 主题,名称,服务对象,内容收集,整理,风格创意 构成布局 数据库技术 sql server my sql 制作工具: 三剑客 发布与维护 -4- 教案序号: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 参考大全》(第三版),清华大学出版社课后小结 -5- 网页设计与制作 07 级成教 讲 授 内 容 与 课 堂 组 织HTML 语言 浏览一个网页实1、 HTML 语言初步 例,查看源代码,打 ( 1 ) HTML 基 本 概 念 — — Hypertext Markup 开 记 事 本 编 辑 器 编 Language 超文本标记语言 写简单网页代码, 然 (2) HTML 名词解释 后在 IE 浏览器窗口 浏览网页页面效果。
——超文本文件、网页、网站、浏览器 (3) HTML 文件构成 在最简单的编辑 ——文件头和文件体 环境中书写 HTML 源 码文件,可以使学生 (4) HTML 语法 对 HTML 语言的应用 元素是网页的组成部分元素由起始标记内容 有更清晰的认识。
结束标记构成。
属性是元素的特征由属性名和属性值构成 每 结合元素的实例 分析 HTML 的语法规个元素有特定的属性。
则和使用方法。
“属性名属性值” 每个属性用空格隔开写在起结标记里面。
概述 HTML 语言 大部分元素有几个属性当我们不设置元素的属 的发展。
使学生了解性时,以属性的默认值显示。
新的网页代码标准 (5) 应用 HTML 创建基本网页 的使用。
1、熟悉标记:lttitlegt、ltbodygt、ltfontgt、ltpgt、ltbrgt、 lthrgt等。
2、创建超链接,介绍ltagt标记;介绍网页超链接类型 3、插入图像、声音等媒体 -6- 教案序号:03授课时间 第 8 周 周一 3、4 节 授课学时 2 HTML 语言(二) 2 、HTML 语言进阶教学内容 介绍使用 HTML 表格(Table)、列表(OL/UL)和表单(Form)的方 法。
还补充介绍 HTML 的一些特殊标记的使用。
学生通过学习本讲内容,进一步掌握 HTML 标记的应用。
了解如何 对网页的文件头信息进行加载,以及使用特殊标记来增加网页的功能效教学目的 果。
要求学生在上一堂课已掌握的知识基础上,继续深入了解 HTML 的 与要求 内容,并结合 HTML 相关手册自学,最终全面掌握该语言的应用,这将 为后面学习脚本语言打下好的基础。
教学重点:使用 HTML 设计网页表格、有序列表、无序列表、表单教学重点 等内容。
教学难点:创建 HTML 文档的文件头信息,实现添加作者信息、关 与难点 键字信息、网页超时信息、替换网页等功能。
采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多教学方法 媒体课件和多媒体设备辅助教学。
与手段 1. lttablegt标记的主要功能及运用方法是什么? 2. 在 HTML 文 档 中 , ltmetagt 标 记 的 输 写 位 置 应 该 在 哪 里 ?思考题与 HTTP-EQUIV ”Expires” 属性设定的含义是什么? 3. 如何设置有序列表与无序列表? 参考书 4. ltmarqueegt标记中哪个属性是用来改变队列移动方向的? 参考资料:网络教程课后小结 -7- 网页设计与制作 07 级成教 讲 授 内 容 与 课 堂 组 织HTML 语言2、 HTML 进阶(1) 列表的使用有序列表 ltOL type startngt ltLIgt This web site uses Active Server Pages. … lt/OLgt ltolgt用来定义一个有序列表 ltligt用来定义有序列表项无序列表的实例分析: 望月怀远 海上生明月,天涯共此时。
情人怨遥夜,竟夕起相思。
灭烛怜光满,披衣觉露滋。
不堪盈手赠,还寝梦佳期。
(2) 表格的使用作用:1,显示数据 2,设置页面布局表格的组成与标记的对应关系: table——表格;tr——行;td ——单元格标记:lttablegt lttrgt ——表示一行 lttdgt……lt/tdgt ——表示一个单元格 lt/trgt lt/tablegt实例分析:上网方式 上网时间 上网数量 (小时)拨号上网 300 200专线上网 600 1000 -8- 网页设计与制作 07 级成教 网页中表单的(3) 表单的使用 实际应用需要标记:ltform actionurl methodgt 有动态编程手 ltinput typegt 段作支持,将表 …………. 单与后台数据 lt/formgt 库进行数据连作用:form 用来定义一个表单 接和访问。
input 用来定义一个表单域(4) 其他标记举例滚动字幕标 记 : ltmarquee direction bgcolor heightnwidthngt..........lt/marqueegt属性解释: direction 设 置 滚 动 方 向 的 取 值 有leftrightupdown bgcolor 设置滚动区域的背景色 heightn 设置滚动区域的高度 widthn 设置滚动区域的宽度 -9- 网页设计与制作 07 级成教 教案序号:04授课时间 第 8 周 周三 3、4 节 授课学时 2 第2章 Dreamweaver MX 2004 入门知识 介绍 Dreamweaver 主要功能及新增功能、工作界面、文件操作。
教学内容 学生通过学习本讲内容,了解可视化网页编辑器 Dreamweaver 的基本 环境和主窗口工具的使用方法,文档的创建、保存,使用 Dreamweaver教学目的 创建和管理一个基本站点。
要求学生掌握创建基本网页的途径,包括插入文本、图像等基本信息。
与要求 掌握如何使用 Dreamweaver 创建并管理站点及站点内文档, 以及熟悉几种 编辑视图环境。
教学重点:了解 Dreamweaver 的主界面环境,掌握网页文档的创建、教学重点 编辑和保存操作。
教学难点:浮动面板的主要功能。
与难点 采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多教学方法 媒体课件和多媒体设备辅助教学。
与手段 1. Dreamweaver 中文档的视图方式有哪几种?思考题与 2. 如何实现对 Dreamweaver 中打开的文档进行测试预览? 3. Dreamweaver 中“文件”面板的主要功能是什么? 参考书课后小结 - 10 - 网页设计与制作 07 级成教 讲 授 内 容 与 课 堂 组 织第二部分:Dreamweaver MX 2004 应用Ch2 Dreamweaver 基础知识 关 于 2.1 主要功能及新增功能介绍 “Dreamweaver Dreamweaver MX 2004 是一个可视化网页编辑软件,具有简洁高效的设计、 MX 2004 应用”开发界面;新式的页面布局和设计环境;强大和开放的编码环境。
所介绍的内容 2.2 工作环境介绍 与教材配套进 用户界面环境——选择用户工作布局; 行讲解。
Dreamweaver MX 2004 工作界面: 标题栏、菜单栏、起始页 工具栏:“插入”栏,“标准”栏,“文档”栏 文档的“视图”窗口:代码视图、设计视图、代码和设计视图; 属性面板 状态栏 面板和面板组 2.3 Dreamweaver 的文件操作 包括文档的创建、打开和保存等操作 - 11 - 网页设计与制作 07 级成教 教案序号:05授课时间 第 9 周 周一 3、4 节 授课学时 2 第3章 站点的创建与管理 3.1 建立站点教学内容 3.2 站点的编辑与管理 3.3 站点地图 学生通过学习本讲内容,了解使用 Dreamweaver 创建和管理一个基本 站点。
教学目的 要求学生掌握如何使用 Dreamweaver 创建并管理站点及站点内文档, 以及熟悉几种编辑视图环境。
与要求 教学重点:站点创建。
教学重点 教学难点:站点管理。
与难点 采用课堂讲授与学生课下上机练习相结合的方法进行教与学,利用多教学方法 媒体课件和多媒体设备辅助教学。
与手段 1. Dreamweaver 中文档的视图方式有哪几种?思考题与 2. 如何实现对 Dreamweaver 中打开的文档进行测试预览? 王 宇 编 著 . 《 梦 幻 劲 爆 网 页 —— 中 文 版 Flash MX/Dreamweaver 参考书 MX/Fireworks MX 三合一教程》 ,中国电力出版社课后小结 - 12 - 网页设计与制作 07 级成教 讲 授 内 容 与 课 堂 组 织第二部分:Dreamweaver MX 2004 应用Ch3 建立与管理站点 .
上一篇:
网络运营的成本分析——兼谈网络运作基本常识
下一篇:
系统中主要发电机的电力系统稳定器