通俗基础教程
电脑操作教程
电脑怎样拨号上网
如何做个人网页
怎样做局域网
Word教程(文字处理)
图形图象处理入门
经典提高教程
怎样使用代理服务器
如何做无盘工作站
Photoshop教程
Dreamweaver教程
Flash教程
Firework教程
Frontpage2000教程
Authware教程
Office2000教程
如何制作动画图片
OICQ&ICQ使用方法

高手学习指南

硬件升级技巧
CGI教程
ASP教程

PHP教程

注册表使用技巧
路由器的设置
网站建设指南
SQL
合作网站
栏目制作月光软件
最近更新:
类别:网站制作

巧用DW的样式表

flycat

  时下网络飞速发展,网页的制作也越来越精美,细心的网友也许已经发现,许多网站上FORM、INPUT栏的样式也丰富起来,原来的单调表框形式,变成了虚线的,粗线的,而且色彩也可任意改变,大大提高了网页的美观。其实作法非常简单,一块来看看吧,你也可以让你自己的页面变得多姿多彩。

  变化FORM、INPUT栏的原理,就是在网页中套用了CSS样式表的缘故。在DW中已经集成了CSS样式,可以做出各种不同风格的效果,而且它还可以应用到Table、Layer、Image等中有效地点缀页面,灵活方便。下面我们就介绍如何通过定义样式来改变FORM和INPUT栏的方法。

  打开DW,按下“F7”,调出CSS样式编辑窗口,点击右下角的新建样式按钮,图1中的红圈处,在弹出的窗口中,选取第一项创建自定义样式表,在下面的名称框中填入你想要的名字,使用英文名字,例如我们输入bian,然后确定。这时出现的界面,在左边种类栏下的类型。然后在右边的窗口中选择字体、大小、颜色,这是定义表框内输入字体的样式,可以根据页面的主体风格来定义。如果要使框内出现背景色,就选择左边的背景栏,然后在右边选取相应的颜色就可以了。点取左边的方框选项,在右边的留白处,,分别在上下左右栏中填入宽度的数值,我们在这里定为1px。这样才能让我们的表框出现边框,即可以出现线条之类的东东了。

  接下来我们改变下边框的样式看看。点取类型下的Border,在右边的颜色栏下,选择你想要的色彩,比如我们选择为蓝色,在下面的样式栏处就可以自由选择自己想要的样式。这里我们选择doffed,点击“确定”后,保存定义好的样式。这时再次按下“F7”,在窗口内就出现了我们刚才定义的样式.bian,在页面上选择要套用该样式的表框,选取后再在样式编辑窗口中选中我们定义的.bian样式。现在让我们按下“F12”预览一下,怎么样,效果是不是已经出来啦。

  在Border下的样式包括:、dashed、solid、double、groove、ridge、inset、outset。“doffed”是呈颗粒状的边框,“dashed”是虚线状的边框,“solid” 是实心效果,“double”则是双线条,“groove”为内凹状,“ridge”为外凸状,“inset”为内描边,“outset”为外描边。这八种的实例的具体效果大家可以自己试着弄弄看,然后选择最适V自己网页的样式和颜色来装点自己的网站,使页面更为新颖,漂亮。

   
相关教程
怎么样才能控制弹出新窗口的位置?
怎么样才能控制弹出新窗口的位置?
怎样控制弹出窗口大小?
网页中制作边角圆润的图形
网页中飘动的图片的制作
如何在一个网页中实现多个链接效果
Dreamweaver中层的定位
实现动画效果的 Timeline
网页制作中的声音层叠样式表单
网页中轻松实现三维字体
DreamWeaver中表单的使用和电子邮件表单的制作
怎么在网页制作拖拽的拼图效果
使用ASP实现基于WEB的数据库资料系统
DW4麻烦解决之道
Dreamweaver经典技巧
DreamWeaver技巧二十例
Dreamweaver常见问题及解答
Dreamweaver常见问题及解答2
Dreamweaver 4.0十大密技
轻松实现网站管理
巧用DW的样式表