第3章网页元素编辑PPT讲稿.ppt
第第3章网页元素编辑章网页元素编辑第1页，共57页，编辑于2022年，星期二3.1 插入图像语法：第2页，共57页，编辑于2022年，星期二插入图片标记的属性属性描述src图像源文件alt提示文字width，height宽度、高度border边框vspace垂直间距hspace水平间距align排列第3页，共57页，编辑于2022年，星期二*使用路径相对路径：如果图像文件就在本网站内部，通常以要显示该图像的网页文件为起点，通过层次关系描述图像的位置。绝对路径：如果图像不再本网站内部，那么通常以http:/开头的URL作为图像文件的路径。第4页，共57页，编辑于2022年，星期二3.2 超链接.1、建立超链接语法：链接文字 target用于指定打开链接的目标窗口，默认方式是原窗口，如果想让链接文件打开在一个新的窗口，可以设置target=“_blank”。第5页，共57页，编辑于2022年，星期二图像链接语法：第6页，共57页，编辑于2022年，星期二锚点链接pa href=“#目标名称”目录文字 p在链接的目标处（书签或锚）使用p超链接目标p 第7页，共57页，编辑于2022年，星期二邮箱链接语法：描述文字第8页，共57页，编辑于2022年，星期二 2、链接文字颜色属性 语法:Link属性表示默认没有单击过的连接文字颜色 Alink属性表示鼠标按下链接文字时候的链接文字颜色 Vlink属性表示单击过的链接文字颜色。第9页，共57页，编辑于2022年，星期二 3.3 表格1.表格的建立 建立表格主要用到四个标签：,。和标签为表格标签，主要来定义一个表格元素。和为行标签，定义表格的一行。和为表头标签，定义表格内的表头单元格。和为单元格标签，用于定义表格的单元格。第10页，共57页，编辑于2022年，星期二简单表格实例第11页，共57页，编辑于2022年，星期二程序代码程序代码建立表格学生信息表序号姓名年龄性别所学专业第12页，共57页，编辑于2022年，星期二1张力18男计算机应用技术2陈新17男图形图像制作3李晓莉17女计算机网络安全4蒋姚17女图形图像制作第13页，共57页，编辑于2022年，星期二2 表格修饰（1）标签属性属性描述border 边框width宽度height高度align对齐方式bgcolor背景颜色background背景图片cellspacing表格间距cellpadding表格边距第14页，共57页，编辑于2022年，星期二（2）表格标题 语法：表格标题（3）标签的属性值 height（高）,align,valign（垂直对齐方式）,bordercolor,bgcolor第15页，共57页，编辑于2022年，星期二（4）标签的属性值 width,colspan（横向合并单元格）,rowspan（纵向合并）,align,valign,bgcolor,bordercolor,background跨多列 或 跨多行 或 第16页，共57页，编辑于2022年，星期二合并单元格实例第17页，共57页，编辑于2022年，星期二程序代码程序代码表格实例 第一列第一栏 第一列之第二栏及第三栏 第18页，共57页，编辑于2022年，星期二 第二列及第三列之第 一栏 第二列第二栏 第二列第三栏 第三列第二栏 第三列第三栏 第19页，共57页，编辑于2022年，星期二 3.4 建立表单 表单是实现交互动态网页的一种主要的外在形式，是网站管理者与浏览者之间沟通的桥梁。表单的主要功能是收集信息，接受浏览者在网页中的操作，并传递给服务器端的表单处理程序。第20页，共57页，编辑于2022年，星期二 表单是网页上的一个特定区域，它由标签定义。语法：第21页，共57页，编辑于2022年，星期二name属性:用来定义表单的名称action属性:用来指定表单处理程序的位置method属性:用来定义表单结果从浏览器传送到服务器的方式。method的取值一般有两种:(1)get:只能提交1K以内的内容(默认)(2)post:可以提交大于1k字节的内容第22页，共57页，编辑于2022年，星期二3.4.1 输入标记 标签是表单中最常用的标记之一，它是个单独标签。基本语法：第23页，共57页，编辑于2022年，星期二 type属性值描述text文字域password密码域file文件域checkbox复选框radio单选框button普通按钮submit提交按钮reset重置按钮第24页，共57页，编辑于2022年，星期二文字域属值描述name 文字域的名称文字域的名称maxlength 文字域的最大输文字域的最大输入字符数入字符数size 文字域的宽度文字域的宽度value文字域的默认值文字域的默认值1、文字域、文字域texttext属性值用来设定在表单的文本域中，输入任何类型的属性值用来设定在表单的文本域中，输入任何类型的文本、数字或字母。输入的内容以单行显示。文本、数字或字母。输入的内容以单行显示。第25页，共57页，编辑于2022年，星期二结果结果结果结果姓名：姓名：代码代码代码代码姓名：姓名：姓名：姓名：input type=input type=input type=/第26页，共57页，编辑于2022年，星期二 2、密码域password 当type=“password”时，其属性与text很相似。password 所输入的字符全以号表示,以保证密码的安全性。第27页，共57页，编辑于2022年，星期二结果结果结果结果请输入密码：请输入密码：请输入密码：请输入密码：代码代码代码代码请输入密码请输入密码请输入密码请输入密码:input:input:input:/第28页，共57页，编辑于2022年，星期二 3、按钮(1)普通按钮button普通按钮主要是配合JavaScript脚本来进行表单的处理。value属性：用来设定显示在按钮上的文字。第29页，共57页，编辑于2022年，星期二结果结果结果结果请按下按钮：请按下按钮：请按下按钮：请按下按钮：代码代码代码代码请输入密码请输入密码请输入密码请输入密码:input:input:input:/第30页，共57页，编辑于2022年，星期二u(2)提交按钮submit 单击提交按钮后，浏览器可以将表单的输入信息传递给服务器。(3)重置按钮resetu 单击重置按钮后，浏览器可以清除表单的输入信息而恢复到默认的表单内容设定。第31页，共57页，编辑于2022年，星期二4、单选框radio和复选框checkbox (1)单选框u 当type=“radio”时,表示该输入项是一个单选项,具有相同name属性的单选按钮形成一个组,用户只能选择单选项中的一项作为输入信息。u checked属性，用来表示此项被默认选中。u value属性，用来设定选中项目后传送到服务器端的值。第32页，共57页，编辑于2022年，星期二结果结果结果结果性别：男性别：男性别：男性别：男 女女女女代码代码代码代码性别性别性别性别:男：男：男：男：input type=input type=input type=/女：女：女：女：input type=input type=input type=/第33页，共57页，编辑于2022年，星期二u(2)复选框u当type=“checkbox”时,表示该输入项是一个复选框，用户可以同时选中表单中的一个或多个复选项作为输入信息。u checked属性，用来表示此项被默认选中。u value属性，用来设定选中项目后传送到服务器端的值。第34页，共57页，编辑于2022年，星期二结果结果结果结果喜好：喜好：喜好：喜好：电影电影电影电影 看书看书看书看书代码代码代码代码喜好：喜好：喜好：喜好：input type=input type=input type=/input type=input type=input type=/第35页，共57页，编辑于2022年，星期二5、文件域u 当type=“file”时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。u 语法：u 第36页，共57页，编辑于2022年，星期二文件输入框实例第37页，共57页，编辑于2022年，星期二程序代码程序代码 插入文件框您的姓名:第38页，共57页，编辑于2022年，星期二密密密密 码码码码:input type=input type=input type=/请上传您的照片：请上传您的照片：请上传您的照片：请上传您的照片：input type=input type=input type=/第39页，共57页，编辑于2022年，星期二 3.4.2 选择标记 在表单中，通过和标签就可以在浏览器中出现一个下拉式的菜单或带有滚动条的列表菜单。语法：选项值选项值 第40页，共57页，编辑于2022年，星期二u size属性：用来设定显示的选项数目，默认值为1。u multiple属性：用来设定列表中的项目多选。n 当标签里面有size属性和multiple属性时，表示是列表；没有size属性和multiple属性，则表示下拉菜单。当然，在列表中，二者不一定同时使用。第41页，共57页，编辑于2022年，星期二选择标记实例第42页，共57页，编辑于2022年，星期二程序代码程序代码 插入选择标记用户调查请选择你喜欢的水果:第43页，共57页，编辑于2022年，星期二苹果香蕉梨子桔子橙子请选择你喜欢的饮料:橙汁可乐咖啡果汁第44页，共57页，编辑于2022年，星期二表单综合实例练习第45页，共57页，编辑于2022年，星期二 3.5 滚动字幕 使用标签，可以实现滚动字幕，以增加网页的动感，让网页显得更有生气，达到动感十足的视觉效果。语法:要滚动的文字 第46页，共57页，编辑于2022年，星期二的属性bgcolor设置滚动文字的背景颜色loop设置滚动文字的循环次数，若未指定或选取为infinite时，则循环不止。width设置滚动文字的宽度height设置滚动文字的高度scrollamount调整文字滚动的速度第47页，共57页，编辑于2022年，星期二scrolldelay设置文字每一次滚动的间隔之间的延迟时间，单位是毫秒，时间越短滚动越快hspace设置滚动文字四周的水平空间vspace设置滚动文字四周的垂直空间direction设置滚动文字的移动方向，left(默认方式)表示从右向左移动，right表示从左向右移动，up表示从下往上移动，down表示从上往下移动behavior设置滚动文字的移动效果,取值scroll表示循环往复滚动，slide表示滚动到一方后停止滚动，alternate表示滚动到一方后向相反方向滚动，交替进行滚动第48页，共57页，编辑于2022年，星期二滚动字幕实例1第49页，共57页，编辑于2022年，星期二程序代码程序代码 marquee direction=left behavior=scroll width=525 align=bottom滚动文幕可增滚动文幕可增加网页生动性加网页生动性第50页，共57页，编辑于2022年，星期二滚动字幕实例2第51页，共57页，编辑于2022年，星期二程序代码程序代码 设置滚动字幕的超链接设置滚动字幕的超链接a href=给我写信吧，带你给我写信吧，带你给我写信吧，带你给我写信吧，带你进入网页制作的世界进入网页制作的世界进入网页制作的世界进入网页制作的世界!第52页，共57页，编辑于2022年，星期二 3.6 嵌入多媒体文件 Web页面是多媒体的，网页内除了可以插入各种美观的图片，还可以在网页内播放音乐及电影，或者插入Flash动画等其他多媒体文件。使用标签可以将多媒体文件插入到网页中。语法：第53页，共57页，编辑于2022年，星期二1、插入音频(1)嵌入mp3语法:第54页，共57页，编辑于2022年，星期二 (2)设置背景音乐若浏览者希望在浏览网页的同时能够欣赏到背景音乐，可以通过标签实现。语法：背景音乐可以是mp3、midi或wav格式。第55页，共57页，编辑于2022年，星期二 2、插入视频 嵌入avi avi是一种视频文件，目前被广泛应用于动态效果演示、游戏过场画面等用途，是视频文件的主流。语法：第56页，共57页，编辑于2022年，星期二 3、插入Flash动画 嵌入Flash动画 swf文件是用Flash软件制作出来的，具有丰富的视频动画效果。现在任何的浏览器版本只要安装了Flash插件，就可以正常显示生动的Flash动画了。语法：第57页，共57页，编辑于2022年，星期二
