我们说Dreamweaver CS6,或者之前的版本最显著的一个特征是及时性,就是代码窗口和设计窗口同时存在,这使我们可以很轻松地用设计界诹鬃蛭镲面来设计我们想要的页面,而不用去码那些晦涩的代码。那么,从这节开始,就让我们一起用设计视图来进行学习吧。
工具/原料
Dreamweaver CS6
一、设置文字标题
1、新建一个空白页,html空白页
2、输入一些文字,如下图:
3、单击‘属性’面板中的‘格式’下拉框,选择‘标题1’,‘标题2’等选项,可以调整标题字体的大小,
4、效果如下图:
二、设计文本文字
1、如何设计文本的字体和颜色在设计代码输入一些文字,如’文本的字体和颜色‘
2、在’属性‘面板中选择’css规则‘
3、选择’字体‘,’大小‘,’颜色‘等可选项,
4、在弹出的’新建CSS规则‘对话框中,填写选择器名称,如下:
5、之后,出现的效果如下:
6、设置文本的字型在'css规则’中选择‘加粗’,或者‘倾斜’,可以有效地设置文本的字型
三、分段处理
1、这个很简单,就像我们编辑word一样,只要ENTER就可以了
2、值得注意的是css规则并不是总是那么好用,在还没弄懂到底是怎么用的情况下,在代码视图中直接老揉孟阼写代码,是最简单不过的事情,比如居中,居左这种事,代码如下
3、效果如下:
四、插入水平线
1、水平线在网页中有着特殊的意义。通过水平线可以将不同功能的文字分隔开,使页面更加整齐明了。
2、当浏览器执行页面中的水平线标记<hr>时,会在此处换行,并且会加入一条水平线段,线段的样式由标记的属性决定。水平线标记<HR>的语法如下:<hr align=对齐方式 size=横线粗细 width=横线长度 color=横线颜色 noshade>
3、新建一个空白页,输入文字:‘水平线标题’和‘水平线内容’
4、选择‘水平线标题’居中对齐,可以在‘格式’---‘对齐’----‘居中对齐’操作
5、在‘水平线标题’换行,在‘插入’----‘HTML'----'水平帧霭绎郎线’,就会出现一条水平线,效果图如下:
6、在水平线上单击右键,出现如下内容,选择‘编辑标签’,选择你需要的一些数值,在‘浏览器特定‘可以选择水平线的颜色,效果如下: