新手学做网页的20个技巧怎样设计网页的主页 _经验分享

网页设计的基本步骤及设计方法
网页设计通常有哪些基本步骤呢？要想设计出漂亮的页面。需要熟悉哪些设计方法呢？以下仅供参考！
第一步. 收集与归纳素材
确定项目设计方案、确定项目创意要点、确定项目表现形式、确定项目文案以及确定项目相关素材。
第二步. 处理酝酿,构思画出项目原型图
让思想自由驰骋，发挥思维的灵活性；对前期收集的信息进行综合处理；运用各种方法勾画出若干可实施方案。
第三步：讨论并总结可实施方案
对一众方案进行筛选并挑选出最具备可行性特质的方案。
第四步. 项目设计实施与后期校验
在整个项目进行过程中，都要对项目的各个关键点进行全面的思考，并要与项目相关的各个角色保持高效的沟通，善于抓住问题核心并能给出相应的解决方案，很多时候设计师的沟通水平决定了项目的进展、推进速度与最后输出成果的质量。
网页设计创意方法之一——借鉴创意法
特点：较适用于短平快．但又要求有细节的项目。
借鉴创意法可以从我们已知的一切入手，一如街边的路牌、途中的风景、斑驳的墙漆、月夜下的街灯，再到同行的案例启发，这些都是我们可以吸取的地方。相信我们都有逛网的习惯，这不仅是积累各方知识及了解时下流行视觉趋势的好方法，无形中也丰富了我们的创意阅历，为借鉴创意种下良好的因子。在工作中，当我们黔驴技穷，为找不出一个好的创意解决方案而挠头时，可以吸取日常工作、生活中的所见所闻，从其中的一个点，或者一个表现出发，借鉴其成功之处，拓宽创意思路，结合项目现状，给出优质的创意设计。
网页设计创意方法之二——情景(情感)映射创意法
特点：较适用于短平快．对情感有一定诉求的项目。
说明：情景创意法的'进行要求对一个想法进行纵向深入发掘，思维忌横向发散。
生活中，我们都是独一无二的，不同的成长的历程赋予了我们不同的阅历、不同的性格、不同的想法与世界观。我们每个人都有自己独一无二的想像力、理解力和判断力。于是乎，当我们面对同一件事物时，会做出不同的情感反映。同样的，在我们的日常创作过程中，也就有了不同视觉风格，不同创意想法的出现。
情景映射创意法是把我们所要表达的概念化的、抽像化的东西（如文案、主题等）丰富化、立体化。把这些所要表达的概念逐步的从低级抽象向高级抽象演变，直至获得满意的创意表达为止。
比如说春天，在想到春天的时候。在脑海里我们都会出现不同的元素，丰富而有诗意，绿色、和风、细雨、春泥、青草，还有风筝、燕子、踏青诸如此类。由此，我们可以充份发挥我们的主观能动性，融合主题创造出富有感染力的创意画面。
网页设计创意方法之三——思维导图创意
特点：要求有较好的视觉表现力，有思想深度、延展度的项目，如海报、平面、广告、富媒体等。
思维导图是一种放射性的创意模式，被认为是最自然的一种创意工具(自认为是这样)，很多时候，当项目对创意表达有较高的要求时，它是一个既简单有效又具有美感的创意工具。思维导图法以需要解决的问题为起点，把我们所认识的、与问题有关的元素进行联想细分，向外延展，再延展，充分发挥联想的创造力。然后思维再跳出来，把这些之前创造性的想法都结合起来，进而激发出我们创意的火花。
网页设计创意方法之四——头脑风暴与逆向思维
说明：较适用对整体创意有较高要求的项目，如大中型项目的创意起始阶段。
局限性：头脑风暴方法对会议的主持人有一定要求，要求具备相当的专业性与组织能力。
说起头脑风暴，似乎已经没有人不知道了；在创意工作开始的时候，想到的最优先的，也应该是头脑风暴，但在这里还是想提一下。因为始终觉得在众多创意方法中，头脑风暴确实是优秀的且可行性很高的创意方法之一。
头脑风暴的特点是：众志成城。是集众人才智解决创意缺失的良好方法。是众多创意方案的集合。是创意工作中的捷径。

手机网页应该怎样设计?
步骤：
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:352px; min-height:550px;_height:550px;width:640px; }】
5、【关键点】
【新手学做网页的20个技巧怎样设计网页的主页】新建一个div标签，样式使用page-content
6、在段落标记<p>里面输入文字信息，这里天使就不排版了，主要是教大家方法，然后保存网页。
7、将网页上传到服务器目录下
8、输入网站域名，在电脑上访问可以看见效果，只有左侧部分
9、使用手机访问，得到如图所示效果，就不会像直接书写html代码一样文字很小

手机网站网页设计应该注意什么问题：
1、网页宽度不用像素表示，用百分比表示（如：width=100%）；
2、左间距、上间距设为0；
3、屏蔽图片显示；
4、charset使用UTF-8编码（国际化编码），不使用gb2312编码。

网页设计的方法有哪些？
第一种，自己手工源码搭建：
1、国内买域名，必须实名认证，如果国内的服务器必须ICP备案
2、租服务器，一般Cenos Linux系统比较多，win系统的比较少；Nginx和Apache的个人建议Nginx，一般企业类，商城类网站源码php的占大多数，建议php5.4以上，之前的有些老了
3、添加站点设置域名：你的买域名 2设置根目录 3设置ftp 4数据库
4、编辑源代码，几乎没有从零开始的，找些免费开源的改动内容，功能不同选择不同的系统一般通用系统：PageAdmin ；论坛系统：discuz；购物系统：ecshop；博客系统：wp；需要授权的系统需要注意授权问题，内容修改一般用deamviewer修改比较方便，如果改动很少，那就用notepad++，注：不要用windows的记事本修改，会出错，数据库文件指向一定要设置好。
5、下载xshell，安装，填写服务器ip，密码，链接，上传源码到服务器的根目录
6、设置域名解析，打开买的域名的管理后台，添加记录，填写记录类型选择A型，主机记录写www，解析线路选择默认，记录值输入服务器的ip，TTL默认10分钟
在浏览器打开域名，浏览网站。
第二种，自己手工一键搭建：

第一步：百度搜索菲尔莱斯科技，打开菲尔莱斯科技官网，免费注册您的账号，注：（生成的网站二级域名会是：账号.flspt.com）。
请点击输入图片描述

2
填写注册的相关信息
请点击输入图片描述

3
注册成功后进入后台页面，点击管理企业网站
请点击输入图片描述

4
填写网站标题，网站类型，进入电脑站，初次使用的用户，可以选择左上方的急速建站
请点击输入图片描述

5
选择适合自己的行业的模板，不同行业模板后期也可改动适应自己的需求
请点击输入图片描述

6
例如：选择数码、家具、家具百货栏目里的电脑类，点击使用
请点击输入图片描述

7
免费制作网站后，可对标题、栏目、图片进行上传编辑，点击右上方可以预览生成的网站，点击左上方网站管理进入网站后台管理。
请点击输入图片描述

8
后台可浏览网站数据，如需绑定自己的顶级域名，点击系统设置-网站域名，按教程进行绑定
请点击输入图片描述

9
网站做完后网站上方会有，您的网站试用资格将于 XXXX-XX-XX 到期，打开菲尔莱斯科技官网点击-产品介绍-开通免费站，提交后即可正常使用。

该如何设计网页
一、网站结构设计
网站结构设计包含网站栏目设计和网站模块设计以来确定网站提供服务的一种逻辑表现形式，也是网页之间的层次关系。
1.网站栏目能起到提纲挈领额作用
2.网站栏目具有清晰导航的功能
3.网站模块要做到顺序清晰且紧密结合
二、网站主题设计
网站主题设计实际就是网站视觉呈现风格的设计。网站的主题风格要能充分吸引用户的注意力，为用户提供愉快的访问体验。
1.设计能反映网站内容的logo,并且将logo放在网站的醒目位置。
2.网站的颜色要统一，要突出网站的主调色彩。
3.相同类型的图像要有相同的效果。
4.网站要有一句明晰的宣传标语。
三、网站布局类型
1. 国字型布局
这种布局类型分为上边栏、左边栏、中间内容区、右边栏和底部的页脚区域，其形状酷似一个“国”字。国字型是目前比较常用的一个网页布局结构，它适用于信息分类繁多、需要良好组织的网站。
2. T字型布局
这种布局类型由上边栏、左边栏、内容区、下边栏组成，其形状有点像一个英文字母写的“T”字。T字型网站目前在一些权威机构、企事业单位的公司网站出现得比较多。
3. 左右框架型布局
这类网站主要由左边栏和内容区组成，组成比较简洁，主要用于精彩内容的呈现，主要是很多个人站点、博客的首选。
4. 上下框架型布局
这类网站由上下边栏组成，上边栏用来放置logo和链接等信息，下边栏用来放置网页的内容。上下型网站经常用来进行个性化展示，在企业门户网站的公司展示中也比较常用。
5. 标题正文型布局
这类网站的布局结构由上边栏和内容区组成，上边栏用于显示文章的标题。主要用于显示文章的标题，内容区放置文章的内容，这类布局在一些论文、学术网站的设计中比较常用。
网站设计都不会单独使用以上列出的某一种布局结构，而是通过混合使用多种布局结构来实现自己想要的效果，这类布局通常称为“综合性布局” 。
四、网站页面设计
网站页面是网站的最终表现形式。网站页面内容的质量度和页面的美观度来决定。页面设计应该遵循的原则如下：
1.符合企业的行业属性和企业特点。客户打开网站能直观感受企业所传递的理念和特征。
2.符合用户的浏览习惯。根据网站内容的重要性进行排序，让用户花最短的时间能够找到自己需要的信息。
3.符合用户的使用习惯。将用户经常使用的功能放在网站的醒目位置。
4.图文搭配。
5.利于搜索引擎优化。减少图片和动画，多使用文字描述，以便于搜索引擎收录，让客户更容易找到你。格子网络解答。
新手学做网页的20个技巧
新手学做网页的20个技巧
导语：新手如何做好网页设计?在这里我整理了给新手学做网页的20个技巧，每一个网页设计新手在开始一个项目之前都应该了解这些知识，在项目开展中也应该注意。下面一起来看看吧!
01：将你的想法先在纸上画出来敢想敢做，有想法就应该画下来
这是一幅世界各地不同年城市特色建筑的草图这个想法看起来好像理所当然，似乎每个人开始设计之前都会在纸上画草图。但是据我观察很多设计师都跳过了这一步，从没有考虑过他们将会面临的问题。设计就是要解决问题，但是这些问题通过渐变、阴影设置是解决不了的，只有通过调整布局和层次结构才能解决。所以在你开始设计之前，一定要先想好布局。
02.描绘一个顶层框架
描绘一个基本的框架可以帮助你解决UX方面的问题，同时规划布局。当我接手一个项目的时候，做的第一件事就是建立一个顶级框架，这样可以解决所有的设计问题。这个框架是指环绕在内容周围的UI，它可以帮助我们执行操作，更好的操纵页面。它包括导航和组件，比如侧边栏和底部的按钮。
如果你通过这种方式来做设计，在不看主页的情况下，你也能清晰的知道应该怎样布局。
03.给PSD添加网格
这是一个有978个网格的PSD文件，每条线的宽度为10PX 。画网格做起来就像听起来那么简单，虽然你不画直接开始设计完全可以，但是我相信设计出来的作品绝对没有画了网格好。网格的好处就是帮助你构建不同板块的布局，起一个指导作用，帮助你制作响应式模板。
04.选择你的字体
网页设计中很重要的一个原则就是一个网页中不要出现两种以上的字体在一个项目中，寻找好看的字体也是很重要的一部分，但是我要提醒你，在同一个网页中千万别使用两种以上的字体。选择字体的原则就是要易于用户阅读，尤其是文字很多的页面，文章标题的字体可以有趣一些，这样能吸引用户的注意。在使用字体的时候不要畏首畏尾，个头大不是问题，只要整体看起来很和谐生动就行了。
05.选择合适的颜色主题
使用有限的颜色和色调，减轻用户的视觉压力。在选择字形的时候，你就应该想好用户界面、背景、文字该用什么颜色。我建议你在颜色的原则方面一定要有节制，别想到哪个用哪个，最后五颜六色乱七八糟的，这也是大忌。
在这一步中，你要根据每个元素的功能选择颜色，并且在用户界面中，相同的元素颜色一定要一致。你可以观察一下facebook、推特、quora、vimeo等等网站的.页面，在不干扰功能组件正常使用的情况下，除了用户界面，它们的插画和平面细节没有任何颜色限制。
06.分开布局
网页结构越简单，用户使用越容易在网站中，每个模块都要有个故事，要给用户一个浏览的理由和最终的结果。而设计的作用就是强调这个故事中最重要的那部分。在现实设计中，主页面不能将所有的信息都显示出来，所以你必须在主页先告诉用户“进了这个网站你能做什么” 。
发挥你的聪明才智思考一下你能想到的极简页面，有最简单的目标和必要的构件。最后你会发现，原来保持简单这么困难。
07.重新思考
我们真的需要搜索按钮吗?在很多案例中，答案是否定。作为一名设计师，是我们一手决定了用户浏览因特网的方式和界面，由你决定用户进一个页面需要多少步骤、一个网页效率有多高。在设计完之后，一定要多测试，发现漏洞，及时修改，这样才能做到极致。
08.挑战自我
我鼓励每个设计师勇于创新，挑战自我，尽管对一个项目来说，创新并不是要求之一。挑战包含什么?比如使用一个新格栅系统、开发一个新的组件或者不使用混合模式、特殊颜色等等，这些都是挑战。
09.关注细节
正在制作中的游戏，细节展示这句话你应该听过很多次也记住并实践了，但是在最终的产品中却看不到。细节可以是一个小互动，一个出人意料的动画，或者是一个漂亮的渐变按钮等。我相信如果你真的喜欢手头的工作，那么小细节肯定会有的
10.每个组件都需要被温柔善待
认真对待每一个组件，最终的结果一定比100分要多。这句话我听了不下一百遍，但每一次都被深深地震惊了。在你设计每个组件的时候，你要这样想：爷设计的组件随便拿一个出去都可以得设计界的奥斯卡。只有这样，整个网页出来后的效果才能惊艳众人。
11. 让你的作品更加精致
为了避免模糊，在背景和元素之间设置正确的对比度。除了考虑审美问题，你还要保证作品的干净整洁无毛边。注意边缘、字体渲染、渐变等问题。
12.整理你的PSD文件
在用PS做设计的时候，整理PSD文件是一项很重要的工作。除了整理项目的大小和顺序，你还要保持文件的整洁，这对前端工程师的工作是很有帮助的，能加快整个项目推进的速度。
13.最好的设计，最坏的打算
在大脑中预想一下你做的东西在不同尺寸的屏幕上会是神马样子作为设计师，我们还有一个职责就是解决不同设备上的尺寸限制问题。在网页设计中，这个限制可以从概念一直排到技术，子子孙孙无穷尽也。在做网页的时候，我们不仅要在理想的尺寸中试运行，还要考虑最差的尺寸，因为万一用户的手机屏幕尺寸真的很小怎么办?
14.多看你的设计直到厌倦为止
我相信如果你对设计一直都非常有激情，那么“看自己的作品直到想吐”这件事你一定经历过。初入设计这行，每当我完成一件作品，我都觉得非常骄傲，我感觉这个作品就是我生活的一部分，是我的孩子，我将它截图保存，在不同设备上浏览它，把它做我手机电脑的桌面，甚至打印出来挂在墙上…后来我真的有点反感了，我开始觉得它哪都有问题，哪都不好看，最终我重新设计了它。开始厌倦你先前的作品是成熟的表现，这意味着你从错误中学到了新的知识。
15.不要纠缠于概念
当你和客户交流的时候，确保你们俩在同一频道，千万杜绝鸡同鸭讲这种情况。万一这种情况发生了，千万冷静别拍案而起，你要知道你拍走的都是白花花的银子啊~~~~如果你的顾客连你说的第一个概念都不喜欢，那么你就该反思了，这时候你要收集客户的反馈信息，为下次交流做准备。
16.与工程师做好盆友/好基友
在一个项目中，工程师不需要从头跟到尾，他们只需按时做好自己的事情就OK了。你以为我说的是真话吗?呵呵，我要告诉你，这样想的人是傻瓜。因为很多好主意都是由工程师提出来的，他们如此高贵冷艳才华横溢，你怎么能不紧紧的抱住他们的大腿呢?!
17.把我当做你幼龄的孩子，给我讲解你的方案
跟顾客讲解产品的重要程度不亚于制作产品，如果你说的不合适，那么你的设计就可能被忽略，说清楚比让别人看清楚更重要。
18.要喜欢你的每一个点子，但别太过看重
作为一个设计师，你要充分相信自己的才华，相信你的作品。但同时你也应该有心理准备，要能随时从一个项目中抽身转战下一个。
19.在开发过程中追踪你的设计
在你交完PSD文件工作就结束了?图样图森破，很傻很天真。如果你真的关心自己的设计是否被前端工程师温柔善待，那就应该多和前端聊天，尽最大的努力帮助他们，哪怕只是一个像素的问题。
20.展示尚未完成的作品
在社交工具中分享你的样式表和未完工的组件。有时候一个项目中最好的部分因为种种原因被忽视，所以你也就忘了。一旦项目完成，就更没有心思回头审视了。所以，如果可能的话，多在社区和大家交流、分享，众人拾柴火焰高，我们也会发动大家的力量帮助你，让你得到有价值的反馈。
;
Photoshop制作网页的方法
设计网页的方法很多，常见的有直接编写代码方法，利用可视化软件设计(例如DreamWeaver)法，利用中间软件实现格式转换法(例如Word生成HTML代码)，还有就是PS设计网页法。我们为大家收集整理了关于Photoshop制作网页，以方便大家参考。
首先，用Photoshop建立空白画布，载入一张网页图片
利用切片工具，把图片切片(切成你想要的效果)
然后打开“开始”菜单，找到另存为web格式
然后全选，全部储存为JPG格式，保存图像和HTML网页
保存好的HTML在Dreamweaver打开即可进行其他编辑了，也可直接在网页中打开。
关于怎样设计网页和怎样设计网页的主页的内容就分享到这儿！更多实用知识经验，尽在 www.hubeilong.com

新手学做网页的20个技巧 怎样设计网页的主页

新手学做网页的20个技巧怎样设计网页的主页