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

FrontPage

Javascript

HTML

CSS

XML

心得技巧

DHTML

 
Dreamweaver MX 2004设计留言本实战(2)

四、留言板各页设计

  ①显示留言

  在DW中新建一页(在"New document.quot;新文档对话框中选"ASP VBScript"类型的文档)(图16),存为index.asp,并修改页面标题为"留言板首页"(图17)



  点击"Common"工具组里的表格图标(图18)(或者按Ctrl+Alt+T),插入一个5行1列的表格(记为表格1),设置如下:



  选中表格,然后在属性面板中把它设置为居中对齐:


  把光标定位到第一行的单元格后在属性面板中把它的高设为35:

  同理把第二、四、五行单元格的高都设为20,再如法炮制,在属性面板里把第一行和第五行的单元格设置为水平居中对齐,第二行和第四行的单元格为水平居右对齐:


  然后在各单元格里写上文字,完成后如图:


  可能会有朋友找不到那个版权符号的插入方法,顺便说一说。有三种方法可以插入版权符号:

  1)"Insert>>HTML>>Special Characters>>Copyright"
  2)在Text工具组里最右边的下拉选项里:


  3)在源码状态下输入©

  光标定位到第三行的单元格里,插入一个一行两列的表格(记为表格二),宽度设为100%,边框宽为1;左边单元格的宽度设为70,垂直居顶对齐,并插入一个两行一列的表格(记为表格三),完成后效果如图:


  在新插入的表格的第一个单元格里在按"Ctrl+Alt+I"插入一个头像(头像路径在留言板目录下images/icon里,在网上找的几个图片稍微加工了一下),并在第二个单元格里写上"访客昵称",之后设置两个单元格的水平对齐方式均为居中:

 

  现在只剩下一个很大的空白单元格了,这个就是我们用来显示访客留言及访客资料的区域,在这个单元格里插入一个三行一列的表格(记为表格四),写上文字、设置水平对齐方式、单元格高度后如图所示:


  再插入一个显示留言内容和回复内容的两行两列的表格(记为表格五)到唯一空白的单元格里,写上文字并设置后效果如下:


  最后是给"留言"、"查看"、"管理"这几个字分别加上链接(方法:选中文字后在属性面板的Link输入框中输入链接地址)insert.asp、index.asp、login.asp

  ②用CSS美化页面

  保存所有修改,在IE中输入http://localhost/guestbook/index.asp(或者http://localhost/guestbook/)看看你的成果:


  是不是觉得很难看?没关系,现在我们用CSS和图片简单修饰一下。

  按"Shift+F11"展开CSS面板,点击图30中的加号按钮



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

    相关文章
 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号