《HTML+CSS 网页设计与布局》课程教案授课教师：授课班级：地点：周课时： 5 课时网页设计基础知识章节内容教学目标重点难点教学Dreamweaver软件介绍及其基础操作HTML 基础知识及常用标记1)使学生了解网页设计的相关基础知识；2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。
1)了解网页设计相关概念和网页的类型；2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。
课堂讲授、案例讲解与指导方法教学计算机机房环境时间教学过程及内容提要备注分配一、引入约 15 分钟教1 、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内学容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种过学习氛围，尊重同学，互帮互学，真正达到学以致用；程2 、提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS设这两个概念吗计约 35 分钟学生理解3、二、告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；三、逐步演示讲解分析教学内容1、网站和网页的区别：2、（ 1 ）网页是Internet基本元素；3、（ 2 ）网站由网页组成；4、静态网页和动态网页：5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。
6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。
真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
也就是说，它是返回到了客户端上的网页。
例如网页文件是以ASP 、PHP 、JSP、ASPX 为结尾就是动态的网页了。
约 20 分钟学生熟记7、静态网页的特点：8、（ 1 ）内容相对稳定，容易被搜索引擎检索到；9、（ 2 ）没有数据库支持，在网站制作和维护方面工作量大；10 、（3）交互性差，在功能方面有很大的限制。
11 、动态网页的特点：12 、（1）以数据库技术为基础，可大大降低网站维护的工作量；13 、（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；14 、（3）不利于使用搜索引擎进行网站推广。
15 、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；约30 分钟学生实践约20 分钟16 、网页设计原则：17 、（1）了解客户需求18 、（2）遵循Web标准约20 分钟学生实践约20 分钟19 、（3）运用形式美法则20 、网页设计流程：21 、（1）手绘效果图：确定网页主题内容和风格22 、（2）设计效果图：搜集、整合设计所需素材23 、（3）版面编辑：网页的制作与实现24 、（4）网页美化：动画设计，网页测试和发布25 、网页设计的主要软件：26 、（1）Photoshop27 、（2）Dweamveawer28 、（3）Flash29 、（4）Firworks 约30 分钟学生实践约20 分钟约30 分钟学生实践约20 分钟30 、HTML 基础知识：31 、（1）HTML概念：Hyper Text Markup Language超文本标识语言；32 、（2）HTML文档的编写方法：用记事本手工直接编写、使用约 20分钟约 40分钟学生实践可视化 HTML 编辑器 Dreamweaver、由Web服务器动态生成；33 、（3）网页文件命名：首页文件名默认为：或；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)名称：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 ）字体大小： <font size="1">字体大小 </font>67 、（2 ）字体色： <font color="">字体色 </font>68 、（3 ）置字体： <h#> 主文字 </h#>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 基知及常用；后记《H TML+CSS 网页设计与布局》课程教案授课教师：授课班级：地点：周课时： 5 课时文字布局章节内容教学目标重点难点教学插入图像超级链接3)使学生熟练掌握 HTML 常用标记的基本使用方法；4)使学生掌握 HTML 常用标记各种属性的含义和设置方法。
3)掌握各种 HTML 常用标记的基本使用方法；4)熟记各种 HTML 常用标记的含义。
课堂讲授、案例讲解与指导方法教学计算机机房环境时间教学过程及内容提要备注八、引入教分配约 10 分钟4 、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础学知识及 Dreamweaver软件基础操作，重点介绍了HTML基础知过识及常用标记；程5 、提出问题：网页中文字如何布局如何在网页中插入图像如何运用超设级链接计约 30 分钟学生理解6、九、告知学生课堂任务本次所学的主要内容是HTML 文字布局和插入像、超接的用。
约30 分钟约40 分钟约20 分钟十、逐步演示讲解分析教学内容87 、行控制：文字一<p> 、文字二 <br />88 、不行控制： <nobr></nobr>89 、文字： align="#"、 <center>居中 </center>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>102 、</ol>103 、欲格式化文本： <pre>文字 </pre>、<xmp> 文本 </xmp> 104 、算机出格式：约20 分钟学生实践约30 分钟约30 分钟学生实践约20 分钟约30 分钟学生实践约30 分钟约 30 分钟学生实践105 、<code>代码样式小型固定宽度字体显示的文本</code>106 、<kbd>代码样式固定宽度字体渲染</kbd>总结107 、<tt> 代码样式固定宽度字体渲染文本</tt>108 、<var>代码样式斜体字渲染 </var>109 、学生实训及辅导；110 、在网页中插入图像：<img src="">111 、图像无法显示时的提示信息：<img src="" alt="风景 ">112 、控制图像的大小：113 、<img src=""alt="风景 "width="400px"height="300px">114 、设置边框：115 、<img src="" alt="风景" border="0px">116 、图像的链接：117 、<a href=""><img src=""></a>118 、学生实训及辅导；119 、图像映射图：<map></map>120 、文本与图像对齐：<img src="" align="middle">121 、学生实训及辅导；122 、最简单的文字超链：<a href=""> 文字链接 </a>123 、超链网页的打开方式：_blank 、 _parent 、 _self 、 _top124 、链接的注释：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）指带域名的文件的完整路径。