第01周—第1/25页《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时：  5 课时
章节内容网页设计基础知识
Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记
教学目标1)使学生了解网页设计的相关基础知识；
2)使学生熟悉Dreamweaver软件界面的基本操作方法。
重点难点1)了解网页设计相关概念和网页的类型；
2)熟练掌握Dreamweaver软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导教学
环境
计算机机房
教学过程及内容提要时间
分配
备注
教学过程
设计一、引入
1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内
html网页设计的标题
容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种
学习氛围，尊重同学，互帮互学，真正达到学以致用；
2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS
这两个概念吗？
二、告知学生课堂任务
本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软
件基础操作；
三、逐步演示讲解分析教学内容
1、网站和网页的区别：
（1）网页是Internet基本元素；
（2）网站由网页组成；
2、静态网页和动态网页：
静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态
网页的后缀名通常为
网页的后缀名通常为.htm
.htm
.htm、
、.html
.html、
、.shtml
.shtml、
、.xml
.xml。
。
动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，
在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢
了。真正的动态网页是指实际上并不是独立存在于服务器上的网页
文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，
它是返回到了客户端上的网页。例如网页文件是以ASP
ASP、
、PHP
PHP、
、JSP
JSP、
、
ASPX为结尾就是动态的网页了。
静态网页的特点：
（1）内容相对稳定，容易被搜索引擎检索到；
约15分钟
约35分钟学生理解
（2）没有数据库支持，在网站制作和维护方面工作量大；）没有数据库支持，在网站制作和维护方面工作量大；  （3）交互性差，在功能方面有很大的限制。）交互性差，在功能方面有很大的限制。  动态网页的特点：动态网页的特点：
（1）以数据库技术为基础，可大大降低网站维护的工作量；）以数据库技术为基础，可大大降低网站维护的工作量；
（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；）可实现更多的功能，如用户注册、新闻发布、在线留言等；  （3）不利于使用搜索引擎进行网站推广。）不利于使用搜索引擎进行网站推广。  3、 常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；  4、 网页设计原则：网页设计原则：
（1）了解客户需求）了解客户需求  （2）遵循Web 标准标准  （3）运用形式美法则）运用形式美法则  5、 网页设计流程：网页设计流程：  （1）手绘效果图：确定网页主题内容和风格）手绘效果图：确定网页主题内容和风格
（2）设计效果图：搜集、整合设计所需素材）设计效果图：搜集、整合设计所需素材  （3）版面编辑：网页的制作与实现）版面编辑：网页的制作与实现
（4）网页美化：动画设计，网页测试和发布）网页美化：动画设计，网页测试和发布  6、 网页设计的主要软件：网页设计的主要软件：
（1）Photoshop
（2）Dweamveawer
（3）Flash
（4）Firworks
7、 HTML 基础知识：基础知识：
（1）HTML 概念：概念：Hyper Text Markup Language Hyper Text Markup Language Hyper Text Markup Language 超文本标识语言；超文本标识语言；
（2）HTML 文档的编写方法：用记事本手工直接编写、使用可视化
HTML 编辑器Dreamweaver Dreamweaver、由、由Web Web 服务器动态生成；服务器动态生成；服务器动态生成；
（3）网页文件命名：首页文件名默认为：index.htm 或 index.html index.html；；
（4）HTML HTML 文件结构：文件结构：文件结构：      <HTML>      <HEAD>
<title></title>    </HEAD>    <BODY>
HTML      HTML 文件的正文文件的正文文件的正文
</BODY>    </HTML>
（5）用编辑器手工编写第一张网页；）用编辑器手工编写第一张网页；  8、 学生实训及辅导；学生实训及辅导；
9、 Dreamweaver 软件界面介绍：软件界面介绍：
（1）软件面板组成及基本操作方法）软件面板组成及基本操作方法  （2）软件首选参数设置）软件首选参数设置  1010、、 D reamweaver 站点创建：站点创建：
站点站点->->->新建站点新建站点新建站点->->->设置站点名称设置站点名称设置站点名称->->->设置站点默认图像文件夹。设置站点默认图像文件夹。设置站点默认图像文件夹。  1111、、 学生实训操作：生实训操作：Dreamweaver Dreamweaver 站点创建与设置；站点创建与设置；  1212、、 D reamweaver 创建第一个网页：创建第一个网页：
（1) 1) 名称：名称：名称：index.html index.html
约20分钟分钟
约30分钟分钟  约20分钟分钟
约20分钟分钟  约20分钟分钟
学生熟记学生熟记
学生实践学生实践
学生实践学生实践
（2) 2) 设置标题、输入文本、输入特殊字符设置标题、输入文本、输入特殊字符设置标题、输入文本、输入特殊字符  （3）页面属性设置）页面属性设置  （4）预览网页）预览网页  1313、、 学生实训及辅导；生实训及辅导；  1414、、 H TML 常用标记：常用标记：
（1）标题标记：）标题标记：<h#><h#><h#>主题文字主题文字主题文字</h#> </h#>
（2）段落标记：）段落标记：<p><p><p>这里表示段落这里表示段落这里表示段落</p> </p> （3）换行与注释：）换行与注释：<br><br><br>、、<!--<!--这里放注释这里放注释这里放注释--> --> （4）粗体与斜体：）粗体与斜体：<b><b><b>粗体粗体粗体</b></b></b>、、<i><i>斜体斜体斜体</i> </i> （5）删除线与下划线：）删除线与下划线：<s><s><s>删除线删除线删除线</s></s></s>、、<u><u>下划线下划线下划线</u> </u> （6）上标与下标：）上标与下标：<sup><sup><sup>上标上标上标</sup> <sub></sup> <sub></sup> <sub>下标下标下标</sub> </sub> 1515、、 学生实训及辅导；生实训及辅导；  1616、、 字体标记：体标记：
（1）字体大小：）字体大小：<font size="1"><font size="1"><font size="1">字体大小字体大小字体大小</font> </font> （2）字体颜：）字体颜：<font color=""><font color=""><font color="">字体颜字体颜字体颜</font> </font> （3）设置标题字体：）设置标题字体：<h#><h#><h#>主题文
字主题文字主题文字</h#> </h#> （4）物理字体：）物理字体：
<B>    <B>……</B></B>，将字符设置成粗体。，将字符设置成粗体。，将字符设置成粗体。      <I>    <I>……</I></I>，将字符设置成斜体。，将字符设置成斜体。，将字符设置成斜体。      <U>    <U>……</U></U>，给字符增加下划线。，给字符增加下划线。，给字符增加下划线。      <S>    <S>……</S></S>，给字符增加删除线。，给字符增加删除线。，给字符增加删除线。      <TT>    <TT>……</TT></TT>，将字符设置成打字机字体。，将字符设置成打字机字体。，将字符设置成打字机字体。      <SUP>    <SUP>……</SUP></SUP>，将字符设置成上标字体。，将字符设置成上标字体。，将字符设置成上标字体。      <SUB>    <SUB>……</SUB></SUB>，将字符设置成下标字体。，将字符设置成下标字体。，将字符设置成下标字体。  （5）逻辑字体：）逻辑字体：      <EM>    <EM>……</EM></EM>强调文字。强调文字。强调文字。      <STRONG>    <STRONG>……</STRONG></STRONG>字体加重。字体加重。字体加重。      <CODE>    <CODE>……</CODE></CODE>显示编程代码。显示编程代码。显示编程代码。      <SAMP>    <SAMP>……</SAMP></SAMP>显示示例文字。显示示例文字。显示示例文字。      <KBD>    <KBD>……</KBD></KBD>显示键盘按键文字。显示键盘按键文字。显示键盘按键文字。      <SMALL>    <SMALL>……</SMALL></SMALL>缩小文字。缩小文字。缩小文字。      <BIG>    <BIG>……</BIG></BIG>放大文字。放大文字。放大文字。  1717、、 字体标记实例讲解；体标记实例讲解；  1818、、 学生实训及辅导；生实训及辅导；
四、 课外作业
第3章上机实践。章上机实践。  五、 课堂小结 本次课主要内容：本次课主要内容：
1、网页设计基础知识；、网页设计基础知识；
2、Dreamweaver 基本使用方法；基本使用方法；
3、HTML 基础知识及常用标记；基础知识及常用标记；
约30分钟分钟  约20分钟分钟
约30分钟分钟  约20分钟分钟
约20分钟分钟  约40分钟分钟
学生实践学生实践
学生实践学生实践
学生实践学生实践
总结总结
后
记
《HTML+CSS网页设计与布局》课程教案
课程教案
授课教师：授课班级：地点：周课时：  5 课时
章节内容文字布局文字布局
插入图像插入图像
超级链接超级链接
教学目标3)使学生熟练掌握HTML常用标记的基本使用方法；
常用标记的基本使用方法；
4)使学生掌握HTML常用标记各种属性的含义和设置方法。
常用标记各种属性的含义和设置方法。
重点难点3)掌握各种HTML常用标记的基本使用方法；
常用标记的基本使用方法；
4)熟记各种HTML常用标记的含义。
常用标记的含义。
教学方法课堂讲授、案例讲解与指导课堂讲授、案例讲解与指导
教学环境计算机机房
计算机机房
教学过程及内容提要时间
分配
备注
教学过程设计六、引入
3、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知
识及Dreamweaver软件基础操作，重点介绍了HTML基础知识及
常用标记；
常用标记；
4、提出问题：网页中文字如何布局？如何在网页中插入图像？如何运
用超级链接？
用超级链接？
七、告知学生课堂任务
本次课所学习的主要内容是HTML文字布局和插入图像、
文字布局和插入图像、超级链接
超级链接
的标记应用。
的标记应用。
八、逐步演示讲解分析教学内容
19
19、
、换行控制：文字一
行控制：文字一<p>
<p>
<p>、文字二
、文字二
、文字二<br />
<br />
20
20、
、不换行控制：
换行控制：<nobr></nobr>
<nobr></nobr>
21
21、
、文字对齐：
字对齐：align="#"
align="#"
align="#"、
、<center>
<center>居中
居中
居中</center>
</center>
22
22、
、设置段落：
置段落：<p>
<p>
<p>段落一
段落一
段落一</p>
</p>
</p>、
、<p>
<p>段落二
段落二
段落二</p>
</p>
23
23、
、学生实训及辅导；
生实训及辅导；
24
24、
、上周课外作业点评；
周课外作业点评；
25
25、
、无序列表：
序列表：
<ul>
<li>
<li>表项一
表项一
表项一</li>
</li>
<li>
<li>表项…</li>
表项…</li>
表项…</li>
</ul>
26
26、
、有序列表：
序列表：
<ol>
<li>
<li>表项一
表项一
表项一</li>
</li>
约10分钟
分钟
约30分钟
分钟
约30分钟
分钟
约40分钟
分钟
约20分钟
分钟
学生理解
学生理解

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。