整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家講解一下，如何把一個(gè)設(shè)計(jì)好的頁面切割成一個(gè)可以在IE中瀏覽的頁面。我為為大家介紹如何用Fireworks（以后簡稱FW）去切圖，因?yàn)槲伊?xí)慣用FW切圖。我們就用上次那個(gè)譯文中的設(shè)計(jì)稿做例子講解吧。
第一步：用FW打開上次設(shè)計(jì)好的網(wǎng)站設(shè)計(jì)稿。
注：一般沒有特殊效果的PS設(shè)計(jì)稿，都可以用FW打開，而且在效果上不會有差異。
如果FW和PS有字體不相認(rèn)的情況出現(xiàn)的時(shí)候，F(xiàn)W會提問是否替換字體，我們選擇維持外觀，不要替換字體。
第二步：再切圖之前我們要看下這個(gè)設(shè)計(jì)稿哪些部分要切成圖片。如下圖是我所解析出的哪些要切成圖片的內(nèi)容。
1.header部分
2.Nav部分
Nav部分還有一個(gè)色塊，這個(gè)色塊我們不用切成圖片，完全可以用背景色彩代替。此項(xiàng)將在網(wǎng)頁生成篇講到。
3.main部分
這就是頁面的正文部分
上圖所說的漸變條這我在補(bǔ)充一下，如果每個(gè)欄目中的漸變條是一樣的，我們切出一個(gè)漸變條即可，如果漸變的高度不同，那么我們要切出多個(gè)漸變條。這個(gè)例子我們采用一個(gè)漸變就可以。
在這個(gè)頁面中還有一個(gè)虛線， 我沒有采用圖片，在生成網(wǎng)頁時(shí)我會用CSS定義成虛線。
下圖為此虛線。
所繪切片圖如下：
第三步：下面我們開始用FW將切片導(dǎo)出為圖片了。
1.選中第一個(gè)Logo部分所繪的漸變切片。
2.按Ctrl+Shift+X，打開導(dǎo)出預(yù)覽對話框。如果默認(rèn)的格式為GIF,我們就要和下面操作一樣轉(zhuǎn)換成jpeg的。有多色彩和多漸變的圖像都要導(dǎo)出為jpeg的格式。只有單色的可以導(dǎo)出為gif格式的。
用以上這幾步操作把其它幾個(gè)切片導(dǎo)出為圖片。
注：還有一種方法就是為各個(gè)切片命名，命名后只要格式相同可以一起導(dǎo)出。比如：選中第一個(gè)按鈕的切片，在屬性下面的切片，案例網(wǎng)站風(fēng)格那里將名稱換成button01
朱丹丹
IE瀏覽器下，a標(biāo)簽會出現(xiàn)的虛線邊框問題：
上圖中，紅線包裹的就是一個(gè)翻頁的按鈕，按鈕實(shí)際是html的a標(biāo)簽做的，鼠標(biāo)點(diǎn)擊翻頁按鈕會加了一個(gè)虛線的邊框
去掉虛線邊框方法：
可以這樣寫，但是這樣寫還不是很完美，在頁面中調(diào)用JS 動(dòng)作比較頻繁的話，頁面會變得卡頓；
解決方法可以寫成下面這樣：
寫在A里，不管是鼠標(biāo)放上，鼠標(biāo)點(diǎn)擊，還是默認(rèn)，都會執(zhí)行 star:expression(this.onFocus=this.blur());， 這個(gè)代碼相對于IE來說就是一個(gè)CSS的動(dòng)作調(diào)用，和JS原理一樣，頁面資源耗不起，也算是IE的BUG吧~~~我們實(shí)現(xiàn)的效果是要點(diǎn)擊的時(shí)候沒有虛 線，所以就寫在a:active里就可以了，意思就是點(diǎn)擊時(shí)才執(zhí)行，才去掉虛線框。這樣鼠標(biāo)在放上A和默認(rèn)的情況下就不會卡。
要同時(shí)兼容IE和火狐瀏覽器，樣式直接寫成以下就可以：
ss的標(biāo)簽有很多，本篇文章為大家總結(jié)以下常用的一些標(biāo)簽以及簡單說明這些標(biāo)簽的作用。
文字顏色： color: #ffffff;
文字樣式： font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
字體大?。篺ont-size:16px;
文字行高： line-height: 30px;
文字粗細(xì)： font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)
文字修飾： text-decoration:line-through; (加刪除線)overline;(加頂線)underline;(加下劃線)none;(無修飾線)
對齊方式： text-align:right; (文字右對齊)left;(文字左對齊)center;(內(nèi)部元素居中)justify;(文字分散對齊)
使用練習(xí)：我們隨機(jī)書寫一段文字，設(shè)置文字的顏色為紅色，字體樣式為斜體，字體大小為20px，行高為35px，字體加粗，加下劃線，并是文字居中對齊；那么我們的代碼就如下所示：
在網(wǎng)頁中的顯示效果就如下圖所示：
背景樣式：background:#f00; (紅色背景)background-image : url(/image/bg.gif); (背景圖片)background-repeat : repeat;(重復(fù)排列-網(wǎng)頁默認(rèn))background-repeat : no-repeat;(不重復(fù)排列)background-repeat : repeat-x; (在x軸重復(fù)排列)background-repeat : repeat-y; (在y軸重復(fù)排列)
邊框樣式：border-top : 1px solid #f00; (上框線)border-bottom : 1px solid #f00; (下框線)border-left : 1px solid #f00; (左框線)border-right : 1px solid #f00; (右框線)border:1px solid #f00;(上下左右邊框)
其他框線樣式：solid(實(shí)線框)dotted(虛線框)double(雙線框)groove(立體內(nèi)凸框)ridge(立體浮雕框)inset(凹框)outset(凸框)
內(nèi)邊距樣式：padding-top:10px; (上邊框留空白)padding-right:10px;(右邊框留空白)padding-bottom:10px; (下邊框留空白)padding-left:10px;(左邊框留空白)
也可以簡寫成padding:10px 10px 10px 10px;(分別對應(yīng)上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)
外邊距樣式：margin-top:10px; (上邊界留空白)margin-right:10px;(右邊界留空白)margin-bottom:10px; (下邊界留空白)margin-left:10px;(左邊界留空白)
也可以簡寫成margin:10px 10px 10px 10px;(分別對應(yīng)上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)
使用練習(xí)：我們隨機(jī)書寫一段文字，設(shè)置文字的背景為灰色，邊框?yàn)榧t色 2px 實(shí)線框，內(nèi)邊距為10px，外邊距為10px；那么我們的代碼就如下所示：
在網(wǎng)頁中的顯示效果就如下圖所示：
對于css的常用標(biāo)簽今天就先介紹到這里，大家在平時(shí)可以自己多加練習(xí)練習(xí)，熟練一下各個(gè)標(biāo)簽的作用。
每日金句：有時(shí)候死扛下去總是會有機(jī)會的。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
