Dreamweaver网页设计:多彩文字链接

  文字链接是网页中最常见的页面元素,在默认状态下,文字链接样式都是带下划线的,这种一陈不变的外观使网页无法凸现个性和满足布局的需要。为了使文字链接符合页面的整体效果,可以采用 CSS (样式)来实现多样的文字链接。

  效果说明

  将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等。结合其他样式属性,还可以实现按钮式文字链接,效果如图所示。


  按钮式文字链接

  创作构思

  Text-decoration 属性用来控制超级链接,结合 Border-Style 属性,还可以实现更加复杂的样式。

  操作步骤

  步骤一初级链接样式

  在 CSS 样式定义设置对话框中的“类型”子选项中有 5 种修饰类型。点选不同的修饰项,可以轻易设置不同的初级链接样式,如下图所示。下面以“无”下划线设置为例进行讲解,其他样式的设置跟本例类似。


  链接样式

  ( 1 )创建一个 CSS 样式表文件。按下 Shift+F11 键打开 CSS 样式面板,单击【新建样式】按钮,在弹出的【新建 CSS 样式】对话框中点选【高级( ID ,上下文选择器等)】选项,然后在选择器下拉菜单中选择【 a:link 】,单击【确定】按钮,如下图所示:


  创建一个 CSS 样式表文件

  ( 2 )编辑样式。保存样式表文件(文件名为 CSS.CSS )后,开始编辑样式。设定默认链接样式为无下划线,字体为宋体 12pt ,其他色彩等参数都不设置,如下图所示:


  编辑样式

  ( 3 )新建并设置样式“ .t1 ”。再次单击【新建样式】按钮,在【新建 CSS 样式】对话框中点选【类(可应用于任何标签)】选项,定义自己的样式类,然后设置名称为“ .t1 ”(【名称】文本框是用来指定类的,用户可以根据需要任意填写,其格式是“ .* ”),最后点选【定义在 CSS.CSS 】,一切设置完毕后单击【确定】。接下来的设置跟第二步操作一样,然后单击【确定】,如下图所示:


  新建并设置样式

  ( 4 )在文档窗口中输入“无下划线”字样。选中“无下划线”段落,然后打开属性设置界面,在样式列表中选择“ t1 ”,如下图所示。这样就将样式应用到所选网页元素上,读者可以保存网页文件后在浏览器中进行预览,这个时候会发现文字的大小为 12px ,而且超级链接的下划线也不见了。


  属性设置

  综合应用上面介绍的技术,还可以创作出更复杂的文字链接样式。

  ( 1 )平面块状文字链接。在 CSS 样式表面板中双击“ .t1 ”,打开 t1 样式表,这里要定义其块状链接样式。单击【背景】选项,首先给链接增加一个背景色,这里选择“红色”,如图 22-7 所示。在分类栏中选择“边框”,然后在“上”列表中选择“实线”,为文字链接的四周增加一个边框,从而实现平面块状文字链接,如下图所示:


  实现平面块状文字链接

  ( 2 )立体四边框文字链接。在分类栏中选择“边框”,然后设置宽和高的值为 1px ,这样可以使链接文字与按钮四周有 1px 的间距,从而使四边框看起来有立体感,具体设置如下图所示:


  立体四边框文字链接

  ( 3 )定义特效文字链接。 CSS 样式表中还包含了一组特效滤镜。这里创建一个使用 Blur 滤镜的文字链接,并且该链接还带有边框效果。在【过滤器】下拉菜单中选择【 Blur ( Add=?,Direction=?,Strength=? )】选项,然后更改滤镜参数设置为“ Blur ( Add=ture,Direction=45,Strength=1 )”,如下图所示:


  定义特效文字链接

  提示: Blur 滤镜有 3 个参数,分别为 Add 、 Direction 和 Strength 。

  Add 参数有两个参数值,即 True 和 False ,其作用是设定是否为图片添加模糊效果。 Direction 参数用来设置模糊的方向。模糊操作是按照顺时针方向进行的,其中 0 °代表垂直向上,每 45 °一个单位,默认值是向左 270 °。角度和方向的对应关系见下表:


  对应关系表

  

时间: 2024-10-29 05:24:39

Dreamweaver网页设计:多彩文字链接的相关文章

Dreamweaver设计多彩文字链接教程

  文字链接是网页中最常见的页面元素,在默认状态下,文字链接样式都是带下划线的,这种一陈不变的外观使网页无法凸现个性和满足布局的需要.为了使文字链接符合页面的整体效果,可以采用 CSS (样式)来实现多样的文字链接. 效果说明 将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等.结合其他样式属性,还可以实现按钮式文字链接,效果如图 22-1 所示. 创作构思 Text-decoration 属性用来控制超级链接,结合 Border-Style 属性,还可以实现更加复杂的样式

Dreamweaver设计多彩文字链接

  文字链接是网页中最常见的页面元素,在默认状态下,文字链接样式都是带下划线的,这种一陈不变的外观使网页无法凸现个性和满足布局的需要.为了使文字链接符合页面的整体效果,可以采用 CSS (样式)来实现多样的文字链接. 效果说明 将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等.结合其他样式属性,还可以实现按钮式文字链接,效果如图 22-1 所示. 创作构思 Text-decoration 属性用来控制超级链接,结合 Border-Style 属性,还可以实现更加复杂的样式

Dreamweaver如何设计彩色文字链接(进阶版)

  1.在 CSS 样式表面板中双击" .t1 ",打开 t1 样式表,这里要定义其块状链接样式.单击"背景"选项,首先给链接增加一个背景色,这里选择"红色",在分类栏中选择"边框",然后在"上"列表中选择"实线",为文字链接的四周增加一个边框,从而实现平面块状文字链接. 2.在分类栏中选择"边框",然后设置宽和高的值为 1px ,这样可以使链接文字与按钮四周有 1p

Dreamweaver如何设计彩色文字链接(初级版)

  1.按下 Shift+F11 键打开 CSS 样式面板,单击"新建样式"按钮,在弹出的"新建 CSS 样式"对话框中点选"高级"选项,然后在选择器下拉菜单中选择" a:link ",点击确定,创建一个 CSS 样式表文件. 2.保存样式表文件后,设定默认链接样式为无下划线,字体为宋体 12pt ,其他色彩等参数都不设置. 3.再次单击"新建样式"按钮,在"新建 CSS 样式"对话框中

用Dreamweaver轻松实现多彩的文字链接

dreamweaver|链接 本文选自4u2v工作室编写的<Dreamweaver网页设计与制作100例>(人民邮电出版社出版,ISBN: 7115142394 ).未经著作权所有者书面授权许可,禁止转载本文. 购买地址:点击访问 文字链接是网页中最常见的页面元素,在默认状态下,文字链接样式都是带下划线的,这种一陈不变的外观使网页无法凸现个性和满足布局的需要.为了使文字链接符合页面的整体效果,可以采用 CSS (样式)来实现多样的文字链接. 效果说明 将鼠标置于文本上时,文本样式会发生改变,比

用CSS打造多彩文字链接_链接特效

CSS打造多彩文字链接 一. 初级链接样式 1. 普通链接 2. 无下划线链接 3. 双划线链接 4. 删除线链接 二. 进阶链接样式风格 1. 另类下划线的原理 2. 定制下划线色彩 3. 定制下划线距离 4. 定制下划线长度和对齐方式 5. 定制双下划线 三. 高级链接样式风格 1. 定义块状链接 2. 定义按钮风格的链接 3. 定义特效链接 4. 静态背景切换链接 5. 动态背景切换链接 网页教学网改编

CSS打造多彩文字链接

CSS打造多彩文字链接 一. 初级链接样式 1. 普通链接 2. 无下划线链接 3. 双划线链接 4. 删除线链接 二. 进阶链接样式风格 1. 另类下划线的原理 2. 定制下划线色彩 3. 定制下划线距离 4. 定制下划线长度和对齐方式 5. 定制双下划线 三. 高级链接样式风格 1. 定义块状链接 2. 定义按钮风格的链接 3. 定义特效链接 4. 静态背景切换链接 5. 动态背景切换链接 网页教学网改编

Dreamweaver打造多彩文字链接

dreamweaver|链接 文字链接可以说是网页中最常见的页面元素了,默认的文字链接样式都是带下划线的效果,这种一陈不变的外观可能使很多朋友都想改变它,以使之符合页面的整体效果,自从样式表得到广泛的应用后,这个愿望现在可以非常方便的实现.今天我给大家介绍利用样式表打造多彩的文字链接效果.我将分为初级篇.进阶篇和高级篇给大家作介绍,所有的链接样式效果我们都将在Dreamweaver的样式编辑器中完成,关于Dreamweaver中的样式编辑器的用法请参考以前的介绍.链接样式浏览效果如下图:具体的页

Dreamweaver中设计多彩文字链接的方法

  文字链接是网页中最常见的页面元素,在默认状态下,文字链接样式都是带下划线的,这种一陈不变的外观使网页无法凸现个性和满足布局的需要.为了使文字链接符合页面的整体效果,可以采用 CSS (样式)来实现多样的文字链接. 效果说明 将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等.结合其他样式属性,还可以实现按钮式文字链接,效果如图 22-1 所示. 创作构思 Text-decoration 属性用来控制超级链接,结合 Border-Style 属性,还可以实现更加复杂的样式