第5章网页制作基础2w.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,大学计算机信息科技教程（第二版）第5章 网页制作基础,*,单击此处编辑母版标题样式,第5章 网页制作基础,1,大学计算机信息科技教程（第二版）第5章 网页制作基础,主要内容,概述,设计站点,编辑网页,页面布局,建立超链接,使用CSS样式,层、行为和时间轴,模板,管理和发布站点,2,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.1 概述,站点,具有相关主题的网页有机地整合在一起，集中进行管理，构成一个整体，这就是站点。,超文本标记语言HTML,站点中的每个网页的内容都要使用一种标准的语言来描述，这就是超文本标记语言HTML。,常用的网页制作软件,Microsoft Office中的FrontPage,Macromedia公司的Dreamweaver,3,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.1 概述,Dreamweaver概述,HTML简介,4,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.1.1 Dreamweaver简述,Macromedia Dreamweaver 8 是美国Macromedia公司开发的一种集网页制作和网站管理于一体的网页制作软件，它具有一套针对专业网页设计师使用的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页，它是网页设计者的首选工具。,5,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.1.1 Dreamweaver简述,打开或者创建网页后的操作界面,“插入”栏,“标准”工具栏,“文档”工具栏,文档窗口,面板组,属性检查器,8,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.1.2 HTML简介,HTML是HyperText Mackup Language的缩写，称为超文本标记语言，它是一种用于制作超文本文档的简单标记语言。它只是提供一些语法标记给浏览器，由浏览器解释生成相应的页面。,超文本标记语言HTML由一些格式标签和资源引用构成，通过标签来设置引用内容的格式。标签分头标签和尾标签，用“”括起来，与被标注的内容区分开来。,9,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.1.2 HTML简介,和标签标志了文件的开始和结束。文件的段被分成两部分：,第一部分叫作头部，以和标签标志开始和结束；,第二部分是文件体，它包含对浏览器中显示的内容的具体描述，以和标签标志开始和结束。,在头部中，和标签用于定义网页的标题。,在文件体中，和标签用于标志一个段落，在这对标签之间加入的文本将显示在浏览器中；和标签用于控制文本的字体、大小、颜色等；和标签用于排版段落的格式；标签用于插入图片，它没有结束标签，通常后面带有属性，表示图片文件的存储路径、对齐、以及大小。,10,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.1.2 HTML简介,文件的开始,文件的结束,头部,文件体,网页标题,段落,图片,11,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2 设计站点,网站设计,定义本地站点,管理站点资源,打开、保存和预览网页,12,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.1 网站设计,每个网页在服务器上都是以文件形式存放的，通常在服务器上有多个主题相关的网页，这些网页按一定的组织结构、以超链接方式连接在一起，形成一个整体，这就是网站。,在每个网站中存放着一个被称为主页的网页文件，它是获取该网站的信息的起点。主页中含有一些超链接，指向相关信息的网页或其它网站的主页。通常，用户在浏览器窗口中输入网址后，显示出的就是该网址对应服务器中的网站的主页。,要建立一个网站，一般首先在本地硬盘中建立一个本地站点，即存放网站的所有文档的文件夹。待网页设计和测试好以后，再把这些文档复制到服务器中，供浏览者浏览。,13,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.1 网站设计,设计网站的基本步骤,对站点进行规划。,确定站点的主题和风格，明确建立站点的目的。,根据确立的主题，收集一些素材。,明确将站点中各部分的内容，规划出几个次要的网页主题，根据各个次要的主题将素材进行分类，规划出合理的站点结构。,14,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.1 网站设计,创建站点的基本结构。,在本地站点中建立若干个文件夹，用于存放各类文档，必要时还可以建立子文件夹。,创建和编辑网页。,将本地站点的所有文档发布到服务器。,15,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.2 定义本地站点,启动Dreamweaver后，选择“站点”/“新建站点”命令或单击起始页上的 选项，出现“站点定义”对话框后，选择“基本”选项卡，然后进行以下操作：,“编辑文件”界面的文本框中输入站点名称（如“旅游天地”）和URL（若暂时没有，可以忽略），单击“下一步”按钮。,进入“编辑文件 第2部分”界面，确定是否要使用服务器技术。若要制作设计ASP、ASP.NET、JSP技术的动态网页，则需选择使用服务器技术，否则可以选择不使用服务器技术。设置后，单击“下一步”按钮。,16,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.2 定义本地站点,进入“编辑文件 第3部分”界面，选择使用文件的方式：一种方式是编辑计算机上的本地副本、完成后再上传到服务器，另一种方式是使用本地网络直接在服务器上进行编辑，建议选择前一种方式。然后指定文件存储的位置（如E:Mysite），单击“下一步”按钮。,进入“共享文件”界面，设置连接远程服务器的方式和存储文件的位置。,17,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.2 定义本地站点,进入“共享文件，2部分完成”界面，设置是否启用存回和取出功能。如果需要有多人共同设计站点，则可以设置启用存回和取出功能；否则可以不启用存回和取出功能。设置完成后单击“下一步”按钮。,进入“总结”界面，显示出站点的定义信息，确定这些设置信息后单击“完成”按钮。此时，本地计算机上定义了一个Web站点，自动建立了站点文件夹（E:Mysite），并显示在“文件”面板上显示了创建的站点名称和位置。,18,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.2 定义本地站点,修改站点的设置信息,选择“站点”/“管理站点”命令或在“文件”面板的“站点名称”下拉列表中选择“管理站点”选项，打开“站点管理”对话框，选择要修改的站点名称后单击“编辑”按钮，出现“站点定义”对话框，可以对站点已有的设置信息进行修改。如果要进行更详细的设置，可以选择“高级”选项卡。,19,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.2 定义本地站点,建立多个站点,利用“管理站点”对话框可以建立和管理多个站点。单击“新建”按钮并选择“站点”选项，在打开的“站点定义”对话框中可以再建立另一个站点。,复制站点,单击“复制”按钮，建立一个与列表框中选定站点相同的站点。,删除站点,单击“删除”按钮，则将选定站点删除。,导出站点,选中站点名称后，单击“导出”按钮，,将站点导出为包含站点设置的,XML,文件，其文件扩展名为,.ste,。以后单击“导入”按钮，可以导入该文件，并成为站点。,20,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.2 定义本地站点,在Dreamweaver中，同一时刻只能打开一个站点。在“管理站点”对话框中选定站点后，单击“完成”按钮，则打开该站点，“文件”面板中显示该站点的内容。在“文件”面板中的“站点名称”下拉列表中列出了现有站点的名称，选择站点名称后，同样打开该站点。,21,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.3 管理站点资源,定义了本地站点后，在本地计算机中建立了一个用于存放站点中的文档的文件夹。初始状态下，该文件夹是一个空文件夹，在此文件夹中可以进行新建文件夹、新建文件、复制文件、移动文件、删除文件、重命名文件等操作。,22,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.3 管理站点资源,新建文件夹,右单击“文件”面板中要新建文件夹的位置（如：站点名称或子文件夹名），在弹出的快捷菜单中选择“新建文件夹”命令，建立一个以“untitled”为默认名称的文件夹，此时输入新建文件夹的名称（如：Picture），然后按Enter键即可。,23,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.3 管理站点资源,新建文件,选择“文件”/“新建”命令，打开“新建文档”对话框。在“新建文档”对话框中选择文件类别和类型后，单击“创建”按钮。,单击起始页的“从范例创建”栏中列出的选项，同样能够打开“新建文档”对话框，进行新建文档操作。单击起始页的“创建新项目”栏中的选项，可以直接建立相应的文档。,右单击“文件”面板中要新建文件的文件夹，在弹出的快捷菜单中选择“新建文件”命令，便可以建立一个新的文件。,24,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.3 管理站点资源,移动、复制文件和文件夹,在“文件”面板中选定要移动的文件，将文件拖入新的文件夹位置，便可以移动文件的位置。此时将出现“更新文件”对话框，提示是否要更新其他文件中有指向被移动的文件的超链接。,25,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.3 管理站点资源,若要复制文件，可以在“文件”面板中按住Ctrl键同时将文件拖入目标文件夹。,在“文件”面板中选定文件，右单击后弹出快捷菜单，选择“编辑”子菜单下的“剪切”、“拷贝”和“粘贴”命令，同样可以进行文件的移动和复制操作。选择“复制”命令，可以将选定的文件直接复制到同一个文件夹下，建立一个副本。,26,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.3 管理站点资源,删除、重命名文件和文件夹,选定要删除的文件或文件夹，按Delete键，单击弹出的确认删除提示框中的“是”按钮，便可以将文件或文件夹删除。,选定文件或文件夹后，再次单击文件（文件夹）名，进入编辑名称状态，便可以修改文件（文件夹）名。,27,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.3 管理站点资源,导入文件和文件夹,在“文件”面板的站点名称下拉列表中选择文件或文件夹所在的本地磁盘，选中文件或文件夹后右单击，选择快捷菜单中的“编辑”/“拷贝”命令。然后在站点名称下拉列表中重新选择站点名称，选择快捷菜单中的“编辑”/“粘贴”命令，便将文件或文件夹复制到站点中。,28,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.4 打开、保存和预览网页,打开网页文档,选择“文件”/“打开”命令，在出现的“打开”对话框中选择网页文件，单击“打开”按钮；,选择“文件”/“打开最近的文件”子菜单中列出的文件名；,单击起始页中列出的最近打开的文件名；,单击起始页中“打开”选项，在出现的“打开”对话框选择文件；,在“文件”面板中双击文件名。,29,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.4 打开、保存和预览网页,保存网页文档,选择“文件”/“另存为”命令，打开“另存为”对话框，输入文件名，单击“保存”按钮；,当网页的内容后，选择“文件”/“保存”命令、或按Ctrl+S键、或单击“标准”工具栏上的“保存”按钮；,选择“文件”/“全部保存”命令或单击“标准”工具栏上的“全部保存”按钮。,30,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.2.4 打开、保存和预览网页,预览网页,对于打开的网页，在预览网页之前必须先保存网页文档。选择“文件”/“在浏览器中预览”/“IExplore 6.0”命令或按F12键，便可以在Microsoft Internet Explorer窗口中预览网页。,对于没有在编辑窗口中打开的网页文档，则应在“文件”面板中选定文件，右单击后在快捷菜单中选择“文件”/“在浏览器中预览”/“IExplore 6.0”命令，或者按F12键。,31,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3 编辑网页,文本编辑,表格使用,图像应用,多媒体的应用,页面属性设置,32,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,输入文本内容,添加文本,在设计视图中，定位插入点，然后开始输入文本内容，遇到窗口边界时会自动换行。,当输入完一个段落时，用Enter键另起一段。,用Shift+Enter键强制分行，但不分段。,默认情况下，输入文本时不允许输入多个连续的空格，只能输入一个空格。如果要输入多个连续的空格，可以先插入一个空格，然后单击“拆分”按钮。此时在HTML代码窗口中1个空格显示为“”并进行复制，便可以产生多个空格。,另外，选择“编辑”/“首选参数”命令，在“首选参数”对话框中选择“常规”分类，并选中“允许输入多个连续的空格”复选框，便可以在“设计”界面中输入多个空格。,33,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,插入特殊符号,选择“插入”工具栏中的“文本”选项卡，单击“字符”按钮旁边的下拉箭头，在弹出的菜单中选择要插入的字符。,34,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,如果要菜单中没有要插入符号，可以选择“其他字符”选项，在弹出的“插入其他字符”对话框中选择字符。,35,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,在插入特殊字符时，由于文档编码方式不同，某些特殊字符不能显示出来，此时会出现警告信息对话框，单击“确定”按钮。在设计视图中选定特殊符号，在属性检查器中将它的字体设置为西文字体，即可显示相应的符号。,36,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,插入水平线,选择“插入”/“HTML”/“水平线”命令，或者单击“插入”工具栏的“HTML”选项卡中的“水平线”按钮。,选定水平线，将显示水平线的属性检查器。,37,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,插入日期,选择“插入”/“日期”命令，或者在“插入”栏的“常用”选项卡中单击“日期”按钮，打开“插入日期”对话框。,38,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,移动和复制,先选定要移动或复制文本的内容，选择“编辑”/“剪切”命令，然后将插入点定位于要移动到的目标位置，选择“编辑”/“粘贴”命令。,同样，如果需要复制文本内容，可以使用“编辑”/“拷贝”和“粘贴”命令。,另外，进行移动和复制操作的方法还有：使用“标准”工具栏上的“剪切”、“复制”和“粘贴”按钮，或右单击鼠标选择快捷菜单中相应的命令。,39,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,导入Word文档,选择“文件”/“导入”/“Word文档”命令，打开“导入Word文档”对话框，选择要导入的文件后单击“打开”按钮。,在导入Word文档时，可以在“格式化”下拉列表中选择导入的格式，仅包含文本内容，或者带有段落、列表和表格等结构，或者带有基本格式、全部格式。,40,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,设置文本格式,设置文本字体,选中文本内容后，在属性检查器的“字体”下拉列表中可以选择所需要的字体，也可以在“文本”/“字体”子菜单下选择字体。,Dreamweaver的“字体”下拉列表中列出的是由多种字体构成的字体组合，用户浏览网页时，,浏览器按字体组合中的字体顺序在用户计算机系统上进行查找并显示字体。,41,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,选择“编辑字体列表”选项，打开“编辑字体列表”对话框，从中添加或修改“字体”下拉列表中的字体组合。,42,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,设置文本大小,在默认状态下，没有设置文本字体的固定大小，在设计视图中看到的文本大小并不一定是以后用户在浏览器窗口中看到的文本字体大小。在浏览器窗口中可以设置查看文本的大小，当设置的文字大小不同，网页中显示的文本大小也就不同了。,选定文本后在文本的属性检查器的“大小”下拉列表中选择文本的大小。设置文本大小有两种方式：一种是用数值来设置文本的大小。另一种方式是设置文本的相对大小：极小、特小、小、中、大、特大、极大、较小、较大等。用浏览器查看网页时，用数值设置大小的文本能保持设计时的大小，而设置相对大小的文本将随着浏览器的设置而改变文本的大小。,43,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,设置文本颜色,单击属性检查器中的“文本颜色”按钮,单击“,调色盘”按钮，出现“颜色”对话框,选择“文本”/“颜色”命令，出现“颜色”对话框,“,调色盘”按钮,44,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,设置文本的其他格式,选定文本后，选择“文本”/“样式”子菜单中：粗体、斜体、下划线、删除线、打字型、强调、加强等命令。,属性检查器中“粗体”按钮和“斜体”按钮。,45,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,编排段落格式,段落是由一些字符组成，以Enter键结束的，段落的格式包括段落的对齐方式、段落的缩进和突出。Dreamweaver还提供了若干个标准格式，用于统一地设置段落中字符的大小和颜色。,段落的格式是作用于整个段落的，因此在设置段落的格式时不必选定整个段落的内容，只要将插入点定位于段落中的任何位置，设置的格式将会作用于整个段落。,46,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,应用标准格式,Dreamweaver提供了多种标准格式，它包括：“段落”、“预先格式化的”、“标题1”“标题6”等。,将插入点定位于要应用标准格式的段落中，在属性检查器中的“格式”下拉列表中选择合适的格式。,“文本”/“段落格式”子菜单中列出的标准格式。,47,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,设置对齐方式,段落的对齐方式有4种：左对齐、居中对齐、右对齐和两端对齐。,单击属性检查器中的“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮或“两端对齐”按钮。,“文本”/“段落格式”子菜单中的对齐格式。,48,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,文本缩进和突出,文本缩进：将整个段落的左右边界分别向中央缩进一段距离；,文本凸出：将段落的左右边界向外扩展一段距离。,单击属性检查器中的“文本缩进”按钮和“文本突出”按钮；,选择“文本”/“缩进”和“突出”命令；,按Tab键，设置段落缩进。,49,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,制作列表,列表分为两种：项目列表和编号列表。,文本缩进,项目列表,Shift+Enter换行,50,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,项目列表,单击属性检查器中的“项目列表”按钮；,选择“文本”/“列表”/“项目列表”命令。,项目列表是作用于段落的，因此项目符号仅显示在段落的开头。,改变列表的层次：单击属性检查器中的“文本缩进”按钮和“文本突出”按钮。,清除项目列表形式：再次单击“项目列表”按钮，或选择“文本”/“列表”/“无”命令。,51,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,编号列表,单击属性检查器中的“编号列表”按钮；,选择“文本”/“列表”/“编号列表”命令。,改变编号列表的层次：设置文本的缩进和突出,清除编号：再次单击“编号列表”按钮，或选择“文本”/“列表”/“无”命令。,52,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,修改列表属性,默认的项目符号是“”，编号是“1.2.3.”。,选择“文本”/“列表”/“属性”命令，或者单击属性检查器中的“列表项目”按钮，在打开的“列表属性”对话框中可以重新设置列表的外观。,53,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,文本拼写检查、查找和替换,拼写检查,选择“文本”/“检查拼写”命令，便对页面中的文本进行拼写检查。当遇到无法识别的单词时，将出现“检查拼写”对话框。,54,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.1 文本编辑,查找和替换,选择“编辑”/“查找和替换”命令，打开“查找和替换”对话框。,55,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,插入表格,表格是由若干个单元格组成的，每个单元格中可以插入文字、图片等各种元素，甚至可以在单元格中再插入另一个表格。,56,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,在文档中插入表格,选择“插入”/“表格”命令,单击“插入”工具栏的“常用”选项卡中的“表格”按钮。,单元格边距是单元格内容和单元格边框之间的像素数。,单元格间距确定相邻的表格单元格之间的像素数。,若要确保浏览器不显示表格中的边距和间距，请将“单元格边距”和“单元格间距”设置为 0。,57,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,建立了表格以后，将插入点定位于单元格中，可以像非表格区域一样直接输入文本或插入图像等网页元素。,输入一个单元格的内容后，还可以使用键盘上的方向键将插入点移到相邻的单元格，按Tab键将插入点移到下一个单元格，而按Shift+Tab键将插入点移到上一个单元格。,58,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,导入表格式数据,在导入之前先将数据源文件中的数据按指定格式编排：每行数据以Enter键结束，同一行中的各项数据之间用某一定界符（如Tab、逗号、分号等）进行分隔，并保存为文本文件。,59,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,选择“文件”/“导入”/“表格式数据”命令；,选择“插入”/“表格对象”/“导入表格式数据”命令，打开“导入表格式数据”对话框。,60,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,编辑表格,选定表格元素,选定整张表格,单击表格中的边框线,将插入点定位于表格中任意单元格后，单击文档窗口左下方状态行上的标签；,两次选择“编辑”/“全选”命令；,连续按两次Ctrl+A键；,选择“修改”/“表格”/“选择表格”命令；,右单击后，在快捷菜单中选择“表格”/“选择表格”。,61,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,选定表格行的方法,将插入点定位于要选定的表格行中任意单元格后，单击文档窗口左下方状态行上的标签；,将鼠标移到表格行的左边框附近位置，当鼠标指针呈指向右方的黑色水平箭头形状、并且相应行的单元格外框呈红色时，单击后便选中相应的行。,选定表格行后上下拖动鼠标，则选中相邻的多行表格。,按住Ctrl键，然后在表格左边框附近位置单击，则选中不相邻的表格行。,62,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,选定表格列的方法,将鼠标移到表格列的顶部边框附近位置，当鼠标指针呈指向下的黑色垂直箭头形状时单击，便选中相应的列。,选定表格列后左右拖动鼠标，则选中相邻的多列表格。,按住Ctrl键，然后在表格顶部边框附近位置单击，则选中不相邻的表格列。,63,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,选定单元格的基本方法,按住Ctrl键单击要选定的单元格。,将插入点定位于要选定的单元格，单击文档窗口左下方状态行上的标签；,将插入点定位于要选定的单元格，选择“编辑”/“全选”命令；,将插入点定位于要选定的单元格，按Ctrl+A键。,64,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,选定相邻的单元格,将鼠标指向要选定的第一个单元格，单击后拖到最后一个单元格；,选定第一个单元格后，按住Shift键单击最后一个单元格。,选定若干个不相邻的单元格,选定一个单元格后，按住Ctrl键然后选择其余单元格，可以同时选定若干个不相邻的单元格。,取消选定状态,选定整张表格、表格行、列或单元格后，单击任意一个单元格，或者单击表格以外部分，便取消选定状态。,65,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,插入行与列,选择“修改”/“表格”/“插入行”命令；,选择“修改”/“表格”/“插入列”命令；,选择“修改”/“表格”/“插入行或列”命令；,选择“插入”/“表格对象”/“在上面插入行”、“在下面插入行”、“在左边插入列”或“在右边插入列”命令。,66,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,删除行与列,选择“修改”/“表格”/“删除行”或“删除列”命令；,按Delete键；,但是，若选定单元格后按Delete键，则删除单元格的内容。,67,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,拆分单元格,选定一个单元格后，选择“修改”/“表格”/“拆分单元格”命令；,单击单元格属性检查器中的“拆分单元格为行或列”按钮，打开“拆分单元格”对话框。,68,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,合并单元格,选定相邻的几个单元格后，选择“修改”/“表格”/“合并单元格”命令；,单击单元格属性检查器中的“合并所选单元格”按钮。,69,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,移动和复制行与列,选择“编辑”/“剪切”命令或单击标准工具栏上的“剪切”按钮，然后将插入点定位于新的位置，选择“编辑”/“粘贴”命令或单击标准工具栏上的“粘贴”按钮，便将整行内容移动到选定位置所在行的上方，或者将整列内容移动到选定位置所在列的左面。,若选定位置在表格之外，则粘贴的行或列作为一个新的表格内容，放置在表格之后。,选定行或列后，选择“编辑”/“拷贝”命令或单击标准工具栏上的“拷贝”按钮，然后选择“粘贴”命令，可以将选定行或列复制到指定位置的上方或左面。,70,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,调整表格大小,改变表格的宽度：拖动表格右边的控制点。,改变表格的高度：拖动表格底部的控制点。,同时改变表格高度和宽度：拖动表格右下角的控制点。,改变某一行高度：拖动某一行单元格下方的边框线。,改变某一列宽度：拖动某一列单元格右面的边框线。,在属性检查器的“宽”和“高”文本框中列宽和行高的精确数值。,调整表格的大小时，各列的宽度按原来比例自动调整。没有设置行高的各行也按原来比例调整高度，而对于设置过行高的行，其高度不会改变。,71,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,格式化表格,套用现有表格格式,选择“命令”/“格式化表格”命令。,72,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,设置表格的属性,选定表格后，在表格的属性检查器中设置。,73,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.2 表格使用,设置单元格、行和列的属性,选定行、列或单元格后，在行或列的属性检查器中设置。,74,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,插入图像,在Web页中通常使用三种：GIF、JPEG和PNG，这三种格式的共同特点是压缩率较高。,目前，GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们，因此通常在网页中插入的图像都使用GIF和JPEG文件格式。,75,大学计算机信息科技教程（第二版）第5章 网页制作基础,GIF（图形交换格式）文件最多使用 256 种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。,JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为 JPEG 文件可以包含数百万种颜色。随着 JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。,76,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,插入图像,选择“插入”/“图像”命令；,单击“插入”工具栏的“常用”选项卡中的“图像”按钮旁的下拉箭头，选择“图像”命令。,77,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,如果插入的图像文件不在站点文件夹中，单击“确定”按钮后将出现提示信息框，提示“是否愿意将该文件复制到根文件夹中吗？”。通常单击“是”按钮，出现“复制文件为”对话框，选择保存文字并输入文件名后单击“保存”按钮。,然后出现“图像标签辅助功能属性”对话框，。在“替换文本”组合框中可以输入,一段简短描述，以后浏览网页时当鼠标指向该图像，在鼠标指针下方将显示这段描述。,78,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,插入图像占位符,图像占位符是在准备将最终图像添加到Web页之前使用的临时图形。,选择“插入”/“图像对象”/“图像占位符”命令；,单击“插入”工具栏的“常用”选项卡中的“图像”按钮旁的下拉箭头，选择“图像占位符”命令。,当找到合适的图像素材后，双击图像占位符，打开“选择图像源文件”对话框，选择图像文件；,也可以选定图像占位符，在属性检查器中单击“源文件”文本框旁的按钮，选择图像文件。,添加图像后，图像占位符对象变为图像对象，其大小由添加图像的大小决定。,79,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,创建鼠标经过图像,包括主图像（原始图像）和次图像（鼠标经过图像）两个对象。,选择“插入”/“图像对象”/“鼠标经过图像”命令；,单击“插入”工具栏的“常用”选项卡中的“图像”按钮旁的下拉箭头，选择“鼠标经过图像”命令。,80,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,编辑图像,设置图像属性,选中图像后，在属性检查器中可以设置和修改图像的各个属性。,81,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,使用内部图像编辑器,裁剪,选定图像后，选择“修改”/“图像”/“裁剪”命令或单击属性检查器中的“裁剪”按钮，弹出提示信息框。单击“确定”按钮后，拖动图像周围出现用于裁剪的控制点。双击边界框内部或者按Enter键，图像缩小为指定区域大小。,重新取样,选择“修改”/“图像”/“重新取样”命令或单击“重新取样”按钮。(可让您对已调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质。),82,大学计算机信息科技教程（第二版）第5章 网页制作基础,图像重新取样添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会减小图像文件的大小，其结果是下载性能的提高。,在 Dreamweaver 中重新调整图像的大小时，您可以对图像进行重新取样，以容纳其新尺寸。重新取样位图对象时，会在图像中添加或删除像素，以使其变大或变小。重新取样图像以取得更高的分辨率一般不会导致品质下降。但重新取样以取得较低的分辨率总会导致数据丢失，并且通常会使品质下降。,83,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,修改,亮度和对比度,(,修改图像中像素的亮度或对比度),选择“修改”/“图像”/“,亮度,/,对比度”命令,单击“亮度和对比度”按钮,84,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.3 图像应用,锐化图像(,可让您调整图像的清晰度),选择“修改”/“图像”/“锐化”命令,单击“锐化”按钮,85,大学计算机信息科技教程（第二版）第5章 网页制作基础,锐化可通过增加图像中边缘的对比度来调整图像的焦点。扫描图像或拍摄数码照片时，大多数图像捕获软件的默认操作是柔化图像中各对象的边缘。这可以防止特别精细的细节从组成数码图像的像素中丢失。不过，要显示数码图像文件中的细节，经常需要锐化图像，从而提高边缘的对比度，使图像更清晰。,86,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.4 多媒体的应用,插入Flash动画,选择“插入”/“媒体”/“Flash”命令；,单击“插入”工具栏的“常用”选项卡中的“媒体”按钮旁的下拉箭头，选择“Flash”命令。,查看动画的播放效果：选中插入的Flash动画后，单击属性检查器中的“播放”按钮。,87,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.4 多媒体的应用,插入Flash文本,选择“插入”/“媒体”/“Flash文本”命令；,单击“插入”工具栏的“常用”选项卡中的“媒体”按钮旁的下拉箭头，选择“Flash文本”命令。,修改Flash文本：选定后单击属性检查器中的“编辑”按钮。,88,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.4 多媒体的应用,插入Flash按钮,选择“插入”/“媒体”/“Flash按钮”命令；,单击“插入”工具栏的“常用”选项卡中的“媒体”按钮旁的下拉箭头，选择“Flash按钮”命令。,89,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.4 多媒体的应用,插入Flash视频,选择“插入”/“媒体”/“Flash视频”命令；,单击“插入”工具栏的“常用”选项卡中的“媒体”按钮旁的下拉箭头，选择“FlashVideo”命令。,90,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.5 页面属性设置,文档的页面属性包括许多内容，例如页面标题、背景图像和颜色、文本和链接颜色、边距等。页面属性主要分为五类，它们是：外观、链接、标题、标题/编码、跟踪图像。,选择“修改”/“页面属性”命令或者单击属性检查器上的“页面属性”按钮，在打开的“页面属性”对话框中可以设置页面的各类属性。,91,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.5 页面属性设置,外观,在“页面属性”对话框中选择“分类”列表框中的“外观”选项后，可以设置与网页外观相关的属性。,92,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.5 页面属性设置,链接,在“页面属性”对话框中选择“分类”列表框中的“链接”选项后，可以定义链接文本的默认字体、字体大小，以及链接、访问过的链接和活动链接的颜色。,93,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.5 页面属性设置,标题,在“页面属性”对话框中选择“分类”列表框中的“标题”选项后，可以重新定义属性检查器的“格式”下拉列表中各种格式的文字字体、大小和颜色。,94,大学计算机信息科技教程（第二版）第5章 网页制作基础,5.3.5 页面属性设置,标题/编码,在“页面属性”对话框中选择“分类”列表框中的“标题/编码”选项后，可以重新定义网页的标题，制作 Web 页面时所用语言的文档编码类型，以及指定要用于该编码类型的 Unicode 标准化表单。,95,大学计算机信息科技教程（第二版）第5章 网页制作基础,HTML 页面的标题可以帮助站点访问者在浏览时明确所查看的内容，并在访问者的历史记录和书签列表中标识页面。如果不给页面加标题，页面会在浏览器窗口、书签列表和历史记录列表中显示为无标题文档。,注意:给文档起一个文件名（通过保存该文件）不同于给页面加标题。,96,大学计