网页设计与布局教案.docx
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
《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)Photoshop
27 、(2)Dweamveawer
28 、(3)Flash
29 、(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 、
36 、
37 、
38 、
39 、
40 、HTML文件的正文
41 、
42 、
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 ):
59 、(2 )段落:
里表示段落
60 、(3 )行与注:
、
61 、(4 )粗体与斜体: 粗体 、 斜体
62 、(5 )除与下划: 除 、下划
63 、(6 )上与下: 上 下
64 、学生及;
65 、字体:
66 、(1 )字体大小: 字体大小
67 、(2 )字体色: 字体色
68 、(3 )置字体:
69 、(4 )物理字体:
70 、 ⋯,将字符置成粗体。
71 、 ⋯ ,将字符置成斜体。
72 、 ⋯,字符增加下划。
73 、 ⋯,字符增加除。
74 、 ⋯ ,将字符置成打字机字体。
75 、 ⋯,将字符置成上字体。
76 、 ⋯,将字符置成下字体。
77 、(5)字体: