http://blue.1718vip.com
 

2008-6-6 11:47:00
一个网站设计和制作的详细过程

般做网站之前,一定要写构思好,你要建设什么网站,网站分辨率是800×600,还是1024×768。
1024×768我们俗称是宽屏,800×600是窄屏。

高度:没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。

  宽度:
  1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
  2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005
  3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001
  注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

  所以如果是1024的分辨率,你的网页不如设成1000安全一点。如果是800的分辨率一般都设成770。

  这些需要明白并且牢记,不然很可能做出来的东西不符合浏览器要求。不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化,所以800的分辨率一般设定760左右;1024的设定990左右。

这样用辅助线和标尺把大概范围划分出来,请大家注意笔者的划分:正好是770,和1000的地方。因为要做的网站是1024分辨率下的,考虑到依然可能存在使用800分辨率的用户,所以把主要的内容和菜单都放置在770以内;770-1000的地方放一些辅助的东西。这个细节特别是在做一些门户网站设计的时候,更要考虑周全,毕竟改善用户体验也是非常重要的问题。

所以我们做800×600的时候我们设置760
如果是1024我们的网页设计为990


2、那我们用什么字体了。这是我们网友关心的问题,那大小是多少了,

一般我们用宋体。大小是12PX。这里注意,设计字体大小的时候我们不要直接设计字体大小而要运用到CSS样式。来做。

3、用表格做了还是DIV+CSS做。我这里建议会员用表格做。

4、如何定位自己的网站用宽屏还是窄屏
这里我就要重点说说:如果你的网站的信息量非常大,类似门户网站建议用宽屏。如果是企业网站用窄屏。
也可以首页是宽屏,内页是窄屏。
5、作为一名新的设计师,我们应该如何入手:
1)首先必须要掌握html语言和Dreamweaver 8的运用。
2)多看看一些企业网站和门户性网站的设计,这里我要说的是不要看韩国网站,因为韩国网站全部是图片+flash制作的。
3)要了解\"java\" \"\"语言以及flash
6、我知道了自己的网站定位了。但是我还是无从下手。
会员已经知道自己要做什么网站了,例如我要综合性门户网站、或者是导航类门户网站。或者是某一个领域的企业网站。
那我怎么做了。
这里会员就要在草稿纸上先画出网站的大概构架。需要有那些功能。那些栏目。我这里举例
例如,我要做一个企业网站。首先,我要在草稿纸上画出这个企业网站需要用那些功能,要不带有数据库。
这里我要说明的是:不要一开始就下定义我要设计一个asp网站,要做一个静态的网站。
补充:
一般网站是这样组成的:
1、静态网站html的
2、动态网站:全asp的带有数据库是access的或者是mysqlsever的
3、静态+动态综合的
4、动态转静态的网站。
首先我们确定要用什么语言做。是静态了,还是动态,还是静动态相结合。
我这里说明:根据客户或者你们自己的需求。如果你们需要带有数据库的网站,就要用到asp的。如果没有数据库,没有会员管理系统可以用静态,就是一个完全的静态网站。
好,我们确定了网站的语言了,那我们开始确定栏目。构架了。

但是会员说:构架我想好了,但是我不知道怎么排版,怎么设计了。

这里就是我跟大家说的是:大家要多看看网站,这个看网站不是看他的内容如何,而是看他的布局如何,怎么排版的。

要多练习。多看。这样你就能够提高。

好了,我们的网站也确定了,功能排版也在草稿纸写好了。

我们开始设计了。

这里我说明的是:按照大多数会员的想法是,我马上直接在Dreamweaver 8开始设计我的网站了,这是错误的。
因为这样设计出来,你的布局。排版显得非常的混乱。
所以我建议会员用PS设计。或者用FW设计,这里根据各人的爱好了。我用的是PS设计。
根据我给大家的尺寸,在PS做好图纸,然后根据你的草图设计。

这里会员说了,我只会设计网页,不会美工。这里我要解释一下:
一般设计网站有2套人马
一套是美工,是专门设计美工图片的。
这个美工,就是根据你的草稿开始排版制作你所需要的图片,然后切片裁出网页。
第二套就是根据裁出的网页设计css样式,排版了。

一般美工可以完成网页设计的。包括制作

所以一般设计网页的必须要会美工。
程序员是专门写代码的。而网页设计就是美工了
但是:我们的会员说:我美工不会,怎么办,怎么设计呀!还是那句话:多看,多练习,多欣赏佳品。
美工开始自己的创意设计出来了。自己的网页作品。
然后开始切片,这个切片的时候我建议旁边放一个计算器来测算高度,长度和宽度。这样裁出来就非常精确了。

好了,裁出来以后我们开始设计网页了。

首先我们把裁出来的作品建立一个文件夹:
如edu这个文件夹
在这个文件夹建立images文件夹
imsges是专门放网站的图片。
这里我说说如何给网站的文件夹命名

首先index.html是首页文件
images是图片文件夹
可以把所有的图片全部放到这里面
如:高考我们命名为gk-1,gk-2,gk-logo,gk-banner等等,这里注意建议大家用jpg格式的图片,因为图片非常清楚。
以此类推
有的会员说,这样很麻烦,也可以在images里面在建立各个子频道的文件夹注意,子频道的首页文件也跟这个一样,根据个人喜欢了。
然后我们根据裁出来的文件开始用Dreamweaver 8设计了,因为我们裁出来的就是网页格式了,所以我们直接拿出来修改,就不要我们在用Dreamweaver 8排版设计了,这样就非常的方便。
排版好了,我们开始更换我们的内容了,因为用PS裁出来的只是我们的图片,而内容不是了,所以这里我们要开始填充我们的内容了
这里就要牵涉到css样式了,我这里建议大家用css样式,
注意:我这里不建议大家用Dreamweaver 8的模板功能,用html直接更换比较快,因为一旦用了模板你就限制死了,无法灵活的运用了。
会员说了,我们每个页面的内容如导航。广告都是一样的,如何更新太麻烦了,有2种方案:
1、用图片来做!
2、用文字。
3、用变量来控制。这个变量先在CSS设计好!然后通过变量来调用里面的内容
4、就是flash
我建议大家用变量来调用或者是替换的方法。

小号 | 阅读全文 | 回复(1) | 引用通告 | 编辑
2008-6-13 6:38:22
非常有同感

自从我参加了21天成功训练营(http://www.21days.cn/train)后,我才重新找回了自信。非常感谢你的文章!
暖愛(游客) | 个人主页 | 引用 | 返回 | 删除 | 回复

发表评论:

    大名:
    密码: (游客无须输入密码)
    主页:
    标题:
公告
时间记忆
最新日志
最新评论
最新回复
我的好友
我的相册
站点信息
生活因感动而精彩,理想在创造中放飞
Powered by Oblog.