第六讲 网页布局.ppt

第六讲 网页布局 《网页开发工具》第六讲 网页布局 参数说明如下： 最精确：将所有层转换为表格，如果层之间有间距，则插入适当的单元格。 最小：如果层之间的距离很小，会将这些层转换为相邻的单元格，可以在后面的文本框中输入层之间的最小距离，单位为像素。 使用透明GIF：将转换后的表格最后移行填充为透明的GIF图像，这样在所有的浏览器中，表格后具有相同的显示效果，此时不能拖动表格的边框来改变表格的大小。 置于页面中央：转换后的表格在页面中居中对齐，否则居左对齐。 《网页开发工具》第六讲 网页布局 2.表格到层 布局时使用表格灵活性要受到一定的限制，如果要改变网页中各元素的布局， 需要将表格转换为层，然后通过移动层来改变网页的布局。选中表格，单击“修改”|“转换”|“表格到层”命令，在出现的对话框中设置完毕，单击“确定”按钮，表格就转换为层了。 在一个网站中，通常会有许多元素重复地出现在不同的网页文档中，如网页标题、导航栏等。如果在每个网页都添加这些相同的部分，就会浪费很多的时间，而访问者在浏览网页时也要付出重复的等待时间。 使用框架将很好的解决以上问题。框架将显示窗口划分成许多子窗口，每个窗口内显示独立的文档，当浏览一个网页时，网页的某部分区域（如标题或导航栏）的内容不变化，而其他区域不断地更新。 《网页开发工具》第六讲 网页布局 6. 4 框架 当一个页面被划分为若干个框架，DREAMWEAVER就建立一个未命名的框架组文件，同时为每个框架建立一个文档文件。 也就是说，对于一个包含两个框架的页面，实际上存在三个文件，一个是框架集文件，另外两个是分别存储每个框架内容的文件。 《网页开发工具》第六讲 网页布局 * 6.1 常见网页布局 《网页开发工具》第六讲 网页布局 设计网页既要合理安排内容又要美观精致，仅仅通过文字和图片的排列是不够的。在DREAMWEAVER 8中提供了表格、层和框架等工具，可以制作出复杂的页面结构，再配合文字和图片，就可以制作优秀的网页。 常见于国外网站 两条横向色块将整个页面分成3大块，色块中是广告条和提示，色块之间是主要内容。 三型结构 较呆板 页面结构清晰、主次分明。 顶部为网站标志和广告条，下半部分的左面为主菜单，右面为主要内容。 T型结构 页面拥挤，不够灵活 网页中信息量较大 顶部为网站标志、主菜单；顶部以下分3个区域，页面左右部分为链接和广告，中间部分为主题内容。 II型结构 缺点 优点 布局特点 结构类型 6.1.1 网页布局的结构 《网页开发工具》第六讲 网页布局 图6-1 II型网页 《网页开发工具》第六讲 网页布局 图6-2 T型网页 《网页开发工具》第六讲 网页布局 图6-3 三型网页 《网页开发工具》第六讲 网页布局 1.使用标尺 使用标尺可以精确地对页面的对象进行布局及绘制，标尺能够帮助测量和计划作品的布局。 单击“查看”|“标尺”|“显示”命令，使选项前出现“√”，文档中就会显示标尺。标尺默认的原点是文档的左上角，如果想改变原点位置，将鼠标移到水平标尺和垂直标尺的交界处，拖动到需要的位置即可。 《网页开发工具》第六讲 网页布局 6.1.2 使用标尺和网格 2. 使用网格 使用网格对象能使对象与网格对齐。网格在画布上显示一个由横线和竖线构成的体系，可以精确放置对象。 单击“查看”|“网格”|“显示网格”命令，使选项前出现“√”，文档中就会显示网格。选择“视图”|“网格”|“网格设置”命令可以更改网格颜色和网格单元格的大小等。 《网页开发工具》第六讲 网页布局 表格在美化网页方面也起着重要作用，使用表格时要注意： 整个网页不要都套在一个表格中，尽量拆分出多个表格； 单一表格的结构尽量整齐； 表格嵌套的层次要少。 《网页开发工具》第六讲 网页布局 6.2 表格 《网页开发工具》第六讲 网页布局 6.2.1 插入表格并设置属性 1)单击“插入”|“表格”命令，在弹出的对话框中，可以对插入的表格进行初步定义。 2)表格属性设置：选中表格，然后通过属性面板对表格线条的颜色、表格背景色、单元格的对齐方式等进行设置。 3)单元格的合并和拆分：选中表格中的单元格，通过单击属性面板上的合并单元格按钮 和拆分单元格按钮 ，可以将表格设计成需要的形式。 《网页开发工具》第六讲 网页布局 6.2.2 在表格中添加元素 1）输入文本：单击表格中的单元格，就可以输入文本；也可以先选中表格，在属性面板中进行对齐等设置后再输入文本。 2）插入图像：选中单元格，单击“插入”|“图像”命令可以在单元格中插入图像，注意图像与