添加网页动态元素ba.ppt

《添加网页动态元素ba.ppt》由会员分享，可在线阅读，更多相关《添加网页动态元素ba.ppt（45页珍藏版）》请在三一办公上搜索。

1、西南科技大学计算机学院软件教研室 彭红,插入媒体,第六讲 添加网页动态元素,添加导航条,添加表单,实例演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-插入媒体,插入flash 将光标定位到要插入flash动画的位置；执行“插入”“媒体”“flash”命令，弹出“选择文件”对话框，如图所示：,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-插入媒体,插入flash 按插入图象的方法插入flash文件即可；选择插入的flash文件，属性面板如图4-3所示；,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-插入媒体,插入flash 单击“播

2、放”按钮，可直接在设计页面中播放动画；若插入的是flash源文件，可单击“编辑”按钮进入flash界面进行编辑；可根据网页的需要，在属性面板中进行设置。,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-插入媒体,插入flash按钮 将光标定位到要插入flash按钮的位置上；执行“插入”“媒体”“flash按钮”命令，打开“插入flash按钮”对话框，如图所示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-插入媒体,插入flash按钮 在“样式”列表框中选择需要的按钮样式，“范例”；在“按钮文本”文本框中输入要在按钮上显示的文本，如：“返回”；在“字体

3、”下拉列表中设置按钮文本的字体，在“大小”数值框中设置字号；在“链接”文本框中指定按钮所要链接的文档的URL地址；在“目标”下拉列表中指定所链接文件的打开方式；在“背景色”列表中设置flash按钮的背景色；,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-插入媒体,插入flash按钮在“另存为”文本框中指定一个SWF格式的文件名来保存flash影片，并保存到当前文档相同的文件夹中。设置完成后，单击“确定”按钮，即可将flash按钮插入到当前位置；选取插入的flash按钮，可以在属性面板中编辑相关的属性；单击“播放”按钮，当鼠标移到按钮上时就会看按钮的动态效果。,演示,西

4、南科技大学计算机学院软件教研室 彭红,演示,第6讲 添加网页内容-实例演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-插入媒体,插入flash文本将光标定位到要插入flash文本的位置上；执行“插入”“媒体”“flash文本”命令，打开“插入flash文本”对话框；在“字体”和“大小”文本框中设置文本的字体和大小；单击“加粗”和“斜体”按钮设置字体格式；单击 按钮设置文本段落的对齐方式；在“颜色”列表中设置文本的正常显示颜色；在“转滚颜色”列表中设置文本的效果颜色；在“文本”框中输入要显示的文本；,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-

5、插入媒体,插入flash文本在“链接”文本框中设置与flash文本链接的文件，也可不设置；在“目标”下拉列表中指定所链接的对象打开时的显示方式；在“背景颜色”中设置flash文本的背景颜色；在“另存为”文本框中指定一个flash文本的保存路径。,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加导航条,设置完成后，单击“确定”按钮，即可将flash文本插入到当前位置；选取插入的flash文本，可以在属性面板中编辑相关的属性；,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加导航条,将光标定位到要插入导航条的位置；执行“插入”“图象对象”“导

6、航条”命令，弹出“插入导航条”对话框，如下图所示,导航条浏览网页起引导作用。制作导航条操作步骤如下：,插入导航条,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加导航条,在“项目名称”文本框中输入第一个导航条的名称；在“状态图象”文本框中输入正常状态下导航条图象的URL地址，也可单击“浏览”按钮进行选择；在“”鼠标经过图象“文本框中输入当鼠标移到导航条上时显示图象的URL地址；在“按下图象”文本框中输入鼠标按下状态时图象文件的URL地址；,插入导航条,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加导航条,在“按下时鼠标经过图象”文本框中输入按

7、下后图象文件的URL地址；在“替换文本”文本框中输入当导航条不能正确显示时，可用该文本表达；在“按下时，前往的URL”文本框中输入单击导航条时要跳转到的URL地址，并在右侧的下拉列表中选择文档被打开的目标窗口；,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加导航条,选中“预先载入图象”复选框，在浏览时浏览器全部下载这些图象到本地站点中，如果选中“页面载入时就显示鼠标按下图象”复选框，则在网页被浏览器载入后，将图象显示为按下状态；在“插入”下拉列表中选择导航条在网页中的放置方向；设置完一个导航条元件后单击“+”按钮添加其他导航元件；单击“确定”按钮，即可在文档中插入

8、一个导航条。,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加导航条,执行“修改”“导航条”命令，打开“修改导航条”对话框；在各参数中重新设置导航条的各项；修改完后，单击“确定”按钮即可；,编辑导航条,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-表单介绍,绝大多数的网站都用到了表单，表单是收集访问者反馈信息的有效方式，如在网上申请邮箱、申请加入某某论坛、参加网上调查、填写订货单及建立检索界面时，都是通过表单来实现的，如图所示即为表单的示例。当访问者将信息输入到表单中，并单击提交按钮（如图所示的 按钮，网页不同，其形式可能不同）后，如果已经

9、建立了后台的处理程序，则会将表单中的信息发送到服务器，并调用后台处理程序对这些信息进行处理，完成后将处理信息返回给访问者，或基于该表单内容执行一些操作来进行响应。,西南科技大学计算机学院软件教研室 彭红,单行文本字段,密码文本字段,按钮,单选项,第6讲 添加网页动态元素-表单介绍,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-表单介绍,在Dreamweaver MX 2004插入栏中有专门的“表单”选项卡，单击相应的按钮并进行相应的操作即可完成表单的创建及表单对象的添加。可以将整个网页创建成一个表单网页，也可以在网页的部分区域中添加表单，其创建方法都相同。,西南科技大学计算

10、机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,设置表单属性,将插入点定位到插入的表单中，打开属性面板进行设置，各属性的含义如图所示。,表单的名称，用于处理程序调用。,传送表单数据的方式。,指定提交给服务器进行处理的数据所使用的编码类型。,处理表单的程序。,打开返回信息网页的方式。,传送表单数据的方式一般有POST和GET两种，其中GET方式是以将表单中的信息追加到处理程序地址后面的方式进行传送，如单击提交按钮后在浏览器地址栏中常看到如http:/=master&txtEmail=的形式，它就是用GET方式传送的表单信息。使用这种方式不能发送信息量大的表单（不能超过8192个字符）

11、，只适用于访问者登录这种信息量小的表单。,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,设置表单属性,表单的名称，用于处理程序调用。,传送表单数据的方式。,指定提交给服务器进行处理的数据所使用的编码类型。,处理表单的程序。,打开返回信息网页的方式。,采用POST方式传送表单数据时，它将表单信息嵌入到请求处理程序中，在理论上这种方式对表单的信息量是不受限制的。如果在属性面板的“方法”下拉列表框中选择“默认”选项，则采用浏览器默认的设置对表单数据进行传送，一般的浏览器将以GET方式传送。默认的MIME类型为application/x-www-form-urlencod

12、ed，通常与POST方法协同使用。如果要创建文件上传表单，则应选择multipart/form-data类型。,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,将光标定位到要创建表单的位置；执行“插入”“表单”“表单”命令插入表单，此时文档窗口中出现红色虚线围绕的区域，如图所示,创建表单,表单区域,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,将光标定位到表单中，在表单属性面板中修改相应的属性，如下图所示,创建表单,演示,西南科技大学计算机学院软件教研室 彭红,表单是一个容器，只有在表单中添加了表单对象后才能真正地起作用，让访问者

13、输入数据或执行其他交互。,文本字段隐藏域文本区域复选框单选按钮单选按钮组,列表/菜单跳转菜单图像域文件域按钮标签字段集,第6讲 添加网页动态元素-添加表单内容,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,文本字段是最常见的表单对象之一，可接受任何类型的字母、数字、文本等内容的输入。文本字段可以是单行或多行，也可是密码域，使用密码域时，当访问者输入信息时将以星号或圆点显示以达到保密的目的。,添加表单对象-文本域,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,将光标定位在表单中；在“插入”“表单”选项卡中单击“文本字段”、“隐藏性”和“

14、文本区域”按钮添加三种不同类型的文本域；选取插入的文本域，在属性面板的“类型”栏中可转换文本域为“单行”、“多行”或“密码”，如下图所示,添加表单对象-文本域,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,在“文本域”文本框中输入文本域的名称，在网页每个文本域都只有惟一的名称，该名称用于在脚本语言中作为标识符；在“字符宽度”文本框中设置文本域中所能显示的最大字符数；,添加表单对象-文本域,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,在“最多字符数”文本框中设置单行文本域或密码域中所能输入的最大字符数；,添加表单对象-文本

15、域,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,在“类型”栏中可通过单选项来转换三种不同的文本域；在“初始值”文本框中输入文本域中初次被载入时显示的内容；,添加表单对象-文本域,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-文本域,文件域使访问者浏览到本地计算机上的某个文件，并将该文件作为表单数据上传。,文件域,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,将光标定位到表单中要插入文件域的位置；执行“插入”“表单”“文件域”命令，即可添加如图所示的文件域；,添加表单对象-文件域,文件

16、域,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,选取文件域，单击属性面板，修改相关属性，如下图所示,添加表单对象-文件域,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,将光标定位到表单中要添加复选框的位置；执行“插入”“表单”“复选框”命令，即可在表单中添加一个方格，同时在复选框后面输入复选框所指的内容，如下图所示,添加表单对象-添加复选框（允许在一组选项中选择一个或多个选项）,复选框,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,选取添加的复选框图标，单击属性面板修改相关属性，如下图所示,添加表单对象

17、-添加复选框,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加单选按钮（单选按钮具有惟一性，在同组选项中只能选择一个选项。）,将光标定位到表单中要添加单选按钮的位置；执行“插入”“表单”“单选按钮”命令，即可在表单中添加一个单选按钮，同时输入单选按钮所指的内容，如下图所示,单选按钮,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-添加单选按钮,选取插入的单选按钮，可在属性面板中设置其相关属性，如下图所示,演示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-添加单选按钮,创

18、建单选按钮组,将光标定位到表单中需要插入单选按钮组的位置；单击“表单”选项卡中的“单选按钮组”按钮，打开“单选按钮组”对话框，如图所示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-添加单选按钮,创建单选按钮组,在打开的“单选按钮组”对话框中填入相应的内容，如下图所示；,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-创建列表/菜单,列表和菜单都可以使访问者从一系列有限的选项中选择适当的值。列表同时显示表中的所有项目，并允许访问者选择多个选项。菜单一次显示一项，并只允许访问者从中选择一项。,西南科技大学计算机

19、学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-创建列表/菜单,将光标定位到表单中需要插入列表或菜单的位置；执行“插入”“表单”“列表/菜单”命令，即可插入“列表/菜单”图标；选取插入的列表或菜单，打开其属性面板；在“列表/菜单”文本框中输入列表或菜单的名称；在“类型”栏中选择创建的类型；,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-创建列表/菜单,单击“列表值”按钮打开“列表值”对话框，如图所示；在“项目标签”项中输入列表或菜单中需添加的项目，如图所示,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加

20、表单,添加表单对象-创建列表/菜单,单击“+”按钮添加“项目标签”，单击“-”按钮从列表中删除不要的项目标签，单击三角形按钮调整列表中各项的顺序；单击“确定”按钮将项目添加到“初始化时选定”列表框中；在属性面板的“高度”文本框中可设置列表所能显示的行数，若选取“允许多选”复选框，则表示用户可以从列表中同时选中多项。,西南科技大学计算机学院软件教研室 彭红,第6讲 添加网页动态元素-添加表单,添加表单对象-添加按钮,将光标定位到表单中需要插入按钮的位置；执行“插入”“表单”“按钮”命令，即可在表单中创建一个“提交”按钮；选中按钮，展开属性面板，修改相关属性。,演示,西南科技大学计算机学院软件教研室 彭红,综合演示,第6讲 添加网页内容-实例演示,西南科技大学计算机学院软件教研室 彭红,本讲结束,作业：在“beite”的站点中的，index.htm文档中，添加媒体、导航条、表单及表单元素等内容，完成后用浏览器进行浏览。,