利用ASP实现小型网站改版

２０１０车１２月　电　脑　学　习　第６期　利用ＡＳＰ实现小型网站改版　杨秀菊　摘　要：对公司网站进行布局和内容相应改版．采用ＣＳＳ布局与传统的表格式布局设计网站。以保持网站的风格统一。主要实　现的功能有增加图片幻灯片　一个滑动门事件及利用ＡＳＰ＋Ａｃｃｅｓｓ实现不同类文章的时时更新＂１－作。　关键词：ＣＳＳ：幻灯片：滑动门事件：ＡＳＰ：数据库　中图分类号：ＴＰ３９３　文献标识码：　Ｂ　文章编号：１００２—２４２２（２０１０）０６—００４０—０３　Ｕｓｉｎｇ　ｔｈｅ　ＡＳＰ　ｔｏ　Ｒｅａｌｉｚｅ　Ｓｉｎａｉｌ　Ｗｅｂｓｉｔｅ　Ｖｅｒｓｉｏｎ　Ｙａｎｇ　Ｘｉｕｊｕ　Ａｂｓｔｒａｃｔ：Ｃｏｍｐａｎｙ　ｗｅｂｓｉｔｅ　ｌａｙｏｕｔ　ａｎｄ　ｃｏｎｔｅｎｔ　ｗｉｌｌ　ｍａｋｅ　ｃｏｒｒｅｓｐｏｎｄｉｎｇ　ｒｅｖｉｓｉｏｎ，ｕｓｉｎｇ　ＣＳＳ　ｌａｙｏｕｔ　ａｎｄ　ｔｈｅ　ｔｒａｄｉｔｉｏｎａｌ　ｔａｂｌｅ　１－　ａｙｏｕｔ　ｄｅｓｉｇｎ　ｗｅｂｓｉｔｅ，ｔｏ　ｍａｉｎｔａｉｎ　ｔｈｅ　ｓｔｙｌｅ　ｏｆ　ｔｈｅ　ｗｅｂｓｉｔｅ　ｉｓ　ｕｎｉｆｉｅｄ．Ｍａｉｎ　ｆｕｎｃｔｉｏｎｓ　ａｒｅ　ｉｎｃｒｅａｓｉｎｇ　ｐｉｃｔｕｒｅｓ　ｓｉｄｅｓ，ａ　ｓｌｉｄｉｎｇ　ｄｏｏｒ　ｅｖｅｎｔｓ　ａｎｄ　Ｕｓｉｎｇ　ｔｈｅ　ＡＳＰ＋Ａｃｃｅｓｓ　ｔｏ　ｋｅｅｐ　ｕｐｄａｔｅ　ｏｆ　ｎｏ　ｓｉｍｉｌａｒ　ａｒｔｉｃｌｅｓ．　Ｋｅｙ　ｗｏｒｄｓ：ＣＳＳ；Ｓｌｉｄｅｓ；Ｓｌｉｄｉｎｇ　Ｄｏｏｒ　Ｅｖｅｎｔｓ；ＡＳＰ；Ｄａｔａｂａｓｅ　１网页美工设计　１．１整体改版设计　利用Ｐｈｏｔｏｓｈｏｐ和Ｆｉｒｅｗｏｒｋｓ进行首页规划，把企业的　整体形象风格和具体色彩都设计出来，然后再切片导出，利　属性的设定，这里需要注意的问题是图片文件的地址，需要　使用相对路径。　相对路径：是指和当前文档所在的文件夹相对的路径。　和文档相对的路径通常是最简单的路径，可以用来链接和　当前文档同一文件夹的文件。其优点是使用源地址和目标　用ＣＳＳ进行布局，在布局时先从整体风格方面进行。首页　ＣＳＳ代码如下：　ｂｏｄｙ，ｔｄ，ｔｈ｛ｆｏｎｔ－ｓｉｚｅ：１２ｐｘＪ　ｂｏｄｙ（　ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＤＥＥＥＥ；　ｍａｒｇｉｎ：０ｐｘ；　地址文件之间的位置来表示路径，只要整个站点的结构和　文件的位置不变，改变路径不会影响路径的正确性，这也是　建立站点的原因。其缺点是当源地址和目标地址文件的位　置发生改变时，要修改相对路径。　幻灯片修改后的主要代码如下：　＜ＳＣＲＩＰＴ　ｌａｎｇｕａｇｅ＝ＪａｖａＳｅｒｉｐｔ＞　＜！一一　】　．ｔｘｔｆ　ｌｉｎｅ—ｈｅｉｇｈｔ：２５ｐｘ；　ｐａｄｄｉｎｇ：５ｐｘ）　．ｐｌ（　１ｉｎｅｌ－ｈｅ　ｈｔ：２Ｏｐｘ；　ｖａｒ　ｗｌｄｔｈｓ＝ｌＯ０４；礁点图片宽　Ｖａｒ　ｗ＝２：　ｖａｒ　ｗｉｄｔｈｓｓ＝ｗｉｄｔｈｓ＋ｗ；　ｔｅｘｔ—ｉｎｄｅｎｔ：２０ｐｘ；　ｖａｔ　ｈｅｉｇｈｔｓ＝２５０；　ｖａｒ　ｈｅｉｇｈｔｔ＝２０；　点图片高　ｖａｔ　ｈｅｉｇｈｔｓｓ＝ｈｅｉｇｈｔｓｓ＋ｗ；　卜…。　１．２保持等距离设置　ｖａｔ　ｃｏｕｎｔｓ＝４；　条数　为了保持两个模块之间距离一致性，可以进行等距离　设定，ＣＳＳ代码如下：　．￣ｍｇｌ＝ｎｅｗ　Ｉｍａｇｅ（）；在这里是声明了一个图片元素的对象　面是对图像的属性进行赋值或设置，如ｉｍｇｓ．ＳＩＣ－－－”ｘ”。ｃ．Ｊｐｓ＂是指　定图片的索引相对地址。　ｈｂｒ｛ｍａｒｇｌｎ—ｔｏｐ：５ｐｘ；ｌ　使用时可以把代码写到需要的地方：　＜ｄｉｖ　ｃｌａｓｓ＝”ｈｂｒ＂＞＜／ｄｉｖ＞　羞个代码一般用于ｈｅａｄ区，用于预加载图片，即加快图片显示。　／／Ｒ有用ｎｅｗ　Ｉｍａｇｅｓ０得到的图片ＩＥ７才认。　１．３其它说明　首页其它地方的ＣＳＳ布局，可以根据各模版的要求不　ｉｍｇｌ＝ｎｅｗ　Ｉｍａｇｅ（）；ｉｍｇ１．ｓｒｃ＝＇ｉｍａｇｅＣｌｍｇ１．ＪＰｇ　；　ｕｒｌ１＝ｎｅｗ　ＩｍａｇｅＯ；ｕｒｌ１．ｓｒｃ＝　；　∥图片链接地址　ｔｘｔ１＝ｎｅｗ　Ｉｍａｇｅ０；ｔｘｔＩ．ｔｘｔ＝　图片ｌ　：∥图片的文字说明　ｉｍｇ２＝ｎｅｗ　Ｉｍａｇｅ０；ｉｍｇ２．ｓｒｃ＝＇ｉｍａｇｅ／ｉｍｇ２．ＪＰｇ　；　ｕｒｌ２＝ｎｅｗ　Ｉｍａｇｅ０；ｕｒｌ２．ｓｒｃ＝　：　￣ｔ２＝ｎｅｗ　ＩｍａｇｅＯ；ｔｘｔ２．ｔｘｔ＝　图片２　：　ｉｍｇ３＝ｎｅｗ　ＩｍａｇｅＯ；ｉｍｇ３．ＳＩＣ＝　ｉｍａｇｅｆｍｇ３．ＪＰｇ　；　ｕｒｌ３＝ｎｅｗ　ＩｍａｇｅＯ；ｕｒｌ３．ｓｒｃ＝　：　同进行分别设定，首页ＣＳＳ文件要单独保存，子页面ＣＳＳ文　件可以另外保存，这样方便管理。　２幻灯片图片的制作　幻灯片图片制作需要使用ＪａｖａＳｃｆｉｐｔ脚本，可以在互联　网上下载相关的代码，再根据网站的需要进行图片及相关　收稿日期：２０１０—１０—２２　杨秀菊泉州信息职业技术学院助教（福建，泉州３６２０００）。　・４０・　

ｔｘｔ３＝ｎｅｗ　Ｉｍａｇｅ０；ｔｘｔ３．ｔｘｔ＝　图片３　ｉｍｇ４＝ｎｅｗ　Ｉｍａｇｅ０；ｉｍｇ４．ｓｒｃ＝＇ｉｍａｇｅｄｍｇ４．ＪＰｇ　：　＜／ＤＩＶ＞　ｕＨ４＝ｎｅｗ　Ｉｍａｇｅ０；ｕｒｌ４．ｓｒｃ＝饼　：　ｔｘｔ４＝ｎｅｗ　Ｉｍａｇｅ０；ｔｘｔ４．ｔｘｔ＝　图片４　　＞＜ＳＰＡＮ　ｔｉｔｌｅ＝”Ｄｏｎ２　ｄｅｌｅｔｅ　ｍｅ　＞　＜ＤＩＶ　ｉｄ＝”ＮｅｗｓＴｏｐｃｎｔ＿ＳＰＡＮ＞　＜ｓＰＡＮ　添加每个标题内的相应内容＜，ＳＰＡＮ＞　／／－－＞　＜／ＳＣＲＩＰＴ＞　＜ｓ队Ｎ　添加每个标题内的相应内容＜，ＳＰＡＮ＞　３滑动门事件　３．１包含文件处理　由于滑动门事件会对网站首页规划的完整性造成很大　的破坏，所以采用包含关系来实现，即滑动门事件中的所有　代码单独保存成一个文件，在首页中只需要加入包含文件　的代码即可，如：　＜！一－＃ｉｎｃｌｕｄｅ　ｆｉｌｅ＝　ｈｕａｌｕｎ．ｈｔｍ　一一＞　４　ＡＳＰ文章标题时时更新　４．１数据库连接　＜％　ｄｉｍ　ａｌｌ，１＂８，ｎ　ｓｅｔ　ｅｎ＝ｓｅｒｖｅｒ．ＣｒｅａｔｅＯｂｊｅｅｔ（＂ａｄｏｄｂ．ｃｏｎｎｅｃｔｉｏｎ＂）　ｅｎ．ｏｐｅｎ”Ｐｒｏｖｉｄｅｒ＝Ｍｉｃｒｏｓｏｆｔ．Ｊｅｔ．ＯＬＥＤＢ．４．Ｏ；Ｄａｔａ　Ｓｏｕｒｃｅ＝”＆Ｓｅｒｖｅｒ．　ｍａｐｐａｔｈｎ　＆＂￣ｄａｔａ＼ＨＴＳＹ０７０６０８．ｍｄｂ；　％＞　３．２　ＣＳＳ部分的修改　４．２建立数据表　为了保持整体风格的统一性，需要对ＣＳＳ的部分进行　色彩修改，以便和首页的色彩保持一致。　修改后的代码如下：　＜ｓｔｙｌｅ　ｔｙｐｅ＝”ｔｅｘＶｅｓｓ”＞　＜！一一　表名为ｍｙＤｏｃ，表结构如表１所示。　表１数据表　字段名称　ＩＤ　ｍｙＮａｍｅ　ＭｙＣｌａａｓ　数据类型　自动编号　文本　文本　＃ＮｅｗｓＴｏｐ　Ｐ．ｔｏｐＣ０（　ＢＡＣＫＧＲＯＵＮＤ：　＃ｃｃｃｅｃｃ；　ＢＯＲＤＥＲ—ＬＥＦＴ：＃ｆ２ｆ２ｆ２　ｌｐｘ　ｓｏｌｉｄ；　ＷＩＤＴＨ：１２８ｐｘ；ＣＵＲＳＯＲ：ｐｏｉｎｔｅｒ　ｍｙＣｌａｓｓＮａｍｅ　ｍｙＵＲＬ　ｎｌｖ　Ｉｌｅｘｔ　ｍｙＴｉｍｅ　ｍｙＬａｎｇｕａｇｅ　ｍｙＤｏｗｎＵＲＬ　ＣｎＮａ／ｎｅ　ＥｎＮａｌｎｅ　ＫｒＮⅢｅ　ＣｎＣｏｎｔｅｎｔ　ＥｎＣｏｎｔｅｎｔ　文本　文本　备注　日删间　文本　文本　文本　文本　文本　备注　备注　）　＃ＮｅｗｓＴｏｐ　Ｐ．ｔｏｐＣ１｛　ＢＡＣＫＧＲＯＵＮＤ：　＃ｅｃ７ｂ　ｌ　ｂ；　ＢＯＲＤＥＲ—ＬＥＦＴ：　＃ｆ２ｆ２ｆ２　ｌｐｘ　ｓｏｌｉｄ；　ＷＩＤＴＨ：１２８ｐｘ；ＣＯＬＯＲ：＃ｆｆ　）　＃ＮｅｗｓＴｏｐ＃ＮｅｗｓＴｏｐ—ｔｉｔ　ｆ　ＢＯＲＤＥＲ—ＢＯＴＴＯＭ：＃ｅｃ７ｂｌｂ　３ｐｘ　ｓｄｉｄ；ＨＥＩＧＨＴ：２１ｐｘ　）　＃ＮｅｗｓＴｏｐ＃ＮｅｗｓＴｏｐ　ｃｎｔ　ｆ　ＰＡＤＤＩＮＧ—。ＬＥＦＴ：３２ｐｘ；ＬＩＮＥ—－ＨＥＩＧＨＴ：２６ｐｘ；ＰＡＤＤＩＮＧ－ＴＯＰ：　７ｐｘ；ＨＥＩＧＨＴ：１８０ｐｘ；ＴＥＸＴ－ＡＬＩＧＮ：ｌｅｆｔ；　ＢＯＲＤＥＲ－ＲＩＧＨＴ：＃ｅｅ７ｂｌｂ　ｌｐｘ　ｓｏｌｉｄ；ＢＯＲＤＥＲ－ＴＯＰ：＃ｅｅＴｂｌｂ　０ｐｘ　ｓｏｌｉｄ；ＢＯＲＤＥＲ－ＬＥＩ￣７＂：＃ｅｃ７ｂｌｂ　ｌｐｘ　ｓｏｌｉｄ；ＢＯＲＤＥＲ－ＢＯＴ－　ＴＯＭ：＃ｅｃ７ｂｌｂ　ｌｐｘ　ｓｏｌｉｄ　ＫｒＣｏｎｔｅｎｔ　ＣｎＣｌａｓｓ　备注　文本　ＥｎＣｌａｓｓ　ＫｒＣｌａｓｓ　文本　文本　４．３添加ＡＳＰ代码　后台添加文章标题倒序显示在首页中的ＡＳＰ实现代码　如下：　＜ｔａｂｌｅ　ｗｉｄｔｈ＝”４６１　ｂｏｒｄｅｒ＝”０”ａｌｉｇｎ＝　ｃｅｎｔｅｒ　ｅｅｌｌｐａｄｄｉｎｇ＝　０　ｅｅｌｌｓｐａｃｉｎｇ＝”０　＞　）　－－＞　……／臌据库的连接与ＳＱＬ搜索　＜／ｓｔｙｌｅ＞　＜ｔｒ＞　３－３内容添加的处理　＜ｔｄ　ｗｉｄｔｈ＝‘２６’＞＆ｎｂｓｐ；＜Ａｄ＞　＜ｔｄ　ｗｉｄｔｈ＝　２９７　ａｌｉｇｎ＝　ｌｅｆｔ　＞＜ｄｉｖ　ａｌｉｇｎ＝Ｈｌｅｆｔ　＞（８　ｈｒｅｆ＝“ｌｉｓｔｎｅｗｓ．　添加滑动门事件的各个标题在＜Ｐ　ｃｌａｓｓ＝　ｔｏｐＣ０”＞＜　＞　之间添加，而内容需要在每个相对应的＜ＳＰＡＮ＞＜／ｓｐａｎ＞之　间添加。相应代码如下：　＜ＤＩＶ　ｉｄ＝　ｅｎｔＲ　＞　＜ＤＩＶ　ｉｄ＝”ＮｅｗｓＴｏｐ’　＞　＜ＤＩＶ　ｉｄ＝　ＮｅｗｓＴｏｐｔｉｔ　＞　＿ａｓｐ？＜％＝Ｒｓｌ（”ＩＤ”１％＞”ｔａｒｇｅｔ＝－－ｂｌａｎｋ”＞　＜％　ＮｅｗｍｙＮａｍｅ＝Ｒｓ１（　Ｃｎｎａｍｅ＇）　ＩＦ　Ｌｅｎ（Ｎｅｗ＿ｍｙＮａｍｅ）＞２５　Ｔｈｅｎ　＿Ｒｅｓｐｏｎｓｅ．Ｗｒｉｔｅ（Ｍｉｄ（Ｎｅｗ　ｍｙＮａｍｅ，１，２４）＆　…　）　Ｅｌｓｅ　ｃｌａｓｓ＝。ｔｏｐＴｉｔ’＞＆ｎｂｓｐ；＆ｎｂｓｐ；＜／Ｐ＞　Ｒｅｓｐｏｎｓｅ．Ｗｒｌｔｅ（Ｎｅｗ＿ｍｙＮａｍｅ）　Ｅｎｄ】Ｆ　％＞　・＜Ｐ　ｃｌａｓｓ＝　ｔｏｐＣ０　＞标题１（伊＞　＜Ｐ　ｃｌａｓｓ＝”ｔｏｐＣ０”＞标题２（巾＞　４１　・　

２０１０年１２月　电　脑　学　习　第６期　浅谈网页设计中的色彩应用　姜山　方巍男　摘　：本文阐述了色彩的基础知识、色彩的搭配以及网页主题色的选取三个方面内容。结合相关实例．分析网页的色彩对浏　览者的视觉所产生的影响。提出了色彩搭配和色彩选取的一些建议。　关键词：网页设计：色彩应用：色彩搭配：主题色　中图分类号：ＴＰ３９３　文献标识码：　Ａ　文章编号：１００２—２４２２（２０１０）０６－００４２－０２　Ａ　Ｂｒｉｅｆ　Ｄｉｓｃｕｓｓｉｏｎ　ｏｎ　Ｗｅｂ　Ｄｅｓｉｇｎ　Ｃｏｌｏｕｒ　Ａｐｐｌｉｃａｔｉｏｎ　Ｊｉａｎｇ　Ｓｈａｎ　Ｆａｎｇ　Ｗｅｉｎａｎ　Ａｂｓｔｒａｃｔ：Ｔｈｅ　ｐａｐｅｒ　ｅｘｐｒｅｓｓｅｓ　ｓｏｍｅ　ｂａｓｉｃ　ｋｎｏｗｌｅｄｇｅ　ａｂｏｕｔ　ｃｏｌｏｒ，ｔｈｅ　ｃｏｌｌｏｃａｔｉｏｎ　ｏｆ　ｃ０ｌ０ｒ　ａｎｄ　ｗｅｂ　ｐｒｅｄｏｍｉｎａｎｔ　ｃｏｌｏｒ．Ｃｏｍｂｉ—　ｎｅｄ　ｗｉｔｈ　ｅｘａｍｐｌｅｓ，ｉｔ　ｆｌｌ＇ｌｌｆｌｙｓｅｓ　ｔｈｅ　ｅｆｆｅｃｔ　ｏｆ　ｗｅｂ　ｃｏｌｏｒ　Ｏｉｌ　ｂｒｏｗｓｅｒｓ　ａｎｄ　ａｌｓｏ　ｓｌｖｅｓ　８ｏｍｅ　ｓｕｇｇｅｓｔｉｏｎｓ　ｏｎ　ｃｏｌｌｅｃｔｉｏｎ　ａｎｄ　ｃｈｏｉｃｅ　ｏｆ　ｃｏｌｏｒ，　Ｋｅｙ　ｗｏｒｄｓ：Ｗｅｂ　Ｄｅｓｉｇｎ；Ｃｏｌｏｒ　Ａｐｐｌｉｃａｔｉｏｎ；Ｃｏｌｏｒ　Ｃｏｌｌｏｃａｔｉｏｎ；Ｐｒｅｄｏｍｉｎａｎｔ　Ｃｏｌｏｒ　１色彩的基本知识　（２）色彩的鲜明性。网页的色彩要鲜艳，容易吸引浏览　任何一种彩色都具备三个属性：　者的注意力。　色相即指色彩的相貌。是一种颜色区别于另一种颜色　（３）色彩的独特性。网页色彩的选择与搭配要与众不　的表相特征。比如说红色、黄色、蓝色都代表不同的色相，表　同，这样才能给读者留下的印象深刻。　示颜色自身的独特性质，是色彩中最基本、最重要的属性。　（４）色彩的联想性。不同的色彩会使人产生不同的联　明皮是指色彩在视觉上的明暗程度，也称之为亮度。明　想。白色使人想到雪花，黑色使人想到黑夜。蓝色使人想到　度越高，色彩越亮：明度越低，色彩越暗。　天空和大海等。在网页设计时，选择合适的主题以及相关的　纯度是指颜色本身的纯净程度，又叫饱和度。纯度越　色彩，可以使网站流露出别样的气息。　高，色相表现越明显，色彩越鲜艳、活跃、刺激：纯度越低，色　不同的浏览人群；不同的社会背景；不同的受教程度：　相表现越模糊，色彩越浑浊、稳重、平淡、柔和。　不同的心理需求，有着不同的鉴赏观点。鲜艳红色的政府机　２网页色彩的使用原则　关网站体现其庄严肃穆；悠悠绿色的农林网站给人一种生　（１）色彩的艺术性。凡是经过设计的色彩都具有某种　机勃发的感觉：淡淡的粉色多体现女性的柔美之气……这　程度的艺术性。既符合实用要求，又遵循美学原则。和谐统　些都是过去时，是经典。随着科学技术的发展，设计理念的　一，均衡布局，重点突出是网页设计的原则。一般来说，不同　转变。在互联网这个大环境下，不乏设计独特且色彩运用别　的色彩进行搭配组合，通过艺术手段的处理最终形成一个　具匠心的网站。如：以灰色为主色调的奥迪公司网站，既能　艺术性强且能够吸引人和感染人的网页页面。　体现高雅大方的气质，也不失金属本身的质感，和谐统一。　＜／ａ＞＜／ｄｉｖ＞＜４ｄ＞　即可。　＜ｔｄ　ｗｉｄｔｈ＝　１３８　ａｌｉｇｎ＝　ｌｅｆｔ　＞＜％　ｙｅａｒ（ｓｒｌ（６））＆”年　＆ｍｏｎｔｈ（ｒｓｌ　上述代码并没有完全列出，只列出主要修改及完成的　（６））＆”月”＆ｄａｙ（ｒｓｌ（６））＆　日”　％＞　ｄ＞　部分。　＾ｒ＞　＜％　５结束语　Ｒｓ１．Ｍｏｖｅｎｅｘｔ　基本达到企业的要求，作为企业展示自己产品及产品　ｌｏｏｐ　服务功能都体现出来，且改版后的网站已经在互联网上运　Ｒｓ１．Ｃｌｏｓｅ　行，得到了企业的认为。　Ｅｌｓｅ　参考文献　％＞　［１］丁桂芝．ＡＳＰ动态网页设计教程．北京：中国铁道出版社，２０一　＜％ｅｎｄ　ｉｆ％＞　Ｏ７～Ｏ５．　・　ａｂｌｅ＞　［２】李健宏，李广振．Ｗｅｂ编程基础．北京：北京大学出版社，２Ｏ一　对于不问类的文章标题，只需要复制第３条的代码，把　０７—１２．　相应的字段名进行修改即可以使用，另外标题的字数可以　【３】刘怀亮．ＪａｖａＳｃｒｉｐｔ程序设计．北京：治金工业出版社，２００６—１１．　自行设定，只需在Ｌｅｎ（Ｎｅｗ＿ｍｙＮａｍｅ）＞２５这里进行修改数量　收稿日期：２０１０－１０—２６　姜山，方巍男空军第一飞行学院图书馆助理馆员，馆员（黑龙江，哈尔滨１５００００）　・　４２　・