网页设计与制作教案.docx

网页设计与制作教案.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、熟悉标记：