第4章表格和网页布局-Dreamweaver+Flash+Photoshop网页制作从入门到精通(C.ppt

《第4章表格和网页布局-Dreamweaver+Flash+Photoshop网页制作从入门到精通(C.ppt》由会员分享，可在线阅读，更多相关《第4章表格和网页布局-Dreamweaver+Flash+Photoshop网页制作从入门到精通(C.ppt（48页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 第 4 章中文版从入门到精通Dreamweaver+Flash+Photoshop网页制作本章导读使用使用使用使用DIVDIV进行网页布局进行网页布局进行网页布局进行网页布局创建表格创建表格创建表格创建表格编辑表格编辑表格编辑表格编辑表格4.14.14.24.24.34.3从入门到精通2清华大学出版社4.1 添加文本创建表格创建表格4.1.1在表格中里添加内容在表格中里添加内容4.1.2 4.1.1 创建表格选择【插入】/【表格】命令，在打开的“表格”对话框中设置表格参数，如图所示从入门到精通4清华大学出版社4.2 编辑表格4.2.1 选择表格元素选择表格元素4.2.2 单元格的合并与单元格

2、的合并与拆分拆分4.2.3 行和列的添加与行和列的添加与删除删除4.2.4 表格属性设置表格属性设置4.2.5 单元格属性设置单元格属性设置4.2.6 调整表格、列和调整表格、列和行的行的大小大小从入门到精通6清华大学出版社4.2.1 选择表格元素选择不相邻的单元格选择不相邻的单元格选择不相邻的单元格选择不相邻的单元格选择整个表格选择整个表格选择整个表格选择整个表格选择列和行选择列和行选择列和行选择列和行1 12 23 3从入门到精通7清华大学出版社1选择整个表格 单击某个表格单元格，然后选择单击某个表格单元格，然后选择【修改修改】/【表格表格】/【选择表格选择表格】命令。命令。单击某个表格单

3、元格，然后在单击某个表格单元格，然后在“文档文档”窗口的标签选择器中窗口的标签选择器中 选择选择 标签。标签。单击表格的左上角、表格的顶缘或底缘的任何位置或者行或单击表格的左上角、表格的顶缘或底缘的任何位置或者行或 列的边框。列的边框。在单元格内单击鼠标右键，在弹出的快捷菜单中在单元格内单击鼠标右键，在弹出的快捷菜单中【表格表格】/【选择表格选择表格】命令。命令。从入门到精通8清华大学出版社按住“Ctrl”单击要选择的单元格、行或列，可以选择几个单元格，如左图所示。如果已将其选中，则再次单击会将其从选择中删除。如果将鼠指针定位到表格边框上，然后按住“Ctrl”键，则将高亮显示该表格的整个表格结

4、构（即表格中的所有单元格），如右图示。3选择不相邻的单元格选择多个单元格高亮显示表格从入门到精通10清华大学出版社4.2.2 单元格的合并与拆分单元格的合并单元格的合并1拆分单元格拆分单元格2从入门到精通11清华大学出版社单击某个单元格，选择【修改】/【表格】/【拆分单元格】命令或在HTML“属性”面板中，单击“拆分单元格”按钮，在打开的“拆分单元格”对话框中设置拆分的列数或行数，如图4所示。2拆分单元格从入门到精通13清华大学出版社1添加行或列在某个单元格中单击鼠标右键，在弹出的快捷菜单中选择【表格】/【插入行】命令或【表格】/【插入列】命令即可插入行或插入列，如图所示。从入门到精通15清华

5、大学出版社在要删除的行或列中的一个单元格内单击鼠标右键，然后在弹出的快捷才当中选择【表格】/【删除行】命令或【表格】/【删除列】命令，如图所示。2删除行或列从入门到精通16清华大学出版社除了能设置整个表格的属性外，还能对表格的单元格、行或列的属性进行设置。选中要设置属性的单元格、行或列，其“属性”面板如图所示。4.2.5 单元格属性设置从入门到精通18清华大学出版社4.2.6 调整表格、列和行的大小调整表格大小调整表格大小调整表格大小调整表格大小清除表格中所有设置的宽度和高度清除表格中所有设置的宽度和高度清除表格中所有设置的宽度和高度清除表格中所有设置的宽度和高度1 12 2从入门到精通19清

6、华大学出版社1调整表格大小调整列宽调整行高调整行和列的大小从入门到精通20清华大学出版社2清除表格中所有设置的宽度和高度选择【修改】/【表格】/【清除单元格宽度】命令【修改】/【表格】/【清除单元格高度】命令 单击“清除行高”按钮单击“清除列宽”按钮单击表格标题菜单，在弹出的列表菜单中选择“清除所有高度”命令方法方法从入门到精通21清华大学出版社4.3 使用DIV进行网页布局4.3.1 使用可视化助理进行布局4.3.2 插入和编辑Div标签4.3.3 使用 AP 元素4.3.4 编辑AP Div4.3.5 设置AP Div属性标尺可帮助网页设计人员测量、组织和规划布局，以像素、英寸或厘米为单位

7、来标记。选择【查看】/【标尺】/【显示】命令可以显示或隐藏标尺。1设置标尺从入门到精通24清华大学出版社辅助线是从标尺拖动到文档上的线条，有助于准确地放置和对齐对象以及使用辅助线来测量页面元素的大小，或者模拟Web浏览器的重叠部分。从相应的标尺拖动即可创建辅助线，其操作方法是：从标尺位置拖动到文档中释放鼠标创建标尺，如图所示。2设置布局辅助线从入门到精通25清华大学出版社网格在“文档”窗口中显示一系列的水平线和垂直线。它对于精确地放置对象很有用。可以让经过绝对定位的网页页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为，如图所示。3使用布局网格从入门到精通26清华大学出版

8、社1插入 Div 标签“插入Div标签”对话框Div标签占位符从入门到精通28清华大学出版社将插入点放在 Div 标签中，选择该文本，在上面键入内容或按 Delete 键可以更改 div 标签中的占位符文本。同样将插入点放在Div标签中单击“插入Div标签”按钮，可以插入嵌套Div标签，如图所示。2编辑 Div 标签从入门到精通29清华大学出版社1插入AP DivDreamweaver 可以在页面中轻松地创建和定位 AP Div，在“插入”面板的“布局”选项中单击“绘制 AP Div”按钮，将鼠标移动到编辑窗口中，当鼠标变为 形时，在编辑窗口中任意位置按下鼠标左键不放进行拖动即可创建AP Di

9、v，在绘制过程中，状态栏将动态显示正在绘制的AP Div的大小。从入门到精通31清华大学出版社单击“插入AP Div”按钮，按住“Ctrl”键拖动可以连续绘制多个AP Div。如图所示。2连续绘制AP Div从入门到精通32清华大学出版社嵌套的 AP Div 是其代码包含在另一个 AP Div 的标签内的 AP Div。如左图所示。要绘制嵌套AP Div，首先需要在“首选参数”中启用嵌套。如右图所示。3使用嵌套 AP DivAP Div代码绘制嵌套AP Div从入门到精通33清华大学出版社4.3.4 编辑AP Div选择选择AP Div1移动移动AP Div2对齐对齐AP Div3调整调整AP

10、 Div的大小的大小4从入门到精通34清华大学出版社1选择AP Div 选择单个AP Div 选择多个AP Div在编辑窗口中单击要选择的AP Div的边框按住“Shift”键后依次在需选中的AP Div中或AP Div边框上单击从入门到精通35清华大学出版社2移动AP Div选择需移动的AP Div后，将鼠标移到AP Div边框上，当鼠标变为 形状时，按住鼠标左键不放进行拖动，到需要的位置后释放鼠标即可，如图所示。从入门到精通36清华大学出版社3对齐AP Div选择【修改】/【排列顺序】命令，使AP Div对齐从入门到精通37清华大学出版社4调整AP Div的大小 选择选择要调整大小要调整大

11、小的的AP Div，在，在“属性属性”面板的面板的“宽宽”、“高高”文本框文本框中输入所需的宽度中输入所需的宽度和高度值，再按和高度值，再按“Enter”键确认。键确认。将将鼠标移至要调鼠标移至要调整大小的整大小的AP Div的边缘，当鼠标变的边缘，当鼠标变为为、或或 形时按形时按住鼠标左键不放，住鼠标左键不放，观察观察“属性属性”面板面板中动态显示的中动态显示的“宽宽”和和“高高”数值进数值进行拖动，至合适的行拖动，至合适的大小后释放鼠标。大小后释放鼠标。按住按住“Ctrl”键键再按键盘上的方向再按键盘上的方向键，可以移动键，可以移动AP Div的右边框和下的右边框和下边框，每次调整边框，每

12、次调整1个像素的大小；按个像素的大小；按住住“Shift+Ctrl”键的同时再按键盘键的同时再按键盘上的方向键可每次上的方向键可每次调整调整10个像素的大个像素的大小。小。从入门到精通38清华大学出版社4.3.5 设置AP Div属性1设置单个设置单个AP Div的属性的属性2设置多个设置多个AP Div的属性的属性设置多个AP Div的“属性”面板单个AP Div的“属性”面板从入门到精通39清华大学出版社4.4 基础实例布局“鲜花”网页使用Div布局“鲜花”网页，最终效果如图所示。从入门到精通清华大学出版社本例制作的“鲜花”网页属于鲜花网站的图片展示块，它通过网站对鲜花图片的展示，使客户能

13、足不出户就可以选购自己心仪的鲜花。花本身是一种比较容易在网络上进行销售的产品，不存在网上和现实中具有较大的品质差异，在网上挑选更加直观和方便，而且现在大部分网上的花店都将订花、送花合并成一条龙服务，让买花的消费者越加方便。轻松点击之间，鲜花与衷心的祝福便可以准时送抵朋友。鲜花的热潮也许不能完全决定整个电子商务成功与否，但会有越来越多的人参与到电子商务的购物方式中。4.4.1 行业分析从入门到精通41清华大学出版社4.4.2 操作思路设置页面设置页面属性属性创建创建Div标签标签插入内容插入内容从入门到精通42清华大学出版社4.5 基础练习练习在Dreamweaver CS6中制作“招聘”网页，

14、主要包括表格的创建以及合并单元格、在表格中添加文本及图像、创建CSS样式对表格及单元格等对象进行控制等知识。本练习的最终效果如图所示。从入门到精通43清华大学出版社操作思路创建表格并编辑在单元中添加内容定义CSS样式规则从入门到精通44清华大学出版社4.5.2 创建“新闻列表”网页本练习将在Dreamweaver CS6中，使用AP Div标签及CSS样式表创建“新闻列表”网页，在操作中主要运用AP Div标签的创建、CSS样式的创建、修改和应用等操作知识，最终效果如图所示。从入门到精通清华大学出版社操作思路新建文档并设置 页面属性绘制AP Div标签块添加文本和图像内容操作思路123从入门到

15、精通46清华大学出版社4.6 知识问答Diagram问：使用问：使用Div标签布局与表格布局相比标签布局与表格布局相比有哪些优势？有哪些优势？问：如何加快表格布局网页问：如何加快表格布局网页加载的速度？加载的速度？问：在制作网页时，能全部使用问：在制作网页时，能全部使用AP Div元素进行网页布局吗？元素进行网页布局吗？知识问答知识问答知识问答知识问答从入门到精通47清华大学出版社知识关联：Div+CSS布局网页使用Div+CSS进行网页布局时，最关键的是CSS样式表。CSS 2.0的推出真正做到了网页表现与内容分离，相对于传统的HTML的简单样式控制而言，CSS能够对网页中对象的位置进行像素级的精确控制，且支持几乎所有的字体字号样式以及拥有对网页对象和模型样式的控制能力，并能够进行初步页面交互设计。归纳起来CSS 2.0有以下几个主要优势：浏览器支持完善，表现与结构分离，样式设计控制功能强大，继承性优越。CSS 2.0的优越性，使Div+CSS布局成为设计者设计网页时的首选方案，在后面的学习章节中会逐步进行介绍。从入门到精通清华大学出版社