2445Dreamweaver网页设计
《Dreamweaver网页设计》-第5章
站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径。 当在处理使用多个服务器的 Web 站点，或者在使用承载 有多个不同站点的服务器时，则可能考虑使用这种类型的 路径。不过，如果您不太熟悉此类型的路径，最好使用上 面提到的相对路径。 站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示 站点根文件夹。比如，/inf/info.html 是文件的站点根目录 相对路径，该文件位于站点根文件夹的inf子文件夹中。 在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是 指定链接的最佳方法。当移动含有根目录相对链接的文档 时，不需要更改这些链接；当移动该HTML文件后，其相 关文件链接依然有效。 但是，如果移动或重命名根目录相对链接所链接的文档，即 使文档彼此之间的相对路径没有改变，仍必须更新这些链 接。例如，如果移动某个文件夹，则指向该文件夹中文件 的所有根目录相对链接都必须更新。
当要链接到与当前文档处于同一文件夹中的文档时，只需 输入文件名。比如要从 aboutus.htm 链接到 yewu.htm （两个文件在同一文件夹“bm”中，且目录深度相同）， 则其相对路径为yewu.htm。 当要链接到当前文档所在文件夹的子文件夹文档时，先要 有子文件夹名称，然后跟符号“/”，在加文件名。比如要 从 index.html 链接到 yewu.htm（两个文件在同一文件夹 “eshop”中，index.html处于父目录中，而yewu.htm处于 子目录bm中），则其相对路径为bm/yewu.htm。 反过来，当要链接到当前文档所在文件夹的父文件夹的文 档时，在文档名前要加“../”。比如要从yewu.htm链接到 index.html（两个文件在同一文件夹“eshop”中， index.html处于父目录中，而yewu.htm处于子目录bm中）， 则其相对路径为../ index.html。 当要链接到非同一目录的文档时，要先加“../”，后加文件 夹名再加链接到的文件名。比如要从 tupian.htm 链接到 aboutus.htm（两个文件在不同的目录中，tupian.htm在 “album”目录中，aboutus.htm在“bm”目录中），则其 相对路径为../bm/ aboutus.htm。
Dreamweaver网页设计基础知识
网页设计基础知识一、认识网页1.网页分类：静态网页、动态网页◆静态网页：是标准的HTML文件，它是采用HTML（超文本标记语言）编写的，是通过HTTP（超文本传输协议）在服务端和客户端之间传输的纯文本文件，其扩展名为.html或htm◆动态网页：在多方面与静态网页是一致的，它们都是无格式的ASCII码文件，都包含HTML代码，都可以包含用脚本语言（比如JavaScript或VBScript）编写的程序代码，都存放在Web服务器上，收到客户请求后都会把响应信息发送给Web浏览器，根据采用Web应用技术不同，动态网页文件的扩展名不同，如ASP（使用Active Server Pages）技术，其中扩展名为.asp；使用JSP（Java ServerPages）技术时的扩展名为.jsp等等。
2.URL（统一资源定位器，简称网址）：其格式是【协议名://主机名/目录/....../文件名】，如；由于网址是最常用的协议是http是默认的协议，所以可当刮简写为；ftp://123.52.3.20；，3.网页（Web Page）：打开网站所看到的网页，一个网站可以有成千上万个网页。
4.主页（Home Page）：打开网站时看到的第一个网页，简称首页。
它默认的文件名通常是index.htm、index.html、default.htm、default.html、default.sap、index.asp等等二、网页设计基本原则1.明确建立网站的目标和用户需求2.总体设计方案主题鲜明3.网站的版式设计4.网页形式与内容相统一5.三维空间的构成6.多媒体功能的使用7.网站测试和改进8.合理运用新技术三、网站制作流程1.选择网站主题2.规则网站目和目录结构◆对收集的资料进行分类，并为其建立专门的栏目，各栏目的主题围绕网站主题展开，栏目名称具有概括性，各栏目的名称字数最好相同。
规划网站栏目的过程实际上是对网站内容细化，一个栏目有可能就是一个专栏网页。
学习使用Dreamweaver进行网页设计
学习使用Dreamweaver进行网页设计在进行网页设计的过程中，学习使用Dreamweaver是一个非常重要的步骤。
Dreamweaver是一款功能强大的网页设计软件，可以帮助我们创建专业水平的网页并实现各种交互效果。
本文将从安装Dreamweaver开始，逐步介绍如何运用Dreamweaver进行网页设计，并分享一些实用的技巧和注意事项。
1. 安装DreamweaverDreamweaver是Adobe公司推出的一款付费软件，用户需要前往官方网站进行购买并下载，然后按照指引进行安装。
安装完成后，打开软件，我们就可以开始使用Dreamweaver进行网页设计了。
2. 创建新网页在Dreamweaver的主界面中，选择“文件”菜单，然后点击“新建”选项，即可创建一个新的网页文件。
在弹出的对话框中，我们可以选择不同的网页模板或者从头开始创建一个空白页面。
3. 设计网页布局Dreamweaver提供了丰富的工具和功能，可以帮助我们设计网页的布局。
比如，我们可以使用“盒模型工具”来绘制网页的不同区块，使用“文本工具”添加文字内容，使用“图片工具”插入图像等等。
通过简单的拖拽和调整，我们可以自由地设置网页的结构和样式。
4. 编辑网页内容在Dreamweaver中，我们可以直接在设计视图下编辑网页的内容。
通过选中不同的元素，可以修改文字的字体、颜色、大小，插入超链接，调整图片的大小和位置等等。
同时，Dreamweaver还提供了代码视图，在这个视图下，我们可以直接编辑HTML、CSS和JavaScript代码，实现更加精细的调整和功能扩展。
5. 添加交互效果除了基本的布局和内容编辑，Dreamweaver还支持添加交互效果，使网页更加生动和有趣。
我们可以使用Dreamweaver内置的JavaScript 库，如jQuery，来实现点击事件、滑动效果、图片轮播等。
此外，Dreamweaver还提供了内置的视觉编辑器，方便我们设置和编辑交互效果的属性。
利用Dreamweaver进行网页设计
利用Dreamweaver进行网页设计Chapter 1: Introduction to DreamweaverDreamweaver是Adobe公司开发的一款专业的网页设计软件。
它拥有强大的设计和开发工具，方便用户创建符合网页标准的精美网页。
本章将介绍Dreamweaver的基本功能以及如何使用这些功能进行网页设计。
首先，Dreamweaver提供了一个直观的用户界面，使得用户可以轻松地创建、编辑和管理网页。
它的各种功能都以图标和菜单的形式呈现，让用户可以方便地找到所需的功能。
在Dreamweaver中，用户可以自由布局网页的结构，添加文本、图像、视频和其他媒体元素，并通过使用CSS样式来美化网页。
Chapter 2: Layout Design with Dreamweaver网页的布局设计是网页设计的基础，也是影响用户体验和页面可访问性的重要因素。
在Dreamweaver中，通过使用所见即所得的设计模式，用户可以轻松地创建网页布局。
用户可以选择不同的布局工具，如网格系统、定位布局和弹性布局，根据需要创建网页的框架。
此外，Dreamweaver还提供了一些预设模板和设计元素，可以帮助用户快速创建专业的网页布局。
Chapter 3: CSS Styling in DreamweaverCSS是控制网页外观的重要技术。
在Dreamweaver中，用户可以利用CSS样式来控制网页的字体、颜色、背景、布局等方面。
通过使用Dreamweaver的CSS面板，用户可以轻松地添加、编辑和管理CSS样式。
Dreamweaver还提供了一些预设的CSS规则和样式，使得用户可以快速应用到网页上。
用户还可以创建自定义的CSS样式表，以便在整个网站中使用。
通过CSS样式的使用，用户可以使网页呈现出一致且吸引人的外观。
Chapter 4: Interactive Elements with Dreamweaver与静态网页相比，带有交互元素的网页可以增加用户的参与度和互动性。
Dreamweaver网页设计从零开始
Dreamweaver网页设计从零开始Chapter 1：认识DreamweaverDreamweaver是一款由Adobe公司开发的专业网页设计软件。
它集成了丰富的功能和工具，为用户提供了一种简便而高效的方式来创建和编辑网页。
Dreamweaver支持多种开发语言，包括HTML、CSS、JavaScript和PHP等，使得用户可以灵活地设计和开发网页。
Chapter 2：Dreamweaver的基本设置在开始使用Dreamweaver之前，我们需要进行一些基本的设置。
首先，我们可以选择合适的界面布局，例如工作区布局、代码布局或设计布局，以便于我们更好地编写和编辑代码。
其次，我们可以根据自己的需求设置代码提示和自动补全功能，提高工作效率。
Chapter 3：创建网页模板在设计网页时，使用模板可以让我们更加方便地保持风格的一致性。
Dreamweaver提供了创建网页模板的功能。
我们可以先设计一个主模板，包含网页的共同元素，例如页眉、页脚和导航栏等。
然后，我们可以基于这个主模板创建其他页面，只需要修改页面中的内容，而不必每次都从头开始设计。
Chapter 4：网页布局设计网页的布局设计是网页设计中的重要一环。
Dreamweaver提供了多种布局工具和功能，例如网格系统和响应式布局。
网格系统可以帮助我们将网页划分为几个等分，有助于页面元素的排列和对齐。
而响应式布局可以根据不同的设备屏幕大小自动调整网页的布局，保证用户在不同设备上都能有良好的浏览体验。
Chapter 5：网页元素的设计与编辑在Dreamweaver中，我们可以方便地设计和编辑网页的元素。
例如，我们可以使用图像编辑工具对图片进行裁剪、调整大小和优化处理，以便网页加载更快。
我们还可以使用CSS样式对文字、链接和按钮等元素进行美化。
此外，Dreamweaver还提供了预设的网页元素模板，可以快速插入常用元素，如表格、表单和轮播图等。
Chapter 6：添加动态效果动态效果能够增加网页的互动性和视觉效果。
Dreamweaver网页设计.
为网页添加表单
在Dreamweaver 8中，表单是用来输入数据或与网站进 行交互的工具。可以将整个网页创建成一个表单网页，也可 以在网页的部分区域中添加表单，其创建方法都相同。
设置表单属性
将插入点定位到插入的表单中，打开属性面板可 以对其属性进行设置。
模板与资源列表
使用模板 • 建立模板 – 将现有网页保存为模板 – 创建空白模板 • 模板的编辑 – 创建可编辑区域 – 取消对可编辑区域的标记 – 更改可编辑区域的名称 • 基于模板创建网页 • 管理模板
CSS样式
CSS（Cascading Style Sheets）样式又叫层叠样式，使 用它可以对网页中的布局元素，如表格、字体、颜色、背景、 链接效果和其他图文效果实现更加精确的控制。CSS样式不仅 可以在一个页面中使用，而且可以用于其他多个页面。
类型设置
自定义CSS样式的应用
在CSS样式中的HTML标签样式和CSS选择器样 式是自动应用的，只有自定义层叠样式需要用户手动 操作。
创建超级链接
创建文本超级链接 文本超级链接是最常见的超级链接，通过使用鼠标点 击文本即可从一个网页跳转到另一个网页。
创建锚链接
在制作网页时，为了达到跳转到网页固定位置的目的， 可以使用锚链接。通过对网页中指定位置的命名，利用超级链 接打开目标网页时可直接跳转到相应的命名位置上。 创建命名锚记
链接命名锚记
添加水平线
在文档编辑区将插入点定位到所需位置，选择[插入 ][HTML][水平线]菜单命令或单击“插入”栏中的“HTML”选项 卡在其中单击 按钮即可添加水平线。
设置字体外观
用户也可对属性面板的“字体”下拉列表框中的字体 列表重新编辑。
有序列表 有序列表又称为编号列表，是有一定排列顺序的列 表，一般前面有数字前导字符，其中前导字符可以 是阿拉伯数字、英文字母或罗马数字等。 无序列表 无序列表又称为项目列表，是一系列无顺序级别关 系的项目文本组成的列表，一般前面是用项目符号 作为前导字符。
Dreamweaver网页设计第一章
1.4 层的使用
1.4.1 层的基本概念 图层是一个独立于网页的区块，它允许被放置在网页中的任何位 置。图层中可以放置文本、图像、表单、对象插件，甚至可以放 入其他层。 层的主要特性是可以在网页中上下浮动，即可以在网页中改变层 的位置。另外，层还可以重叠，做出网页中的文档或图片重叠的 效果；可以被显示或隐藏，做出层内容交替显示的效果。
1.4 层的使用
1.4.2 绘制层并设置层属性
绘制层：【插入】 →【布局对象】 →【AP Div】，然后在需要的地方 用鼠标绘制出层。 层属性设置同样可以通过属性面板进行修改，其中“可见性”可以设 置层是否隐藏，合理命名层ID可以有效管理并提高效率。
1.4 层的使用
1.4.3 层的嵌套 层的嵌套就是指在一个层中嵌入其他的层，新嵌入的层称为 子层，原来的层称为父层。子层与父层有如下特点：
课程设置
模块一：静态网页（HTML）的设计与制作
模块二：动态网页（ASP）与数据库（access2003） 模块三：综合应用实例
第一章
走进Dreamweaver
1.1 Dreamweaver的基本操作 1.2 表格布局 1.3 图片应用与超链接 1.4 层的使用
1.5 框架技术
1.1 Dreamweaver的基本操作
• • • • 子层与父层可以重叠，也可以不重叠。 子层大小可超过父层。 子层的可见性与父层保持一致。 子层与父层的相对位置保持一致。
创建嵌套层的方法如下： 先创建父层，将光标放在父层中，然后，在Dreamweaver CS4主窗口中，单击 菜单【插入】→【布局对象】→【AP Div】，即可创建嵌套层，新插入的层为 子层。 利用“层”面板创建嵌套层，在“层”面板中选中作为子层的层，按住【 Shift】键，将选中的层拖动到要作为父层的层上，释放鼠标即可创建嵌套层 ，这时子层与父层以连接线相连，表明其从属关系。单击父层左边的号可以展 开其所有子层，单击号可以折叠其子层。
如何用Dreamweaver设计动态网页
如何用Dreamweaver设计动态网页第一章：介绍动态网页是指可以根据用户的交互或者后台数据进行动态更新的网页。
与静态网页相比，动态网页可以提供更丰富的用户体验和更灵活的功能。
Dreamweaver是一个专业的网页设计工具，提供了丰富的功能和易于使用的界面，使得设计动态网页变得更加简单。
第二章：设定数据库连接为了实现动态网页的功能，首先需要将网页和数据库进行连接。
在Dreamweaver中，可以通过服务器面板和数据库面板进行设定。
服务器面板允许我们选择所用的服务器技术，例如ASP、PHP等。
数据库面板则用于设置数据库连接，包括主机名、用户名、密码等信息。
完成这一步骤后，就可以在网页中使用数据库相关的功能。
第三章：使用服务器行为Dreamweaver提供了一系列的服务器行为，用于实现动态网页的交互功能。
通过服务器行为，我们可以实现网页表单的数据提交、用户登录验证、数据查询和显示等功能。
例如，可以通过服务器行为将表单数据保存到数据库中，或者根据用户的选择显示不同内容。
这些功能可以通过简单拖拽和设置即可实现，无需编写复杂的代码。
第四章：使用动态元素除了服务器行为外，Dreamweaver还提供了一系列的动态元素，用于实现动态网页的视觉效果。
例如，我们可以使用动态表格来显示数据库中的数据，使用动态图像来实现图片的切换效果，使用动态文本来根据条件显示不同内容等。
这些动态元素可以在设计视图中进行拖拽和设置，使得网页设计变得更加直观和高效。
第五章：优化网页性能在设计动态网页时，需要注意网页性能的优化。
由于动态网页通常需要与数据库进行频繁的数据交互，因此需要合理使用数据库查询、缓存和分页等功能，避免不必要的性能损耗。
同时，还需要注意网页的加载速度和响应时间，避免用户长时间等待。
Dreamweaver提供了一些工具和功能，可以帮助我们进行性能分析和优化，确保网页的流畅运行。
第六章：移动设备适配随着移动设备的普及，越来越多的用户使用手机和平板电脑访问网页。