《HTML+CSS网页设计与布局》教案Word格式文档下载.docx
《《HTML+CSS网页设计与布局》教案Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《《HTML+CSS网页设计与布局》教案Word格式文档下载.docx(32页珍藏版)》请在冰豆网上搜索。
![《HTML+CSS网页设计与布局》教案Word格式文档下载.docx](https://file1.bdocx.com/fileroot1/2022-12/8/206108a0-d007-4891-928d-7b546111cf50/206108a0-d007-4891-928d-7b546111cf501.gif)
(2)遵循Web标准
(3)运用形式美法则
5、网页设计流程:
(1)手绘效果图:
确定网页主题内容和风格
(2)设计效果图:
搜集、整合设计所需素材
(3)版面编辑:
网页的制作与实现
(4)网页美化:
动画设计,网页测试和发布
6、网页设计的主要软件:
(1)Photoshop
(2)Dweamveawer
(3)Flash
(4)Firworks
7、HTML基础知识:
(1)HTML概念:
HyperTextMarkupLanguage超文本标识语言;
(2)HTML文档的编写方法:
用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成;
(3)网页文件命名:
首页文件名默认为:
index.htm或index.html;
(4)HTML文件结构:
<
HTML>
HEAD>
title>
<
/title>
/HEAD>
BODY>
HTML文件的正文
/BODY>
/HTML>
(5)用编辑器手工编写第一张网页;
8、学生实训及辅导;
9、Dreamweaver软件界面介绍:
(1)软件面板组成及基本操作方法
(2)软件首选参数设置
10、Dreamweaver站点创建:
站点->
新建站点->
设置站点名称->
设置站点默认图像文件夹。
11、学生实训操作:
Dreamweaver站点创建与设置;
12、Dreamweaver创建第一个网页:
(1)名称:
index.html
(2)设置标题、输入文本、输入特殊字符
(3)页面属性设置
(4)预览网页
13、学生实训及辅导;
14、HTML常用标记:
(1)标题标记:
h#>
主题文字<
/h#>
(2)段落标记:
p>
这里表示段落<
/p>
(3)换行与注释:
br>
、<
!
--这里放注释-->
(4)粗体与斜体:
b>
粗体<
/b>
i>
斜体<
/i>
(5)删除线与下划线:
s>
删除线<
/s>
u>
下划线<
/u>
(6)上标与下标:
sup>
上标<
/sup>
sub>
下标<
/sub>
15、学生实训及辅导;
16、字体标记:
(1)字体大小:
fontsize="
1"
>
字体大小<
/font>
(2)字体颜色:
fontcolor="
"
字体颜色<
(3)设置标题字体:
(4)物理字体:
B>
…<
/B>
,将字符设置成粗体。
I>
/I>
,将字符设置成斜体。
U>
/U>
,给字符增加下划线。
S>
/S>
,给字符增加删除线。
TT>
/TT>
,将字符设置成打字机字体。
<
SUP>
/SUP>
,将字符设置成上标字体。
SUB>
/SUB>
,将字符设置成下标字体。
(5)逻辑字体:
EM>
/EM>
强调文字。
STRONG>
/STRONG>
字体加重。
CODE>
/CODE>
显示编程代码。
SAMP>
/SAMP>
显示示例文字。
KBD>
/KBD>
显示键盘按键文字。
SMALL>
/SMALL>
缩小文字。
BIG>
/BIG>
放大文字。
17、字体标记实例讲解;
18、学生实训及辅导;
四、课外作业
第3章上机实践。
五、课堂小结
本次课主要内容:
1、网页设计基础知识;
2、Dreamweaver基本使用方法;
3、HTML基础知识及常用标记;
约15分钟
约35分钟
约20分钟
约30分钟
约40分钟
学生理解
学生熟记
学生实践
总结
后记
文字布局
插入图像
超级链接
3)使学生熟练掌握HTML常用标记的基本使用方法;
4)使学生掌握HTML常用标记各种属性的含义和设置方法。
3)掌握各种HTML常用标记的基本使用方法;
4)熟记各种HTML常用标记的含义。
六、引入
3、回顾上周所学内容:
上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作,重点介绍了HTML基础知识及常用标记;
4、提出问题:
网页中文字如何布局?
如何在网页中插入图像?
如何运用超级链接?
七、告知学生课堂任务
本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。
八、逐步演示讲解分析教学内容
19、换行控制:
文字一<
、文字二<
br/>
20、不换行控制:
nobr>
/nobr>
21、文字对齐:
align="
#"
center>
居中<
/center>
22、设置段落:
段落一<
段落二<
23、学生实训及辅导;
24、上周课外作业点评;
25、无序列表:
ul>
li>
表项一<
/li>
表项…<
/ul>
26、有序列表:
ol>
/ol>
27、欲格式化文本:
pre>
文字<
/pre>
xmp>
文本<
/xmp>
28、计算机输出格式:
code>
代码样式小型固定宽度字体显示的文本<
/code>
kbd>
代码样式固定宽度字体渲染<
/kbd>
tt>
代码样式固定宽度字体渲染文本<
/tt>
var>
代码样式斜体字渲染<
/var>
29、学生实训及辅导;
30、在网页中插入图像:
imgsrc="
cn.jpg"
31、图像无法显示时的提示信息:
alt="
风景"
32、控制图像的大小:
width="
400px"
height="
300px"
33、设置边框:
border="
0px"
34、图像的链接:
ahref="
/a>
35、学生实训及辅导;
36、图像映射图:
map>
/map>
37、文本与图像对齐:
align="
middle"
38、学生实训及辅导;
39、最简单的文字超链:
文字链接<
40、超链网页的打开方式:
_blank、_parent、_self、_top
41、链接的注释:
title="
网易网站"
>
163网站<
42、设置图片链接:
43、设置锚点:
aname="
锚点名"
文章中的文字<
44、邮箱地址链接:
mailto:
leiningcn@"
作者的邮箱<
45、相对路径:
相对路径是指这个文件在所在的位置与其他文件或文件夹的关系;
46、绝对路径:
HTML绝对路径(absolutepath)指带域名的文件的完整路径。
47、学生实训及辅导;
九、课外作业
第6章上机实践。
一十、课堂小结
1、HTML文字布局;
2、HTML插入图像;
3、HTML超级链接。
约10分钟
表单的使用
插入表格
5)使学生熟练掌握HTML常用标记的基本使用方法;
6)使学生掌握HTML常用标记各种属性的含义和设置方法。
5)掌握各种HTML常用标记的基本使用方法;
6)熟记各种HTML常用标记的含义。
一十一、引入
5、回顾上周所学内容:
上周主要介绍了HTML文字布局和插入图像的基本方法,重点介绍了超级链接的标记应用;
6、提出问题:
什么是表单?
常见的表单有哪些?
如何在网页中使用表格?
一十二、告知学生课堂任务
本次课所学习的主要内容是HTML表单和表格的标记应用。
一十三、逐步演示讲解分析教学内容
48、表单基本语法:
form>
/form>
、属性action和method
49、文本框:
inputtype="
text"
50、密码框:
password"
51、单选框:
radio"
52、复选框:
checkbox"
53、按钮设置:
submit"
value="
按钮提交"
54、学生实训及辅导;
55、上周课外作业点评;
56、下拉表:
select>
—设置下拉表选项-->
option>
选项一<
/option>
选项二<
optionselected>
选项三<
/select>
绝对路径
57、文本域:
textarea>
—文本域内容-->
/textarea>
58、表单应用实例讲解;
59、学生实训及辅导;
60、表格基本语法:
table>
/table>
tr>
标签对表示表行
th>
标签对表示表头
td>
标签对表示表元
61、跨多行表元:
Rowspan
62、跨多列表元:
colspan
63、表格内设置文字对齐:
对齐语法用align表示,后面接的值是left、center和right,分别代表向左、居中和向右对齐复选框
64、表格在网页中对齐:
tablealign=#>
;
65、学生实训及辅导;
66、表格应用实例讲解;
67、学生实训及辅导;
一十四、课外作业
第8章上机实践。
一十五、课堂小结
1、表单的使用;
2、插入表格;
3、表格应用实例;
网页框架
对象移动属性
多媒体对象应用
7)使学生熟练掌握HTML常用标记的基本使用方法;
8)使学生掌握HTML常用标记各种属性的含义和设置方法。
7)掌握各种HTML常用标记的基本使用方法;
8)熟记各种HTML常用标记的含义。
一十六、引入
7、回顾上周所学内容:
上周主要介绍了HTML表单和表格的标记应用方法,重点介绍了表单的应用实例;
8、提出问题:
框架网页如何创建?
如何使网页中的对象移动?
如何在网页中插入Flash、影片、声音?
一十七、告知学生课堂任务
本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。
一十八、逐步演示讲解分析教学内容
68、框架的基本语法:
frameset>
/frameset>
frame>
/frame>
framesetcols="
25%,50%,25%"
framesrc="
69、框架垂直分栏:
垂直分栏是在<
中用cols表示跨多列表元,colspan
70、框架水平分栏:
水平分栏的语法用rows表示
71、设置不可调节框架大小:
noresize
72、学生实训及辅导;
73、上周课外作业点评;
74、浏览器不支持框架:
noframes>
/noframes>
75、设置框架边框:
framesetframeborder=#>
76、设置滚动条:
设置滚动条在是<
里面,用scrolling属性
77、导航框架:
导航框架是在网页框架的<
中加入name属性,表示该<
的名称,然后通过用<
a>
标记的链接,并用target的属性值等于<
的名称;
78、内联框架:
内联框架存在<
body>
/body>
的单个HTML文件中,可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容,叫做浮动框架也称内联框架;
79、学生实训及辅导;
80、框架应用实例讲解;
81、学生实训及辅导;
82、移动属性基本语法:
marquee>
要移动的对象<
/marquee>
83、文字的移动设置:
marqueedirection=#>
84、图片移动的设置:
仙境.gif"
85、文本移动的方向:
marqueedirection=up>
向上移动<
86、文本的滚动循环;
87、文本的移动速度:
scrollamount设置移动的速度
88、学生实训及辅导;
89、网页多媒体的基本语法:
embedsrc=urlloop="
true|false"
90、隐藏面板的设置;
91、对齐方式:
align=top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom
92、学生实训及辅导;
93、移动对象应用实例讲解;
94、多媒体对象应用实例讲解;
95、学生实训及辅导;
一十九、课外作业
第11章上机实践。
二十、课堂小结
1、网页框架;
2、对象移动属性;
3、多媒体对象应用。
CSS基础知识
CSS字体设置
9)使学生熟练掌握CSS常用样式的创建方法;
10)使学生掌握CSS常用样式各种属性的含义和设置方法。
9)掌握各种CSS常用样式的基本使用方法;
10)熟记各种CSS常用样式的含义。
二十一、引入
9、回顾上周所学内容:
上周主要介绍了HTML网页框架和多媒体对象标记,重点介绍了HTML对象移动属性设置方法;
10、提出问题:
什么是CSS?
CSS有什么用?
如何创建和使用CSS?
二十二、告知学生课堂任务
本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧。
二十三、逐步演示讲解分析教学内容
96、CSS相关基础知识;
97、CSS文件链接方式:
(1)内联定义:
内联定义即是在对象的标记内,使用对象的style属性定义适用其的样式表属性。
链入内部CSS:
styletype="
text/css"
/*这里写CSS内容*/<
/style>
(2)链接外部CSS:
linktype="
rel="
stylesheet"
src="
style.css"
98、CSS在浏览器兼容性:
现在浏览器市场的主流浏览器主要是InternetExplorer(简称IE)和MozillaFirefox(简称FF),网页中的CSS因两个浏览器支持不同,所以对同一代码会显示不同的效果,那么为了达到网页的风格,有时要注意哪个浏览器要写的CSS属性支持如何。
如果某一属性只有一个浏览器支持,那么另一浏览器对这属性代码就不起作用。
99、CSS选择符:
CSS选择符就是CSS样式的名字,选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号,CSS选择符只能以字母开头,选择符在CSS中可分成多种,在本小节中只介绍常用的CSS选择符:
HTML标签选择符、ID选择符和CLASS(类选择符)选择符。
100、CSS伪类和伪元素:
伪类:
伪类选择符是基于一组预定义性质的选择符,HTML元素可以占有这些预定义性质。
实际上这些性质与class属性的功能是相同的,因此在CSS术语中,它们被称作伪类。
在对应这些伪类的标记中,不存在真正的class属性,相反,它们代表应用到这些元素的某些方面,或者是相对于该元素的浏览器用户界面的状态。
101、CSS常用单位:
em:
(em,元素的字体的高度)。
ex:
(x-height,字母"
x"
的高度)。
px:
(像素,相对于屏幕的分辨率)。
绝对长度单位:
in:
(英寸,1英寸=2.54厘米)。
cm:
(厘米,1厘米=10毫米)。
mm:
(毫米,1米=1000毫米)。
pt:
(点,1点=1/72英寸)。
pc:
(帕,1帕=12点)。
102、上周课外作业点评;
103、学生实训及辅导;
104、字体和字体颜色:
font:
font-style||font-variant||font-weight||font-size||line-height||font-family
105、字体大小:
Font-size,后面可接的参数值有:
xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length
106、字体重量:
Font-weight:
normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
107、行距:
line-height:
#;
108、字体类型:
Font-family:
fontname;
109、行距:
110、间距与间隔:
word-spacing:
normal|长度单位、letter-spacing:
normal|length
111、字体应用实例讲解;
112、学生实训及辅导;
二十四、课外作业
第16章上机实践。
二十五、课堂小结
1、CSS基础知识;
2、CSS文件链接方式;
3、CSS字体设置。
约60分钟
约50分钟
约80分钟
CSS文本设置
CSS背景设置
对象尺寸设置
11)使学生熟练掌握CSS常用样式的创建方法;
12)使学生掌握CSS常