网页设计的一般步骤

看到这个题目,如果你说,网页设计非常简单,根本不需要什么步骤,直接打开dreamweaver软件,然后设计编写即可。那么我只能说,你太不专业了。网页设计是要有一定的步骤的,有了这一些步骤,你的设计过程会更加高效、紧凑,这个是经验。

首先,网页有三层,内容层、表现层、交互层。这三层分别对应的技术是,html、css、javascript。html是储存数据用的,它的作用就是储存并且显示数据;css是用来排版表现,修饰html中的数据,让它显示更加美观更加合理;javascript脚本就是提高页面交互性,提供一些特效,增加了页面的功能等。既然这样,我们就需要一定的步骤,来分别完成这三层的工作。以下就是潜行者m的个人设计经验,以一个用html5构建博客模板为例。

第一步:设计并且画出原稿(非必须)

在动手编写之前,最好想好画出原稿,这样就能照着原稿进行编写,可以提高效率并且不会丢失主题。但这一步不是必须的,如果你大脑已经想好了要怎么设计,那么不必画出,直接开始设计吧。

第二步:规定内容的展示与元素的命名(必须)

确定需要展示的内容,并且进行命名。一个博客,往往需要在头部放置一个logo,那么我就需要在<body>中添加<header><div id=”logo”></div></header>,即在头部,添加一个id为logo的div。还往往需要使用文章分类,做一个网站导航,我就需要在<body>中添加<nav><ul><li></li></ul></nav>即在nav标签中,使用ul标签来做成一个网站导航。

在使用css去布局网页之前,你必须要先想好网页中要显示什么内容,然后使用对应的html标签,来规划,并且命名一个通俗易懂的名字,这样使用css去布局就变得容易多了,有利于提高效率。所以这一步是非常重要的。

第三步:为html增添css样式(必须)

到了设计最重要的一步,为已经规划好的html元素,赋予相应的样式。比如,让log宽300px,#logo {width:300px;};取消li标签默认的圆点,同时让它横过来变成导航,nav li{list-style-type:none;display:inline;}。由于在第二步,你已经对相应内容进行了合理的规划和命名,所以这一步,就要简单的多了,只需要按照对应功能添加相应样式即可。

第四步:添加javascript代码(非必须)

如果你想在页面中,添加一些动态交互的行为,或者是一些特效,那么你需要添加一些javascript代码,但这步不是网页设计所必须的。对于设计的工作,我们已经在上两步完成了,这步只是完善页面而已。

以上就是我的设计经验,我以前的设计,是边添加内容,边进行css样式添加,导致非常的混乱和低效。但是现在不同了,希望新手能理解并且应用,希望老手能够留言给出自己的更加合理的经验!