第4章网页制作.ppt

第第4章章 网页制作网页制作4.1 站点规划站点规划4.2 网页布局与实现网页布局与实现4.3 网页美化网页美化4.4 网页交互网页交互4.1 站点规划站点规划4.1.1实例介绍实例介绍l如果在一开始就对站点进行仔细地规划和组织，将可以为如果在一开始就对站点进行仔细地规划和组织，将可以为后期的工作节约时间。组织站点不仅包括确定将在哪里发后期的工作节约时间。组织站点不仅包括确定将在哪里发布文件，还包括检查站点要求、访问者情况以及站点目标。布文件，还包括检查站点要求、访问者情况以及站点目标。此外，还应考虑诸如用户访问以及浏览器、插件和下载限此外，还应考虑诸如用户访问以及浏览器、插件和下载限制等技术要求。当组织好信息并确定结构后，就可以开始制等技术要求。当组织好信息并确定结构后，就可以开始创建站点了。要制作一个网站，第一步操作都是一样的，创建站点了。要制作一个网站，第一步操作都是一样的，就是要创建一个就是要创建一个“站点站点”，这样可以使整个网站的脉络结，这样可以使整个网站的脉络结构请晰地展现在面前，避免以后再进行纷杂的管理。构请晰地展现在面前，避免以后再进行纷杂的管理。下一页返回4.1 站点规划站点规划l1.新建站点新建站点l(1)进入进入Dreamweave8工作界面后选择工作界面后选择【站点站点/新建站点新建站点】菜单命令，打开菜单命令，打开【站点定义站点定义】对话框。对话框。l(2)设置站点名称设置站点名称:在在“您打算为您的站点起什么名字您打算为您的站点起什么名字?”文本框中输入站点名称文本框中输入站点名称dakang后单击后单击【下一步下一步】按钮。按钮。l(3)确定是否使用服务器技术确定是否使用服务器技术:在打开的对话框中选择在打开的对话框中选择【否，否，我不想使用服务器技术我不想使用服务器技术】选项，再单击选项，再单击【下一步下一步】按钮。按钮。l(4)输入文件存储位置输入文件存储位置:在打开的选择存储位置对话框的在打开的选择存储位置对话框的“您将把文件存储在计算机上的什么位置您将把文件存储在计算机上的什么位置?”文本框中输入文本框中输入本地站点存储的位置，再单击本地站点存储的位置，再单击【下一步下一步】按钮。按钮。上一页 下一页返回4.1 站点规划站点规划l(5)设置连接方式设置连接方式:在打开的在打开的【连接方式连接方式】对话框的对话框的“您如您如何连接到远程服务器何连接到远程服务器?”下拉列表框中选择下拉列表框中选择【无无】，再单，再单击击【下一步下一步】按钮。按钮。l(6)完成站点创建完成站点创建:在打开的完成站点创建对话框中，单击在打开的完成站点创建对话框中，单击【完成完成】按钮完成本地站点的创建。按钮完成本地站点的创建。l2.管理站点管理站点l(1)打开打开【文件文件】面板，选择面板，选择【窗口窗口】【文件文件】菜单命菜单命令打开令打开【文件文件】面板。面板。l(2)选择选择“新建文件夹新建文件夹”菜单命令菜单命令:在站点根目录图标上单在站点根目录图标上单击鼠标右键，在弹出的快捷菜单中选择击鼠标右键，在弹出的快捷菜单中选择【新建文件夹新建文件夹】菜菜单命令。单命令。上一页 下一页返回4.1 站点规划站点规划l(3)修改文件夹名称修改文件夹名称:刚建好的文件夹名称处于改写状态，刚建好的文件夹名称处于改写状态，输入输入“image”文件夹名，文件夹名，“image”文件夹用来存放网页文件夹用来存放网页中的图片，按回车键确认输入。中的图片，按回车键确认输入。l(4)创建新文件夹并命名创建新文件夹并命名:在站点根目录图标上单击鼠标右在站点根目录图标上单击鼠标右键，在弹出的快捷菜单中选择键，在弹出的快捷菜单中选择【新建文件夹新建文件夹】菜单命令。菜单命令。刚建好的文件夹名称处于改写状态，输入刚建好的文件夹名称处于改写状态，输入“media”文件文件夹名，夹名，media”文件夹用来存放网页中的文件夹用来存放网页中的Flash等文件，等文件，按回车键确认输入。按回车键确认输入。l(5)在站点中添加文件在站点中添加文件“index.html:为站点添加首页文为站点添加首页文件，在站点根目录图标上单击鼠标右键，在弹出的快捷菜件，在站点根目录图标上单击鼠标右键，在弹出的快捷菜单中选择单中选择【新建文件新建文件】菜单命令。刚建好的文件名称处于菜单命令。刚建好的文件名称处于改写状态，输入文件名改写状态，输入文件名index.html。上一页 下一页返回4.1 站点规划站点规划4.1.2相关知识相关知识l1.关于关于Dreamweaver站点站点lWeb站点是一组具有共享属性站点是一组具有共享属性(如相关主题、类似的设计如相关主题、类似的设计或共同目的或共同目的)的链接文档和资源。的链接文档和资源。MacromediaDreamweaver8是一个站点创建和管理工具，是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的因此使用它不仅可以创建单独的文档，还可以创建完整的Web站点。创建站点。创建Web站点的第一步是规划。为了达到最佳站点的第一步是规划。为了达到最佳效果，在创建任何效果，在创建任何Web站点页面之前，应对站点的结构进站点页面之前，应对站点的结构进行设计和规划。行设计和规划。lDreamweaver站点提供一种组织所有与站点提供一种组织所有与Web站点关联的文站点关联的文档的方法。通过在站点中组织文件，可以利用档的方法。通过在站点中组织文件，可以利用上一页 下一页返回4.1 站点规划站点规划lDreamweaver将站点上传到将站点上传到Web服务器、自动跟踪和维护服务器、自动跟踪和维护链接、管理文件以及共享文件。若要充分利用链接、管理文件以及共享文件。若要充分利用Dreamweaver的功能，需要定义一个站点。本地文件夹是的功能，需要定义一个站点。本地文件夹是您的工作目录。您的工作目录。Dreamweaver将该文件夹称为将该文件夹称为“本地站点本地站点”。此文件夹可以位于本地计算机上，也可以位于网络服。此文件夹可以位于本地计算机上，也可以位于网络服务器上。这就是为务器上。这就是为Dreamweaver站点所处理的文件的存储站点所处理的文件的存储位置。只需建立本地文件夹即可定义位置。只需建立本地文件夹即可定义Dreamweaver站点。站点。若要向若要向Web服务器传输文件或开发服务器传输文件或开发Web应用程序，还需添应用程序，还需添加远端设置新的加远端设置新的Dreamweaver站点。规划站点结构后，或站点。规划站点结构后，或者如果己经存在一个站点，应该先在者如果己经存在一个站点，应该先在Dreamweave:中定义中定义站点，然后才能进行开发。设置站点，然后才能进行开发。设置Dreamweaver站点是一种站点是一种组组上一页 下一页返回4.1 站点规划站点规划l织所有与织所有与Web站点关联的文档的方法。设置好站点关联的文档的方法。设置好Dreamweaver站点后，最好将该站点导出，以便拥有一个站点后，最好将该站点导出，以便拥有一个本地备份副本。本地备份副本。l2.定义一个不使用服务器技术的站点定义一个不使用服务器技术的站点l(1)单击单击【新建新建】按钮按钮l出现出现【站点定义站点定义】对话框。对话框。l(2)执行下列操作之一执行下列操作之一l单击单击【基本基本】选项卡以使用选项卡以使用【站点定义向导站点定义向导】，它将引，它将引导您逐步完成设置过程。导您逐步完成设置过程。l单击单击【高级高级】选项卡以使用选项卡以使用【高级高级】设置，它使您可以设置，它使您可以根据击要分别设置本地、远端和测试文件夹。根据击要分别设置本地、远端和测试文件夹。上一页 下一页返回4.1 站点规划站点规划l(3)完成完成Dreamweaver站点设置过程站点设置过程:l在在【站点定义向导站点定义向导】中，回答每一屏上出现的问题，然中，回答每一屏上出现的问题，然后单击后单击【下一步下一步】继续进行设置，或者单击继续进行设置，或者单击【上一步上一步】返返回到前一屏。回到前一屏。l对于对于【高级高级】设置，根据击要完成设置，根据击要完成“本地信息本地信息”类别、类别、“远端信息远端信息”类别和类别和“测试服务器测试服务器”类别。类别。l(4)使用使用【高级高级】设置来设置设置来设置Dreamweaver站点。站点。l使用使用【站点定义站点定义】对话框中的对话框中的【高级高级】设置来设置设置来设置Dreamweaver站点。站点。【高级高级】设置使您可以根据击要分别设置使您可以根据击要分别设置本地、远端和测试设置本地、远端和测试(用于处理动态页用于处理动态页)文件夹。建议熟文件夹。建议熟悉悉Dreamweaver的用户使用这种方法。的用户使用这种方法。上一页 下一页返回4.1 站点规划站点规划l3.管理站点信息管理站点信息l编辑编辑Dreamweaver站点设置站点设置:l使用使用【站点定义站点定义】对话框的对话框的【高级高级】设置编辑设置编辑Dreamweaver站点。站点。l若要编辑若要编辑Dreamweaver站点设置，请执行以下操作之一站点设置，请执行以下操作之一:l选择选择【站点站点】一一【管理站点管理站点】，在，在【管理站点管理站点】对话框中对话框中选择一个站点，然后单击选择一个站点，然后单击【编辑编辑】。在。在【文件文件】面板中，面板中，从弹出式菜单中选择从弹出式菜单中选择【管理站点管理站点】(当前站点、服务器或当前站点、服务器或驱动器显示在该菜单中驱动器显示在该菜单中)，从，从【管理站点管理站点】对话框中选择对话框中选择一个站点，然后单击一个站点，然后单击【编辑编辑】。上一页 下一页返回4.1 站点规划站点规划l(1)选择选择【站点站点】【管理站点管理站点】，出现，出现【管理站点管理站点】对对话框。话框。l(2)单击单击【新建新建】。出现。出现【站点定义站点定义】对话框。对话框。l(3)如果未显示如果未显示【高级高级】设置，请单击设置，请单击【高级高级】按钮。按钮。【站点定义站点定义】对话框的对话框的【高级高级】选项卡显示选项卡显示【本地信息本地信息】类类别选项。别选项。l(4)完成对话框。完成对话框。l(5)单击单击“确定确定”。l4.从站点列表中删除从站点列表中删除Dreamweave:站点站点l如果您不再需要使用如果您不再需要使用Dreamweaver中的某一站点，则可以中的某一站点，则可以从站点列表中将该站点删除。从站点列表中将该站点删除。上一页 下一页返回4.1 站点规划站点规划l站点中的文件不会被删除。站点中的文件不会被删除。l(1)选择选择【站点站点】【管理站点管理站点】。出现。出现【管理站点管理站点】对对话框。话框。l(2)选择一个站点名称。选择一个站点名称。l(3)单击单击【删除删除】。出现一个对话框，要求您确认删除。出现一个对话框，要求您确认删除。l(4)单击单击【是是】从列表中删除站点，或单击从列表中删除站点，或单击【否否】保留站保留站点名称。如果单击点名称。如果单击【是是】，该站点名称将从列表中消失。，该站点名称将从列表中消失。l(5)单击单击【完成完成】关闭关闭【管理站点管理站点】对话框。对话框。l5.创建并存储新的页面创建并存储新的页面l(1)创建新文档创建新文档上一页 下一页返回4.1 站点规划站点规划lDreamweaver为您提供了儿种选择新的工作文档的选项。为您提供了儿种选择新的工作文档的选项。可以用下列方法创建新文档。可以用下列方法创建新文档。l创建新的空白文档创建新的空白文档l选择选择【文件文件】【新建新建】。即出现。即出现【新建文档新建文档】对话框。对话框。【常规常规】选项卡己被选定。选项卡己被选定。l从从【类别类别】列表中选择列表中选择“基本页基本页”、“动态页动态页”、“模板模板页页”、“其他其他”或或“框架集框架集”;l然后从右侧的列表中选择要创建的文档的类型。例如，选然后从右侧的列表中选择要创建的文档的类型。例如，选择择“基本页基本页”创建创建HTML文档，或选择文档，或选择“动态页动态页”创建创建ColdFusion或或ASP文档。文档。上一页 下一页返回4.1 站点规划站点规划l单击单击【创建创建】按钮。新文档在按钮。新文档在【文档文档】窗口中打开。窗口中打开。l保存该文档。保存该文档。l创建基于创建基于Dreamweaver设计文件的空白文档或模板。设计文件的空白文档或模板。lDreamweaver附带了儿种以专业水准开发的页面布局和设附带了儿种以专业水准开发的页面布局和设计元素文件，可以将这些设计文件作为设计站点页面的起计元素文件，可以将这些设计文件作为设计站点页面的起点。当您创建基于设计文件的文档时，点。当您创建基于设计文件的文档时，Dreamweaver会创会创建文件的副本。建文件的副本。l选择选择【文件文件】【新建新建】。即出现。即出现【新建文档新建文档】对话框。对话框。【常规常规】选项卡己被选定。选项卡己被选定。l在在【类别类别】列表中，选择列表中，选择“CSS样式表样式表”、“基于表格的基于表格的布局布局”、“页面设计页面设计(CSS)”、“页面设计页面设计”或或“页面设页面设计计(有辅助有辅助上一页 下一页返回4.1 站点规划站点规划l功能的功能的)”，然后从右侧的列表中选择一个设计文件。您，然后从右侧的列表中选择一个设计文件。您可以预览设计文件并阅读关于文档设计元素的简要说明。可以预览设计文件并阅读关于文档设计元素的简要说明。l单击单击“创建创建”按钮。新文档在按钮。新文档在【文档文档】窗口中打开。如果窗口中打开。如果选择了一个选择了一个css样式表，则样式表，则【文档文档】窗口会显示窗口会显示css文档，文档，而该而该css样式表会在样式表会在“代码代码”视图中打开。视图中打开。l保存该文档。如果该文件包含指向资源文件的链接，将会保存该文档。如果该文件包含指向资源文件的链接，将会出现出现【复制相关文件复制相关文件】对话框，使您可以保存相关文件的对话框，使您可以保存相关文件的副本。副本。l如果出现如果出现【复制相关文件复制相关文件】对话框，请设置选项，然后单对话框，请设置选项，然后单击击【复制复制】，将资源复制到所选的文件夹中。可以为相关，将资源复制到所选的文件夹中。可以为相关文件选择您自己的位置或使用文件选择您自己的位置或使用Dreamweaver生成的默认文生成的默认文件夹位置件夹位置(基于设计文件的源名称基于设计文件的源名称)。上一页 下一页返回4.1 站点规划站点规划l(2)保存新文档保存新文档l创建新文档后，需要保存它。创建新文档后，需要保存它。l选择选择【文件文件】【保存保存】。l在出现的对话框中，定位要用来保存文件的文件夹。在出现的对话框中，定位要用来保存文件的文件夹。l在在【文件名称文件名称】文本框中，键入文件名。请不要在文件文本框中，键入文件名。请不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。具体说来就是不要在打算放到远程服务器上的文字开头。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊字符或标点符号件名中使用特殊字符或标点符号(如冒号、斜杠或句号如冒号、斜杠或句号)。很多服务器在上传时会更改这些字符，这会导致与这些文很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。件的链接中断。上一页 下一页返回4.1 站点规划站点规划l(3)打开现有文档打开现有文档l在在Dreamweaver中可打开现有中可打开现有Web页或基于文本的文档，页或基于文本的文档，即使它们不是用即使它们不是用Dreamweaver创建的。可打开该文档并用创建的。可打开该文档并用Dreamweaver在在“设计设计”视图或视图或“代码代码”视图中编辑该文视图中编辑该文档。档。l如果打开的文档是一个另存为如果打开的文档是一个另存为HTML文档的文档的MicrosoftWord文件，则可以使用文件，则可以使用“请理请理Word的的HTML”命令来请除命令来请除Word插入到插入到HTML文件中的无关标记标签。文件中的无关标记标签。也可以打开非也可以打开非HTML文本文件，如文本文件，如JavaScript文件、文件、XML文件、文件、CSS样式表或用字处理程序或文本编辑器保存的文样式表或用字处理程序或文本编辑器保存的文本文件。本文件。l选择选择【文件文件】【打开打开】，出现，出现【打开打开】对话框。对话框。上一页 下一页返回4.1 站点规划站点规划l定位到并选择要打开的文件。定位到并选择要打开的文件。l单击单击【打开打开】后，文档在文档窗口中打开。后，文档在文档窗口中打开。4.1.3知识拓展知识拓展l1.导入和导出站点导入和导出站点l可以将站点导出为包含站点设置的可以将站点导出为包含站点设置的XML文件，并在以后文件，并在以后将该站点导入将该站点导入Dreamweaver。这样，您就可以在各计算机。这样，您就可以在各计算机和产品版本之间移动站点，或者与其他用户共享这些设置。和产品版本之间移动站点，或者与其他用户共享这些设置。l(1)导出站点导出站点l选择选择【站点站点】【管理站点管理站点】，出现，出现【管理站点管理站点】对话对话框。框。上一页 下一页返回4.1 站点规划站点规划l选择要导出的一个或多个站点，然后单击选择要导出的一个或多个站点，然后单击【导出导出】按钮。按钮。若要选择多个站点，请按住若要选择多个站点，请按住Ctrl键单击键单击(Windows)或按住或按住Command键单击键单击(Macintosh)每个站点。若要选择某一范每个站点。若要选择某一范围的站点，请按住围的站点，请按住Shift键单击该范围中的第一个和最后一键单击该范围中的第一个和最后一个站点。个站点。l对于要导出的每个站点，请浏览至要保存站点的位置，对于要导出的每个站点，请浏览至要保存站点的位置，然后单击然后单击【保存保存】。如果导出为远端服务器指定用户名和。如果导出为远端服务器指定用户名和密码的站点，则密码的站点，则Dreamweaver会询问您是否要备份设置或会询问您是否要备份设置或是否要将您的设置与其他用户共享。如果要将您的设置与是否要将您的设置与其他用户共享。如果要将您的设置与其他用户共享，则选择第一个选项并单击其他用户共享，则选择第一个选项并单击【确定确定】。Dreamweaver不会保存不适用于其他用户的信息不会保存不适用于其他用户的信息(如您的如您的远端服务器登录信息和本地路径远端服务器登录信息和本地路径)。上一页 下一页返回4.1 站点规划站点规划l单击单击【完成完成】关闭关闭【管理站点管理站点】对话框。对话框。l(2)导入站点导入站点l选择选择【站点站点】【管理站点管理站点】。出现。出现【管理站点管理站点】对话对话框。框。l单击单击【导入导入】按钮。出现按钮。出现【导入站点导入站点】对话框。对话框。l浏览并选择要导入的一个或多个在具有浏览并选择要导入的一个或多个在具有.ste文件扩展名文件扩展名的文件中定义的站点。若要选择多个站点，请按住的文件中定义的站点。若要选择多个站点，请按住Ctll键键上一页 下一页返回4.1 站点规划站点规划l单击单击(Windows)或按住或按住Command键单击键单击(Macintosh)每个每个.ste文件。若要选择某一范围的站点，请按住文件。若要选择某一范围的站点，请按住Shift键单击键单击该范围中的第一个和最后一个文件。该范围中的第一个和最后一个文件。l单击单击【打开打开】开始导入站点。开始导入站点。Dreamweaver导入该站点导入该站点之后，站点名称会出现在之后，站点名称会出现在【管理站点管理站点】对话框中。对话框中。l单击单击【完成完成】关闭关闭【管理站点管理站点】对话框。对话框。上一页返回4.2 网页布局与实现网页布局与实现4.2.1实例介绍实例介绍l传统意义上的表格是用于显示成列数据的，在网页制作中，传统意义上的表格是用于显示成列数据的，在网页制作中，除了这种用途外，另一个最重要的用途就是用于网页布局。除了这种用途外，另一个最重要的用途就是用于网页布局。将图像或文字放置在表格的各个单元格中，从而精确控制将图像或文字放置在表格的各个单元格中，从而精确控制其位置。当单个表格不能满足布局需求时，可以创建嵌套其位置。当单个表格不能满足布局需求时，可以创建嵌套表格。在表格的某个单元格内再插入一个表格，就称之为表格。在表格的某个单元格内再插入一个表格，就称之为嵌套表格，其宽度受所在单元格的宽度限制。嵌套表格，其宽度受所在单元格的宽度限制。l1.用表格布局网页用表格布局网页l(1)打开首页打开首页index.html，双击文件面板中站点文件夹，双击文件面板中站点文件夹下的文件下的文件“index.html”进入首页编辑。进入首页编辑。下一页返回4.2 网页布局与实现网页布局与实现l(2)添加表格进行布局添加表格进行布局:选择选择【插入插入/表格菜单表格菜单】命令定位命令定位网页头部位置，插入网页头部位置，插入1行行2列的表格，并设置表格宽度为列的表格，并设置表格宽度为“776像素像素”，边框粗细为，边框粗细为“0像素像素”，单元格边距为，单元格边距为“0像素像素”，单元格间距为，单元格间距为“0像素像素”，按，按【确定确定】按钮创建按钮创建表格成功。表格成功。l(3)调整表格属性调整表格属性:创建表格后，界面下方为表格属性面板，创建表格后，界面下方为表格属性面板，设置对齐方式为设置对齐方式为“居中对齐居中对齐”，根据网页模版将表格高设，根据网页模版将表格高设置为置为“110像素像素”，按回车键确定。，按回车键确定。l(4)调整表格内单元格大小进行精确定位。将光标放到左调整表格内单元格大小进行精确定位。将光标放到左侧单元格中，这时下方面板为侧单元格中，这时下方面板为“单元格属性单元格属性”。设置单元。设置单元格宽为格宽为“200像素像素”，高为，高为“110像素像素”，并设置水平，并设置水平“居居中对齐中对齐”、垂直、垂直“居中对齐居中对齐”。调整左侧单元格后将光标。调整左侧单元格后将光标放在右放在右上一页 下一页返回4.2 网页布局与实现网页布局与实现l侧单元格中，设置单元格属性宽为侧单元格中，设置单元格属性宽为“576像素像素”，高为，高为“110像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l(5)添加表格继续布局网页。用鼠标选中第一个表格。按添加表格继续布局网页。用鼠标选中第一个表格。按键盘上右箭头键盘上右箭头“”将光标放在这个表格的末端。选择将光标放在这个表格的末端。选择【插入插入/表格菜单表格菜单】命令定位网页头部位置，插入命令定位网页头部位置，插入1行行2列的列的表格，并设置表格宽度为表格，并设置表格宽度为“776像素像素”，边框粗细为，边框粗细为“0像像素素”，单元格边距为，单元格边距为“0像素像素”，单元格间距为，单元格间距为“0像素像素”，按，按【确定确定】按钮创建表格成功。按钮创建表格成功。l(6)调整表格属性。创建表格后，设置对齐方式为调整表格属性。创建表格后，设置对齐方式为“居中居中对齐对齐”，根据网页模版将表格高设置为，根据网页模版将表格高设置为“250像素像素”，按，按回车键确定。回车键确定。上一页 下一页返回4.2 网页布局与实现网页布局与实现l(7)调整表格内单元格大小进行精确定位。将光标放到左调整表格内单元格大小进行精确定位。将光标放到左侧单元格中，设置单元格宽为侧单元格中，设置单元格宽为200像素像素”，高为，高为“250像像素素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对齐居中对齐”。调。调整左侧单元格后将光标放在右侧单元格中，设置单元格属整左侧单元格后将光标放在右侧单元格中，设置单元格属性宽为性宽为“576像素像素”，高为，高为“250像素像素”，并设置水平，并设置水平“居居中对齐中对齐”、垂直、垂直“居中对齐居中对齐”。l(8)添加表格继续布局网页。用鼠标选中上一个表格，按添加表格继续布局网页。用鼠标选中上一个表格，按键盘上右箭头键盘上右箭头“”将光标放在这个表格的末端，选择将光标放在这个表格的末端，选择【插入插入/表格菜单表格菜单】命令定位网页头部位置，插入命令定位网页头部位置，插入4行行2列的列的表格，并设置表格宽度为表格，并设置表格宽度为“776像素像素”，边框粗细为，边框粗细为“0像像素素”，单元格边距为，单元格边距为“0像素像素”，单元格间距为，单元格间距为“0像素像素”，按，按上一页 下一页返回4.2 网页布局与实现网页布局与实现l【确定确定】按钮创建表格成功。创建表格后，设置对齐方式按钮创建表格成功。创建表格后，设置对齐方式为为“居中对齐居中对齐”，根据网页模版将表格高设置为，根据网页模版将表格高设置为“640像像素素”，按回车键确定。，按回车键确定。l(9)调整表格内单元格大小进行精确定位。调整表格内单元格大小进行精确定位。l设置第一行左侧单元格属性高为设置第一行左侧单元格属性高为“340像素像素”，宽为，宽为“200像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l设置第一行右侧单元格属性高为设置第一行右侧单元格属性高为“340像素像素”，宽为，宽为“576像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l设置第一行左侧单元格属性高为设置第一行左侧单元格属性高为“40像素像素”，宽为，宽为“200像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。上一页 下一页返回4.2 网页布局与实现网页布局与实现l设置第一行右侧单元格属性高为设置第一行右侧单元格属性高为“40像素像素”，宽为，宽为“576像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l设置第二行左侧单元格属性高为设置第二行左侧单元格属性高为“180像素像素”，宽为，宽为“200像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l设置第二行右侧单元格属性高为设置第二行右侧单元格属性高为“180像素像素”，宽为，宽为“576像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l设置第四行左侧单元格属性高为设置第四行左侧单元格属性高为“80像素像素”，宽为，宽为“200像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l设置第四行右侧单元格属性高为设置第四行右侧单元格属性高为“80像素像素”，宽为，宽为“576像素像素”，并设置水平，并设置水平“居中对齐居中对齐”、垂直、垂直“居中对居中对齐齐”。l完成了网页基本布局以及网页定位。完成了网页基本布局以及网页定位。上一页 下一页返回4.2 网页布局与实现网页布局与实现l2.网页实现网页实现l将处理过的素材图片全部复制到站点文件夹下将处理过的素材图片全部复制到站点文件夹下“image”文件夹中，将多媒体文件复制到站点文件夹下文件夹中，将多媒体文件复制到站点文件夹下“media”文件夹中，便于直接调用。文件夹中，便于直接调用。l(1)将光标放在单元格中，选择将光标放在单元格中，选择【插入插入】【图像图像】，【选择图像源文件选择图像源文件】在本地站点中选择在本地站点中选择“image”文件夹中文件夹中的的“logo.jpg。l(2)完成第一行的右侧单元格导航栏的制作。完成第一行的右侧单元格导航栏的制作。l为单元格添加背景图像为单元格添加背景图像:将光标放入右侧单元格中，下方将光标放入右侧单元格中，下方单元格属性中选择背景，为单元格添加单元格属性中选择背景，为单元格添加“banner.jpg图图像。像。上一页 下一页返回4.2 网页布局与实现网页布局与实现l将光标放到右侧单元格添加嵌套表格，选择将光标放到右侧单元格添加嵌套表格，选择【插入插入】【表格表格】。l插入插入2行行1列的表格，并设置表格宽度为列的表格，并设置表格宽度为“560像素像素”，边，边框粗细为框粗细为“0像素像素”，单元格边距为，单元格边距为“0像素像素”，单元格间，单元格间距为距为“0像素像素”，按，按【确定确定】按钮创建表格成功。按钮创建表格成功。l创建表格后，设置对齐方式为创建表格后，设置对齐方式为“居中对齐居中对齐”，根据网页模，根据网页模版将表格高设置为版将表格高设置为“40像素像素”，l按回车键确定。按回车键确定。l选中表格后按键盘选中表格后按键盘“”，将光标放到背景单元格中，选，将光标放到背景单元格中，选择单元格属性，对齐方式修改垂直为择单元格属性，对齐方式修改垂直为“底部底部”对齐。对齐。上一页 下一页返回4.2 网页布局与实现网页布局与实现l拆分插入的表格拆分插入的表格:在插入表格第一行将光标放入，选择单在插入表格第一行将光标放入，选择单元格属性左下角元格属性左下角(拆分单元格为行或列拆分单元格为行或列)，将单元格拆分为，将单元格拆分为3列，按列，按【确定确定】完成单元格拆分。完成单元格拆分。l将光标分别放到第一行二个单元格中，将第一行将光标分别放到第一行二个单元格中，将第一行3列单元列单元格的宽度分别设置为格的宽度分别设置为“320像素像素”、200像素像素”、40像素像素”;单元格高度为单元格高度为“25像素像素”。l第一行单元格为空格，主要用于隔出空间，并将单元格设第一行单元格为空格，主要用于隔出空间，并将单元格设置为宽置为宽90像素像素”、高、高15像素像素”。l选中插入的表格，按键盘选中插入的表格，按键盘”一一”将光标移到表格最末端，将光标移到表格最末端，插入新的表格，插入插入新的表格，插入2行行1列表格并设置表格宽度为列表格并设置表格宽度为“560像素像素”，边框粗细为，边框粗细为“0像素像素”，单元格边距为，单元格边距为“0像素像素”，单元，单元上一页 下一页返回4.2 网页布局与实现网页布局与实现l格间距为格间距为“0像素像素”，按，按【确定确定】按钮创建表格成功。按钮创建表格成功。l插入表格后，设置对齐方式为插入表格后，设置对齐方式为“居中对齐居中对齐”，根据网页模，根据网页模版将表格高设置为版将表格高设置为“50像素像素”，按回车键确定。，按回车键确定。l将插入表格的第一行与第一行分别将光标放入，选择单元将插入表格的第一行与第一行分别将光标放入，选择单元格属性左下角格属性左下角(拆分单元格为行或列拆分单元格为行或列)，将每行单元格拆分，将每行单元格拆分为为6列，按列，按【确定确定】完成单元格拆分。完成单元格拆分。l将光标分别放到第一行和第一行的每个单元格中，将拆分将光标分别放到第一行和第一行的每个单元格中，将拆分后的后的12个单元格的宽度分别设置为个单元格的宽度分别设置为“93像素像素”、高度为、高度为“25像素像素”，水平，水平“居中对齐居中对齐”，垂直，垂直“底部底部”。l在新添加的表格的第一行在新添加的表格的第一行6个单元格中将光标放入单元格个单元格中将光标放入单元格里分别输入里分别输入“首页首页”、“公司概况公司概况”、“产品信息产品信息”、“售后服售后服上一页 下一页返回4.2 网页布局与实现网页布局与实现l务务”、“帮助帮助”、“联系我们联系我们”。l将光标放入下一行的将光标放入下一行的6个单元格中分别插入站点文件夹中个单元格中分别插入站点文件夹中image文件夹单的图像文件夹单的图像“anniu.jpg”。完成导航栏制作后。完成导航栏制作后保存网页，用鼠标右键单击网页左上角保存网页，用鼠标右键单击网页左上角“index.html*”，选择保存，选择保存*号消失保存完成。号消失保存完成。l预览网页，选择预览网页，选择【在浏览器中预览在浏览器中预览/调试调试】中中【预览在预览在IE浏览器浏览器】(或快捷键或快捷键F12)l(3)完成内页动画插入与公司简介部分。完成内页动画插入与公司简介部分。l加选加选logo下面的下面的2行中左侧单元格进行合并，选择单元格行中左侧单元格进行合并，选择单元格属性左下角属性左下角(合并所选单元格，并使用跨度合并所选单元格，并使用跨度)，将左侧，将左侧2个个单元格合并为单元格合并为6列，按列，按【确定确定】完成单元格合并。并将合完成单元格合并。并将合上一页 下一页返回4.2 网页布局与实现网页布局与实现l并后的单元格对齐方式设置为水平并后的单元格对齐方式设置为水平“居中对齐居中对齐”、垂直、垂直“顶端顶端”。l在合并后的单元格中插入公告栏动画，将光标放入左侧单在合并后的单元格中插入公告栏动画，将光标放入左侧单元格中，选择元格中，选择【插入插入】【媒体媒体】【Flash】，选中，选中“media”文件夹下文件夹下“bulletinboard.swf，按，按【确定确定】插入到单元格中。插入到单元格中。l预览并调整预览并调整Flash，插入，插入Flash后下方为后下方为Flash属性面板，可属性面板，可以按以按【播放播放】进行预览，预览成功按进行预览，预览成功按【停止停止】结束。如尺结束。如尺寸不符合要求，可以进行相关调整，但要同比缩放。寸不符合要求，可以进行相关调整，但要同比缩放。l添加内页添加内页Flash，将导航栏下方单元格拆分为，将导航栏下方单元格拆分为2行行1列。列。l设置高度分别为设置高度分别为“110像素像素”、140像素像素”，宽均为，宽均为“576像像上一页 下一页返回4.2 网页布局与实现网页布局与实现l素素”，并将拆分后的单元格设置为水平，并将拆分后的单元格设置为水平“居中对齐居中对齐”，垂，垂直直“居中居中”。l在拆分后的第一行单元格中插入内页动画在拆分后的第一行单元格中插入内页动画“banner.swf”。将光标放入单元格中，选择将光标放入单元格中，选择【插入插入】【媒体媒体】【Flash】，选中，选中“media”文件夹下文件夹下“banner.swf”，按，按【确定确定】插入到单元格中。插入到单元格中。l预览并调整预览并调整Flash，插入，插入Flash后下方为后下方为Flash属性面板，可属性面板，可以按以按【播放播放】进行预览，预览成功按进行预览，预览成功按【停止停止】结束。如尺结束。如尺寸不符合要求，可以进行相关调整，但要同比缩放。寸不符合要求，可以进行相关调整，但要同比缩放。l将公司简介插入到拆分后的第一行单元格中，为了保证文将公司简介插入到拆分后的第一行单元格中，为了保证文字居中对齐的效果，我们在这个单元格中嵌套一个表字居中对齐的效果，我们在这个单元格中嵌套一个表上一页 下一页返回4.2 网页布局与实现网页布局与实现l格来控制文字的位置。选择格来控制文字的位置。选择【插入插入】【表格表格】，插入一，插入一个个1行行1列宽为列宽为“540像素像素”，边框粗细为，边框粗细为“0像素像素”，单元，单元格边距为格边距为“0像素像素”，单元格间距为，单元格间距为“0像素像素”，按，按【确定确定】按钮完成嵌套表格。按钮完成嵌套表格。l设置嵌套表格的高为设置嵌套表格的高为“90像素像素”，表格对齐方式为，表格对齐方式为“居中居中对齐对齐”。l将光标放入嵌套表格中输入文字将光标放入嵌套表格中输入文字“天津市达康电器有限公天津市达康电器有限公司主导产品有家用电动食品加工机、请洁类产品两大类共司主导产品有家用电动食品加工机、请洁类产品两大类共30余个规格型号，在全国各地设立了余个规格型号，在全国各地设立了600余个销售网点，余个销售网点，产品覆盖全国产品覆盖全国26个省、市、自治区。在国内同行业处于领个省、市、自治区。在国内同行业处于领先地位先地位”。上一页 下一页返回4.2 网页布局与实现网页布局与实现l(4)完成产品图片的插入。在公司简介下方的单元格中插完成产品图片的插入。在公司简介下方的单元格中插入嵌套表格，选择入嵌套表格，选择【插入插入】【表格表格】，插入一个，插入