党校网站首页的切图与实现

　　1 引言

　　党校系统的网站建设对马克思主义网上宣传和党校自身形象的展示有着重要的意义，建设内容丰富，结构缜密，运行良好的党校网站，是党校搞好开门办学的重要渠道，通过党校网站这个窗口，可以适应时代的要求，充分发挥党校在干部培训中的作用。

　　首页是一个网站的门面，也是一个网站的灵魂，首页制作的好坏直接影响整个网站的视觉效果和用户体验。党校网站的首页不同于市面上的商业网站，它的设计制作既要缜密庄重，又不能过于死板，本文以吉林省委党校网站首页为例，对党校网站的色彩定位、功能结构、网页的切图与最终实现进行研究与分析。

　　2 党校网站中网页的设计原则
　　
　　2.1 网页的色彩定位
　　有研究表明，第一次打开一个网站时，给用户留下第一印象的既不是网站的内容，也不是网站的版面布局，而是网站具有冲击力的色彩。在设计网页效果图时，最先需要考虑网站色彩的定位。网站的效果图，需要在一个明确的色彩定位下进行设计。所有的设计元素，需要与这个色彩定位相统一。

　　以吉林省委党校网站首页为例，为了突出党校姓党，页面的色彩定位要以红色为主色调。红色是一种激奋的色彩，代表热情、活泼、温暖、幸福和吉祥，同时也是我党的代表色。

　　红色容易引起人们的注意，也容易使人兴奋、激动、紧张和冲动，同时极容易造成视觉的疲劳。所以在进行页面设计时，不易通篇大面积使用红色。为了在冷暖色向上中和红色，页面使用了与红色面积相当，但相对集中的蓝色，同时使用了中性的灰色穿插其中，使二者平稳衔接。整体上仍然是以红色为主色调，但又不失清新、和谐且庄重的视觉感受。
　　
　　2.2 网页的功能结构
　　配色好坏决定访客对网站的第一印象，结构是否合理则决定了访客的体验。网站是由不同的功能模块组成的，这些功能模块都是网站不可分割的组成部分。在进行网站设计时，要充分考虑到网站的各种具体功能模块的组合，形成最优的交互体验。同时这些功能模块的页面设计，需要与首页、其他页面实现风格和结构的统一。

　　吉林省委党校首页的效果图从整体来看采用的是“国”字型的布局，这样布局可以充分利用网页的版面，信息量很大。其页面上部分主要包括网站的 Banner 条和导航条，并以吉林省委党校校园的图片为背景，在整个版面中起到了美化网页的作用。左边表格内容依次为图片新闻、快速导航、精品展示；右边为校院报刊、站内搜索、校园风光等，同时还包括多个超级链接，这些链接用于与本网站的其他网页建立联系；中间是网页的主要内容，包含校内信息、教学科研、时政要闻、学员之窗等；最下面是是网站的底栏，主要包括版权信息和联系方式等。

　　二级页面采用“广”字型布局，结构与主页一致，Banner 条、导航条和底栏不变，中间部分保留左边表格内容，空白部分用来承载具体内容，这样做可以在一个区域突出网页的重点内容，主次分明，很有层次感。

　　3 党校网站首页的切图与实现

　　网页效果图出来之后，接着根据效果图去实现 table 表格化或者 DIV+CSS 板式，这个中间过程就需要用到切图，规划良好的切图有时可以直接作为最终的 table 化页面的结果。

　　切图在网站建设的过程中扮演一个效果图到页面转换的过程，能够实现效果图到HTML 页面或者 DIV+CSS 过程的转换。理想的切图可以加快网页浏览的速度，如果网页中一个图片过大，影响网页打开速度，把大图切成小图后可以提升网页打开的速度。同时，切图可以把设计过程中的文字信息和图片信息进行分开。

　　3.1 切图过程
　　在 Photoshop 中，选择“切片工具”，在效果图中切割出需要的区域。Photoshop 切片时，并不是任意地对效果图进行切割。需要考虑到网页设计、图片再次编辑、文件大小等因素，Logo、Banner 等内容需要根据需求的大小进行切割，合理地对图片切割有利于网页在Dreamweaver 中的排版制作。在吉林省委党校首页切图时，只有banner和公告板是整个切出，其他板块只切出标题部分。按钮和部分标题栏等内容，在Dreamweaver中是可以重复使用的，在导出时只保存一份，在浏览网页时也可以减少文件的下载。网页中需要在 Dreamweaver 中进行布局的文字和下拉菜单等内容，则不必切片，留出这片区域以后，再在 Dreamweaver 中进行布局。

　　切片完成后，选择“文件”-“储存为Web 和设备所用格式”，选择所需文件格式（GIF 或 PNG），导出所用切片，保存类型为HTML 和图像（*.html），这样可以保存切片图片和网页信息，便于在 Dreamweaver 中进行编辑。

　　3.2 网页的实现
　　Photoshop 完成网页的切片与导出后，只是完成了网页的基本框架，网页中还没有具体的内容，还需要使用 Dreamweaver 对网页内容进行设计与排版，设置网页的属性，添加网页元素，输入网页文本，最后才是所需要的网页。

　　在 Dreamweaver 中导入之前 Photoshop 保存的“*.html”文件，网页所需的表格基本已经构建好，对整体页面的代码稍作调整便可使用。

　　导入所需切片，加入文字和链接后，所需网页便完成。

　　用于控制党校首页整体元素属性的相关CSS 代码如下：

　　Body
　　{
　　padding:0;
　　margin:0;
　　background:url
　　(images/header.jpg)
　　no-repeat center 0 #020100;
　　color:#581B05;
　　font:normal 11px
　　Arial, Helvetica,
　　sans-serif;
　　}

　　4 结语

　　本网站是中共吉林省委党校（吉林省行政学院）重要的宣传阵地，是“空中党校”的重要组成部分。框架搭建采用结构化系统分析，站内编程采用 C sharp 语言，数据库选用配套的 SQL server 2005 数据库，系统平台服务器端搭建在windows2003 advance server 上，整体运行稳定，页面更新速度快，内容充实，为吉林省委党校在信息化建设中提供优质的服务。

　　参考文献
　　
　　[1] 朱晓菊 , 谭岚丹 . 政府网站设计中的视觉元素 - 色彩 [J]. 大众文艺 ,2010(16).
　　[2] 罗建萍 , 陈伟 . 党校网站建设中存在的问题及发展对策 [J]. 知识经济 ,2008(11).