《网站优化与开发》教案Word文件下载.docx

《网站优化与开发》教案Word文件下载.docx

《《网站优化与开发》教案Word文件下载.docx》由会员分享，可在线阅读，更多相关《《网站优化与开发》教案Word文件下载.docx（71页珍藏版）》请在冰豆网上搜索。

1、外边距与内边距属性

1、边框属性

复习串讲

9

1、定位属性

1、列表属性

10

1、光标属性

2、滤镜属性

1、WEB标准与CSS布局

2、DIV+CSS布局

11

1、使用CSS设计网站导航栏

1、使用CSS设计表单样式

12

1、字体及段落样式设计

1、使用CSS设计图片样式

13

1、使用CSS控制链接样式

1、JavaScript简介

14

1、JavaScript基本语法

1、JavaScript的事件

15

1、JavaScript内部对象

复习知识点串讲

讲授

综合作业

1.第一次课教学设计：

XHTMLCSS基础知识与体验

1-1教案头

课次名称：

DIV+CSS+JavaScript

授课班级

2011级多媒体技术

上课地点

机房

教学目标

能力目标

知识目标

1.能看懂Doctype和Head区代码含义；

2.能给HTML标签添加CSS样式

1.了解XHTML和CSS基础知识；

2.理解CSS基本思想与格式

2.熟悉在HTML中引入CSS的方式；

学生任务

任务1：

在页面中引入CSS样式；

任务2：

编写第一个HTML+CSS页面；

资料

参考教材：

网上相关教程。

资料：

◆图书馆相关书籍；

◆练习所需要的素材及源文件；

◆网上其它材料。

1-2教学设计

步骤

教学内容

教学方法手段

学生活动

时间分配

告知

1.本门课程的课程标准、授课计划及考核标准；

2.职业素质训导（纪律、座姿、课前准备工作及课后整理工作）

3.三大约定：

（1）上课不迟到早退，有事请假。

（2）不在教室内吃零食。

（3）上课不睡觉，不玩游戏，未经同意不上网。

4.本次课基本教学内容及成果展示

讲授法、演示法;

多媒体广播、网络

听讲、观看相关材料，授受并理解本单元项目的内容。

10分钟

一、XHTML和CSS基础知识

1.关于HTML和XHTML

HTML和XHTML都是由W3C组织（全球万维网联盟）制定的，它们是同一种标签语言的不同阶段。

HTML标准较宽松，易混乱，不符合标准化的发展趋势；

XHTML是HTML的“严谨版”，对格式要求更规范。

主要区别：

（1）在XHTML中标记名称和属性名称必须小写；

（2）在XHTML中标记必须严格嵌套；

（3）在XHTML中标记必须封闭；

（4）在XHTML中空元素的标记也必须封闭；

（5）在XHTML中属性值用双引号括起来；

（6）在XHTML中属性值必须用完整形式；

2.文档类型

因为存在着HTML和XHTML的区别，所以在创建文件之初就应该选择对应的文档类型。

现在一般使用XHTML文档类型，包括“严格类型”和“过渡（transitional）类型”两种，其中“过渡类型”能兼容以前版本定义而在新版本已经废弃的标签和属性，一般建议使用“过渡类型”。

<

!

DOCTYPEhtmlPUBLIC"

-//W3C//DTDXHTML1.0Transitional//EN"

"

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

以上语句声明了使用过渡类型文档。

3.语言编码

metahttp-equiv="

Content-Type"

content="

text/html;

charset=gb2312"

/>

它标示文档的语言编码，这里的gb2312告诉浏览器，本文档采用简体中文gb2312编码；

还有一种常用的编码是UTF-8编码，它是国际通用的编码。

不管采用哪种编码，页面包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码

4.HTML标签（标记）

（X）html是一种标签语言，标签在页面中都必须结束。

成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。

成对的标签：

head>

{...}<

/head>

body>

/body>

div>

/div>

span>

/span>

p>

/p>

......

单一的标签：

imgsrc="

"

br/>

.......

按xhtml规范，标签必须用小写。

5.CSS基本思想和格式

CSS全称是CascadingStyleSheet，层叠样式表。

它是一种用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS出现的根本原因，就是解决HTML中内容与表现代码混杂在一起的情况，使HTML内容与表现形式分开来。

（X）HTML与CSS的关系就是“内容结构”与“表现形式”的关系，由（X）HTML确定网页的结构内容，由CSS来决定页面的表现形式。

h2{

font-family:

宋体;

font-size:

10pt;

color:

red;

}

CSS的基本思想就是首先指定对什么“对象”进行设置，然后指定对此对象的那个方面的“属性”进行设置，最后给出该设置的“值”。

的怪CSS样式表由3个基本部分组成，即：

对象（标签名称）、属性和属性值。

6.初试牛刀-Hello，Class

htmlxmlns="

//www.w3.org/1999/xhtml"

charset=utf-8"

title>

HelloClass<

/title>

styletype=”text/css”>

p{

color:

blue;

font-family:

Arial,宋体,sans-serif；

font-size:

/style>

h2>

Hello,Class!

/h2>

Welcometomyclass<

Ihopeyousucceed<

/html>

7.基本CSS选择器

CSS样式表由3个基本部分组成，即：

其中“对象”指定了对哪些网页元素进行设置，我们称它为“选择器”。

通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。

选择器的类型：

（1）标签选择器

用HTML标签的名称作为CSS选择器的名称，即可声明所有该HTML标签的样式。

如：

（2）类别选择器

自定义选择器名称，选择器前缀用点号，在标签内使用时用”class=xxx”。

.red{

20px;

但在HTML标签内要声明使用了哪种类别选择器，如

pclass=”red”>

class选择器<

可以将一个类别选择器用于多个标签内，也可在同一标签内使用多个类别选择器，用空格分开即可。

（3）ID选择器

用法与类别选择器相同，但只能在HTML页面中使用一次。

#green{

#009900;

30px;

pid=”green”>

ID选择器<

ID选择器前缀用#，在标签内使用时用”id=xxx”

8.在HTML中引入CSS的方法

（1）行内样式

直接对HTML标签使用style属性，如：

pstyle=”color:

#990000;

12pt;

font-style:

italic;

”>

正文内容<

只对当前标签有效，维护成本高，网页容易过胖，不建议使用。

（2）内嵌式

将CSS样式写在<

与<

之间，用<

style>

标签进行声明。

CSS代码集中在同一个区域，方便维护，但只对本页面有效。

（3）外部样式表

同一个网站有多个页面，如果要使用相同的CSS样式，可以选择使用外部样式表，即将CSS样式存储在一个单独的文件中，使其与HTML页面内容完全分离。

有导入式和链接式两种。

链接式：

将CSS样式（格式与内嵌式一样，不需要<

标签）编写在一新文件内，后缀名为.css。

在HTML页面内用

linkhref=”sheet1.css”type=”text/css”rel=”stylesheet”>

链接进来，其中sheet1.css即为CSS样式表文件的名称（含路径）。

导入式

在HTML页面内用<

导入：

@importurl（sheet1.css）

（4）各种形式的优先级

行内式>

嵌入式>

外部样式

建议只使用1-2种引入CSS的方式，以利用维护。

讲授、演示

1.听讲、理解所学内容；

二、动手体验CSS

20分钟

1.总结本次课内容

演示法

欣赏与记录

3分钟

2.第二次课教学设计：

Div+CSS布局入门

2-1教案头

1.会使用Div+CSS设计单列和多列布局；

2.会在Dreamweaver中输入与编辑脚本

1.理解CSS的盒子模型；

2.掌握DIV标签用法

页面一列布局；

页面二列和三列布局；

2-2教学设计

1.本次课基本教学内容及成果展示

讲授法、演示法

听讲、观看相关材料

5分钟

一、CSS的盒子模型

css盒模型是DIV排版的核心所在。

传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。

这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器。

CSS盒子模式属性名：

内容（content）、填充（padding）、边框（border）、边界（margin）。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度。

二、一列布局

一列布局包含以下几种形式：

●一列固定宽度

●一列固定宽度居中

●一列自适应宽度

●一列自适应宽度居中

●一列二至多块布局

三、二列布局

1.两列自适应宽度

因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现（float:

left;

）。

2.两列固定宽度

3.两列固定宽度居中

四、xhtml的块级元素和内联元素

块级元素：

就是一个方块，像段落一样，默认占据一行出现；

内联元素：

又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落<

、标题<

h1>

...、列表,<

ul>

ol>

li>

、表格<

table>

、表单<

form>

、DIV<

和BODY<

等元素。

而内联元素则如:

表单元素<

input>

、超级链接<

a>

、图像<

img>

、<

........块级无素的显著特点是：

每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。

而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。

而不是每次都愚蠢的另起一行。

也就是说，可以用css的display:

inline将块级元素改变为内联元素，也可以用display:

block将内联元素改变为块元素。

五、float属性

float让元素浮动，在CSS中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素；

且要指明一个宽度，否则它会尽可能地窄；

另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

回顾第一个案例

六、三列布局

1.自适应宽度

2.固定宽度

3.第三次课教学设计：

常用网页布局形式

3-1教案头

1.会使用Div+CSS进行常用网页布局；

2.理解DIV的嵌套；

3.理解DIV的浮动与自适应高度

设计1+1+（1+3）+1的布局形式

设计1+1+（1+2+1）+1的布局形式；

3-2教学设计

时间

一、任务1：

divclass="

all"

header"

header<

menu"

menu<

content"

side1"

侧栏

main1"

主栏

footer"

footer<

CSS:

body{margin:

0}

.all{width:

1004px;

margin:

auto;

.header{height:

120px;

background-color:

#999;

margin-bottom:

5px;

.menu{height:

50px;

#06F;

.footer{height:

80px;

#666;

.content{margin-bottom:

overflow:

background:

url（bg.gif）00repeat-y;

#cff;

}

.side1{width:

200px;

float:

.main1{width:

799px;

float:

right;

padding-left:

.content2{margin-bottom:

url（bg.gif）right0repeat-y;

.side2{width:

.main2{width:

.content3{margin-bottom:

overflow:

.side3{width:

#CF6}

.side4{width:

background-color:

.main3{width:

604px;

二、任务2：

设计1+1+（1+2+1）+1的布局形式

content3"

side3"

左侧栏

side4"

右侧栏

main3"

三、其它常见布局形式

四、标准布局常见问题及解决办法

3像素问题及解决办法

当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，请参考例29、31的解决方法

上边容器浮动后，下边的容器跟着浮动，造成页面错乱

如以上例子中的footer必须要单独占一行，但当sidebar浮动后，content的高度小于sidebar的高度时，footer也跟着浮动到sidebar右侧了，造成页面错乱。

解决办法是在maincontent和footer之间插入一个容器，设置样式clear:

both;

height:

0;

1px;

line-height:

0px;

用clear:

both清除，即可使页面正常

当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？

这种情况可在父窗口加上overflow:

zoom:

1;

这两个样式属性，overflow:

是让父容器来自适应内部容器的高度，zoom:

是为了兼容IE6而使用的CSSHACK。

通不过W3C的验证，这也是遗憾的一点，幸好IE支持<

--[ifIE]>

这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<

中，这样应该可以通过验证了

相对定位与绝对定位

规划页面时，许多时候需要用到相对定位或绝对定位，这里边有个技巧，掌握后有些地方就不用繁冗的js了。

就是当父容器使用相对定位后，此时子元素再使用绝对定位，位置是相对于父元素。

如果父元素没有定位，那么子元素的绝对定位是相对于浏览器

IE6双倍边距bug

当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。

如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:

inline;

的样式，这样就可避免双倍边距bug

4.第四次课教学设计：

CSS导航菜单设计

4-1教案头

DIV+CSS网页布局

1.会使用CSS设计纵向和横向的导航菜单；

1.纵向列表

2.标签的默认样式

3.css派生选择器

4.css选择器的分组

5.纵向二级列表

6.相对定位和绝对定位

设计纵向导航菜单

设计横向导航菜单

4-2教学设计

一、纵向列表

纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网。

1.使用<

和<

标签

2.定义<

样式：

.sideul{list-style:

none;

margin:

padding:

3.定义body全局样式：

line-height:

1.5;

Verdana,"

宋体"

Geneva,sans-serif;

12px;

4.定义<

标签样式：

.sideulli{background-color:

#eee;

08px;

height:

25px;

border-bottom:

#CCC1pxso