添加网页动态元素bac

西南科技大学计算机学院软件教研室 彭红 ph-F插入媒体插入媒体F添加导航条添加导航条F添加表单添加表单F实例演示实例演示西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash1.将光标定位到要插入将光标定位到要插入flash动画的位置；动画的位置；2.执行执行“插入插入”“媒体媒体”“flash”命令，弹命令，弹出出“选择文件选择文件”对话框，如图所示：对话框，如图所示：西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash3.按插入图象的方法插入按插入图象的方法插入flash文件即可；文件即可；4.选择插入的选择插入的flash文件，属性面板如图文件，属性面板如图4-3所示；所示；西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash5.单击单击“播放播放”按钮，可直接在设计页面按钮，可直接在设计页面中播放动画；中播放动画；6.若插入的是若插入的是flash源文件，可单击源文件，可单击“编辑编辑”按钮进入按钮进入flash界面进行编辑；界面进行编辑；7.可根据网页的需要，在属性面板中进行可根据网页的需要，在属性面板中进行设置。设置。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash按钮按钮1.将光标定位到要插入将光标定位到要插入flash按钮的位置上；按钮的位置上；2.执行执行“插入插入”“媒体媒体”“flash按钮按钮”命令，打开命令，打开“插入插入flash按钮按钮”对话框，如图所示对话框，如图所示西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash按钮按钮3.在在“样式样式”列表框中选择需要的按钮样式，列表框中选择需要的按钮样式，“范例范例”；4.在在“按钮文本按钮文本”文本框中输入要在按钮上显示的文本，文本框中输入要在按钮上显示的文本，如：如：“返回返回”；5.在在“字体字体”下拉列表中设置按钮文本的字体，在下拉列表中设置按钮文本的字体，在“大小大小”数值框中设置字号；数值框中设置字号；6.在在“链接链接”文本框中指定按钮所要链接的文档的文本框中指定按钮所要链接的文档的URL地地址；址；7.在在“目标目标”下拉列表中指定所链接文件的打开方式；下拉列表中指定所链接文件的打开方式；8.在在“背景色背景色”列表中设置列表中设置flash按钮的背景色；按钮的背景色；西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash按钮按钮9.在在“另存为另存为”文本框中指定一个文本框中指定一个SWF格式的文件名来保格式的文件名来保存存flash影片，并保存到当前文档相同的文件夹中。影片，并保存到当前文档相同的文件夹中。10.设置完成后，单击设置完成后，单击“确定确定”按钮，即可将按钮，即可将flash按钮插按钮插入到当前位置；入到当前位置；11.选取插入的选取插入的flash按钮，可以在属性面板中编辑相关的按钮，可以在属性面板中编辑相关的属性；属性；12.单击单击“播放播放”按钮，当鼠标移到按钮上时就会看按钮按钮，当鼠标移到按钮上时就会看按钮的动态效果。的动态效果。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页内容添加网页内容-实例演示实例演示西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash文本文本1.将光标定位到要插入将光标定位到要插入flash文本的位置上；文本的位置上；2.执行执行“插入插入”“媒体媒体”“flash文本文本”命令，打开命令，打开“插入插入flash文本文本”对话框；对话框；3.在在“字体字体”和和“大小大小”文本框中设置文本的字体和大小；文本框中设置文本的字体和大小；4.单击单击“加粗加粗”和和“斜体斜体”按钮设置字体格式；按钮设置字体格式；5.单击单击 按钮设置文本段落的对齐方式；按钮设置文本段落的对齐方式；6.在在“颜色颜色”列表中设置文本的正常显示颜色；列表中设置文本的正常显示颜色；7.在在“转滚颜色转滚颜色”列表中设置文本的效果颜色；列表中设置文本的效果颜色；8.在在“文本文本”框中输入要显示的文本；框中输入要显示的文本；西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-插入媒体插入媒体F 插入插入flash文本文本9.在在“链接链接”文本框中设置与文本框中设置与flash文本链接文本链接的文件，也可不设置；的文件，也可不设置；10.在在“目标目标”下拉列表中指定所链接的对象下拉列表中指定所链接的对象打开时的显示方式；打开时的显示方式；11.在在“背景颜色背景颜色”中设置中设置flash文本的背景文本的背景颜色；颜色；12.在在“另存为另存为”文本框中指定一个文本框中指定一个flash文本文本的保存路径。的保存路径。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加导航条添加导航条13.设置完成后，单击设置完成后，单击“确定确定”按钮，即可将按钮，即可将flash文本插入到当前位置；文本插入到当前位置；14.选取插入的选取插入的flash文本，可以在属性面板中文本，可以在属性面板中编辑相关的属性；编辑相关的属性；西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加导航条添加导航条1.将光标定位到要插入导航条的位置；将光标定位到要插入导航条的位置；2.执行执行“插入插入”“图象对象图象对象”“导航条导航条”命令，命令，弹出弹出“插入导航条插入导航条”对话框，如下图所示对话框，如下图所示导航条浏览网页起引导作用。制作导航条操作步骤如下：导航条浏览网页起引导作用。制作导航条操作步骤如下：F插入导航条插入导航条西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加导航条添加导航条3.在在“项目名称项目名称”文本框中输入第一个导航条的文本框中输入第一个导航条的名名称称；4.在在“状态图象状态图象”文本框中输入正常状态下导航条文本框中输入正常状态下导航条图象的图象的URL地址，也可单击地址，也可单击“浏览浏览”按钮进行选按钮进行选择；择；5.在在“”“”鼠标经过图象鼠标经过图象“文本框中输入当鼠标移到文本框中输入当鼠标移到导航条上时显示图象的导航条上时显示图象的URL地址；地址；6.在在“按下图象按下图象”文本框中输入鼠标按下状态时图文本框中输入鼠标按下状态时图象文件的象文件的URL地址；地址；F插入导航条插入导航条西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加导航条添加导航条7.在在“按下时鼠标经过图象按下时鼠标经过图象”文本框中输入按文本框中输入按下后图象文件的下后图象文件的URL地址；地址；8.在在“替换文本替换文本”文本框中输入当导航条不能文本框中输入当导航条不能正确显示时，可用该文本表达；正确显示时，可用该文本表达；9.在在“按下时，前往的按下时，前往的URL”文本框中输入单文本框中输入单击导航条时要跳转到的击导航条时要跳转到的URL地址，并在右侧地址，并在右侧的下拉列表中选择文档被打开的目标窗口；的下拉列表中选择文档被打开的目标窗口；西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加导航条添加导航条10.选中选中“预先载入图象预先载入图象”复选框，在浏览时浏览器复选框，在浏览时浏览器全部下载这些图象到本地站点中，如果选中全部下载这些图象到本地站点中，如果选中“页页面载入时就显示面载入时就显示鼠标按下图象鼠标按下图象”复选框，则复选框，则在网页被浏览器载入后，将图象显示为按下状态；在网页被浏览器载入后，将图象显示为按下状态；11.在在“插入插入”下拉列表中选择导航条在网页中的放下拉列表中选择导航条在网页中的放置方向；置方向；12.设置完一个导航条元件后单击设置完一个导航条元件后单击“+”按钮添加其他按钮添加其他导航元件；导航元件；13.单击单击“确定确定”按钮，即可在文档中插入一个导航按钮，即可在文档中插入一个导航条。条。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加导航条添加导航条1.执行执行“修改修改”“导航条导航条”命令，打开命令，打开“修修改导航条改导航条”对话框对话框；2.在各参数中重新设置导航条的各项；在各参数中重新设置导航条的各项；3.修改完后，单击修改完后，单击“确定确定”按钮即可；按钮即可；F编辑导航条编辑导航条西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-表单介绍表单介绍绝大多数的网站都用到了表单，表单是收集访问者反馈信息的有效方式，如在网上申请邮箱、申请加入某某论坛、参加网上调查、填写订货单及建立检索界面时，都是通过表单来实现的，如图所示即为表单的示例。当访问者将信息输入到表单中，并单击提交按钮（如图所示的 按钮，网页不同，其形式可能不同）后，如果已经建立了后台的处理程序，则会将表单中的信息发送到服务器，并调用后台处理程序对这些信息进行处理，完成后将处理信息返回给访问者，或基于该表单内容执行一些操作来进行响应。西南科技大学计算机学院软件教研室 彭红 ph-单行文本字段密 码 文本字段按钮单选项第第6 6讲讲 添加网页动态元素添加网页动态元素-表单介绍表单介绍西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-表单介绍表单介绍在Dreamweaver MX 2004插入栏中有专门的“表单”选项卡，单击相应的按钮并进行相应的操作即可完成表单的创建及表单对象的添加。可以将整个网页创建成一个表单网页，也可以在网页的部分区域中添加表单，其创建方法都相同。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单设置表单属性将插入点定位到插入的表单中，打开属性面板进行设置，各属性的含义如图所示。表单的名称，用于处理程序调用。传送表单数据的方式。指定提交给服务器进行处理的数据所使用的编码类型。处理表单的程序。打开返回信息网页的方式。传送表单数据的方式一般有POST和GET两种，其中GET方式是以将表单中的信息追加到处理程序地址后面的方式进行传送，如单击提交按钮后在浏览器地址栏中常看到如http:/ 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单设置表单属性表单的名称，用于处理程序调用。传送表单数据的方式。指定提交给服务器进行处理的数据所使用的编码类型。处理表单的程序。打开返回信息网页的方式。采用POST方式传送表单数据时，它将表单信息嵌入到请求处理程序中，在理论上这种方式对表单的信息量是不受限制的。如果在属性面板的“方法”下拉列表框中选择“默认”选项，则采用浏览器默认的设置对表单数据进行传送，一般的浏览器将以GET方式传送。默认的MIME类型为application/x-www-form-urlencoded，通常与POST方法协同使用。如果要创建文件上传表单，则应选择multipart/form-data类型。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单1.将光标定位到要创建表单的位置；将光标定位到要创建表单的位置；2.执行执行“插入插入”“表单表单”“表单表单”命令插入表单，命令插入表单，此时文档窗口中出现红色虚线围绕的区域，如图所此时文档窗口中出现红色虚线围绕的区域，如图所示示F创建表单创建表单表单区域表单区域西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单3.将光标定位到表单中，在表单属性面板中修将光标定位到表单中，在表单属性面板中修改相应的属性，如下图所示改相应的属性，如下图所示F创建表单创建表单西南科技大学计算机学院软件教研室 彭红 ph- 表单是一个容器，只有在表单中添加了表单对象后才能真正地起作用，让访问者输入数据或执行其他交互。文本字段隐藏域文本区域复选框单选按钮单选按钮组列表/菜单跳转菜单图像域文件域按钮标签字段集第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单内容添加表单内容西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单 文本字段是最常见的表单对象之一，可接受任何类型的字母、数字、文本等内容的输入。文本字段可以是单行或多行，也可是密码域，使用密码域时，当访问者输入信息时将以星号或圆点显示以达到保密的目的。F添加表单对象添加表单对象-文本域文本域西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单1.将光标定位在表单中；将光标定位在表单中；2.在在“插入插入”“表单表单”选项卡中单击选项卡中单击“文本字段文本字段”、“隐藏性隐藏性”和和“文本区域文本区域”按钮添加三种不同类型按钮添加三种不同类型的文本域；的文本域；3.选取插入的文本域，在属性面板的选取插入的文本域，在属性面板的“类型类型”栏中可栏中可转换文本域为转换文本域为“单行单行”、“多行多行”或或“密码密码”，如，如下图所示下图所示F添加表单对象添加表单对象-文本域文本域西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单4.在在“文本域文本域”文本框中输入文本域的名称，文本框中输入文本域的名称，在网页每个文本域都只有惟一的名称，该名在网页每个文本域都只有惟一的名称，该名称用于在脚本语言中作为标识符；称用于在脚本语言中作为标识符；5.在在“字符宽度字符宽度”文本框中设置文本域中所能文本框中设置文本域中所能显示的最大字符数；显示的最大字符数；F添加表单对象添加表单对象-文本域文本域西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单6.在在“最多字符数最多字符数”文本框中设置单行文本域文本框中设置单行文本域或密码域中所能输入的最大字符数；或密码域中所能输入的最大字符数；F添加表单对象添加表单对象-文本域文本域西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单7.在在“类型类型”栏中可通过单选项来转换三种不栏中可通过单选项来转换三种不同的文本域；同的文本域；8.在在“初始值初始值”文本框中输入文本域中初次被文本框中输入文本域中初次被载入时显示的内容；载入时显示的内容；F添加表单对象添加表单对象-文本域文本域西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-文本域文本域文件域使访问者浏览到本地计算机上的某个文件，并将该文文件域使访问者浏览到本地计算机上的某个文件，并将该文件作为表单数据上传。件作为表单数据上传。文件域文件域 西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单1.将光标定位到表单中要插入文件域的位置；将光标定位到表单中要插入文件域的位置；2.执行执行“插入插入”“表单表单”“文件域文件域”命令，命令，即可添加如图所示的文件域即可添加如图所示的文件域；F添加表单对象添加表单对象-文件域文件域文件域文件域 西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单3.选取文件域，单击属性面板，修改相关属性，选取文件域，单击属性面板，修改相关属性，如下图所示如下图所示F添加表单对象添加表单对象-文件域文件域西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单1.将光标定位到表单中要添加复选框的位置；将光标定位到表单中要添加复选框的位置；2.执行执行“插入插入”“表单表单”“复选框复选框”命令，即可在命令，即可在表单中添加一个方格，同时在复选框后面输入复选表单中添加一个方格，同时在复选框后面输入复选框所指的内容，如下图所示框所指的内容，如下图所示F添加表单对象添加表单对象-添加复选框添加复选框（允许在一组选项中选择一个或多个选项）复选框复选框 西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单3.选取添加的复选框图标，单击属性面板修改选取添加的复选框图标，单击属性面板修改相关属性，如下图所示相关属性，如下图所示F添加表单对象添加表单对象-添加复选框添加复选框西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加单选按钮添加单选按钮（单选按钮具有惟一性，在同组选项中只能选择一个选项。）1.将光标定位到表单中要添加单选按钮的位置；将光标定位到表单中要添加单选按钮的位置；2.执行执行“插入插入”“表单表单”“单选按钮单选按钮”命令，即可命令，即可在表单中添加一个单选按钮，同时输入单选按钮所在表单中添加一个单选按钮，同时输入单选按钮所指的内容，如下图所示指的内容，如下图所示单选按钮单选按钮 西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-添加单选按钮添加单选按钮3.选取插入的单选按钮，可在属性面板中设置选取插入的单选按钮，可在属性面板中设置其相关属性，如下图所示其相关属性，如下图所示西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-添加单选按钮添加单选按钮4.创建单选按钮组创建单选按钮组1)将光标定位到表单中需要插入单选按钮组的将光标定位到表单中需要插入单选按钮组的位置；位置；2)单击单击“表单表单”选项卡中的选项卡中的“单选按钮组单选按钮组”按按钮，打开钮，打开“单选按钮组单选按钮组”对话框，如图所示对话框，如图所示西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-添加单选按钮添加单选按钮4.创建单选按钮组创建单选按钮组3)在打开的在打开的“单选按钮组单选按钮组”对话框中填入相应对话框中填入相应的内容，如下图所示；的内容，如下图所示；西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-创建列表创建列表/菜单菜单 列表和菜单都可以使访问者从一系列有限的选项中选择适当的值。列表同时显示表中的所有项目，并允许访问者选择多个选项。菜单一次显示一项，并只允许访问者从中选择一项。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-创建列表创建列表/菜单菜单1.将光标定位到表单中需要插入列表或菜单的位将光标定位到表单中需要插入列表或菜单的位置；置；2.执行执行“插入插入”“表单表单”“列表列表/菜单菜单”命令，命令，即可插入即可插入“列表列表/菜单菜单”图标；图标；3.选取插入的列表或菜单，打开其属性面板；选取插入的列表或菜单，打开其属性面板；4.在在“列表列表/菜单菜单”文本框中输入列表或菜单的名文本框中输入列表或菜单的名称；称；5.在在“类型类型”栏中选择创建的类型；栏中选择创建的类型；西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-创建列表创建列表/菜单菜单6.单击单击“列表值列表值”按钮打开按钮打开“列表值列表值”对话框，对话框，如图所示；如图所示；7.在在“项目标签项目标签”项中输入列表或菜单中需添加项中输入列表或菜单中需添加的项目，如图所示的项目，如图所示西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-创建列表创建列表/菜单菜单8.单击单击“+”按钮添加按钮添加“项目标签项目标签”，单击，单击“-”按按钮从列表中删除不要的项目标签，单击三角形钮从列表中删除不要的项目标签，单击三角形按钮调整列表中各项的顺序按钮调整列表中各项的顺序；9.单击单击“确定确定”按钮将项目添加到按钮将项目添加到“初始化时选初始化时选定定”列表框中；列表框中；10.在属性面板的在属性面板的“高度高度”文本框中可设置列表文本框中可设置列表所能显示的行数，若选取所能显示的行数，若选取“允许多选允许多选”复选框，复选框，则表示用户可以从列表中同时选中多项。则表示用户可以从列表中同时选中多项。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页动态元素添加网页动态元素-添加表单添加表单F添加表单对象添加表单对象-添加按钮添加按钮1.将光标定位到表单中需要插入按钮的位置；将光标定位到表单中需要插入按钮的位置；2.执行执行“插入插入”“表单表单”“按钮按钮”命令，即可命令，即可在表单中创建一个在表单中创建一个“提交提交”按钮；按钮；3.选中按钮，展开属性面板，修改相关属性。选中按钮，展开属性面板，修改相关属性。西南科技大学计算机学院软件教研室 彭红 ph-第第6 6讲讲 添加网页内容添加网页内容-实例演示实例演示西南科技大学计算机学院软件教研室 彭红 ph-本讲结束本讲结束作业：在“beite”的站点中的，index.htm文档中，添加媒体、导航条、表单及表单元素等内容，完成后用浏览器进行浏览。