78、<EM>…</EM>强调文字。
79、<STRONG>…</STRONG>字体加重。
80、<CODE>…</CODE>显示编程代码。
81、<SAMP>…</SAMP>显示示例文字。
82、<KBD>…</KBD>显示键盘按键文字。
83、<SMALL>…</SMALL>缩小文字。
84、<BIG>…</BIG>放大文字。
2)熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一、引入
1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；
146、<option>选项一</option>
147、<option>选项二</option>
148、<option selected>选项三</option>
149、</select>绝对路径
150、文本域：<textarea><!—文本域内容--></textarea>
151、表单应用实例讲解；
约20分钟
约20分钟
约40分钟
学生理解
学生熟记
学生实践
学生实践
学生实践
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：5 课时
章节
内容
文字布局
插入图像
超级链接
教学
目标
3)使学生熟练掌握HTML常用标记的基本使用方法；
4)使学生掌握HTML常用标记各种属性的含义和设置方法。
32、（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成；
33、（3）网页文件命名：首页文件名默认为：或；
34、（4）HTML文件结构：
35、<HTML>
36、<HEAD>
37、<title></title>
38、</HEAD>
152、学生实训及辅导；
153、表格基本语法：
154、<table></table>
155、<tr>标签对表示表行
156、<th>标签对表示表头
157、<td>标签对表示表元
158、跨多行表元：Rowspan
159、跨多列表元：colspan
160、表格内设置文字对齐：
161、对齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐复选框
90、设置段落：<p>段落一</p>、<p>段落二</p>
91、学生实训及辅导；
92、上周课外作业点评；
93、无序列表：
94、<ul>
95、<li>表项一</li>
96、<li>表项…</li>
97、</ul>
98、有序列表：
99、<ol>
100、<li>表项一</li>
101、<li>表项…</li>
71、<I>…</I>，将字符设置成斜体。
72、<U>…</U>，给字符增加下划线。
73、<S>…</S>，给字符增加删除线。
74、<TT>…</TT>，将字符设置成打字机字体。
75、<SUP>…</SUP>，将字符设置成上标字体。
76、<SUB>…</SUB>，将字符设置成下标字体。
77、（5）逻辑字体：
64、学生实训及辅导；
65、字体标记：
66、（1）字体大小：<font size="1">字体大小</font>
67、（2）字体颜色：<font color="">字体颜色</font>
68、（3）设置标题字体：<h#>主题文字</h#>
69、（4）物理字体：
70、<B>…</B>，将字符设置成粗体。
2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？
3、
二、告知学生课堂任务
本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；
三、逐步演示讲解分析教学内容
1、网站和网页的区别：
2、（1）网页是Internet基本元素；
3、（2）网站由网页组成；
109、学生实训及辅导；
110、在网页中插入图像：<img src="">
111、图像无法显示时的提示信息：<img src="" alt="风景">
112、控制图像的大小：
113、<img src="" alt="风景" width="400px" height="300px">
114、设置边框：
50、学生实训操作：Dreamweaver站点创建与设置；
51、Dreamweaver创建第一个网页：
52、（1)名称：
53、（2)设置标题、输入文本、输入特殊字符
54、（3）页面属性设置
55、（4）预览网页
56、学生实训及辅导；
57、HTML常用标记：
58、（1）标题标记：<h#>主题文字</h#>
121、学生实训及辅导；
122、最简单的文字超链：<a href="">文字链接</a>
123、超链网页的打开方式：_blank、_parent、_self、_top
124、链接的注释：
125、<a href="" title="网易网站" >163网站</a>
126、设置图片链接：<a href=""><img src=""></a>
127、设置锚点：<a name="锚点名">文章中的文字</a>
128、邮箱地址链接：
129、<a href="">作者的邮箱</a>
130、相对路径：
131、相对路径是指这Байду номын сангаас文件在所在的位置与其他文件或文件夹的关系；
132、绝对路径：
133、HTML绝对路径（absolute path）指带域名的文件的完整路径。
102、</ol>
103、欲格式化文本：<pre>文字</pre>、<xmp>文本</xmp>
104、计算机输出格式：
105、<code>代码样式小型固定宽度字体显示的文本</code>
106、<kbd>代码样式固定宽度字体渲染</kbd>
107、<tt>代码样式固定宽度字体渲染文本</tt>
108、<var>代码样式斜体字渲染</var>
39、<BODY>
40、HTML文件的正文
41、</BODY>
42、</HTML>
43、（5）用编辑器手工编写第一张网页；
44、学生实训及辅导；
45、Dreamweaver软件界面介绍：
46、（1）软件面板组成及基本操作方法
47、（2）软件首选参数设置
48、Dreamweaver站点创建：
49、站点->新建站点->设置站点名称->设置站点默认图像文件夹。
4、静态网页和动态网页：
5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。
6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
6)熟记各种HTML常用标记的含义。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一十五、引入
7、回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法，重点介绍了超级链接的标记应用；
8、提出问题：什么是表单？常见的表单有哪些？如何在网页中使用表格？
