（本科）第3章首页设计与网页布局ppt课件.ppt

《（本科）第3章首页设计与网页布局ppt课件.ppt》由会员分享，可在线阅读，更多相关《（本科）第3章首页设计与网页布局ppt课件.ppt（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程主讲人：第3章 首页设计与网页布局Web前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人： 第第3章首页设计与网页布局章首页设计与网页布局3.33.43.13.2首页布局首页布局设计视图选项设计视图选项 使用表格使用表格上机练习上机练习v 首页是网站中非常重要的一页，网页内容的布局方式取决于网站的主题定位。在Dreamweaver中，表格是最常用的网页布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确定位，使网页页面效果显得整齐而有序。本章主要介绍

2、如何使用表格规划首页布局。学习目标学习目标v 网页布局v 设计视图选项v 网页中表格的作用v 在网页中插入表格v 编辑表格v 导入和导出表格3.1首页布局首页布局网站首页的设计是非常重要的，关系着网站成功与否。浏览者往往看到第一页就已经对站点有一个整体的感觉。是否能够吸引浏览者继续单击进入，是否能够留住浏览者，就看首页。v版面布局规划链接结构v“国”字型（同字型）、T型、标题正文型、框架型、封面型、Flash型、变化型v首页布局简要步骤版面布局版面布局v 对于版面布局的技巧，提供四个建议，请读者自己推敲：v 加强视觉效果v 加强文案的可视度和可读性v 统一感的视觉v 新鲜和个性是布局的最高境界

3、首页布局简要步骤首页布局简要步骤v画草图v 新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，读者可以尽可能的发挥你的想象力，将想象画上去。这仍然属于创意阶段，只需要粗陋的线条勾画出创意的轮廓。可以多画几张草图，最后选定一个满意的作为继续创作的脚本。v粗略布局v 在草案的基础上，将你确定需要放置的功能模块安排到页面上。例如：网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。注意，必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块。v定稿v 最后将粗略布局具体化、精细化，觉得满意就可以定稿。设计视图选

4、项设计视图选项v“设计视图选项”功能，用于辅助设计网页文档。该功能包括“可视化助理”“样式呈现”“辅助线”“跟踪图像”“网格设置”“窗口大小”“缩放比率”和“标尺”等子菜单。其中，“标尺”功能可以辅助测量、组织和规划布局。“网格设置”功能可以使绝对定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。v 使用使用“标尺标尺”功能功能v 在设计页面时需要设置各种页面元素的位置，此时，可以使用“标尺”功能。选择“查看”“设计视图选项”“标尺”“显示”命令，可以在文档中显示标尺，如图3.9所示。重复操作，可以隐藏或显示标尺。v 1.设置标尺的原点v 在标尺的左上角区域单击

5、，然后拖拽，会出现十字准星，将其拖拽到文档窗口中的适当位置。v 2.恢复标尺初始位置v 要恢复标尺初始位置，可以选择“查看”“设计视图选项”“标尺”“重设原点”命令，或者在标尺左上角交点处双击鼠标。v使用使用“网格设置网格设置”功能功能v “网格设置”功能的作用是在“设计”视图中对Div进行那个绘制、定位或大小调整时做可视化向导，可以对齐页面中的元素。v 选择“查看”“设计视图选项”“网格设置”“显示网格”命令，可以在网页文档中显示网格。v 如果要设置网格的相关属性，可以选择“查看”“设计视图选项”“网格设置”“网格设置”命令。v使用使用“跟踪图像跟踪图像”功能功能v可以采取临摹字帖的方法进行

6、布局。可以将喜欢的某个网站进行截屏，并存为图片形式，然后利用“跟踪图像”功能，将其载入，进行临摹，照着布局。v【例3.1】新建页面，临摹给定图片的布局，并将其载入为跟踪图像。3.3使用表格使用表格v 网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表达设计者的思想。v网页中表格的用途v表格是网页中最常用的排版方式之一插入表格插入表格v选择“插入”Table命令(或按下【Ctrl+Alt

7、+T】组合键)，可以打开Table对话框，通过在该对话框中设置表格参数，可以在网页中插入表格。v【例3.2】在例3.1的基础上插入用于布局的表格，并设置相关属性。v 接例3.1得到的效果，观察“跟踪图像”，进行分析，最上一行为网站标志，下面可能有若干行展示不同目录。v 设置标尺原点为“跟踪图像”有内容展示的最左端，观察最右端的标尺读数为“1000”，表示实际展示内容的尺寸为1000像素，左右两边有相同的留白。v 通过上述两步骤，明确了插入表格的相关参数，选择“插入”Table命令，设置相应参数如下：“行数”为“5”、“列”为“1”、“表格宽度”为“1000”像素、“边框粗细”为“0”。v 选中

8、该表格，或者在标签选择器中选择table标签，在下方“属性”面板可以看到刚插入表格的属性。设置Align（对齐）属性为“居中对齐”。可以发现，表格宽度正好匹配“跟踪图像”。编辑表格编辑表格v表格的编辑功能包括选择表格、调整大小、更改列宽和行高、添加和删除行列、拆分与合并单元格、设置表格属性、设置单元格属性、设置行列属性等。v选择表格是对表格进行编辑操作的前提。可以一次性选择整个表、行或列，也可以选择连续的单元格。HTML 元素元素v 设置表格属性v 选中一个表格后，可以在属性面板中编辑表格的属性。v 1）表格名称。v 2）行、列和宽。v “行”“列”文本框显示所选表格中行和列的数量。“宽”文本

9、框显示所选表格的宽度，以像素为单位或表示为占浏览器窗口宽度的百分比。可以通过修改这些文本框中的数值，从而改变对应的属性。v 3 ） CellPad(单元格边距)、CellSpace(单元格间距)v Align（对齐）、Border（边框）v 4）Class。Class（类）用于对该表格设置一个 CSS 类。v 5）“清除列宽”“清除行高”“将表格宽度转换成像素”“将表格宽度转换成百分比”按钮。设置单元格、行或列属性设置单元格、行或列属性v 选中一个表格元素后，可以使用“属性”面板编辑该元素的相关属性。v 1）水平，用于指定单元格、行或列内容的水平对齐方式。v 2）垂直，用于指定单元格、行或列内

10、容的垂直对齐方式。 v 3）宽和高 ，所选单元格的宽度和高度，以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比，请在值后面使用百分比符号 (%)。v 4）背景，用于指定单元格、列或行的背景颜色。 v 5）合并单元格，将所选的单元格、行或列合并为一个单元格。v 6）拆分单元格，将一个单元格分成两个或更多个单元格。v 7）不换行，勾选此项属性可以防止换行，从而使给定单元格中的所有文本都在一行上。v 8）标题，勾选此项属性可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。调整表格、列和行的大小调整表格、列和行的大小v1）调整表格大小。v 2）调

11、整列和行的大小。v 3）更改列宽度并保持整个表的宽度不变。v 4）更改某个列的宽度并保持其他列的大小不变。v 5）清除表格中所有设置的宽度和高度。v 【例3.3】在例3.2的基础上，对用于布局的表格进行编辑，达到大约1个满屏大小的大块布局 的效果。v 观察例3.2所插入的表格，发现宽度基本与跟踪图像吻合，但是行的高度上需要进行进一步编辑。v 鼠标指向第1行的下边沿，进行拖拽，到合适的位置释放鼠标。v 依次修改第2、3行的行高，因为跟踪图像可能只截了一个屏幕的高度，因此，下方的图不能完全展示，可以参照第2行的行高，设置下方各行的高度，如图3.29所示，插入点设置在第2行是，“属性”面板中“高”的

12、值可以做为后续各行行高的参考。v 网页的高度，会随着布局表格各行的高度的扩展自动更新插入及删除行或列插入及删除行或列v要添加和删除行和列，请使用“编辑”“表格”下的各个菜单命令。 v1）插入行或列。v2）删除行或列。v拆分或合并单元格 v使用属性面板或选择“编辑”“表格”“拆分单元格”或“合并单元格”命令可以拆分或合并单元格。 v选择连续行中形状为矩形的单元格。可以在一个矩形的单元格中合并单元格，如果所选部分不是矩形，不能合并单元格。v复制、粘贴和删除单元格v选定某表格元素后，执行“编辑”“剪切”、“拷贝”或“粘贴”可以剪切、复制或粘贴该表格元素，并保留单元格的格式设置。v嵌套表格v嵌套表格是

13、在另一个表格的单元格中的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其宽度受它所在单元格的宽度的限制。表格的其他操作表格的其他操作v对表格进行排序v 可以选择“编辑”“表格”“排序表格”命令对表格进行排序。可以根据单个列的内容对表格中的行进行排序，还可以根据两个列的内容执行更加复杂的表格排序，但是不能对包含合并单元格的表格进行排序。v导入表格式数据v 可以将在另一个应用程序（例如 Microsoft Excel）中创建并以分隔文本的格式（其中各项以制表符、逗号、冒号或分号隔开）保存的表格式数据导入到网页文档中并设置为表格格式。v导出表格v选择表格后，可以选择“文件”“导出”“表

14、格”命令，用于导出表格HTML 表格表格v表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格标签标签描述描述定义表格定义表格定义表格的表头定义表格的表头定义表格的行定义表格的行定义表格单元定义表格单元定义表格标题定义表格标题定义表格列的组定义表格列的组定义用于表格列的属性定义用于表格列的属性定义表格的页眉定义表格的页眉定义表格的主体定义表格的主体定义表格的页脚定义表格的页脚3.4 上机练习上机练习v请读者参照例3.1-例3.4，选取江西农业大学官方网站为临摹对象，将该网站截图设置为跟踪图像，并进行网页的布局。