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

《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 课时

1. 表项一
2. 表项…

27、欲格式化文本：

文字

、文本

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分钟

学生实践

学生实践

学生实践

学生实践

总结