想把网页做漂亮了真不容易~美工们~你们辛苦了——菜鸟学WEB有感

这几天学Web，我们小组的项目是做一个微博出来（很简单的那种，只要实现一些最基本的功能就好了~），要学好多东西，第一次接触JavaScript，以前还以为它和Java差不多呢，但是现在才知道几乎不一样……由于还没学太多，所以网站的功能方面还没做多少，目前只做了注册功能。

我小的时候有用FrontPage做过网页，可视化编辑的，不过现在没有了，觉得自己在做网页方面“有一定基础”，而且我也会Photoshop，就先尝试做一下界面，工具就用的是Dreamweaver。

本以为Dw也是那种拖拖拽拽就可以写好一个界面的，但是发现我错了，没那么简单……

这几天在网上找各种教程，主要是布局的~差不多学会了用Div和Css一起来设计界面（当然不是敲代码~）。

第一个界面就是注册和登陆的~东西比较少，比较简单，另外在注册的时候用了刚刚学的JS添加了一些小功能~比如说检测用户名是否为空或是密码输入强度等~另外，为了使界面漂亮些，我用Ps做了个背景图，并且做了两个透明的图作为背景（当时还不知道怎么在CSS里面设置透明色……囧），界面如下：

登陆界面

  注册界面

 注册成功

接下来就是做个人中心的界面~就是后台了~这里面的东西就比较多了，所以我就先用PS设计了一个效果图，也只是做了几个简单的功能在里面：

设计图

 

然后就是按图来设置每一个Div标签的位置、大小，几乎是图上面没一个方框框我都弄了个Div，并且设置了Css样式，前面做的时候有一些不熟练，但是到了后面就熟能生巧了，比如说查看一个框框有多少像素再也不用用QQ的截屏工具了……囧

另外一点就是这个透明效果，在Dv里面有一个视觉效果选项，里面可以设置透明度（通过filter: Alpha(Opacity=？);），但是这样设置了以后在IE中有效果，在chrome中就看不到透明效果，上网搜了一下，知道了Alpha这个滤镜是IE中独有的，而新出来的浏览器可以直接通过设置透明色（rgba）来设置透明，比原来的方便多了~

下面就是做出来的图~加上了透明效果貌似还比效果图更好看了~~哈~~

 

在IE中（修改之前）

 在Chrome中（修改之前)

 在Chrome中（修改之后）

 

目前也就只做了这么多，今天刚讲了Ajax，接下来就是把具体的功能加上去~希望继续加油吧~~~哈~~~