第一章Dreamweaver扩展插件的安装.docVIP

Visual sitebuilder9 DIV+CSS建站手册 西安博达软件有限公司 目 录 第一章 Dreamweaver扩展插件的安装 3 （一）推荐安装要求： 3 （二）安装Dreamweaver扩展管理器 3 第二章 样式组件的基本认识 6 第三章 几种常见样式组件的编码 8 （一）编码步骤 8 （二）常用组件代码编译 11 1）网站导航 11 2）文章列表 13 3）链接列表 14 第一章 Dreamweaver扩展插件的安装 DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV+CSS是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 为了更好的在VSB产品中使用DIV+CSS创建网站，建议首先安装Dreamweaver扩展插件。下面介绍如何安装插件： （一）推荐安装要求： 浏览器：Microsoft Internet Explorer 6.0 及以上版本Dreamweaver 8以上官方完整版 （二）安装Dreamweaver扩展管理器 步骤1：查看本机安装的Dreamweaver是否已经安装了扩展管理器： 图1-1 如图1-1所示：打开帮助菜单点击“扩展管理”来打开扩展管理器。 如果已经安装请进行步骤2。 如果未安装扩展管理器请点击此网址下载并安装： Extension Manager CS6--Extension Manager CS4 Extension Manager 1.8（CS3）-- Extension Manager 1.7（Dreamweaver 8） 注意：请下载自己Dreamweaver版本对应的扩展管理器。 步骤2：安装VSB页面组件插件： 下载VSB页面组件插件：下载插件并双击安装 安装成功后，您会看在Dreamweaver上方看到图1-2或图1-3 图1-2 图1-3 步骤3：使用VSB页面组件插件 拖动VSB插件图标到需要添加组件的地方 图1-4 在弹出的组件选择窗口选择组件并点击确定就完成了组件的添加。 图1-5 第二章 样式组件的基本认识 上面介绍了实施前的准备工作，下面我们就要针对实施过程中，如何使用样式组件进行详细的讲解了。首先，我们来认识一下样式组件。 那么组件库中如何辨别样式组件？ 在文件|模板左下方的组件库中，组件缩略图旁边有个紫色的“样”字，表示该组件为样式组件，如图2-1 图2-1 当样式组件拖拽到页面上保存后，点击组件的样式配置，如图2-2。 图2-2 如上图，可以看到样式组件分为“1”“2”“3”“4”四个区域。 1：样式预览区；2：样式配置区；3：代码输出区；4：参数拖拽区。 在1区，可以看到这样的功能。如勾选了“使用模板环境预览”功能前方复选框，即可引入所在模板的相关环境进行预览，包括模板的doctype设置，引用的css样式表和js脚本。鼠标移动到右侧的“详情”可查看引入的环境，如图2-3。 图2-3 在2区，可以设置一些组件的配置属性等。 在进行组件功能编码的时候，主要在3、4区进行操作。 第三章 几种常见功能的样式翻译 认识样式组件后，我们就用结合实际的网站进行功能的翻译了。因为网站功能千变万化，在这里不能一一讲解，我们以导航，文章列表，链接列表为例进行详细演示。 （一）翻译步骤 步骤1：上传页面，使用Dreamweaver编辑 图3-1 图3-2 首先，新建模板，选用本地HTML源文件，进行静态页面的上传，如图3-1；然后点击文件|模板页面设计状态中的“”如图3-2，将页面导入本地Dreamweaver中。 步骤2：在Dreamweaver中提取该功能代码 图3-3 选中要翻译的功能区域，在Dreamweaver中提取该功能代码，如图3-3。 步骤3：在Dreamweaver中插入样式组件 图3-4 图3-5 图3-6 如图3-4和3-5所示，在Dreamweaver中，找到需要翻译功能的位置，使用VSB扩展插件，选择样式组件插入。此时，页面上会如图3-6所示，生成相应的组件代码。保存修改，在站群管理平台提交修改结果即可。 步骤4：将页面代码，粘贴到DIV组件中，进行翻译 图3-7 将代码粘贴到“组件模板”中，使用循环等方式，替换原代码，实现现有功能，如图3-7。 步骤5：进行实际样式预览 图3-8 （二）常用组件代码翻译 1）网站导航 翻译后 1、灰色的部分是原导航的样式属性，保留； 2、黄色的部分是一级导航，使用list循环指令； #list list_menu as menu /#list 接下来，栏目的显示直接使用代码拖拽 l