数字媒体导论 第九章Internet和WEB技术

ShandongEconomicsUniversity1使用Dreamweaver制作多媒体网页网络是目前和今后多媒体产品发布的一个重要的平台。在众多多媒体网页软件中，Dreamweaver具有强大的编辑功能，可以设计出图文并茂、内容丰富、具有吸引力的网页。启动DreamweaverMX网站制作流程创立站点与添加素材网页链接——文本、图形、电子邮箱链接站点的输出与发布——网页站点的输出2一、启动DreamweaverMX3二、网站制作流程网站制作过程大致包括六步：规划网站、准备素材、制作网页、测试网站、上传输出、更新维护。步骤名称完成的操作规划网站对网站的整体风格和特色作出定位，进而规划网站的组织结构准备素材准备网页显示的文本、图片、动画、视频、音乐素材制作网页使用网页制作软件，组织素材，进行网页制作测试网页网页制作完毕后，进行测试，检查设计过程中的错误与漏洞上传输出申请域名和空间、将网页上传至服务器，进行发布更新维护更新网页，增加网页内容，弥补网站存在的缺陷网站制作各步骤及完成的操作

4三、创立站点与添加素材5③单击“下一步〞按钮，在弹出的“站点定义〞对话框中选择“编辑我的计算机上的本地副本，完成后再上传到效劳器〔推荐〕〞选项，并选定站点在本地的存放位置为“D:\webexample〞。④单击“下一步〞按钮，在弹出的“站点定义〞对话框中选择连接方式为“本地/网络〞，文件存储的位置为“D:\webexample〞，如下图，定义本地站点与远程站点的连接方式。6⑤单击“下一步〞按钮，在弹出的“站点定义〞对话框中选择“否，不启用存回和取出〞选项，定义网页不采用相应的编辑保护方式。⑥单击“下一步〞按钮，在弹出的对话框中显示所有的与站点设置有关的参数，单击“完成〞按钮结束站点的设置。72.编辑站点中的网页8〔1〕使用表格定位•表格的插入在插入栏中选择“表格〞选项卡，并单击“插入表格〞按钮，设置插入表格的属性。9表格的修改①选择要拆分的单元格〔第二行单元格〕，单击表格属性面板上的“拆分〞按钮，弹出“拆分单元格〞对话框，选择是“行〞选项，并输入行数为“2〞②将拆分的表格再进行列拆分，拆分为2行7列。③选择表格中需合并的区域，单击表格属性面板上的“合并〞按钮，即可将所选表格“合并〞，然后再调整表格各单元格的宽度。10设置背景颜色选择需更改背景颜色的单元格，在“单元格〞属性面板中“背景颜色〞选框中选取相应颜色，或在其后的文本框中直接键入颜色设置值，进行背景颜色设置。〔2〕Flash文件的插入①选中要插入Flash影片的单元格，如第一个单元格。②选择插入栏中的“媒体〞选项卡，并单击工具栏中的“Flash〞按钮，弹出“选择文件〞对话框，选择插入Flash动画文件的路径和文件名〔flash/morph.swf〕。③单击“确认〞按钮，即可完成该单元格“morph.swf〞Flash动画文件的添加。④重复步骤②～③，将Flash动画“logo.swf〞插入网页中的指定位置。11〔3〕图片的插入①选中要插入图像的单元格，如第二行的第一个单元格。②选择插入栏中的“常用〞选项卡，并单击工具栏中的“插入图像〞按钮，弹出“选择图像源〞，选择插入图像文件的路径和文件名。③单击“确认〞按钮，即可完成该单元格“agx.jpg〞图像文件的添加。④重复步骤②～③，将image文件夹中的图像文件插入网页中的指定位置。⑤调整表格宽度，使表格与图片大小一致，从而美化网页。〔4〕文字的插入①选择倒数第二行第二列单元格，在插入栏中选择“表格〞选项卡，并单击“插入表格〞按钮，弹出“插入表格〞对话框，设置插入1行1列的表格。②在该单元格中输入文字。如果要插入一些特殊文字的话，那么可选择插入栏中的“插入〞选项卡，选择“html〞，点击“特殊字符〞选项，单击所需的文本符号按钮，即可插入相应的字符。12〔5〕文本的编辑文本的编辑修改方法是Windows通用的，选中文本后可以通过其对应的属性面板进行设置。133.添加一个新的网页〔1〕新建网页单击“文件〞菜单中的“新建〞命令，弹出“新建文档〞对话框，在“常规〞选项卡中，选择“根本页〞类别中的“HTML〞页。14〔2〕使用表单15①选中要放置表单的单元格，然后选择插入栏中的“表单〞选项卡，单击“表单〞按钮，插入表单域。②在表单域中，单击“插入〞栏“表单〞选项卡上的“文本字段〞按钮，插入文本字段型表单。③选择下一个单元格，插入表单域，再单击“插入〞栏“表单〞选项卡上的“按钮〞按钮，插入按钮型表单。④选中“提交〞按钮，单击鼠标右键，在弹出的快捷菜单中选择“标签〞命令，弹出“改变属性〞对话框，在文本框中输入“搜索〞两个字，按“确定〞按钮，将“按钮〞表单上的文字“提交〞修改成“搜索〞。16四、网页链接——文本、图形、电子邮箱链接1.建立文本的链接①翻开网页，选中文字“数字媒体〞，选择插入栏中的“常用〞选项卡，单击“超级链接〞按钮，弹出“超级链接〞对话框。②单击“浏览〞按钮，弹出“选择文件〞对话框，选择超链接的目标网页“index.htm〞。172.建立图形的链接①在DreamweaverMX中翻开网页，选择“agx.jpg〞图片，选择插入栏中的“超级链接〞选项卡，弹出“超级链接〞对话框，选择超链接网页“index.html〞，即可完成该图片超链接设置。②选择“产品中心〞图片，选择插入栏中的“超级链接〞选项卡弹出“超级链接〞对话框，直接在“链接〞文本框中输入链接网页名称““index.html〞。③选择“产品中心〞图片，在图像属性面板中单击“链接〞栏后的“浏览〞按钮，弹出“选择文件〞对话框，选择超链接的目标网页““index.html〞。183.建立电子邮件的链接方法①在DreamweaverMX中翻开网页，选择图片“agx.jpg〞，选择插入栏中的“常用〞选项卡，单击“电子邮件链接〞按钮，弹出“电子邮件链接〞对话框，在“E-mail〞文本框中输入所需链接的邮件地址。②选择图片“agx.jpg〞后，在相应