divcss后勤管理处examdiv模版包建站手册

1、Visual sitebuilder9DIV+CSS 建站手册西安博达目录第一章 Dreamweaver 扩展插件的安装3（一）安装要求：3（二）安装 Dreamweaver 扩展管理器3第二章 样式组件的基本认识6第三章 几种常见样式组件的编码8（一）编码步骤8（二）常用组件代码编译111）导航112）文章列表133）列表14第一章 Dreamweaver 扩展插件的安装DIV+CSS 是标准（或称“WEB 标准”）中常用术语之一，DIV+CSS 是一种网页的布局方法，这一种网页布局方法有别于传统的 HTML 网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。在 X

2、HTML设计标准中，不再使用表格，而是采用 DIV+CSS 的方式实现各种定位。为了更好的在 VSB 产品中使用 DIV+CSS 创建，建议首先安装 Dreamweaver 扩展插件。下面介绍如何安装插件：（一）安装要求：浏览器：ernet Explorer 6.0及以上版本Dreamweaver 版本：建议 Dreamweaver 8 以上完整版（二）安装 Dreamweaver 扩展管理器步骤 1：查看本机安装的 Dreamweaver 是否已经安装了扩展管理器：图 1-1如图 1-1 所示：打开帮助菜单点击“扩展管理”来打开扩展管理器。如果已经安装请进行步骤 2。如果未安装扩展管理器此并

3、安装：ExtenManager CS6-ExtenManager CS4ExtenManager 1.8（CS3）-ExtenManager 1.7（Dreamweaver8）注意：请自己 Dreamweaver 版本对应的扩展管理器。步骤 2：安装 VSB 页面组件插件：VSB 页面组件插件：插件并双击安装安装成功后，您会看在 Dreamweaver 上方看到图 1-2 或图 1-3图 1-2图 1-3步骤 3：使用 VSB 页面组件插件如果安装出现问题，有可能你安装的是非完整版的绿色版、简洁版等，解决方法请看这里。1、先打开 dreamweaver 的扩展管理器；2、手动安装已经的扩展插件

4、；3、重启 dreamweaver 即可。拖动 VSB 插件图标到需要添加组件的地方图 1-4在弹出的组件选择窗口选择组件并点击确定就完成了组件的添加。图 1-5第二章 样式组件的基本认识上面介绍了实施前的准备工作，下面就要针对实施过程中，如何使用样式组件进行详细的讲解了。首先，来认识一下样式组件。那么组件库中如何辨别样式组件？在文件|模板左下方的组件库中，组件缩略图旁边有个紫色的“样”字，表示该组件为样式组件，如图 2-1图 2-1当样式组件拖拽到页面上保存后，点击组件的样式配置，如图 2-2。图 2-2如上图，可以看到样式组件分为“1”“2”“3”“4”四个区域。1：样式预览区；2：样式配

5、置区；3：代码输出区；4：参数拖拽区。在 1 区，可以看到这样的功能。如勾选了“使用模板环境预览”功能前方复选框，即可引入所在模板的相关环境进行预览，包括模板的 doctype设置，的css 样式表和js。鼠标移动到右侧的“详情”可查看引入的环境，如图 2-3。图 2-3在 2 区，可以设置一些组件的配置属性等。在进行组件功能编码的时候，主要在 3、4 区进行操作。第三章 几种常见样式组件的编码认识样式组件后，就用结合实际的进行功能的编码了。因为功能千变万化，在这里不能一一讲解，以导航，文章列表，列表为例进行详细演示。（一）编码步骤步骤 1：上传页面，使用 Dreamweaver 编辑图 3-

6、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 所示，生成相应的组件代码。保存修改，在站群

7、管理提交修改结果即可。步骤 4：将页面代码，粘贴到 DIV 组件中，进行编码图 3-7将代码粘贴到“组件模板”中，使用循环等方式，替换原代码，实现现有功能，如图 3-7。步骤 5：进行实际样式预览图 3-8（二）常用组件代码编译1）导航编码后1、灰色的部分是原导航的样式属性，保留；2、黄色的部分是一级导航，使用list 循环指令； $.showTitle$ej.showTitle学院简介学院首 页学院概况接下来，栏目的显示直接使用代码拖拽$.showTitle3、蓝色的部分是一级栏目的子栏目，首先判断是否有子栏目，这时需要用if 判断指令；然后，子栏目列表的显示再嵌套用list 循环指令在li

8、st 中显示子栏目的语句可以直接使用代码拖拽，方法同上，需要注意的是变量一致。$ej.showTitle学院介绍首页2）文章列表编码后1、灰色的部分是原列表的样式属性，保留；2、黄色的部分是文章列表的显示，使用list 循环指令；接下来，标题和时间的显示直接使用代码拖拽 $news.showTitle$news.showDate2012-05-12 科学道德和学设宣讲系列 2012-05-12 关于领取校 园一卡 通 2012-05-12 关于开展 2012 西安交通大学本科生就读体2012-05-12 西安交通大学东西校区老化线路改造2012-05-12 关 于 杨 瑞 英 等 任 职 的

9、2012-05-12关于认证系统升级和服务备案的$news.showTitle$news.showDate3、红色的部分是文章列表中必备的一些属性，建议添加，不加也没有问题；=_bl文章的打开方式title=$news.tipsTitleHtml 元素的“title”属性，显示提示3）列表编码后1、灰色的部分是原2、黄色的部分是的样式属性，保留；循环，使用list 循环指令；接下来，标题的显示直接使用代码拖拽$link.showTitle&;教师个人主页&;校内门户&;邮件系统2012-05-12关于detail.html$link.showTitle3、绿色的部分是在列表中间的间隔线，这时需要用if 指令