网页设计理念及工具.pptVIP

第 1章初识Dreamweaver CS3 1.1 网页设计理念及工具 主页的理念是你对自己主页的定位。 1.1.1 网页设计理念 1.1 网页设计理念及工具 一般按工作方式可以将网页制作工具划分为两类: 一类是所见即所得的编辑工具，另一类是直接编写HTML源代码的软件。 1.1.2 网页设计工具 1.2 网页中的基本元素 1. 文字 文字是网页的主体，是传达信息的最重要的方式。 1.1.2 网页设计工具 1.2 网页中的基本元素 2. 图像 采用图像可以减少纯文字给人的枯燥感，巧妙的图像组合可以带给用户美的享受。 1.1.2 网页设计工具 1.2 网页中的基本元素 3. 音频 将多媒体引入网页，可以在很大程度上吸引浏览者的注意。 1.1.2 网页设计工具 1.2 网页中的基本元素 4. 视频 视频传达的信息形象生动，能给人深刻的印象。 常见的网上视频文件有AVI，RM等。 1.1.2 网页设计工具 1.2 网页中的基本元素 5. 动画 动画是网页中最吸引眼球的地方，好的动画能够使页面显得活泼生动，达到“动静相宜”的效果。 1.1.2 网页设计工具 1.2 网页中的基本元素 6. 版式 版式设计是整个页面制作的关键。版式最常见的有海报型和表格型。 1.1.2 网页设计工具 1.2 网页中的基本元素 7. 色彩 色彩是一种奇怪的东西，它美丽而丰富，能唤起人类的心灵感知。 1.1.2 网页设计工具 1.2 网页中的基本元素 8．链接和路径 当用鼠标单击网页上的一段文本（或一张图片）时，如果可以打开网络上一个新的地址，就代表该文本（或图片）上有链接。 路径，简而言之就是文件的存放位置。 1.1.2 网页设计工具 1.3 启动网页设计工具 启动网页设计工具的具体操作步骤如下： （1）单击Windows任务栏中的“开始”按钮，在程序组中选择“程序”| Adobe Dreamweaver CS3快捷方式。 1.3 启动网页设计工具 （2）首次启动Dreamweaver，出现“工作区设置”对话框，如图1.10所示。 1.3 启动网页设计工具 图1.10 “工作区设置”对话框 1.3 启动网页设计工具 （3）这里选择“设计者”工作区，然后单击“确定”按钮，打开Adobe Dreamweaver CS3窗口，如图1.11所示。 1.3 启动网页设计工具 图1.11 Adobe Dreamweaver CS3窗口 1.3 启动网页设计工具 （4）如果需要重新选择工作区，可以在菜单命令“窗口”|“工作区布局”的级联菜单中进行选择。 1.4 使用开始页 开始页分为5个部分：“打开最近的项目”、“新建”、“从模板创建”、“扩展”以及“帮助”。 1.5 窗口布局 图1.18 文档编辑窗口 1.5 窗口布局 在编辑窗口的顶部是菜单栏，几乎所有的功能都可以通过这些菜单来实现。 菜单栏包括 “文件”菜单 ，“编辑”菜单 ，“查看”菜单 ，“插入记录”菜单 ，“修改”菜单 ，“文本”菜单 ，“命令”菜单，“站点”菜单，“窗口”菜单 和“帮助”菜单。 1.5.1 菜单栏 1.5 窗口布局 1.5.2 “插入”工具栏 图1.19 “插入”工具栏 1.5 窗口布局 在Dreamweaver窗口中还有很多可以展开和折叠的面板。 面板是网页设计软件中的亮点，利用它能很方便地完成大多数的属性设定。 1.5.3 面板与面板组 1.5 窗口布局 根据位置的不同，这些面板分为两大部分： 一部分是窗口底部的“属性”面板；另一部分是窗口右侧的CSS、“应用程序”、“标签检查器”、“文件”等面板组。 1.5.3 面板与面板组 1.6 网页编辑视图 图1.27 编辑窗口上的工具栏 1.6 网页编辑视图 1. 可视化视图 默认情况下，网页将以可视化视图进行显示。 在这种视图下，看到的网页外观和浏览器中看到的基本上是一致的。 1.6 网页编辑视图 2. 源代码视图 如果想查看或编辑源代码，可以单击工具栏上的“代码”按钮进入源代码视图。 1.6 网页编辑视图 3. 拆分视图 在这种视图下编辑窗口被分割成了上下两部分。上面显示的是源代码，下面显示的是可视化编辑窗口。 1.7 获取帮助 1.7.1 帮助窗口 图1.30 Dreamweaver帮助窗口 1.7 获取帮助 “参考”面板提供了和各种源代码相关的语法参考。 1.7.2 “参考”面板 图1.31 “参考”面板