HTML+CSS网设计与布局教案.docVIP

《HTML+CSS网页设计和布局》课程教案 讲课老师： 讲课班级： 地点： 周课时： 5 课时 章节 内容 网页设计基础知识 Dreamweaver软件介绍及其基础操作 HTML基础知识及常见标识 教学 目标 使学生了解网页设计相关基础知识； 使学生熟悉Dreamweaver软件界面基础操作方法。 关键 难点 了解网页设计相关概念和网页类型； 熟练掌握Dreamweaver软件创建和管理站点方法。 教学 方法 课堂讲授、案例讲解和指导 教学 环境 计算机机房 教学过程及内容提要 时间 分配 备注 教学过程设计 引入 相互认识，提出和本学科相关知识，介绍本门课程情况、教学内容及总课时数进度安排，宣讲本课程教学纪律，激励学生营造一个学习气氛，尊重同学，互帮互学，真正达成学以致用； 提出问题：上过网吧？有谁自学过网页设计？听说过HTML或CSS这两个概念吗？ 通知学生课堂任务 此次课所学习关键内容是HTML相关基础知识和Dreamweaver软件基础操作； 逐步演示讲解分析教学内容 网站和网页区分：（1）网页是Internet基础元素；（2）网站由网页组成； 静态网页和动态网页：静态网页：纯粹HTML语言格式网页通常被称为静态网页，静态网页后缀名通常为.htm、.html、.shtml、.xml。动态网页：很多人认为网页会动就是动态网页，这是个错误见解，在静态网页中也能够含有动态图片，这仅仅是视觉上动态罢了。真正动态网页是指实际上并不是独立存在于服务器上网页文件，只有当用户请求时服务器才返回一个完整网页。也就是说，它是返回到了用户端上网页。比如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态网页了。静态网页特点：（1）内容相对稳定，轻易被搜索引擎检索到；（2）没有数据库支持，在网站制作和维护方面工作量大；（3）交互性差，在功效方面有很大限制。动态网页特点：（1）以数据库技术为基础，可大大降低网站维护工作量；（2）可实现更多功效，如用户注册、新闻公布、在线留言等；（3）不利于使用搜索引擎进行网站推广。 常见网页类型：形象页、主页、栏目页、内页、新闻具体页等； 网页设计标准：（1）了解用户需求（2）遵照Web标准（3）利用形式美法则 网页设计步骤：（1）手绘效果图：确定网页专题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页制作和实现（4）网页美化：动画设计，网页测试和公布 网页设计关键软件：（1）Photoshop（2）Dweamveawer（3）Flash（4）Firworks HTML基础知识：（1）HTML概念：Hyper Text Markup Language 超文本标识语言；（2）HTML文档编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成；（3）网页文件命名：首页文件名默认为：index.htm 或 index.html；（4）HTML 文件结构： HTML  HEAD title/title /HEAD BODY HTML 文件正文 /BODY /HTML（5）用编辑器手工编写第一张网页； 学生实训及教导； Dreamweaver软件界面介绍：（1）软件面板组成及基础操作方法（2）软件首选参数设置 Dreamweaver站点创建：站点-新建站点-设置站点名称-设置站点默认图像文件夹。 学生实训操作：Dreamweaver站点创建和设置； Dreamweaver创建第一个网页：（1) 名称：index.html（2) 设置标题、输入文本、输入特殊字符（3）页面属性设置（4）预览网页 学生实训及教导； HTML常见标识：（1）标题标识：h#专题文字/h#（2）段落标识：p这里表示段落/p（3）换行和注释：br、!--这里放注释--（4）粗体和斜体：b粗体/b、i斜体/i（5）删除线和下划线：s删除线/s、u下划线/u（6）上标和下标：sup上标/sup sub下标/sub 学生实训及教导； 字体标识：（1）字体大小：font size=1字体大小/font（2）字体颜色：font color=字体颜色/font（3）设置标题字体：h#专题文字/h#（4）物理字体： B…/B，将字符设置成粗体。 I…/I，将字符设置成斜体。 U…/U，给字符增加下划线。 S…/S，给字符增加删除线。 TT…/TT，将字符设置成打字机字体。 SUP…/SUP，将字符设置成上标字体。