网页设计与平面设计以及网页特效.docx

网页设计：就是制作网页的工程师，前台页面的制作，证件就是毕业证，不过现在人家要的是实力，即使没有证件而有实力也能找到工作。 平面设计 什么是平面设计? （1） 用一些特殊的操作来处理一些已经数字化的图像的过程。 （2） 它是集电脑技术、数字技术和艺术创意于一体的综合内容。 了解设计的定义和概念将是了解设计的第一步，有助于了解我们作为一名准平面设计师的职责范围。 第一节：平面设计的正名与分类 设计一词来源于英文design，包括很广的设计范围和门类建筑：工业、环艺、装潢、展示、服装、平面设计等等,而平面设计现在的名称在平常的表述中却很为难，因为现在学科之间的交*更广更深，传统的定义，例如现行的叫法“平面设计（graphis design）视觉传达设计、装潢设计，这也许与平面设计的特点有很大的关系，因为设计无所不在、平面设计无所不在，从范围来讲用来印刷的都和平面设计有关，从功能来讲“对视觉通过人自身进行调节达到某种程度的行为”，称之为视觉传达，即用视觉语言进行传递信息和表达观点，而装潢设计或装潢艺术设计则被公认为极不准确的名称，带有片面性。 现在，在了解了对平面设计范围和内涵的情况下，我们再来看看平面设计的分类，如形象系统设计、字体设计、书籍装帧设计、行录设计、包装设计、海报/招贴设计可以这样说有多少种需要就有多少种设计。 另外，商业设计与艺术设计很显然是存在的。 第二节：平面设计的概念 设计是有目的的策划，平面设计是这些策划将要采取的形式之一，在平面设计中你需要用视觉元素来传播你的设想和计划，用文字和图形把信息传达给受众，让人们通过这些视觉元素了解你的设想和计划，这才是我们设计的定义。一个视觉作品的生存底线，应该看他是否具有感动他人的能量，是否顺利地传递出背后的信息，事实上她更象人际关系学，依*魅力来征服对象，你的设计有抓住人心的魅力吗？是一见钟情式的还是水到渠成式的，你需要象一个温文尔雅的绅士还是一个不修边幅的叛逆之子，或是治学严谨的学者。事实上平面设计者所担任的是多重角色，你需要知己知彼，你需要调查对象，你应成为对象中的一员，却又不是投其所好，夸夸其谈，你的设计代表着客户的产品，客户需要你的感情去打动他人，你事实上是“出卖”感情的人，平面设计是一种与特定目的有着密切联系的艺术。 第三节：平面设计的特征 设计是科技与艺术的结合，是商业社会的产物，在商业社会中需要艺术设计与创作理想的平衡，需要客观与克制，需要借作者之口替委托人说话。 设计与美术不同，因为设计即要符合审美性又要具有实用性、替人设想、以人为本，设计是一种需要而不仅仅是装饰、装潢。 设计没有完成的概念，设计需要精益求精，不断的完善，需要挑战自我，向自己宣战。设计的关键之处在于发现，只有不断通过深入的感受和体验才能做到，打动别人对与设计师来说是一种挑战。设计要让人感动，足够的细节本身就能感动人，图形创意本身能打动人，色彩品位能打动人，材料质地能打动人、把设计的多种元素进行有机艺术化组合。还有，设计师更应该明白严谨的态度自身更能引起人们心灵的振? 第二章：平面设计之路 设计的学习可能有很多不同的路，因为这是有设计的多元化知识结构决定的，不管你以前是做什么的，不管你曾经如何如何，在进入设计领域之后，你以前的阅历都将影响你，你都将面临挑战与被淘汰的可能，正如，想要造就伟大永远不可能是依*人们的主观愿望所能达到的一样 第一节：你确认你要进入这一领域吗？-设计师的知识结构 设计多元化的知识结构必将要求设计人员具有多元化的知识及信息获取方式。 第一步：从点、线、面的认识开始，学习掌握平面构成、色彩构成、立体构成、透视学等基础；我们需要具备客观的视觉经验，建立理性思维基础，掌握视觉的生理学规律，了解设计元素这一概念。 第二步：你会画草图吗？1998澳大利亚工业设计顾问委员会调查结果，设计专业毕业生应具备的10项技能第一位就是：“应有优秀的草图和徒手作画的能力，作为设计着应具备快而不拘谨的视觉图形表达能力，绘画艺术是设计的源泉，设计草图是思想的纸面形式，我们有理由相信，绘画是平面设计的基础，平面设计的设计的基础！” 第三步：你还缺少什么？缺少对传统课程的学习，如陶艺、版画、水彩、油画、摄影、书法、国画、黑白画等等，太多太多，你还是问问自己吧！不管如何这些课程将在不同层次上加强了你设计的动手能力、表现能力和审美能力，他们最关键的是让你明白什么是艺术，更重要的是你发现你自己的个性，但这也是一个长期的过程。 第四步：“我可以开始设计了吗”？当然不行，你要设计什么？正如你要开始玩游戏了，你了解游戏规则吗？不过你不用担心，你已经进入了专业自身的学习，同时也意味着你才刚刚开始，你将不折不挠，不浮躁不抱怨、务实的、实事求事的态度步入这一领域。我们以标志设计为例，我们需要具备什么样的背景知识，标志的意义、标志的起源、标志的特点、标志的设计原则、标志的艺术规律、标志的表现形式，标志的构成的手法、我们需要理解为什么？为什么可口可乐会红遍全球；为什么我们渴望穿Lee牌牛仔裤？作为一名设计师，你对我们周围的视觉环境满意吗？问问自己，你的设计理想是什么？ 第五步：你能辨别设计的好坏，知道为什么吗？上一步通过对设计基础知识的学习，不知不觉你已经进入了设计的模仿阶段，为了向前我们必须回顾历史，既而从理论书籍的学习转变为向前辈及优秀设计师学习。这个阶段伴随着一个比较长期的一个过程，你的设计水平可能会很不稳定，你有时困惑、有时欣喜，伴随着大量的实践以及对设计整个运转流程逐渐掌握，开始向成熟设计师迈进。 你需要学会规则，再打破规则。 第二节：你能成为优秀出众的设计师吗？-对设计师的要求 1、成功的设计师应具备以下几点： A、强烈敏锐的感受能力 B、发明创造的能力 C、对作品的美学鉴定能力 D、对设计构想的表达能力 E、具备全面的专业智能 现代设计师必须是具有宽广的文化视角，深邃的智慧和丰富的知识；必须是具有创新精神知识渊博、敏感并能解决问题的人，应考虑社会反映、社会效果，力求设计作品对社会有益，能提高人们的审美能力，心理上的愉悦和满足，应概括当代的时代特征，反映了真正的审美情趣和审美理想。起码你应当明白，优秀的设计师有他们“自己”的手法、清晰的形象、合乎逻辑的观点。 2、设计师一定要自信，坚信自己的个人信仰、经验、眼光、品味。不盲从、不孤芳自赏、不骄、不浮。以严谨的治学态度面对，不为个性而个性，不为设计而设计。作为一名设计师，必须有独特的素质和高超的设计技能，即无论多么复杂的设计课题，都能通过认真总结经验，用心思考，反复推敲，汲取消化同类型的优秀设计精华，实现新的创造。 3、平面设计作为一种职业，设计师职业道德的高低和设计师人格的完善有很大的关系，往往决定一个设计师设计水平的就是人格的完善程度，程度越高其理解能力、把握权衡能力、辨别能力、协调能力、处事能力将协助他在设计生活中越过一道又一道障碍，所以设计师必须注重个人的修为，文人常说：“先修其形，后练其品”。 4、设计的提高必修在不断的学习和实践中进行，设计师的广泛涉猎和专注是相互矛盾又统一的，前者是灵感和表现方式的源泉，后者是工作的态度。好的设计并不只是图形的创作，他是中和了许多智力劳动的结果，涉猎不同的领域，担当不同的角色，可以让我们保持开阔的视野，可以让我们的设计带有更多的信息。在设计中最关键的是意念，好的意念需要学养和时间去孵化。设计还需要开阔的视野，使信息有广阔的来源，触类旁通是学习平面设计的重要特点之一，艺术之间本质上是共通的，文化与智慧的不断补给是成为设计界长青树的法宝。 需要的软件有：常见的如： photoshop、flash、3dmax、fireworks 、dreamwever等 如果对也会大型的软件，当然更好了，Maya等 5、有个性的设计可能是来自扎跟于本民族悠久的文化传统和富有民族文化本色的设计思想，民族性和独创性及个性同样是具有价值的，地域特点也是设计师的知识背景之一。未来的设计师不再是狭隘的民族主义者，而每个民族的标志更多的体现在民族精神层面，民族和传统也将成为一种图式或者设计元素，作为设计师有必要认真看待民族传统和文化。 网页设计与平面设计的异同 设计传达的方式 传统的平面设计讲究页面构图、版式布局、空间表现等，而网页设计也适用这些要素。 网页设计与传统平面设计在视觉传达方面很大的相似点，但是在技术方面又是有很大的区别。 网页设计是传统平面设计的视觉传达效果运用和网路技术的结合，所以可以说网页设计综合了平面设计艺术和网路技术。 网页设计的重要特色就是动静结合，这点在平面设计裏是无法实现的。 处理的差别 传统平面设计的作品大多是以印刷的平面形式表现；而网页设计作品则是透过显示器表现，并且在传输的过程中受到网路频宽的限制。 普通印刷是按照色素的减法原理进行的，设计时的颜色模式为 CMYK ，而电脑的显示器的色彩原理则是以色光合成加法原理进行的，是 RGB 模式，使用同样的颜色，但是在不同的颜色模式下，显示的效果是会有色差的。 因为受到网路频宽的限制，网页设计中的图像处理也不同於平面设计，为了加快下载速度，在保持图像质量的前提下我们要尽可能的缩小其档案大小，而不像平面设计那样为了追求图像的质量而不管其文件大小。 作为一名合格的网页设计师，在处理网路图形时，应做到在保持图像清晰的前提下，尽可能缩小图片的档案大小。 网页的构图布局与平面构图布局有著很大的相似之处，但是因为技术的局限，网页构图远不如平面设计那样挥洒自如。 在平面设计中想把某一物件放置到某一位置的时候只需要简单的拖曳就可以完成。 但是在网页设计中想对某一物件进行定位的话就必须有 HTML 语言的支援才行。 所以在进行网页设计的时候，除了要有好的创意，还应该考虑到技术上的可行性。 网页的构图与传统的平面构图最大的区别就是技术的可行性。 在进行网页设计时必需时时提醒自己，所设计的作品最终会通过网路传输到用户端，经过下载，再用浏览器浏览，作品将受到频宽和显示器的限制。 而且，所有网页的后端语言都是以 HTML 为基础，辅以 JavaScript 或 VBScript 编写的程式，有些动态特效实现起来会有较大的难度。 所以，网页设计人员在构思创意时，要考虑到技术上是否能实现。 如果一味地追求视觉效果的创意，而忽略技术上的限制，顾此失彼，再好的构思也只好放弃。 鄏b网页设计中实现的创意，对网页设计构图来说是毫无价值的。 功能的不同 传统平面的设计作品是以向人们传达某种资讯或诉求为目的。而网页设计网页的设计必须是配合网站的内容设计，而不是单纯地只为表现艺术而设计。 除了拥有平面设计作品的功能以外，还有重要的引导和连接功能，也就是网页具有很强的可操作性和互动性。 网页设计与传统的平面设计最大的区别就是网页的可操作性。 网页的可操作性是通过页面间的链结实现的。 所谓链结结构就是指网页页面间的相互链结关系。 选择适当的链结结构，对整个网站的各个页面设计将有很大的引导作用。 若链结的结构使用不良的话，会使得重要的资讯不能让访问者获取，这将违背了网站设计者的初衷。 在制作一个网站的时候会有一个名为 index.html 的页面，我们一般把它称为 “首页” 。 一般在浏览网站的时候，在浏览器的位址栏裏输入网址后，直接打开的就是档名为 index.html 的页面，它的作用就与书本的目录相同。 大家应该都有在书上找资料的经验，一般来说我们都会打开书的目录来查寻资料位置，以便较快找到资料。 同理，如果把我们的网站看成是一本书的话，那麼 “首页” 就是书的目录，它的作用就是使我们尽快的找到自己想找的资讯。 而很多人在设计网站的时候做出来的网站是很漂亮，但却让访问的人无从下手来进行浏览。 想从这个网站裏找到自己有兴趣的内容却怎麼也找不到，虽然说这个网站裏有这些内容，但就是找不到或者找起来很麻烦。 这就说明了引导性和可操作性的重要。 X 登录 窗体顶端Email: 密 码: 忘记密码了 在这台电脑上记住我 还没有注册. 窗体底端2008-10-10 10:33:02 w (你还追啊，我到家了) 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 点击时文字消失，失去焦点时文字再出现 2.网页按钮的特殊颜色 3.鼠标移入移出时颜色变化 4.平面按钮 5.按钮颜色变化 6.平面输入框 7.使窗口变成指定的大小 window.resizeTo(300,283); 8.使文字上下滚动 共和国 9.状态栏显示该页状态 10.可以点击文字实现radio选项的选定 情侣 : 一次注册两个帐户 11.可以在文字域的font写onclick事件 12.打印打印网页 13.线型输入框 14.显示文档最后修改日期 function hi(str) document.write(document.lastModified) alert(hi+str+!) 15.可以在鼠标移到文字上时就触发事件 !- Hiding function hello() alert(哈罗!); link 16.可以根据网页上的选项来确定页面颜色 background.html Changing Background Colors Red Orange Yellow Green Blue Indigo Violet White pink 17.将按钮的特征改变 本例按钮的代码如下： 18.改变按钮的图片. 本例的按钮代码如下： 19.打印页面 打印本稿 20.可以直接写html语言 document.write(); 21.改变下拉框的颜色 22.转至目标URL window.location=http:/guoguo 23.传递该object的form UpdateSN(guoqiang99267,this.form) function UpdateSN(strValue,strForm) strForm.SignInName.value = strValue; return false; 24.文字标签 guoqiang99859 25.layer2为组件的ID，可以控制组件是否可见 document.all.item(Layer2).style.display = block; document.all.item(Layer2).style.display = none;/ 26.将页面加入favorite中 / 27.过10秒自动关闭页面 function closeit() setTimeout(self.close()，10000) 28.可以比较字符的大小 char=post.charAt(i); if(!(0=char&char=9) 29.将字符转化为数字 month = parseInt(char) 30.点击value非空的选项时转向指定连接 主办单位 - 北京日报 北京晚报 31.改变背景颜色 32.改变文字输入框的背景颜色 .input2 background-image: url(./images/inputbg.gif); font-size: 12px; background-color: #D0DABB;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px 33.改变水平线的特征 34.传递参数的方式 8 35.页内跳转 1 2 3 4 5 6 7 dfdf dfdf/ 36.两个按键一起按下 if(event.ctrlKey & window.event.keyCode=13)/ 37.刷新页面 javascript:this.location.reload()/ 38.将网页的按钮使能 function haha() for(var i=0;idocument.form1.elements.length;i+) if(.indexOf(bb)!=-1) document.form1.elementsi.disabled=!document.form1.elementsi.disabled; 39.文字移动 40.双击网页自动跑 var currentpos,timer; function initialize() timer=setInterval(scrollwindow(),1); function sc() clearInterval(timer); function scrollwindow() currentpos=document.body.scrollTop; window.scroll(0,+currentpos); if (currentpos != document.body.scrollTop) sc(); document.onmousedown=sc document.ondblclick=initialize / 41.后退 42.前进 43.刷新 44.转向指定网页 document.location=http:/ww或者document.location.assign(/) 45.在网页上显示实时时间 var clock_id; window.onload=function() clock_id=setInterval(document.form1.txtclock.value=(new Date);,1000) / 46.可以下载文件 document.location.href=目标文件/ 47.连接数据库 import java.sql.*; String myDBDriver=sun.jdbc.odbc.JdbcOdbcDriver; Class.forName(myDBDriver); Connection conn=DriverManager.getConnection(jdbc:odbc:firm,username,password); Statement stmt=conn.createStatement(); ResultSet rs=stmt.executeQuery(sql); rs.getString(column1);/ 48.可以直接在页面“div”内写下所需内容 INPUT TYPE=button onclick=a1.innerHTML=* / 49.可以改变页面上的连接的格式，使其为双线 A:link text-decoration: none; color:#0000FF; font-family: 宋体 A:visited text-decoration: none; color: #0000FF; font-family: 宋体 A:hover text-decoration: underline overline; color: FF0000 A:link text-decoration: none; color:#0000FF; font-family: 宋体 A:visited text-decoration: none; color: #0000FF; font-family: 宋体 A:hover text-decoration: underline overline line-through; color: FF0000 THFONT-SIZE: 9pt TDFONT-SIZE: 9pt body SCROLLBAR-FACE-COLOR: #A9D46D; SCROLLBAR-HIGHLIGHT-COLOR: #e7e7e7;SCROLLBAR-SHADOW-COLOR:#e7e7e7; SCROLLBAR-3DLIGHT-COLOR: #000000; LINE-HEIGHT: 15pt; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #e7e7e7; INPUTBORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 9pt; BORDER-LEFT-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc; PADDING-TOP: 1px; HEIGHT: 18px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc DIV,form ,OPTION,P,TD,BRFONT-FAMILY: 宋体; FONT-SIZE: 9pt textarea, select border-width: 1; border-color: #000000; background-color: #efefef; font-family: 宋体; font-s