Dreamweaver MX简体中文版入门教程三.docx
- 文档编号:11703554
- 上传时间:2023-03-30
- 格式:DOCX
- 页数:20
- 大小:3.04MB
Dreamweaver MX简体中文版入门教程三.docx
《Dreamweaver MX简体中文版入门教程三.docx》由会员分享,可在线阅读,更多相关《Dreamweaver MX简体中文版入门教程三.docx(20页珍藏版)》请在冰豆网上搜索。
DreamweaverMX简体中文版入门教程三
DreamweaverMX简体中文版入门教程(三)
目录:
(点击相应目录)
八、CSS样式表的应用
CSS样式表的应用
接上次课:
先建立站点,并打开index.htm主页。
为index.htm主页中加入CSS层叠样式表,具体步骤如下:
打开样式面板。
打开后如图:
在弹出窗口中,按如下说明选择:
在“类型”中,选择“重定义HTML”标签,选择“仅对该文档”:
选择td标签。
Td标签代表单元格。
选择分类中的“类型”。
选择字体如下图:
按“确定”按钮后,一个应用了CSS的网页就做好了。
CTRL+S保存。
接下来对比一下两个网页:
明白了CSS层叠样式表的功能了吧?
?
想想为什么?
?
原因是:
刚才我们重新定义了td标签,也就是方格的标签。
因为上图的文字是放在方格里面的也就是td里面,所以就显示出标签所定义的样式。
如果发现刚才的样式表不好看,可以进一步编辑:
接下来,我们为网页添加边框:
将样式表应用到网页中:
首先点击选择图片,然后如下图操作:
在代码视图中,我们看到选中的表格(table)的代码是用黑色显示的:
将光标放于一下位置,并按空格键:
接下来,选中class属性:
选中刚才的样式表:
切换到设计视图,发现有什么变化?
?
如果还不够明显,按CTRL+S保存网页,然后按F12预览效果更好。
再为其他表格添加边框:
接下来,将样式表应用到表格:
上述操作选好后,如图:
切换到代码视图:
选择的表格代码是黑色显示的。
将光标放在标签table后面,并按空格键:
接下来,双击选择class属性:
选择需要的样式表:
切换到设计视图,发现有什么变化?
?
接下来,为一个小表格制作样式表:
切换到代码视图:
黑色显示部分为刚才选择的表格。
将光标放在标签table后面,并按空格键:
接下来,双击选择class属性:
然后:
CTRL+S保存,按F12预览。
效果图:
在上面的预览图中,我们可以看到刚刚弄好的you样式表的效果,很好!
但是有一点不足:
最上面的表格边框突出来了一点,请注意观察!
要解决这个问题,请切换到设计视图:
点击选择图片:
改变宽度大小:
上图:
更改数字之后,按回车键。
CTRL+S保存,按F12预览。
效果图:
一切都很完美!
!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver MX简体中文版入门教程三 MX 简体中文版 入门教程