《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时： 5 课时
（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 超文本标识语言；
（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成；
（3）网页文件命名：首页文件名默认为：index.htm 或 index.html；
（4）HTML 文件结构：
HTML 文件的正文
（5）用编辑器手工编写第一张网页；
8、学生实训及辅导；
9、Dreamweaver软件界面介绍：
（1）软件面板组成及基本操作方法
（2）软件首选参数设置
10、Dreamweaver站点创建：
站点->新建站点->设置站点名称->设置站点默认图像文件夹。
11、学生实训操作：Dreamweaver站点创建与设置；
12、Dreamweaver创建第一个网页：
（1) 名称：index.html
（2) 设置标题、输入文本、输入特殊字符约20分钟
约30分钟
约20分钟
约20分钟
约20分钟
学生熟记
学生实践
学生实践
（3）页面属性设置
（4）预览网页13、学生实训及辅导；
14、HTML常用标记：
（1）标题标记：主题文字
（2）段落标记：
这里表示段落
（3）换行与注释：
、
（4）粗体与斜体：粗体、斜体
（5）删除线与下划线：删除线、下划线（6）上标与下标：上标 下标
15、学生实训及辅导；
16、字体标记：
（1）字体大小：字体大小
（2）字体颜色：字体颜色
（3）设置标题字体：主题文字
（4）物理字体：
…，将字符设置成粗体。
…，将字符设置成斜体。
…，给字符增加下划线。
…，给字符增加删除线。
…，将字符设置成打字机字体。
…，将字符设置成上标字体。
…，将字符设置成下标字体。
（5）逻辑字体：
…强调文字。
…字体加重。
…显示编程代码。
…显示示例文字。
…显示键盘按键文字。
…缩小文字。
…放大文字。
17、字体标记实例讲解；
18、学生实训及辅导；
四、课外作业
第3章上机实践。
五、课堂小结
本次课主要内容：
1、网页设计基础知识；
2、Dreamweaver基本使用方法；
3、HTML基础知识及常用标记；约30分钟
约20分钟
约30分钟
约20分钟
约20分钟
约40分钟
学生实践
学生实践
学生实践
总结
后
记
《HTML+CSS网页设计与布局》课程教案
授课教师：授课班级：地点：周课时： 5 课时
- 表项一
- 表项…
27、欲格式化文本：
文字
、
<![CDATA[文本]]>28、计算机输出格式：
代码样式小型固定宽度字体显示的文本 代码样式固定宽度字体渲染
代码样式固定宽度字体渲染文本
代码样式斜体字渲染
29、学生实训及辅导；
30、在网页中插入图像：
31、图像无法显示时的提示信息：
32、控制图像的大小：
33、设置边框：
34、图像的链接：
35、学生实训及辅导；
36、图像映射图：
37、文本与图像对齐：
38、学生实训及辅导；
39、最简单的文字超链：文字链接
40、超链网页的打开方式：_blank、_parent、_self、_top
41、链接的注释：
163网站
42、设置图片链接：![]()
43、设置锚点：文章中的文字
44、邮箱地址链接：
作者的邮箱
45、相对路径：
相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；
46、绝对路径：
HTML绝对路径（absolute path）指带域名的文件的完整路径。47、学生实训及辅导；
九、课外作业
第6章上机实践。
十、课堂小结
本次课主要内容：
1、HTML文字布局；
2、HTML插入图像；
3、HTML超级链接。约20分钟
约30分钟
约30分钟
约20分钟
约30分钟
约30分钟
约30分钟
学生实践
学生实践
学生实践
学生实践
总结
