网页制作教案.doc

网页制作教案 年级：高二 老师：李漫一、网页制作基础知识教学目标：了解网页制作的一些基础知识，如网站和网页的区别、网页的类型、网页的构成元素等，然后在了解的基础上再通过练习来巩固。教学重点难点：在深刻了解概念的基础上把理论转化成实际的应用。教学过程：在制作网页之前，首先要了解一些关于web网页的基本知识，了解一下构成一个网站的基本元素等。一、网站与网页网站是网页的集合，是一个整体，其中包括一个首页和若干个网页。网站设计者先把整个网站结构规划好，然后再分别制作各个网页。大多数网站为网站浏览者提供一个首页，首页再链接多个网页。一般来说，一个网站是由很多网页构建而成的。首页是一个网站的门面，也是访问量最大的一个页面，访问者可以通过首页进入到网站的各个分页。因此，网站首页的制作是很重要的，它给浏览者一个第一印像，首页也奠定了网站的主题和整个基调，使访问者进入首页就能清楚地知道该网站所要传递的信息。一般网站的概念： 专门放网页的文件夹 放图片的文件夹 放flash、css样式等 首页一个完整的小网站结构：当然因为网站的类型不同，结构也会有所不同。如大型门户网站很注重信息量的多少和及时更新，避免一些花哨等，所以这类网站一般没有引导页。二、网页的类型从网页是否执行程序来分，可分为静态网页和动态网页这两种类型。静态网页一般以.htm或.html为后缀结尾的，俗称html文件。动态网页内含有程序代码，运行于服务器端的程序、网页和组件等都属于动态网页，在网络中看到的动态网页通常是以.asp、.jsp等后缀结尾的，但也有以.php结尾的，如我们学校的校园网首页。一个完整有价值的网站应该是集静态、动态、动画于一身的。三、网页的构成元素网页构成的基本元素主要包括文本、图像、动画、超链接、音频、视频、表格和表单等。下面我们着重介绍和练习表格的属性。表格是网页排版不可缺少的一部分，它可以对文字和图片进行精确的定位，使页面保持一定的版式 1、表格属性练习1、通过插入表格和表格属性对话框制作出以下表格：填充0边距0边框1背景无边框颜色#FF0000填充为0填充0间距2边框1边框颜色#FF0000 填充为5填充0间距2边框4背景无边框颜色#FF0000 填充：用于设置单元格内容和单元格边界之间的像素数间距：用于设置相邻的表格单元格之间的象素数对齐：用于设置表格相对于同一段落中其他元素的显示位置边框：用于设置表格边框的宽度，单位为像素注：将边框设置为0时，这时表格将不显示边框，它所起到的作用是定位功能，这也是表格应用广泛的主要原因之一。2、制作细线表格间距为1边框为0表格背景色为蓝色单元格背景色为白色 作粗线表格间距为4边框为0表格背景色为蓝色单元格背景色为白色 思考：作如下三张表格：二、表格基础练习教学目标：通过练习和讲解，使学生能学会表格的基本应用和一些难度较高的表格制作，为以后的网页制作打下基础。教学重点难点：对表格本身的属性能熟练的掌握应用及表格在网页排版中的灵活应用。教学过程：由于HTML语言本身并没有提供较多的手段，所以往往需要借助于网页的一个重要元素表格来襀网页的精细排版。表格在网页的实际制作过程中主要应用于网页定位上，通过设置表格的宽度、高度和比例大小等属性，把不同的网页元素分别固定在不同的单元格之中以达到页面的平衡。表格除了在网页定位上具有精准控制的特点外，还具有规范和灵活的特点。正是因为这些原因，表格在网页制作过程中扮演着非常重要的角色，几乎所有的网页都会应用到表格定位技术。一、表格的总体布局用表格来布局网页一般是从上而下，一步一步来，而不是先用一张表格把整个网页框起来。在制作过程中注意用背景颜色，注意图片大小和单元格大小，且要注意文字的规范性。二、制作细线单元格在本张网页中，其中涉及到几处小线条的单元格（如下图），以下介绍细线单元格的做法：细线1细线2第一步：制作好表格后，先在单元格属性高上设置好所需的高度，如下图：第二步：把网页切换“代码视图”，然后对选中的单元格删除“ ”空格代码，如下图：三，制作表格利用表格的属性间距、边框、边框颜色制作如上表格。三、html语法教学目标：了解HTML语言的语法结构，初步掌握HTML语言的基本结构。教学重点难点：1、HTML的基本结构及文字版面、图像的HTML语法。2、HTML语法含义的理解及进一步自学方法的掌握。 教学过程：一、上机作业：1、上机任意建一张网页，选择“代码视图”，看一下网页的源代码2、新建一张空白网页，它的源代码是空白的吗？3、写出红色、绿色、蓝色、黑色、白色的颜色代码二、html语法1、什么是HTML，它与网页是什么关系 HTML是标记网页格式的格式化语言，如p表示段落，br表示换行等。本节课的重点就是记住这些常用的HTML标记。2、HTML语言的特点 HTML标记放在与之间，一般./成对使用，也有个别单独使用 HTML不区分大小写 许多HTML标记中含有属性，如font size=5 HTML源代码中的一个或多个半角空格，一个或多个换行在网页显示时只当一个半角空格显示3、掌握HTML文件的总体格式html文件开始headtitle网页标题/title/head上部分是文件头，下部分是文件体body网页内容/body/html文件结束从这个结构中可以看出，HTML文件是由head和body二部分组成的，它们都放在html标记之间。4、学习“网页属性”的设置，了解BODY标记的属性 在“网页属性”中可以对整张网页的效果进行设置，对它的设置，在HTML文件中体现在BODY标记的属性中。打开“网页属性”设置的方法是：单击菜单“修改网页属性”。要求掌握以下属性的含义：background,bgcolor,text,link,leftmargin5、颜色代码 #ff0000 ff0000 red双引号可以换成单引号或不加引号，小写字母可以改成大字字母6、掌握常用的HTML标记文字版面编辑类注释：!-注释文字-（单独使用）段落：p./p左对齐：p align=left./p居中对齐：p align=center./p. 右对齐：p align=right./p默认为左对齐换行：br（单独使用）水平线：hr（单独使用）水平线有参数设置,如标题：Hn（n1到6，h1标记的字体最大，h6最小）字体：font face=黑体 size=5 color=#ff0000./font原样显示标签：.图像：img src=图像的路径和文件名 width=宽度 height=高度（单独使用）表格标签表格的标签用、三个标签就可以完成。表格的尺寸： width/height表格边框的尺寸： border表格边框、单元格边框的颜色： bordercolor 表格的位置： align 表格的背景颜色或背景图像： bgcolor/background 表格的格框线宽度(间距)： cellspacing 表格与内容的空隙（填充）： cellpadding 单元格的水平垂直对齐方式： align/valign 设置合并行或列： rowspan/colspan 其它如：项目列表、编号列表、仅对该文档的CSS样式等HTML语法，请自行查看，暂不要求熟记。7、用HTML的眼光看DW软件，它的功能是什么？ 就是把用户设计的网页转换成HTML文件。所以我们通过属性面板用鼠标对网页的设置与在源代码视图方式下直接改代码的效果是完成相同的。其实，早在DW软件诞生之前，就有高手在设计网页了，他们用什么软件，记事本呀，高手啊！8、让我们也来做一会高手 阅读以下代码，想一想，网页的显示效果是怎么样的，再在记事本中输入以下代码，注意保存时选“全体文件”，文件扩展名为“.htm”htmlheadtitle个人网页/title/headbody bgcolor=#FFFFCCp我爱网页设计/phrp我是06font color=#FF0000 size=5 face=黑体电脑英才 班/fontbr的一名strong学生/strong?img src=a1.jpg width=140 height=214 /p/body/html9、DW能做出所有HTML语法支持的效果吗？ HTML标准由国际组织W3C负责制订，但做为超级软件霸主微软公司常常会自定义一些标准，最典型的就是滚动字幕功能，标准的HTML语法并不直接支持滚动字幕。所以DW软件中也不能直接插入滚动字幕，但我们可以直接在DW的代码视图方式下直接插入IE所支持的滚动字幕代码。这样虽然在DW中看不到滚动效果，但用IE浏览网页时，还是能看到滚动效果的（当然如果你使用的不是IE浏览器，而是Nescape,Mozilla等，就不一定能看到滚动效果了）。滚动字幕的代码是：marquee需要滚动的文字/marquee详细的滚动字幕的HTML语法，请试用微软公司的网页制作软件FrontPage补充知识：如何到Internet上找HTML教程？ 21世纪的人才不是说要记得多少知识，而在于当需要知识时，能迅速找到知识，以前说“教师一瓶水，才能教会学生半瓶水”，现在是“教师首先要自已接上自来水，再去帮助学生也接上自来水”。教会同学们自动到Internet上找资料，就是帮学生接上自来水。到Internet上找资料，一靠的是经验，如果同学们平时经常上网，就会记住一些比较好的资源网站或教学网站，以后需要时可以去这些网站看看，推荐同学可以看看以下网站二靠搜索引擎的帮忙，现在世界上的网站已经突破50亿张，如何在茫茫网海中迅速找到需要的信息，离不开搜索引擎，以下是现在比较有名的搜索引擎，推荐同学们使用 四、创建站点教学目标：通过学习使学生了解什么是站点，并能学会应用站点。教学重点难点：1、了解站点的概念以及站点的优点。2、学会应用站点。 教学过程：1、什么是站点？ 站点是存放一组网页的一个存储地方，一般是一个磁盘目录，在该目录中存放该网站的所有网页及有关的图片、FLASH动画、CSS样式文件等。建立站点时，我们一般在自已的电脑上建一个文件夹，然后把制作的所有网页及图片放在此文件夹中，最后把这个目录上传到WEB服务器上，以供英特网上的所有用户浏览。2、建立站点有什么好处？想一想：如果某网页中用到图片a1.jpg，后来你把图片的名字改为a2.jpg了，这样打开网页时还能正确显示该图片吗？如果我们在DW的站点管理器中更改图片文件名，则网页中有关该图片的文件名也为自动更新，这就是使用站点管理的最大好处。3、站点的典型文件结构（略）4、如何建立一个空站点例：在D盘上建立s060101的文件夹，把这个文件夹定义为站点，站点名的“s060101的个人网站”操作步骤：第一步：在D盘上建立s060101文件夹第二步：在DW软件中，选择菜单“站点-新建站点”，可以按向导一步一步操作，但我建议大家直接选“高级”卡片第三步：在“本地信息”中，填入“站点名称”，把“本地根文件夹”指定为D盘的s060101目录5、如何把一个已有目录定义为一个站点例：首先单击下载网站，把网站包下载到D盘，并解压缩，在D盘上会自动生成一个文件夹“祖国腾飞”，按上面所讲的步骤，把该目录定义为一个站点，站点名为“祖国腾飞”。6、什么叫首页(主页)一个网站往往有许多网页组成，网页之间相互链接，其中第一页网页叫首页，也称主页。首页的文件名一般为index.htm，部分系统规定首页为default.htm。当首页命名符合系统要求时，在浏览网页时可以省略首页文件名，如 就表示 /index.php/t235 就表示 /t235/index.htm7、使用站点管理器定义完站点后，就可以使用站点管理器来管理站点了。显示站点面板：单击菜单“窗口-站点”。我们可以在站点管理器中通过右击“新建文件夹”、“新建文件”、“文件重命名”、“删除文件”，也可以通过拖动，把文件移动到其它文件夹。五、表格的分析和制作一教学目标：通过分析制作网页，提高对表格在排版中的应用能力。教学重点难点：学会分析网页中各表格的结构，并能学着制作相似的网页。教学过程：可浏览“蓝色理解”网站的首页()，试着学做网页的局部，从优秀网站中学习网页设计的技巧与方法，是提高网页设计水平的极好方法，今天我们一起来分析著名网页设计网站“蓝色理想”的设计技巧，希望同学们能举一反三，平时能分析一些优秀网页。练习一：、设置好背景色（616378） 、首先制作一张1行2列的表格（填充0、间距6、边框0），设置一个样式（因为接下去都要用到）：背景为白色，对齐方式为居中，字体大小为pt。在第一个单元格中插入图片blueidea，在第二个单元格中先插入一个两行一列的单元格，把第二个单元格缩小，再采用复制的方法。再接着在下面插入一个二行一列的单元格，分别填充上不同的颜色。如图所示：练习二：细横线条注意采用复制的方法。先做一个二行一列的表格，把第二行行高设为1，在代码视图中把该行的“nbsp；”删除，有该字符存在时，表格的行高1不起作用。接下去就用复制的方法。练习三：练习做整张网页，如下图：图略作业：请大家完成blueidea网页。六、表格的分析和制作二教学目标：通过分析制作网页，学会使用简单的方法解决复杂的问题。教学重点难点：学会分析网页中各表格的结构，能照样制作出网页。教学过程：（素材下载）练习一：网页头部：可先建一个三行一列的表格（因为这三行都比较简单），表格的宽度根据“中国电信”的banner图片，设成770像素宽，第一行和第三行分别填充上颜色（可用吸管吸取），如下图所示：练习二：导航是本张网页的难点，采用的是和“蓝色理想”导航制作类似的方法，先建一张一行一列的表格（宽度为770像素），填充上背景图片，然后在这张表格里再嵌套一张一行两列的表格，因为是细线表格，所以间距设置为，填充上背景色（蓝色），选中两个单元格，填充同样的背景图片，再把第二个单元格宽度设成10像素，再在表格里复制这两个单元格。练习三：制作如下的标题：这些标题主要的特点是有深色的下线条，使标题看起来有立体感，主要也是采用表格制作，主要步骤如下：、先建一个一行两列的表格，把左边的表格定为5像素宽，填充上颜色，再建一个一行一列的表格，设置为1像素高，如下图所示：练习四：做完整张网页，如下图所示（点击看原网页）：图略作业：课外自行完成，并请熟练练习两次。七、复杂表格的制作教学目标：通过学习，让学生学会制作立体化表格，再通过练习巩固。教学重点难点：在基本知识巩固的情况下，再练习制作一些复杂的表格。教学过程：（素材下载）一、立体化表格立体表格一般是通过颜色对比达到立体效果的，可以使表格具有更加美丽的外观视觉。下面通过制作一个具有立体效果的，使我们更加容易地掌握如何设置表格的属性，以及编辑表格的标签和查看表格的标签属性。 源码如下：省略练习一：请大家做出如下立体凸出表格：思考：请做出如下凹进表格： 二、格式化表格（P136）执行“命令”“格式化表格”，在“格式化表格”对话框中选择你要的方案。三、圆角表格（P139）用户名密码登陆注册四、请完成以下网页（点击看原图）八、综合网页制作教学目标：学生能独立完成教学内容中的综合网页制作。教学重点难点：能独立分析综合网页中的结构。教学过程：素材下载一、请大家自行在一节课内完成一个完整网页：略制作步骤：、制作网页的头部时请大家注意白色的空隙，如下图所示：请用准确的方法将其完成。、以下表格的属性为填充：3；间距：5；边距：；3、先建一个一行一列的表格，间距设为像素，表格背景色为红色，单元格背景色为灰色（#D7D7D7），再插一个五行一列的表格，分别插入文字和图片。二、请大家再完成第二张网页，如下图所示：略注：1、背景颜色：#990000。 2、表格内的背景颜色都填充为白色。作业：把第二张网页链接到以往作业本上。九、综合网页制作二教学目标：学生能独立完成教学内容中的综合网页制作。教学重点难点：能独立分析综合网页中的结构。教学过程：素材下载请大家在一节课的限定时间内完成以下网页。网页分析：、网页头部这张网页与之前的网页的结构稍有不同，网页头部可先建一个一行二列的表格，表格背景色为黑色，如下图所示：、网页中部网页中部分三部分，第一部分如下图所示，先建一个一行三列的表格，再把每一个单元格布局排版好。第二部分，建一个一行列的表格，插入图片，如下图所示：第三部分，建一个二行四列的表格，如下图所示：作业：完成这张网页，并以“CG联盟”链接到作业上。十、网页中的疑难问题教学目标：归纳总结上一阶段的知识点，并罗列学生易出错的几个知识点和实例，以让学生更好的掌握。 教学重点难点：1、解决上一阶段学生易出错的知识点。、让学生理解出错的原因。 教学过程：同学们在设计网页时，经常会发现一些“莫明其妙”的问题，其实问题并不莫明其妙，只是我们还没有掌握网页设计的规律。 特别是有同学经常反映，在DW中看上去好好的网页，在IE中一预览，效果就完全变样了，其实，这一般都是由于表格的宽度没设置正确引起的。如有的单元格宽度只有200，硬要插入一张250的图片；再如表格的总宽度只有600，但由于手工改动了单元格的宽度，使各单元格的宽度之和已经大于600了，这也会造成网页布局出错；还有如果把表格背景图片插入在tr中也无法显示，应该插入在td中等等。这里我收集整理的9张网页就是平时同学们作业中出现的错误，请大家一定仔细分析，找出出错的原因，并能改正错误。下载“网页设计中的8个疑难问题”十一、链接教学目标：理解并掌握网页、网站之间的链接方法。教学重点难点： 、站内链接与远程链接的制作。 、网页之间的关系处理教学过程：(练习下载)链接是网页的灵魂，通过链接可以把不同的网页链成一个整体，组成了全世界的一张信息网。今天我们来学习链接的有关知识，链接主要分七种，下面一一说明。一、站内链接主要用于网站内部的链接，使用相对路径，是使用最多的一种链接。站内链接分四种情况：链接到同一目录的其它文件，直接使用文件名。如a1.htm链接到子目录的其它文件，使用子目录/文件名。如aa/a1.htm链接到父目录，使用./文件名。如./a1.htm链接到兄弟目录，要求先退回到父目录，再进行兄弟目录。如./bb/b1.htm注意：扩展名不能省略，文件名可以是网页、图片、FLASH、声音、视频、压缩包等各种类型，如浏览器不能打开文件则会自动变成下载。以上第4种情况时也可以使用根相对路径，如/sXXXXXX/bb/b1.htm练习一：从b1.htm链到b2.htmb2.htm从b1.htm链到a1.htmweek7/a1.htm从b1.htm链到a1.gifweek7/a1.gif从b1.htm链到f1.htm./flash/f1.htm 也可以用根相对路径/sXXXXXX/flash/f1.htm从b1.htm链到index.htm./index.htm(index.htm可省略) 所以也可以是 ./或.二、站外链接主要用于链接到外部网站，链接用http:/域名开头。站外链接分3种情况链接到外部网站的首页，用http:/域名。如链接到外部网站的某目录，用http:/域名/目录。如/tvguide链接到外部网站的某网页，用http:/域名/目录/文件名。如/homepage/20041024/images/100169_hdd2.jpg三、站间链接主要用于在同一服务器上的不同用户之间的友情链接，不同的系统方法是不一样的，在LINUX主机上用/帐号表示。如链接到s030303帐号，就用/s030303，注意不要用“http”。/帐号就是链接到该帐号的public_html目录的首页。以下为我校校园网目录结构图。四、页内链接当一张网页上的内容较多时，可以使用网页链接。首先要在目标处定义“锚”，再在链接处输入#锚名，注意锚名应为字母或数字。定义锚的方法：先把光标定位在目标处，再使用面板工具插入一个锚定义页内链接：在链接处输入#锚名。通过文件名#锚名可以链接以另外一张网页的“锚”处五、图像链接、热区链接不但文字可以做为链接对象，图像也可以。选中图像，在属性的链接处输入链接地址即可。如果希望在图像的不同位置单击，可以分别链接到不同的目标，就需要设置热区，方法是选中图像后，先在图像上画热区，再在每个热区上分别设置链接。链到分别进入不同学区网站六、其它链接下载：只要文件名的扩展名是exe、zip、rar等，浏览器会自动电子邮件：链接处输入mailto:邮箱地址，如mailto: 注意mailto:后没有/FTP链接：链接处输入ftp:/域名，如七、其它空链接：有时为了做出链接效果，但并不想真正链接到某处，可以使用空链接。方法：在链接处输入#，注意是半角。在何处打开链接：在链接属性“target”可以设置在何处打开链接。设为_blank表示新开窗口打开链接，不做任何设置或设为_self表示在当前窗口打开链接。八、有关链接HMTL代码例1定义锚：a name=top/a例2链接到锚：a href=#top返回顶部/a例3链接到某网页：a href=week7/7-1.htm target=_blank作品一/a例4图像链接：a href= target=_blankimg src=logo.gif? width=32 height=32/a十二、框架教学目的： 掌握框架的创建、保存以及框架属性的设置。 教学重点： 从理论上理解框架，会应用框架。教学难点： 框架的保存、应用。教学过程： 一、框架入门所谓框架就是把屏幕分成几个部分，如左右型框架，T字型框架，在框架的不同部位分别显示不同的网页，一个框架的网页，一定包括N1张网页，如左右型框架包含左右二张网页和一张总的框架页。框架是由框架集和单个框架组成的，框架集定义一组框架的布局和属性，包括框架的数目、大小和位置以及在每个框架中初始显示的页面的URL。框架实例 二、创建框架练习一：做一个最简单的左右型框架网页（如网页）第一步：打开DW软件，新建一张空白网页第二步：选择“文件”“框架”或者直接单击框架面板第三步：拖动框架左边框，向右拖，把屏幕分成左右二半（一般左小右大）第四步：分别在左右二个框架内输入文字注意如何删除框架？答：将光标放在框架的边框上，当光标分为双向箭头时按住鼠标左键，将框架的边框拖出父框架或页面之外。三、保存框架练习二：保存框架，每个框架页代表一个单独的网页，所以在保存文件时必须保存各个子框架。第一步：保存左框架，鼠标移入左框架内，单击“文件”“保存”，选择“保存框架”，可保存为D：lxleft.htm。第二步：保存右框架，鼠标移入右框架内，单击“文件”“保存”，选择“保存框架”，保存为D：lxright.htm。第三步：保存框架页，鼠标点击框架的边框线，即选中框架组，然后单击“文件”“保存”，保存为D：lxindex.htm。 第四步：打开总的框架页index.htm，就会自动打开相关的框架子页。四、框架属性练习三：创建刚才创建好的框架属性，按住ALT键的同时，单击某边框架页，即可以选中此框架页第一步：把左框架页名称设置为leftfm，框架边框颜色为蓝色，边界宽度为30像素第二步：把右框架页名称设置为rightfm，当框架内的内容显示不下时要求有滚动条第三步：设置框架集边框设置为有，边框宽度为3，左框架列宽为180像素五、链接框架内容练习四：做一个有链接的左右型框架网页，要求单击左边的链接后，内容在右边显示。（只有已经命名的框架才能正确设置链接。）第一步：做好三个链接网页a1.htm，a2.htm，a3.htm第二步：选中左边的“第一章”链接文字，把它链接到a1.htm，并把“目标”设为右框架的名称rightfm第三步：依次设置其它，第二章链接到a2.htm，第三章链接到a3.htm，并目标设为右框架名称rightfm第四步：保存各个框架和框架页第五步：也可以选择“保存全部”来进行总的保存六、学生练习（练习下载）练习一：做一个T字型框架，把它保存在d:kj文件夹中练习二：练习做书本上的实例练习三：建立如下所示的第一张网页，特别要注意一定要把左边栏目的链接全部设置好，再修改右边的内容后，另存为第二、第三网页。 这样做的一组网页有一个缺点，如果想修改左边栏目中的文字，必须修改全部网页，所以说网页更新不太方便。七、框架代码 分析代码： frameset rows=* cols=206,357 frame src=left.htm name=leftfm frame src=right.htm name=rightfm /frameset 说明：frameset表示框架页，rows=*表示是左右型框架，没有上下结构，cols=206,357表示左框架宽为206、右框架宽为357，frame表示框架，src=left.htm表示框架网页保存的名称，name=leftfm表示框架名称八、小结使用框架，可以将一个网页分割成多个独立的网页，通过框架集可以使这些独立的框架能够很好地能使在一起。注意框架的保存要把每个框架页保存，还要保存整个框架页。九、作业、 做一个上下型框架网页。、熟悉框架有关的HTML代码。十三、表单教学目的： 使学生初步了解表单的作用并学会应用。教学重点：1、理解表单在前后台程序设计中的地位与作用2、掌握表单及表单元素的制作方法3、初步学会从别人的网页中分析表单的接口教学难点：表单元素的制作、表单接口的分析预习作业：1、网页中表单的作用是什么？2、常用的表单元素有哪些？3、试着建一个含有“文本框、单选、复选、按钮”的简介表单 一、认识表单1、表单概念 所有用于收集资料的表单内容都必须放在一组统一的标记里面，这组标记叫做“表单”。其中每一个给用户填写或选择的区域叫做表单域。 2、表单对象： 文本域，隐藏域，文件上传域，复选框，单选按钮组，列表和菜单，跳转菜单，文本表单按钮，图形提交按钮。窗体顶端姓名 口令 性别 男 女爱好 体育 音乐 文学班级 窗体底端二、什么是前台、后台表单的作用是把来自用户的信息提交给后台服务器，如在用户注册时，把用户的姓名、密码等信息提交给服务器。含有文本框、单元框等元素的网页我们就称为表单网页，也称为前台界面，而后台程序一般用ASP、PHP、JSP等网络编程语言来设计，所以表单是实现用户与网站沟通的桥梁。常用的表单元素有窗体顶端文本框密码框单选群众 团员 党员复选体育 音乐下拉按钮窗体底端练习一:制作以上这张简介的表单网页 注意：首先要插入一个空表单，为了排版方便，可以再插入一张表格（6行2列），最后插入表单元素三、理解表单及表单元素的属性设置 表单属性： 表单名称：不太常用，一般用于网络编程 动作：指接收数据的后台程序，必须正确填写 方法：指向后台传递数据的方法，有GET和POST二种方法，默认为GET。 使用何用方法，由后台程序决定。文本框属性： 名称：必须正确填写，注意大小写。当提供数据时，其实就是提供一组赋值语句。a=XXX b=YYY等练习二：百度搜索 分析：根据分析百度搜索网页，知道 后台程序为/使用的数据传递方法为GET 文本框名为“wd” 另有一个隐藏域，名称为“cl”，值为3(隐藏域是一种向后台隐敝地传递数据的方法)窗体顶端 窗体底端思考题：能不能根据练习二，通过分析GOOGLE的网页，设计一个google搜索页作业：完成以下表单（完成后链接到作业本上的第六周）十四、表单制作提高教学目标： 1、学习制作美观的表单（用CSS） 2、了解有关表单的HTML代码教学重点、难点：表单的综合应用和表格编排以及css样式的应用。教学过程：（素材下载）练习一：美观表单的制作练习二：分析校园网首页，制作如下所示的登录界面，要求能正确登录练习三：表单的综合应用请看具体实例一：请大家自行完成，注意在表单里用表格编排。了解有关表单的HTML代码 表单form name=form1 method=post action=a1.php./form 文本框name=loginname type=text id=loginname size=6 文本域textarea name=textarea/textarea 密码框input type=password name=textfield 单选input type=radio name=sex value=boy 复选input type=checkbox name=abc id=abc value=aa 提交按钮input type=submit name=Submit value=提交 重置按钮input type=reset name=Submit2 value=重置 普通按钮input type=button name=Submit3 value=按钮 下拉列表select name=grade id=gradeoption value=1 selected高一/optionoption value=2高二/optionoption value=3高三/option/select作业：必做练习一和练习三选做练习二十五、表单网页的制作教学目标：通过制作综合的表单网页，让学生巩固上一阶段所学知识。教学重点难点：表单的排版和美化。教学过程：素材下载一、请完成如下表单网页：注意点：1、请大家先要看所提供的素材，根据图片再建表格。如Banner的制作，在表格中先要做背景填充图片temp_r1_c2.jpg，这样才会有白边出现。2、“人才库加盟”这张表单的制作是先建一张7行4列的表格，间距为1,边框为1，边框颜色为#33CC00。二、作业请大家完成这张表单网页，并以“东方网络”链接到第六周的作业本上。十六、css样式教学目标：介绍CSS样式表的概念、应用，及深化CSS样式知识点。教学重点难点： 、样式表的导入和导出。 、对两种以上链接样式的掌握。教学过程：一、css样式表我们已经学习了如何在DW中使用CSS，我们通过CSS面板可以建立、修改、删除CSS样式，我们也知道了新建CSS样式文件或仅对该文档建立样式。但我们知道的仅此而已，离开DW软件，我们对CSS不无所知。今天我们要来学习CSS语法，来深入了解CSS的实质。CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。优点是结构与格式分离；对网页布局、字体、背景和其它图文效果实现更加精确的控制；更好的易用性和扩展性，可以单独以一个文件的形式出现。网页设计最初是用HTML标记来定义页面文档及格式，例如标题h1、段落p、表格table、链接a等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。你可以用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。二、基础语法 CSS语法主要有三种：自定义CSS样式，格式为“样式名” 如：.a1 定义样式名为.a1，颜色为红色，文字大小为12象素 自定义样式名必须由“点”开头，样式名最好为字母或数字 自定义样式通过class=样式名可被任何HTML标记运用 如： p class=a1./ptable class=a1./table div class=a1./divspan class=a1./span重定义HTML标记，格式为“HTML标记属性名：属性值；属性名：属性值；” 如：h1 body重定义HTML标记的功能是改变HTML的原有功能，如上面的定义把“标题1”文字定义为红色字，网页的所有文字大小这12象素CSS选择器，专用于控制链接的显示效果，共有4种选择器a:link控制链接的默认显示效果a:visited控制链接被单击后的显示效果a:hover控制鼠标移到链接上时的显示效果a:active控制鼠标按下时的显示效果（较少使用） 以上4中选择器第4种较少使用，在定义选择器时，必须严格按此顺序定义，否则可能会无效练习一：分析以下CSS代码的功能，变上机验证.a1color: #FF0000;body color: #333333;background-color: #FFCCFF;text-align: center;margin-top: 0px;font-size: 12px;line-height: 150%;a:linktext-decoration: none;a:visitedtext-decoration: none;a:hovercolor: #FF0000;text-decoration: underline;三、如何在网页中插入CSSCSS分类 嵌入式：在独立的文档用CSS样式 外部链接式：使用外部独立的CSS文件存放定义。方法1：仅在该文档。定义的CSS效果只在该文档中有效。语法格式：在网页头中输入如下语句style type=text/css!-CSS语句-/style方法2：链接一个外部的CSS样式文件，这种方法的最大好处是整个网站可以共享一个CSS文件。语法格式：在网页头中加入以下语句link href=mycss.css rel=stylesheet type=text/css，其中mycss.css是形如.a1color: #FF0000;body color: #333333;background-color: #FFCCFF;text-align: center;margin-top: 0px;font-size: 12px;line-height: 150%;a:linktext-decoration: none;a:visitedtext-decoration: none;a:hovercolor: #FF0000;text-decoration: underline;的文本文件。练习二：设置body样式为： B