大学计算机基础 —— 系统工具与环境（文科用）

大学计算机基础—— 系统工具与环境（文科用）赵欢肖德贵杨小林陈娟吴蓉晖编著

第三部分网页设计与制作 第9章网页制作基础大学计算机基础 ——系统工具与环境（文科用）大学计算机基础——系统工具与环境

9.1编辑文本 文字在网站的设计中包括正文、标题、特殊字符、滚动文字等，是网页设计最基本的元素之一。文字的颜色、大小、间距等可任意设置。大学计算机基础——系统工具与环境

插入文本 输入文字时，将视图切换为设计模式，然后在可视化编辑窗口中，将光标定位在适当的位置，直接输入文字。中间要分段的地方，直接按回车键。也可以从外部导入文本。打开记事本、Word等应用程序，复制文本，在Dream weaver编辑窗口粘贴即可。Dream weaver CS4不保留其他程序的文本格式。但是从浏览器窗口的网页中所复制的文本，粘贴到Dream weaver编辑窗口中，会保留大小、颜色等大部分格式。大学计算机基础——系统工具与环境

插入文本 在可视化编辑窗口输入文字的长度超过了Dream weave窗口的显示范围，文字将自动换到下一行。如果用Enter键换行，则将对文本进行分段，换行的行距较大。而用Shift+Enter组合键换行，将在文本中插入换行符，文本的行距为正常行距。或选择“插入栏”的“文本”类的“字符”按钮菜单下的，也可以插入换行符。大学计算机基础——系统工具与环境

插入文本 在在Dream weaver中，连续敲击空格键时仅仅只输入一个空格。若要输入多个连续的空格，可以选择“插入栏”的“文本”类的“字符”按钮下的。或切换到中文输入状态，设置为全角输入状态，再敲击空格键。大学计算机基础——系统工具与环境

使用属性面板调整文本基本属性 如果属性面板没有显示，可以使用组合键[Ctrl]+[F3]或菜单【窗口】的【属性】命令打开属性面板。或在选中文字后，单击右键，选择快捷菜单的【属性】命令打开属性面板。大学计算机基础——系统工具与环境

段落格式 Dream weaver中定义了七种段落格式，使用属性面板中的格式下拉列表框，可以将所选的文本应用一种段落格式。选择“段落”，则文本应用P标签的默认格式，选择“标题1”，则文本添加<H1>标签，应用标题1格式……。大学计算机基础——系统工具与环境

字体格式 添加中文字体：选择主菜单【格式】的【字体】的【编辑字体列表】命令大学计算机基础——系统工具与环境

改变字体大小 可以选择文字大小以像素（px）、点数（pt）、英寸、厘米、毫米、12pt字、字体高度中的一种为度量单位，然后在“大小”下拉菜单选择一种适当的大小大学计算机基础——系统工具与环境

粗体与斜体 选中文字后，在文本属性面板上单击按钮文字变为粗体，单击按钮文字变为斜体。大学计算机基础——系统工具与环境

文本的对齐方式 对齐方式的作用对象是整个段落文字，将光标放在一个段落文字中的任意位置，单击属性面板的按钮实现左对齐。按钮实现居中对齐，按钮实现右对齐，按钮实现两端对齐。选中多个段落，可同时设置这些段落的对齐方式。大学计算机基础——系统工具与环境

粗体与斜体 选中文字后，在文本属性面板上单击按钮文字变为粗体，单击按钮文字变为斜体。大学计算机基础——系统工具与环境

项目列表与编号列表 当显示多个相关的条目时，使用列表方式可以清楚地表示出各个条目的并列关系。项目列表按序可分为无序列表和有序列表两种形式。无序列表通常用各种几何符号来表示其列表关系，主要用于一种并列关系的元素组合，各列表项之间并不存在先后主次的顺序。选中要设为无序列表的多个段落，单击按钮将其变为项目列表，每个段落的前面自动加上项目符号。大学计算机基础——系统工具与环境

项目列表与编号列表 有序列表通常用数字或字母来表示各个条目的先后关系。选择要应用有序项目符号的所有段落，单击按钮可将其变为编号列表，每个段落的前面自动加上编号。默认状态下使用的编号为“数字序列”，用户可以根据需要更改编号的样式。要改变编号或列表的样式，选中定义为列表的文字，单击右键，在快捷菜单中选择【列表】的【属性】，打开“列表属性”对话框。在样式下拉列表中，用户可选择编号的样式。大学计算机基础——系统工具与环境

文本凸出与文本缩进 文本属性面板上的按钮和按钮可设置列表文字的凸出和缩进。设置多级编号时，可使用这两个按钮来升高或降低编号的级别。大学计算机基础——系统工具与环境

插入水平线 水平线可用于页面上内容的分隔。单击“插入栏”的“常用类”的水平线按钮，或选择主菜单【插入】的【HTML】的【水平线】命令，在编辑窗口会加入一条水平线。单击该水平线,可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等大学计算机基础——系统工具与环境

插入日期 单击“插入栏”的“常用类”的日期按钮，打开“插入日期”对话框。用户可以选择日期格式，还可以选择是否每次保存文件时都自动更新该日期。大学计算机基础——系统工具与环境

插入特殊字符 单击主菜单【插入】的【HTML】的【特殊字符】菜单命令，可以在光标位置插入所选择的字符。大学计算机基础——系统工具与环境

编辑文本实训 实训任务：在站点“我的主页”中建立网页“xg”，并编辑以下内容：将文本文件“校歌”的文字复制到网页中。在网页开始处插入文字“湖南大学校歌”，并设置其为黑体，36号，红色，居中。在第一句的结尾处（萧友梅先生作曲）加上换行符。在第一句和第二句的开头处各插入四个空格。在“校歌歌词”和“歌词注释”前插入水平线在“校歌歌词”和“歌词注释”前设置项目符号在校歌的歌词（从“麓山巍巍”到“扬我国光”）前加入项目符号，并设置文本缩进一层。在歌词的注释（从“泱泱”到“治国平天下”）前加入列表符号，并设置文本缩进一层。大学计算机基础——系统工具与环境

编辑文本实训 大学计算机基础——系统工具与环境

9.2 插入图像 图像是网页中重要的元素之一。在Dream weaver中可以方便地将图像插入到网页并进行各种处理，用来展示照片、图画或者修饰页面，也可以将图像作为背景图像。大学计算机基础——系统工具与环境

网页图像基础知识 网页中的图像分为正文图像和装饰图像。正文图像一般是照片，尺寸较大，是网页内容的一部分。装饰图像用于提供网页的美化效果，如边框、艺术字、小点缀、作为页面或局部的背景，在页面上面起导航作用，制作时应避免使用过大的图像。 Dream weaver和大多数浏览器一样，支持使用JPG、PNG、GIF格式的图像。大学计算机基础——系统工具与环境

网页图像基础知识 GIF格式 GIF格式一般只支持256色，不能用于存储真彩的图像文件，是存储非连续色调图像或颜色比较单一的图像。但GIF支持透明色，可以使图像浮现在背景之上，且GIF89A格式的GIF图像可以产生动画效果。GIF图像文件扩展名为.gif。GIF图像的制作软件较为多，例如Photoshop、Animagic GIF、Ulead Gif Animator等。大学计算机基础——系统工具与环境

网页图像基础知识 JPEG格式 JPEG格式支持24bit真彩色，是存储照片或连续色调图像的较好格式。在图像处理软件中，以JPEG格式储存时，提供多级压缩级别。由于文件经过压缩，可减少网络的传输时间，适合应用于互联网。JPEG图像文件的扩展名为JPG或JPEG。大学计算机基础——系统工具与环境

网页图像基础知识 PNG格式 PNG格式是采用无损压缩方式的可携式网络图像，是目前最不失真的格式，具有gif和jpg的色彩模式。PNG格式同样支持透明图像的制作，但不支持动画应用效果。在Fireworks软件中，文件的默认格式就是PNG。大学计算机基础——系统工具与环境

网页图像基础知识 网页中的图像不是保存在网页文件中，而是单独的图像文件。在网页中要使用的图像文件必须保存在站点文件夹中。大多数网站会将图像文件保存在专门的文件夹中，常见的是将图像文件保存在images文件夹中。大学计算机基础——系统工具与环境

插入图像 选择【插入】菜单的【图像】命令，或单击“插入栏”中“常用类”的“图像”按钮，打开“选择图像源文件”对话框。大学计算机基础——系统工具与环境

插入图像 在“选择图像源文件”对话框中，选择要插入的图像文件。在文件列表中单击图像文件时，图像预览区会显示这个图像的缩略图。若图像没有存放在站点所在的文件夹下，在“选择图像源文件”对话框的“URL”文本框中，显示的是本地计算机硬盘中的绝对路径。否则，“URL”选项就变成相对于文档或站点根目录的路径名。大学计算机基础——系统工具与环境

插入图像 如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。如果图像文件没有在站点文件夹中，就会打开对话框询问是否将图片文件复制到站点所在的文件夹。单击“是”按钮，系统打开“复制文件为”对话框，用户可指定图片文件的复制位置。通常，把图片文件复制到站点文件夹的images子文件夹中。大学计算机基础——系统工具与环境

设置图像属性 在编辑窗口中单击插入的图像，图像周围出现3个控制点，同时在属性面板中可以设置图像的各种属性。面板左上方是图像预览方式，可以大致看到图像的内容。预览图像的右边说明了所插入图像的大小，此图像的大小是201K。大学计算机基础——系统工具与环境

宽度和高度 在未调节图像大小时，“宽”与“高”显示的是图像原始宽度与高度，单位是像素点。如果用手动方式，拖动图像右下角的黑色控制点来调整图像的大小，“宽” 与“高”栏中的数值也随着改变（拖动结束后数值也变成了粗体数字）。倘若改变图像大小后,希望回复到原图像的大小，单击“重设大小”按钮即可。如果要维持原图像的宽度与高度之比例不变，按住Shift键拖动图像右下角的黑色控制点来调整图像大小。大学计算机基础——系统工具与环境

垂直边距和水平边距 在版面安排上，若图像和文字贴得太近，容易使人产生压迫感。因此，适当地调整图像间距可以使浏览者在浏览网页时更加舒适。“垂直边距”设置图像和周围文字的上下距离，“水平边距”设置图像和周围文字的水平距离，单位为像素。大学计算机基础——系统工具与环境

替换在“替换”中输入文字说明。用户若关闭了浏览器中的图像显示，在浏览网页时，图像处会显示一个带图像标志的方框，上面显示所设置的替代文字。大学计算机基础——系统工具与环境

边框为图像加上适当的边框线，可以使图像产生一种立体感。在“边框”输入数值即可设置图像的边框线的宽度。若要取消边框，只需删除“边框”的数值。大学计算机基础——系统工具与环境

图像的对齐方式 在图像的对齐属性下拉列表中有10个选项。在网页制作的实际应用中，使用最多的是左对齐和右对齐。大学计算机基础——系统工具与环境

裁剪图像 选中要裁剪的图像，单击“属性”面板中的“裁剪”按钮，在其四周将出现一个裁剪控制框。将鼠标指针指向控制点，拖动鼠标可以改变裁剪框的大小。将鼠标指针移到裁剪框中拖动鼠标可以移动裁剪框的位置。在裁剪框中双击鼠标或按Enter键，就可以剪切掉裁剪框以外的图像。大学计算机基础——系统工具与环境

调整图像的亮度和对比度 在Dream weaver中，选中图像，单击“属性”面板中的“亮度和对比度”按钮，打开“亮度/对比度”对话框。在“亮度”和“对比度”中，输入合适的数值，可改变图像的亮度和对比度。大学计算机基础——系统工具与环境

锐化图像 通过扫描得到的图像，其边缘常常是模糊的，可以通过Dream weaver提供的锐化图像功能提高图像的质量。选中要锐化的图像，单击“属性”面板中的“锐化”按钮，打开“锐化”对话框，输入合适的数值。锐化的数值越大，则锐化程度就越高。大学计算机基础——系统工具与环境

插入图像占位符 在实际制作网页的过程中，当网页的整体排版已经完成，但是需要插入的图像还没有制作出来时，可以插入一个图像占位符，来配合排版的需要，等到图像制作出来后，再将图像占位符替换掉。大学计算机基础——系统工具与环境

插入图像占位符 在【插入】菜单中选择【图像对象】下的【图像占位符】命令，或单击“插入栏”的“常用类”的“图像”下的“图像占位符”按钮，打开“图像占位符”对话框大学计算机基础——系统工具与环境

插入“鼠标经过的图像” 鼠标经过图像实际上由两幅图像组成：初始图像（页面初次装载时显示的图像）和替换图像（当鼠标指针掠过时显示的图像），两幅图像的大小必须相同。在【插入】菜单中选择【图像对象】下的【鼠标经过的图像】命令，或单击“插入栏”的“常用类”的“图像”下的“鼠标经过的图像”按钮。大学计算机基础——系统工具与环境

设置网页背景图像 选择【修改】菜单的【页面属性】命令，或单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，在“背景图像”文本框中，输入作为背景图片文件的路径和文件名，或单击“浏览”按钮，在“选择图像源文件”对话框中选择图片。大学计算机基础——系统工具与环境

设置网页背景图像 默认情况下，当网页尺寸比背景图像大，会重复显示背景图像。在“重复”下拉列表中选择“no-repeat”，背景图像只显示一次；选择“x-repeat”，背景图像在水平方向上重复；选择“y-repeat”，背景图像在垂直方向上重复；选择“repeat”，则背景图像在水平和垂直方向上均重复。大学计算机基础——系统工具与环境

插入图像实训 实训任务：在网页“xg”中完成以下操作：在“歌词注释”旁插入图像文件“hndx.jpg”，设置图像右对齐，垂直和水平边距为50。设置图像的边框为3，颜色为蓝色。设置图像的锐化值为5。设置页面的背景图像为“bj.gif” 大学计算机基础——系统工具与环境

插入图像实训 大学计算机基础——系统工具与环境

9.3 插入多媒体 在Dream weaver中，可以快速、方便地向网页中添加音频、视频等多媒体内容，使网页更加生动。大学计算机基础——系统工具与环境

插入音频对象 大学计算机基础——系统工具与环境

常用的音频文件格式 midi或mid(Music Instrument Digital Interface,乐器数字接口) 此格式用于器乐，很小的MIDI文件就可以提供较长时间的声音剪辑。许多浏览器都支持MIDI文件，并且不需要插件。但是MIDI文件不能通过录制获取，并且必须使用特殊的硬件和软件在计算机上合成。大学计算机基础——系统工具与环境

常用的音频文件格式 wav（波形扩展) 此格式具有良好的声音品质，许多浏览器都支持wav格式文件，并且不需要插件。可以从CD、磁带、麦克风等录制自己的WAV文件。但是，此格式文件较大，会影响在网页的传输速度。大学计算机基础——系统工具与环境

大学计算机基础 —— 系统工具与环境 （文科用）