网页设计基础教案Word文件下载.docx

网页设计基础教案Word文件下载.docx

《网页设计基础教案Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计基础教案Word文件下载.docx（18页珍藏版）》请在冰点文库上搜索。

CSS使用方法与选择器，网站管理与发布，浏览器对象模型BOM，DOM，事件处理模型，正则表达式

教材、

参考书

教材:

1.《Web前端设计与开发-HTML+CSS++HTML5+jQuery》，QST青软实训，清华大学出版社，2016

2.《Web前端开发实例教程-HTML.CSS.》，占东明，人民邮电出版社，2016

其他教学资源：

万维网联盟发布的相关标准.（http:

//www.w3c.org）

总学时第1学时—第2学时

授课内容

网页制作基础

教学目的

和要求

了解网页制作基本步骤，掌握网页的构成等基本知识，了解HTML和CSS的标准化过程，熟悉网页制作开发环境。

重点

难点

网页制作基本步骤，网页相关的基本知识，HTML和CSS的标准化过程

安

排

一、网页相关的基本知识

1.网页的元素：

文本、图像、链接、声音、电影或动态图像。

2.网页的表现形式：

浏览器。

常见浏览器介绍：

InternetExplorer；

NetScapeNavigator网景浏览器；

火狐（Firefox）浏览器；

Opera浏览器；

其它IE核心浏览器。

3.网页的地址（网址）：

URL

超文本传输协议统一资源定位符将从因特网获取信息的四个基本元素包括在一个简单的地址中：

传送协议；

服务器；

端口号；

路径。

4.网站：

网页的集合。

衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站服务内容等几方面考虑。

5.网站的地址：

域名/IP地址。

二、网页制作的基本步骤

收集和整理资料；

制作网页；

测试站点；

发布站点；

站点维护和更新。

三、HTML和CSS

1.HTML标准的版本历史

2.CSS的定义及发展历史

3.XHTML与HTML

四、开发环境介绍

Dreamweaver8和文本编辑器（EditPlus等）

思考题、

课后作业

练习使用Dreamweaver。

主要

参考资料

万维网联盟网站：

www.w3c.org

课后自我

总结分析

学生对本课程的熟悉程度差距较大，日后的教学安排应更具有针对性。

备注

总学时第3学时—第4学时

网页中的文字

CSS网页样式设置

掌握HTML中的文字标记；

掌握CSS的三种使用方法；

熟悉常用的CSS属性。

HTML中的文字标记；

CSS的使用方法；

CSS选择器

一、HTML文本标记

段落标记：

<

p>

标题标记：

H1>

-<

H7>

换行标记：

br>

列表标记：

ol>

（有序）,<

ul>

（无序）,<

li>

（列表项）

二、CSS的使用方法；

1.行内样式<

pstyle="

CSS样式"

>

缺点：

容易增加网页体积，不推荐使用。

优点：

使用简单。

2.嵌入式样式：

嵌入在<

head>

与<

/head>

之间

<

styletype="

text/css"

!

--

样式列表；

-->

/style>

3.链接式：

放置在<

linkhref="

1.css"

type="

rel="

stylesheet"

4.导入式：

style>

@importurl（sheet1.css）;

三、CSS选择器

集体声明；

嵌套选择器；

在文档中使用CSS。

应提供CSS中的属性的中英文对照表方便学生学习。

总学时第5学时—第6学时

网页中的图片

建立超链接

掌握HTML中的图片标记和超链接标记。

HTML中的图片标记和超链接标记。

一、HTML图片标记

1.网页中的图片格式

2.插入图片：

img>

3.<

属性的使用：

src必不可少；

alt替换文本。

二、HTML超链接标记

超链接标记：

锚<

a>

1.文字超链接

2.图片超链接：

图片超链接会自动为图片添加边框。

3.链接目标：

target

4.特点目标的链接：

#

三、与超链接有关的CSS属性

a:

link:

链接样式

hover:

鼠标指向链接时的样式

active:

激活链接的样式

visited:

访问过链接的样式

使用图片标记插入图片；

建立文本超链接。

总学时第7学时—第8学时

表格

掌握HTML中的表格标记的多种使用方法。

复杂表格的创建方法，表格布局方法。

一、使用HTML建立表格

table>

caption>

表格标题<

/caption>

tr>

td>

/td>

/tr>

/table>

二、使用CSS建立多种表格样式

重点：

表格边框的多种样式

难点：

表格外框与单元格边框之间的关系

三、布局单元格和表格

使用属性：

width,height,rowspan,colspan

使用表格布局网页。

总学时第9学时—第12学时

网站制作综合实例

掌握网站制作的完整过程。

网站制作的完整过程。

通过为一个虚拟公司创建完整网站，从网站构思到设计，再到页面编码等操作，深入掌握网站制作流程以及一些网页制作中的常用技巧。

步骤一：

网站策划

步骤二：

网页整体风格设计

步骤三；

创建站点

步骤四：

相关图片设计与绘制

步骤五：

制作首页并填充内容

步骤六：

添加CSS样式

步骤七：

使用模板生成其他页面

步骤八；

创建链接并添加链接属性

步骤九：

检查站点

思考题；

如何优化网页以提高访问量？

总学时第13学时—第14学时

JavaScript概述

JavaScript基础

JavaScript面向对象编程

了解JavaScript的作用；

掌握JavaScript的语法基础；

熟悉JavaScript中面向对象编程的语言特性与实现方法。

JavaScript的语法；

JavaScript的面向对象的语言特性与实现方法。

一、JavaScript概述

1.JavaScript的发展历史。

2.JavaScript可以做什么与不能做什么。

3.JavaScript的开发工具。

二、JavaScript语法基础

1.JavaScript语法基础：

语句，注释，变量，运算符，程序流程控制。

2.JavaScript内置对象

三、JavaScript面向对象编程

1.JavaScript面向对象语言特性

2.JavaScript面向对象编程实现

课后作业：

P28页习题2-1，2-2；

P39页习题3-1，3-3

总学时第15学时—第16学时

JavaScript正则表达式

了解正则表达式的起源与功能；

掌握构建正则表达式的技术；

掌握简单模式的正则表达式中的元素；

熟悉复杂模式的正则表达式。

构建正则表达式的技术

一、正则表达式的简介

二、构建简单的正则表达式

三、JavaScript中的正则表达式的使用（重点）

1.定义正则表达式

2.使用String对象

3.RegExp和正则表达式对象

四、简单模式（重点，难点）

1.元字符

2.特殊字符

3.括号表达式

4.预定义类

5.限定符

6.贪婪模式与非贪婪模式

五、复杂模式

1.选择和分组

2.非捕获性分组

3.前瞻

4.定位符

JavaScript中的正则表达式的使用

总学时第17学时—第18学时

JavaScript字符串处理

了解JavaScript中的字符串处理函数；

掌握字符串处理方法。

字符串处理函数；

掌握常见的字符串处理技术。

一、JavaScript字符串处理函数（重点）

1.访问字符串函数：

length属性，fromCharCode（），toString（），valueOf（），charAt（），charCodeAt（）。

2.查找字符串函数：

indexOf（），lastIndexOf（）。

3.比较字符串函数：

localeCompare（）。

4.修改字符串函数：

concat（），slice（），substring（），toLowerCase（），toLocaleLowerCase（），toUpperCase（），toLocaleUpperCase（）。

5.正则表达式匹配与替换：

match（），replace（），search（），split（）。

二、字符串处理应用示例

1.计算字符串长度

2.字符串验证

3.字符串填充

4.字符串连接

5.首字母大写

6.屏蔽非法用词

7.删除HTML标签

JavaScript字符串处理函数练习

总学时第19学时—第20学时

JavaScript浏览器对象模型

了解浏览器对象；

掌握JavaScript中控制浏览器对象的常用技术。

JavaScript中控制浏览器对象的常用技术。

一、浏览器对象（重点）

1.window对象：

调整窗口大小，打开新窗口，系统对话框，状态栏控制，定时操作。

（重点）

2.document对象

3.location对象（难点）

4.navigator对象

5.screen对象

6.history对象

二、JavaScript浏览器编程示例

1.控制浏览器窗口

2.延时生效按钮

3.页面间参数传递

4.检测浏览器及操作系统类型

浏览器对象模型练习

总学时第21学时—第24学时

JavaScriptDOM基础

了解DOM标准；

熟悉DOM的使用方法；

掌握常见的DOM处理技术。

DOM的使用方法。

一、DOM标准

1.DOM简介

2.DOM标准接口及使用方法

二、使用DOM（重点、难点）

1.访问指定节点

2.访问元素属性

3.访问相关节点

4.检查节点类型

5.创建节点

6.操作节点

三、DOM应用示例

1.文本框自动获得焦点

2.表单输入验证

3.双向选择列表框

4.关键词链接

5.可排序表格

练习DOM的使用方法

总学时第25学时—第26学时

JavaScript事件处理模型

了解事件流；

熟悉事件处理函数和对象；

掌握常见的事件处理技术。

事件流；

常见的事件处理技术。

一、事件流

1.DOM事件流模型：

捕获，目标，冒泡

2.IE事件流模型

二、事件处理函数

1.DOM事件处理函数

2.IE事件处理函数

三、事件对象

DOM标准和IE都提供了事件对象，其中包含的事件信息有：

引发事件的对象，事件发生时鼠标的信息，事件发生时键盘的信息。

1.DOM事件对象：

Event接口、UIeven、MouseEvent。

2.IE事件对象：

windows.event

四、事件处理应用示例

1.商品评级功能

2.网络相册

3.模拟拖放效果

思考：

从事件流模型的角度比较DOM和IE在事件处理方面的区别，并以实例验证。

总学时第27学时—第30学时

JavaScript控制页面样式

掌握JavaScript中的样式编程技术。

JavaScript中的样式编程技术。

一、JavaScript样式编程基础（重点）

1.访问样式：

内联样式，最终样式

2.访问样式表：

修改CSS规则；

切换样式表。

二、JavaScript样式编程示例（难点）

1.网页换肤

通用的样式表切换功能。

使用cookie保存用户选择的样式表。

解决IE中可能出现的样式切换不渲染问题。

2.图片倒影特效

3.圆角边框

练习JavaScript中的样式编程技术

总学时第31学时—第32学时

JavaScript与服务器通信

JavaScript与插件

了解传统的无刷新页面实现技术；

了解Ajax技术；

掌握Javaapplet的创建和使用方法；

掌握ActiveX控件的创建和使用方法。

无刷新页面实现技术；

Javaapplet的创建和使用方法；

ActiveX控件的创建和使用方法。

一、传统无刷新页面实现技术

1.方法一：

隐藏框架

2.方法二：

远程脚本

二、Ajax技术

1.Ajax技术原理

2.Ajax应用示例

三、Javaapplet

1.创建applet

2.使用applet

四、ActiveX控件

1.创建ActiveX控件

2.使用ActiveX控件

思考题：

隐藏框架技术的实现原理。