[网页高手]
Homepage
[网络编程]
Programe
[图形图像]
Picture
[冲浪宝典]
Insernet
[操作系统]
System
[软件教学]
Software
[数码时代]
Didgtale
[安全防御]
Didgtale
[IT学院]
Education
    
 
Google Web tongyi.net
 
    你的位置:首页 > 网页高手 > Dreamweaver > Dreamweaver MX 2004设计留言本实战(2)
[thismenu]
  [thisclasslist]
 
Dreamweaver MX 2004设计留言本实战(2)

 

  在弹出的"New CSS Style"对话框中作如图31设置后单击"OK",出现一个让你选择可在CSS文件的对话框,这里我们就保存为css.css(图32)


 


  之后在弹出的"CSS Style Definition for body in css.css"对话框中作如下两步设置:


 

 

  保存css.css,可以明显的看到现在的index.asp好看多了,不过我们的美化页面工作还没完成,继续定义链接的CSS----单击图30中的加号按钮,在弹出的"New CSS Style"对话框中作如图35设置,单击"OK"按钮,再设置(图35)


 


  刚才定义的是正常状态和点击之后的链接,现在再定义一下鼠标移上时的链接状态:


 


 

  保存css.css,刷新浏览器中index.asp页,看看效果----好象还少点东西,表格线不是网上常见的那种细线,对不对?好,我们现在就开始打造细线表格。用DW打开css.css,在最后加上代码:

.thin {
border-collapse: collapse;
}
现在css.css里的文件代码如下:


  然后给需要做细线的表格(表格一、表格二、表格四和表格五)的table标签里加上class="thin",给表格二、表格四和表格五的table标签里加上frame="void",完成后代码大概如图40,在IE中看的效果如图41所示:



  注意,这种方法制作的细线表格,必须保证有class="thin"、border="1"和bordercolor="#666666"(边框颜色,可以选择自己喜欢的颜色)三个属性,并且只适用 于IE5.0+。
最后是给几个单元格加上背景图片和背景颜色,完成后在IE中的效果如图所示:



  至此,显示留言页(index.asp)的前台部分全部完成 (其它部分待续)

 


     打印本文 | 推荐朋友 | 收藏文章 | 关闭窗口
 
 

    相关文章
 Dreamweaver MX 2004设计留言本实战    (2004年4月12日)

 十六则DreamWeaver使用快技法    (2004年3月29日)

 Dreamweaver MX 2004从零开始(7)    (2004年3月29日)

 Dreamweaver MX 2004从零开始(6)    (2004年3月29日)

 Dreamweaver MX 2004从零开始(5)    (2004年3月29日)

 Dreamweaver MX 2004从零开始(4)    (2004年3月29日)

 Dreamweaver MX 2004从零开始(3)    (2004年3月29日)

 Dreamweaver MX 2004从零开始(2)    (2004年3月29日)

 
 

 

关于统一 | 联系合作 | 统一作品 | 版权申明 | 建站服务 | 更多说明
Copyright 2000-2003 Tongyi All rights reserved. 京ICP备05005608号