《网页设计与制作》论文

《网页设计与制作》论文姓名：学号：专业:2013年12月11日一网页设计与制作的版面布局在考虑东华理工的主要版面，我们选择的是“门”形布局：页面上部是网站的标志和广告条，左面是主菜单，右面放友情链接等，中间是主要内容，布局类似于一个“门”字。1网页的布局结构从上图中可以看出，网页的整体布局结构划分为四行（从上到下），第一行来制作Logo，第二行制作导航，第三行制作内容，第四行制作版权信息。然后在第三行又拆分为两列（从左到右），分别在左右两列中制作不同的内容。在这个基础上，可以对网页布局进行更细致的拆分，如果说前面的拆分是用来制作网页的大框架，那么接下来拆分的就是内容区域了，这里分析的方法和前面是完全一样的，拆分后的效果如图1-13所示，其中的文本表示在当前“矩形块”中放置的内容。2网页的布局设计网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。简单来说，可以把网页中的内容看成是一个一个的“矩形块”，把多个“矩形块”按照行和列的方式组织起来，就构成了一个网页。下面举例来进行说，如1所示，为东华理工长江学院的网页效果图。二网页的风格的设计“门”形布局：页面上部是网站的标志和广告条，左面是主菜单，右面放友情链接等，中间是主要内容，布局类似于一个“门”字。对称对比布局：该类结构采取左右或者上下对称布局，一半深色，一半浅色，一般多用于设计型站点。该种结构的优点是视觉冲击力强，缺点是将两部分有机地结合比较困难四网页的图像的制作方法网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题。对于网站的色系，应该要在网站开始制作前，做好规划及设计，才不会到着手制作网站时，难以搭配，甚至造成混乱的设计。网页的底色是整个网站风格的重要指针。举例来说，以黑色作为背景颜色的网页，因黑色本对人的视觉上会造成黯淡的感觉，若是拿来用作活泼的儿童网站，就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的，与黑色的沉稳、黯淡，很难联想在一起。再举个例子，若是写一个有关于环保的网站，若用暗红色作为网页底色，决计不会有人联想到网页的内容是与环保有关。当然，每个人的审美观不同，可能也会对颜色的代表性看法不同，但既然网站不是只写给自己看的，就应该要注意到大部分人可能会有的观点，然后以众人居多的观点出发，来设计网页。文字字型上的设计，最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型，才能达到最佳浏览效果，这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容，不可能会因为这种「为达最佳浏览效果」，而自行下载所需要的字型。当所要求的字型若不下载，并不会影响到网站内容上的浏览与不便，那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来，对于网页设计者来说，无非是非常可惜的，因为当初的设计风格却未能让浏览者一窥全貌，岂不是白费心思的吗？何谓图片的色系？以色彩学简单的区分，可分为冷色系与暖色系，再详细一点的区分，又可分出各种颜色的色系，而色系的区分，就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应，就是比较困难的地方了。对于网页初学者来说，要绘制一张图并非易事，要绘制一张符合自己网页风格的图，更是困难重重。大部分的网页制作者，并不大可能驾轻就熟的使用影像处理软件或绘图软件，于是乎，网页素材的网站就开始盛行了。当然，不会使用绘图软件并不代表网页就不能设计的很出色，若是能将网络上的素材资源妥善利用，网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片，就是门很大的学问了。选择图片该以何作为标准呢？举例来说，若网站内容为科学探讨，当然不能以卡通图片来作为插图，试想，当您正在浏览一个有关天文学的网站，却满是皮卡丘的可爱图片，不是很不协调吗？再举个例子，如果一个教学网站，里头却尽是明星图片，看上去根本就不像是教学网站，而是大杂汇的明星相片网。很多人喜欢将自己欣赏的明星照放上自己的网页中，如果仅是个人网站倒也还好，因为个人网站本就无主题居多，也就没有所谓的符不符合主题的顾虑，但若是有主题的网站，岂不糟糕？以图片内容来说，能切合网站主题最好，若不能，也别差异太多。以颜色来说，若一个网页是蓝色的底色，但整个网页的图档却乱七八糟，各种颜色纷纷出笼，更糟的是，蓝色是属于冷色系的颜色，若以蓝色为底的网页，却尽都是大红色、橘色的图片，那将会使整张网页看起来就像垃圾堆，杂乱无章。所以，可以简单的归纳出，网页与图档的颜色，色系一致或是视觉效果一致，将会使网页看起来更为美观且有自己的风格。网页的颜色，并非单一就图文件、文字颜色、或是底色为主，而是以浏览者的角度来观看，整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好，但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说，就是失了自己独到的风格。因为使用粉色系的网站，不外乎都有相同的特点，文字颜色浅，底色也以浅色系为主，这样除了没有自己的风格外，看起来既不大方也难登大雅之堂。以各大搜寻网站来说，根本不会做这样的设计，因为文字颜色淡，加上底色浅，对浏览者来说，阅读上非常吃力，所以这样的设计风格也应尽量避免。一个有自己风格，且阅读起来舒适大方的网页，并不可能一次就写好，而是需要经过不厌其烦的修正、调色，才能达到最佳浏览效果的，所以制作网页也一定要有相当大的耐心。利用Dreamweaver你可以轻轻松松让图像呈现出阴影、模糊、运动、光晕、波浪、淡入淡出等众多效果，你再也不用为了达到某种图像效果而动用Photoshop这个庞然大物了。利用Dreamweaver你可以轻轻松松让图像呈现出阴影、模糊、运动、光晕、波浪、淡入淡出等众多效果，你再也不用为了达到某种图像效果而动用Photoshop这个庞然大物了。下面我们就来具体了解一下图像特效的制作方法。在Dreamweaver中为图像制作特效，实际上就是利用样式表（CSS）功能来定义图像的各种参数，让它呈现出各种特技效果，但是这些特效并不增大图像文件的大小，所以不会影响页面的下载速度，这对于我们有限的网络带宽来说是非常宝贵的。下面我们首先来看如何创建一个样式表。1.单击Window菜单下的CSSStyles命令，或按F7键，弹出样式表编辑窗口。2.单击样式表编辑窗口中的New按钮，弹出对话窗口，在该窗口中选择“MakeCustomStyle”选项，然后单击OK。3.在弹出的定义样式表窗口中，单击Category下的Extensions类型，然后在Filter项目中选择一个图像特效类型，定义它的各种参数。Dreamweaver内置有16种图像特效类型。4.定义完毕，单击OK，回到样式表编辑窗口。5.选定页面上的图像，将生成的样式表作用于该图像。6.保存该网页，然后在浏览器中打开，就可以看到图像的特效了。五网页东华的设计与制作方法依据上面所述的方法利用“门”形布局，整理出网页的大概框图调整以色彩学简单的冷色系与暖色系，利用Dreamweaver，编辑网页的图片效果，把一张用模糊效果渲染。最上面用大横标题弄横幅，添加链接，网站首页，院情总览，机构设置，教学科研，招生就业，合作交流，学生活动等。大体就这样布局，其他新闻动态，学院通告等添加就好了。六心得体会“Dreamweaver”“Fireworks”“Flash”有了大致的认识，页初步了解了它们的用法，知道了网页制作的简单步骤和方法，在这里要感谢老师对我们的培养！这次的“课程设计”，是我人生中得第一个“网页设计”，对我来说恨重要，但也做得相当辛苦。由于什么都是第一次，所以我不断在摸索中前进，中途得困难与可想而知。经历了种种的挫折，终于完成了我的题目——“网页东华的设计与制作”。虽然我知道我在作品中运用的技术都是些皮毛，网页的设计搭配也不是很合理，但我相信，在以后的时间里我会不断前进！从拿到题目到网页制作完毕，历时一个星期，在这段时间里我翻阅了一些关于制作网站的书籍，也从中学到了很多知识。我做的题目是关于“韩国风格时尚服饰”,应该以新颖，创新为特色，但由于自己的知识尚浅，不能把自己的想法在网但由于自己的知识尚浅，不能把自己的想法在网页上，但我相信经过，我不懈的努力一定会有所进步。面对自己做的网页，我不知道该用如释重负还是该用惭愧不已来形容，但这两个词的确是我的真实想法。如释重负，因为我的网页做好了，可以交上去了；惭愧，则是因为自己的网页做的很幼稚，还大不到自己的要求。我会在以后的日子里不断学习争取进步。我从一个网站上看到以下的文字，在这里我引用一下：正如所谓“一千个读者就有一千个哈姆雷特”，对于主页的好坏，每位网友都有自己的评价标准。但要做好网页还是应该有以下几点：一是有冲击力，能立即抓住看网页人的心理。这种冲击力更多的来自于对视觉的震撼，因此页面的美观和动感必不可少。同时，鼠标滑过所击活的音效或灵活的链接点击后产生的快感也十分有助于冲击力的产生。二是有吸引力，能产生回头客。网络与电影电视等媒体的最大区别在于受众是可以重复访问一个站点或页面的，而恰恰是这种无限量的重复所产生的访问量和点击次数成就了许多著名的站点。因此，如果一个网站能拥有一定数量的回头客就算成功了一半。三是耐人寻味，能成为网友的话题。知无不言，是网络交流的一大特点。尤其是对自己所访问到的精彩站点或网页，网友们普遍都喜欢谈论。而这，恰恰也是一个站点访问量不断增加的原因之一。因此，制作网页应该充分考虑内容的可看性，努力使网页能够让网友津津乐道甚至奔走相告。四是有高技术，能让网友提高水平。上网的受众大体分为爬虫、小虫、大虫和飞虫等四个级别，水平参差不齐。有许多网友在浏览信息的同时，还有很强烈的学习高新制作技术以提高自身水平的渴望。因此，一个拥有高技术的网站会使网友频频回访。而不断增加网站中的技术含量，让网友产生复制页面和查看源文件的冲动，也是判断网页好坏的一个重要参考。