网页设计课程标准

1、云南城市建设职业学院网页设计课程标准系（部）：机电与信息工程系课程名称： 网页设计编制教师：张捷编制时间：2015年5月前言网页设计是职业院校计算机领域的一门主干专业课程，也是计算机及相关专业人才培养计划中的一门专业课程，在大二第二学期开设，课程总学时为108 学时，主要是为了让学生掌握网站建设必备的基础知识、基本技能和基本素养，其主要任务是通过网页设计基础学习和实训两方面内容培养学生制作网页、建立维护网站的能力，使学生了解网页制作的方法，掌握网页三剑客与其它多媒体软件相结合开发网站的技能。同时达到培养高素质劳动者和网站建设专门人才的目的，为今后学生就业和继续学习打下良好的基础。当今正处于网络

2、化和信息化时代，很多工作都离不开互联网。网站是政府、企事业单位、企业公司信息化的核心，更是其应用宣传信息的关键媒体。所以特依据人才培养方案要求制订以下网页设计课程标准。一、课程基本信息1 课程名称：网页设计2课程类别：专业课基础课3课程编码：4学时： 1085适用专业：计算机、网络、移动通信等相关专业。1.1 课程的性质与作用1 . 课程的性质网页设计课程是高职计算机、网络、移动通信等相关专业重点建设的核心课程之一，是学生职业教育的核心课程。通过本课程的学习，使学生了解网页设计、网站项目创建实施的流程及方法，具备网页设计、网站建设与维护的基本能力，为今后学生到相应的职业岗位工作打下基础。计算机

3、、网络、电子商务等相关专业是为适应市场经济发展需要，培养能在政府、企业、企事业单位从事算机系统维护、网络维护、网页设计、网站建设管理维护、中小型信息系统开发等工作的高技能人才、让学生具有良好的职业道德、熟练的专业技能和可持续发展的计 算机应用技术领域的高级应用型人才。本课程是一门既包含理论知识又包含实践性、技能都相对较强的课程。2 .课程作用本课程相关的典型工作岗位是：前端（网站策划师、网页美工）、后台（网站开发工程师），对其进行典型工作任务与职业能力分析后，归纳提炼出岗位核心能力为“网站建设”，再按照各个典型工作任务的先后顺序设置支撑的项目课程群。网站建设的先行课程为图像处理photosho

4、p,HTML, CSSDIV/D Dreamweaver网页设计flash » «T1基础能力美术，图案，色彩基础网站建设实训等，详细的可见下表，它们是支撑“网站建设”核心能力的基础课程。基础能力扩展能力高级能力T1:网页设计师HTML , CSS DIVPHP （或ASP, JSP）等动态网站开发工具基础能力HTML+div+cssDreamweaver快速建站模板工具Ajax等取新技术FireWorkFireWork网页效果图制作PhotoShop 基础一的语后表达、沟通能力图形图像处理Flash网站商业广告宣传动画制作能力广告宣传动画flash图片制作T2:网贝美工T

5、1基础能力美术，图案，色彩基础熟练掌握PhotoShopLogomaker软件应用标志设计网站标志设计制作T3:网站建设T1基础能力IIS （服务器配置）数据库设计能力项目网站建设，美化数据库（SQL ACCESS使用能力动态网站开发工具高级能力T5:网站分析和设计T3全部能力数据库设计能力软件工程分析能力策划、分析能力网站需求分析能力理解领域业务的能力语言表达、沟通能力通过网站项目开发的教学，使学生掌握网站开发的过程及网页的设计制作方法和步骤，该课程主要内容有网站规划与网页设计、静态网页制作、CSS规则的应用、网站测试发布与维护的知识和技能，为后续课程的学习提供网页设计与制作的理论基础和技能

6、支持。本课程无论对培养学生的创新思维、协作精神、正确的设计理念和方法、信息处理能力、解决问题能力、自我学习能力、高级能力，还是对培养网页、网站制作的实践操作技能、满足职业岗位需求以及对后继课程的学习，都具有十分重要的作用。1.2 课程的基本理念1 .突出学生职业能力的培养本课程以建设企业网站项目为载体，以网站项目的建设与维护工程流程为主线，通过项目全面学习网站建设与维护的相关知识和技能，及步骤方法，使学生对真实的建设网站项目 的流程有一个较全面的认识，形成职业岗位所需的基本能力，为今后从事相关职业岗位作前 期准备。2 .以学生主体，从实践中锻炼学生能力本课程在实施过程中， 按工作流程将项目分解

7、为具体的工作任务， 教学中实施任务驱动, 同时，引导学生组建项目团队， 以学生为主体，团队在教师的启发、 提示下自主地开展学习, 学生根据任务，通过团队讨论，主动查阅资料，养成独立策划、分析问题和解决问题的能力。3 .尊重个体差异，注重过程评价本课程在教学实施过程中，倡导学生自主学习，鼓励多元思维方式，并将其表达出来，尊重个体差异，发挥不同类型学生的长处，建立由形成性评价和总结性评价相结合的评价体 系，教学过程中以形成性评价为主，注重学生学习的积极和自信心，总结性评价注重评价学生做成事的能力。1.3 课程标准的设计思路在课程标准的设计过程中以网页设计基础为必须掌握知识，以实训企业网页设计项目的

8、完整创建过程对各环节知识、技能进行知识巩固和运用，围绕预设能力目标，对学习目标、学习任务、能力要求、教学内容、活动设计和教学建议等都均参照人才培养方案。教学方法在教学网页设计基础中主要采用案例、讲解、实做的方式来进行，通过理论、案例的讲解和演示，让学生能够清楚到实践的操作，掌握本课程的相关知识。图表表示如下教学方法理实结合法oo讲授法Q/技学KC讨论教学法° 方法,0对比法案例教学法0°任务驱动法案例教学法：教学过程中。老师举例子讲解一个网站创建的过程和方法，其它相关类网 站的创建就可以用第一个网站建设中的一些方法去完成。讨论式教学：注重课堂教学整体设计，通过引入问题，如建

9、设网站的市场分析，可以 组织学生通过讨论寻找答案，让学生参与交流、分享自己的看法，并进行总结和归纳。通过 讨论，学生真正做到了积极参与课堂学习。分析问题、解决问题的能力，又加强了理论知识在实际的应用。还有其它的一些方法如讲授法、任务驱动法等，再此就不多说。二、课程目标课程的总体目标通过本课程的学习，使学生掌握网页设计的整个工作流程和方法，能够使用网页三剑客及其它相关软件完成网站前端相关工作（如网页效果图制作、网页布局、用代码生成网页等）在教学过程中，通过团队开发，形成基本的职业道德规范和职业素养，及团队合作精神。三、内容标准第一章HTML网页基础教学内容一、教学目的和要求1 、目的：1）掌握H

10、TMILC件编写方法；2）使用浏览器浏览HTM源文件；3）了解 html 基本概念2、要求：掌握常用的浏览器打开网页方法（IE 、火狐、360浏览器、谷歌浏览器等），掌握网页设计的一些基本概念；二、教学重点与难点重点：网页设计相关概念难点：网页设计相关属性3、 教学方法与手段讲授、案例演示、实际操作、作业通过理论讲授的方式让学生了解本章的理论的内容4、 内容部分经典网页欣赏1、1)蓝色代表海洋，宇宙，大海。是一种博大的颜色。此网页采用主色为蓝色。代表了一种博大的精神。也代表了本公司的科技领域强项。不同的蓝色的转换给人一种轻松的感觉。网页右边加以黄色区域来烘托出产品的外形，以及独特。网页整体简单

11、明了。正是这种公司所需要的。2)网页是一则汽车的网页，和传统汽车网页一样采用黑色的背景，凸显出一种高贵，科技的感觉。文章的文字部分采用高明度灰色，体现了主题。汽车轮子处的火，表现了激情，兴奋。使主题更加生化一步。给人庄重稳重的同时，不失激情活跃的一面。2、 网页设计相关概念1) )统一资源定位器(绝对路径、相对路径)2) 超链接3) 网站、静态网页、动态网页、主页、网页三剑客4) Html 语言概念5) 常见的浏览器6) Html 语言的基本结构及语法五、 作业 1 )使用浏览器打开网页源代码；2)写出html 超文本标记语言的主体结构；第二章 文字与段落标记教学内容一、教学目的和要求1 、目

12、的：1 )掌握网页中文字编排、美化方法；2）掌握网页中图像插入的方法2、要求：1 ）掌握标题标记2）掌握文本基本标记、文本格式化标记3）掌握段落标记、水平线标记二、教学重点与难点重点：掌握文本基本标记、文本格式化标记难点：单、双标记的区分3、 教学方法与手段讲授法、案例演示、讨论法4、 内容部分1、设置段落的标记段落标记是一个双标记，每个标记对表示一个段落；语法格式：<p>这里表示段落</p>2、换行标记换行标记是单标记，即不会成对出现，是在尖括号中加一个</br> 的单标记；语法格式：.</br>3、给代码添加注释添加注释是不会再网页中显示的语

13、法格式：<! 注释 >4、 粗体和斜体1 ） 粗体标记，是一对双标记，起到强调的作用语法格式：<b>标题文字</b>2 ） 斜体标记语气较弱语法格式：<i> 表示斜体标记</i>, 也是一对双标记；5、下划线与删除线标记为了使部分文字特别显示，可以使用下划线或者删除线标记语法格式：<u>下划线的</u><s>删除线的</s>6、上标和下标双标记语法格式：^上标_下标H 2o;H 2so4;a2+b2

14、=c27、文字标记：是一个双标记语法格式：<font color= ”颜色值”>文字</font>8、标题标记对齐属性h1-h6（h1: 表示文字标题最大h6 表示文字标题最小）对齐属性：align（ left 、 center 、 right）如： <h1 align= “ center ” >标题居中</h1>9、文本标记的属性1 ）字体属性face如 <font face= “需要的字体”>云南城市建设职业学院</font>2 ） 设置字体大小属性：size如<font size= “值”>云南城市建设职

15、业学院</font>绝对值：1-7相对值：-4 4 的整数，字体相对于3 号放大和缩小字号注意：属性与属性之间用空格隔开3 ）字体的颜色属性:color如 <font color= “颜色值”>云南城市建设职业学院</font>可以用英文单词或者二进制代码10、粗体标记：b 与 strong语法格式：<b>需要加粗的文字</b><strong>需要加粗的文字</strong>标记是可以嵌套的11、斜体的标记1） i 、 em、 cite语法格式：<i> 需要变为斜体的文字</i><

16、em瑞要变为斜体的文字 </em><cite> 需要变为斜体的文字</cite>12、大字号和小字号标记） big 和 small语法格式<big> 需要加大的文字v/ big >< s m a 1 1 >需要加大的文字</ s m a 1 1 >加大：在原来定义的字体大小基础上加大一个级别；变小：在原来定义的字体大小基础上变小一个级别；1 3、不自动换行的标记1）nobr语法格式：<nobr> 不换行的文字</nobr>14、水平线标记1） ） <hr />水平线标记的属性：wi

17、dth （宽度） 、 color （颜色） 、 size （高度） 、 noshade （无阴影） 、 align （对齐）1 ）空格：&nbsp2） < &lt;3） > &gt;五、 作业 制作一个公司简介页面（包含标题、文字、下划线、图片、横线）第三章 使用图像教学内容一、教学目的和要求1 、目的：1 ）掌握网页中图形图像的格式；2）掌握网页中图像插入的方法及图像的超链接；2、要求：1 ）掌握常用图像的格式2）掌握网页中插入图像的方法，及插入图像的标记二、教学重点与难点重点：网页中图像插入的方法及图像的超链接难点：超链接中图像的地址3、 教学方法与手段

18、讲授法、案例演示、讨论法、习题法4、 内容部分1 、常见的一些图像格式1 ） jpeg 压缩图像格式, 不支持透明，1670 万像素，图像要求比较绚丽的时候使用；2 ）Gif （图形交换格式）支持透明，256 色，支持动画（由多张位图连续播放形成）3）Png( firework )支持透明1670 万像素，是网络可移植格式；2、 如何在网页中插入图像<img> : 单标记语法格式：<img src= “地址” >Src ：表示指定图像的位置（路径）绝对地址：具有详细的位置，即提供目标文档的完整主机名称、路径信息、及文档的全称；相对地址：从当前文档开始的地址1） ）如果当

19、前文档和目标文档位置平行，则直接书写目标文档的全称；2） 如果当前文档和目标文档文件夹位置平行，则输入路径为文件夹名称/ 目标文档名称3） 如果当前文档所在文件夹和目标文档位置平行，则书写：目标文档全称3、属性:1 ） alt 属性语法格式：<img src= “地址”alt= “显示图片信息”>2）图像宽度高度属性：width 、 height<img src= “地址”alt= “显示图片信息”width= “属性值”>3） vspace （垂直间距）、hspace （水平间距）五、 作业 制作一个图文并茂的婚纱网页（素材图片自己到互联网上找）第四章 使用列表教学内

20、容一、教学目的和要求1 、目的：1 ）掌握有序列表；2）掌握无序列表2、要求：1 ）了解列表标记2）掌握有序、无序、定义、菜单列表的使用方法二、教学重点与难点重点：列表标记难点：有序、无序列表浮动的使用3、 教学方法与手段讲授法、案例演示、习题法4、 内容部分1 、列表的使用定义说明：列表是一种数据的排列方式, 对页面的布局非常重要, 分为三类: 有序列表、无序列表、自定义列表。无序列表：项目符号由几个符号构成有序列表：项目符号由字母、数字排列构成自定义列表：通过自己灵活定义1） 有序列表语法格式：<ol><li>表示列表项1</li><li>表

21、示列表项2</li><li>表示列表项3</li></ol>难点说明：本列表会自动换行，不用加换行符号，如果非要成一行，那么就给他加上css定义浮动;有序列表的序号类型(1、a、A i、I )默认情况下是数字;语法格式<ol type="序号类型”><li>表小歹”表项1</li><li>表小列表项2</li><li>表小列表项3</li></ol>设置列表的起始数值<ol type=“序号Wstart=“起始数值”><li

22、>表小列表项1</li><li>表小列表项2</li><li>表小列表项3</li></ol>注意：start="起始数值"中起始数值必须为数字，否则不起作用;2)无序列表无序列表的项目排列没有顺序，以符号作为分项标识；a) 语法格式<ul><li> 列表项 1</li><li> 列表项 2</li><li> 列表项 3</li></ul><ul>和<仙> 分别表不无序列表的开始

23、和结束，<li>表不列表项;b) 无序列表的列表类型(实心圆、空心圆、方框) disccirclesquare)3)目录列表c)无起始数值属性显示效果与无序列表相同，一般用来创建多列目录a) 语法格式<dir ><li> 列表项 1</li><li> 列表项 2</li><li> 列表项 3</li></dir >b) 类型<dir type="类型”><li> 列表项 1</li><li> 列表项 2</li><

24、;li> 列表项 3</li></dir >列表类型(实心圆、空心圆、方框) disccirclesquare)c)无起始数值属性4) 定义列表a)语法格式<dl>1321<dt> 定义条件1 </dt><dd>定义描述1</dd><dt>定义条件2</dt>< dd>定义描述2</dd>< dt>定义条件3</dt>< dd>定义描述3</dd></dl>5)菜单列表用于设计单列菜单列表，显示效果

25、与无序列表相同；语法格式：<menu ><li> 列表项 1</li><li> 列表项2</li><li> 列表项3</li></menu >五、 作业 1 、输入五组列表（无序、有序、自定义、菜单、目录列表）代码；并给每组第一个列表项加上超链接，链接目标自定。第五章 使用表格教学内容一、教学目的和要求1 、目的：1 ）掌握创建表格的方法；2）掌握表格属性2、要求：1 ）掌握创建表格方法；2）掌握表格边框、背景、行、列属性二、教学重点与难点重点：创建表格难点：合并单元格3、 教学方法与手段讲授法、案

26、例演示、习题法、问题法4、 内容部分1 、建立表格用到的四个标记1） table,是双标记，用于定义表格元素，<table>和</table>2） tr是双标记，用于定义表格的行；<tr>和</tr >3） td是双标记，用于定义表格的单元格；<td>和</td>4） th是双标记，用于定义表头；<th>和</th>2、语法格式<table><tr><th>第一行第一列单元格</th><th>第一行第一列单元格 </th><

27、;th>第一行第一列单元格 </th></tr><tr><th>第一行第一列单元格</th><th>第一行第一列单元格 </th><th>第一行第一列单元格 </th></tr></table>姓名性别年龄张三丰男25总结：<th>与</th>表示表头，里面的内容，自动加粗、自动居中;<td> 和</td>表示单元格，里面的内容不加粗，不居中;3、<table>标记属性1 ）、border:表示表格

28、的边框属性，属性值为数值；border="数彳1”;2 ）、width :表示表格宽度属性（属性值示数值或者百分比）3 ）、height :表格高度属性（属性值示数值或者百分比）4 ）、bgcolor:设置表格背景颜色的属性属性值可以是英文单词、也可以是 rgb或者cmyk颜色值5 ) 、 background: 用于设置表格背景图像属性；属性值：就是设置背景路径值(建议使用相对路径)6 ) 、 cellspacing: 用来设置表格间距，属性值是数值；7 ) 、 cellpadding ：用来设置表格边距，属性值是数值；8 ) align: 用于设置表格对齐的属性：属性值：left

29、rightcenter( 左对齐、右对齐、居中对齐)4、 表格行的控制1 ) width ：表示行的宽度(属性值示数值或者百分比)2 ) height ：行高度属性(属性值示数值或者百分比)3 )align ：设置行中文字对齐方式；4 )vlign ：文字垂直方向对齐5 )bgcolor:设置表格行背景颜色的属性属性值可以是英文单词、也可以是 rgb或者cmyk颜色值6) bordercolor ：设置表格行边框颜色5、 td 单元格的属性控制1 ) align 、 vlign ：单元格中水平、垂直方向文字对齐方式；2 ) bordercolor ：单元格边框属性3 ) bgcolor ：单元

30、格背景颜色4 ) rowspan ：表示单元格跨行的行数5 ) colspan ：表示单元格跨列的列数五、 作业 作业1、用html标记语言中表格标记和属性等完成上图所示表格；2、用html标记语言中表格标记和属性等完成本班级课程表;第六章使用建立超链接教学内容一、教学目的和要求1、目的：1）掌握超链接的基本知识；2）掌握超链接建立方法2、要求：1）掌握网页内部链接方法；2）掌握网页外部链接方法；3）掌握锚点链接方法二、教学重点与难点重点：外部链接、内部链接方法难点：链接时路径的正确书写三、教学方法与手段讲授法、案例演示、习题法四、 内容部分1 、路径的概念：路径分为相对路径和绝对路径相对路径

31、以引用文件的网页所在的位置为参考基础而建立的路径如：1) 如果链接到同一目录下，则直接输入要链接的文档的名称；2) 如果链接到下一级目录中的文件，则先输入目录名，然后再加“/ ”，在输入文件名3) 如果链接到上一级目录中的文件， 先输入“./ ”再输入目录名、文件名绝对路径()绝对路径是以站点的根目录为参考基础的目录路径在wwW以http开头的链接都是绝对路径说明：当链接到本机器上的文件时，建议使用相对路径，如果使用绝对路径，当把文件移动到其它盘符后，那么链接就会失效，这样就要对文件链接重新编辑才能使用。3、 建立超级链接文字1 ) 格式< a>要链接白文字</a>&l

32、t; a href= “路径” >要链接的文字</a><a>: 表示链接的开始< /a> ：链接的结束href ：定义文件链接的地址(路径、位置)2 ) Target 用于指定打开链接的目标窗口，默认方式是在原来的窗口中打开- blank: 在浏览器新的窗口中打开；- parent ：将链接的文件载入含有该链接框架的副窗口中打开；- self ：在同一框架中打开-top ：在当前整个浏览器窗口中打开格式：- a href= “路径” target= “ -blank ” >要链接的文字</a>图像的链接要将图片做成超链接，只需将 &l

33、t;img>标记放在<a>和</a>之间即可；格式：<a href= “链接图片地址”><img scr= “参数” ></a>邮箱的链接格式：< a href= “ mailto ： E-mail 地址” cc= “抄送人 E-mail 地址” &subject=“邮件主题”&body= “邮件正文”>描述文字</a>如：< a href= “ mailto ” cc= “” &subject= “祝福”&body= “十一节快乐”>写信 </a>

34、站内链接如果一个页面很长，寻找相应内容比较困难，就可以使用站内链接格式：< a href= “ #目标名称”target= “窗口名称”>目录文字</a>在链接的目标处使用<a name="目标名称” >超链接目标</a>五、 作业 1、 做一个脑筋急转弯页面的站内链接（至少10 个）2、 做一个图片链接页面3、 做一个文字链接页面（标题的）第七章 添加多媒体教学内容一、教学目的和要求1 、目的：1 ）掌握常见的媒体文件格式；2）掌握插入多媒体方法2、要求：1 ）设置滚动文字方法；2）掌握插入音频、视频文件方法；3）掌握设置网页背景音乐

35、方法二、教学重点与难点重点：音频、视频文件方法难点：滚动文字设置、鼠标控制（停止、运动）3、 教学方法与手段讲授法、案例演示、习题法、提问法4、 内容部分1 、滚动字幕使用滚动字幕可以增加网页的动感, 让网页显得更有生气, 达到动感十足的效果;<marquee>是一个双标记语法格式:<marquee> 文字 </marquee>属性 :direction 、 beavior 、 loop 、 scroollamount 、 scrolldelay 、 align 、 bgcolor 、 height 和 width 、 hspace 和 vspace1) d

36、irection ：用于设置滚动文字移动方向属性值：left （右向左移动）默认值right（左向右移动）up （下往上移动）down （上往下移动）2) behavior ：用于滚动文字的移动效果；属性值：Scroll ：循环往复滚动；Slide ：表示滚动到一方后停止，只滚动一次；alternate ：表示滚动一方后向相反方向滚动，交替进行3) loop ： 用于设置滚动文字的循环次数，如果未指定，则循环不止；4) scrolldelay：用于设置每次滚动的间隔的延迟时间，一般以毫秒作为单位5) align ：用于设置滚动文字的对齐方式top ：顶对齐middle ：中间对齐bottom

37、：底部对齐6) bgcolor:用于设置滚动的背景颜色；7) height 和width用于设置滚动文字的高度和宽度8) hspace 和vspace用于设置滚动文字四周的水平空间和垂直空间如何实现鼠标光标移动到滚文字上停止滚动；移开鼠标继续滚动效果；Onmouseover=“ javascript ： ( ) ”表示鼠标经过停止；Onmouseout=“ javascript ： ( ) ”表示鼠标移开继续运动；2、如何嵌入多媒体文件：网页中嵌入的多媒体不但有文字、图像还有音频、视频、flash 动画等文件1) 使用embed麻记嵌入多媒体文件(是一个单标记)属性说明：src 用于指定媒体文

38、件的地址Height 和 width 用于设置媒体文件的高度和宽度Loop用于设置媒体文件的播放次数Hidden用于隐藏播放器5、 作业 1 、制作一网页，在网页中插入滚动文字、视频、音频文件(素材自备)第八章 使用表单教学内容 一、教学目的和要求1 、目的：1 ）掌握表单标记；2）掌握菜单和列表使用方法；3）掌握文本框、文本域使用方法2、要求：1 ）熟悉表单对象；2）熟悉表单标记及其属性；二、教学重点与难点重点：表单概念、表单对象建立方法难点：密码框建立、菜单、复选框建立方法3、 教学方法与手段讲授法、案例演示、习题法、提问法4、 内容部分1、 、 建立表单1) ） 表单是实现交互式动态网页

39、的一种主要的外在形式，是网站管理者与浏览者之间沟通的桥梁，其主要功能是收集信息；由<form> 标记来定义；2) 格式<from> .</form>属性共有三个name 属性： “ form-name”method 属性： get 和 postaction 属性：表单处理程序的位置3) 输入标记是一个单标记，语法格式如下:<input>标记是表单中输入标记，<input name= "" file-name " type= "type-name” >4) 文本框单行文本框：当type的属性值为“

40、 text ”时表示输入项输入的字符串是以单行显示；value :定义文本框初始值size :定义文本框长度maxlength :定义输入最大字符串数如：联系方式：电子邮件：联系地址：=手机号码：=电话号码：QQ5) 密码框如：用户登录用户名：输入密码：当type属性的值：为password时表示的是密码框，其他属性与 text相似，不同之处，输入的 内容均以*表示，保证密码的安全性语法格式：<input type ="password" name= "" file-name " maxlength= "数值” >2、 按

41、钮表单中的按钮起着至关重要的作用，主要有三种类型：普通按钮、提交按钮、重置按钮；1)普通按钮当 type 的属性值为button 时表示该输入项输入的是普通按钮，语法格式如下：<input type= “ button ” name=“ file-name ” value= “ button-value ” >注意： value 表示显示在按钮上面的文字2)提交按钮当 type 的属性值为submit 时表示该输入项输入的是提交按钮，语法格式如下：<input type= “ submit ” name=“ file-name ” value= “ submit-value

42、” >3)重置按钮当 type 的属性值为reset 时表示该输入项输入的是重置按钮，语法格式如下：<input type= “ reset ” name=“ file-name ” value= “ reset-value ” >3、 单选框与复选框1) 单选框当 type 的属性值为radio 时表示该输入项输入的是单选项，语法格式如下：<input type= “ radio ” name=“ file-name ” value= “ value ” >2) 复选框当 type 的属性值为checkbox 时表示该输入项输入的是复选项，语法格式如下：<

43、input type= “ checkbox ” name=“ file-name ” value= “ value ” >4、 文件输入框当 type 的类型为file 表示输入项是一个文件输入框，用户可以在文件输入框内部填写自己硬盘中文件的路径，然后通过表单上传；格式： <input type= “ file ” name=“ file-name ” >5、 作业 1 、使用表单标记创建如下密码框用户登录用户名：输入密码：第九章使用框架结构教学内容一、教学目的和要求1、目的：1）掌握框架的使用方法；2）框架的属性；2、要求：1）掌握框架的使用方法；2）掌握框架的链接；二、

44、教学重点与难点重点：框架的属性难点：框架的链接三、教学方法与手段讲授法、案例演示、习题法四、内容部分框架的作用：通常用于页面导航；框架1、 框架集 <frameset> .<frameset>2、 框架 <frame> <frame>框架集：用<frameset>.<frameset> 标记来定义，用于定义网页显示的框架数量、大小等其他属性；框架：用<frame><frame>标记定义，定义的是网页上一个显示的区域3、语法格式：<html><head><title>

45、;.</title><framesetrows= “ value ” ， “ valueborder= “ value</head><frameset>< frame src=url /> <frameset><html>说明： 框架文档的书写格式与和html 文档的书写格式基本相同，唯一不同的是使用 frameset 标记替换了body 标记4、 框架结构1) )左右结构2) 上下结构3) 嵌套结构左右结构：采用 cols 属性，即在垂直方向将浏览器分割成多个窗口语法格式：<frameset cols=&qu

46、ot;value", "value", .>< frame src=url ” />< frame src=url ” /></frameset>Value 值可以是数值也可以是百分比，还可以混合；数值之间用逗号“，进行分割，有几个值则说明窗口就被分割成几个部分；上下结构：采用 rows 属性，即在水平方向将浏览器分割成多个窗口语法格式：< frame src=url/>< frame src=url ” /></frameset>例如：将网页页面水平分割成三个部分（10%， 20%，

47、60%）嵌套结构：既有左右分割，有上下分割语法格式：<frameset rows=< frame src=.<frameset cols=< frame src=value ", "value ", .“ url ” />value ", "value ", .“ url ” /></frameset> </frameset>例： 将网页分割成田字形2、 框架集的属性a) 设置窗口框架宽度border语法格式：<frameset rows= "value &q

48、uot;, "value ", . Border >< frame src= “ url ” />< frame src= “ url ” /></frameset>b) 设置边框颜色bordercolor语法格式：bordercolor=color-value< frame src= “ url ” />< frame src= “ url ” /></frameset>c) 设置框架隐藏frameborder语法格式：<frameset cols=value ", "

49、value ", .frameborder= "值” >< frame src= “ url ” />< frame src=url ” /></frameset>值为： 0 或者 1， 0 表示不显示边框，1 表示显示边框，默认情况下值为13、 框架属性a) scr ： 用于设置框架显示的文件路径；语法格式：< frame src= “ url ” /> ，如果没有src 属性则表示该窗口显示为空白b) name 用于定义框架的名称语法格式：< frame src= “ url ” name= “”/>c)

50、 frameborder 属性用于显示框架，值与框架集一样d) scrolling 属性用于设定是否有滚动条value 值有两个"yes"和"no" "auto "语法格式：< frame src= “ url ” name= “” scrolling= “ vlue ” />e) noresize 属性用于用户能否自己调整框架窗口大小语法格式：< frame src= “ url ” name=“ ” scrolling= “ vlue ” noresize/>注意：此属性无属性值f) marginwidth

51、 属性， 用于设定内容与框架的距离语法格式：< frame src=“ url ”name=“”marginwidth=“ vlue ” />g) marginheight 属性， 用于设定框架边缘高度语法格式：< frame src=“ url ”name=“”marginheight= “ vlue ” />五、 作业 1 、用框架将页面分割成左右两个部分（20%， 80%） ，然后再把右部上下分割成相等两个部分，并设置左边框架名称为left ，而且左边框架窗口显示滚动条，右边窗口不显示滚动条，左边框架上部分连接到右框架上部分接到；第十章 使用 css 样式表教学内

52、容一、教学目的和要求1 、目的：1 ）掌握css 样式表使用方法；2）掌握css 分类；3）属性的使用2、要求：1 ） css 样式表使用；2）掌握css分类及其属性；二、教学重点与难点重点：样式表的使用难点：样式表的名称定义三、 教学方法与手段讲授法、案例演示、习题法 内容部分1 、认识 cssCss 又称层叠样式表，是一种现在大家都使用的网页技术，为大多浏览器支持，成为网页设计必不可少的工具；2、样式表组成1 ）选择符此组样式编码所要针对的对象，可以是一个标记如（body， h1 等） ，也可以是定义了的 id 或 class 标记；2）样式属性：颜色、大小、定位、浮动等3）值：指定值、数

53、字、百分比3、样式表类型外联样式表、内联样式表、内嵌样式表4、语法格式如：1） <p class= "h” >.</p>样式表格式：.h.<p id="h”>.</p>样式表格式：#h.五、 作业 1 、 应用外联样式表对页面进行简单布局；网页设计实训部分1 、 实训目的与要求网页设计dreamwvaver 综合实训主要目的是让学生通过这门实践课程的学习了解和掌握网页设计的基本方法和技巧，通过不断上机实践训练达到能够熟练顺利完成网站的制作。掌握网站设计流程、技巧，集中实践使学生综合运用所学习的网页设计知识及以前所学习的计算机方

54、面的知识，按照网站制作的流程，完成一个具体、综合性的网站；巩固学生系统性的知识，培养学生解决实际问题的能力，锻炼相互合作的工作能力，提高学生综合素质。2、 实训内容1）实例实训（绿色食品、手机、餐饮、美容）以绿色食品网站设计的实例指导学生如何独立完成食品网站站点的设计和制作。让学生在机房实际操作，按照给定的实例完成实例中整个站点页面的创建和设计。2）自建站点实训（绿色食品、手机、餐饮、美容）让学生自行选择站点的主题， 从规划站点到一步一步完成整个站点的规划、设计、创建、调试等工作。3）总结对学生的全部作品进行批改，并选择案例对实训的结果进行考核。3、 参考步骤实训内容实训课时实训说明、知识回顾

55、基本知识回顾实训作品策划、规划书整体布局设计搜集和创建资源效果图制作程序设计首页模板设计二级页面模板设计各页面的细化、测试修改文档总结4、实训准备1）软件准备Dreamweaver、firework 、PhotoShop、logomaker 、Flash 中文版（本实训对 FLASH技术不做要求）。2）硬件准备网络条件：与因特网连接的局域网。（最好不带还原的计算机）教师用机： Windows xp或win7及以上版本。学 生用机：Windows xp或win7及以上版本。5、考核办法1） 网站规划书 10分2） 效果图设计 20分3） 编写代码30分4） 实训出勤20分5） 技术含量10分6） 整体美观统一搭配10分6、实训内容说明由实训指导教师自行选择网站作为实例，实例要求如下：1 .选择企业绿色食品网站或者其它企业网站。2 .站点模块功能清晰，能反映各模块的基本功能、结构清晰、风格统一、色调一致。3 .为了便于教学，站点应该具有大热 dreamweaver页面布局、链接、 CSS+div样式等网页设计制作中常用的知识点和操作。7、内容1）讲解和演示整个站点的制作过程和设计方法。2）、学生自由组队（三人一组分工合