文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计DreamWeaver → Dreamweaver MX 2004设计留言本实战(2)

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

时间:2004/11/7 2:32:00来源:本站整理作者:蓝点我要评论(0)


            
             
              
             
            

               
               

            



            文章来源:flash8,转载请联系作者及出处。


  四、留言板各页设计

  ①显示留言

  在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所示:




 




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





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

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 CSS优雅的公布栏源码高级CSS选择器的使用 将网站(主页)变成黑白DW设计网页时组织CSS的建议利用Dreamweaver合理优化网页元素布局22个Dreamweaver内置网页过渡特效简介

人气排行 如何用Dreamweaver制作电子相册下拉菜单全攻略-用Dreamweaver制作下拉菜单用Dreamweaver实现ASP数据库动态网站建设用Dreamweaver CS3制作下拉菜单如何在DW中插入Flash的参数详解Dreamweaver标签选择器的妙用巧用dreamweaver模板批量制作网页优化HTML代码加快网页速度