亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

      考試首頁 | 考試用書 | 培訓(xùn)課程 | 模擬考場 | 考試論壇  
        當(dāng)前位置:設(shè)計制作 > FireWorks > 文章內(nèi)容
        

      Fireworks教程:Fireworks圖片分割教程

       [ 2017年9月5日 ] 【

        本教程將利用FWMX2004做一個分割圖片以及在DW中如何排版的示范,希望能幫到一些對分割圖片還存有疑問的人。教程中如有什么不妥之處,請各位指證。

        圖片的分割主要用在兩個方面,第一是把較大的圖像分割成小圖,意在減少瀏覽者下載圖片的時間,第二是把圖像分割后要在其中的某一部分錄入文字,或者是之 前做了整頁設(shè)計現(xiàn)在要分割開來填入具體的內(nèi)容。對于第一種分割比較簡單,而第二種分割除了要考慮第一種分割時將大圖化小的要求之外,還要注意分割要填內(nèi)容 的部分并且要保證在網(wǎng)頁中輸入預(yù)想的內(nèi)容時不會變形。由于第一種包含在第二種之中了,今天我就以第二種分割為例舉個例子。

        大家首先看這一幅底稿,這就是要分割的圖片,目標(biāo)是要把這幅圖片分割之后在虛線框內(nèi)能輸入文字內(nèi)容,而且無論文字有多少行、一行有多少字都保持虛線框完整不變形:

        

       、僭贔WMX2004中打開圖片,選擇工具,將圖片分割如下:

        

        注意圖中的ABCD四個部分,分割時必須將圖片的四個角分開,在網(wǎng)頁中我們將把ABCD四個部分作為背景圖片,以保持虛線框不變形。

        ②分割好之后,就是導(dǎo)出圖片了。選擇“文件”>“導(dǎo)出”,或者導(dǎo)出按鈕,彈出“導(dǎo)出”對話框,選擇保存的位置和名稱(這里為topic.htm),其它請按圖中設(shè)置:

        

       、墼贖TML后面點擊“選項”,“常規(guī)”中選擇“Dreamweaver HTML”,在“表格”一項中,分別設(shè)置為“嵌套表格,無間格符”和“無”!拔臋n特定信息”中可以指定圖片的命名規(guī)則和Alt信息:

        

       、茉O(shè)置完成后確定,再在“導(dǎo)出”對話框中點擊“保存”。在FW中的工作已經(jīng)完成了。下面我們進入Dreamweaver,看看怎么利用導(dǎo)出的圖片。在DW中,在要插入剛才的圖片的表格中點擊

      按鈕,在彈出的對話框中“瀏覽”選擇剛才導(dǎo)出的topic.htm文件,點擊確定:

        

       、莠F(xiàn)在先切換到代碼視圖,按下Ctrl+F,將代碼中的 border="undefined" cellpadding="undefined" cellspacing="undefined"全部替換為 border="0" cellpadding="0" cellspacing="0",這個代碼是FWMX2004生成的表格代碼,如果不改這里,在網(wǎng)頁預(yù)覽的時候?qū)a(chǎn)生變形。(在FWMX中都沒有出現(xiàn)這 種情況,不知道為何2004中會出現(xiàn),目前為止除了在DW中修改之外我還沒有發(fā)現(xiàn)在FW2004中的設(shè)置方法,如果哪位仁兄發(fā)現(xiàn)了還請告訴小弟):

        

        (如果只是第一種分割,也就是只需要把大圖割小的,到這一步已經(jīng)完成了。)

        ⑥先選擇中間作文字背景的圖片,記下它的寬和高,這里是283、191:

        

        點擊標(biāo)簽選擇器中

      前面的標(biāo)簽
      ,將屬性中的寬和高修改為283、191,這樣把這個圖片換作背景之后表格也不會變形。然后將這個圖片刪除并在單元格的背景中添加這個圖片的地址:

        

       、呷缓髮⒅皥D中ABCD四個部分都重復(fù)第⑥步的步驟,不過A和D兩個地方的圖片刪除了之后,背景要加在中。這里有一點要注意,要將表格的右上和右下兩個角上的單元格的對齊方式改為右對齊,這樣右上角和右下角的圖片才會一直靠右。

       、喱F(xiàn)在,你可以在中間的單元格中輸入文字測試一下,看看是不是表格就算被撐大了虛線框仍然沒有變形?

        

      將考試網(wǎng)添加到收藏夾 | 每次上網(wǎng)自動訪問考試網(wǎng) | 復(fù)制本頁地址,傳給QQ/MSN上的好友 | 申請鏈接 | 意見留言 TOP
      關(guān)于本站  網(wǎng)站聲明  廣告服務(wù)  聯(lián)系方式  站內(nèi)導(dǎo)航  考試論壇
      Copyright © 2007-2013 中華考試網(wǎng)(Examw.com) All Rights Reserved