初中八年级信息技术课件- 主页结构的编辑

第三节

主页结构的编辑目录CONTENTS12一、打开站点二、网页结构编辑3三、浏览网页

FrontPage启动后，单击“文件”一“打开站点”，选择D盘下的English站点就可以打开站点了，如图2-3-1所示。一、打开站点试试看启动FrontPage，单击常用工具栏上的·右边的下拉按钮，选择“打开站点”，如图2-3-2所示，也可打开站点。多问思维在选择网页制作软件的时候，你最注重软件的什么？你会从哪些方面考虑选取某个软件？试试看查找用FrontPage、Dreamweaver、Word、《东方网上页王》制作的网页实例。多向思维如何将一个文件夹转换为站点？（提示：可以参考图2-3-3）利用表格，能方便地安排和定位网页文本和对象，比如图片、视频等；还能方便地编辑对象，而不会影响到其他表格或单元格中的对象，从而起到控制整个网页结构的作用。1.“e-英语学习”网站的初步设计根据前面网站结构示意图，单击“表格”→“插入”→“表格”，在“插入表格”对话框中，根据前面的网页结构，进行行数和列数的设置，如图2-3-4所示。单击“确定”，就在编辑区内插入一个5行6列的表格，如图2-3-5所示。二、网页结构编辑2.细化网页布局网页布局的初步轮廓已形成，还需要进一步修改，将布局结构细化，才能达到最终要求，把各主要信息安排在合适的位置。根据表2-1-1网页的整体结构细化网页布局，操作如下：首先，选中第一行的2至5列，单击“表格”→“合并单元格”，对它们进行合并。然后，选中第二行的1至6列，单击“表格”→“合并单元格”，对它们进行合并，形成一个单元格。利用同样的方法将第四行的2至6列进行合并，第五行的2至6列进行合并。至此，完成了表格中的单元格的合并。最后，单击“表格”→“拆分单元格”，进行如图2-3-6所示的设置，完成第四行第一列的拆分。修改完成后的网页布局如图2-3-7所示，和前面设计的布局结构已经基本吻合。至此，一个网页布局结构已初步形成。接下来，就可以在不同位置的单元格中放置相关信息了。多向思维还有其他方法实现图2-3-7所示的网页布局吗？3.修饰表格利用表格，网页被分成了几栏，文本和图片等多种信息可以有序地混合排列，但表格的边框如果在浏览时显示出来就会显得不太美观，从而影响整个网页的视觉效果。可以去掉表格边框线，并为标题单元格设置一个漂亮的底纹，使它更醒目。操作如下：选择第二行至第四行，单击“表格”→“属性”→“表格”，在出现的“表格属性”对话框中进行如图2-3-8所示的设置。将边框的“粗细”设置为0，背景设置成自己喜欢的颜色。将表格中各单元格中的文字内容设为“水平居中”对齐方式。设置好的效果如图2-3-9所示。将最后的网页布局保存起来。试试看为表格设置一幅背景图片。1.“预览”模式FrontPage2000采用的是“所见即所得”的方式来编辑网页，在制作网页的过程中，可以随时查看网页的效果。如图2-3-10所示，只要单击“预览”按钮，就可以看到网页制作的实际效果。如果想继续编辑网页，可单击“普通”按钮。三、浏览网页2.用浏览器浏览单击“文件”→“在浏览器中预览”，就可以在浏览器中浏览了。多向思维还有其他浏览网页的方法吗？小结1.利用表格可以规划网页布局结构，合理放置网页上的各类信息。2.利用“表格属性”对话框中的不同选项可以设置不同风格的表格背景、边框，使网页整体更加美观。3.网页在编辑时随时预览效果的几种方法。思考与练习

1.编辑网页布局：在表2-1-1“e一英语学习”网页布局结构示意表的“友情链接”下添加一个5行1列