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

1、网站建设与网页设计教案网站建设与网页设计教案学期：2014-2015-1班级：2012软件工程2012计算机科学与技术课时：44学时教师：李念第1讲HTML基础1.1教学目的和要求1.了解HTML的发展历史和HTML5的特性；2.掌握HTML的文档结构、代码规范和网页文件的创建过程；3.掌握搭建支持HTML5浏览器环境的方法。1.2教学重点和难点1.HTML5的新特点；2.HTML5的新元素；1.3教学方法及手段实例教学，讲授与演示结合。1.4教学内容1.4.1HTML简介HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的

2、语言，其目的在于运用标签（tag）对文件达到预期的效果。HTML5的特性及元素：(1) 实现Web应用程序：绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画；更好的用户交互操作，包括拖放、内容可编辑等；扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。 (2) 更好地呈现内容：基于Web表现的需要，HTML5引入了更好地呈现内容的元素；用于视频、音频播放的video元素和audio元素；用于文档结构的article、footer、header、nav、section等元素。 1.4.2HTML编写

3、规范HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一个排版软件，将网页的内容排成理想的效果。其格式为： 受标签影响的内容 每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为： 受标签影响的内容 。不推荐使用的标签：在HTML中，某些标签不推荐使用，例如，、等标签。代码的缩进：在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。1.4.3网页文件的创建过程用记事本创建网页用DW软件创建网页1.4.4搭建支持HTML5的浏览器环境目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera

4、与Google的Chrome浏览器。1.4.5小结 本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。 第2讲HTML标签2.1教学目的和要求1.掌握基本的文字与段落标签的使用；2.掌握超链接、图像、表格和列表标签的使用方法和基本属性；3.能够进行基本的网页排版。2.2教学重点和难点1.各类标签的使用方法和属性设置；2.嵌套列表的使用。2.3教学方法及手段实例教学，讲授与演示结合。2.4教学内容2.4.1文字与段落排版注释标签强制换行标签段落标签定位标签水平线标签 标题文字标签2.4.2超链接锚点标签指向其他页面的链接指向本页中的链接指向下载文件的链接指向电子邮件的链接2.4.3图像

5、图像标签用图像作为超链接热点2.4.4表格简单表格格式表格内文字的对齐方式表格在页面中的对齐方式2.4.5列表无序列表有序列表嵌套列表的使用（案例讲解）2.4.6小结本次课主要讲述了HTML5中常用的标签，灵活掌握各类标签的使用方法的属性设置，重点介绍了嵌套列表在网页设计中的应用。 第3讲表单3.1教学目的和要求1.了解表单的工作原理；2.掌握表单标签的基本格式；3.掌握元素、选择栏和多行文本域的用法；4.掌握使用表单实现浏览者与网站之间信息交互的方法。3.2教学重点和难点1.元素中type属性的值；2.表章提交数据的意义；3.3教学方法及手段实例教学，讲授与演示结合。3.4教学内容3.4.1

6、表单的工作原理表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作。3.4.2表单标签网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。标签用于创建供用户输入的HTML表单。表单的基本语法及格式为： 3.4.3表单元素元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。元素的基本语法及格式为：选

7、择栏选择栏可分为两种：弹出式和字段式。标签的格式为： 标签的格式为： 多行文本域在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。使用标签可以设置允许成段文字的输入，格式为： 多行文本 其中的行数和列数是指不拖动滚动条就可看到的部分。3.4.4表单的高级用法案例讲解在某些情况下，用户需要对表单元素进行限制，设置表单元素为只读或禁用，常应用于以下场景：只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮。只读

8、和禁用效果分别通过设置“readonly”和“disabled”属性来实现。3.4.5小结表单中的所有元素都只能放在一个表单元素中，作为一个完整的数据一起提交，HTML5对各种元素设置了一些新的属性来约束用户的输入，丰富了表单的表现力。 第4讲HTML高级应用4.1教学目的和要求1.了解文档结构元素的特点与应用场合；2.掌握使用结构元素构建网页布局的方法；3.掌握音频和视频的基本格式以及、标签的使用方法；4.了解canvas绘图的基本原理。4.2教学重点和难点1.、标签的使用；2.元素的创建与基本原理。4.3教学方法及手段实例教学，讲授与演示结合。4.4教学内容4.4.1使用结构元素构建网页布

9、局HTML5中的主要文档结构元素包括：标签：代表文档中的一段或者一节。标签：用于构建导航。标签：页面的页眉。标签：页面的页脚。标签：表示文档、页面、应用程序或网站中一体化的内容。标签：代表与页面内容相关、有别于主要内容的部分。标签：代表段或者节的标题。标签：表示日期和时间。标签：文档中需要突出的文字。案例讲解4.4.2音频和视频音频和视频格式音频标签和视频标签、与比较案例讲解4.4.3canvas绘图创建元素：是HTML5新增元素，只有较高版本的IE浏览器才支持该元素，用于在网页中创建一个画布，具体的使用方法为： 案例讲解4.4.4小结HTML5中视频音频的插入方法与早期版本有所不同，使用不同

10、的标签插入音频和视频，让HTML代码更规范严格，此外增加的元素扩展了HTML的绘图功能，增强了网页的展现力。第5讲canvas绘图5.1教学目的和要求1.掌握创建元素、构建绘图环境的方法；2.掌握通过JavaScript绘制基本图形的方法；3.了解各种特殊图形的绘制方法；4.了解HTML5的发展前景5.2教学重点和难点1.构建绘图环境；2.绘制基本图形。5.3教学方法及手段实例教学，讲授与演示结合。5.4教学内容5.4.1构建绘图环境大多数绘图API都没有定义在元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。getContext()方法返回一个用于在画

11、布上绘图的环境，其语法如下：canvas.getContext(contextID)参数contextID指定了用户想要在画布上绘制的类型。“2d”，即二维绘图，这个方法返回一个上下文对象CanvasRenderingContext2D，该对象导出一个二维绘图API。 5.4.2通过JavaScript绘制图形的基本原理元素只是图形容器，其本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。在画布上绘图的核心是上下文对象CanvasRenderingContext2D，用户可以在JavaScript代码中使用getContext（）方法渲染上下文进而在画布上显示形状和文本。

12、JavaScript使用getElementById方法通过canvas的id定位canvas元素，例如以下代码：var myCanvas = document.getElementById(myCanvas);5.4.3绘制矩形（1）绘制填充的矩形fillRect()方法用来绘制填充的矩形，语法格式为：fillRect(x, y, weight, height)其中的参数含义如下：x, y：矩形左上角的坐标。weight, height：矩形的宽度和高度。说明：fillRect()方法使用fillStyle属性所指定的颜色、渐变和模式来填充指定的矩形。（2）绘制矩形轮廓strokeRect(

13、)方法用来绘制矩形的轮廓，语法格式为：strokeRect(x, y, weight, height)其中的参数含义如下：x, y：矩形左上角的坐标。weight, height：矩形的宽度和高度。说明：strokeRect()方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部），线条颜色和线条宽度由strokeStyle和lineWidth属性指定。【案例3-7】绘制填充的矩形和矩形轮廓。5.4.4绘制直线（1）lineTo()方法lineTo()方法用来绘制一条直线，语法格式为：lineTo(x, y)其中的参数含义如下：x, y：直线终点的坐标。说明：lineTo()方法为

14、当前子路径添加一条直线。这条直线从当前点开始，到(x,y)结束。当方法返回时，当前点是(x,y)。（2）moveTo()方法在绘制直线时，通常配合moveTo()方法设置绘制直线的当前位置并开始一条新的子路径，其语法格式为：moveTo(x, y)其中的参数含义如下：x, y：新的当前点的坐标。说明：moveTo()方法将当前位置设置为(x, y)并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点，那么从路径中删除该子路径。【案例3-8】绘制一条直线5.4.5绘制圆弧或圆arc()方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧，语法格式为：arc(x,

15、y, radius, startAngle, endAngle, counterclockwise)其中的参数含义如下：x, y：描述弧的圆形的圆心坐标。radius：描述弧的圆形的半径。startAngle, endAngle：沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量，沿着x轴正半轴的三点钟方向的角度为0，角度沿着逆时针方向而增加。counterclockwise：弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。说明：这个方法的前5个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来，它沿着圆周在子路

16、径的起始点和结束点之间添加弧。最后一个counterclockwise参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。【案例3-10】绘制圆弧和圆。5.4.6绘制文字（1）绘制填充文字fillText()方法用于填充方式绘制字符串，语法格式为：fillText(text,x,y,maxWidth)其中的参数含义如下：text：表示绘制文字的内容。x, y：绘制文字的起点坐标。maxWidth：可选参数，表示显示文字的最大宽度，可以防止溢出。（2）绘制轮廓文字strokeText()方法用于轮廓方式绘制字符串，语法格式为：strokeText(text,x,y,maxWidth)【案例3-

17、11】绘制填充文字和轮廓文字。5.4.7绘制渐变（1）绘制线性渐变createLinearGradient()方法用于创建一条线性颜色渐变，语法格式为：createLinearGradient(xStart, yStart, xEnd, yEnd)其中的参数含义如下：xStart, yStart：渐变的起始点的坐标。xEnd, yEnd：渐变的结束点的坐标。（2）绘制径向渐变createRadialGradient()方法用于创建一条放射颜色渐变，语法格式为：createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radius

18、End)其中的参数含义如下：xStart, yStart：开始圆的圆心坐标。radiusStart：开始圆的半径。xEnd, yEnd：结束圆的圆心坐标。radiusEnd：结束圆的半径。addColorStop()方法在渐变中的某一点添加一个颜色变化，语法格式为：addColorStop(offset, color)【案例3-12】绘制线性渐变和径向渐变5.4.8绘制图像canvas相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。只要是Gecko排版引擎支持的图像（如PNG、GIF、JPEG等）都可以引入到canvas中，并且其它的canvas元素也可以作为图像的来源。

19、用户可以使用drawImage()方法在一个画布上绘制图像，也可以将源图像的任意矩形区域缩放或绘制到画布上，语法格式为：格式一：drawImage(image, x, y)格式二：drawImage(image, x, y, width, height)格式三：drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)【案例3-13】绘制图像5.4.9小结HTML5最强大的生命力体验在其破除了应用在不同操作系统和机型之间的障碍，具有巨大的跨平台优势。这就意味着，基于HTML

20、5的开发应用，可以在搭载不同操作系统的终端上运行，这对广大开发者来说绝对是一个福音。再加上其应用的广泛性，可以便捷地完成目前所需的各种应用，包括支持文字、图片、视频、游戏，且不需要任何插件的帮助。第6讲CSS基础6.1教学目的和要求1.了解CSS的基本概念、发展及CSS3的特点；2.掌握CSS的代码规范；3.掌握CSS与HTML文档的结合方法；4.掌握CSS的定义组成；5.掌握CSS的长度、百分比单位和色彩单位。6.2教学重点和难点1.CSS的使用规则；2.CSS的定义组成。6.3教学方法及手段实例教学，讲授与演示结合。6.4教学内容6.4.1CSS概述 CSS的基本概念CSS（Cascadi

21、ng Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的发展历史CSS3的特点Web开发者可以借助CSS3设计圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等来提高Web设计的质量，开发者将不必再依赖图片或者Javascript去完成这些任务，极大地提高了网页开发效率。CSS的代码规范6.4.2CSS与HTML文档的结合方法定义内部样式表定义行内样式表链入外部样式表导入外部样式表6.4.3CSS的定义组成CSS的定义是由3个部分构成：选择符（selector）、属性（attribute

22、）和属性的取值（value）。其语法为：selectorattribute:value /*（选择符属性：属性值）*/CSS选择符可以分为很多类，包括：类型选择符，class类选择符，id选择符，通用选择符，分组选择符，包含选择符，元素指定选择符，子对象选择符，属性选择符。下面讲解几种常用的选择符。 6.4.4CSS的属性单位长度单位百分比单位色彩单位 6.4.5小结CSS对于网页设计是非常重要的，它就像是网页的化妆师，可以让同一内容的网页同时具有多种不同的风格，它让网页的内容和样式分离，这种设计方式加快了网页的显示速度以及网站的执行效率。 第7讲CSS选择符7.1教学目的和要求1.掌握CSS

23、常用的选择符；2.掌握多重样式表的层叠规则。7.2教学重点和难点1.常用选择符的类型及应用场合；2.层叠样式表的使用。7.3教学方法及手段实例教学，讲授与演示结合。7.4教学内容7.4.1类型选择符类型选择符是指以某个HTML标签为对象，设置其样式规则。案例讲解7.4.2class类选择符在应用时只要在标签中指定它属于哪一个类，就可以使用该类的样式了。其格式为：案例讲解7.4.3id选择符id选择符用来对某个单一元素定义单独的样式。定义id选择符时要在id名称前加上一个“#”号。格式为：案例讲解7.4.4span选择符标签也可以用来定义区域，但一般用于网页中某一个小问题段落。其格式为： 或 。

24、案例讲解7.4.5div选择符div（division，部分的简写）在功能上与span相似，最主要的差别在于，div是一个块级标签。其格式为： 或 案例讲解7.4.6通用选择符通用选择符指选定文档对象模型（DOM）中的所有类型的单个对象，是一种特殊的选择符，它用*表示。其格式为：*CSS代码案例讲解7.4.7通用兄弟元素选择符EF通用兄弟元素选择符EF用来指定位于同一个父元素之中的某个元素的之后的所有其他某个种类的兄弟元素所使用的样式。其格式为：EF：att。案例讲解7.4.8包含选择符包含选择符能够简化代码，大范围的样式控制。其格式为：E1 E2/*对子层控制规则*/案例讲解7.4.9分组选

25、择符分组选择符指的是对多个标签设置同一样的样式。格式为：E1,E2,E3 /*CSS代码*/案例讲解7.4.10 属性选择符属性选择符存在7种具体形式：（1）Eatt属性名选择符（2）Eatt=val属性值选择符（3）Eatt=val属性值选择符（4）Eatt|=val属性值选择符（5）Eatt=val属性值子串选择符（6）Eatt$=val属性值子串选择符（7）Eatt*=val属性值子串选择符案例讲解7.4.11 伪类选择符（1）E:root结构性伪类选择符（2）E:nth-child(n)结构性伪类选择符（3）E:nth-last-child(n)结构性伪类选择符（4）E:first-c

26、hild与E:last-child结构性伪类选择符（5）E:only-child结构性伪类选择符（6）E:empty结构性伪类选择符（7）E:not(s)否定伪类选择符（8）E:target目标伪类选择符（9）UI元素状态伪类选择符案例讲解7.4.12 多重样式表的层叠样式表的优先级别从高到低为：行内样式表、内部样式表、链接样式表、导入样式表和默认浏览器样式表。浏览器将按照上述顺序执行样式表的规则。 样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由这个元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把多层嵌套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义的为准。案例讲解7.4.13小结不同类型的选择符适用于不同的场合，合理地使用选择符可以提高网页处理的效率，灵活处理各类选择符是本次课的重点。第8讲Div+CSS布局方法8.1教学目的和要求1.了解Div布局页面的特点和优点；2.掌握Div标签的基本用法、Div的嵌套及Div标签与Span标签的区别；3.掌握盒模型的基本概念和属性；4.掌握盒模型的宽度与高度；5.掌握外边距的叠加规