《计算机应用基础（职业模块）》模块九 个人网络空间构建

模块九

个人网络空间构建

模块九个人网络空间构建规划网站1制作封面网页2创建基于表格的页面布局3发布网站4任务导入要制作一个完整的网站，首先要根据这个网站的主题，确定这个网站由哪些模块组成，再根据这些模块的内容去收集各种素材，如文本、图片、动画等。本任务将以制作水果行宣传网站为例，学习规划网站的方法。学习目标（1）会规划网络空间。（2）会分类整理使用的素材。规划网站11.绘制站点的模块结构图“四季春水果行”是一个宣传水果类商品的网站，它主要包括“公司简介”、“果品行情”、“产品介绍”和“联系方式”模块，由一个主页和4个二级页面组成，二级页面下再分若干个二级子页。由于本书只是以该网站做教学实例，我们只选取有代表性的网页进行介绍。规划网站1任务实施主页公司简介果品行情联系方式产品介绍2.画出站点的文件结构图为了大家能统一协作，最好先由策划者画出整个网站的文件结构图，也就是定出站点文件夹的名称和存放各类素材文件的文件夹名称，所有参与制作的人员都以这个文件结构为准。规划网站1任务实施D:\fruit_shoppingImages：存放图片素材Company：存放“公司简介”模块的网页文件News：存放“果品行情”模块的网页文件template：存放模块文件（该文件夹由Dreamweaver自动生成）fw：存放用fireworks直接生成的htm文件（用于制作模板）swf：存放flash动画素材library：存放定义的库元素文件（也可由Dreamweaver自动生成）contact：存放“联系方式”模块的网页文件production：存放“产品介绍”模块的网页文件3.建立本地站点根文件夹（主文件夹）由于网站的本地站点根文件夹（站点的主文件夹）对应一个正在制作的网站，所以应先建立本地站点根文件夹，并将其定义为站点。创建本地站点时，可将需用的现有资源（图像或其他内容）放在本地站点的根文件夹下。当用户向页面中添加内容时，可随时使用这些资源。在本地硬盘上建立一个用来存放本地站点的根文件夹，其建立方法与建立一般文件夹相同。例如，在D盘根目录下建立一个文件夹fruit_shopping，将fruit_shopping文件夹作为Dreamweaver站点的根文件夹（主文件夹）。在fruit_shopping下再建立用于保存不同类型文件的子文件夹，如保存图像文件的文件夹images。规划网站1任务实施4.定义本地站点（1）启动Dreamweaver，单击“站点”菜单→“管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。（2）在弹出的“站点定义”对话框中，选择“高级”选项卡，然后从“分类”列表中选择“本地信息”。在“站点名称”文本框中，输入“水果行”作为站点名称。规划网站1任务实施4.定义本地站点（3）在“本地根文件夹”文本框中，指定fruit_shopping文件夹。也可以单击文件夹图标选择该文件夹。（4）在“默认图像文件夹”框中，指定fruit_shopping文件夹中已有的images文件夹。（5）单击“确定”按钮返回到“管理站点”对话框。（6）单击“完成”按钮，关闭“管理站点”对话框。规划网站1任务实施你想建立一个自己的网站吗？请为自己的网站写出个人网站规划书（包括网站的模块结构图和文件结构图），以自己姓名拼音为名称，在D盘上新建一个文件夹，并在Dreamweaver中创建自己个人网站的站点，将此文件夹制定为该站点的站点文件夹。规划网站1技能训练模块九个人网络空间构建规划网站1制作封面网页2创建基于表格的页面布局3发布网站4任务导入Dreamweaver采用了多种先进技术，无论是在可视化编辑环境中工作，还是手工编写HTML代码，都为用户提供了便捷的工具，使用户能够快速、高效地创建高质量的网页。本任务将为某水果行制作一个封面型网页。本网页需要一个背景图像文件fall.gif和一个公司名称图像文件sjcsgh.jpg。学习目标（1）熟悉网页设计软件的界面。（2）会设计并制作一个简单的网页。制作封面网页21.启动Dreamweaver（1）单击“开始”菜单→“所有程序”→“Macromedia”→“MacromediaDreamweaver8”项，将显示“起始页”对话框。制作封面网页2任务实施1.启动Dreamweaver（2）由于我们现在要创建新的静态网页，在此单击“创建新项目”下的“HTML”，进入Dreamweaver“设计”视图工作区窗口。制作封面网页2任务实施面板组“文件”面板活动面板内容“插入”工具栏文档选项卡“文档”工具栏“文档”窗口标尺标签选择器“属性”面板展开或折叠按钮状态栏2.Dreamweaver“设计”视图工作区1）“文档”窗口（1）“设计”视图用于可视化页面布局、编辑的设计环境。在本视图中，显示文档的可视化表示形式，类似于在浏览器中查看页面时看到的内容。（2）“代码”视图用于编写和编辑HTML、JavaScript、服务器语言等代码的手工编码环境。单击“文档”工具栏中的，将切换到“代码”视图。在“代码”视图中，文档窗口的左侧还将显示一个“编码”工具栏。（3）“代码和设计”视图单击按钮，或者单击“查看”菜单→“代码和设计”命令，可以在一个窗口中同时看到同一文档的“代码”和“设计”视图。制作封面网页2任务实施2）“文档”工具栏“文档”工具栏中包含的按钮有切换视图、查看选项和一些常用功能。制作封面网页2任务实施显示代码视图显示代码视图和设计视图显示设计视图文档标题没有浏览器/检查错误文件管理验证标记可视化助理视图选项刷新设计视图在浏览器中预览/调试3）“插入”工具栏“插入”工具栏包含用于创建和插入对象（如表格、层和图像）的按钮，这些按钮被组织到了几个类别中，可以单击“插入”工具栏左侧的来切换。若要关闭或打开“插入”工具栏，可执行“窗口”菜单→“插入”。制作封面网页2任务实施4）状态栏“文档”窗口底部的状态栏提供与正编辑的文档有关的信息。制作封面网页2任务实施标签选择器设置缩放比率缩放工具手形工具选取工具窗口大小文档大小估计下载时间5）“编码”工具栏“编码”工具栏仅在“代码”视图中是可见的，它以垂直方式显示在“文档”窗口的左侧。“编码”工具栏包含执行多种标准编码操作的按钮，例如折叠和展开代码的选定内容、高亮显示无效代码、应用和删除注释、缩进代码和插入最近使用过的代码片断。6）“属性”面板“属性”面板可以编辑当前选定页面元素（如文本或插入的对象）的常用属性。属性面板根据选定内容的不同而不同。属性面板默认位于工作区的底部，也可以将它停靠在工作区的顶部，或者将它变为工作区中的浮动面板。在不需要显示“属性”面板时，可单击其上边的“展开或折叠”按钮，以扩大编辑区。7）面板组面板组中包括CSS、应用程序、标签检查器和文件面板。单击面板标题，可以展开或折叠该面板。每个面板又包含多个选项卡，可鼠标单击切换。制作封面网页2任务实施3.创建静态网页（1）单击“文件”菜单→“新建”命令，弹出“新建文档”对话框，选择“常规”选项卡，选中“基本页”→“HTML”项，单击“创建”按钮，即可在文档窗口创建一个空白网页。（2）单击“文件”菜单→“另存为”命令，在弹出的“另存为”对话框中，在“保存在”下拉框中选定保存文件的文件夹，在“文件名”框中输入“index”。制作封面网页2任务实施

4.设置网页属性1）设置“外观”（1）单击“属性”面板中的“页面属性”按钮。（2）在弹出的“页面属性”对话框中，单击“分类”列表中的“外观”选项。（3）单击“文本颜色”后的按钮，在颜色选择面板中单击一种颜色。（4）单击“背景图像”后的“浏览”按钮，选择“查找范围”列表框中保存图像的文件夹，单击背景图像名fall.gif，单击“确定”。（5）返回到“页面属性”对话框，这时选定图像的相对路径（MyPicture/fall.gif）被填写到该文本框中。最后，单击“应用”按钮。制作封面网页2任务实施

4.设置网页属性2）设置“链接”（1）在“页面属性”对话框中，单击“分类”列表中的“链接”选项。（2）在“链接颜色”和“已访问链接”中分别选定绿色（#00FF66）。制作封面网页2任务实施

4.设置网页属性3）设置“标题/编码”（1）在“页面属性”对话框中，单击“分类”列表中的“标题/编码”选项。（2）在“标题”文本框中输入“欢迎您来到四季春水果行”。（3）单击“确定”按钮回到网页编辑窗口。制作封面网页2任务实施

5.编辑页面内容（1）在文档窗口中输入“欢迎您来到四季春水果行”。（2）选中要设置的文本，单击“属性”面板中“大小”右侧下拉按钮，选择字体大小为24，单击居中按钮。制作封面网页2任务实施

5.编辑页面内容（3）在“设计”视图中，按Enter键产生段落标记<p></p>。按Shift+Enter键产生换行标签<br/>。按几次Enter键，把光标移到文档窗口中部位置。（4）单击“插入”菜单→“图像”命令，在弹出的“选择图像源文件”对话框，选择图像文件名sjcsgh.jpg，单击“确定”。制作封面网页2任务实施

5.编辑页面内容（5）在出现的“图像标签辅助功能属性”对话框中，在“替换文本”框中输入“四季春”，若不输入可直接单击“确定”按钮。（6）选中图像，拖动图像边框将图像调整到合适大小，单击“属性”面板中的“居中”按钮。（7）在页面中输入其他文字，并设置颜色、大小和排列方式。制作封面网页2任务实施

6.在浏览器中预览网页由于在文档窗口中看到的效果往往与在浏览器中的效果不同，所以在编辑过程中要多次在浏览器中查看制作效果。可按F12键，或单击“文档”工具栏中的“在浏览器中预览/调试”按钮，从下拉菜单中选择“预览在IExplore6.0”。制作封面网页2任务实施

1.上网搜集有关素材，自己设计并制作一个封面型网页。2.建一个文件夹为sanmao的本地站点，上网搜集有关素材，参照图示制作网页文件。制作封面网页2技能训练

模块九个人网络空间构建规划网站1制作封面网页2创建基于表格的页面布局3发布网站4任务导入在网页设计中，经常使用表格进行页面的设计和排版，控制文本和图像在页面上的位置，另外使用表格可以使页面看起来更加直观，条理更加清晰。例如，许多大型网站（如网易、新浪、搜狐、雅虎中国等）都是利用表格来进行页面布局的，只要将这些网站中的网页保存下来，再在Dreamweaver中打开，就可以看到表格的应用。本任务将设计四季春水果行“公司简介”网页，如图所示。学习目标（1）会使用表格功能进行页面布局。（2）会在表格中定位文本和图形。（3）会设计分栏页面。创建基于表格的页面布局3创建基于表格的页面布局31.创建并保存新页面（1）在Dreamweaver中，单击“文件”菜单→“新建”命令。（2）在“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。（3）单击“文件”菜单→“另存为”命令，在“另存为”对话框中，浏览至定义为站点的本地根文件夹fruit_shopping，打开company文件夹。（4）在“文件名”中输入instruction.html，然后单击“保存”。文件名即出现在应用程序窗口顶部的标题栏中。（5）在新文档顶部的“文档标题”文本框中，键入页面的标题“水果行公司简介”。创建基于表格的页面布局3任务实施2.插入表格（1）在页面上单击，此时页面左上角出现闪烁的插入点图标。（2）单击“插入”菜单→“表格”命令，弹出“插入表格”对话框。在“行数”文本框中，输入3；在“列数”文本框中输入1；在“表格宽度”文本框中输入700；在“表格宽度”弹出式菜单中选择“像素”；在“边框粗细”文本框中输入0；在“单元格边距”文本框中输入0；在“单元格间距”文本框中，输入0。创建基于表格的页面布局3任务实施2.插入表格（3）单击“确定”按钮，这时一个三行一列的表格出现在文档中。该表格的宽度为700像素，边框、单元格边距和单元格间距均为0。插入表格后，可看到由绿色线条指示的表格选择器。如果单击表格外部，可以隐藏表格选择器。创建基于表格的页面布局3任务实施黑框表示选中了该表格2.插入表格（4）单击表格右侧外部，取消对表格的选中状态。此时，闪烁的插入点光标出现在表格右边框外。表格处于未选中状态表格外的闪烁光标（5）再次单击“插入”菜单→“表格”命令，在弹出的“插入表格”对话框中，设置第二个表格的内容：在“行数”文本框中输入1；在“列数”文本框中输入3；在“表格宽度”文本框中输入700；在“表格宽度”弹出式菜单中选择“像素”；在“边框粗细”文本框中输入0；在“单元格边距”文本框中输入0；在“单元格间距”文本框中输入0。创建基于表格的页面布局3任务实施表格处于未选中状态表格外的闪烁光标2.插入表格（6）单击“确定”按钮后，第二个表格（该表格具有一行三列）出现在第一个表格下方。（7）单击该表格右侧外部取消对它的选择。此时，闪烁的插入点光标出现在第二个表格右边框外。创建基于表格的页面布局3任务实施表格标题菜单列标题菜单2.插入表格（8）继续单击“插入”菜单→“表格”命令，在“插入表格”对话框中输入以下值来插入第三个表格：在“行数”文本框中输入1；在“列数”文本框中输入1；在“表格宽度”文本框中输入700；在“表格宽度”弹出式菜单中选择“像素”；在“边框粗细”文本框中输入0；在“单元格边距”文本框中输入0；在“单元格间距”文本框中输入0。（9）单击“确定”。第三个表格（该表格具有一行一列）即出现在第二个表格下方。单击该表格右侧取消对它的选择。创建基于表格的页面布局3任务实施3.设置表格属性（1）单击“查看”菜单→“表格模式”→“扩展表格模式”。此时可能会出现“扩展表格模式入门”对话框以提示用户，单击“确定”。（2）单击第一个表格的第一行内部，在“属性”面板的单元格高度文本框中输入90，然后按Enter键。创建基于表格的页面布局3任务实施3.设置表格属性（3）单击第一个表格的第二行内部，在“属性”面板的单元格高度文本框中输入160，然后按Enter键。（4）单击第一个表格的第三行内部，在“属性”面板的单元格高度文本框中输入25，然后按Enter键。现在第一个表格中的三行应具有不同的高度。创建基于表格的页面布局3任务实施3.设置表格属性（5）单击第二个表格的第一列内部，在“属性”面板的单元格宽度文本框中输入135，然后按Enter键。（6）单击第二个表格的第二列内部，在“属性”面板的单元格宽度文本框中输入180，然后按Enter键。同样地，将第三列的宽度设置为330。如果已打开表格选择器（“查看”菜单→“可视化助理”→“表格宽度”），将能看到设置的各列像素值。创建基于表格的页面布局3任务实施3.设置表格属性（7）单击第三个表格内部，在“属性”面板的单元格高度中输入22，然后按Enter键。（8）单击“文档”窗口顶部的“退出”，返回到“标准”模式。（9）单击“文件”菜单→“保存”命令保存页面。创建基于表格的页面布局3任务实施4.插入图像占位符（1）在文档窗口中，单击第一个表格的第一行内部。（2）单击“插入”菜单→“图像对象”→“图像占位符”项。创建基于表格的页面布局3任务实施4.插入图像占位符（3）在“图像占位符”对话框中，在“名称”文本框中键入zwf；在“宽度”文本框中输入700；在“高度”文本框中输入90；单击颜色框并从颜色选择器中选定黄色；保留“替换文本”文本框为空。（4）单击“确定”。图像占位符出现在第一个表格内。图像占位符显示最终放置于此处的图像的标签和大小属性。（5）单击“文件”菜单→“保存”命令保存页面。创建基于表格的页面布局3任务实施5.设置单元格背景（1）单击表格右侧外部取消对表格的选择。（2）在第二个表格中，单击第一个单元格内部。（3）单击标签选择器中的<td>标签（单元格标签）以选定该单元格。创建基于表格的页面布局3任务实施5.设置单元格背景（4）在“属性”面板中，单击“背景颜色”后的文本框，输入十六进制值#FFFF66，然后按Enter键。这时，该单元格的颜色变为黄色。（5）单击第二个表格的第二个单元格，单击标签选择器中的<td>标签选中该单元格，在“属性”面板中设置“背景颜色”为#6666CC，然后按Enter键。表格单元格的颜色变为紫色。（6）同样地，将第二个表格的第三个单元格的颜色也更改为#6666CC。（7）设置完这三个单元格颜色后，单击表格的外部，取消选择该表格。创建基于表格的页面布局3任务实施6.设置页面背景（1）单击“属性”面板上的“页面属性”按钮。（2）在“页面属性”对话框中，选择“外观”类别，单击“背景颜色”颜色框，然后从颜色选择器中选择浅灰色。（3）单击“确定”，页面的背景变为浅灰色。创建基于表格的页面布局3任务实施7.向页面插入图像1）替换图像占位符（1）打开在已创建的instruction.html文件。（2）双击页面顶部的图像占位符，弹出“选择图像源文件”对话框，查找到定义为站点根文件夹的fruit_shopping文件夹中的images文件夹。（3）选中top1.jpg，单击“确定”按钮，top1.jpg文件将图像占位符替换。（4）单击表格外部取消图像的选中状态。创建基于表格的页面布局3任务实施7.向页面插入图像2）使用“插入”菜单插入图像（1）单击第一个表格的第三个单元格内部。（2）单击“插入”菜单→“图像”命令。（3）在“选择图像源文件”对话框中，选择fruit_shopping文件夹中的images文件夹，双击选定082.gif文件。如果出现“图像标签辅助功能属性”对话框，则单击“确定”。一个长条浅绿色图形（分隔条）出现在该表格行中。创建基于表格的页面布局3任务实施7.向页面插入图像3）通过拖动插入图像（1）单击表格外部取消选中表格，单击第三个表格内部。（2）打开“文件”面板，在images文件夹中找到082.gif文件，将该文件拖到最后一个表格的插入点。（3）在表格外单击一次，并保存该页面。创建基于表格的页面布局3任务实施4）从“资源”面板插入图像（1）单击第二个表格的第二个单元格内容。（2）在“属性”面板中，从“水平”下拉列表中选择“居中对齐”，从“垂直”下拉列表中选择“顶端”。该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。（3）按一次Enter键，以创建更多空间。创建基于表格的页面布局3任务实施4）从“资源”面板插入图像（4）单击“文件”面板中的“资源”选项卡，或选择“窗口”菜单→“资源”。如果未选中“图像”视图，则单击“图像”以查看图像资源。（5）在“资源”面板中选择fruits.jpg文件，单击“资源”面板底部的“插入”按钮，或将fruits.jpg文件直接拖到表格插入点，这时fruits.jpg图像即显示在页面上。（6）在表格外单击，以取消图像的选中状态。创建基于表格的页面布局3任务实施8.插入Flash文件（1）单击第一个表格的第二个单元格，即紧接上一节中插入的横幅图形的表格行。（2）在“属性”面板中，从“水平”下拉列表中选择“居中对齐”，然后从“垂直”下拉列表中选择“居中”，以使插入的内容放置到单元格的中间。（3）在“文件”面板中，选择本站点下swf文件夹中的knowfruit.swf文件，将其拖到单元格中。此时，Flash内容占位符将显示在文档窗口中。创建基于表格的页面布局3任务实施9.插入Flash视频（1）在第二个表格的第二个单元格中，单击已放置图形的上面位置。（2）单击“插入”菜单→“媒体”→“Flash视频”项，将弹出“插入Flash视频”对话框。创建基于表格的页面布局3任务实施9.插入Flash视频（3）在“视频类型”下拉列表中，选择“累进式下载视频”。（4）在“URL”文本框中，单击“浏览”按钮，选择站点根文件夹中的video.flv文件。（5）“外观”选项指定将包含Flash视频内容的Flash视频组件的外观。（6）“宽度”和“高度”文本框中的值以像素为单位指定FLV文件的宽度和高度。可以任意调整这些值以更改页面上Flash视频的大小。增加视频尺寸时，视频的图片品质通常会下降。在此，分别键入160和140。（7）“限制高宽比”表示是否保持Flash视频组件的宽度和高度之间的高宽比不变。默认情况下会选择此选项。（8）选中“自动播放”，以便在打开本网页时自动播放视频。（9）“自动重新播放”指定播放控件在视频播放完之后是否返回起始位置。默认情况下取消选择该选项。（10）单击“确定”关闭对话框，Flash视频内容将添加到Web页面。创建基于表格的页面布局3任务实施10.插入正文文本（1）在“文件”面板中，找到jianjie.txt文件，双击该文件图标，在Dreamweaver中打开它。可以看到，此文档处于“代码”视图中，并且不能切换到“设计”视图（前面一直在使用设计视图），因为该文件不是HTML文件。（2）在jianjie.txt“文档”窗口中，按Ctrl+A选中所有文本。（3）单击“编辑”菜单→“拷贝”复制该文本后，单击文档右上角中的“关闭”按钮关闭文件。创建基于表格的页面布局3任务实施10.插入正文文本（4）在instruction.html“文档”窗口中，单击第二个表格的第三个单元格（5）单击“编辑”菜单→“粘贴”命令。（6）选中文本内容，设置字体颜色为“白色”，字体大小为18。（7）在“属性”面板中，从“垂直”下拉列表中选择“顶端”，这时刚粘贴的文本沿表格单元格的顶端对齐。创建基于表格的页面布局3任务实施11.插入导航条文本（1）单击第二个表格的第一个单元格内部。（2）键入“公司简介”，按一下空格键并键入“果品行情”。（3）重复前面的步骤，输入标题“产品介绍”和“联系方式”，并且在每个标题之间留一个空格。（4）在标签选择器中单击<td>标签，在“属性”检查器中，从“垂直”下拉列表中选择“顶端”，使键入的文本沿表格单元格的顶端对齐。创建基于表格的页面布局3任务实施

12.创建链接（1）打开index.html文件，选中“进入主页”文字内容，在“属性”面板中，单击“链接”旁的文件夹图标，打开“选择文件”对话框。（2）在“选择文件”对话框中，查找到instruction.html文件，单击“确定”按钮。这时，选中的文件出现在“链接”框中。也可以在链接框中直接输入链接到的文件名。创建基于表格的页面布局3任务实施

12.创建链接（3）进入instruction.html文档页面。（4）选中导航条中的“公司简介”。由于本网页自身就是“公司简介”内容，所以在“属性”面板的“链接”框中直接输入instruction.html，这时“公司简介”文本出现下划线并变为蓝色，表示它现在是一个链接。（5）重复上述步骤，为导航条中的每个标题建立链接。作为练习，都链接到instruction.html页面。创建基于表格的页面布局3任务实施

13.在浏览器中预览页面效果（1）在文档窗口中打开index.html文件。（2）单击文档工具栏上的下列表中选“预览在IExplore6.0”，或单击“文件”菜单→“在浏览器中预览”→“IExplore6.0”。这时将启动主浏览器。（3）单击已建立的链接可进入相应的页面。创建基于表格的页面布局3任务实施

14.设置导航栏文本格式1）为导航创建新规则（1）打开fr1.css文件，或单击其选项卡来显示该文件。（2）在该文件的.bd类样式后面键入以下代码：.navigation{}这是一个空规则。（3）保存fr1.css文件。创建基于表格的页面布局3任务实施

14.设置导航栏文本格式1）为导航创建新规则（4）打开instruction.html文件，在面板中，选择“全部”模式的.navigation规则，然后单击面板右下角的“编辑样式”图标。（5）在弹出的“CSS规则定义”对话框的“类型”中，在“字体”框中输入“宋体”；在“大小”下拉列表和单位中分别选择“18”和“像素”；在“样式”下拉列表中选择“正常”；在“修饰”中选择“无”，在“粗细”中选择“粗体”；在“颜色”框中输入#FF0000。创建基于表格的页面布局3任务实施

14.设置导航栏文本格式1）为导航创建新规则（6）在“CSS规则定义”对话框的“区块”项中，在“文本对齐”下拉列表中选择“居中”，然后单击“确定”。（7）在“CSS样式”面板中，选中.navigation规则，单击“显示列表视图”按钮。列表视图可使“属性”窗格按字母顺序显示所有可用属性。创建基于表格的页面布局3任务实施

14.设置导航栏文本格式1）为导航创建新规则（8）单击background-color属性右边的列，输入十六进制值#00CCFF，然后按Enter键。（9）找到display属性，在右边的列中单击一次，然后从下拉列表中选择block。（10）找到padding属性，在右边的列中单击一次，输入值8px，然后按Enter键。（11）找到width属性，在右边的列中单击一次，在文本框中输入140，从下拉列表中选择像素，然后按Enter键。（12）单击“显示设置属性”按钮，在“属性”窗格中显示出用户设置的属性。在fr1.css文件的“文档”窗口中，可看到Dreamweaver已经把指定的所有属性添加到该文件中。创建基于表格的页面布局3任务实施

14.设置导航栏文本格式1）为导航创建新规则创建基于表格的页面布局3任务实施

2）应用规则（1）在“文档”窗口中打开instruction.html页。（2）单击“公司简介”将插入点置于该词中的某个位置，单击标签选择器中的<a>标签。此时，将选中“公司简介”文本内容。创建基于表格的页面布局3任务实施

2）应用规则（3）在“属性”面板中，从“样式”下拉列表中选择“navigation”。此时，在“文档”窗口中“公司简介”文本的外观完全发生了变化。根据在上面为.navigation规则所定义的属性，该文本的格式现在已被设置为导航栏按钮。（4）为导航栏中的每个链接“果品行情”、“产品介绍”、“联系方式”均应用该规则。创建基于表格的页面布局3任务实施

1.在网页中插入7行6列、宽度为100%的表格。分别练习选取表格、选取其中1行或1列、选取某一单元格或几个单元格。2.参照图示，使用表格格式在单元格中插入图片制作网页。创建基于表格的页面布局3技能训练

模块九个人网络空间构建规划网站1制作封面网页2创建基于表格的页面布局3发布网站4任务导入制作网站的目的就是让人们能够访问到我们的网页。前面我们学习了网页的制作方法，现在我们要把制作好的网站发布到因特网上。本任务将学习申请主页空间和上传网页的方法。学习目标（1）会申请和使用网站提供的网络空间。（2）会发表作品并管理网络空间。发布网站4任务实施1.申请域名申请并使用一个域名必须定期向域名管理机构支付相应费用。通常在申请免费的个人主页时，提供免费个人主页的机构会同时提供一个免费的域名及相应的免费空间。但由于这种免费的域名一般是二级域名或带免费域名机构相应信息的一个链接目录，其服务没有必要的保证，随时可能被删除或停止。如果是专业性网站、大中型公司网站或有大量访问客户的网站则需要申请专用的域名；若是个人网站则不一定非要申请专用的域名。在申请域名前，应根据网站性质确定域名名称及后缀。公司、网络组织、教育机构及行业协会等不同性质单位的网站可用不同的后缀，如学校或教育机构网站的后缀通常为edu。发布网站4任务实施1.申请域名确定域名名称应注意以下两点：（1）确定域名的原则是易于记忆、易于识别及能代表网站的个体特征。（2）确定了域名后，还需确认域名未被注册才能在网上申请注册，并向域名注册机构支付相应域名注册使用费，才可以向代理机构申请域名空间及域名注册，通常在网站上可查询要申请的域名是否已被注册。发布网站4任务实施2.主页空间的类型若要发布网站，需要先申请一个主页存放空间，将完成的网页上传到这个空间里，然后申请一个域名，浏览者即可通过该域名访问到站点。主页空间通常有免费和收费两种。在申请主页空间时，应根据网站性质、网页文件大小、网站运行的操作系统、网站运行的技术条件等因素选择相应的空间大小及类型。免费主页空间：其空间大小和运行的支持条件会受一定限制。适用于一般的个人网站。收费主页空间：一般由网站托管机构提供，其空间大小及支持条件可供用户根据需要进行选择。适用于商业网站、公司网站、专业性网站和行业性网站，或者运行环境需要较稳定的网站。发布网站4任务实施3.申请免费主页空间（1）启动IE浏览器，在“地址”栏中输入，按Ente