网页设计怎么做 网页设计怎么做导航栏

网页设计怎么学?用什么软件设计?设计完了之后是把设计的图纸上传吗?你是只想设计呢?还是想设计完了之后，还要制作出来?接下来小编告诉你网页设计怎么做。

软件技术

如果是只想设计一个网页页面效果图出来

那就很简单了

只需要学习photoshop这样的图像处理软件就可以

如果还需要加深一些的话，那么还需要学习illustrator软件(用来设计网站上各个板块需要用到的小图标，比如微信上面各种小的图标)

前端开发

如果是网页设计出来之后，还要把它制作出来，那就还要细分两个方向：

学习前端静态页面制作

要掌握最基础的html代码(其实只需要掌握最常用的几十个就够了，剩下的随用随查百度)

要掌握div+css建站的技术(以前建站是table技术，现在基本没人用了)

要掌握javascript特效(现在很多人也用jQuery了，都差不多的意思)

后台开发

学习后台动态页面制作

要掌握php语言或者asp.net语言(两者选一个就可以，其实你会一个，再看另一个也基本相同)

要掌握数据库的用法(比如最简单的access数据库，或者sql数据库，最起码要会基本的增删改查)

关于设计

至于如何做网页设计才能好看?这里就涉及到平面设计的知识

画面配色 文案排版 整体布局

风格定位 元素定位

还涉及到ui设计的知识

用户体验设计 交互体验设计 ui设计规范

(一)入门概念

WWW基本概念上 WWW 你应该会了吧!这是重要的一步!不管你是用学校的网络，或是使用自己家的电脑上 ISP上网，至少你要能连上网络，这样我们才能继续下去啊! 有些人会搞不清楚 INTERNET 和 WWW 或是 BBS 究竟有什么分别，以最简单的话来解释：INTERNET 是一个网络的大环境，而它拥有多项的服务项目，如：WWW、BBS、FTP、Gopher、Mail、News...等。就好象一家大的百货公司一样，有娱乐场、美食部、家电商...等的道理是一样的(只是的比喻)。 现在应该知道 INTERNET 和 WWW 的差别了吧!WWW是20世纪90年代初兴起的一种服务。

(二)设置主题 网站的种类

1、专业网站：越专业、越丰富、、越有参考性，那么你的网站将屹立不摇，在网络中占有一席之地。

2、教学网站：如电脑软件的使用、或任何的教学内容，事事能教，毕竟好学的人不少，你不就是吗!

3、下载网站：许多免费的资源，若能有心的去收集，最好再加点说明，那么也是相当吸引人的。

4、网址网站：到处去搜集网站，做个总的整理，方便网友连接访问，也就节省了查询时间，是吸引人相当不错的方法。不过维护上不太容易。 ?6?4个性网站：就是与众不同的网页!这就要看个人的巧思及创意了。越独特，越吸引人。 5、地下网站：基本上不鼓励这个!不过，所谓“杀头的生意有人做嘛”如：情色站、破解站，越非法，大家就越好奇，不过，小心别惹祸上身。 不同类型网站的架构与特色

至于网站整个的操作架构，本人认为不同性质的网站，多少会有不同的需求以及操作介面。所以就将上述几种网站，将其架构或操作介面做简单的整理：

6、专业网站：专业性网站，图片是少不了的，因此，要注重于版面的安排以及图片的设计，让网友能对你的专业知识有清楚的认识。

(三)工具使用

首页制作工具：文字编辑软件：在选择网页制作工具时，最简单的莫过于记事本了，如果你想选择记事本的话，那么前提你必须熟悉HTML的各种标签，否则最好别选择记事本!目前我主要是使用记事本了。当然在这里我们还可以选择其它的文字编辑软件，比如：word等，最后保存为web格式就可以了。

HTML辅助工具：设计者需要知道 html 标签的用法，此类软件旨在使设计者能够快速且方便的做出首页，不用死记标签，部分软件甚至会有提示、诊错、建议的功能。不过初学者最好不要使用，难以进入快速的状态。如Home site 3.01等。

所见即所得类工具：给初学者入门用，用法简单，不需要记住HTML的各种标签，只要用几分钟就可以快速制作出网页，如：FrontPage、Dreamweaver等。 图片制作工具

网页需要美观，需要在网页中加入一些漂亮的图片，这时我们必须熟悉一些图片制作工具的使用。在这里首推：Photoshop，当然你也可以选择其它的制图软件，如：Fireworks，Ulead Gif Animator，ACDSee等大家熟悉哪个就选择哪个了，当然也可以选择其它的!只要能制作出精美图片就可以了! 网络工具

LeadFTP，CuteFTP都是非常上传工具，可以把我们制作的网页上传到网络空间。 Teleport Pro可以将他人的网站全部下载到我们自己的硬盘中，慢慢观摩学习。

在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。对图像来说也是这样。

具体说，CSS代码不能指定像素宽度：width:xxx px;

只能指定百分比宽度：width: xx%;或者width:auto;

字体也不能使用绝对大小(px)，而只能使用相对大小(em)。

例如：

body {font: normal 100% Helvetica, Arial,sans-serif;}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

流动布局(fluid grid)

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

main {float: right;width: 70%; }

leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素(max-device-width: 400px)，就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

最简单的网页制作软件：其实我们完全可以利用办公软件来设计网页，只要网页内容不太复杂或只涉及静态网页部分时，我们只需要利用办公软件即可快速生成网页。具体做法，首先设计好页面，然后另存为网页格式即可。

Microsoft FrontPage,是一款轻量级静态网页制作软件，特别适合新手开发静态网站的需要，目前该应用很少用于制作网页。

Dreamweaver网页制作软件，该软件已成为专业级网页制作程序，支持HTML、CSS、PHP、JSP以及ASP等众多脚本语言的语法着色显示，同时提供了模板套用功能，支持一键式生成网页框架功能。是初学者或专业级网站开发人员必备之选择工具。

CSS Design:一款适合对CSS对进调试的专业级应用，能够对CSS语法进行着色，同时支持即时查看样式功能，特别方便程序的调试以及效果的比对。

Flash动画制作软件：动画或动态图片是网页的重要组成部分，充分合理的使用Flash程序来设计网页元素，往往可达到意想不到的效果。

PS(Photoshop)图像处理软件：用于对网页图片进行润色或特殊效果处理，是一款网页制作必备之软件。