购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.2 通过Dreamweaver开发Div+CSS

使用记事本手写CSS好还是使用工具Dreamweaver开发CSS好?记事本因为系统自带无需安装即可使用,具有体积小、无需安装、简便、方便新建等优点,对于Div+CSS开发来说无提示、无语法属性变色区别等特点。Dreamweaver 是被称为网页三剑客之一的网页制作开发工具,缺点是需要安装、体积稍大,优点是比记事本多了CSS代码输入时具有的提示、语法单词变色等功能。

1.2.1 通过Dreamweaver在HTML页面里插入Div

Div是CSS中的定位技术,在Dreamweaver中将其进行了可视化操作。文本、图像和表格等元素只能固定其位置,不能互相叠加在一起,而使用Div功能,可以将其放置在网页中的任何位置,还可以按顺序排放网页文档中的其他构成元素。

插入Div的具体操作步骤如下。

(1)启动 Dreamweaver CC,选择【文件】|【新建】命令,在弹出的【新建文档】对话框中选择“空白页”,如图1-3所示。

图1-3 新建网页文档

(2)单击【创建】按钮,新建一空白网页文档,如图1-4所示。

图1-4 新建一空白网页文档

(3)将光标置于页面中,选择【插入】|【Div】命令,弹出【插入Div】对话框,设置插入点的位置和ID,如图1-5所示。

图1-5 【插入Div】对话框

(4)单击【确定】按钮后,插入Div,如图1-6所示。

图1-6 插入Div

1.2.2 Dreamweaver的CSS代码支持

Dreamweaver CC 提供了对CSS 的全面支持,在Dreamweaver中可以方便地创建和应用CSS样式表,设置样式表属性。

要在Dreamweaver中添加CSS语法,需要先在Dreamweaver的主界面中将编辑界面切换成“拆分”视图,使用“拆分”视图能同时查看代码和设计效果。编辑语法在“代码”视图中进行。

Dreamweaver这款专业的网页设计软件在代码模式下对HMTL、CSS和JavaScript等代码有着非常好的语法着色以及语法提示功能,对CSS的学习很有帮助。

在Dreamweaver编辑器中,对于CSS代码,在默认情况下都采用粉红色进行语法着色,而HTML代码中的标记则是蓝色,正文内容在默认情况下为黑色。而且对于每行代码,前面都有行号进行标记,以方便对代码的整体规划。

无论是CSS代码还是HTML代码,都有很好的语法提示。在编写具体CSS代码时,按Enter 键或空格键都可以触发语法提示。例如,当光标移动到“color: #000;”一句的末尾时,按空格键或者Enter键都可以触发语法提示的功能。如图1-7所示,Dreamweaver会列出所有可以供选择的CSS样式属性,以方便设计者快速进行选择,从而提高工作效率。

图1-7 代码提示

当已经选定某个 CSS 样式,例如上例中的 color 样式,在其冒号后面再按空格键时, Dreamweaver会弹出新的详细提示框,让用户对相应CSS的值进行直接选择。图1-8所示的调色板就是其中的一种情况。

图1-8 调色板

4qd8eyMy5lDZ7kYs+a97EEWWo7jHUSy1sKNzeoY3uU7A34YeZIzRFWDU3DtzQNAM

点击中间区域
呼出菜单
上一章
目录
下一章
×