搜索
第2章网页设计基础——初识Dreamweaver82.1Dreamweaver简介Dreamweaver主要特点和功能所见即所得将设计和代码编辑器和二为一内置的图形编辑程序节省开发时间界面操作方便、功能强大完美的CSS支持完整的集成开发环境2.1Dreamweaver简介Dreamweaver主要特点和功能所见即所得行为工具丰富布局视图将表格和层结合实现页面排版强大的网站管理功能浏览器兼容检查常见格式的外部文档、代码可以嵌入Dreamweaver8的安装与启动Dreamweaver8的安装Dreamweaver8的启动方法：开始→程序→Micromedia→Dreamweaver8初次启动1、工作布局的分类设计器编辑器双重屏幕【窗口】——工作区布局2、起始页3、工作区布局主菜单插入工具栏编码工具栏拆分视图属性面板文档工具栏代码编辑窗口设计窗口面板组状态栏3、工作区布局1.标题栏显示“MacromediaDreaweaver8”。如果新建或者打开网页，在后面会显示该网页的信息，如网页标题、所在目录以及文件名称。2.菜单栏Dreaweaver8菜单分为10种，包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。3.“插入”工具栏用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。3、工作区布局“常用”：可以创建和插入最常用的对象，例如图像和表格。“布局”：可以插入表格、div标签、层和框架。您还可以从三个表格视图中进行选择“标准”（默认）、“扩展表格”和“布局”。“表单”：包含用于创建表单和插入表单元素的按钮。“文本”：可以插入各种文本格式设置标签和列表格式设置标签。“HTML”：可以插入用于水平线、头内容、表格、框架和脚本的HTML标签。“应用程序”：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。“Flash元素”：可以插入Flash元素。“收藏”：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。3、工作区布局4.文档工具栏这些按钮可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。代码视图：仅在“文档”窗口中显示“代码”视图。设计视图：仅在“文档”窗口中显示“设计”视图。拆分视图：在“文档”窗口同时显示“代码”视图和“设计”视图。标题：可以直接在此处为文档设定标题，它将显示在浏览器的标题栏中。没有浏览器/检查错误：可以检查跨浏览器兼容性。在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。文件管理：显示“文件管理”弹出菜单。刷新：在“代码”视图中进行更改后刷新文档的“设计”视图。视图选项：为“代码”视图和“设计”视图设置选项。3、工作区布局5.“文档”窗口“文档”窗口用于显示当前创建和编辑的文档。6.“属性”面板用于查看和更改所选对象或文本的各种属性。网页的内容形式多样，任何一种形式都可以称之为对象，比如：文字、图像、表格等。一般网页中的对象都有属性，如文字的字体、颜色、字号等，图像的高、宽、链接等。用户可以在属性面板中设置对象的属性，如图所示。属性面板的设置项目会根据选取对象的不同而变化。3、工作区布局7.“浮动面板组”“浮动面板组”用于分组在某个标题下面的相关面板的集合，节省屏幕空间。用鼠标单击面板组左边的小三角可以折叠或者展开一个浮动面板，在浮动面板组最左边有一个折叠按钮，可以展开或者收缩所有面板,如图所示。折叠按钮3、工作区布局8.其他工具栏除前面介绍的工具栏外，Dreamweaver8还提供了样式呈现、标准和编码工具栏。选择“查看”→“工具栏”命令，在“工具栏”子菜单中勾选或者取消工具栏，可以改变工具栏的显示或隐藏方式。9.状态栏状态栏提供和创建文档有关的其它信息，显示标签选择器，选取按钮，手型工具，缩放工具，文档大小，下载时间等如图所示。3、工作区布局（1）标签选择器显示环绕当前选定内容的标签的层次结构，单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击body可以选择文档的整个正文。（2）选取按钮、手型工具、缩放工具按钮。分别用来选取对象、移动页面工作区域和缩放页面。按住ALT键，可以使用缩放工具缩小页面工作区域。（3）文档比例若要使页面看起来效果更好，可以单击下拉列表框右侧的小箭头，在弹出的下拉列表中选择一个比例。（4）窗口大小用来将“文档”窗口的大小调整到预定义或自定义的尺寸。“窗口大小”的右侧是页面的文档大小和估计下载时间。2.2创建和编辑本地站点站点概述站点：实质上是一个文件夹。文件夹中涵盖一系列文档，这些文档通过各种链接关联起来，利用浏览器就可以实现对整个网站的浏览。本地站点远程站点2.2创建和编辑本地站点1、创建本地站点（1）在菜单栏中选择“站点”→“新建站点”命令，打开“未命名站点l的站点定义为”对话框，如图所示。注意：站点的名称是站点的标识。站点名几乎可以由任何字符组成，但是不包括“/”、“\”、“?”、“”、“”、“:”、“∣”、“”等字符。2.2创建和编辑本地站点（2）单击“下一步”按钮，可以设置该站点需要用到的服务器技术，因为此时新建的是静态站点，应当选择“否，我不想使用服务器技术”，如图所示。2.2创建和编辑本地站点（3）单击“下一步”按钮,可以设置站点的编辑方式，如图所示。在对话框中选择“编辑我的计算机上的副本，完成后再上传到服务器”，在“您将文件存储在计算机上的什么位置？”文本框中设置本地站点文件夹的地址。2.2创建和编辑本地站点（4）单击“下一步”按钮，进入“站点定义”对话框设置远端站点，先选“无”，等网站建设完成后再进行设置。如图所示。2.2创建和编辑本地站点（5）单击“下一步”按钮，进入“站点定义”对话框的总结，如图2.13所示。该对话框列出了刚才设置的所有主要内容，如果发现有错误，可以单击“上一步”返回修改；如果没有问题，单击“完成”按钮，结束“站点定义”对话框的设置。2.2创建和编辑本地站点2、站点管理1.编辑站点（1）选择“站点”→“管理站点”命令，打开站点管理对话框。如图2.14所示。2.删除站点3.复制站点2.2创建和编辑本地站点3、站点文件与文件夹①创建文件与文件夹创建文件夹就是构思网站目录结构的过程，通常文件夹代表网站的子栏目。②移动和复制文件与文件夹③重命名文件与文件夹④删除文件与文件夹2.2创建和编辑本地站点3、站点文件与文件夹⑤设置首页文件⑥编辑文件⑦刷新文件,[站点]-“管理站点”-“编辑”—“高级”标签-自动刷新本地文件列表⑧使用文件面板本地视图、远程视图、测试服务器、地图视图信息栏站点列表工具栏面板菜单栏站点下拉列表2.3网页文件的基本操作1、创建、打开和保存网页文件1.创建文档通过Dreamweaver8文件创建新文档，执行以下操作：选择“文件”→“新建”，即出现“新建文档”对话框。如图2.20所示。“常规”选项卡已被选定。从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。2.3网页文件的基本操作2.保存文档创建新文档后，需要保存文档，执行以下操作：（1）选择“文件”→“保存”；或者按Ctrl+S。（2）在出现的对话框中，定位到要用来保存文件的文件夹。（3）在“文件名称”文本框中，键入文件名。不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头、不要使用特殊字符（如￥）或标点符号（如冒号、斜杠或句号）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。（4）单击“保存”。2.3网页文件的基本操作3.打开现有文档在Dreamweaver8中可打开现有Web页或基于文本的文档，即使它们不是用Dreamweaver8创建的。可打开该文档并用Dreamweaver8在“设计”视图或“代码”视图中编辑该文档。打开现有的文件，请执行以下操作：（1）选择“文件”→“打开”，出现“打开”对话框。（2）定位到并选择要打开的文件。（3）单击“打开”按钮。2.3网页文件的基本操作2、设置网页的页面属性打开“页面属性”对话框有三种方法：①Dreamweaver8的编辑窗口中，选择“修改”→“页面属性”命令。②在文档（设计）窗口右击，在弹出的快捷菜单中选择“页面属性”。③在文档下方的属性面板中，单击“页面属性”按钮。2、设置网页的页面属性设置外观设置链接设置标题设置标题编码设置跟踪图像3、设置网页元素的颜色网络安全色网页安全色是指以256色模式运行时，无论在Windows还是在Macintosh系统中，在NetscapeNavigator和MicrosoftInternetExplorer中的显示相同的颜色。设置网页元素颜色在对话框或“属性”面板中单击颜色框，出现颜色选择器，如图所示。3.定义默认文本颜色在“页面属性”对话框中为常规文本、链接、访问过的链接和活动链接定义默认颜色，或者选择预设配色方案定义页面背景和文本颜色。若要定义默认文本颜色，执行下列操作之一：选择“修改”→“页面属性”，然后为“文本颜色”、“链接颜色”、“访问过的链接”和“活动链接”选项选择颜色。4、网页文本的编辑1.插入文本的方法在网页中插入文本有3种方法：（1）直接输入文本。（2）复制文本。（3）导入已有的WORD文档。选择“文件”→“导入”→“WORD文档”命令，在弹出的导入WORD文档对话框中，选择要导入的WORD文档，如图所示。4、网页文本的编辑2.设置段落格式设置段落格式执行以下操作：（1）将插入点放在段落中，或者选择段落中的一些文本。（2）使用“文本”→“段落格式”子菜单，如图2.30所示；或“属性”面板中的“格式”弹出式菜单，如图2.31所示，选择某段落格式4、网页文本的编辑3.对齐文本若要对齐文本，执行以下操作：（1）选择要对齐的文本，或者只需将指针插入到文本开头。（2）单击“属性”面板中的对齐选项（“左对齐”、“右对齐”或“居中对齐”），或者选择“文本”→“对齐”，然后选择对齐命令，如图2.32所示。4、网页文本的编辑若要缩进文本和取消缩进，执行以下操作：（1）将插入点放在要缩进的段落中。（2）单击“属性”面板中的“文本缩进”或“文本凸出”按钮，也可以选择“文本”→“缩进”或“凸出”。4、网页文本的编辑4.段落与换行需要添加段落时，可以按Enter键（添加p/p标签要添加换行符（添加br标签），可以选择以下操作中的一种：按Shift+Enter键。在“插入”栏中选择“文本”类别，选择“字符”菜单，然后单击“换行符”图标。选择“插入”→“HTML”→“特殊字符”→“换行符”。4、网页文本的编辑5.使用水平线要创建水平线，执行以下操作：（1）在“文档”窗口中，将插入点放在要插入水平线的位置。（2）执行下列操作之一：选择“插入”→“HTML”→“水平线”。在“插入”栏的“HTML”类别中，单击“水平线”按钮要修改水平线，执行以下操作：（1）在“文档”窗口中，选择水平线。（2）选择“窗口”→“属性”打开“属性”面板，如图2.35所示，然后根据需要对属性进行修改。4、网页文本的编辑6.创建项目列表和编号列表若要创建新列表，执行以下操作：（1）将插入点放在要添加列表的位置，然后执行下列操作之一：单击“属性”面板中的“项目列表”或“编号列表”按钮。选择“文本”→“列表”，然后选择所需的列表类型：“项目列表”、“编号列表”或“定义列表”。（2）键入列表项目文本，然后按Enter键创建下一个列表项目。（3）若要完成列表，按两次Enter键。4、网页文本的编辑6.创建项目列表和编号列表使用现有文本创建列表，执行以下操作：（1）选择一些段落。（2）单击“属性”面板中的“项目列表”或“编号列表”按钮，或选择“文本”→“列表”