Web前端设计与开发技术-课件-第3章-首页设计与网页布局_第1页
Web前端设计与开发技术-课件-第3章-首页设计与网页布局_第2页
Web前端设计与开发技术-课件-第3章-首页设计与网页布局_第3页
Web前端设计与开发技术-课件-第3章-首页设计与网页布局_第4页
Web前端设计与开发技术-课件-第3章-首页设计与网页布局_第5页
已阅读5页，还剩21页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端设计与开发技术（HTML+CSS+JavaScript）江西农业大学计算机与信息工程学院主讲人：第3章首页设计与网页布局3.1首页布局3.2设计视图选项3.3使用表格3.4上机练习

首页是网站中非常重要的一页，网页内容的布局方式取决于网站的主题定位。在Dreamweaver中，表格是最常用的网页布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确定位，使网页页面效果显得整齐而有序。本章主要介绍如何使用表格规划首页布局。学习目标

网页布局

设计视图选项

网页中表格的作用

在网页中插入表格

编辑表格

导入和导出表格3.1首页布局网站首页的设计是非常重要的，关系着网站成功与否。浏览者往往看到第一页就已经对站点有一个整体的感觉。是否能够吸引浏览者继续单击进入，是否能够留住浏览者，就看首页。

版面布局规划链接结构

“国”字型（同字型）、T型、标题正文型、框架型、封面型、Flash型、变化型

首页布局简要步骤版面布局

对于版面布局的技巧，提供四个建议，请读者自己推敲：

加强视觉效果

加强文案的可视度和可读性

统一感的视觉

新鲜和个性是布局的最高境界首页布局简要步骤

画草图

新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，读者可以尽可能的发挥你的想象力，将想象画上去。这仍然属于创意阶段，只需要粗陋的线条勾画出创意的轮廓。可以多画几张草图，最后选定一个满意的作为继续创作的脚本。

粗略布局

在草案的基础上，将你确定需要放置的功能模块安排到页面上。例如：网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。注意，必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块。

定稿

最后将粗略布局具体化、精细化，觉得满意就可以定稿。设计视图选项

“设计视图选项”功能，用于辅助设计网页文档。该功能包括“可视化助理”“样式呈现”“辅助线”“跟踪图像”“网格设置”“窗口大小”“缩放比率”和“标尺”等子菜单。其中，“标尺”功能可以辅助测量、组织和规划布局。“网格设置”功能可以使绝对定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。

使用“标尺”功能

在设计页面时需要设置各种页面元素的位置，此时，可以使用“标尺”功能。选择“查看”\“设计视图选项”\“标尺”\“显示”命令，可以在文档中显示标尺，如图3.9所示。重复操作，可以隐藏或显示标尺。

1.设置标尺的原点

在标尺的左上角区域单击，然后拖拽，会出现十字准星，将其拖拽到文档窗口中的适当位置。

2.恢复标尺初始位置

要恢复标尺初始位置，可以选择“查看”\“设计视图选项”\“标尺”\“重设原点”命令，或者在标尺左上角交点处双击鼠标。

使用“网格设置”功能

“网格设置”功能的作用是在“设计”视图中对Div进行那个绘制、定位或大小调整时做可视化向导，可以对齐页面中的元素。

选择“查看”\“设计视图选项”\“网格设置”\“显示网格”命令，可以在网页文档中显示网格。

如果要设置网格的相关属性，可以选择“查看”\“设计视图选项”\“网格设置”\“网格设置”命令。

使用“跟踪图像”功能

可以采取临摹字帖的方法进行布局。可以将喜欢的某个网站进行截屏，并存为图片形式，然后利用“跟踪图像”功能，将其载入，进行临摹，照着布局。

【例3.1】新建页面，临摹给定图片的布局，并将其载入为跟踪图像。3.3使用表格

网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表达设计者的思想。

网页中表格的用途

表格是网页中最常用的排版方式之一插入表格

选择“插入”\Table命令(或按下【Ctrl+Alt+T】组合键)，可以打开Table对话框，通过在该对话框中设置表格参数，可以在网页中插入表格。

【例3.2】在例3.1的基础上插入用于布局的表格，并设置相关属性。

接例3.1得到的效果，观察“跟踪图像”，进行分析，最上一行为网站标志，下面可能有若干行展示不同目录。

设置标尺原点为“跟踪图像”有内容展示的最左端，观察最右端的标尺读数为“1000”，表示实际展示内容的尺寸为1000像素，左右两边有相同的留白。

通过上述两步骤，明确了插入表格的相关参数，选择“插入”\Table命令，设置相应参数如下：“行数”为“5”、“列”为“1”、“表格宽度”为“1000”像素、“边框粗细”为“0”。

选中该表格，或者在标签选择器中选择〈table〉标签，在下方“属性”面板可以看到刚插入表格的属性。设置Align（对齐）属性为“居中对齐”。可以发现，表格宽度正好匹配“跟踪图像”。编辑表格

表格的编辑功能包括选择表格、调整大小、更改列宽和行高、添加和删除行列、拆分与合并单元格、设置表格属性、设置单元格属性、设置行列属性等。

选择表格是对表格进行编辑操作的前提。可以一次性选择整个表、行或列，也可以选择连续的单元格。HTML<head>元素

设置表格属性

选中一个表格后，可以在属性面板中编辑表格的属性。

1）表格名称。

2）行、列和宽。

“行”“列”文本框显示所选表格中行和列的数量。“宽”文本框显示所选表格的宽度，以像素为单位或表示为占浏览器窗口宽度的百分比。可以通过修改这些文本框中的数值，从而改变对应的属性。

3）

Align（对齐）、Border（边框）

4）Class。Class（类）用于对该表格设置一个CSS类。

5）“清除列宽”“清除行高”“将表格宽度转换成像素CellPad(单元格边距)、CellSpace(单元格间距)”“将表格宽度转换成百分比”按钮。设置单元格、行或列属性

选中一个表格元素后，可以使用“属性”面板编辑该元素的相关属性。

1）水平，用于指定单元格、行或列内容的水平对齐方式。

2）垂直，用于指定单元格、行或列内容的垂直对齐方式。

3）宽和高，所选单元格的宽度和高度，以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比，请在值后面使用百分比符号(%)。

4）背景，用于指定单元格、列或行的背景颜色。

5）合并单元格，将所选的单元格、行或列合并为一个单元格。

6）拆分单元格，将一个单元格分成两个或更多个单元格。

7）不换行，勾选此项属性可以防止换行，从而使给定单元格中的所有文本都在一行上。

8）标题，勾选此项属性可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。调整表格、列和行的大小

1）调整表格大小。

2）调整列和行的大小。

3）更改列宽度并保持整个表的宽度不变。

4）更改某个列的宽度并保持其他列的大小不变。

5）清除表格中所有设置的宽度和高度。

【例3.3】在例3.2的基础上，对用于布局的表格进行编辑，达到大约1个满屏大小的大块布局的效果。

观察例3.2所插入的表格，发现宽度基本与跟踪图像吻合，但是行的高度上需要进行进一步编辑。

鼠标指向第1行的下边沿，进行拖拽，到合适的位置释放鼠标。

依次修改第2、3行的行高，因为跟踪图像可能只截了一个屏幕的高度，因此，下方的图不能完全展示，可以参照第2行的行高，设置下方各行的高度，如图3.29所示，插入点设置在第2行是，“属性”面板中“高”的值可以做为后续各行行高的参考。

网页的高度，会随着布局表格各行的高度的扩展自动更新插入及删除行或列

要添加和删除行和列，请使用“编辑”\“表格”下的各个菜单命令。

1）插入行或列。

2）删除行或列。

拆分或合并单元格

使用属性面板或选择“编辑”\“表格”\“拆分单元格”或“合并单元格”命令可以拆分或合并单元格。

选择连续行中形状为矩形的单元格。可以在一个矩形的单元格中合并单元格，如果所选部分不是矩形，不能合并单元格。

复制、粘贴和删除单元格

选定某表格元素后，执行“编辑”\“剪切”、“拷贝”或“粘贴”可以剪切、复制或粘贴该表格元素，并保留单元格的格式设置。

嵌套表格

嵌套表格是在另一个表格的单元格中的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其宽度受它所在单元格的宽度的限制。表格的其他操作

对表格进行排序

可以选择“编辑”\“表格”\“排序表格”命令对表格进行排序。可以根据单个列的内容对表格中的行进行排序，还可以根据两个列的内容执行更加复杂的表格排序，但是不能对包含合并单元格的表格进行排序。

导入表格式数据

可以将在另一个应用程序（例如MicrosoftExcel）中创建并以分隔文本的格式（其中各项以制表符、逗号、冒号或分号隔开）保存的表格式数据导入到网页文档中并设置为表格格式。

导出表格

选择表格后，可以选择“文件”\“导出”\“表格”命令，用于导出表格HTML表格标签描述

表格由<table><table>标签来定义。每个表格均有若干定义表格行（由<tr>标签定义），每行被分割为若干单元<th>定义表格的表头格（由<td>标签定义）。字母<tr>定义表格的行td指表格数据（tabledata），即数据单元格的内容。数

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论