〈〈HTMLCSS网设计与布局》教案ThedocumentwaspreparedonJanuary2,2021授课教师：_授课班级：地点：周课时：5课时-er-r-n章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学1）使学生了解网页设计的相关基础知识；目标2）使学生熟悉Dreamweaver软件界面的基本操作方法。重点1）了解网页设计相关概念和网页的类型；难点2）熟练掌握Dreamweaver软件创建和管理站点的方法。教学课堂讲授、案例讲解与指导方法教学计算机机房环境《HTML+CSS网页设计与布局》课程教案教学过程及内容提要时间分配备注、引入约15分学生理1、相互认识，提出与本学科相关的知识，介绍本门课程钟解情况、教学内容及总学时数进度安排，宣讲本课程教学纪约35分学生熟律，鼓励学生营造种学习氛围，尊重冋学，互帮互学，钟记真正达到学以致用；约20分学生实2、提出问题：上过网吧？有谁自学过网页设计听说过钟践教学HTML或者CSS这两个概念吗？约30分学生实过3、钟践程二、告知学生课堂任务约20分学生实设计本次课所学习的主要内容是HTML相关基础知识和钟践Dreamweaver软件基础操作；约20分学生实三、逐步演示讲解分析教学内容钟践1、网站和网页的区别：约20分学生实钟践2、(1)网页是Internet基本兀素；约30分总结3、(2)网站由网页组成；钟4、静态网页和动态网页：5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。7、静态网页的特点：8、（1）内容相对稳定，容易被搜索引擎检索到；9、（2）没有数据库支持，在网站制作和维护方面工作量大；10、（3）父互性差，在功能方面有很大的限制。11、动态网页的特点：12、（1）以数据库技术为基础，可大大降低网站维护的工作量；约20分钟约30分钟约20分钟约20分钟约40分钟(2)可实现更多的功能，如用户注册、新闻发布、在线留言等；(3)不利于使用搜索引擎进行网站推广。常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；网页设计原则：(1)了解客户需求(2)遵循Web标准(3)运用形式美法则网页设计流程：(1)手绘效果图：确定网页主题内容和风格(2)设计效果图：搜集、整合设计所需素材(3)版面编辑：网页的制作与实现(4)网页美化：动画设计，网页测试和发布网页设计的主要软件：(1)Photoshop13、14、15、16、17、18、19、20、21、22、23、24、25、26、27、（2）Dweamveawer28、（3）Flash29、（4）Firworks30、HTML基础知识：31、（1）HTML概念：HyperTextMarkupLanguage超文本标识语言；32、（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成；33、（3）网页文件命名：首页文件名默认为：index.htm或index.html；34、（4）HTML文件结构：35、36、37、
38、39、HTML文件的正文(5)用编辑器手工编写第一张网页；学生实训及辅导；Dreamweaver软件界面介绍：(1)软件面板组成及基本操作方法(2)软件首选参数设置Dreamweaver站点创建：站点->新建站点->设置站点名称->设置站点默认图像文件夹。学生实训操作：Dreamweaver站点创建与设置；Dreamweaver创建第一个网页：(1)名称：index.html(2)设置标题、输入文本、输入特殊字符(3)页面属性设置40、41、42、43、44、45、46、47、48、49、50、51、52、53、54、55、（4）预览网页56、学生实训及辅导；57、HTML常用标记：58、（1）标题标记：＜h#＞主题文字＜/h#＞59、（2）段落标记：＜p＞这里表示段落＜/p＞60、（3）换行与注释：＜br＞、＜!--这里放注释--＞61、（4）粗体与斜体：＜b＞粗体＜/b＞、＜i＞斜体＜/i＞62、（5）删除线与下划线：＜s＞删除线＜/s＞、＜u＞下划线...
