网页页面设计布局

篇一　　在这一年美工总结自己接触和学习设计的一点经验心得。　　一、网站的配色　　我们公司主要是做一些医疗网站的，因此在整体配色的问题要特别小心，特别是我们做部队医疗行业这一块的，主打色是军绿、海蓝、宝蓝，兼且要一些部队元素，这样才能体现部队应有的权威性、稳重性和声望、精神。只有这样医院网站才能给用户带来更踏实的视觉和吸引的人来就诊，　　二、网站的布局　　做美工设计的不单要对色彩要有好的感觉外，对布局也要有很好的把握，组合的好坏直接影响作品的效果。整体配色、字体、各模块的间距、插图、增减内容等各个方面的敲着。　　三、网站的细节　　对美工设计人员来说，这点也是非常重要的，细节能否处理得当也能体现做事明细，这也是我在不断提升的一块。比如背景色、色彩渐变、各组件间间距、标题样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，那么处理细节方面也会有很大的提升。　　四、用户体验度　　一个网站的如果美工设计得好，给人们的第一印象是非常好，这代表着人们可能还会停留在你的网站里面继续浏览，这样也大大提高用户体验度。因为我们做医院网站的，要保持美观、权威、明细等，比如人们来到了网站浏览，如果美工图片做得非常不清晰也会影响患者对整个网站的印象，还有广告图片的位置问题，要放在一些比较显眼的地方，同时不会影响到患者查看其他内容，对于图片广告的图片，也要突出权威性和真实感，这样对就诊率的提高也会有很大的帮助的。还有美工图片的好坏直接影响了用户对网站的印象。用户体验是对美工更高的一个要求，甚至有点儿超越美工的范畴，但只有美工了解这些才能更合理地设计界面布局，整体搭配等等。　　五、个人心态　　美工本身就是细活，着急是没用的。有了基本的审美观，需要创作时心情放松，做些想做的事，吃点想吃的东西，随心所欲，给提供自己创作灵感环境。不要意味的坐在电脑前去想，事倍功半，会把自己郁闷死。所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。　　篇二　　新的一年开始之际，在我们昂首期待未来的时候，有必要对过去一年的工作做一个回顾，总结以往的经验教训，以待在新的一年有所改进。　　回顾过去一年，在领导的带领下，在各位同事的大力协助下，工作上取得满意得成果。我的岗位是美术编辑，工作岗位在开发中心，可是我的工作范围并不局限于程序开发中的模版设计等工作，而是涉及到了编辑部的广告设计，广告图片替换，页面策划修改;涉及到技术部页面制作，代码调试，样式修改，后期维护等不同工作。可以说凡是需要突出我们网络部及网站整体形象的地方，就需要美编参与工作。　　设计工作是痛苦与快乐的炼狱，每当面临重大的设计任务时充满了压力，开始搜集各种资料(包括文字的、图片的)，接下来寻找设计灵感，沉思、焦灼，经过痛苦煎熬，终于有了满意的创意时倍感轻松。每当经过艰苦的磨砺，自己的劳动成果得到大家的肯定时，便是工作中最大的快乐!充满了快意。　　当然，工作中的痛苦与快乐首先要求有坚定的政治信念与立场，遵纪守法，爱岗敬业的强烈责任感和事业心。因为热爱自己的工作，所以精通本岗位的专业识和业务技能，熟悉有关行业规范，关注行业的发展趋势。时刻保持强烈的创新意识。　　篇三　　前言　　目前，人类社会已经迈进了网络时代，计算机和互联网已经于老百姓的日常工作，学习和生活息息相关，人类社会目前又处于了一个历史飞跃时期，正由于高速的工业化时代迈向初步的计算机网络时代，在计算机技术，网络通讯技术的告诉发展的今天，电脑和网络正在以惊人的速度进入人类社会的各个角落。那么今后，我们将用怎样的态度和方式来面对网络科技给我们带来的物质层面和精神上的变化，我们必须对因为网络而引发的社会生产和生活各个层面的深层次变化作一个深刻的理解和清醒的认识，我想这必将成为是当今人类所面临的最大课题，可能是我们科学工作和研究者们需要面对的新的挑战。　　当互联网成为第四种媒体出现的时候，它就表现出与以前的大众媒体的不同特征，在报纸、广播、电视上，普通人不可能及时发表个人对某一重大事件的看法，而互联网能随时随地公开地实行人与人之间的对话，作为受众的网民不再是被动的，他可以随时表达自己的意见，有时甚至可以成为某些事件的主角　　随着对商业化使用政策的放宽，因特网已经不仅仅局限于信息的传递，网上信息服务出现了。许多机构、公司、个人将搜集到的信息放到因特网上，提供信息查询和信息浏览服务。人们把提供信息来源的地方称为“网站”，即因特网上的信息站点。凡是连入因特网的用户，无论在世界任何地方、任何时刻，都可以从网站上获取所需的信息和服务。　　一、实习报告目的　　刚走出社会的时候，自己就像一张白纸，工作是什么样子?要用什么样的状态去工作?这些在学校里是无法体会的。实践让我走向科技应用,走出课堂.目前，我所缺少的主要不是知识,而是缺少将知识与实际相结合的能力.我们在课堂上所学的,与在实际当中遇到的是不尽相同的.其往往具有不具有明显的特征,这需要我们进行抽象概括才能解决各种问题，而这次实习正好给了我这次实践的机会，结合实实在在的用作，运用自己所学的知识，积累经验。　　二、实习单位及工作岗位简介　　1、实习单位简介　　该公司是一家国内专业的电子商务外包服务商，公司主要为品牌企业提供商城搭建、网站建设与运营、营销推广、数据分析、电子商务代理运营等服务。我们的优势是：公司电子商务运营经验丰富;仓储配送能力强大;网络营销实力宏厚：公司拥有丰富的网络营销经验，可以为客户提供各种营销方式，并且提供数据分析工具，同时配备专业的客服能力，结合专有的技术，公司可以为客户提供一个强大的客户服务平台。　　2、工作岗位简介　　该岗位主要负责公司广告、图片、动画、海报、logo、　　及网页的设计制作。服从公司的指挥，认真执行其工作指令，一切管理行为向公司负责。严格遵守公司规章制度，认真履行工作职责。认真做好各类信息和质料收集、整理、汇总、归档等工作，为公司旗下各项目的成功开发提优质的素材。全面主持设计工作，担纲创意核心、设计指导、效果统筹、设计沟通的任务。负责与各岗位的协调工作，网站页面的美工设计，进行div+css网页布局及修改。配合技术部门对网站页面设计和技术的配合。　　二、 实习过程　　1、初来公司的时候　　在接到公司面试的电话后，我来到了武汉世纪联动科技有限公司，因为我所应聘的是网页设计，所以要有一个小测验，美工部的经理发给我一个题目，根据MLB的官网风格，画出相同风格的电子商务网站。所有素材自己找，画好图纸后，用css+div进行布局。考察的主要是相关软件、的操作能力与代码掌握的熟练程度，说实话，学习photoshop和css已经有一段时间了，刚开始上机，还有点生疏。但凭借着在学校巨塔工作室学到的知识，还是画出了相应的图纸。以及对该页面进行了布局。经理看了以后，说不错，就说了句，以后的外国网站，不能出现中文。让我三天后参加培训，进行相应的考察。合格就可以正式上班。　　2、三天的培训工作　　三天后，我来到了公司，一看，来参加培训的人有很多，大概在是个左右，其实所谓的培训，就是让大家先熟悉网站的工作。先做了些他们平时干的活，做些广告网页，这些网页都是静态的，无需实现动态的交互，这才让我拾起了些信心，后来我发现，其实我们一起实习的，水平都差不多，我们公司主要更偏向写代码，所以我的优势就突出了。　　3、最后的考核　　三天的培训后，我们迎来了最后的考核，合格的人会被留下，并得到一份为期一个月的实习合同，然后会在根据实习期的表现决定去留问题，最优秀的人会转正，得到更加优厚的待遇。　　考核的内容就是在公司的商务网站上任选一个页面，然后再规定的时间内做完，我还是不错的，技术比较熟练，是第四个完成的，当我们把网页做完后，由这家公司的经理进行审核，最后的结果是。我被留下了，最后完成的，就那样被活生生的淘汰了，制度虽有点不近人情，但是社会就是这么的现实，有能力就能生存。就这样，我们每个人得到了一份一月的临时合同，正式开始实习工作。　　4、 正式工作　　我们每天的上班时间是从早上8:30分到下午的17:00，其中，中午有两个小时的休息时间，这是我见过最有激情的一些人了，年纪轻轻的，干劲十足，来了公司以后就工作，连平时连天的内容也和本行也分不开，我喜欢他(她)们，因为是实习期，所以每天做的数量没有太大要求，但是每个人都玩命似的干活，抓紧时间做网页，我们做的网页是比较简单的，从上到下式的网页，通过css+div布局，这样在后期浏览器兼容测试中，就好做多了，文字与图片之间就不会有太多的麻烦，我干的很不错，不过有些追求最精，我做的网页的速度慢了很多，最初每天只能做1也页面左右，这对于我来说是不能接受的，后来我改变了工作的方法，我第次工作的时候，先订下计划，比如今天做多少页面，然后我将要做的所有页面，先做好排版，，这是的网页虽然排过版，但是不美观，因为没有进行美化工作，然后我会在下午的时间，集中全力做美化工作，就这样我的速度提高了很多。我相信只要自己多加练习，速度就会提升。　　三、实习内容　　1、整体工作　　我的工作就是负责设计整个网站的页面部分，根据网页设计师或客户所提供的主题要求来设计出整个网站。　　2、工作中要完成的任务　　作为一个网站美工除了要求网页三剑客，ps。这些比会的软件以外，还要对html用的很熟练，对asp或php或jsp要有初步的了解。　　(1)表达一定的艺术效果　　一个成功的网站应该把网页设计得吸引人，同时又要传达设计思想和情感。网页作为一种媒体，它必须具有一定的艺术感染力，一个平淡无奇、杂乱无章或毫无美感的网页很难会有浏览者喜欢，更不要说让浏览者去注意它的内容了。　　(2)使页面结构清晰可读性强　　经常可以看到这样的页面，上面堆砌了许多内容，却没有考虑它的空间框架，让人看了无法知晓哪些内容才是最具发言权的。没有流畅的视觉流程，这是典型的没有注意到编排清晰度、可读性的表现。　　(3)实现不同的功能　　在网络这条信息高速公路上，网页最主要的功能就是一种传递信息的手段。因此，它一切内容都是为了这个目的而服务，都是要围绕这个中心进行设计的。然而，要实现这个功能，网页的美工设计和内容都必须有针对性。所谓针对性，就是指对不同类别的网页要求采用不同的美工艺术效果。　　(4)网页的内容　　网页设计人员美化网页，增加网页设计的艺术感，都是为了网页设计的内容服务的。一般来说，网页的几项基本内容：标题、网站标志、主体内容、导航、广告栏等。　　(5)确定网站的类型　　在设计网页之需要做大量的准备工作，需要思考以下几个问题：1、网站的类型：站点属于新闻、娱乐、商务类的综合站点，还是个人主页;　　(6)确定网站的风格　　如果浏览者主要是年轻人，页面就要设计得基调明快，活泼富有朝气;如果针对的群体是政府工作者或科学工作者，那么页面就要设计得严谨、严肃、理性、科学;如果针对的群体是妇女儿童，页面则要设计得温馨、友爱、轻松;如果针对的群体是恋人或从事艺术工作的人，页面就要设计得浪漫并有艺术感　　(7)确定网页之间的链接关系　　在网站的总体规划列出来后，就必须要考虑各个网页之间的关系，是星型、树型、网型还是直线链接?　　(8)具体工作流程　　网站美工确保项目派工单和网站资料的完整性,作出设计方案和栏目设计方案,留意客户特别要求的信息　　1、研究一些同类型的优秀网站,结合从客户那里所获取的资料,总结出比较合理的布局和风格,开始设计方案和栏目设置方案.　　2、设计好最佳设计方案和栏目设置方案,先让业务人员审核一次,达到要求确认后,进行PSD的样板页面设计.　　3、设计好PSD样板页面,让业务员跟客户展示设计好的样板,是否符合要求,符合要求后进行广告网站的全面的PSD设计和广告网站制作. (PSD样板页面设计　　对价钱跟要求并不高的客户,对网站的每个页面设计的要求是颜色基调不同、样式稍有改变,设计页面排版风格简练到位、网站贯串一副Flash动画,以增加动感这样的网站在后面制作页面简单,维护修改简单;　　对价钱高但要求不高的客户,照样采用上述方法,只是在考虑项目制作时间长短的情况下,对项目的质量进行提高;　　对价钱跟要求都高的客户,对网站的每个页面设计的要求是每个栏目精心设计,在保持风格的前提下,对每个栏目的样式跟颜色都有所不同、设计一个大Flash贯穿整个网站,并在每个栏目的头页或栏目导航栏上设计出简单漂亮的小Flash动画.让整个网站充满动感和活力)　　4、合理切割PSD文件,导入保存成图片(.gif .jpg )形式.　　5、建立网站后台文件,检查后台栏目跟块名没问题后上传到服务器　　6、使用Dreamweavers对PSD样板页的样式规定进行网页排版制作,设计规范合理,扩充性强、无多余累赘代码.　　7、建立网站的字体,表单按钮所需要的Css样式表　　8、设计每个栏目的模板页和PHP页面,并对不同的元素使用定义好的Css样式表.　　9、制作完成每个栏目设置的模板页和PHP页面后,添加网站样板资料.　　10、检查网站的链接排版错误跟漏洞,从而进行修复和完善.　　11、发到部门人员内部审核一遍(针对网站,不针对广告),对链接和排版错误的地方进行修改.　　12、再自己浏览一遍、确认没问题后通知业务人员和客户进行验收修改.(如有兼容性的问题，则需对其兼容性的解决)　　五、实习收获与体会　　通过本次毕业实习我真正了解到步入社会后我们还有许多知识要学习，还有许多需要加强的地方，我的网站这方面的知识还有许多欠缺的地方，还不能熟练的掌握。我知道这不是短时间内能够学会的，这次实习对我很有大的帮助，在这过程中我还学到了很多东西。有了这次实习的经验，再以后就可以更快，更好的融入新的环境，完成学生向职场人士的转换。在实习期间通过不断的学习和总结经验，提高了处理实际问题的能力，为我以后步入社会进行总结了以下经验。　　(1)用人单位在招聘员工的第一要看的就是你是否有想去学、我们一同过去的几位应聘者中，有一部分就是因为在想去学习的劲头上比别人逊色一点而落选。因为对于用人单位来说如果一个人有想去学习，那么他在这个特定的岗位上就会很快的得心应手，从而减少了用人单位要花很大的力气来培养一个员工。　　(2)在工作中要有良好的学习能力，要有一套学习知识的系统，遇到问题自己能通过相关途径自行解决能力，因为在工作中遇到问题各种各样，并不是每一种情况都能把握，在这个时候要想把工作做好一定要有良好的学习能力，通过不断的学习从而掌握相应技术，来解决工作中遇到的每个问题，这样的学习能力，一方面来自向师傅的学习，想工作经验丰富的人学习，另一方面就是自学的能力，在没有别人帮组下的情况下自己也能通过努力，寻找相关途径来解决问题。　　(3)良好的人际关系是我们顺利工作的保障。在工作之中不只是同技术，同设备打交道，更重要的是同人的交往。所以一定要掌握好同事之间的交往原则和社交礼仪，这也是我们平时要注意的。和谐的人际关系，能为顺利工作创造了良好的人际氛围。　　另外在工作之中自己也有很多不足的地方，例如缺乏实践经验，缺乏对相关技能知识的标准掌握等。所以我常提醒自己一定不要怕苦怕累，在掌握之知识的同时加强实践，做到理论联系实际，另一方面要不断的加强学习，学习新知识、新技术。　　通过这次毕业实习，把自己在学习一方面巩固所学知识，提高处理实际问题的能力，另一方面为顺利进行毕业报告做好准备，并为就自己能顺利与社会接轨做好准备，毕业实习是我们从学校走向社会的一个过渡，它为我们顺利的走出校园，走向社会为做好了准备。

网页设计采用div+css的好处：1、div+css有利于搜索引擎爬虫：一般而言相同网页页面html文件table布局字节大于div+css布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。2、重构页面修改方便（div+css改版方便）：一般DIV+CSS页面都是html和css文件分开的也就是说一个网页的内容与表现形式的分离，一般修改小小部分的css文件里css样式属性就可以修改真站的样式版面，如背景颜色、字体颜色、网站宽度等具有table不具备的方便性。3、div+css页面增加网页打开速度：这里是特性决定了他们的性能，因为div+css页面是div的html和css文件分开的，而浏览器打开该网页的时候是同时下载html和css，所以可以提高网页打开速度，而table还有个特性就是浏览器打开的时候必须是浏览器下载以<table>开始,并</table>结束后才显示该块的内容，而div的html是边加载边将内容呈现到浏览器上，div+css网站大大增强用户体验作用。大家都知道网页多等1秒钟都会降低浏览者的等待时间。

网站总体色彩一致的优点是一个独特色彩的网站会给人留下很深刻的印象，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。 在色彩的一致性中，我们强调的是如果企业有自身的CI形象，最好在互联网中沿袭这个形象，给观众网上网下一致的感觉，更有利于企业形象的树立。一个建议是选取一两种主要色彩，几种辅助色彩。 二、网站结构的一致 网站结构是网站的的骨架，结构关系网站的浏览习惯和设计风格，所以，网站的栏目内页和内容内页必须和首页的风格要一致，就肯定要从网站的结构上下功夫。最重要的就是网站布局了，网站的相关内容文字排版等等也应该有所体现。 三、网站导航条要统一协调 导航是连接各个页面的最主要部分，一个导航统一的网站，是风格一致的基础部分，好的导航条可以带给人很深的印象。 四、网站的图像要统一 网站的图片并非越多越好，对于那些没有用处的图片不要在网页上占用空间，既无用又浪费设计时间，此外也降低了网页加载速度，对于相部位的相同图片，尽量用同一个URL路径，而不是使用不同的路径。而是作为网站结构一部分的局部图像，根据网页内容的不同，配以相应的图像或动画，从而给浏览者形成页面的连续性。 五、网站标志性元素的一致性 即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新，这也是SEO的要求。 六、网站的特别元素要一致 在网站设计中，个别具有特色的元素，如标志、象征图形、局部设计等重复出现，也会给访问者留下深刻印象。比如网站结构在某一点上的变化，由直线变为圆弧、暗色点缀的亮色、色彩中的补色等等。 七、网站的背景图片及背景颜色等统一问题 做网站时，网站的内页有必要和首页的风格一致，这样才显出网站是一个整体。这些都是内页风格保持一致要注意的。

我个人建议你应该先学学基本的HTML和CSS知识，可视化的网页编辑工具对于新手来说是比较方便，但是这样的结果是“知其然不知其所以然”，而且有的时候用软件是达不到想要的效果的，还得直接修改HTML和CSS代码。img {border:1px solid #666666;}

padding四种规则原因如下：padding：10px，此种写法表示，上下左右都是10px的间隔。padding:5px 10px;此种写法表示上下为5px，左右为10px。padding:5px 10px 7px;此种写法表示上边间隔为5px，左右间隔为10px，下边间隔是10px。padding:1px 2px 3px 4px; 此种写法表示上下左右分别为1px，2px，3px，4px。制定四种规则的原因是比较方便，如果没有padding:10px此种写法，那么就得这么来写了padding-top:10px,padding-bottom:10px;padding-left:10px;padding-right:10px,所以说有此四种规则是简化了写法。

DIV+CSS和table两种布局方式，DIV+CSS布局运行速度快，科学，但难学，table布局简单，运行加载慢，做网站不科学，各有利弊。 表格布局有什么特点啊我知道的就是表格布局，CSS+DIV层布局 还有一种很常用的布局方式，是框架么？怎么用呢，具体的用法都不是很清楚，可以粗略的介绍不嘛 表格布局兼容性较好，基本不要考虑浏览器兼容问题，但是一些高级效果，表格是无法做出的。表格布局的代码偏长，效率不及div布局,简单说表格低效、稳定、控制难度低，div高效先进，兼容性 难度高。框架适用于后台管理界面，一般顶部或左侧是功能菜单，右侧是内容显示页面，框架不灵活，用的也比较麻烦，框架布局已经基本上不用的，一般就table布局和div布局两种，div里该用到table时还是要用到的。

看看这篇文章吧；希望对你有帮助https://wenku.baidu.com/view/879ea4a0102de2bd960588fd.html