- Dreamweaver CC网页设计从入门到精通(微课精编版)
- 前端科技
- 1150字
- 2021-03-30 12:40:50
3.8 案例实战
本节将通过几个案例演示如何借助Dreamweaver完成特殊文本的输入和复杂编辑操作。
3.8.1 定义链接文本
链接文本就是包含了超链接特性的文本,单击链接文本可以自动跳转到指定页面或位置,实现页面之间可互访的目的。
【操作步骤】
第1步,启动Dreamweaver CC,打开本小节备用练习文档test.html,另存为test1.html。
第2步,在编辑窗口中把光标置于定位盒子内,输入导航文本“首页 今日最热 衣服 鞋子 包包配饰 美妆 特卖 团购 好店 杂志”。
第3步,选中要链接的文本,如“首页”。
第4步,在文本【属性】面板的【链接】文本框中输入要链接的网页地址。链接地址可以是外部网页,即直接输入其他网站的网址,也可以是内部页面,即站内的其他页面。
第5步,输入链接地址后,在【链接】文本框右面的【目标】下拉列表框呈现可用状态,在【目标】下拉列表框中选择链接页面在哪个框架集中打开,主要包括如下选项,设置如图3.52所示。
(1)_blank:同“空白(_B)”,表示在新窗口中打开。
(2)_parent:同“父(_P)”,表示在当前文档的父级框架集中打开。
(3)_self:同“自身(_S)”,表示在当前文档的框架中打开。
(4)_top:同“顶部(_T)”,表示在链接所在的最高级窗口中打开。
图3.52 定义链接文本
第6步,以相同的方法为其他文本定义超链接,最后根据页面风格使用CSS设计链接文本的显示效果,如图3.53所示。
图3.53 链接文本显示效果
3.8.2 输入特殊文本
特殊字符就是无法通过输入法插入的字符,在网页设计中用户经常需要插入很多特殊的字符。下面介绍如何插入特殊字符的各种方法。
【操作步骤】
第1步,启动Dreamweaver CC,新建文档,保存为test.html。
第2步,把光标置于编辑窗口内需要插入特殊文本的位置。选择【插入】|【字符】命令,在下拉子菜单中选择一个特殊字符,可以在网页中插入许多特殊字符。
第3步,如果在该子菜单中没有需要的字符,可以选择【其他字符】命令,打开【插入其他字符】对话框,如图3.54所示,可以在其中选择要插入的对象。
图3.54 【插入其他字符】对话框
技巧:通过代码方式输入特殊字符。切换到【代码】视图,输入“&”字符,Dreamweaver CC会自动以下拉列表的方式显示全部特殊字符,如图3.55所示,从中选择一个特殊字符即可。
图3.55 代码快速输入特殊字符
空格是最常用的特殊字符,前面介绍过输入空格的方法,实际上输入空格的方法很多,这里介绍3种比较快捷的方法:
(1)在【代码】视图下,输入“ ”字符。
(2)在【设计】视图下,按Shift+Ctrl+Space组合键。
(3)在中文输入法状态下,切换到全角模式,直接输入一个全角空格即可。
【拓展】
插入动态日期:选择【插入】|【日期】命令,在打开的【插入日期】对话框中可以选择星期格式、日期格式和时间格式,如图3.56所示。如果希望在每次保存文档时都更新插入的日期,可以选中【储存时自动更新】复选框,否则插入的日期将变成纯文本永远不会更新。单击【确定】按钮可插入日期至光标所在的位置。
图3.56 【插入日期】对话框