[小学]丹凤朝阳

[小学]丹凤朝阳 摘 要 随着现代计算机科学的发展，网络已经越来越普及，如今网络已经成为每个人生活的一部分，同时网络也提供了一种很好的信息交换平台，人们获取信息的方式更多是来源于互联网。吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。从网页设计的角度出发，介绍一些设计中的要素和技巧，例如:框架、CSS样式的使用„„ 关键词:网页设计; 要素; css样式 引 言 Internet是当前世界上规模最大的计算机网络，利用Internet可以迅速地浏览各种信息资源和相关服务。作为此专业的专业人才，更应当掌握这么技术，在实际工作中大展宏图，这就涉及到网站建设。网站的设计理念与策划的介绍，网站的制作平台的造型与配置，网页设计的技术都是至关重要的。而在整个的网站建设中，动态网页的开发占有重要地位，它的出现为沉闷的网络世界带来的生机，动态的有条理的数据配合，友好的交互性强的界面，再加上丰富的内容，这次网站的设计就是一个新的尝试。 Internet已经成为当代信息革命的主角，随着网络的不断发展，网络应用日益深入人心，网络技术的不断发展以及与之相应的网页设计已成为最吸引人的技术，网页三剑客的功能强大并且广泛流行，是专业的制作软件。 随着互联网络技术的不断普及，网页编辑技术的发展、完善，产生了众多的网页编辑技术，在这些编辑技术中尤其以Macromedia公司开发的Dreamweaver最为著名。2005年4月，Adobe公司通过价值34亿美元的股票收购了Macromedia公司，人们普遍认为Dreamweaver将会被Adobe Go Live所替代，但是到了同年8月，Macromedia公司依然如期发布了Macromedia Studio 8,这其中就包括Dreamweaver 8。Macromedia Studio 8是用来建立Web站点和应用程序的专业工具。它将可视化的网页编辑技术、应用程序的开发功能和代码的编辑能力有机地结合在一起，保证了各个层次的开发人员、设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序，成为网站设计专业人员 和广大网页制作爱好者的首选。 随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。现在，网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，因为表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，是内容与形式的统一。它要求设计者必须掌握以下三个主要原则: 1. 主鲜明 设计必须表达的是一定的意图和要求，有明白的主题，并按照规律和形式将主题主动地传达给浏览者。目的是使主题在适当的环境里被人们即时地理解和接受，以满足人们的使用和需求，这就是要求设计者不但要单纯、简练、清晰和准确，而且在强调艺术性的同时，更应该注重经过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。 2. 形式与内容统一 任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂” ;形式是构成内容诸要素的结构或是内容的外部表现方式。但是网友设计也不能一味地追求形式美，也要适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺少艺术的表现，网页设计都会变的空泛而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表现方式。内容决定形式，形似反作用与内容。一个优秀的设计定是形式对内容的完美表现。 3. 强调整体 网页的整体性包括内容和形式上的整体性。网页是传播信息的载体，它要表达的是一定的内容、主题和意念，在适当的时间和空间环境里为人们所理解和接受，它以满足人们的实用和要求为目标。网页的结构形式是由各种视听要素组成的。再设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用。这主要从版式、色彩、风格等方面入手。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。 在一个网站中，最重要的页面当属主页，所以一个有特色的主页，必须包含有四个要素:文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。 1.图片要素 要设计出漂亮的主页，首先要熟悉像Photoshop这样的图形图像处理软件，这样，经过处理过的图片会使主页更加丰富多彩。 2.排列方法要素 主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，又有图片;文字有大有小，还有标题和正文之分;图片有大小而且有横竖之别。图片和文字都需要同时展示给浏览者，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、综合框架型、封面型、Flash型、变化型等。 如果内容非常多，就要考虑用“国字型”或“拐角型” ;而如果内容不算太多而是一些说明性的东西比较多，则可以考虑“标题正文型” ;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，“封面型”为首选;“Flash型”更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还有就是“变换型”了，只有不断的变化才会提高，才会不断丰富我们的网页。 3(色调要素 色彩在网页所占比重很大。由来合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主题文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。 因此，网页设计涉及到对多种软件、多种知识的学习和应用，以及个人的审美观等等。所以要想制作出漂亮的网页，需要一个逐步学习和经验积累的过程。网页设计还有更多的技巧，有待于我们去挖掘和研究。 系统设计 1.Dreamweaver简介 Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver 软件界面 说到MACROMEDIA公司大家不会感到陌生，著名的多媒体开发工具AUTHORWARE和DIRECTOR均出自该公司的旗下，以及目前在互联网(Internet)上越来越流行的网络多媒体开发工具FLASH也是出自该公司的旗下。而DREAMWEAVER则是MACROMEDIA公司继FLASH以后向互联网(Internet)推出的又一梦幻工具。DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。 说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)，两者各有千秋。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点: 一、 难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一 点在结构复杂一些的网页(如分帧结构、动态网页结构)中便可以体现出来; 二、 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。 而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。 如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的 高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。 但是我说过这是在DREAMWEAVER之前，现在我无意说DREAMWEAVER已经实现网页设计师的梦想，但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。 2. 设计网站的目的 此次的网站是以介绍家乡为主线的。丹阳——江南文物之邦。为了更好地突出这座城市的特色，因此从丹阳的丹阳概况，文化丹阳，丹阳地图，丹阳经济，城市名片，风景名胜，丹凤朝阳，联系我们这八个方面对丹阳进行了一定程度的介绍。希望大家可以对丹阳有更进一步地了解。这就是我制作这个网站的目的。 这次网站的建设，我选用了网页三剑客软件(Macromedia Dreamweaver 8 软件、Macromedia Fireworks 8软件和Macromedia Flash 8软件)以及图片处理软件Adobe Photoshop CS2软件和access数据库。其中，还是以Macromedia Dreamweaver 8软件和 Adobe Photoshop CS2软件为主。Macromedia Dreamweaver 8软件是目前设计网站首推的软件之一，用它制作网站，既简单又便捷。Adobe Photoshop CS2软件是图片处理的软件，用它可以是图片达到自己所想要的效果，让其更有利于网站的建设。再加上Macromedia Flash 8软件，这门软件不仅可以制作网页，也可以制作动画效果，一个网站若是有了这些动态的效果，就会给整个页面带来不一样的效果，会使整个网站更具有立体感和鲜活感。 3.网页设计准备 在制作网页之前，必须了解和掌握以上所说的软件，只有对其有了一定的认知，才能在下面的制作过程中，事半功倍。因此，在那之前，就必须阅读大量的书籍和进行大量的练习与操作。 制作网页，就必须要做好准备工作。首先，要确定主题，收集素材，想好大概的框架，还有图片、文字等等。我围绕“介绍家乡——丹阳网站”这个主题，从网上搜集了大量的资料、图片、文字等等。利用Photoshop对图片进行了一些相关的处理，然而我也利用Flash 8.0软件制作了动画，以便网站的制作。 4.设置网站的层次，页面的排版 网页的版式设计同报刊杂志等片面媒体的版式设计有很多共同之处，它在网页的设计中占领着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将所有元素进行有机的排列组合，将理性思维个性化的变现进去，是一种具有个人风格特色的传达方式。 但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。所以，必须在排版之前，先在纸上勾画出网站的大概布局。 网站布局如下(简要): 首 页 文丹丹城风丹丹 化阳阳市景阳 凤 丹地经名名概朝 阳图济片胜况 阳 其中，“丹阳概况”页面，“文化丹阳”页面，“丹阳经济”页面，这三个页面，都制作了相对应的子页面，来对其进行补充说明 网页的主要设计 这次，建设网站最主要的目的就是为了介绍我的家乡——丹阳。而为了让人们第一眼就留下深刻地印象，然后去了解整个网站，从而了解丹阳的经济，文化等等，就一定要有夺人眼球的地方。此次，这个网站最大的亮点就是每个网页上方的图片(如下图所示)。 这张图片是我Adobe Photoshop CS2软件制作的，近几年丹阳的发展非常迅猛，居民小区也越来越多，“丹凤朝阳”是丹阳代名词，是所有丹阳人民的希望。因此后面的网页除了文化丹阳都是用的这幅图片。 1.主页面的设计 现在开始来设计网站的主页面，主页采用分栏和板块结构相结合的板型，由于这两种版式结构的结合清晰、分类明确，所以一般用在信息量较大的网站，在不同的分栏中发布不同类型的信息，让浏览者很清楚地获取这些信息。设计主页除了需要了解网页制作软件的功能之外，还需要考虑网页的布局和排版，网页设计人员的美术素养也关系到主页设计的质量高低。一般来说，主页要做到外表美观大方，内容简明扼要。这需要发挥设计人员的主观想象力和创造力。主页面如下图所示: 对于介绍家乡——丹阳的网站的主页，特点是布局要有特点，板块清晰，经过缜密的筹划，制作完成了如图所示的主页。主页主要包含了以下几个部分的内容: 1.主页的上面是导航栏:丹阳概况，文化丹阳，丹阳地图，丹阳经济，城市名片，风景名胜，丹凤朝阳。 2.主页的中间由一个个的板块组成，如果点击这些板块，就可以更好的了解丹阳的信息。 3.主页的中下部插了一个flash动画。 4.最下面是版权信息。 2.“丹阳概况”页面的设计 这个页面还是采用分栏和板块结构相结合的版型，这样可以让浏览者对要介绍的内容更加直观、具体，从而有更近一步地了解。这个页面主要以介绍丹阳的概况为主，分别从交通地理，行政区划，财政金融和社会发展这几个方面大概的介绍了丹阳的情况。此外，点击页面上的“详细”时，可以使浏览者看的更清楚。“丹阳概况”的页面如下图所示: 如果你想对丹阳的社会发展更多的了解就可以点击“详细”，点击“详细”之后会出现的页面如下: 为“详细”做的属性设置如下: 其他的“详细”都可以点击，点击之后都会有其对应的子网页。 3.“文化丹阳”页面的设计 “文化丹阳”这个页面主要是让浏览者更详细的了解丹阳的文化，历史和艺术 荟萃。页面结构设计如下: 这个页面的特点就是知识丰富，知识面全，比如点击“历代开发”时，页面如 下: 如果想了解新中国成立后开发的怎样的，那就点击“新中国成立后开发”，此 时页面如下: 以此类推其他的都可以点击，包括其他的都可以点击，比如点击“太平盛会” 时，页面如下: 4.“丹阳地图”页面的设计 这个页面主页的是让大家更清楚的了解的丹阳的大体结构，和交通路线。“丹阳地图”的页面如下所示: 当点击“丹阳市行政区划图”时页面就会出现上图的图片，而当点击“丹阳交通图”时，页面就显示如下: 想看的更清楚的话可以拖动滚轴，或者在点击图片，图片就会变大，方便寻 找。“丹阳市行政区划图”和“丹阳交通图”的代码如下: 5.“丹阳经济”的页面设计 这张页面主要以文字详细的介绍了丹阳的经济。“丹阳经济”的页面如下: 6.“城市名片”页面的设计: 这个页面主要介绍的是丹阳的特色，丹阳特有的一些特色和值得丹阳人骄傲的 眼镜市场。页面设计如下: 这个页面主要采用的是板块结构。板块与板块之间很清晰，每一个特色也都做 了超链接，比如点击“吕氏三杰 名扬天下”时，页面就会有更详细的解释，如 下图所示: 其对应超链接的属性如下: 7.“风景名胜”页面的设计 这个页面主要介绍了丹阳的风景，以图片的方式体现。页面如下图所示 这个网页选择了一百多张图片，从各个方面体现了丹阳的风景特色，比如点击【4】时，页面如下图所示: 8.“丹凤朝阳”页面的设计 结 束 语 经过老师耐心细致的指导，及同学之间的相互交流，同时也翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)经过近一段时间的努力，网站的设计制作终于告一段落了。总结这次“介绍家乡——丹阳”的网站开发制作过程，综合使用了目前因特网上比较流行的各种静态制作方法。从中，也学习到了静态页面的处理风格，色彩搭配和页面导航等方面的知识。在首页的设计过程中，我学会了如何使用超链接;而在其他页面的设计过程中，我学会了如何使用一些图片的特殊动态效果，也知道了要想做好一个网站，不是光靠一个软件就行的，要多个软件进行操作，才会达到一定的效果。在具体的操作中还要特别注意各个模块之间的联系，积极各个步骤中细节的设置，其中部分操作还觉得有些生疏，今后还需读阅资料，认真学习，争取更大地成功。 致 谢 在这篇论文完成之际，在此我非常衷心的感谢我的指导老师周泽如老师，他在百忙之中抽出时间来为了我们提出了许多宝贵的意见和建议，并指导讲解我的论文才得以顺利地完成，还有就是乔敢同学，很多资料都是他上网找的。 在即将离开学校之际，我再次衷心感谢我的所有老师对我的关心和帮助，以及在设计过程中所帮助过我的同学朋友们，谢谢你们为我的大学生活划上了一个完满的句号。 参 考 文 献 1.王国平 涂巧霞,《网页三剑客基础与实践教程》.电子工业出版社.2002 2.刘强,《Adobe Premiere Pro 2.0标准培训教材》.人民邮电出版社 .2006 3.图片 文字 www.baidu.com