- 1、本文档共46页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
DW-第3章页面的布局
页面标题 网页Banner 导航栏 主内容区 网页标志 页脚版权信息 3.3.2常见的网页布局类型 “国”字型布局: “国”字型布局,最上面是网站的标志、广告以及导航栏,接下来是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下部是网站的一些基本信息(页脚版权信息),这种结构是国内一些大中型网站常用的布局方式,其优点是充分利用版面,信息量大,缺点是页面显得拥挤,不够灵活。 “国”字型布局如图所示: 页脚版权信息 3.3.2 “厂”字型布局 “厂”字型结构布局,是指页面顶部为标志+广告条,下方左面为主菜单,右面显示正文信息,整体效果类似“厂”字,所以称之为“厂”字型布局。 3.3.2 “框架”型布局 “框架”型布局一般分成上下或左右布局,一栏是导航栏目,一栏是正文信息。 3.3.2 “封面”型布局 “封面”型布局一般应用在网站的主页或广告宣传页上。 3.3.2 “FLASH”型布局 这种布局跟“封面”型的布局结构类似,不同的是页面采用了Flash技术,动感十足,可以大大增强页面的视觉效果。 任务1表格布局实例 任务2表格布局实例 任务3表格布局实例 任务4表格布局实例 任务5表格布局实例 任务5表格布局实例 任务6表格布局实例 Dreamweaver 网页制作 主讲:孙洪娟 第3章 页面的布局 本章任务目标 3.1了解表格的基本概念 3.2表格的基本操作 3.3页面布局方法 3.4实例 3.1表格 3.1.1 什么是表格? 表格是网页设计中非常重要的元素之一,它不仅可以将相关数据有序地排列在一起,还可以精确地定位文字、图像、表单等网页元素在网页中的位置。使得页面在形式上丰富多彩又条理清楚,在组织井然有序页不显单调。使用表格进行页面布局的最大好处是,即使浏览器者改变计算机分辨率也不会影响网页的浏览效果。 3.1.2表格的组成元素 行:表格中的水平间隔 列:表格中的垂直间隔 单元格:表格中一行与一列相交所产生的区域 3.2表格的基本操作 3.2.1 插入表格的操作步骤如下: 1、将光标定位在要插入表格的位置处。 2、选择菜单栏中的【插入】【表格】命令【Ctrl+Alt+T】快捷键; 3、在【插入】工具栏中选择【常用】标签,单击其中的 按钮; 弹出【表格】对话框(如图) 3.2.2表格的选项设置 【行数】和【列】:用于设置插入表格的行数和列数。 【表格宽度】:用于设置表格的宽度,选择“像素”为单位时,表格的宽度为固定像素的宽度;选择“百分比”为单位时,表格的宽度与浏览器窗口的宽度将保持相同的百分比。 【边框粗细】:用于设置表格的边框宽度 【单元格边距】:用于设置表格中单元格内的元素距离单元格边框的距离。 【单元格间距】:用于设置表格中单元格之间的间距。 【标题】:用于设置表头的位置,分别为无、左、顶部、两者。 辅助功能中的【标题】:用于设置表格标题,该标题在表格的外侧。 【摘要】:用于描述表格的相关信息。 3.2.3编辑表格 选择整个表格: 1、将光标指向表格边框,单击鼠标,可以选择整个表格。 2、单击状态栏上的table标记,也可以选择整个表格。 选择一列单元格: 将光标指向表格的上边框,当光标变为形状时单击鼠标,可以选择一列单元格。 连续的多列单元格: 按住鼠标左键左右拖曳,可以选择连续的多列单元格。 3.2.3编辑表格 选择一行单元格; 1、将光标指向表格的左边框,当光标变为形状时单击鼠标,可以选择一行单元格。 2、单击状态栏上的tr标记,可以选择光标所在的一行单元格。 连续的多行单元格; 按住鼠标左键上下拖曳,可以选择连续的多行单元格。 二者之间的连续单元格; 将光标定位在一个单元格中,按住Shift键的同时单击另外一个单元格,可以选择二者之间的连续单元格。 不连续的单元格; 按住 Ctrl键的同时单击其它单元格,可以选择多个不连续的单元格。另外,单击标签,可以选择光标所在的单元格。 3.2.4表格属性设置 【表格】:用于设置表格的名称。 【行】和【列】:用于设置表格的行数和列数。 【宽】:用于设置表格的宽度,单位为“百分比”或“像素”。 【填充】:用于设置单元格中的内容与边框之间的距离。 【间距】:用于设置单元格之间的距离。 【对齐】:用于设置表格在网页中的对齐方式,可以选择“默认”、“左对齐”、“居中对齐”或“右对齐”等方式。 3.2.4表格属性设置 【边框】:用于设置表格外边框的宽度。 【类】:用于设置表格的CSS样式。 单击 按钮,可以取消单元格的宽度设置,使其宽度随单元 格的内容自动缩放。 单击 按钮,可以取消单元格的高度设置,使其高度随单元格的内容自动调整。 单击 按钮,可以将表格宽度转换为像素。 单击 按钮,可以将表格宽度转换为百分比。 3.2.5表格插入删除行和列
您可能关注的文档
- DNS的组建与运用.ppt
- DOE Minitab 操作教程.ppt
- DOM 对象属性和方法.docx
- DOORS方案.docx
- DOS系统和Linux系统基本操作.pptx
- DPS培训资料.pptx
- Dreamweaver cs3网页设计.doc
- DRBRTJ-4标第2章.doc
- drools笔记.docx
- DS-XWJ-500B热机分析仪.doc
- Unit 3 Online tours Task 教学设计2023-2024学年牛津译林版英语八年级下册.docx
- 2.3.1计数循环 教学设计 2023—2024学年教科版(2019)高中信息技术必修1.docx
- 第四单元自然界的水阶段知识整合与训练(四)教学设计---2023-2024学年九年级化学人教版上册.docx
- 第19课 资本主义国家的新变化教学设计--江苏省泰州中学2023-2024学年高一下学期统编版(2019)必修中外历史纲要下.docx
- 1.1.2 物质的转化 教学设计 2024-2025学年高一上学期化学人教版(2019)必修第一册.docx
- 福建省晋江市平山中学高中地理《第四章 第三节传统工业区与新兴工业区》教案 新人教版必修2.docx
- UNIT3 Period 2 Starting out & Understanding ideas—Language points2024-2025学年高中英语必修第一册同步导学案配套教学设计(外研版2019).docx
- 七年级历史上册 第四单元 三国两晋南北朝时期:政权分立与民族交融第19课 北魏政治和北方民族大交融教案 新人教版.docx
- 6.4 协同进化与生物多样性的形成-2023-2024学年高一生物下学期备课小能手优质教学教学设计(人教版2019必修2).docx
- 2.4传感与控制 教学设计 2023—2024学年浙教版(2019)高中信息技术必修2.docx
文档评论(0)