网页设计怎么做.docx

网页设计怎么做

软件技术
如果是只想制定一个网页页面效果图出来
那就很简单了
只必须要学习〔photoshop〕这样的图像处理软件就可以
如果还必须要加深一些的话，那么还必须要学习illustrator软件(用来制定网站上各个板块必须要用到的小图标，比如微信上面各种小的图标)
前端开发
如果是网页制定出来之后，还要把它制作出来，那就还要细分两个方向：
学习前端静态页面制作
要掌握最基础的html代码(其实只必须要掌握最常用的几十个就够了，剩下的随用随查百度)
要掌握div+css建站的技术(以前建站是table技术，现在基本没人用了)
要掌握javascript特效(现在很多人也用jQuery了，都差不多的意思)
后台开发
学习后台动态页面制作
要掌握php语言或者语言(两者选一个就可以，其实你会一个，再看另一个也基本相同)
要掌握数据库的用法(比如最简单的access数据库，或者sql数据库，最起码要会基本的增删改查)
关于制定
至于如何做网页制定才干好看?这里就涉及到〔平面制定〕的知识
画面配色 文案排版 整体布局
风格定位 元素定位
还涉及到〔ui制定〕的知识
用户体验制定 交互体验制定 ui制定规范
2网页制作web入门教程

(一)入门概念

基本概念上 你应该会了吧!这是重要的一步!不管你是用学校的网络，或是使用自己家的〔电脑〕上 ISP上网，至少你要能连上网络，这样我们才干持续下去啊! 有些人会搞不清楚 INTERNET 和 或是 BBS 究竟有什么分别，以最简单的话来解释：INTERNET 是一个网络的大环境，而它拥有多项的服务项目，如：、BBS、FTP、Gopher、Mail、News...等。就好象一家大的百货公司一样，有娱乐场、美食部、家〔电商〕...等的道理是一样的(只是的比喻)。 现在应该知道 INTERNET 和 的差别了吧!是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可以将他人的网站全部下载到我们自己的硬盘中，慢慢观摩学习。
3如何制作自适应网页

在网页代码的头部，加入一行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文件。
4网页制作的软件有哪些

最简单的网页制作软件：其实我们完全可以利用办公软件来制定网页，只要网页内容不太复杂或只涉及静态网页部分时，我们只必须要利用办公软件即可快速生成网页。具体做法，首先制定好页面，然后另存为网页格式即可。
Microsoft FrontPage,是一款轻量级静态网页制作软件，特别合适新手开发静态网站的必须要，目前该应用很少用于制作网页。
Dreamweaver网页制作软件，该软件已成为专业级网页制作程序，支持HTML、CSS、PHP、JSP以及ASP等众多脚本语言的语法着色显示，同时提供了模板套用功能，支持一键式生成网页框架功能。是初学者或专业级网站开发人员必备之选择工具。
CSS Design:一款合适对CSS对进调试的专业级应用，能够对CSS语法进行着色，同时支持即时查看样式功能，特别方便程序的调试以及效果的比对。
Flash动画制作软件：动画或动态图片是网页的重要组成部分，充分合理的使用Flash程序来制定网页元素，往往可达到意想不到的效果。
PS(Photoshop)图像处理软件：用于对网页图片进行润色或特别效果处理，是一款网页制作必备之软件。

第 7 页 共 7 页