多媒体网页设计

多媒体网页设计第1页，共44页，2023年，2月20日，星期一本章主要内容文本的添加图像的插入Flash动画的插入插入导航条音频与视频创建超链接表单第2页，共44页，2023年，2月20日，星期一

3.1文本3.1.1插入文本3.1.2设置文字属性3.1.3设置段落属性第3页，共44页，2023年，2月20日，星期一

3.1.1插入文本

将文本添加到文档，可在“文档”窗口的“设计”视图下，执行如下几种操作：定位插入点，直接在“文档”窗口中键入文本。从其他应用程序中复制文本，定位插入点，执行粘贴操作。导入表格式数据。先将文件保存为分隔文本文件；执行【文件】→【导入】→【导入表格式数据】，或【插入】→【表格对象】→【表格式数据】；导入Word文档（文件小于300K）或EXCEL文档。定位插入点，执行【文件】→【导入】→【Word文档】/【EXCEL文档】。第4页，共44页，2023年，2月20日，星期一

3.1.1插入文本

在字符之间添加空格选择【插入】→【HTML】→【特殊字符】→【不换行空格】。按Ctrl+Shift+空格键。在“插入”面板中的“文本”选项卡中，单击“字符”按钮并选择“不换行空格”图标。2.换行按Shift+Enter组合键。在“插入”面板中的“文本”选项卡中单击“换行符”图标。执行【插入记录】→【HTML】→【特殊字符】→【换行符】。第5页，共44页，2023年，2月20日，星期一3.插入特殊字符执行【插入】→【HTML】→【特殊字符】，从子菜单中选择字符名称。在“插入”面板中的“文本”选项卡中，单击“字符”按钮并从子菜单中选择字符。还有很多其它特殊字符可供使用；若要选择其中的某个字符，请单击【插入记录】→【HTML】→【特殊字符】→【其他】或者单击“插入”面板的“文本”选项卡中的“字符”按钮，然后选择“其他字符”选项，从“插入其它字符”对话框中选择一个字符。3.1.1插入文本第6页，共44页，2023年，2月20日，星期一3.1.1插入文本4.创建项目列表和编号列表使用新文本创建列表，将插入点放在要添加列表的位置，然后执行下列操作之一：单击“属性”面板中的“项目列表”按钮或“编号列表”按钮。单击【文本】→【列表】，然后根据需要选择“项目列表”或“编号列表”。

注意：创建一个列表项目，新样式将自动应用于添加到列表的其它项目。按Enter键，即可创建其他列表项目。按两次Enter键可结束列表项目的创建。第7页，共44页，2023年，2月20日，星期一3.1.1插入文本【案例3.1】创建一张网页并输入文本①创建站点web1，保存在D盘，并在其中创建三个子文件夹,分别命名为flash、pic、sound。在站点里新建一网页文件，命名为“wenben.html”。②在“设计”视图中，定位插入点，输入以下内容，如图7.1所示，注意，每行输入完按Enter键，第二行每项间添加8个不换行空格。第8页，共44页，2023年，2月20日，星期一

③单击【文件】→【导入】→【Word文档】，在打开的对话框中选择“CH03/other/摄影文本1.doc”,将其导入。④定位插入点在“器材讨论”类的“单反镜头”后，按Enter键，单击【文件】→【导入】→【Excel文档】，在打开的对话框中选择“CH03/other/器材排行.xls”,将其导入。⑤在导入的Word内容的每行文字的后面分别按Enter键，使自成段落，否则会对导入的全部内容视为一个段落。（如果段落内有多余空行请删除。）3.1.1插入文本第9页，共44页，2023年，2月20日，星期一

3.1.1插入文本

⑥选中“精彩视频”后的三项内容，在“属性”面板中单击“编号列表”按钮，添加编号；再依次选中“图片精华”和其他项目后内容，在“属性”面板中单击“项目列表”按钮，添加项目符号，⑦打开“CH03/other/摄影文本2.doc”，复制标题和第一段；回到“wenben.html”网页的“设计”视图，定位插入点在最后一段后，按Enter键，另起一新段落，右键单击，选择“粘贴”。⑧保存并浏览该网页。第10页，共44页，2023年，2月20日，星期一

3.1.2设置文字属性

对文字属性的更改，可以用“文本”菜单进行设置；也可以打开“属性”面板，在“属性”面板中设置。第11页，共44页，2023年，2月20日，星期一3.1.2设置文字属性1.更改字体，选取要更改的文字，单击【文本】→【字体】，在弹出的字体列表中选择字体名称；在“属性”面板中，单击“字体”下拉列表，在弹出的字体中选择所需字体；第12页，共44页，2023年，2月20日，星期一

3.1.2设置文字属性

如果所需要的字体不在列表中，可以在上面两图所示的字体列表的下方单击“编辑字体列表”，打开“编辑字体列表”对话框，在“可用字体”列表框中选择一种字体，单击左向双箭头，将其添加到选择的字体，新字体将会显示在字体列表中；单击左上方的按钮，可再次添加新的字体。如果要删除字体列表中的某字体，可以选中，单击按钮，将其删除。第13页，共44页，2023年，2月20日，星期一3.1.2设置文字属性2.更改字号选择文字，单击“属性”面板中“大小”列表框，在弹出的列表中设置，如果希望设置相对默认字符大小的增减量，可以选择“极小”、“特大”等选项；【文本】→【大小】在弹出的列表中选择字号，选择“默认”，将使用默认字号。如果要设置相对默认字符大小的增减量，可单击【文本】→【改变大小】。3.更改字体颜色在“属性”面板中，单击“文本颜色”按钮，在弹出的颜色板中选取所需颜色；在“文本颜色”按钮右边的文本框中直接输入颜色的十六进制值，如#EBE9ED;单击【文本】→【颜色】，在打开的“颜色”对话框中选择颜色。第14页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

对段落的设置主要包括对文本块（一段或多个段落）的对齐、缩进、行距、段间距、段落格式等的设置。1.对齐文本将插入点放在段落中，或者选择段落中的一些文本。如果设置多个段落，则选择多个段落。对齐文本可执行如下操作之一：【文本】→【对齐】的对齐命令

“属性”面板中的对齐按钮（“左对齐”、“右对齐”，“居中对齐”，或“两端对齐”）第15页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

2.缩进文本实现段落缩进的方法如下：【文本】→【缩进】，文本左右距离文档窗口各增加一段距离；【文本】→【凸出】，文本左右距离文档窗口各减少一段距离。单击“属性”面板上“文本缩进”按钮和“文本凸出”按钮，实现文本的缩进和凸出。利用快捷键Ctrl+Alt+]实现缩进，利用快捷键Ctrl+Alt+[实现凸出。注意：段落首行缩进，无法使用空格键输入，可以使用前面讲过的插入不换行空格，也可以切换到“代码”视图，在段落文字的前面输入4个“

”

代码，能空出两个汉字的位置。第16页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

3.设置段落格式

①产生行距：输入文本过程中，按Enter键表示结束一个段落的输入，并进入下个段落，两个段落间会产生一个较大的行距。若要使行距或段间距增大，可单击“插入”面板的“文本”选项卡中的“字符”，在弹出的列表中选择按钮。

②设置属性：使用“属性”面板中的“格式”弹出菜单如图7.15或单击【文本】→【段落格式】在弹出的子菜单中，可以设置段落格式。第17页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

4.添加水平线和时间

①添加水平：【插入记录】→【HTML】→【水平线】，即可插入一条水平线。在水平线上单击选择水平线，在“属性”面板上修改水平线，制定水平线的宽度和高度，对齐方式，以及是否带阴影。②添加时间：定位插入点，单击【插入记录】→【日期】或者在“插入”面板的“常用”选项卡里单击按钮，即可打开“日期”对话框，进行相关设置。第18页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

【案例3.2】对案例3.1所创建的网页，设置文本属性。

①打开案例3.1所建立网页“CH03/wenben.html”。②将“视点摄影网”，设置为“居中”，“标题1”

，设置好后按Enter键。

③在标题下方插入两条水平线，第二条水平线，“高度“为7，有阴影。

④设置“首页”段落文字，居中，大小为24，文字为斜体；段落内各项文字，设置不同颜色。设置好最后一个后按Enter键，再添加一个水平线，高度仍为7，将“阴影”框内对号去掉，无阴影。第19页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

【案例3.2】对案例3.1所创建的网页，设置文本属性。

第20页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

⑤分别选择“精彩视频”、“图片精华”等标题，在“属性”面板的“颜色”框内输入“#000099”，并设为斜体。在每个大项下都添加水平线，为默认效果。第21页，共44页，2023年，2月20日，星期一

3.1.3设置段落属性

⑤在最后一个段落（“经过30年的艺术开放……”），多次单击“属性”面板上的“文本缩进”按钮，使文本缩进。将插入点定位在网页最后，居中，单击“插入”栏上的“常用”选项卡，选择“日期”图标，在弹出的“插入日期”对话框内选择第二种日期格式，并勾选“储存时自动更新”，在网页底部添加日期。

⑥将设置好的网页保存并浏览第22页，共44页，2023年，2月20日，星期一3.2图像3.2.2编辑图像选中已经插入的图像，可以对图像进行移动、复制和删除操作，也可拖动周围锚点调整图像大小。对图像还可以在图像的“属性”面板中，对图像进行编辑第23页，共44页，2023年，2月20日，星期一3.2图像图像命名：图像的宽度和高度。以像素为单位。图像的路径。“源文件”文本框给出了图像的路径。图像链接。“链接”对话框给出了被链接文件的路径。图像可以链接到一个网页，也可以链接到一个具体的文件。设置图像链接后，只要单击该图像，即可打开相关的网页或文件。建立超级链接可以直接在“链接”文本框内输入链接地址，也可以拖曳“指向文件”图标到“站点”窗口要链接的文件上；或者单击该文本框右边“文件夹”按钮，去选定要链接的文件。第24页，共44页，2023年，2月20日，星期一3.2图像给图像加文字提示说明。在“替换”文本框中输入文字，在浏览器中用鼠标指向该图像，会显示相应的文字。对齐图像。选中图像，分别单击三个按钮，使图像左对齐、居中或右对齐。图像边距。“垂直边距”和“水平边距”文本框可以沿图像的边添加边距，以像素表示。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像的左侧和右侧添加边距。第25页，共44页，2023年，2月20日，星期一3.2图像图像边框。“边框”文本框内可输入值给图像加边框。默认无边框。“低解析度源”指定加载主图像之前应该加载的图像。许多设计人员使用主图像的黑白版本，因为它可以迅速加载并使访问者对他们等待看到的内容有所了解。第26页，共44页，2023年，2月20日，星期一3.2图像图像和文字相对位置。“对齐”下拉列表框中的选项可以设置图文混排，可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。其各项含义如表所示.项目作用默认值使用浏览器默认的对齐方式，不同的浏览器会有不同基线图像的底部与文字的基线水平对齐顶端图像的顶端与当前行中最高对象的顶端对齐居中图像的中线与文字的基线水平对齐底部图像的底部与文字的中线水平对齐文本上方图像的顶端与文本行中最高字符的顶端对齐绝对中间图像的中线与文字的中线水平对齐绝对底部图像的底部与文字的下沿水平对齐。左对齐图像在文字的左侧，文字从右侧环绕图像右对齐图像在文字的右侧，文字从左侧环绕图像第27页，共44页，2023年，2月20日，星期一3.2图像在“编辑”后面有一组按钮用来实现对图像进行编辑，各按钮功能如下：“编辑”按钮启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。“优化”按钮打开“优化”对话框，对图像进行优化。“裁剪”按钮裁切图像的大小，从所选图像中删除不需要的区域。第28页，共44页，2023年，2月20日，星期一3.2图像

“重新取样”按钮对已调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质，以适应其新尺寸。对位图对象进行重新取样时，会在图像中添加或删除像素，以使其变大或变小

“亮度和对比度”调整图像的亮度和对比度设置,修改图像中像素的对比度或亮度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。“锐化”按钮调整图像的锐度。锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。。第29页，共44页，2023年，2月20日，星期一3.2图像案例【3.3】在网页中添加图像并设置属性①打开web1站点，新建一网页，命名为tuxiang.html。②“文档”窗口中右键单击，打开“页面属性”对话框选择“外观”，设置文本颜色为白色，背景颜色为黑色；选“标题/编码”，设置标题为“视点摄影网”。③单击【插入记录】→【图像】，在打开的文本框中选择，在弹出的提示复制对话框里单击“是”，将图片复制到web1站点的pic文件夹里，在“图像标签辅助功能属性”对话框单击确定，将图片添加到网页中。利用相同方法将“CH07/素材/e0702.jpg”插入，选中该图片，在“属性”面板中把高度设置为60；在下行输入文字，并设置大小为36和居中。第30页，共44页，2023年，2月20日，星期一3.2图像案例【3.3】在网页中添加图像并设置属性④打开“CH03/other/摄影文本3.doc”，将文本复制到网页中。打开图片“CH03/other/e0703.jpg”和“CH07/素材/e0704.jpg”，在网页中选择图片e0703，在“属性”面板中设置宽度为219，高度为130；单击“对齐”下拉列表框选择“左对齐”，“水平间距”文本框中输入20；选择图片e0704，宽度为500，高度为239；单击“对齐”下拉列表框选择“右对齐”，“水平间距”文本框中输入20。⑤选择图片e0702，按住Ctrl键拖动，复制到下方，设置高度为5。⑥分别选择e0703和e0704，在“替换文本”中都输入“摄影大师”。第31页，共44页，2023年，2月20日，星期一3.2图像案例【3.3】在网页中添加图像并设置属性④打开“CH03/0ther/摄影文本3.doc”，将文本复制到网页中。打开图片“CH03/0ther/e0703.jpg”和“CH07/素材/e0704.jpg”，在网页中选择图片e0703，在“属性”面板中设置宽度为219，高度为130；单击“对齐”下拉列表框选择“左对齐”，“水平间距”文本框中输入20；选择图片e0704，宽度为500，高度为239；单击“对齐”下拉列表框选择“右对齐”，“水平间距”文本框中输入20。⑤选择图片e0702，按住Ctrl键拖动，复制到下方，设置高度为5。⑥分别选择e0703和e0704，在“替换文本”中都输入“摄影大师”。第32页，共44页，2023年，2月20日，星期一3.2图像3.2.3插入鼠标经过图像鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。必须用以下两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver将调整第二个图像的大小以与第一个图像的属性匹配。单击【插入记录】→【图像对象】→【鼠标经过图像】或者在“插入”栏的“常用”选项卡中单击“图像”按钮，然后选择“鼠标经过图像”图标，来实现插入鼠标经过图像。第33页，共44页，2023年，2月20日，星期一3.2图像【案例3.4】插入鼠标经过图像。①打开上例中网页tuxiang.html，在网页最后单击鼠标，选择插入点，单击【插入记录】→【图像对象】→【鼠标经过图像】，在打开如图所示的对话框。②单击“原始图像”和“鼠标经过图像”后的“浏览”按钮，选择两张图片“CH07/素材/e0705.jpg”和“CH07/素材/e0706.jpg”插入，并复制到本站点pic文件夹下。③保存修改并浏览网页。第34页，共44页，2023年，2月20日，星期一3.3插入Flash【案例3.5】为网页添加Flash。①在上例中新建一网页，命名为flash.html。②插入图片“CH07/素材/e0707.jpg”③单击【插入记录】→【媒体】→【Flash】；或者选择“插入”栏的“媒体”选项卡，单击“Flash”图片按钮，如图7.30所示。④在弹出对话框中选择文件“CH07/素材/视点摄影.swf”双击，在弹出的提示复制对话框中单击“是”，将文件复制到站点flash目录里，此时弹出的对话框，可不输入直接单击“确定”或“取消”，将Flash添加到了网页中。⑤选中插入的Flash，在“属性”面板如图7.33所示，为其设置属性。单击“播放”可在设计状态下观看Flash内容。

第35页，共44页，2023年，2月20日，星期一3.3插入Flash为了美化网页，增加动态效果，可插入Fash按钮，使按钮具有动态效果，插入Fash按钮的操作步骤如下：①单击【插入记录】→【媒体】→【Flash按钮】；或者选择“插入”栏的“媒体”选项卡，单击“Flash按钮”。②在弹出的对话框中进行设置，选择合适的样式，输入按钮上要显示的文本并设置字体，也可以设置链接等。如图所示。第36页，共44页，2023年，2月20日，星期一3.3插入Flash③单击确定，将Flash按钮插入到文档中。为在案例3.21中所创建的网页“tuxiang.html”中删除图片e7202.jpg，添加Flash按钮后的效果，其中样式选择“TranslucentTab”，字体为“宋体”，大小为20，背景色为黑色。④如果想修改Fash按钮，可双击Fash按钮，会再次打开如图所示对话框供设置。注意：插入Flash按钮时，文档的路径和文件名中不能有中文，否则会提示出错。第37页，共44页，2023年，2月20日，星期一3.3插入Flash3.3Flash文本【案例3.5】修改“tuxiang.html”，添加Flash文本。①打开“CH07/素材/tuxiang.html”，删除文字“国际顶尖商业摄影大师代表作图赏”。②单击【插入记录】→【媒体】→【Flash文本】；或者选择“插入”栏的“媒体”选项卡，单击“Flash文本”，在打开的如图所示的文本框中进行设置第38页，共44页，2023年，2月20日，星期一3.3插入Flash③单击确定，效果如图所示，当鼠标移动到文本上，文本会变色。④如果要修改插入的Flash文本，可以双击再次打开“插入Flash文本”对话框设置。第39页，共44页，2023年，2月20日，星期一3.4插入导航条

执行下列操作可以创建一个导航条：单击【插入记录】→【图形对象】→【导航条】。选择“插入”栏的“图像”选项卡，单击“导航条”按钮。【案例7.6】为网页添加导航条。①“CH07/素材/flash.html”，将插入点定位在网页头图像下方。②单击【插入记录】→【图形对象】→【导航条】，打开如图所示的对话框。第40页，共44页，2023年，2月2