分享
 
 
 

Dreamweaver MX 2004入门教程之样式表

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

前几节,我们探讨了简单网页制作的方法,如果要使你的网页更加美观,还需要掌握一些其它技巧。现在我们开始接触网页制作的进阶技术。例如CSS,JavaScript等等。但是您不必担心,用Dreamweaver MX 2004实现这样的一些功能是完全可视化的,无需编写代码。这一节介绍样式表及其应用实例。

让我们先认识一下CSS,CSS不属于HTML,它属于HTML的辅助语言,是对HTML语言功能的一种扩展,用CSS可以做出美观工整令浏览者赏心悦目的网页,CSS能给网页添加许多我们想象不到的效果。

网页制作中流行的那些好看的9pt字和超级链接光标移动上去以后下划线会消失变色的效果及网页背景图片固定不动。这些都是使用CSS样式表制作的。

下面我们就通过三个典型的样式表实例来了解 CSS 的创建过程。

分别讨论:①9pt字②固定背景图片③活动的超级链接。这三个例子中我们将分别使用了三种不同的样式类型:

○〖自定义样式〗 ○〖重定义HTML标签〗 ○〖使用CSS选择器〗

①9pt字的制作:

1、选择“窗口”菜单>CSS样式或从面板组打开样式面板。

2、在样式面板中单击新建按钮。(如下图所示)

3、 系统弹出新建样式对话框(如下图所示)。填写一个名称,点「确定」按钮。

※ 填写名称必须以句点开头,如果您没有输入开头的句点,Dreamweaver MX 2004将自动为您添加。

注:如果您选择○仅对该文档,您所创建的 CSS 样式仅在本页有效,下边这一步将不再出现,直接进入第4步。

类型:弹出保存样式表文件对话框(如下图所示),在文件名框填入名字点击保存,生成一个后缀为*.CSS的样式表文件。

4、点击保存后,系统弹出(如下图所示)样式定义对话框。设定参数。首先,样式类型,为文字类型。字体为:宋体。大小为9(pt)。为了有较好的显示效果,我们同时把行距也设定一下,行高为180%(或自定其它值)。颜色自定。其它参数保持默认。按「确定」。

5、 一个新的样式就在样式面板中做好了(如下图所示)。

应用时,在网页中选中文本,然后右键单击CSS样式面板中的mycss1样式选“套用”。

或选中文本后从属性面板样式选择,如下图:

看看,文本字体的效果。

②固定的背景图片效果制作:

本教程大部分页面在浏览状态,无论滚动条怎样拉动,背景图片总是固定不动。就是用CSS制作的。延续上例定义“类型”后,打开“背景”选项,如下图:在文本输入框填入相应的内容,则可以将此CSS样式定义在前述zt1.CSS 之中。

下边介绍设置“重定义特定标签的外观”标签方法,完成背景固定的效果。

1、 打开CSS样式面板。按新建按钮。

2、 在新样式对话框(如下图)中选择。选“标签(重定义特定标签的外观)”。被重定义的标签选择为:body。

点击确定,存盘后,弹出保存样式表文件对话框:

填入保存文件名后,点“保存”按钮,弹出"选择图像源文件"对话框:

选择图像文件后点“确定”。弹出“body 的CSS样式定义”对话框:

3、 在样式定义对话框中选择参数。

l 背景图像:单击浏览按钮选择背景图片。

l 重复:选择重复。

l 附加:固定

l水平位置:默认

l垂直位置:默认

4、 保存网页,预览效果。

【提示】在编辑状态下不能马上看到固定背景效果。预览状态才能看见固定背景效果。

③活动的超级链接制作:

网页上经常会看到这样的一些效果,超级链接是活动的,光标移动上去以后会变色下划线会消失。这样的效果也是使用CSS来制作的。

操作方法:

1. 打开样式面板。按新建按钮。

2. 在新建样式对话框中选择。使用CSS选择器。选择器:选择a:hover

3、在样式定义对话框内设定参数。(如下图所示)

点击确定,保存页面。预览网页

该例是用新建CSS样式的办法创建的链接的下划线样式,也是以往常用的手法,主要是让您了解使用选择器类型“高级”选项的设置方法。

Dreamweaver MX 2004提供了更便捷的途径:使用“页面属性

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有