DW网页设计

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