2022年网站设计技巧 .pdf

《2022年网站设计技巧 .pdf》由会员分享，可在线阅读，更多相关《2022年网站设计技巧 .pdf（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、摘要现代企业形象的树立是企业宣传中的一项重要内容，一个精美的网站对公司的形象起着重要的作用。 本着 “ 假如我是客户 ” 的原则，运用最新的网站设计技巧，对访问速度不同版本的兼容性不同显示效果的兼容性语法图片清晰度 , 导航性等多种项目进行全方位测试 , 力求使用网站设计达到最科学的安排和最佳的视觉效果. 关键词配色体会 , 辅助色带 ,logo设计 ,视觉效果目录第 1 章引言01 第 2 章网站设计技巧01 2.1 网站设计的禁忌01 2.2 网站设计的主要原则01 第 3 章介绍网站01 3.1 产品的定位02 3.2 设计来源02 3.3 视觉效果02 3.4 网站的设计意思02 第

2、4 章设计流程02 4.1 资料收集与筛选03 4.2 排版03 4.3 找路途定位置03 4.3.1 文字处理03 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 4.4 超链接03 4.5 检查网页03 第 5 章网页制作疑难03 5.1 正确键入文件名03 5.2 对 logo 修改03 5.2.1 logo作用04 5.3 鼠标跟随05 第 6 章申请网站空间与上传网页05 6.1 申请网站空间05 6.2 上传网页05

3、 第 7 章网站更新05 第 8 章系统运行效果及改进意见05 9.1 结束语05 9.2 致谢05 9.3 参考文献05 9.4 附录05 第一章前言企业要进行网络营销活动就必须建立自已的网站. 网站是企业在互联网上进行活动的立足点. 从营销的角度讲, 在企业网站决非只有一种企业产品的窗口, 而一个涉及企业营销活动全过程的网络阵地. 因此 , 网站建设对网络营销的效果有着重要影响. 由于水平有限, 时间仓促 ,缺点错误在所难免, 请读者批评指正。第二章网页设计技巧名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 -

4、 - - - - - - 第 2 页，共 8 页 - - - - - - - - - 2.1 网页设计的主要原则2.1.1 主页上应有企的标志物主要上企业的标志物能让浏览者立刻知道这是谁的主页，但应注意标志物图像不要过大，否则影响下载时间，不耐烦的浏览者就会停止浏览，建议所有页面都应包括一个小的企业标志图标。2.1.2 单个页面下载时间勿超过30 秒。将设计好的页面在一般的调制器上检测下载时间。有关统计结果表明，访问者等待下载忍耐限度是30 秒左右。网页设计时应尽减小点用存储空间较大的表格，尽可能提高网站自身的软件配置，想方设法减小下载时间，提高下载速度。2.1.3 易于导航导航是网页设计的一

5、个关键部分。可采用多种方法使网站便于导航，如菜单、按键、图标庞大， 应设计网站内的“ 交通图 ” 指明网站内链接关系和链接内容，以便于浏览看快速找到所需信息的位置。保持链接的有效性等。易于导航意味着：层次清晰，即能从概貌到每个信息的细节都能很快搜索；交叉链接, 即无论是网站内外的信息间，还是网站内部信息间的跳转能直接实现。如果网站庞大，应设计网站内的交通图，指明网站内链接关系和链接内容，以便于浏览者快速找到所需信息位置。2.1.4 保持链接的有效性无效链接是失去访问者的重要原因之一。 网页设计人员在将每个链接到页面之前，应该对其有效性进行验证，同时还应进行定期检查，以确定他们是否保持有效。2.

6、1.5 提高联系地址访问者访问主页是为了获得重要信息，如果用户对某一信息感到兴趣，就会希望和主管联系，因此提高联系方法对专业网站来说比普通网站重要，企业网站的每个页面都应包括的E-mail地址或回复按钮，便于浏览者反馈信息。2.1.6 减少文字错误页面上的文字语法错误会给访问者留下不好的印象，以至于影响对企业、网站的态度，因此企业网络应有专人对网页上的文字、语法等的校对，最大限度地避免这类问题的发生。2.2 网站设计的禁忌2.2.1尽量用 JPEG格式；如果非用GIF 那么尽量压缩颜色数，慎用动画，GIF 动画常常是同类大小静止图象的几倍、几十倍大，而且动画容易分散访客的注意力，把一页名师资料

7、总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 中的动画数减少到3 个以下。巧妙重复运用同一幅图像。如果访客痄腮某页中显示了一幅图象，它就经验被下载到缓存中了，后再用到时，可以直接冲缓存中调用，这就大大节约了时间。2.2.2 忌一页过长对于长篇大论的文字，读起来是很伤眼睛的，很少有人有耐心把它一次读完。不如把它分开放在几个网页中，并在每页的链接，这样更灵活些，查找起来也方便。如果定要用一页显示，那么放个提纲在网页顶部，再把提纲和相关内容

8、用书签链接，使读者可以方便的跳转。2.3 页面风格不统一保持整个网站页面风格的一致性是件重要的事。整个风格统一的网站给人严谨、清晰、有色理和专业化的感觉。可以通过串接样式表来实现这些：只要编辑好一个CSS文件，并在其他页面中调用它，就可使所有调用他的页面具有统一的风格。要改变风格时，只需修改此CSS文件即可。2.2.4 层次过深，导航措施不得力通常网站上各栏目的设置都是采用树状层次结构。如果设置得当，会使网站的结构清晰，脉络分明，有助于访问者查找信息。但是如果层次超过了三层，在加上导航措施不得力， 很容易使人产生混乱的感觉甚至“ 迷路 ” 只要设身处地从使用者的角度设计网站，才是最受欢迎。栏目

9、层次不要超过三层，尽量让导航条件和回到主页始终可见，导航条上的栏目各名称要简单明了，不要不知所云或存在意义上的交叉重叠，如有条件，添加网站内容列表和网站内容搜索等措施。2.2.5 忌内容空间无特色内容是网站的生命，一个网站如果没有引人入胜的内容，不能给访客提供有价值的信息质素，那么即使页面做得再漂亮，采用的技术再高超，也不会有回头客。因此， 网站内容的丰富性因然重要，但“ 特色 ” 才是关键。 网站明确自己的定位和固定访客群，有自己的特色栏目或独门秘诀，才会在因特网的海洋中脱颖而出。第三章介绍网站3.1 产品定位在大家眼里的网站是我花费了几月的时间用心血制造出来的劳动成果。具有一般名师资料总结

10、 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 8 页 - - - - - - - - - 网站所具有的功能。所经营的商品和音响设备，而音响设备中挑选了音箱作为营业重点。产品展示有不同档次、不同颜色、款色、价格。尽量满足消费者对产品的要求。本网站不但展示国内先进的音箱设备，而且展示世界音箱潮流。做到“ 走出去 ” 的思想，凭借着的这种思想与用技术相结合形成新的音响构思，并研制成产品投入生产。本公司的经验宗旨：“ 做不到的事情，千万不要轻易承诺。” 本公司音响网站体现了：绝妙的心情需要

11、绝妙的音乐，而绝妙的音乐需要绝妙的音响。与一般网站类似，本网络专门设立一个音响论坛以便进行互动，同时交流心得，也是为完善网站作铺垫。而与一般往来不同的，我们专门设立了以下指数：实用指数、专业指数、消费指数信赖指数和综合指数。不同指数标准不同，分值星号表示。这些指标都是衡量音箱的标准，为消费作参考，以便购买。本公司不但为开发新产品做努力，而且不断充实客户的售后服务。本公司规定：凡在本公司购买的音响设备都可获得终身的保修（不包括人为损坏）；凡购买音响设备满3000 元就成为非凡会员，享受九折优惠；凡购买音响设备满10000 元就成为高级非凡会员，享受八折优惠；凡是非凡会员都有机会获得每季一次抽奖送

12、出的 SornyAL-8音响系列。3.2 设计来源网站需要用各种资料来支持，主要采用以下网站：（1）雅顿音响网。作为专业音响，雅顿地位不俗，有专业的印象评述，各种参考支书极具使用性，但主业太单调，缺乏生气，底色多设为黑色，使浏览者沉闷；（2）千丰音响网，设有较多文字进行评述，看着一张张直观的图片令人较易阅读。大部分的图片都是从这里获取。3.3 视觉效果视觉效果先注意的。一定要用640*480 和 800*640 分别观察，尽管在高分辨率下一些WEB页面看上去很具有吸引力，但许多浏览器还在使用640*480 的分辩率，可能会黯然失色。作一点小小的努力，设计一个在不同分辨率下都正常显示的网页。3.

13、4 网站的设计意念打开我的主页，你会发现有种简洁的感觉，无论标题栏还是介绍产品都没有多余的修饰。以灰白色为底色增加了朴素美，但是在朴素之外用动态的彩色星光点缀着这片宁静。网页包含一般网站所具备的功能，好的主页是评价网站好坏最主要的一页，主页上有醒目的图像，新颖的画面、美观的字体，使其别具特色，令人过目不忘。图像的内容有一定实际作用，切忌虚饰浮夸。图画可以弥补文字不足，但并不能完全取代。很多用户上网浏览时把浏览软件设定为略过图像。因此，制作主页时，必须注意将图像所连接的重要部分用文字重复表达。同时要注意避免使用过大的图像。如果不得不放置大的图像在网站上，最好使用Thurbnails软件，把图像的

14、缩小浏览效果显示出来，这样用户就必浪费金钱和时间去下载他们根本不想要看的大图像子页同样也作要求，子页是丰富主页的，因此子页的材料要广泛、具体，同时要名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 8 页 - - - - - - - - - 风格统一，网页上所以的图像、文字、包括像背景颜色，区分线、字体、标题、注脚什么的， 要统一风格，贯穿全站。这样读者看起来舒服顺畅，会对你的网络留下一个很“ 专业 ” 的印象。子页的 logo ，标题都延用主页logo, 但是用了灰色作为

15、了子页的底色区别主页。子页的制作较为简单， 一幅音箱图纹在页面的中央。下面是评价设备的参数。有七八项参数对产品的性能进行评价。第四章设计流程4.1 资料的收集与筛选材料收集材料然后筛选材料。这一过程不能考虑， 材料选择的好坏直接影响网页的质素，一般要说， 网页内容的选择要不落俗套，要重点突出一个“ 新” 字，这个原则要求我们在设计网站内容不能照抄别人的内容，要结合自身实际和个人喜爱作出独一无二的网站。放眼望去，网上的许多个人主页简直就是“ 杀货店 ” ，内容包含万象，题材千篇一律，人人都是 “ 软件下载 ” 个个都有 “ 网络导航 ” 。从头到尾找不出一丝新意，所以，在设计网页时，要把功夫下在

16、选材上。选材要尽量做到“ 小” 而“ 精” ，又必须突出 “ 新” 。这样的网页一定会受到大家的欢迎。因此，本网站收集著名网站锐丰雅顿，中音响网站等作参考。因为他们都是更新更快的网站。4.2 排版采用排版方式是图文相同，交错有置的形式。 分框的制作分三到n 行，左列主要排列图片人像图与品牌。图与图之间0.5-0.8cm的距离。中：音箱图与文字结合。后：文字链接。 尽可能把版面更整齐又丰富，并不等于一味把图片与文字叠加在一起。保持之间有一定的距离大约是0.5cm 左右视觉效果最效。4.2.1 文字在排版过程中文字也很重要。字体大小接影响表达效果，也会影响视觉效果。一律统一除栏题栏用14 号字外其

17、他用12 号字。字体与片面相配，主页用白底蓝了：子页用紫底黄字。文字一般用宋体。4.3 找路径定位置在编辑过程中， 使用别人的图片时，首先就找准目标图片。然后单击右键图片属性。这样就清楚看到图片位置。如果对于多图片时最好把目标图片用笔记本记下来以便核对。把光标停在需要插入图片的地方打开菜单中的“ 插入 ” 单击 “ 图片 ” 在浏览文件夹中找到图片位置。然后按“ 确定 ” 。4.4 超链接每个网站都有若干个超链接。其实，简单地认为文字的解释或资料的剖析成从主页名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - -

18、- - - - - 第 6 页，共 8 页 - - - - - - - - - 到任一个主页的途径。在进行链接时务必从清楚超链接内容是否相符，内容的不同很容易弄出笑话。 最好相关地址用笔记记下来，以便以后链接。 当你把相关字选定好后右键超链接， 勿把多余的字或图片都选定。如果对地址栏进修改链接。看见链接在URC上进行修改，或在浏览文件夹上重新选择内容。4.5 检查网页一个好的网站对设计的每个细节都不会放过，那怕是一个微小的拼写错误都是绝对不能出现的。但是遗憾的是，许多设计者都缺小这科技能。确保你拼写正确，并且格外注意平常容易误写的错别字，要时时刻刻保持一种严谨的科学态度。第五章网页制作疑难5.

19、1 正确键入文件名在制作网页前，必须清楚怎样才是正确文件名。在网络上所有的文件名都是有英语的，不少的人认为要记住英文字母倒不如用文学更直接。在整个制作到最后也是挺顺利的。但问题并不是这里。如果一旦把网页上传到网上此页就无须显示的。最终要从头到尾链接，注意正确使用文件名。5.2 修改 logo 图片的修改有多种方法。但最简单和直接方法就是用画笔修改。开启“ 开始 ” 菜单下“ 附件 ” 中的画笔修改。 打开所需修改的图片，选择左边的工具栏就可以修改。但这种修改方法只适用于小修改。要进行全面的修改就要用别的方法。5.2.1 logo的作用网络 logo 设计更应注重一种对事物张力的把握。在浓缩了文

20、化、 背影、 对象、 理念及各种设计原理的基础上，实现对象最冲动的视觉体现，也可以理解：不认同、不现实、不前卫、不艺术、不朴实等相互矛盾的理由而被用户拒绝成为爱众排斥、遗忘。完善的 logo 设计， 尤其是有中国特色的logo 设计， 在国际化的要求下。一般都应考虑至少有中英文双语的形式。要考虑中英文字的比例，搭配。一般要有图案中之图案英文、图案中英文。在设计 logo 时，面向应用的各种条件作出相同应用规范，对指导网站的整体建设有着极现实的意义。具体须规范logo 的标准色。设计可能被应用的恰当的背影配色体系。反向，在清晰表现logo 的前提下制订logo 最小的显示尺寸，为logo 制一些

21、特定条件下的配色，辅助色带等方便在制作Bonner 等、场合的应用。另外应注意文字与图案边缘应清晰，字与图案不宜相交叠。另外还可考虑logo 竖排效果，考虑作为背影时的排列方式。5.3 鼠标跟随名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 开始我本以为FLASH动画才有这样的效果，当我在网上寻找关于这一方面的资料时使我大吃一惊。原来这些动画并非用FLASH做的。只要在HTML 的 language=” Javascript” 第六章申请与上传网页6.1 申请网站空间与上传网页网页最终都是放到网站上。怎样申请网站空间？通过毕业的师兄师姐的知中国学生网申请较为容易。 我知好几个同学试着申请一个看看怎样。搞到大半天都没有收到网址。后面同学们从邮箱中得到名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -