电子商务实训教程 第9章 Dreamweaver CS3电子商务网站设计.pdf

第9 章 D re am w e av e r C S 3 电子商务网站设计  本章要点  Dreamweaver CS3 的基本操作  创建站点  使用表格布局页面  图像插入及超链接、特效制作  表格、表单和框架的应用  设计并制作完整的网页 第9 章 Dreamweaver CS3 电子商务网站设计 277 9. 1 Dreamweaver CS3 的基本操作 启动Dreamweaver CS3 软件后，用户首先看到的是该软件的开始页面，可以在此选 择新建文件的类型，或者打开最近使用的文档，如图9- 1 所示。 图9- 1 Dreamweaver CS3 开始界面 Dreamweaver CS3 的工作界面主要由5 部分组成，分别是“插入”面板、“文档” 工具栏、“文档”窗口、“属性”面板和控制面板组，如图9-2 所示。该软件的操作环境 简洁明快，功能面板伸缩自如及多文档的编辑界面，不仅可以降低了系统资源的占用， 而且还可以同时编辑多个文档，大大提高了设计效率。 控制面板组 插入面板 文档工具栏 文档窗口 面板组开关 状态栏 属性面板 图9-2 工作界面的结构 下面介绍界面中各组成部分的功能。 278 电子商务实训教程 1）标题栏：显示当前编辑文档的路径和文件名。 2 ）菜单栏：该栏包含了设计和开发网站的所有命令。 3 ）插入面板：该面板用于创建和插入对象（如表格、层、表单、文本和图像）。插 入面板中又包含“常用”、“布局”、“表单”、“数据”、“Spry”、“文本”及“收藏夹”等 面板。 4 ）文档工具栏：该栏包含一些比较常用的文档按钮，可以在不同视图，如“代码” 视图、“设计”视图和“拆分”视图 （同时显示“代码”和“设计”视图）间快速切换； 还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令及选项。 5）文档窗口：显示当前创建和编辑的文档。设计网页的工作就是在这里进行的。 6 ）面板组：面板组可以设置为浮动的面板，其中包含“CSS ”、“应用程序”、“标签 检查器”、“文件”、“框架”、“历史记录”等面板，用户也可以根据自己的习惯重新指定 其他面板。 7 ）面板组开关：用来显示和隐藏面板组。隐藏面板组状态下，可以使文档窗口最 大化地显示所有内容。 8）状态栏：位于文档窗口的下方，其左侧是显示代码标签的主要位置，在此可以 选择文档中的代码标记；右侧包含“选取工具”、“手形工具”、“缩放工具”、“设置缩放 比例”、“窗口大小”和“下载时间”等功能。 9 ）属性面板：用于查看和更改所选对象 （或文本）的各种属性。“属性”面板中的 内容根据选定的元素不同会有所不同。 9.2 实训 网站的创建与布局 9.2.1 创建站点 正式创建网站前，需要准备相关素材并策划网站的架构，其创建网站的站点是必须 的。下面介绍在Dreamweaver CS3 中创建站点的具体操作步骤。 1）在本地计算机中创建一个名为mysite 的文件夹（本例将C:\site 定义为本地站点）， 用来存放Web 站点文件。 2 ）启动Dreamweaver CS3 ，执行 【站点】｜【新建站点】命令，在弹出的 “HTML 的站点定义为”对话框中，输入站点名称 “轩飞”，如图9-3 所示。 3 ）单击【下一步】按钮，在弹出的对话框中设置是否使用服务器技术，这里选择 【否，我不想使用服务器技术】单选