《网页设计与制作》第四章.ppt

页面设计 南海学院计算机系制作 本章要点 设置网页属性 页面布局 使用框架布局 层的使用 使用CSS CSS属性 页面设置 1．外观 2．链接 3．标题 4．标题/编码 5．跟踪图像 文件头设置 表格布局 1个实例 使用表格对课本74页的网页进行布局。 操作步骤 （1）??? 插入一个3行1列的表格a。a 760×420 边框为0，填充、间距为0，对齐方式居中。 （2）??? 在表格a的第3行插入1条水平线，宽度为70％。居中。文字 （3）??? 在表格a的第1行中插入1个2行1列的表格b。宽度100％。其余0 （4）??? 在表格b的第1行插入一个1行2列的表格c。宽度100％。 （5）??? 在表格b的第2行插入一个1行5列的表格d。宽度100％。 （6）??? 在表格a的第2行插入一个1行2列的表格e。宽度100％。 （7）??? 在表格e的第1列插入一个2行1列的表格f。宽度100％。 （8）??? 在表格e的第2列插入一个2行1列的表格g。宽度100％。 （9）在表格g的第2行插入一个1行3列的表格h。宽度100％。 使用扩展模式布局 使用布局模式布局 使用布局模式布局 绘制布局表格 绘制布局单元格 使用框架布局 一个实例： 框架与框架集的概念 单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。 利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。 框架集与框架之间的关系是包含与被包含的关系，多个框架就组成了框架集，框架集包含了框架1、框架2和框架3共3个框架。 框架与框架集的概念 用框架布局网页时有如下的技巧和规则： 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要分别保存每个框架文件和框架集文件。 确保文件中的每个链接都正确。 使用框架布局 父框架和子框架 设置框架与框架集的属性 设置框架属性 设置框架集属性 设置框架属性 “框架名称”文本框 “源文件”文本框 “滚动”下拉列表框 复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框 设置框架集属性 选择需设置属性的框架集。 框架集“属性”面板中各设置参数含义和框架“属性”面板中的基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中选择单位后即可输入所需数值。 　框架链接的目标 一个实例 利用框架为“书香盈袖”网页布局页面，并为其添加网页元素。 　层的使用 层的基本操作 对层可进行选择、移动、调整大小和对齐等操作，这些操作大多数都可在“层”面板中进行。 层的基本操作 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面 显示“层”面板 选择“窗口/层”命令或按F2键显示“层”面板，“层”面板用于对层进行管理和操作。 当前网页中的层都会显示在“层”面板的列表中，嵌套层以树状结构显示。 层的选择 要对层进行操作和设置需先将其选择，单个层和多个层的选择方法不同。 1．单个层的选择 选择单个层有如下几种方法： 单击所需层的边框。 在“层”面板中单击所需层的名称。 按住Shift+Ctrl键在所需层中单击。 选择层后，在“层”面板中会以反白方式显示该层名称。 2．多个层的选择 选择多个层可按住Shift键后依次在层中或层边框上单击，也可按住Shift键后依次在“层”面板中单击层的名称。 层的拖动 选择需移动的层，将光标移到层边框上，按住鼠标左键将其拖动到需要的位置后释放鼠标即可。 层的对齐 在设计网页过程中经常需要将层对齐。对齐层的操作比较简单，选择需对齐的层，选择“修改/对齐”菜单中的相应子命令即可。层的对齐有左对齐、右对齐、对齐上缘、对齐下缘几种方式。 层的大小调整 在网页制作过程中，通常创建的层大小都不符合要求，需对其进行大小的调整。单个层和多个层调整大小的方法不相同。 单个层的大小调整 调整单个层大小只需进行如下任一操作即可： 选择层，在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键。 将光标移至层的边缘，将其拖动到所需大小后释放鼠标。 按住Ctrl键再按键盘上的方向键，可以移动层的右边框和下边框，每次调整1个像素的大小；按住Shift+Ctrl键的同时再按键盘上的方向键可每次调整10个像素的大小。 多个层的大小调整 选择需调整大小的多个层，然后选择“修改/对齐”菜单中的“设成宽度相同”或“设成高度相同”命令，则所有选择的层将设置为最后选择层的宽度或高度，也可在“属性”面板的