学院首页>网页制作>Dreamweaver>Dreamweaver MX 2004设计留言本实战(2)

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

作者:- 来源:flash8 添加时间:2006-5-21 9:05:23

四、留言板各页设计

  ①显示留言

  在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中输入/guestbook/index.asp(或者/guestbook/)看看你的成果:


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

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



下一页>>
站内搜索