第九章Internet和WEB技术 - 山东经济学院欢迎您.ppt

第九章 Internet和WEB技术 使用Dreamweaver制作多媒体网页 网络是目前和今后多媒体产品发布的一个重要的平台。在众多多媒体网页软件中，Dreamweaver具有强大的编辑功能，可以设计出图文并茂、内容丰富、具有吸引力的网页。 启动Dreamweaver MX 网站制作流程 创建站点与添加素材 网页链接——文本、图形、电子邮箱链接 站点的输出与发布——网页站点的输出 一、启动Dreamweaver MX 二、网站制作流程 网站制作过程大致包括六步：规划网站、准备素材、制作网页、测试网站、上传输出、更新维护。 三、创建站点与添加素材 1. 创建站点 ① 单击“站点”菜单中的“管理站点”命令，点击“新建站点” 弹出“站点定义”对话框，在站点名称文本框中输入站点名称“webexample”。 ② 单击“下一步”按钮，在弹出的“站点定义”对话框中选择“否，我不想使用服务器技术”选项。 ③ 单击“下一步”按钮，在弹出的“站点定义”对话框中选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”选项，并选定站点在本地的存放位置为“D:\webexample”。 ④ 单击“下一步”按钮，在弹出的“站点定义”对话框中选择连接方式为“本地/网络”，文件存储的位置为“D:\webexample”，如图所示，定义本地站点与远程站点的连接方式。 ⑤ 单击“下一步”按钮，在弹出的“站点定义”对话框中选择“否，不启用存回和取出”选项，定义网页不采用相应的编辑保护方式。 ⑥ 单击“下一步”按钮，在弹出的对话框中显示所有的与站点设置有关的参数，单击“完成”按钮结束站点的设置。 2. 编辑站点中的网页 （1）使用表格定位 ? 表格的插入 在插入栏中选择“表格”选项卡，并单击“插入表格”按钮，设置插入表格的属性。 表格的修改 ① 选择要拆分的单元格（第二行单元格），单击表格属性面板上的“拆分”按钮，弹出“拆分单元格”对话框，选择是“行”选项，并输入行数为“2” ② 将拆分的表格再进行列拆分，拆分为2行7列。 ③ 选择表格中需合并的区域，单击表格属性面板上的“合并”按钮，即可将所选表格“合并”，然后再调整表格各单元格的宽度。 设置背景颜色 选择需更改背景颜色的单元格，在“单元格”属性面板中“背景颜色”选框中选取相应颜色，或在其后的文本框中直接键入颜色设置值，进行背景颜色设置。 （3）图片的插入 ① 选中要插入图像的单元格，如第二行的第一个单元格。 ② 选择插入栏中的“常用”选项卡，并单击工具栏中的“插入图像”按钮，弹出“选择图像源” ，选择插入图像文件的路径和文件名。 ③ 单击“确认”按钮，即可完成该单元格“agx.jpg”图像文件的添加。 ④ 重复步骤②～③，将image文件夹中的图像文件插入网页中的指定位置。 ⑤ 调整表格宽度，使表格与图片大小一致，从而美化网页。 （5）文本的编辑 文本的编辑修改方法是Windows通用的，选中文本后可以通过其对应的属性面板进行设置。 3. 添加一个新的网页 （1）新建网页 单击“文件”菜单中的“新建”命令，弹出“新建文档”对话框，在“常规”选项卡中，选择 “基本页”类别中的“HTML”页。 （2）使用表单 ① 选中要放置表单的单元格，然后选择插入栏中的“表单”选项卡，单击“表单”按钮，插入表单域。 四、网页链接 ——文本、图形、电子邮箱链接 1. 建立文本的链接 ① 打开网页，选中文字“数字媒体”，选择插入栏中的“常用”选项卡，单击“超级链接”按钮，弹出“超级链接”对话框。 ② 单击“浏览”按钮，弹出“选择文件”对话框，选择超链接的目标网页“index.htm”。 2. 建立图形的链接 ① 在Dreamweaver MX中打开网页，选择“agx.jpg”图片，选择插入栏中的“超级链接” 选项卡，弹出“超级链接”对话框，选择超链接网页“index.html”，即可完成该图片超链接设置。 ② 选择“产品中心”图片，选 择插入栏中的“超级链接”选 项卡弹出“超级链接”对话框， 直接在“链接”文本框中输入 链接网页名称““index.html”。 ③ 选择“产品中心”图片，在图像属性面板中单击“链接”栏后的“浏览”按钮，弹出“选择文件”对话框，选择超链接的目标网页““index.html”。 3. 建立电子邮件的链接 方法 ① 在Dreamweaver MX中打开网页，选择图片“agx.jpg”，选择插入栏中的“常用”选项卡，单击“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在“E-mail”文本框中输入所需链接的邮件地址shumei@。 ② 选择图片“agx.jpg”后，在相应的属性面板中的“链接”文本框中直接输入：“mailto:shu