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中的加号按钮

　　在弹出的"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所示：

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有