《HTML+CSS网页设计与布局》教案

（1）软件面板组成及基本操作方法
（2）软件首选参数设置
10、Dreamweaver站点创建：
站点->新建站点->设置站点名称->设置站点默认图像文件夹。
11、学生实训操作：Dreamweaver站点创建与设置；
12、Dreamweaver创建第一个网页：
（1)名称：index.html
（2)设置标题、输入文本、输入特殊字符
22、设置段落：<p>段落一</p>、<p>段落二</p>
23、学生实训及辅导；
24、上周课外作业点评；
25、无序列表：
<ul>
<li>表项一</li>
<li>表项…</li>
</ul>
26、有序列表：
<ol>
<li>表项一</li>
<li>表项…</li>
</ol>
27、欲格式化文本：<pre>文字</pre>、<xmp>文本</xmp>
<EM>…</EM>强调文字。
<STRONG>…</STRONG>字体加重。
<CODE>…</CODE>显示编程代码。
<SAMP>…</SAMP>显示示例文字。
<KBD>…</KBD>显示键盘按键文字。
<SMALL>…</SMALL>缩小文字。
<BIG>…</BIG>放大文字。
17、字体标记实例讲解；
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：5课时
章节
内容
网页设计基础知识
Dreamweaver软件介绍及其基础操作
HTML基础知识及常用标记
教学
目标
1)使学生了解网页设计的相关基础知识；
2)使学生熟悉Dreamweaver软件界面的基本操作方法。
重点
难点
1)了解网页设计相关概念和网页的类型；
64、表格在网页中对齐：<table align=#></table>；
65、学生实训及辅导；
66、表格应用实例讲解；
67、学生实训及辅导；
十四、课外作业
第8章上机实践。、表单的使用；
2、插入表格；
3、表格应用实例；
约10分钟
约30分钟
约40分钟
约30分钟
约20分钟
约20分钟
<B>…</B>，将字符设置成粗体。
<I>…</I>，将字符设置成斜体。
<U>…</U>，给字符增加下划线。
<S>…</S>，给字符增加删除线。
<TT>…</TT>，将字符设置成打字机字体。
<SUP>…</SUP>，将字符设置成上标字体。
<SUB>…</SUB>，将字符设置成下标字体。
（5）逻辑字体：
32、控制图像的大小：
<img src="cn.jpg" alt="风景" width="400px" height="300px">
33、设置边框：
<img src="cn.jpg" alt="风景" border="0px">
34、图像的链接：
<a href=""><img src="cn.jpg"></a>
（3）页面属性设置
（4）预览网页
13、学生实训及辅导；
14、HTML常用标记：
（1）标题标记：<h#>主题文字</h#>
（2）段落标记：<p>这里表示段落</p>
（3）换行与注释：<br>、<!--这里放注释-->
（4）粗体与斜体：<b>粗体</b>、<i>斜体</i>
（5）删除线与下划线：<s>删除线</s>、<u>下划线</u>
59、学生实训及辅导；
60、表格基本语法：
<table></table>
<tr>标签对表示表行
<th>标签对表示表头
<td>标签对表示表元
61、跨多行表元：Rowspan
62、跨多列表元：colspan
63、表格内设置文字对齐：
对齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐复选框
35、学生实训及辅导；
36、图像映射图：<map></map>
37、文本与图像对齐：<img src="cn.jpg" align="middle">
38、学生实训及辅导；
39、最简单的文字超链：<a href="">文字链接</a>
40、超链网页的打开方式：_blank、_parent、_self、_top
28、计算机输出格式：
<code>代码样式小型固定宽度字体显示的文本</code>
<kbd>代码样式固定宽度字体渲染</kbd>
<tt>代码样式固定宽度字体渲染文本</tt>
<var>代码样式斜体字渲染</var>
29、学生实训及辅导；
30、在网页中插入图像：<img src="cn.jpg">
31、图像无法显示时的提示信息：<img src="cn.jpg" alt="风景">
（6）上标与下标：^上标 _下标
15、学生实训及辅导；
16、字体标记：
（1）字体大小：<font size="1">字体大小</font>
（2）字体颜色：<font color="">字体颜色</font>
（3）设置标题字体：<h#>主题文字</h#>
（4）物理字体：
约10分钟
约30分钟
约30分钟
约40分钟
约20分钟
约20分钟
约30分钟
约30分钟
约20分钟
约30分钟
约30分钟
约30分钟
学生理解
学生实践
学生实践
学生实践
学生实践
总结
后记
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：5 课时
章节
内容
表单的使用
插入表格
教学
目标
5)使学生熟练掌握HTML常用标记的基本使用方法；
2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？
二、告知学生课堂任务
本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；
三、逐步演示讲解分析教学内容
1、网站和网页的区别：
（1）网页是Internet基本元素；
（2）网站由网页组成；
2、静态网页和动态网页：
45、相对路径：
相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；
46、绝对路径：
HTML绝对路径（absolute path）指带域名的文件的完整路径。
47、学生实训及辅导；
九、课外作业
第6章上机实践。
十、课堂小结
本次课主要内容：
1、HTML文字布局；
2、HTML插入图像；
3、HTML超级链接。
静态网页的特点：
（1）内容相对稳定，容易被搜索引擎检索到；
（2）没有数据库支持，在网站制作和维护方面工作量大；
（3）交互性差，在功能方面有很大的限制。
动态网页的特点：
（1）以数据库技术为基础，可大大降低网站维护的工作量；
（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；
（3）不利于使用搜索引擎进行网站推广。
静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。
动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。
18、学生实训及辅导；
四、课外作业
第3章上机实践。
五、课堂小结
本次课主要内容：
1、网页设计基础知识；
2、Dreamweaver基本使用方法；
3、HTML基础知识及常用标记；
约15分钟
约35分钟
约20分钟
约30分钟