E-TASK(8) 登录界面的实现

12-8-2 ~ 12-8-3

开始写代码了！

还是从登录界面先开始。

第一步，着眼于设计图，分析其结构，给出适合这个界面设计的架构。

登录界面：

观察：上方是系统的标题和欢迎语；中间分为了左右两个部分，左边是照片展示，右边是登录框；下面是页脚的版本信息。最下面是祥云的装饰带背景。

当然中间需要很多思考和分析，但是这样一看的话，基本上整体架构可以有了：

Body: 主体。

Wrap：body节点下面的一个节点，把全部内容包裹起来的一个层。看似是多余的操作，实际上是很有意义的代码技巧。

Header：上方的标题和欢迎语，字体有渐变、阴影等效果，必须以图片的形式呈现。所以决定和背景的水墨黑切成一张图片。

Mainer：中间部分，由两块长方形区域组成，左右的方形背景有重叠。考虑把后面重叠的方形背景按一块背景处理，即不把它们分开当成左右两个子区的背景，而是切成一张图片，作mainer的背景。然后除掉主区看子区：左边的内容是一组照片以及每张照片下有两个附带的文字信息（姓名和部门），我可以把每组信息它当成单独的div处理再将它们排列，但是我想尝试一下用表格table来实现；右边的内容有三种，文本框、按钮和下面的提示，分别用三个div表示。

Footer：位于最下方正中，表示版本信息等。

实现网页就是在浏览器中实现设计图的过程，是“实现图像”的过程，一定不能脱离图像凭空想象。PS里的参考线能很好的帮助我们在设计图中分区，让划分可视化：

（在PS中新建参考线的方法：可以在菜单栏选择“视图-新建参考线”，在弹出的对话框中输入参考线的位置；更方便直观的是，在标尺视图下（“视图-标尺”或ctrl+r）直接从上方或左方的标尺中拖出参考线放在理想的位置。还有，开启“对齐”状态（“视图-对齐”，“对齐-钩选对齐到参考线”），会有很多方便）

当然参考线的作用远不止这个，它对在接下来切图工作，以及编辑样式表时调整布局的工作，有着相当大的作用。

 第一步结构分析完毕后，就可以开始着手写html代码了。网页的设计和实现都是相当严谨的过程，每一步都要认真考虑，不要因为前面过程不够严谨，后面的工作已做到一半，才发现前面的工作没做好又倒回来修改，那是相当痛苦的。一步到位是最简单有效的方法。所以写代码的时候，注意要严格按照刚才划分的层级行动。

这一步是一个比较简单的过程。就简单的把刚才的分区过程用代码的形式写出来就可以了。我写的时候，唯一遇到的麻烦就是table和textbox、button代码不熟悉，所以找了半天，还有一点纠结就是对于button不知道是直接用控件完成还是使用链接图片。（不熟悉控件的人，在VS环境下，可以直接从软件准备的工具箱里面拖控件，并且相应的属性在（一般是）右下角的窗口里也可以查找。顺便感叹一句，VS真是相当的方便啊……）

——只有html的网页页面。（这个不是最开始写完的html，那时的“重置”和“登录”还是用的button控件，待会儿会讲到为什么最后无奈改成了使用图片链接。）这个页面是不是和设计图相差很大？这就是css的影响力啊！

这里要提一下的是，header的部分的信息（标题和欢迎语），本来最终是用背景图片来显示的，但是一是考虑到代码的可读性，二是考虑到浏览器故障不能读取css时让用户也能看到所有的信息，所以仍然在内容里写了文字标题。待会在CSS代码里面会将它隐藏。

 

第三步，最后也最关键的一步，编辑样式，即完成CSS代码。像我一样的初学者记得在新建css文件后在html里注明（VS里可以直接将css文件拖动至html文件的head标签里）。

然后用选择器，从底部往面上走，一个一个调整。

Body：每个设计体系都有自己的风格，自己的标志，这是贯穿整个设计，在这个设计里面的所有内容都要尊崇的。比如说我的这个界面设计当中，字体的默认颜色不是黑色，是沉稳淡定的墨蓝色。这种信息就写在这里。

Wrap：设置宽度100%，用祥云图片填充背景。

Header：隐藏内容，设置背景图片，不重复。

Mainer：文本居左，设置背景，不重复。

Photo：图片没什么好设置的，设置一下文字信息的格式。

Login：设置文字格式文本框和按钮的背景图片。

Footer：设置文本居中，设置文本大小。

当然，从mainer开始，我省略了一个相当重要的问题，那就是这些块区域的大小。

如果只有上述的内容，我的网页是这样的：

看起来很惨，对不对？header的背景，上下都被切掉了；照片部分的table岔得好开；login跑到下面去了，而且button排的像火车铁轨。只有下面的footer好像乖乖地躺在正确的位置。

但是不要慌张，马上这些问题就可以解决。。这些问题的出现是因为在没有给出值的情况下html会给出默认的值来完成网页的显示，包括行高行距等等。

居中有点问题，给wrap加上一个<center>。然后，我要给每个部分定死高宽度。

这个高宽度，不是凭借直觉或者猜个大概，必须精确到每一个像素。还记得大明湖畔我们的参考线吗？我们的高宽度就从那里来。

由于在实际写html代码时又细分了很多区块，为了准确定位我又增加了很多参考线：

用PS里面的标尺工具（工具箱里面可以找到，在吸管工具的位置上；菜单栏“分析-标尺工具”也可以）可以在参考线的结点之间轻松的测量出距离。（图中标尺只作示范作用，它测量的不是我们需要的）

测出header,mainer, photo, login, footer的大小并在代码中为它们设置大小。当然，在测量的时候，甚至早在画参考线的时候，我们就要能清除地知道，你要测量的是哪一部分，从哪里开始，哪里结束。你现在要测量的是真正的内容，一般来说，是“抵满”的。如photo的部分，要从第一张照片的左上角的那一点开始，mainer部分，要从左边板块的左上角的阴影的最左上的那个点开始。

Html, css的规则，需要每一个网页设计者去体会，领悟了它的规则，然后就能一针见血的判断很多问题。

设置完大小后，是这个样子：

看到了吗？这就是html的规则之一，所有的内容都紧紧地贴在背景的左上方，同一个板块的子板块，上下紧贴。多么严谨，多么美妙！

好嘛，我注意到了这个界面还是不对劲。但一切都在意料之中。

下面，调整页面的布局。我这里使用的方法是：盒模型+float。将子块的最左上角点距母块的最左上角点的水平、垂直距离设为padding left/top 在同一母块中的子块用float排列。这个距离的测量也使用之前将的参考线和标尺。

调整好后，页面就变为了：

尖叫！！！！！！简直完美啊~~~~~

最后的完善，完成按钮的几种状态，检查一下又哪里不对的，修正。

这样，一个静态页面就完成了！

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈~~~~~~~~~

#################################################################################

好现在来解释一下button为什么打算直接用链接而不用按钮控件：

最开始我是有尝试直接用按钮控件，然后为了实现设计的效果，我换掉了按钮的背景，但是始终外面有一层怪怪的东西，而且点击的时候还会在背景上不听话地出现一个浮雕效果。在teammate的提醒下我设置了border为0，部分奇怪的效果消失了，但是浮雕效果始终存在。大家都不知道怎么回事，我查了一下，也不知道要想怎么调整才能达到想要的效果（如有高手路过，真心求解！）于是就还是换成了链接的方式。

同样的还有文本框。设计的时候文本框我设计了两个状态，但是在实现的时候却不知道怎么弄了。一开始外面总是有个奇怪的框框，后来设置border为0以后框框消失了，但是可以看到底下老是有一个白色矩形框（我设计的文本框是圆角的，仔细看四个角上就可以发现），输入的状态也总是有一个橙色的框框，还有这个状态我也不知道怎样能重设背景（不是nrmal，不是active，也不是hover...求指教！）。最后就制作了一个状态去，将就用。

不过这也提醒了我，下次在界面设计的时候，文本框和按钮可以直接考虑用控件，第一是改起来似乎麻烦，第二是其实自带的文本框、按钮样式挺不错。