网页设计理念及工具

第1章初识DreamweaverCS31.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任务栏中的“开始”按钮，在程序组中选择“程序”|AdobeDreamweaverCS3快捷方式。1.3启动网页设计工具（2）首次启动Dreamweaver，出现“工作区设置”对话框，如图1.10所示。1.3启动网页设计工具图1.10“工作区设置”对话框1.3启动网页设计工具（3）这里选择“设计者”工作区，然后单击“确定”按钮，打开AdobeDreamweaverCS3窗口，如图1.11所示。1.3启动网页设计工具图1.11AdobeDreamweaverCS3窗口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.30Dreamweaver帮助窗口1.7获取帮助“参考”面板提供了和各种源代码相关的语法参考。1.7.2“参考”面板图1.31“参考”面板