《DW网页设计.pptx

Internet应用教程第十一章 网页设计基础(三)11.3 DreamWeaver网页设计Dreamweaver是Adobe公司开发的一款集网页制作和网站管理于一体的所见即所得网页编辑器软件，是针对专业网页设计师的跨平台视觉化网页开发工具。Dreamweaver功能强大，可以帮助设计者快速高效地设计极具吸引力的网页，并且能够支持利用ASP、JSP、PHP、ASP.NET等多种程序的动态网页编写与调试。11.3.1 软件界面①菜单栏：以菜单选择的方式提供了Dreamweaver的绝大部分操作功能②文档工具栏：提供与文档设计与查看相关的功能按钮，如视图模式选择、通过浏览器预览、W3C验证、兼容性检查、设置文档标题等。③标准工具栏：提供文档操作的标准化常用工具按钮，如文件的新建、保存、打开，以及内容的剪切、拷贝和粘贴等。④文档窗口：网页文档的实际编辑和操作窗口。⑤标签选择器：位于文档窗口底部左侧的状态栏中，它显示环绕当前选定内容的标签的层次结构，单击标签选择器中的任意标签可以选中该标签所包含的全部内容。⑥属性面板：显示和修改选定元素或整个文档的各种相关属性。⑦常用浮动面板：显示用户常用的一些控制面板，方便用户操作，如插入面板、CSS样式面板、文件面板、框架面板等。11.3.2 网页设计基本操作视图模式：代码视图：在文档窗口中仅显示网页文件对应的HTML或者其他语言代码，可以进行代码的编辑和修改。设计视图：在文档窗口中仅显示网页元素的内容，在此可以所见即所得地插入各种网页元素，如文本、图片、表格等，并通过属性面板等对选中的元素属性进行修改。拆分视图：同时显示代码视图和设计视图，兼顾二者的优点。Dreamweaver CS6中代码视图位于文档窗口的左侧，设计视图位于文档窗口的右侧，二者相互对应。实时视图：在文档窗口中实时查看网页在浏览器窗口中的实际显示效果，此模式下不可以对网页文件进行编辑。Dreamweaver中设计一个新的网页文件的基本步骤为：新建一个网页文件，“文件-新建-HTML空白页”选择存储位置保存文件，“文件-存储/存储为”编辑设计文件11.3.2.1 文本输入文本元素：设计视图下，在网页的某一位置直接输入文本内容既可，其编辑方式与其他的文本编辑软件基本类似设置文本样式（颜色、字体、大小等）HTML样式CSS样式（可同时应用多种样式）11.3.2.2 图片设计视图下，将鼠标放置在要插入图片的位置，选择“插入-图像”菜单，在打开的“选择图像源文件”窗口中选择要插入的图像文件。如果要插入网络上的一幅图片，则将网络图片的网址（URL）输入到窗口中的“URL”地址框中即可。“确定”后输入替换文本。对齐：选中图片，右键菜单“对齐”中选择属性设置：11.3.2.3 超级链接选中要添加超级链接的元素，在属性面板中的HTML格式设置中设置“链接”的位置、文件或者网址。1、指向本地网页文件：打开文件夹选择文件2、链接网络文件：“链接”栏中输入要链接的网址3、链接当前网页的不同位置在特定位置插入命名锚记：“插入-命名锚记”，设置锚记名称。选中要定义超级链接的元素，在属性面板的“链接”栏中输入“#锚记名称”11.3.2.4 表格“插入-表格”，“表格”窗口中设置表格属性（行数、列数、宽度、边框粗细、单元格边距、单元格间距、表格标题等）单元格中输入或插入文字、图片、表格等元素选中一个或者多个表格单元可以利用属性面板设置元素的样式，对单元格设置水平/垂直对齐方式、背景颜色、宽度、高度等属性，可以进行单元格的合并和拆分操作。11.3.2.5 AP Div（层）AP Div可以理解为浮动在网页上的一个页面，可以放置在页面中的任何位置，可以随意移动这些位置，而且它们的位置可以相互重叠，也可以任意控制AP Div的前后位置、显示与隐藏，因此大大加强了网页设计的灵活性，被广泛用来进行网页布局。插入AP Div插入-布局对象-AP Div鼠标拖拉区域点击区域内部，编辑内容移动AP Div显示边框和左上角蓝色方块选择手柄并拖动。删除AP Div选中AP Div后按Delete键。调整AP Div大小点击边框拖动控制锚点，或者在属性面板中设置。对齐AP Div按Shift键选中多个AP Div，选择“修改-排列顺序-左对齐/右对齐/上对齐/对齐下缘”菜单。修改AP Div堆叠顺序每个AP Div都有一个堆叠顺序代码（Z轴位置），代码值大的AP Div位于上层，代码值小的位于下层。通过修改此代码值可以调整AP Div的堆叠顺序。11.3.2.6 框架集新建一个空白的HTML文档后，依次选择“插入-HTML-框架”菜单，在出现的框架格式选择列表菜单中选择一种初始框架格式，如“上方及左侧嵌套”。在出现的“框架标签辅助功能属性”窗口中为每个划分的框架指定标题（名称），点