网站规划与网站设计.ppt

2.10 常用网站制作软件Dreamweaver （2）层的设置 设置层需要在层的属性面板中进行设置，层属性面板如图 所示。 2.10 常用网站制作软件Dreamweaver （3）层的操作 a）选择层 在对层进行操作之前，先要选中层。可用如下方法: 将鼠标指针移动到层的边框外，当鼠标指针边为十字箭头形状 时，单击鼠标左键即可选中该层。 单击文档窗口中层的锚记标记，即可选中对应的层。单击“窗 口”/“层”命令，在打开的“层”面板中单击层的名称。按住“shift”键 的同时单击层边框或者单击“层”面板中的层名称，即可选中多 个层。若在层边框内的任意位置单击鼠标左键，此时该层的边 框将会高亮显示，而且出现插入点，但此时该层本身并没有被 选中。 2.10 常用网站制作软件Dreamweaver b）调整层尺寸 用户可以单独调整单个层的尺寸，也可以同时调整多个层的尺 寸，使其具有指定的高度和宽度。 要调整层的尺寸，应先选中该层，然后将鼠标指针放置在层边 框的任意一个控制手柄上，当鼠标指针变为双向箭头时，拖动 鼠标沿箭头方向移动，即可调整层的尺寸。 c）移动层 在网页文档窗口中可以自由移动层。首先选中需要移动的层， 然后将鼠标指针指向层边框，在鼠标指针变为十字箭头形状 时，用鼠标拖动层的边框到指定位置后释放鼠标即可完成层的 移动。 2.10 常用网站制作软件Dreamweaver d）对齐层 要对齐多个层，应先选中一个或多个层，然后单击“修改”/“对 齐”命令，从其子菜单中选择层的对齐方式，包括“左对齐”、“右 对齐”、“对齐上缘”和“对齐下缘”命令。 下面以三个层为例，按顺序选取，然后单击“修改”/“对齐”/“对齐上缘”命令，此时在文档中可以看到第一个层和第二个层都以第三个层的上边缘为标准进行对齐，其效果如图。 2.10 常用网站制作软件Dreamweaver （4）层与表格的相互转换 层技术灵活而强大，可以方便、精确地定位页面元素。但该技 术也有其局限性，例如，需要在较高版本的浏览器中才能正确 显示。为此，用户可以根据实际需要，将用表格设计的页面转 换为用层设计的页面，或者反过来将用层设计的页面转换成表 格形式。 a）层转换为表格 要将层转换为表格，先创建需要转换为表格的层。如果文档中 存在重叠的层，则 Dreamweaver 将不能进行正确转换，所以 在进行转换之前要将这些层设置为非重叠方式。 2.10 常用网站制作软件Dreamweaver 操作示例：将如图所示的层转换为表格。 2.10 常用网站制作软件Dreamweaver i、单击“修改”／“转换”／“层到表格”命令，即可弹出如图所示的“转换层为表格”对话框。 ii、然后单击“确定”按钮，即可将层转换为表格 2.10 常用网站制作软件Dreamweaver b）表格转换为层 相应地，可将网页文档中的表格转换层，从而利用层的特性实现更多的效果。 下面以如图表格为例，简要介绍将表格转换为层的操作过程。 2.10 常用网站制作软件Dreamweaver i、单击“修改”｜“转换”｜“表格到层”命令，可弹出如图所示的“转换表格为层”对话框。 ii、设置完毕后单击“确定”按钮，即可将表格转换为层，效果如下图2-38。 2.10 常用网站制作软件Dreamweaver 9．CSS样式设计 现代网页制作离不开CSS（Cascading Style Sheet 层叠样式 表）技术。 采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和 其他效果实现更加精确的控制。 用CSS不仅可以做出美观工整、令浏览者赏心悦目的网页，还 能给网页添加许多神奇的效果。 2.10 常用网站制作软件Dreamweaver 1）创建CSS样式表 创建CSS样式表的过程，就是对各种CSS属性的设置过程， Dreamweaver实现CSS属性设置功能是完全可视化的，无需 编写代码。创建新的CSS样式表的方法如下： a）选择“窗口”/“CSS样式”菜单项，或按快捷键“shift+F11”，打开 “CSS样式”面板。 b）单击“CSS样式”面板底部的“新建CSS样式”按钮，系统弹出 “新建CSS样式”对话框。 c)定义创建的CSS样式的选择器类型。由于类型不同，操作也 不相同。 2.10 常用网站制作软件Dreamweaver i、创建可作为class属性应用于文本范围或文本块的自定义样式：选中“类（可应用于任何标签）”单选按钮，然后在“名称”下拉列表框中输入样式名称，如图示。 2.10 常用网站制作软件Dreamweaver ii、重定义特定HTML标签的默认格式：选中“标签（重新定义特定标签的外观）”单选按钮，然后在“标签”下拉列表框中输入一个HTML标签，或从中选择一