切頁面速成手冊_第1頁
切頁面速成手冊_第2頁
切頁面速成手冊_第3頁
切頁面速成手冊_第4頁
切頁面速成手冊_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、切頁面速成手冊當(dāng)設(shè)計(jì)把頁面制作完成之后，剩下的工作就是由我們來切頁面了。所謂切頁面，實(shí)際上，是由把設(shè)計(jì)制作的PSD效果圖切成若干張小圖片和把這些小圖片拼合在一起形成最終網(wǎng)頁形式這兩部分組合而成。簡單的說，切頁面就好比是玩兒拼圖，我們把一幅畫打散，然后再把碎片按原樣拼起來。頁面只有被切過之后，才能夠被我們隨心所欲的進(jìn)行文字方面的編輯。許多人認(rèn)為切頁面很難，說自己不會切。其實(shí)，這個并不像想象中那么難，也許只是因?yàn)榇蠹夷玫巾撁婧蟾杏X無從下手，所以才會認(rèn)為它難。所以切頁面的重點(diǎn)主要就在于對于頁面結(jié)構(gòu)的把握。下面就進(jìn)入我們切頁面的第一步分析頁面的整體構(gòu)架。頁面整體構(gòu)架看到一個頁面，首先要知道它是由哪幾部

2、分組成的。一般的頁面都可以廣泛的劃分為由頭部、中部和尾部組成。（如下圖）這樣，我們至少可以把頁面分為三個部分來處理，即頭部、中部和尾部。下面我們對中間部分進(jìn)行一下分析。頁面的中間部分無非分為左中右、左中、中右?guī)追N形式。下面我們就最常見的結(jié)構(gòu)來說明一下。上面這張圖是典型的左中右結(jié)構(gòu)，它把頁面分為了三個部分。有人可能會說，這種頁面結(jié)構(gòu)和我切頁面有什么關(guān)系？下面我來說說頁面結(jié)構(gòu)的重要性：我們在切頁面的時(shí)候，第一步要根據(jù)頁面的結(jié)構(gòu)來確定表格，如上圖，這個地方可以先做出一個一行三列的表格，只有在確定了具體結(jié)構(gòu)之后，再進(jìn)行對各個部分的細(xì)節(jié)處理，如背景、表格邊框、圖片、文字等工作才會變得容易。（具體的表格制

3、作、插入圖片等我們將在后面介紹）如果對于結(jié)構(gòu)的分析不夠全面和準(zhǔn)確的話，很容對我們后期的工作易造成麻煩。比如圖，如果把頁面做成上下兩行，現(xiàn)在看來不是不可以，但是如果左邊的焦點(diǎn)快報(bào)再多出一行，則會出現(xiàn)頁面撐開的現(xiàn)象。如果把表格確定成一行兩列，那么在延展性上面就會比上下兩行要好得多。上面我們了解到頁面的基本結(jié)構(gòu)，那么在photoshop中，我們應(yīng)該怎樣確定頁面結(jié)構(gòu)呢？這就需要用上photoshop中的一個功能輔助線。輔助線輔助線在我們切頁面的時(shí)候，可以幫助我們確定頁面結(jié)構(gòu)，加大切片工具的易用性。調(diào)用輔助線的方法：首先在視圖中把標(biāo)尺調(diào)出來然后從標(biāo)尺處點(diǎn)中鼠標(biāo)向頁面中拖。你會看到一條線，把它拖到你想要放

4、的地方松開鼠標(biāo)即可。一條輔助線就這么產(chǎn)生了。如下圖當(dāng)把輔助線都確定好之后，我們就要開始進(jìn)行最關(guān)鍵的部分了拿起刀子，準(zhǔn)備開切！切片工具其實(shí)，如果說起開始來切，反而到很容易了，實(shí)際就是把尺寸比較大的圖片分成一小塊一小塊的，然后拼合起來。頭部、尾部、和中間一些花邊都可以切成小圖。從下圖處點(diǎn)選切片工具點(diǎn)中后，鼠標(biāo)會編成相應(yīng)的樣子，在頁面要切圖的地方，把按住鼠標(biāo)不放，選擇截取范圍，選好合適位置后松開鼠標(biāo)，一個切片就好了。重復(fù)上述動作，做完所有切片。等圖片全部切完之后，點(diǎn)擊文件中的存儲為web格式在其中的保存對話框中選擇HTML和圖像。另外要注意一下左側(cè)的圖像品質(zhì)，一般定在3050即可。如果品質(zhì)過高圖片的

5、質(zhì)量會增大，但是在視覺效果上面不會有很明顯的變化。保存后，會有一個文件夾（里面是切散的圖片）和一個頁面，這樣，就把一個頁面切散了。下面我們只要把切散的圖片拼在一起就可以了。附：頁面拼合常用代碼基本標(biāo)簽創(chuàng)建一個HTML文檔 <html></html> 設(shè)置文檔標(biāo)題以及其他不在WEB網(wǎng)頁上顯示的信息 <head></head>文檔標(biāo)題：將文檔的題目放在標(biāo)題欄中 <title></title> 設(shè)置文檔的可見部分 <body></body> <body>屬性： 設(shè)置背景顏色，使用名字或十六進(jìn)制

6、值 <body bgcolor=?> 設(shè)置文本文字顏色，使用名字或十六進(jìn)制值 <body text=?> 設(shè)置鏈接顏色，使用名字或十六進(jìn)制值 <body link=?> 設(shè)置已使用的鏈接的顏色，使用名字或十六進(jìn)制值 <body vlink=?> 設(shè)置正在被擊中的鏈接的顏色，使用名字或十六進(jìn)制值 <body alink=?> 格式排版黑體字 <b></b> 斜體字 <i></i> 設(shè)置字體的顏色，使用顏色名字或十六進(jìn)制值 <font color=?></font>

7、創(chuàng)建一個新的段落 <p> 將段落按左、中、右對齊 <p align=?> 屬性：left（居左）/center（居中）/right（居右）插入一個回車換行符 <br> 鏈接超鏈接 <a href="URL">需要加鏈接的文字</a>一般在<a href=”鏈接”>后面里面都要加一個target=”_blank”的屬性，為在新窗口打開鏈接。 發(fā)送電子郵件的鏈接 <a href="mailto:EMAIL">需要加鏈接的文字</a> 創(chuàng)建一個位于文檔內(nèi)部的靶位 &

8、lt;a name="NAME"></a> 創(chuàng)建一個指向位于文檔內(nèi)部靶位的鏈接 <a href="#NAME"></a> 圖形元素添加一個圖像 <img src="圖片鏈接"> 排列對齊一個圖像：左中右或上中下 <img src="圖片鏈接" align=?> 設(shè)置圍繞一個圖像的邊框的大小 <img src="圖片鏈接" border=?> 加入一條水平線 <hr> 設(shè)置水平線的大?。ǜ叨龋?<hr

9、size=?> 設(shè)置水平線的寬度（百分比或絕對像素點(diǎn)） <hr width=?> 表格創(chuàng)建一個表格 <table></table> 開始表格中的每一行 <tr></tr> 開始一行中的每一個格子 <td></td> 屬性設(shè)置圍繞表格的邊框的寬度 <table border=#> 設(shè)置表格格子之間空間的大小 <table cellspacing=#> 設(shè)置表格格子邊框與其內(nèi)部內(nèi)容之間空間的大小 <table cellpadding=#> 設(shè)置表格的寬度（用像素值或文檔總寬

10、度的百分比）<table width=#> 設(shè)置表格格子的水平對齊（左中右）默認(rèn)為左 <tr align=left> <tr align=center> <td align=right> 設(shè)置表格格子的垂直對齊（上、下）默認(rèn)為中<tr valign=top> or <td valign=bottom> 表格格子橫向合并所占的列數(shù)（缺省為1） <td colspan=#> 表格格子縱向合并所占的行數(shù)（缺省為1） <td rowspan=#> 表單（以下代碼只是放到頁面中的一種表現(xiàn)形式）表單的開始和結(jié)束

11、標(biāo)記 <form></form> 創(chuàng)建一個下拉菜單<select name="NAME"><option>下拉菜單的內(nèi)容</option></select> 注：如果有多條內(nèi)容，則反復(fù)用<option>內(nèi)容</option>即可 創(chuàng)建一個文本框區(qū)域，列的數(shù)目設(shè)置寬度，行的數(shù)目設(shè)置高度 <textarea name="NAME" cols=40 rows=8></textarea> 創(chuàng)建一個復(fù)選框，文字在標(biāo)簽后面 <input ty

12、pe="checkbox" name="NAME"> 創(chuàng)建一個單選框，文字在標(biāo)簽后面 <input type="radio" name="NAME" value="x"> 創(chuàng)建一個單行文本輸入?yún)^(qū)域，size是以字符計(jì)算的寬度 <input type=text name="foo" size=20> 創(chuàng)建一個submit（提交）按鈕 <input type="submit" value="NAME"> 創(chuàng)建一個使用圖象的submit（提交）按鈕 <input type="ima

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論