网页排版实战

发表时间:2017-05-12 16:10:49 浏览量( 20 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

虽然我们学习了html和css,我们还是需要通过一个简单的网页的制作才能更好的掌握的,一般制作网页都是先使用Photoshop软件,先把网页PS出来,然后在交给客户验收,用户确认后我们再进行排版。

例如下面这个网,我们先PS出来,

attcontent/77e8aa0c-52b8-4e55-89ff-6416124feb35.png

然后使用Photoshop软件进行切片——就是把图片一张张的保存处理,这个时候才使用Dreamweaver等网页制作软件开始网页排版。

attcontent/85246008-9aa0-43df-826e-a43c67bb0cb9.png

使用Dreamweaver新建一个站点,然后把图片复制进行,新建一个index.html和一个style.css的样式文件,在index.html引入这个样式文件,然后就可以开始编码工作了。

网页的排版都是采用div+css的方式,先整体布局,然后再对每个小布局一步一步的排版即可。

打开style.css先设置一些整体的信息。代码如下:

@charset ;

*{ margin:0px; padding:0px;}

body{ width:1000px; margin:0 auto}
a{ text-decoration:none}
ul li {list-style-type:none}
#header{ width:1000px; height:94px; background:#00FF00}
#content{ width:1000px; height:500px; background-color:#66FFFF}
#footer{width:1000px; height:50px; background-color:#FF33FF}

html只是结构化的配置,代码如下:

<>
    < id=>header    < id=>content    < id=>footer</>

效果如下:

attcontent/6673678d-cc67-4452-b200-2512d4a64d97.png

基本的结构已经出来,下面我们就先做头部的头部有分为左右两个部分,右边也分为上下两个部分,一步一步的完成就可以了。

完整的html结构如下:

<!DOCTYPE html PUBLIC < xmlns=<>< http-equiv= content= />< rel= type= href=><>无标题文档</><>< id=>
   < id=>
       < src= />
   </>
   < id=>
        < id=>
             < id=>用户:admin             < id=>刷新             < id=>12月23日 12:60        </>
         < id=>
             <>
                 <> 修改密码                  <> 返回首页                   <> 安全退出              </>
         </>
   </></>< id=>content< id=>footer   
</></>

完成的css实现如下:

@charset ;

*{ margin:0px; padding:0px;}

body{ width:1000px; margin:0 auto}
a{ text-decoration:none}
ul li {list-style-type:none}
#header{ width:1000px; height:94px; background:url(index_top_bg.gif) repeat-x}
   #header_left{width:650px; height:94px; background:url(index_top_left.gif) no-repeat; float:left}
   #header_right{width:345px; height:94px; overflow:hidden}
        #header_right_top{ padding-top:14px}
   #user{ background:url(index_admin_type.gif) no-repeat; float:left}
   #user a{ color:#FFFFFF; padding:8px 0 0 22px; font-size:14px}
   #refelsh{ background:url(index_refresh_type.gif) no-repeat; float:left; margin-left:8px}
   #refelsh a{ color:#FFFFFF; padding:8px 0 0 22px;font-size:14px }
   #nowtime{ background:url(index_time_type.gif) no-repeat; margin-left:8px; float:left}
   #nowtime span{color:#FFFFFF; padding:8px 0 0 22px;font-size:14px }
#header_right_footer{ clear:both; padding-top:24px}
 #header_right_footer ul{}
 #header_right_footer ul li { float:left; padding-right:5px;}
           #header_right_footer ul li a { width:108px; height:36px; display:block; color:#FFFFFF; background:url(top_menu_link.gif) no-repeat; text-align:center; padding-top:6px}
   #header_right_footer ul li a:hover{ background:url(top_menu_hover.gif) no-repeat; text-decoration: underline}
#content{ width:1000px; height:500px; background-color:#66FFFF}
#footer{width:1000px; height:50px; background-color:#FF33FF}

剩下的内容就交给大家去完成了。

完整代码下载: