1、思路
首先,您是网站制作人员,请保证至少需要熟悉Dreamweaver,熟悉html,至少可以保证您或者您的团队可以完成一个完全静态页面的网站。
其次,请和您的委托人员多沟通。网站的制作是一件复杂的事情,请在决定开始这个任务之前明确以下内容
a.网站的构架。
该部门的网站需要那些栏目?请和委托人明确,一旦定义了网站栏目之后作改动是非常困难的事情。请把这些内容用纸笔记下来。
b.您网站制作团队的分工
一个基本的版通网站制作团队需要三个角色:网页制作,图片制作,版通后期制作,请先做好分工。
c.做好遇到困难的准备
如果您之前没有接触过cms系统的话,您可能很难接受cms的管理方式。
2、准备工作
制作工具请使用Dreamweaver,MX或者MX2004均可。不推荐使用Frontpage,因为Frontpage和版通会产生一些已知的兼容性问题。
请安装版通for Dreamweaver插件。为了您的使用方便,这是必需步骤。插件请从附件中下载。注意区分版本。
安装方法:
for mx2004
post_7587.rar (22.49 KB)
将所有文件解压缩C:\Program Files\Macromedia\Dreamweaver MX 2004\Configuration\Objects下,注意这里要覆盖一个文件insertbar.xml,请保证您的Dreamweaver MX 2004没有自定义安装的插件。如果有的话您可以用纯文本编辑器打开这个文件,和下载的文件进行对比作一下修改。
for mx
mx.rar (301.99 KB)
下载文件,直接安装即可。如果失去响应的话取消重新安装一下。
3、静态页面/模版的制作
请先用常规的方式制作静态页面的网站。需要注意的几点是:
a.规划
在版通里,您需要设计三个页面,我们称之为首页、栏目页、文章页。举例说明:
首页:
http://news.nau.edu.cn
栏目页:
http://news.nau.edu.cn/col586/col591/
文章页:
http://news.nau.edu.cn/col586/col591/article.htm1?id=4097
仔细看一下您就知道这些都代表什么了。也就是说,(如果您的网站只有一种风格的话)您只需要设计这三个页面就可以了。
b.html代码全部用小写,这就是要求使用Dreamweaver的原因。
c.所有的图片全部放在images文件夹下。即使您有100个网站栏目,也不要建立多个目录。也许和您的习惯相悖,但是为了实现版通结合,只好委屈一下习惯了。图片可以区别开来,比如subject_a_r_1.jpg,index_a_l_2.gif等等,也可以直接叫作s_a_r_1.jpg。建议使用ImageReady切割后在Dreaweaver里制作。反正都是一家的东东了。
d.如果您应用到了独立的css文件,请也将其放在images文件夹下。因为大汉的限制,所以请不要用默认的css后缀名,我的变通做法是您可以把它改成任意的大汉接受的名称,比如gif,htm,jpg等等。虽然麻烦一点,不过第一现在很少有网站不用css了吧,第二如果您把css放在每个html文件的头部的话---改起来您会很郁闷的。
另外提几点建议
a.放弃华而不实的想法。您做的是和大汉版通结合的校园部门网站,不是您的个人网站,不论从技术上还是从要求上,花哨的各种特效,浏览器效果都是不切实际的。
3.1关于版通的可编辑区域的处理
可编辑区域时版通的核心部分。所有的动态部分甚至静态部分都可以通过可编辑区域来实现。您可以在安装了插件之后通过Dreamweaver插入菜单的插入可编辑区域来实现这个功能。
3.1.1.什么是可编辑区域?如何使用?
一个成型的使用版通制作的网站包含很多部分,比如首页和栏目页、文章页。以首页为例,比如您的首页上可能包含一个滚动的通知公告,几个栏目的最新文章的标题列表,自动生成的图片新闻等等。简单的说,所有可能变化,需要自动生成的部分都必须先指定为一个可编辑区域。至于如何让它实现需要的功能会在版通设置部分说明。您也可以将一些图片区域设定为可编辑区域,这样就可以很方便的在版通后台进行图片的更换。比如你想更换一个首页的logo,如果您是用可编辑区域来做的话,只需要打开浏览器动一下鼠标就好了。不需要打开网页编辑器,做好了再上传。
3.1.2.关于可编辑区域的命名
添加可编辑区域会提示您命名。请遵循一定的规律,至少保证自己或者团队成员一个月之后看到还能认得。如果可编辑区域是通用的部分,比如网页头部的导航条,所有的模版都是一样的,您可以所有的模版都用一个可编辑区域名称,比如都叫做nav_top。这样您可以很方便的使用到版通的保存所有可编辑区域的功能。如果不一样,比如首页的公告您可以用index_annoncement,栏目页的可以用subject_annoncement,最好不要一样,以避免以后误操作造成无法挽回的后果。
3.1.3.可编辑区域的位置
请尽量把可编辑区域放在网页的表格中。并且对这个表格定义好大小,位置等信息,以免错位。
3.1.4.可编辑区域的属性
您可能在添加的时候注意到了,不仅要输入区域名称,还需要选择区域属性。不过在添加的时候选择什么样的可编辑区域是没有影响的,一切都可以将来在后台设置。
4、版通部分的制作
版通的信息分离实现方式
我已经说过了,版通中的信息和网页模版是分离的。在拿到部门给您的管理密码之后,请登陆
http://admin.nau.edu.cn,选择部门输入用户名密码进入系统。注意需要关闭浏览器的拦截弹出菜单功能。
对于一个全新的网站,所需要的第一步就是建立信息库与网站栏目。
虽然不是必须的,但是强烈建议您信息库和网站栏目一一对应,即使您认为这个信息库中可能永远不会有信息。
下一个步骤就是为栏目制定模版了。
5、上传、选择模版
首先点击模版管理下拉菜单中的模版管理。第一次进入网站没有任何模版,您需要首先建立一个类别。这个类别不同于刚才的栏目。这里指得是您网站的风格。比如您的网站有2套风格,春秋版和夏冬版,那您做的两套风格就需要传到两个不同的类别下。
点击左边的类别,您可以看到在右边有上传的选项。您可以点击浏览,选择本地文件上传即可。注意如果您的图片有很多的话,可以采用压缩成zip包的格式(但是不要带路径!)上传,版通会自动解压缩。上传好之后点击上传按钮下面的模版列表,就可以看到您的模版了。看看是不是有什么图片没有传好?一切摄制完成之后进入下一步,选择模版。
点击模版管理下拉菜单中的选择模版。左边应该已经有您事先设置好的网站栏目了。最上层肯定是您的网站名称。这是您的网站的首页。
点击您的网站名称,然后在右边点击添加,弹出的菜单中选择好模版类别,点击模版,确定,这一步就完成了.
同样的方法,把所有的栏目的模版都设置完成。注意首页只要设置一次,而下面的栏目建议您把所有的栏目页和文章页都设置起来。
6、模版中可编辑区域的设置--名词
下面进入可编辑区域设置部分。这是版通的关键。
首先拿首页开刀。点击设置,会弹出新窗口。默认情况下白色虚线包围的部分就是可编辑区域,也就是您在制作网页的时候添加进去的可编辑区域。鼠标移上去点击。会出现一个窗口,第一行是选择可编辑区域类型。共有9种,现在来一一解释一下。
- 静态单元:您在这里输入的所有内容都会原封不动地显示在网页上。比如您要插入一个logo,或者插入一段html代码。不过建议您不要在这里设置java script。
- 栏目连接:您在前面设置了那么多栏目吧?想让版通自动引用么?把可编辑区域设定为栏目连接就好了。
- 图片新闻:可以实现调用新闻中的图片(图片可以设定)。
- 标题连接:就是自动调用设定的信息库下面的文章标题,以链接形式显示出来。注意,按照时间排序。
- 动态标题:
- 当前位置:比如这样:首页>>新闻网>>新闻中心>>当前页
- 相关报道:您可以在后定义相关报道,这样显示当前文章的时候就可以在选定区域显示和当前文章相关的文章列表
- 相关专题:和前者类似,只不过是专题
- 文章正文:就是文章正文部分,也就是文章页占用范围最大的部分了
6、模版中可编辑区域的设置
来举个例子说明一下。以新闻网的页面为参考:
上图为首页,主要的几个功能就是标题连接、图片新闻和静态单元了。您可能感到奇怪了,下拉菜单怎么是静态单元呢?这是一个思路的问题。您完全可以把它设置在网页模版里,但是在没有在线编辑器编辑的情况下,要修改一个下拉的菜单是非常麻烦的事情,而用可编辑区域来实现就要简单的多。
上面一个是文章页。其实也无需多作解释,基本的功能就那么几个。比如样式、时间格式什么的。
注意标题连接部分,如果你要生成一个5行的标题连接,务必要设置为5行,否则默认只会显示第一个。
其他的诸如当前位置等信息在此不再赘述,以后有空会慢慢添加。