1 / 20

第九章 Internet 和 WEB 技术

第九章 Internet 和 WEB 技术. Shan dong Economics University. 使用 Dreamweaver 制作多媒体网页. 网络是目前和今后多媒体产品发布的一个重要的平台。在众多多媒体网页软件中， Dreamweaver 具有强大的编辑功能，可以设计出图文并茂、内容丰富、具有吸引力的网页。 启动 Dreamweaver MX 网站制作流程 创建站点与添加素材 网页链接 —— 文本、图形、电子邮箱链接 站点的输出与发布 —— 网页站点的输出. 一、启动 Dreamweaver MX. 二、网站制作流程.

nau
Télécharger la présentation

第九章 Internet 和 WEB 技术

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第九章 Internet和WEB技术 Shan dong Economics University

  2. 使用Dreamweaver制作多媒体网页 • 网络是目前和今后多媒体产品发布的一个重要的平台。在众多多媒体网页软件中，Dreamweaver具有强大的编辑功能，可以设计出图文并茂、内容丰富、具有吸引力的网页。 • 启动Dreamweaver MX • 网站制作流程 • 创建站点与添加素材 • 网页链接——文本、图形、电子邮箱链接 • 站点的输出与发布——网页站点的输出

  3. 一、启动Dreamweaver MX

  4. 二、网站制作流程 • 网站制作过程大致包括六步：规划网站、准备素材、制作网页、测试网站、上传输出、更新维护。 网站制作各步骤及完成的操作

  5. 三、创建站点与添加素材 1. 创建站点 ① 单击“站点”菜单中的“管理站点”命令，点击“新建站点” 弹出“站点定义”对话框，在站点名称文本框中输入站点名称“webexample”。 ② 单击“下一步”按钮，在弹出的“站点定义”对话框中选择“否，我不想使用服务器技术”选项。

  6. ③ 单击“下一步”按钮，在弹出的“站点定义”对话框中选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”选项，并选定站点在本地的存放位置为“D:\webexample”。 ④ 单击“下一步”按钮，在弹出的“站点定义”对话框中选择连接方式为“本地/网络”，文件存储的位置为“D:\webexample”，如图所示，定义本地站点与远程站点的连接方式。

  7. ⑤ 单击“下一步”按钮，在弹出的“站点定义”对话框中选择“否，不启用存回和取出”选项，定义网页不采用相应的编辑保护方式。 ⑥ 单击“下一步”按钮，在弹出的对话框中显示所有的与站点设置有关的参数，单击“完成”按钮结束站点的设置。

  8. 2. 编辑站点中的网页

  9. （1）使用表格定位 •表格的插入 在插入栏中选择“表格”选项卡，并单击“插入表格”按钮，设置插入表格的属性。

  10. 表格的修改 ① 选择要拆分的单元格（第二行单元格），单击表格属性面板上的“拆分”按钮，弹出“拆分单元格”对话框，选择是“行”选项，并输入行数为“2” ② 将拆分的表格再进行列拆分，拆分为2行7列。 ③ 选择表格中需合并的区域，单击表格属性面板上的“合并”按钮，即可将所选表格“合并”，然后再调整表格各单元格的宽度。

  11. 设置背景颜色 选择需更改背景颜色的单元格，在“单元格”属性面板中“背景颜色”选框中选取相应颜色，或在其后的文本框中直接键入颜色设置值，进行背景颜色设置。 （2）Flash文件的插入 ①选中要插入Flash影片 的单元格，如第一个单元格。 ②选择插入栏中的“媒体”选项卡，并单击工具栏中的“Flash”按钮，弹出“选择文件”对话框，选择插入Flash动画文件的路径和文件名（flash/morph.swf）。 ③单击“确认”按钮，即可完成该单元格“morph.swf”Flash动画文件的添加。 ④重复步骤②～③，将Flash动画“logo.swf”插入网页中的指定位置。

  12. （3）图片的插入 ① 选中要插入图像的单元格，如第二行的第一个单元格。 ② 选择插入栏中的“常用”选项卡，并单击工具栏中的“插入图像”按钮，弹出“选择图像源” ，选择插入图像文件的路径和文件名。 ③ 单击“确认”按钮，即可完成该单元格“agx.jpg”图像文件的添加。 ④ 重复步骤②～③，将image文件夹中的图像文件插入网页中的指定位置。 ⑤ 调整表格宽度，使表格与图片大小一致，从而美化网页。 （4）文字的插入 ① 选择倒数第二行第二列单元格，在插入栏中选择“表格”选项卡，并单击“插入表格”按钮，弹出“插入表格”对话框，设置插入1行1列的表格。 ② 在该单元格中输入文字。如果要插入一些特殊文字的话，则可选择插入栏中的“插入”选项卡，选择“html”，点击“特殊字符”选项，单击所需的文本符号按钮，即可插入相应的字符。

  13. （5）文本的编辑 文本的编辑修改方法是Windows通用的，选中文本后可以通过其对应的属性面板进行设置。

  14. 3. 添加一个新的网页 （1）新建网页 单击“文件”菜单中的“新建”命令，弹出“新建文档”对话框，在“常规”选项卡中，选择 “基本页”类别中的“HTML”页。

  15. （2）使用表单

  16. ① 选中要放置表单的单元格，然后选择插入栏中的“表单”选项卡，单击“表单”按钮，插入表单域。 ② 在表单域中，单击“插入”栏“表单”选项卡上的“文本字段”按钮，插入文本字段型表单。 ③ 选择下一个单元格，插入表单域，再单击“插入”栏“表单”选项卡上的“按钮”按钮，插入按钮型表单。 ④ 选中“提交”按钮，单击鼠标右键，在弹出的快捷菜单中选择“标签”命令，弹出“改变属性”对话框，在文本框中输入“搜索”两个字，按“确定”按钮，将“按钮”表单上的文字“提交”修改成“搜索” 。

  17. 四、网页链接 ——文本、图形、电子邮箱链接 1. 建立文本的链接 ① 打开网页，选中文字“数字媒体”，选择插入栏中的“常用”选项卡，单击“超级链接”按钮，弹出“超级链接”对话框。 ② 单击“浏览”按钮，弹出“选择文件”对话框，选择超链接的目标网页“index.htm”。

  18. 2. 建立图形的链接 ① 在Dreamweaver MX中打开网页，选择“agx.jpg”图片，选择插入栏中的“超级链接” 选项卡，弹出“超级链接”对话框，选择超链接网页“index.html”，即可完成该图片超链接设置。 ② 选择“产品中心”图片，选 择插入栏中的“超级链接”选 项卡弹出“超级链接”对话框， 直接在“链接”文本框中输入 链接网页名称““index.html”。 ③ 选择“产品中心”图片，在图像属性面板中单击“链接”栏后的“浏览”按钮，弹出“选择文件”对话框，选择超链接的目标网页““index.html”。

  19. 3. 建立电子邮件的链接 • 方法 ① 在Dreamweaver MX中打开网页，选择图片“agx.jpg”，选择插入栏中的“常用”选项卡，单击“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在“E-mail”文本框中输入所需链接的邮件地址shumei@sina.com。 ② 选择图片“agx.jpg”后，在相应的属性面板中的“链接”文本框中直接输入：“mailto:shumei@sina.com”。

  20. 五、站点的输出与发布——网页站点的输出 1. 网页发布的条件 Internet上获取一个空间来存放站点网页。 2. 将站点发布到Web服务器 发布过程一般包括两个步骤：设置服务器信息，上传网页。

More Related