宝明科技企业网站建设与实现-毕业论文

1、山东职业学院 毕业设计（论文）题 目：宝明科技企业网站建设与实现系 别：信息工程系专 业：计算机应用技术（网络方向）班 级：计应1133学生姓名：梁宝明指导教师：马立新完成日期：2014年5月10日山东职业学院毕业设计（论文）任务书班 级计应1133学生姓名梁宝明指导教师马立新设计（论文）题目宝明科技企业网站建设与实现主要研究内容企业网站规划设计的主要流程、确定网站建设目的、定位网站客户、理顺结构和层次、设定网站盈利模式和设定主要业务流程。使用织梦CMS建站系统为基础，使用DIV CSS等技术实现企业网站建设。主要技术指标或研究目标1、学习掌握织梦CMS建站系统的开发及应用基本知识。2、企业网

2、站设计工作中应该具备的知识与思路。3、在网页设计过程中研究DIV CSS、织梦标签代码等网站代码，并完成本站页面的设计工作。4、了解掌握不同空间服务器的区别，域名的注册购买途径与方法等。5、网站上传测试的主要方式方法。6、网站日常维护需要掌握那些基本知识。基本要求1、能够熟练安装使用织梦CMS建站系统。2、能够完成一个企业网站整体设计工作。3、能够熟练使用DIV CSS、织梦标签代码等网站代码，完成网站页面设计。4、能够掌握网站空间与域名的注册购买途径与方法。5、能够完成网站上传测试及日常维护等工作。主要参考资料及文献1、王德永PHP+CMS+Dreamweaver网站设计实例教程人民邮电出版

3、社，2013年2、于荷云PHP+MySQL网站开发全程实例，清华大学出版社，2012年3、张恩民PHP开发实战权威指南清华大学出版社，2012年4、何新起网站建设与网页设计从入门到精通人民邮电出版社，2013年5、宋一兵 王新宁网站建设与管理（第2版）人民邮电出版社，2013年6、张树霞网站功能开发机械工业出版社，2013年摘 要随着网络信息的飞速发展，网络传媒以被越来越多的企业看好，而网站就是传媒很好的一种方式，目前有很多企业都在开发属于自己的网站，所以研究网站建设是很有必要的。本文针对专业建站程序“织梦CMS”的建站技术知识做了具体的阐述，说明了“织梦CMS”建站程序的安装及配置过程。此网

4、站设计主要是对WEB标准理论的一次实践与运用。整个网站设计与实现的过程中，充分的体现到了DIV CSS布局的好处：可以批量对网页进行修改、将文档结构和表现层分离开来、减轻工作量和服务器的负荷、增加站点的扩展能力和应用。本文介绍了通过织梦CMS规划建设企业网站计的主要内容，包括网站定位、建站系统介绍、程序安装、网站整体设计、网站代码设计、网站空间与域名的注册、网站上传测试。探讨了网站规划设计的主要流程是确定网站建设目的、定位网站客户、理顺结构和层次、设定网站盈利模式和设定主要业务流程。深入了解了计算机网络的建站规划与设计。关键字：PHP网站设计 企业网站建设 织梦CMS建站目 录摘 要2第一章

5、引言51.1跟上时代的潮流51.2企业建站有助于提高企业形象51.3能够更好的展示企业业务范围以及企业产品51.4能够与客户及时保持联系51.5能够大大降低通信成本6第二章 织梦程序安装72.1购买网站服务器72.1.1看打开速度72.1.2服务器是单线还是双线72.1.3服务器线路是否为主干线路72.1.4看空间是否有流量限制和同时访问人数限制72.1.5是否支持GZIP压缩72.2织梦程序安装8第三章 系统概述113.1 织梦MCS简介113.2 系统开发环境及配置11第四章 网站总体结构设计124.1网站栏目结构设计134.2 网站首页设计144.2.1主页必须身份显著154.2.2主页

6、必须主题鲜明，令人印象深刻154.2.3主页必须内容明确164.3网站栏目页的设计174.3.1栏目单页面设计174.3.2 栏目频道列表页设计184.4网站内容页设计19第五章 网站素材准备20第六章 网站代码设计226.1DIV CSS简介226.2DIV CSS页面布局实现226.3织梦标签替换236.3.1网站首页标签替换236.3.2单页面代码替换256.3.3列表页代码设计276.3.4内容页代码设计296.3.5图片列表页代码设计306.3.6网页中flash图片幻灯片306.3.7文章列表模块修改31第七章 网站上传测试327.1上传模版327.2在网站后台添加网站导航目录及文

7、章内容327.3生成网站页面337.4预览查看页面效果33总 结35致 谢36参 考 文 献37第一章 引言众所周知，21世纪是互联网飞速发展的时代，大至年过花甲的老人，小到刚上小学的孩童，互联网涉及的人群越来越多。互联网给众多企业带来的商机也越来越大。企业通过网络营销已经成为各种营销手段必不可少的一项。企业建站的优势：1.1跟上时代的潮流在互联网飞速发展的大浪潮中，建站已经成为企业不可或缺的一部分。只有跟上时代发展的步伐，才不会被社会所淘汰。才能利用当下资源位企业赢取更多利益。1.2企业建站有助于提高企业形象网络营销也是一个循序渐进的过程，企业建站的效果更类似于公司在报纸和电视上所做的宣扬公

8、司自身及品牌的广告。不一样之处在于公司网站容量更大，公司简直能够把任何想让客户及大众晓得的内容放入网站。另外企业建站的费用也比其它广告方法要低的多。网站和广告这两种不一样的宣扬方法，各有不一样的效果，它们之间更多的是相互弥补，而不是相互排挤。企业经营好自己的网站，能在很大程度上提升企业的公众形象。1.3能够更好的展示企业业务范围以及企业产品企业网站的一个最基本的功能，就是能够全面、详细地介绍企业及企业产品。企业可以把任何想让人们知道的东西放入网址，如公司简介、公司的厂房、研究机构、生产设施、产品的外观、功能及其使用方法等，都可以展示于网上。1.4能够与客户及时保持联系在美国，每逢大家想知道某公

9、司有什么新商品，或旧商品有什么改变，乃至仅仅想知道该公司有什么新闻，他们就会习惯性的进入该公司的网站。由于外国公司现已习惯于把一切的新商品信息发布于网上，而且定时在网上发布有关公司的资讯。中国公司与客户之间如今暂时还不能完全形成这种联系方式，而中国企业的网站内容通常也隔较长时间才更新一次。但随着越来越多的公司在网上发布商品和信息，这种状况将会发作明显改变。现在有越来越多的公司具有网络才能，并逐渐习惯于用网络进行交流。1.5能够大大降低通信成本对于不少企业来说，每年的通信费用，尤其是涉及到进出口的通信费用，是一笔庞大的费用。利用公司网站所提供的多个电子信箱，可以有效地降低通信费用，这是企业网站的

10、一个很实际的好处。这在一定程度上也减少了企业的开支。总而言之，企业建站是顺应时代发展的产物，做好企业网站是企业网络营销的前提条件，是顺应互联网大潮流的趋势。第二章 织梦程序安装2.1购买网站服务器网站需要借助网站空间才得已在网上运行，所以网站所用的服务器空间的好坏决定了网站在网上的展示效果，同时也影响着客户的浏览心情。选择网站服务器时应该注意以下几点：2.1.1看打开速度一个好的服务器空间首要具备的一个条件是打开速度要快，据有关人员调查发现，客户打开网站页面的忍耐时间是3秒，如果超过这个时间就会有一大部分客户关掉网页而去继续寻找，这样从公司的角度来讲，无形中就会失去很多有意向的客户，而且很有可

11、能其中一部分还是会直接成单的客户。2.1.2服务器是单线还是双线单线指的是服务器拉的网线只是中国电信或者只是中国网通，如果是单线的话，就有可能造成，服务器空间用的是中国电信的网，结果有一个访问客户用的是中国网通的网，这样势必造成客户端网站打开速度慢。2.1.3服务器线路是否为主干线路一般的节点城市有以下几个：成都、南京、西安、武汉、沈阳、广州、上海、北京等8个城市，如果服务器空间在这些城市的话，那么相对支线城市来说有着得天独厚的优势。2.1.4看空间是否有流量限制和同时访问人数限制这个现像可能在网站访问人数比较少的时候体现不出来，但是随着企业宣传力度的加强，网站的访问人数也随之增加，等网站的人

12、数到了一定程度，这个问题就开始明显起来，比如说，一个空间的流量限制10G，而每一个客户访问咱们的网站的时候都需要读取网站页面+10M缓存的网站信息，这样，当每个月流量用完的时候，网站就会出现打不开的情况，如果网站访问人数特别多，就会在一个月内多次出现打不开的情况。那么自然会影响到很多客户的访问。如果同时访问人数限制地比较少，那就意味着网站不能有多个人同时访问，一旦超出了这个限度，那么后来访问的人就会出现无法访问该页面的情况。2.1.5是否支持GZIP压缩服务器空间的GZIP作用是将用户访问的页面数据通过压缩包的形式发送到客户的电脑，然后再进行解压展示，大家都知道压缩的好处就是将一个容量较大的页

13、面压缩的相对较小些，这样可以更快地通过网络传输，从而提高网页的打开速度。当然，因为开通了这个功能，服务器的负载就会增大，所以一般的服务器会关闭这个功能，因此客户在买空间的时候就需要细细询问，如果不具备这个功能的话，还是尽量的不要买。因为本站是做实验之用，只要网站空间能够完成基本的程序要求即可。本站使用的是从淘宝网购买的香港100M无需备案的虚拟主机空间，空间支持PHP程序，并附赠有MySQL数据库。完全能够满足本站的需要。2.2织梦程序安装从淘宝网上购买一个域名，将域名绑定到空间IP，能够通过访问域名来访问空间内容。从织梦CMS官网下载织梦CMS程序，解压后会看到“docs”、“uploads

14、”两个文件夹。使用FTP软件登录网站空间。本站空间中已经有一个web文件夹，需要将织梦本地文件uploads文件夹中所有的文件上传到web文件夹中。用浏览器打开域名，会出现织梦系统安装提示。首先进行的是许可协议，勾选我已经阅读并同意此协议，点击继续进行下一步。图2-1 程序安装许可协议系统环境的检测，主要看看你的系统环境是否支持织梦，一般的空间都会支持php+mysql,所以一般不会出现问题，如果遇到问题，可以找域名空间商，把对应打叉号的地方截图给他，叫他们帮忙开启。图2-2 系统环境检测接下来便是织梦安装的重中之重。数据库设定，根据系统环境的配置，填写对应的数据库信息。数据库信息一般在购买空

15、间时，空间服务商会告知具体的地址、用户名、密码等，具体填写完成即可。表前缀、数据库名称保持默认。设置管理员用户名和密码，就是登陆织梦后台的用户名密码。填写网站名称等基本信息。“初始化数据体验包”在这里我们不需要，所以不要选择。点击继续。图2-3 数据库与管理员设置图2-4 网站名称设置至此织梦的重要配置过程已经完成了，点击“登录网站后台”登录后台。图2-5 登陆后台第三章 系统概述3.1 织梦MCS简介织梦CMS系统是国内最专业的PHP网站内容管理系统，他将是您轻松建站的首选利器。采用XML名字空间风格核心模板：模板全部使用文件形式保存，对用户设计模板、网站升级转移均提供很大的便利，健壮的模板

16、标签为站长DIY自己的网站提供了强有力的支持。高效率标签缓存机制：允许对类同的标签进行缓存，在生成HTML的时候，有利于提高系统反应速度，降低系统消耗的资源。模型与模块概念并存：在模型不能满足用户所有需求的情况下，DedeCMS推出一些互动的模块对系统进行补充，尽量满足用户的需求。众多的应用支持：为用户提供了各类网站建设的一体化解决方案，在本版本中，增加了分类、书库、黄页、圈子、问答等模块，补充一些用户的特殊要求。面向未来过渡：织梦团队的组建为织梦CMS的发展提供坚实的基础，在织梦团队未来的构想中，它以后将会具有更大的灵活性和稳定的性能。3.2 系统开发环境及配置DedeCMS是基于PHP和M

17、ySQL技术开发，可以同时使用在Windows、Linux、Unix平台，可以直接购买支持PHP和MySQL的网络服务器空间。其具体环境如下：Windows平台IIS/Apache+PHP4/PHP5+MySQL3/4/5，如果在windows环境中使用，建议用DedeCms提供的DedeAMPZ套件以达到最佳使用性能。Linux/Unix平台Apache+PHP4/PHP5+MySQL3/4/5(PHP必须在非安全模式下运行)建议使用平台Linux+Apache2.2+PHP5.2+MySQL5.0PHP必须环境或启用的系统函数 allow_url_fopen GD扩展库 MySQL扩展库

18、系统函数（phpinfo、dir）第四章 网站总体结构设计导航方面，应该显示站点最重要的内容，以便访问者查看顶级类别时对查找的内容有很好的感觉。在显著的位置放置，最好在紧邻页面主体的正下方。将条目分组，将相似的条目放在一起。分组能帮助访问者区分相似和有关连的类别，从而容易查找。不要包括主页的动态链接。不要为同个链接提供多个导航。链接方面，尽量区分链接使它们更具可读性，精心处理链接文字使它们言简意赅。下划线是对链接的重要提示。链接的标准颜色是蓝色，用不同的颜色表示已访问和未访问的链接状态。不要用普通的指令作为链接名称，如“点击这里”“链接”；不要复制导航条链接不要设置非直接链接，链接应该旅行它的

19、承诺。其他的图片链接也应该做链接标志。不要使用框架。使用框架会产生许多问题，没有17寸的显示器几乎不能显示整个网站，更重要的是搜索引擎常常被框架混淆，从而不能列出你的网站。不要使用滚动条。人们厌恶在网上使用滚动条，它基于一个浮动的框架，为了阅读所有的文本，访问者不得不使用滚动条。图形、动画和声音。用图形有意识的表达内容，可以大大提高主页的表现力。但另一方面，图形会增加下载的时间，所以要谨慎使用，与之相似的是动画。以适当的尺寸编辑图像和图形，避免使用过大的图片，让访问者先预览小图像。在主页上不要仅为吸引注意力而使用动画，它会减弱访问者对其他元素的注意力。访问者在很多网站上都能看见动画，对访问者来

20、所动画已并不新鲜。绝不要以动画表示主页上的关键元素，如“标志”、“主标题”等，它们难以阅读。动画图标很容易耗尽计算机资源，应该给访问者一个跳过动画的选择。声音的运用也应该得到警惕。因为过多的使用声音会使下载速度很慢，同时并没有给访问者多少好处。首次听可能会很有趣，但多次后肯定会很烦人。字体和背景色。不要使用小字体，永远不要使用小于10磅的字体，阅读小字体会造成“视觉伤害”；文字也不要太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。因为这符合阅读习惯。最好使访问者能调整字体大小；避免文字与背景对比不强烈；使用纯

21、色背景；浅色背景上使用深色字比深色北背景上使用浅色字要好；白底黑字。使用著名的插件。如果网页上有声音或视频，要保证访问者通过使用某个知名的插件，能够听到或看到，因为许多访问者并不愿意浪费很多时间去下载可能仅使用一次的插件。没有什么比要花很长时间下载页面更糟糕了。有研究显示，如果一个网站页面的主体在15秒之内显现不出来，访问者会很快失去对该站的兴趣，很容易放弃这个网站，设计者应该控制主页的大小，使它的下载速度在30秒之内。当然，也有例外，比如内容实在太精彩，人家不去不行。再像视觉艺术类站点，也不能以快为唯一设计标准。不过，即使这类站点，也该在加个导引页，给读者一个提示，别不理睬人家的心情。但是大

22、多数网站还是以内容为主，大部分人感兴趣的还是信息量，追求的是速度。网站页面设计中非常值得注意的一个地方，由于人们阅读材料习惯于从左到右，从上到下进行，因此他们眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯。我们在组织内容时可以把希望浏览者最先看到的内容放在页面的左上角和页面顶部，如公司的标记，最新消息以及其他一些重要内容等等；然后按重要性递减的顺序，由上而下放置其他一些内容。重要的内容应当是浏览者最容易发现，而不是放在很深的链接之后的，页面上的广告为了达到宣传效果，通常也放在页面顶部显著位置。在段落中不宜放入过多的链接，否则会引起浏览者浏览上的混乱，最好的办法是按逻辑关系选择放置，

23、而不是随便乱放。如果可能的话，应该把链接放在一些相关的说明性文字旁边。比如，在一列放置文本，在另一列放置链接。这样就可以提示浏览者去使用这些链接。4.1网站栏目结构设计物理结构：网站物理结构，就是指网站的实际目录结构，网站物理结构，分为网站扁平结构和网站树形结构。扁平结构：扁平结构的网站，就是指所有的网页都在根目录下。多用于建设一些中小型企业网站。优点：有利于搜索引擎抓取。缺点：内容杂乱，用户体验不好。树形结构：树形结构的网站，就是网站根目录下有多个分类，就是给网站设立栏目或者频道。树形结构的网站一般适合类别多，内容量大的网站，像资讯站，电子商务网站等等。优点：分类详细，用户体验好。缺点：分类

24、越深，不利于搜索引擎抓取内容。网站分8个导航栏目，“站长知识”栏目下分4个子栏目。图4-1 网站导航栏目设计各栏目名称、类型、功能对照表如表4-1：表4-1 网站栏目类型与功能对照表栏目名称栏目类型栏目功能服务项目单页面介绍本公司主要业务及公司特色服务流程单页面介绍本公司的服务及售后流程解决方案文章列表介绍各类型网站的建设及优化方案案例赏析图片列表以图片列表的方式展示本公司的服务案例及工作成果公司简介单页面对本公司做详尽的介绍与优势介绍新闻资讯文章列表展示相关行业的新闻咨询站长知识建站知识文章列表介绍各类型网站的建站要点知识网站优化文章列表介绍网站优化中的问题及解决方法网络推广文章列表介绍网站

25、推广的方式方法途径网络营销文章列表介绍网站的整体营销思路与方法联系我们单页面展示本公司的联系方式4.2 网站首页设计在任何站点上，主页是最重要的页面。会有比其他页面更大的访问量。有很多形象的比喻可以说明主页的作用：主页是杂志的封面；主页是对外的脸面；主页是一件艺术品；主页就象是门厅；主页就象是书的目录；主页就象一本小册子。所有上述比喻都在一定程度上反映了主页的特点，但每个比喻事物都与主页有本质上的不同。主页的目的是多样的，访问者的目的也是多样的。我们的设计要重点突出一目了然，又要充分理解访问者的目的，这都是设计主页的关键。网页设计有其自身的特殊规律，网页作为传播信息的一种载体，同其他出版物如报

26、纸、杂志等在设计上有许多共同之处，但是，表现形式、运行方式和社会功能都有所不同，一个网站的主页如何设计还会影响访问者经历的许多其他方面，例如商标的认可度、组织印象、审美和信任度，成功的网站要以访问者为中心和以任务为驱动来设计。一般来说，访问者在第一次访问您的主页前，早以看过非常多的主页。这时访问者早已在心中积累了一般主页应该怎样工作的模型。所以主页设计不仅要掌握网页版式编排的技巧与方法，通常它还必须遵循一些设计的基本原则。4.2.1主页必须身份显著机构名称位置显著：主页必须适当强调标志、品牌和最重要的任务。在显著的位置、以适当的大小显示机构的名称和/或标志，此标志区域不需要很大，但应该比它周围

27、的条目更大更显著，以便使访问者进入站点时首先引起访问者的注意。页面的左上角通常是最好的位置，因为我们习惯从左到右阅读。机构职能的简要说明：在主页上建立一个关于我们的链接，给访问者一个机构的大致形象。4.2.2主页必须主题鲜明，令人印象深刻作为视觉设计范畴一种的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解

28、。只有两个方面有机地统一，才能实现最佳的效果。“第一印象”的好坏，在很大程度上决定着访问者对网站的取舍。而这样的机会只有一次，如果第一印象不佳访问者就不会再来访问。这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。主页的版面设计是一个十分重要的角色。网页版面设计布局常用到的形式有“T”结构布局，在网页设计中应用比较广泛，布局的优点是结构清晰；“口”型布局能够充分利用版面；对称对比布局视觉冲击力强；广告形式的布局漂亮吸引人。主页页面布局必须合理，页面的宽度：许多家庭最常用的分辨率是800*600，为了更好的显示

29、页面，页面的宽度应该设计成770像素。页面的长度：一到三个屏幕，设计过长的主页要谨慎。超过四屏的话或许应该简化主页。主页页面色彩的正确运用要根据版面的风格来加以确定，每种色彩在饱和度，透明度上略微变化就会产生不同的感觉，要注意色彩的协调性，盲目的使用色彩会把页面搞的一团糟。定位自己的网站，选择好切合自己的色彩。页面上的空白，往往容易被人忽视。适当的在页面留有空白，版面才会生动清晰起来。留好空白和缝隙的页面是有品格有智慧甚至是有实力的表现。不管种种都要做到加强视觉效果；加强文案的可视度和可读性。4.2.3主页必须内容明确主页不需要通过刻意的标新立异来吸引访问者的注意力，最终访问者访问网站的目的在

30、于网站的内容。其他的一切皆是背景，设计就是为了使访问者能够访问内容。网站的主页应该能够使访问者快速浏览本页确定网站用途。如何组织网站是个非常重要的问题。内容的分类直接影响到访问者查找信息的难易程度。内容组织的好坏严重影响导航。应该仔细分析、设计、测试、修正分类方案，直到它能够适用于目标访问者为止。绝大部分部分访问者会大致浏览一下标题内容，而不会仔细阅读，所以必须优化内容，用尽量少的词语表达尽量多的信息，使之适合快速阅读。内容的写作对主页尤其重要，因为主页必须最大努力捕捉并抓住访问者的注意力，而且主页是用尽量少的空间表达尽量多的标题的地方。要保证很容易地访问主页上重点介绍的内容。主页的第一屏的版

31、面非常有限，应该放最重要的内容，冗余内容使页面更加拥挤，而国内有很多网站会在导航条的下方或页面的最上方放上类似于“将本网站添加到收藏夹”、“日期”、“将页面设置为浏览器默认首页”、“提供收藏站点”等浏览器和操作系统本身所具的功能和信息。过期的内容会给人以无组织的印象，未完成的内容会失去访问者信赖。本站首页才用的是文字带小型FLASH形式，主要是让用户从进入网站的首页就可以很清楚的知道我们这个网站的框架。包括内页的所有栏目等。之所以不采用全FLASH作为网站首页，主要是因为FLASH首页虽然很漂亮美观，但是会影响用户打开网站的速度，很容易失去用户。首页我们只要做到可以展示产品并且有一定的结构就可

32、以了，首页也要必备的一个功能就是能够动态添加的界面，比如新闻，图片，友情链接，这些内容是我们在日后维护工作中的，所以要慎重考虑。用文章标题堆砌某一关键字，用图片的ALT提示，来堆砌关键词等等。图4-2 网站首页模块布局4.3网站栏目页的设计4.3.1栏目单页面设计网站的单页这个是存在于很多企业网站的内容，单页优化有着一定的好处，首先网站的单页是用HTML书写，并且完全静态化，这个是符合搜索引擎的，有利于优化，对搜索引擎友好，这种页面的布局往往需要的是大气，简洁，直入主题。本站栏目单页面设计才用页面头部、底部、右侧不变，页面主题通过左侧展示，以图片加文字的形式更符合用户体验。图4-3 栏目单页面

33、布局4.3.2栏目频道列表页设计网站的频道列表页就是通常所指的新闻列表、图片列表。简单的理解就是在网页中通过页面图片列表或文章标题列表的形式，展示本栏目下的内容页标题。用户可以通过点击相应的图片或文字打开相应的内容页，查看文章内容。“解决方案”栏目页效果如图3-3.2：图4-4 频道列表页布局4.4网站内容页设计内容页头部、底部、右侧保持与其他页面一致，在网站后台添加的文章会在页面左侧显示，包括标题、文章信息（作者、时间）、内容（图片、文字）都能在这里看到。图4-5 内容页布局第五章 网站素材准备网站的主题思想、版面设计完成之后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想

34、让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。网站素材收集大体有以下几个方法：一、使用搜索引擎获取素材，搜索自己想要素材的关键词，获取图片。关键字就是在使用搜索引擎时输入的、能够最大程度概括用户所要查找的信息内容的字或者词。图片或者视频的查找。百度搜索时选择图片或者视频分类就可以直接查找图片或者视频。素材搜集的途径有多种形式，利用互联网搜索能快速收集到需要的各类素材，要想素材能更贴切网站主题，我们还需要对收集到的素材进行

35、编辑。利用互联网搜索素材，对操作能力要求比较高，尤其是各类素材的下载保存问题，素材引用牵涉到知识产权问题，这点上不容忽视，特别强调引用出处。二、文字是网站中最主要的元素，在网站建设过程中，要处理大量的文本资料。获取后的文字素材一般都是在word中进行下一步处理。文字素材的获取技术主要有：1、自己录入（录入方法由自己定）；2、用扫描仪：采用OCR文字识别技术将图像文字转换为文本文字；3、从网上下载。（选中文本，右击/复制后粘贴到word等文本工具上）。三、图片的收集：1、网上下载(看好的图片在上面右击另存)如果有的图片不可右击另存，方法是用 windows的抓图功能alt+screen，或用其它

36、抓图工具。抓下后粘贴在画图、office中的word或ppt、photoshop等软件上，如要处理就可用图片处理软件或画图软件进行处理。2、书上或照片上的图片：用扫描仪扫描、用数码相机拍，用摄像头抓拍。3、实物、实景：用数码相机、摄像头等。4、从VCD中也可收集图片：用超级解霸边放边点相机图标或控制菜单下的保存。三、如果有的网页不给复制怎么办？第一种方法：1、选择并打开页面中的“查看”菜单，指向“源文件”命令并单击。2、在“记事本”应用程序窗口中选择编辑区内所有字符右击“复制”，然后到相应的程序内进行编辑。第二种方法：1、在上述窗口内“文件”菜单中的“另存为”命令。2、在弹出的窗口内选择保存文

37、件的格式为“文本文档”，给文件命名保存即可。第三种方法：1、单击打开页面中的“文件”菜单，指向“使用FROMPAGE编辑”命令并单击。2、在此编辑并保存相关文字资料即可。第四种方法：1、 在页面“查看”菜单中选“internet选项”。2、 选“安全”标签，点“自定义级别”在“设置”中找到“脚本”，将java小程序脚本选为禁用却可。第六章 网站代码设计所谓的网页代码，就是指在网页制作过程中需要用到的一些特殊的“语言”，设计人员通过对这些“语言”进行组织编排制作出网页，然后由浏览器对代码进行“翻译”后才是我们最终看到的效果。本网站在制作网页时首先通过DIV+CSS实现页面布局效果。先做出单个基本

38、的首页、单页面、图片列表页、文章列表页、内容页，然后将页面中对应的代码替换成织梦系统代码，实现网页中对应的内容调用，生成整站的页面内容。后期网站更新只需要在后台添加文章就能在前台生成对应的页面，而不用重新制作一个页面。这就是织梦CMS这一类建站系统的方便之处。6.1DIV CSS简介DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提及DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来

39、网络应用更多的需求。“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。6.2DIV CSS页面布局实现本站整体大部分使用DIV元素填充页面，使用SCC样式定义页面样式。首先定义整站页面一些相同样式的标签元素，例如a标签、h1标签、h2标签等这一类标签的样式，统一页面风格精简样式代码。代码为：网站标题body margin:0px;font-size:12px;color:#333;a:link,a:visited,a:active text-decoration:none; colo

40、r:#333; font-size:12px;a:hover color:#F00; text-decoration:none;dl,dl dt,dl dd,ul,ul li margin:0px; padding:0px;list-style:noneimg border:noneh1,h2,h3,h4,h5,h6 font-size:12px; font-weight:normal;margin:0px; padding:0px;.clear clear:both;H1标签DIV元素 链接6.3织梦标签替换织梦模板引擎的代码样式有3种形式：dede:标记名称 属性=值/dede:标记名称

41、属性=值/dede:标记名称dede:标记名称 属性=值自定义样式模板(InnerText)/dede:标记名称如果使用带底层模板的标记，必须严格用dede:标记名称 属性=值/dede:标记名称 这种格式，否则会报错。6.3.1网站首页标签替换标题替换：dede:global.cfg_webname/关键词：描述：网页js、css样式路径修改：dede:global.cfg_templets_skin/style/网站内图片路径调用：src=dede:global.cfg_templets_skin/images/图片CSS图片调用路径修改：改为上级目录下的images，（./images/

42、图片）站点跟网站（logo链接）：dede:global.cfg_basehost/首页链接：dede:global.cfg_indexurl/导航标签调用：顶级栏目导航：首页链接+（栏目个数、导航类型top、属性样式、声成标签）+需要重复的+导航结束标签（/dede:channel）导航栏目链接：field:typelink/导航栏目名称：field:typename/导航栏完整代码：网站首页 dede:channel row=7 type =top currentstyle=typename field:typename/ /dede:channel图6-1 导航条调用代码网页局部调用代码

43、：调用头部代码：dede:include filename=head.htm/调用底部代码：dede:include filename=footer.htm/文字友情链接调用：dede:flink row=24 type=textall field:link / /dede:flink图6-2 友情链接调用代码版权信息：dede:global.cfg_powerby/ 备案号：dede:global.cfg_beian/图6-3 底部版权信息调用代码添加新变量（站长QQ、邮箱、电话）：站长QQ：dede:global.cfg_qq/ Email: dede:global.cfg_email/

44、电话: dede:global.cfg_phone/网站地图dede:global.cfg_powerby/. dede:global.cfg_beian/图6-4 自定义底部版权信息图6-5 自定义底部版权信息效果6.3.2单页面代码替换列表页Title替换：dede:field.title/_dede:global.cfg_webname/同理替换列表页关键词、描述。更改css、js样式 和图片目录后台修改栏目单页设置：图6-6 单页面后台设置图6-7 单页面模版选择删除栏目页单页左侧内容，使用：dede:field.content/ 替换。实现在后台添加内容直接调用在前台显示。图6-8

45、后台添加单页面内容图6-9 单页面内容调用代码举一反三制作别的栏目单页面（灵活运用）。从头部、尾部调用延伸出右部调用，为所有右侧相同的网页使用右部调用图6-10 右侧页面调用代码6.3.3列表页代码设计全页面 Title、关键词、描述 样式路径、图片路径 等 标签替换。全页面 头部调用、底部调用、右部调用后台列表页设置：图6-11 列表页后台目录设置图6-12 列表页后台模版设置删除多余列表条目，保留一条，列表开始结束标签：dede:list pagesize =6/dede:list列表标题：field:title/列表连接替换：field:arcurl/列表简介替换140字符：field:

46、description function=cn_substr(me,140)/.图6-13 列表调用代码后台添加2篇文章，更新栏目，查看效果。列表页分页代码：图6-14 列表分页调用效果在织梦默认模版list_article.htm中，复制 dede:pagelist listitem=info,index,end,pre,next,pageno,option listsize=5/ 粘贴到本页面分页部分。图6-15 列表分页代码列表页分页样式：在织梦默认样式templetsdefaultstyle中找到page.css样式，复制类标签为.dede_pages的所有样式，粘贴到本站样式中。效果

47、如图：图6-16 列表页分页样式6.3.4内容页代码设计：全页面 Title、关键词、描述 样式路径、图片路径 等 标签替换。全页面 头部调用、底部调用、右部调用后台列表页设置：需要在本栏目页设置文章模版图6-17 内容页后台模版设置替换文章标题、发布时间、来源、作者、正文标签代码。文章如需分页，在文章中插入分页符，使用织梦默认模版templetsdefault article_article.htm中的代码： dede:pagebreak/ 放到文章内容标签之后图6-18 内容页分页代码图6-19 内容页分页效果6.3.5图片列表页代码设计前期步骤与文字列表页相同。根据需要替换列表图片的标题

48、、链接、点击数等，替换分页代码添加图片文章，选择图片作为缩略图并裁剪内容页细节修改不再详细记录6.3.6网页中flash图片幻灯片使用织梦默认首页模版wwwtempletsdefaultindex.htm中的代码：到复制到自己网页代码对应位置中，修改宽度、高度、幻灯片放映、调用5条、调用栏目ID 4。图6-20 网页Flash幻灯片代码效果：（实际显示缩略图）图6-21 网页Flash幻灯片效果6.3.7文章列表模块修改只保留一条列表条目，替换为织梦标签图6-22 文章列表代码效果：图6-23 文章列表效果图片列表模块，操作方法相同，效果：图6-24 图片列表效果第七章 网站上传测试网站测试是指的当一个网站制作完上传到服务器之后针对网站的各项性能情况的一项检测工作。它与软件测试有一定的区别，其除了要求外观的一致性以外，还要求其在各个浏览器下的兼容性。以及在不同环境下的显示差异。性能测试：连接速度测试。在电话拨号、宽带上网等不同网络环境下的访问速度。负载测试：负载测试是在某一负载级别下，检测电子商务系统的实际性能。也就是能允许多少