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