网页设计制作技巧
网页设计制作技巧
网站的主要结构页面，又称次首页、内页，大型网站往往框架页即首页，如一些门户网站。框架页主要是网站内部主要栏目的首页，讲究风格的一致性，并于主页呼应。下面是我整理的网页设计制作技巧，希望对你有帮助!
一、页面平铺
把页面平铺开，主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。
1.导航栏
导航栏如果设计得恰到好处，是会给网页本身增色很多。导航栏有一排、两排、多排、图片导航和Frame框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。
2.LOGO
LOGO并不是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。
3.BANNER(广告条)类型
Banner设计注意点：Banner有动态和静态两种。在浏览网页的.过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。设计要点：Banner的文字不能太多，用一两句话来表达即可广告语要朗朗上口，可以第一时间的让人捕获表达的重点图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没图形尽量选择颜色数少，能够说明问题的事物如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。
4.按钮
按钮设计要点：设计按钮要同页面的整体协调，不能太抢眼有的页面很单调，还要依靠花哨的按钮来提一下选用的字体，选用的插图，或插图及字体搭配，都要考虑字迹清楚，色彩简单一些，不要超过四种很长的按钮可能就是框架的分界，尽量要纤细一些，否则页面会显臃肿。
5.图片
为了美化页面，图片是任何一个页面都要用到的，图片的运用要合理。图片运用要点：图形的主体最好清晰可见图形的含义最好简单明了图片内所含文字应该清晰容易辨认背景与主体明度对比比例应为3∶1到5∶1之间为宜淡色系列的背景有助于整体和谐淡色材质背景最佳，能与主题分离之浅色标志或文字背景亦可。
6.文字
文字也是设计的。设计要点：每一行文字的长度最好20到30个中文字(40到60个英文字母)行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读标题以H1到H3字号为佳，内文Font size=3到4级为佳同版面字型最好在三种以内文字的颜色最好也是三种以内文字在颜色上要与背景区别内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果表格或清单内的字运用相同字型与字体大小，以利辨别。
二、整体规划
有共性，才有统一，有细节区别，就有层次防止设计与实现过程中的偏差设计的各部分，要配合整体风格不仅页面上各项设计要统一，而且网站的各级别页面也要统一信息不要太过集中，以免文字编排太紧密不要有太多分散注意力的点。动态闪烁要适中页面留白部分，要根据平面设计原理来设计，注意分栏式结构不宜留白还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片。
三、功能易用性
导航栏应最先调入，以便访客快速前往所需信息空间页面长度要短，使得用户在信息空间内可迅速移动导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。
作为零基础的同学，要系统学习网页设计，自然离不开一套系统的网页设计教程。你可以先从三大构成的基础理论学起，也可以从软件开始，因为这是进入设计行业必修的基本功。
学习设计说难也不难，说容易也不容易，培养学习的兴趣很关键，最好在学习之前先来做一个小测试→点击测试我适不适合学设计
现如今，常见的网页设计类型有：1.企业站。如：某某公司的网站，以展现公司形象以及业务信息为主。2.门户站。如新浪，搜狐，以大量图文信息为主。3.专题活动页面，如每年天猫双11的活动促销页面，或者新品发售的宣传页面。以上三类网页，都是以信息呈现为主，是我们平日里最常见的三种。除此之外还有论坛、地图、音乐、网站后台界面等，以功能型为主的网页设计。
要想学习更多网页设计的知识，推荐天琥教育咨询一下。天琥通过“面试、项目测试、复试、试讲、教研培训”五大步骤严格选拔设计讲师，确保每位讲师都拥有丰富的项目经验。进入天琥的他们大多是来自4A广告公司的设计达人、设计总监。他们凭借自身强大的项目经验，手把手教授学员，帮助学员掌握项目精髓
一些各页面共有的信息，如版权信息、联系方式、实际的物理位置等在各个页面内要保持一致。最好的办法是设计一个网页，包含这些共有信息，然后将其作为各个网页的包含网页，当需要更新时，只需要更新最原始的网页，其他页面将会随之更新，而且所有应用了此网页内容的页面将全部一致。尽量为访问者和在线购物者提供方便，例如亚马逊投资几百万美元开发新技术，仅仅为了顾客下单时可以节省几秒钟时间。
二、网站页面风格整体性
可以使用模板和风格表来确保网站整体形象的统一。除了首页外的其他页面要具有结构的一致性、色彩的一致性、导航的统一、背景的统一，这里的统一并不完全一模一样，比如在导航方面，导航内容、顺序一样，但色彩可以采用同一系列的不同色彩等。
三、网站页面关联性
在各个页面进行设计时，一定要设置“返回首页”的链接，并且放在比较醒目的位置。如果页面超过一屏以上，最好设置“返回首页”的链接按钮。除此之外还可以根据自己网站的特点设置一些按钮，如在线购物，可以设置购物车，加入购物车、交款等方便用户使用的链接按钮。
四、网站UI元素的原有性
在深圳网站设计中，个别具有特色的元素（如标准、象征图形、局部设计等）重复出现，这些特别元素要保持一致性。需要注意的是网站页面的设计与开发一定要与企业cls系统中的vi相一致。
网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，在这里就不做一一论述了。其实在我们做设计的时候并没有过多的去考虑什么形式，最重要的是抓住客户的需求，把握网站的定位做出合理的框架布局。
步骤：
1、点击【文件】【新建文件】【常规】【HTML页面】【打开】
2、如图所示，新建了一个空白的html页面，拆分视图
3、设置页面body样式信息
【-webkit-touch-callout: none-webkit-text-size-adjust: none】
是防止用户复制和保存图片,只支持iphone、ipad、android
4、设置页面的宽度和高度
【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199)top:352pxmin-height:550px_height:550pxwidth:640px }】
5、【关键点】
新建一个div标签，样式使用page-content
6、在段落标记<p>里面输入文字信息，这里天使就不排版了，主要是教大家方法，然后保存网页。
7、将网页上传到服务器目录下
8、输入网站域名，在电脑上访问可以看见效果，只有左侧部分
9、使用手机访问，得到如图所示效果，就不会像直接书写html代码一样文字很小
手机网站网页设计应该注意什么问题：
1、网页宽度不用像素表示，用百分比表示（如：width=100%）；
2、左间距、上间距设为0；
3、屏蔽图片显示；
4、charset使用UTF-8编码（国际化编码），不使用gb2312编码。
