分享
 
 
 

DW4中用CSS样式表来美化网页

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

样式表单的出现,使网页设计师们的工作感到大为轻松,因为用样式表单可以很轻松的在网页上实现很多效果,例如链结的颜色,按钮的样式,表单的边框等。使网页里不再是一成不变的使用软件默认的字体等。

首先我们来设置字体。汉字字体只有宋体的9pt大小和10.5pt的大小是看起来是最舒服的。9pt的字是中文windows系统使用的字体,也许大家都看习惯了吧,所以这种字体被广泛的应用于绝大多数的中文站点中,而随着电脑的更新换代,17寸的显示器越来越多的走进用户的家庭,9pt的字体看起来就小的多了,于是10.5pt的字又被广泛应用。在网页中用这两种字体,看起来是很美观的。

有了样式表,我们不需要逐一去定义每一段的字体、字体大小、字体颜色,在Dreamweaver4里面,在页面上单击右键,找到CSS Style,选择new style,弹出一个面板窗口如图所示。

在type处选择Redefine HTML Tag,在Name处会出现一些选项,其中比较重要的有Body,Td,Tr等。选中Body后按OK,会跳出一个窗口出来让你保存这个CSS文档,取个你记得的名字,我们这里取abc.css,然后按确定,出现一个面板,这就是设置CSS属性的面板了,其中Type就是字体的有关设置。将Font选为“宋体”(实际上也可以不选,因为默认的是宋体),然后在下面的Size那里填入9,后面的选框选择points,(也可以写成12px),其他的可以不选。Color是字体的颜色,可以根据自己喜好设置。然后按确定。这样一来,你再在网页里编辑的文字就全部是宋体9pt的大小了,看起来是不是美观多了?

但是,网页里全部都是一个颜色,一个大小的字体,实在是没有多少美的感觉。对!我们需要多定义几个样式单的属性,来使网页漂亮起来。在网页上按右键选择css style,再选择edit style sheet,选中刚才你存的那个css文档,然后按Edit,出现一个新的面板,按new,又出现了如上图的面板,依然选择Redefine Html Tag,可以定义Td,Tr一类的字体大小和颜色,定义后,网页里的td和tr表格里的字体颜色会和原来的不一样。

定义在td和tr里仍然不好控制?这样我们需要来定义一个新的样式单,按前步骤打开了图1以后,选择第一项Make Custom Style(class),在Name的地方填一个名字,比如.abc等,注意前面的一个小数点千万不要忘记了。按确定,定义好字体大小颜色后,选种你想要改变的字,按右键,选择Css Styles,找到abc,在abc上单击一下,你会发现字体如你先前的设置改变了。

有的用户在设计网页的时候,经常会用到不同颜色的背景,而网页的链结色默认的都是兰色,虽然可以更改,但是一种链结的色彩依然不会很清楚的显示在背景色不同的网页上,而css样式单可以很轻松的解决这个问题,让一个网页里有多种不同的链结颜色。

按前步骤到达上图步骤时,选择Use Css Selector,在Name处下拉菜单,发现会有a:link,a:hover,a:visited,a:active四个选项,分别代表链结属性,鼠标移动到链结上的属性,链结被访问后属性和链结焦点状态下的属性。如果选择a:link等则是默认选择。网页所有的链结都会遵循这四个选项的设置。如果要实现不同的链结属性,则需要增加样式单。在Name处填入a.abc:link,按确定,在面板里填入与默认设置不同的颜色,按确定。然后依次设置a.abc:hover,a.abc:visited,a.abc:active的属性。设置完毕后,在网页的源代码里,找到需要更改的链结,在< a href=”***.html>的里面加入class=”abc”,这样,该链结显示的就是你更改过的属性。就可以实现一个网页里出现多种链结的色彩了。当然不仅仅是色彩,还可以将hover的字体设置的比link稍微大一点,这样就会出现鼠标移动到链结上字体会变大的效果。

许多网页编辑软件默认的表单样式都不是很美观,有时候设计网页的时候为了配合背景等,希望将表单里的字体,背景色,边框粗细做一些变化,这些用CSS样式单一样可以很轻松的实现。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有