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

第01周—第1/17页《HTML+CSS网页设计与布局》课程教案授课教师：授课班级：地点：周课时：5课时章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学目标1)使学生了解网页设计的相关基础知识；2)使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点1)了解网页设计相关概念和网页的类型；2)熟练掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计一、引入1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；2、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？二、告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；三、逐步演示讲解分析教学内容1、网站和网页的区别：（1）网页是Internet基本元素；（2）网站由网页组成；2、静态网页和动态网页：静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点：（1）内容相对稳定，容易被搜索引擎检索到；（2）没有数据库支持，在网站制作和维护方面工作量大；约15分钟约35分钟学生理解第01周—第2/17页（3）交互性差，在功能方面有很大的限制。动态网页的特点：（1）以数据库技术为基础，可大大降低网站维护的工作量；（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。3、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；4、网页设计原则：（1）了解客户需求（2）遵循Web标准（3）运用形式美法则5、网页设计流程：（1）手绘效果图：确定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作与实现（4）网页美化：动画设计，网页测试和发布6、网页设计的主要软件：（1）Photoshop（2）Dweamveawer（3）Flash（4）Firworks7、HTML基础知识：（1）HTML概念：HyperTextMarkupLanguage超文本标识语言；（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成；（3）网页文件命名：首页文件名默认为：index.htm或index.html；（4）HTML文件结构：HTMLHEADtitle/title/HEADBODYHTML文件的正文/BODY/HTML（5）用编辑器手工编写第一张网页；8、学生实训及辅导；9、Dreamweaver软件界面介绍：（1）软件面板组成及基本操作方法（2）软件首选参数设置10、Dreamweaver站点创建：站点-新建站点-设置站点名称-设置站点默认图像文件夹。11、学生实训操作：Dreamweaver站点创建与设置；12、Dreamweaver创建第一个网页：（1)名称：index.html（2)设置标题、输入文本、输入特殊字符约20分钟约30分钟约20分钟约20分钟约20分钟学生熟记学生实践学生实践第01周—第3/17页（3）页面属性设置（4）预览网页13、学生实训及辅导；14、HTML常用标记：（1）标题标记：h#主题文字/h#（2）段落标记：p这里表示段落/p（3）换行与注释：br、!--这里放注释--（4）粗体与斜体：b粗体/b、i斜体/i（5）删除线与下划线：s删除线/s、u下划线/u（6）上标与下标：sup上标/supsub下标/sub15、学生实训及辅导；16、字体标记：（1）字体大小：fontsize=1字体大小/font（2）字体颜色：fontcolor=字体颜色/font（3）设置标题字体：h#主题文字/h#（4）物理字体：B…/B，将字符设置成粗体。I…/I，将字符设置成斜体。U…/U，给字符增加下划线。S…/S，给字符增加删除线。TT…/TT，将字符设置成打字机字体。SUP…/SUP，将字符设置成上标字体。SUB…/SUB，将字符设置成下标字体。（5）逻辑字体：EM…/EM强调文字。STRONG…/STRONG字体加重。CODE…/CODE显示编程代码。SAMP…/SAMP显示示例文字。KBD…/KBD显示键盘按键文字。SMALL…/SMALL缩小文字。BIG…/BIG放大文字。17、字体标记实例讲解；18、学生实训及辅导；四、课外作业第3章上机实践。五、课堂小结本次课主要内容：1、网页设计基础知识；2、Dreamweaver基本使用方法；3、HTML基础知识及常用标记；约30分钟约20分钟约30分钟约20分钟约20分钟约40分钟学生实践学生实践学生实践总结后记第01周—第4/17页《HTML+CSS网页设计与布局》课程教案授课教师：授课班级：地点：周课时：5课时章节内容文字布局插入图像超级链接教学目标3)使学生熟练掌握HTML常用标记的基本使用方法；4)使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点3)掌握各种HTML常用标记的基本使用方法；4)熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计六、引入3、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作，重点介绍了HTML基础知识及常用标记；4、提出问题：网页中文字如何布局？如何在网页中插入图像？如何运用超级链接？七、告知学生课堂任务本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。八、逐步演示讲解分析教学内容19、换行控制：文字一p、文字二br/20、不换行控制：nobr/nobr21、文字对齐：align=#、center居中/center22、设置段落：p段落一/p、p段落二/p23、学生实训及辅导；24、上周课外作业点评；25、无序列表：ulli表项一/lili表项…/li/ul26、有序列表：olli表项一/lili表项…/li约10分钟约30分钟约30分钟约40分钟约20分钟学生理解第01周—第5/17页/ol27、欲格式化文本：pre文字/pre、xmp文本/xmp28、计算机输出格式：code代码样式小型固定宽度字体显示的文本/codekbd代码样式固定宽度字体渲染/kbdtt代码样式固定宽度字体渲染文本/ttvar代码样式斜体字渲染/var29、学生实训及辅导；30、在网页中插入图像：imgsrc=cn.jpg31、图像无法显示时的提示信息：imgsrc=cn.jpgalt=风景32、控制图像的大小：imgsrc=cn.jpgalt=风景width=400pxheight=300px33、设置边框：imgsrc=cn.jpgalt=风景border=0px34、图像的链接：ahref==cn.jpg/a35、学生实训及辅导；36、图像映射图：map/map37、文本与图像对齐：imgsrc=cn.jpgalign=middle38、学生实训及辅导；39、最简单的文字超链：ahref=文字链接/a40、超链网页的打开方式：_blank、_parent、_self、_top41、链接的注释：ahref==网易网站163网站/a42、设置图片链接：ahref=imgsrc=/a43、设置锚点：aname=锚点名文章中的文字/a44、邮箱地址链接：ahref=mailto:[e-mail]作者的邮箱/a45、相对路径：相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；46、绝对路径：HTML绝对路径（absolutepath）指带域名的文件的完整路径。47、学生实训及辅导；九、课外作业第6章上机实践。十、课堂小结本次课主要内容：1、HTML文字布局；2、HTML插入图像；3、HTML超级链接。约20分钟约30分钟约30分钟约20分钟约30分钟约30分钟约30分钟学生实践学生实践学生实践学生实践总结后记第01周—第6/17页《HTML+CSS网页设计与布局》课程教案授课教师：授课班级：地点：周课时：5课时章节内容表单的使用插入表格教学目标5)使学生熟练掌握HTML常用标记的基本使用方法；6)使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点5)掌握各种HTML常用标记的基本使用方法；6)熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计十一、引入5、回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法，重点介绍了超级链接的标记应用；6、提出问题：什么是表单？常见的表单有哪些？如何在网页中使用表格？十二、告知学生课堂任务本次课所学习的主要内容是HTML表单和表格的标记应用。十三、逐步演示讲解分析教学内容48、表单基本语法：form/form、属性action和method49、文本框：inputtype=text50、密码框：inputtype=password51、单选框：inputtype=radio52、复选框：inputtype=checkbox53、按钮设置：inputtype=submitvalue=按钮提交54、学生实训及辅导；55、上周课外作业点评；56、下拉表：select!—设置下拉表选项--option选项一/optionoption选项二/optionoptionselected选项三/option/select绝对路径57、文本域：textarea!—文本域内容--/textarea58、表单应用实例讲解；约10分钟约30分钟约40分钟约30分钟约20分钟约20分钟学生理解学生实践第01周—第7/17页59、学生实训及辅导；60、表格基本语法：table/tabletr标签对表示表行th标签对表示表头td标签对表示表元61、跨多行表元：Rowspan62、跨多列表元：colspan63、表格内设置文字对齐：对齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐复选框64、表格在网页中对齐：tablealign=#/table；65、学生实训及辅导；66、表格应用实例讲解；67、学生实训及辅导；十四、课外作业第8章上机实践。十五、课堂小结本次课主要内容：1、表单的使用；2、插入表格；3、表格应用实例；约40分钟约30分钟约40分钟约20分钟约40分钟学生实践学生实践学生实践总结后记第01周—第8/17页《HTML+CSS网页设