基于Dreamweaver MX 2004科室网站设计和制作

2011-09-27穆飞航李秋俐张帆王烈明闫涛张

中国医学装备 2011年2期

关键词：医学工程菜单网页

穆飞航李秋俐张帆王烈明闫涛张麟

穆飞航①李秋俐①张帆①王烈明①闫涛①张麟①

运用Dreamweaver MX开发第二炮兵总医院医学工程科网站，着重介绍如何利用Dreamweaver MX 2004实现医学工程科的宣传介绍、网上下载以及展示相关教学视频等。

Dreamweaver MX 2004；网站设计

利用我院局域网环境，基于Dreamweaver MX软件设计医学工程科网站，从网络途径宣传科室相关业务工作、开展实施下载、展示相关教学视频，从而可以方便临床科室对医学工程科各类业务的了解，最终达到及时服务临床的目的。本文阐述借助软件Dreamweaver MX 2004开发制作网站的体会。

l 网站总体设计

根据临床科室的需求、本科室的业务特点以及医技服务临床的理念。围绕本网站要实现的功能，将网站内容进行整体设计。共分为五大栏目：首页、科室简介、科室职责、文件下载、教学视频，各大栏目再继续细分。整体结构图如图l所示。

首页模块：包括了有关医学工程科动态消息、服务流程、院长查房等内容。以方便临床科室了解医疗设备的维修、计量、验收、采购、供应等内容。

科室简介模块：该模块包括了医学工程科总体介绍以及各室简介。

科室职责模块：向临床科室介绍计量室、维修室、采购室以及档案室等应履行的职责。

文件下载模块：给临床科室提供相关文件的下载，以方便临床科室查阅相关资料和获取相关申请表。如月耗材计划表、医工库常用耗材目录等。

教学视频模块：主要方便实习生进行教学视频下载。

图1

2 网站的制作

根据总体规划，就可以利用Dreamweaver MX 2004制作科室网站，总的工作流程包括：在Fireworks 2004中依次做出效果图一切图一打开Dreamweaver MX 2004一新建站点一站点命名一定义页面属性一定义页大小一转换到页面布局示图一添加内容一插入导航条一转换到标准视图工作一添加链接一添加动态交互一链接站点各个页面。还要应用到Dreamweaver MX 2004的层技术、模板功能和使用框架。下面把制作要点分述如下：

2.l 网站文件目录结构和链接结构的设计

根据网站内容的需要规划网站目录结构和链接结构的好坏，决定了网页的浏览速度的大小，同时对网站的管理和维护，如上传、信息更新、扩充和移植都有着重要的影晌。合理安排网站的文件目录，按拦目内容建立子目录，利用Dreamweaver MX 2004的site功能定义网站的目录，目录层次分3层，首页与一级网页之间采用星状连接结构，一级网页与二级网页之间采用树状连接结构。这样设计的目的是以最少的层次提供最清晰简便的访问结构。

2.2 首页的设计和制作

首先利用平面设计软件Fireworks MX 2004设计个性化的背景和标题。建立一张760×600像素的空白图，再按布局需要划上大小不一的方框，把医院住院部大楼的照片稍做处理后插入并修饰。选取切片工具，按方框结构进行切割，分割成小图片。用Save for web来存成一个html文件和一个在images文件夹下的切割完成的图片，images保存在根目录中。接着，在Dreamweaver MX 2004中插入文字，运用层叠样式表单技术加入样式修饰网页内容的外观，如字体类型、颜色、大小、行距、背景、链接的方式等；导航菜单的内容较多，我们用层技术制作弹出式菜单，建立主菜单栏目，分别赋予对应的链接指向，然后在每个链接下面放置一个图层对象，再把相应弹出菜单的内容放到隐藏图层里。当浏览者的鼠标移到导航拦目时即显示该层，当鼠标移开时隐藏该层。在网页中使用弹出式菜单可以极大地节省网页空间．并能够使内容的分类显示更具条理性。

2.3 二级三级网页的制作

为使整个站点具有统一的风格，我们采用模板来制作二级、三级网页。模板是批量生成风格类似的网页工具。利用的模板，可以从网络上下载得到，也可以是Dreamweaver MX中自带的模板，还可以是自行设计的。站点中的网页可大量快速利用模板制作出来，省时省力，而且方便修改。若固定元素要改变，只要修改模板，就可以修改应用了该模板的所有网页，而不需要手动修改每一页。在Dreamweaver MX制作模板更简单，先编辑好要保存为模板的网页后，在File菜单中点击Save Templates，即可生成模板；模板生成之后，要建立可编辑区域，在此区域可填入不同的网页内容，打开模板，单击[插入]菜单，在弹出的下拉菜单中选择[模板对象]，在子菜单中单击[可编辑区域]出现可编辑区域对话框，输入可编辑区域的[名称]，单击确定按钮即可。保存后就建立了可编辑区的模板。接着即可批量生成网页，单击菜单[File／New]，选择[Templates]选项，就可以看到建立生成的模板，单击Create按钮，模板就开始自动套用在网页上。这时我们可以看到，原来的模板区域是黄色，其中的元素已经固定，不能编辑，而我们刚指定的可编辑区域是蓝色，可以编辑。这样一来，不但大大简化了生成相似网页的工作量，而且有效地保证了网页风格的一致性。当我们要对所有网页的公共元素进行改动时，只需修改模板中的元素即可。

3 网站测试、完善和发布

各级网页制作完成后，试运行网站，需要在浏览器中预览一下，按[F12]键测试。系统将自动启动网络浏览器IE,并在IE中打开当前页面。利用Dreamweaver MX的链接检查器，修正无效链接，接着调试网页的兼容性，在不同浏览器(图形界面、文本界面)和不同的设置(监视器分辨率、窗口大小、字体等)中能尽量显示大体一致的信息。对网站进行修改、完善。最后，利用Dreamweaver MX 2004内置的FTP功能，上传网站，发布出来。

4 结束语

Internet以丰富的信息资源和便捷的交流方式促进了信息社会的进步和经济的发展，网页设计制作是一个长期的系统工程，不是简单的掌握一种编辑软件就能制作出效果很好的网页，要求精通图片处理、排版、文字编辑等软件，融会贯通，将各类软件有机的结合在一起，通过页面的宏观布局，色彩的合理调配，文字的美工修饰，界面的动静结合，才能制作出精彩的网页来。

[1]戴一波.Dreamweaver MX 2004从基础到实践[M].北京：电子工业出版社，2005:33-108.

[2]陈斌，郑伟，超曾斌.网页制作梦幻三组合[M].上海;上海科学普及出版社，2004:5-66.

[3]陈强,霍继文,叶兵.网页制作实用技术FrontPage 2000[M].北京;清华大学出版社,2000:15-58.

[4]刘海疆, 李东博.网页制作三剑客教程[M].陕西：西安电子科技大学出版社，2004:5-30.

[5]张福成，谭国鹏.制作网页宝典[M].北京;人民邮电出版社，2000:13-66.

[6]王凯，张家才.跟我学网页制作网页制作技巧与实例[M].北京; 冶金工业出版社,1999:20-47.

Design and making of Medical Engineering Department website based on dreamweaver MX 2004

MU Fei-hang, LI Qiu-li, ZHANG Fan, et al // China Medical Equipment,2011,8(2):24-26.

The software Dreamweaver MX 2004 was used to develop the Medical Engineering Department website of the Second Artillery General Hospital. The main objective of the paper was to realize propaganda, introduce downloading and show relative teaching video of the Medical Engineering Department.

Dreamweaver MX 2004; Website design

1672-8270(2011)02-0024-03

TP 751