异说html初学实战邮箱页面布局_html/css_WEB-ITnose

我们想做一个网页，首先该干什么呢？

当然是先想做个什么样的网页，比如邮箱，门户等等。

想好之后呢？

我们先布局，首先肯定来个登录页面。

登录页面从哪找呢？

一个由美工提供或者自己用搜索引擎将图片下载和右击图片点属性选中网上的图片链接过去

有了登录页面图，我们首先多建立几个.html文件进行编写

先做好登录页面，看到这个图片，我们用什么划分和进行页面布局呢？

我们用学过的表格进行大致的定位，确定图片宽高多少，然后依据图片提供的参数对应的向表格里提供图片的宽高

有时第二行表格框架位置并不理想，因此我们需要使用faststone capture的软件测量一下像素比例。

用户名:
密 码:
找回密码	注册用户

成功后如图，还记得我在注释上写了什么吗？

再做好网页框架

我将我做框架的html文件复制到其他路径和按照默认边框显示方便大家观看

我们指定A边框里内容的页面也就是注释说的指定横向框架页面为top.html，我们放入几张图片到盘符相对路径

红箭头所指就是我们放入的图片

开始到top.html写入内容

我们然后到右边框写入内容，记住我到注释里写的是我们指定的是right.html

你成功登录了清辉在线邮箱系统

我们再到左边框left.html写入内容

            
为超链接指定页面为newmail.html，                                                               target="r1"还记得我在上面写了为框架命名吗？页面指定跳转到右框架-->                
新邮件
收件箱
草稿箱
写邮件
地址本
安全退出
    

我们开始进入写好的登录页面看看，再点击进入邮箱，看到了如下图

我们在超链接新邮件这里指定页面为newemail.html写入内容

hello,Sily
    

我们在往收件箱指定的newinbox.html写入

未读邮件
        
                                                                                    
编号                标记                发件人                标 &nbsp 题                日 &nbsp 期                
1、                未读                [e-mail]                欢迎注册清辉在线邮箱                2005-02-01                
2、                未读                [e-mail]                测试!!!                2005-04-09                
3、                未读                [e-mail]                测试!!!                2005-04-09                
4、                未读                [e-mail]                测试!!!                2003-04-04                
5、                未读                [e-mail]                测试!!!                2006-04-09                

共有邮件5封 每页20封 共一页 第1页 上一页 下一页

如图

我们再开始往写邮件指定的writemail.html写入

            

上传文件
匿名            公开

    

如图

我们再到地址本指定的address.html写入

上海
北京
广州
*
        

如图

我们一开始在安全退出的指定页面写了内容，不记得了吗？登录页面想起没有？点安全退出就开新窗口显示登录页面了

ps:

其实这个案例来自韩老师的视频，我尽量默写和模仿这个例子用了5个小时左右吧，毕竟自身基础也不是特别好，本来其实做这事不只这一种方法，前提要有效果:一、表格框架文本域按钮什么的，二、iframe，当他人或是自己完成后用iframe嵌套，相当于盗链了，三、图片映射map。

我写时的感受，的确很郁闷，表格实在太多了，好多冗余代码。目前刚入门知识有限，没做好，可以用丑形容，请大家见谅了。