《网站建设与网页设计》教案.docxVIP

《网站建设与网页设计》教案学期：2014-2015-1班级：2012软件工程2012计算机科学与技术课时：44学时教师：李念HTML基础教学目的和要求了解HTML的发展历史和HTML5的特性；掌握HTML的文档结构、代码规范和网页文件的创建过程；掌握搭建支持HTML5浏览器环境的方法。教学重点和难点HTML5的新特点；HTML5的新元素；教学方法及手段实例教学，讲授与演示结合。教学内容HTML简介HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的语言，其目的在于运用标签（tag）对文件达到预期的效果。HTML5的特性及元素：(1) 实现Web应用程序：绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画；更好的用户交互操作，包括拖放、内容可编辑等；扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。(2) 更好地呈现内容：基于Web表现的需要，HTML5引入了更好地呈现内容的元素；用于视频、音频播放的video元素和audio元素；用于文档结构的article、footer、header、nav、section等元素。HTML编写规范HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一个排版软件，将网页的内容排成理想的效果。其格式为：标签 受标签影响的内容 /标签每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为：标签属性1=属性值1 属性2=属性值2 … 受标签影响的内容 /标签。不推荐使用的标签：在HTML中，某些标签不推荐使用，例如，b、strong、i、em、dfn、code、samp、kbd、var、cite等标签。代码的缩进：在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。网页文件的创建过程用记事本创建网页用DW软件创建网页搭建支持HTML5的浏览器环境目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera与Google的Chrome浏览器。小结本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。HTML标签教学目的和要求掌握基本的文字与段落标签的使用；掌握超链接、图像、表格和列表标签的使用方法和基本属性；能够进行基本的网页排版。教学重点和难点各类标签的使用方法和属性设置；嵌套列表的使用。教学方法及手段实例教学，讲授与演示结合。教学内容文字与段落排版注释标签!--…--强制换行标签br /段落标签p…/p定位标签div…/div水平线标签hr /标题文字标签h#…/h#超链接锚点标签指向其他页面的链接指向本页中的链接指向下载文件的链接指向电子邮件的链接图像图像标签img用图像作为超链接热点表格简单表格格式表格内文字的对齐方式表格在页面中的对齐方式列表无序列表ulli…/ul有序列表olli…/ol嵌套列表的使用（案例讲解）小结本次课主要讲述了HTML5中常用的标签，灵活掌握各类标签的使用方法的属性设置，重点介绍了嵌套列表在网页设计中的应用。表单教学目的和要求了解表单的工作原理；掌握表单标签的基本格式；掌握input元素、选择栏select和多行文本域textarea的用法；掌握使用表单实现浏览者与网站之间信息交互的方法。教学重点和难点input元素中type属性的值；表章提交数据的意义；教学方法及手段实例教学，讲授与演示结合。教学内容表单的工作原理表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作。表单标签网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。form标签用于创建供用户输入的HTML表单。表单的基本语法及格式为：form name=表单名 action=URL method=get|post …/form表单元素input元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。input元素的基本语法及格式为：input type=表项类型 name=表项名 value=默认值 size=x maxlength=y /选择栏select选择栏可分为两种：弹出式和字段式。select标签的格式为：select size=x name=控制操作名 multiple option … … /option option