⑴ 怎麼製作網頁
用FrontPage2002來做吧，你點點下面的連接： http://www.zjou.e.cn/te/FrontPage/index.html
具體是：
Web頁面可用預定義模板來創建，也可不採用模板而在空白頁上自己進行設計。創建新頁面的步驟如下：
在網頁視圖下，選擇「文件」菜單中的「新建」命令，再從其子菜單中選擇「網頁」命令，將彈出「新建」對話框，如圖所示。
若用戶要新建的網頁是框架，則從「框架網頁」選項卡中選擇某種框架樣式；否則，從「常規」選項卡中選擇一種所需樣式，然後單擊「確定」按鈕。若想建立一空白網頁，可在對話框的「常規」選項卡中選擇Normal Page項，或直接單擊常用工具欄的「新建網頁」按鈕。
建議逐一試用FrontPage提供的各種模板以便熟悉它們，日後你就可以自如地利用模板創建常規Web頁面，能夠節省許多時間。
1．在網頁中插入圖形
圖片往往比大量的文字講述更具吸引力和說服力，在web頁面中適當地添加圖片會使網頁豐富多彩，但過多地加入圖片將降低頁面的下載速度，特別是對通過數據機訪問web頁的用戶。大多數圖形都是採用壓縮格式，有的數據機不具有壓縮功能，這種數據機速度更慢。因此用戶在加入圖片時，應認真選擇和進行規劃。雖然圖形可使web頁更有趣味，但應適度使用（使用較少顏色，縮小高度和寬度或裁剪圖形、降低圖形的解析度，盡可能地減少圖形文件大小，如用壓縮格式的文件類型）。
Web頁面所使用的兩種圖片格式分別為GIF和JPEG，用戶可選擇「插入」菜單中的「圖片」命令，再從其子菜單中選擇「來自文件」命令，打開「圖片」對話框，「圖片」對話框提供了「掃描」、「使用您的web例覽器來選擇網頁或文件」、「剪貼畫」和「在您的計算機上選擇一個文件」四種途徑插入圖片。
對於一些非GIF和JPEC格式的圖片，FrontPage可以自動地將這些文件轉換成GIF或JPEG格式。
2．在網頁中插入水平線
水平線可以在網頁上清晰地劃分界限，而且對用戶網頁的布局起著重要的作用。添加一條水平線，可以通過「插入」菜單中選擇「水平線」命令添加。在默認狀態下水平線是灰色的，用戶可以像改變文本顏色一樣改變水平線的顏色。改變水平線的顏色有兩種方法（必須在不加主題的情況下）：
（1）雙擊該水平線，將顯示「水平線屬性」對話框。在對話框的「顏色」項，選擇下拉列表，從中選擇合適的顏色，單擊「確定」按鈕。
（2）用滑鼠右鍵單擊這條水平線，從快捷菜單中選擇「水平線屬性」命令，再從對話框中選擇一個合適的顏色。
使用框架
--------------------------------------------------------------------------------
框架是把Web瀏覽器的視窗分成幾個部分，每個部分都是獨立的Web頁面，這樣便可同時顯示多個頁面。
可以很容易地用FrontPage創建一個多框架的web頁面。為了創建具有框架的Web頁面，可從「文件」菜單的「新建」子菜單中選擇「網頁」命令，彈出「新建」對話框，選擇「框架網頁」選項卡。
在左邊的列表中可選擇不同類型的框架模板，選定模板後，按「確定」按鈕即可創建一個具有框架的網頁。
在創建有框架的Web頁面時，應注意有些web瀏覽器不支持框架。雖然使用不能顯示框架的瀏覽器的用戶已很少，為確保這些用戶仍然能夠瀏覽到Web站點上的內容，可以填上要告訴那些低版本瀏覽器的使用者的話，例如請對方更換瀏覽器等。
在新建的框架的窗口中，單擊「設置初始頁」按鈕將會彈出「創建超鏈接」對話框，可以鏈接到一個指定頁面；單擊「新建網頁」按鈕將創建一個新頁面，然後在該頁面內對該頁進行編輯。在編輯頁面時，若感覺頁面被放在一個狹窄的框架中太擁擠，可選擇「框架」菜單中的「在新窗口中打開網頁」命令，這樣便打開一個新的滿屏窗口，可以自由地在頁面中增加內容。
利用FrontPage的框架頁面模板在Web頁面上引入了框架布局，我們還可以在此基礎上，根據需要進行進一步的設計。
1、增加新框架
要給框架頁面增加新框架，就是像拆分表格的單元格一樣，把一個框架分為兩個框架。 其操作如下：
（1）按住Ctrl鍵，將滑鼠放在框架邊框上，當滑鼠變為上下箭頭時，可把邊框拖到一個新位置，當松開滑鼠按鈕時，一個新的空白內容的框架就形成了。
（2）也可以通過命令來操作：首先單擊要拆分的框架內部，選「框架」菜單中的「拆分框架」命令，在彈出的「拆分框架」對話框中單擊「拆分成列」或「拆分成行」單選按鈕，單擊「確定」按鈕即可。
2．刪除框架
若框架頁面看起來太亂，可刪除某些框架。要刪除一個框架，可先單擊該框架選擇它，再選擇「框架」菜單中的「刪除框架」命令即可。
3．改變框架屬性
在設置好框架的整體布局後，我們還可以對每一框架的具體屬性進行設置，操作如下：
（1）單擊需設置屬性的框架，選擇「框架」菜單中的「框架屬性」，則彈出「框架屬性」對活框。
（2）在對話框的「名稱」文本框中可輸入框架名，這樣便於識別不同的框架；在「選項」區域中，若選中「在例覽器中可以調大小」復選框，則客戶在瀏覽站點時，可重新定義框架尺寸，通過在「顯示滾動條」下拉列表框中選擇不同的描述項，可設置讓滾動條是否出現。
（3）在「框架大小」區域中，可設置框架大小，可以定義一個絕對像素值或相對於瀏覽器窗口的百分比，若要用瀏覽器來設置相對於該頁面中框架的尺寸，可選「相對」；在「邊距」區域中，可設置內容頁面與框架邊框分隔的像素數值。
（4）要改變開始頁面，可以在「初始網頁」文本框中輸入一個新的頁面名字或URL。
（5）單擊「框架網頁」按鈕，則彈出「網頁屬性」對話框。
（6）在該對話框的「框架」選項卡中，在「框架間距」文本框中，可輸入以像素為單位的邊框寬度；若要使框架邊框消失，則不要選中「顯示邊框」復選框。
（7）單擊「確定」按鈕，關閉「網頁屬性」對話框，再單擊「確定」按鈕，關閉「框架屬件」對話框，完成框架屬性設置。
動態網頁
--------------------------------------------------------------------------------
DHTML是動態網頁的意思，它其實並不是一個標準的術語。事實上沒有一種技術叫作DHTML。DHTML是利用CSS(層疊樣式表)，JavaScript，HTML等技術而建立的能與訪問者產生互動的網頁。比如在動態網頁里，當訪問者單擊了某一張圖片後，這張圖片會自動的移動，這就是DHTML效果。也就是說，當網頁下載完畢後，它無需再與伺服器連接就能產生變化了。FrontPage2000提供了一套容易製作動態網頁的方法，你可以建立起屬於自己特色的動態網頁。
1、使用DHTML的基本步驟
1).在頁面點選需要使用DHTML的對象，比如文本，圖片。對於文本需要拖曳滑鼠選定；
2).在DHTML工具欄，選擇通過開啟的下拉列表選擇一種事件，文本和圖片所具有的事件是不同的；接下來再應用下拉列表選擇一種效果；最後選擇該效果的的實現方法；
3).當你為對象使用了DHTML後，保存該頁面並預覽，你會發現你選定的對象按照你設置的DHTML的效果出現；
4).如果想刪除某一個對象的DHTML效果，先選定該對象，然後單擊DHTML工具欄上的刪除效果圖標即可。
2、DHTML的事件
在DHTML製作中，我們聽得最多的是「事件」這個術語。什麼是「事件」呢，顧名思義，就是發生的一件事情，比如你用手打開門，那麼這就是一個事件。換到網頁製作中，開門變成了單擊，也就是說，訪問者單擊了一個鏈接，那麼出現了事件的結果，門被打開了。
在FrontPage2000中，當我們打開DHTML效果工具欄後，點選文本或者圖片會產生不同事件。但它們的施用方法是一樣的，下面我們以文本舉例：
我們先在編輯器里輸入一段文本，比如：網頁陶吧，然後繼續下面的三個步驟：
選定一段需要產生DHTML效果的文本，這里是：網頁陶吧。從DHTML效果工具欄的開啟下拉列表選擇一個事件。這里對於文本我們只有「網頁載入」這個事件。「網頁載入」就是當網頁第一次裝入的時侯發生的事件，它不需要用戶利用滑鼠去觸發它，而只需要訪問者利用瀏覽器打開它的時侯就會產生預設的動態效果。
選擇好事件後，我們要在應用下拉列表裡選擇一個該事件的應用效果。在該列表下有七種可以採用的效果，我們選擇飛入。
對於應用效果會有不同的方法產生。比如當你選擇的應用效果是「飛入」的時侯，文本可以從底部飛入，可以從左邊飛入，也可以從右邊飛入，這些就是方法。在這個下拉列表裡並沒有註明這個術語。有的應用效果是沒有方法的，比如波動。我們這里選擇從底部飛入。
最後保存該頁面並預覽，你會發現網頁陶吧這個四個字在網頁第一次載入後從底部飛入。當然，你也可以嘗試其它DHTML效果。對於選定圖片，你會在DHTML效果工具欄的開啟下拉列表看到新的事件，單擊和滑鼠懸停，它們會有各自的應用效果和實現方法。你可以每一個嘗試一下，這樣你就能明白這些事件和應用效果和方法之間的關系。
3、DHTML的小技巧
DHTML兼容性
利用FrontPage2000製作的DHTML網頁只能被InternetExplorer4.0或以上版本完全正常瀏覽。對於圖片的DHTML效果，Netscape Communicator 4.0或以上版本也可以瀏覽。
禁止DHTML
如果想禁用DHTML效果，點選菜單工具/網頁選項，在打開的對話框里選擇兼容性標簽，取消動態HTML前的復選框里勾，這樣DHTM效果被禁用。
快速使用DHTML
一般情況，在你沒有選定某一個對象的情況下，你只需要把滑鼠移動到對象的左邊或者右邊單擊一下就可以使用DHTML效果了。
4、網頁過渡
網頁過渡是指當你進入或者離開一個網頁的時侯所產生的效果的這個過程。比如你從某一頁進入另一頁，你會發現當前頁慢慢向中間合攏，同時出現了另一個新的頁面，直到當前頁合攏消失而最後出現新的頁面。如果你想使用網頁過渡，可以按照以下步驟：
1).打開想使用過渡效果的頁面，或者新建立一個頁面。點選菜單格式/網頁過渡，打開網頁過渡對話框；
2).在事件下拉列表裡選擇一個事件，我們選擇進入網頁。大家要注意，當你為某頁和站點都設置了過渡效果時，網頁將比站點過渡效果優先；
3).在周期文本框里輸入持續的時間，然後在過渡效果列表框里點選一個效果，單擊確定。利用瀏覽器打開該頁面，因為我們選擇的網頁過渡是進入網頁，所以當你打開該頁時你就能看到過渡效果了。
利用DHTML效果的確是吸引訪問者的有力利器，但如果你不願意和復雜的代碼打交道，那麼FrontPage2000為你預設了許多DHTML的效果。你要做的僅僅是選定需要動態效果的對象，比如文字，圖片，然後利用「傻瓜」式的操作就可以讓你的網頁動起來。
Web頁有自己的一組屬性，通過選擇「文件」菜單中的「屬性」或通過滑鼠右鍵單擊頁內任何位置，選擇快捷菜單中的「網頁屬性」命令，可以打開「網頁屬性」對話框，在「常規」選項卡中，各項設置含義如下：
·位置：指出頁的完整URL。
·標題：顯示的頁標題，即在HIML中顯示在<head>元素中的<tit1e>標簽內。
·基位置：在此位置可輸入一個URL，可將這頁中使用的相對URL的超鏈接總指向同一正確的目標，通過對一個URL的說明，可以在不移動相對URL中所有目標的情況下，移動這個頁。
·默認的目標框架：定義不規定框架的頁中所有超鏈接的默認框架。
·背景音樂：加入背景音樂，當瀏覽器打開該頁時，會同時播放音樂。
在其它選項卡中還可對頁邊距、語言等系統參數進行設置。
建立超鏈接
--------------------------------------------------------------------------------
超鏈接（HyperLink）的出現使網上瀏覽變得更加便捷，只須用滑鼠輕輕點擊，便能輕松地從一個頁面跳轉到另一個頁面，從一個Web站點跳到另一個Web站點，從一個國家跳到另一個國家。超鏈接就是一些特殊的文本或圖像，是其它頁面的入口。
1．與當前web站點的頁面建立超鏈接
（1）在FrontPage中打開要建立超鏈接的頁面（若是新建頁面，則要肯定該頁面己被保存），選中超鏈接源，超鏈接源可以是一個字元、一個單詞、一句話或一幅圖片等。
（2）選擇「插入」菜單中的「超鏈接」命令，或單擊「常用」工具欄的「超鏈接」按鈕，則彈出「創建超鏈接」對話框（如圖），在該對話框中列出了當前FrontPage中打開的Web站點中的文件夾和文件。
（3）在該對話框的文件列表中，選擇要建立鏈接的目標文件。
（4）單擊「確定」按鈕，超鏈接建成。
2．與本機中的其它文件建立超鍵接
（1）選擇超鏈接源，打開「創建超鏈接」對話框。
（2）在該對話框中單擊「製作一個鏈接到您計算機上文件的超鏈接」按鈕，然後從彈出的對話框中找到自己所要鏈接的文件，選中它。
（3）單擊「確定」按鈕，超鏈接建成。
3．與world wide web上某一站點建立超鏈接
（1）在FrontPage中打開欲建超鏈接的頁面，選定超鏈接源。
（2）選「插入」菜單中的「超鏈接」或單擊常用工具欄的「超鏈接」按鈕，彈出「創建超鏈接」對話框。
（3）在「URL」文本框中，輸入超鏈接目標的URL。
（4）單擊「確定」按鈕。
格式化文本
--------------------------------------------------------------------------------
1．輸入文本
從總體而言，文本仍是網頁中的主體內容，在FrontPage中輸入文本與在Word中輸入文本非常類似。
(1).需要加入空行或換段時才使用Enter鍵，當輸入文本達到所定義的右邊界時，將自動換行。若錄入文字有錯可按Backspace鍵清除錯誤，重新錄入。
(2).可在文本中任意位置處插入新文本內容，操作時把滑鼠指針定位到欲加文本處即可添加文本。
(3).可進行覆蓋式錄入，即先用滑鼠選中要替換的文本，然後直接錄入文本。
(4).可通過單擊常用工具欄的「顯示所有」按鈕，讓段落標記在屏幕上顯示或隱藏，藉助段落標記可清楚地看到段與段之間的空行。
2．文本的選擇
(1).選擇一個單詞或多個單詞：選擇一個單詞只需在該單詞上雙擊滑鼠即可，按住滑鼠左鍵在要選單詞上拖動即可選擇多個單詞。選擇字與選擇多個單詞的方法相同。
(2).選擇一行文字：一行文字就是在屏幕上占據一行空間的文本。將滑鼠箭頭移到行的最左邊，當游標箭頭變為指向左邊時，單擊滑鼠左鍵，便可選擇該行。
(3).選擇一個段落：將滑鼠箭頭移到該段落的最左邊，當游標箭頭變為指向左邊時，雙擊滑鼠左鍵，或按下ALT鍵，再用滑鼠單擊想要選擇的段落，即可選擇該段落。
3．刪除、拷貝和移動文本或圖片
(1).刪除：刪除插入點左側的一個字元，按Backspace鍵；刪除插入點右側的一個字元，按Delete鍵；刪除插入點右側的一個單詞，按Ctrl＋De1ete鍵；剪切所選內容並保行到「剪貼板」，按Ctrl＋X鍵；刪除所選內容按De1e1e鍵或選擇「編輯」菜單中的「刪除」命令。
(2).拷貝：拷貝所選文本或圖形到剪貼板，方法是：選中文本或圖形，然後按Ctrl+C鍵或從菜單上選擇「編輯」菜單中的「復制」菜單命令，也可直接單擊工具欄中的「復制」按鈕。
(3).移動文本或圖片：選擇想要移動的文本或圖片，再拖曳到要插入的位置，釋放滑鼠，所選對象就移到目的地。如果先將選擇的文本或圖片「剪切」，然後再「粘貼」到指定區域，也可將其移動。
(4).通過「撤銷」取消誤操作：如果用戶在不小心的情況下錯誤地執行操作，單擊工具欄上的「撤銷」命令按鈕，可以取消用戶執行過的操作，或從菜單欄選擇「編輯」菜單中的「撤銷」菜單命令，或按Cir1＋Z鍵。
4．加入標題
出於頁面內容層次的需要，有時在頁面中要加入一些小標題。 HTML語言規范採用6級標題，各級標題採用文字不同字型大小來區分，其中標題1為大標題，其它依次為中小標題。要設定某一級標題，可以在FrontPage格式工具欄中的「樣式」下拉列表中選中一個標題等級，然後在游標處輸入標題文字即可；或者先輸入文字，並選定該文字，然後在「樣式」下拉列表中選定某一級標題。標題結束後，將下拉列表中的格式改回原來的「普通」，再進行其它內容的輸入。
5．改變字體及設置字體效果
FrontPage在通常情況下，字體為「Times New Roman」。若用戶的操作系統是中文Windows95／98或Windows NT，中文默認字體為「宋體」，文字大小採用默認的字型大小。若要設定不同的字體，可先選擇要改變的文字，然後在格式工具欄里的「字體」下拉菜單中選擇一種字體，或從菜單欄選擇「格式」菜單中的「字體」菜單命令，通過「字體」對話框來設置，並可設定字體樣式、大小等。當字體改變後，形式將一直保持，直到用戶又重新設置新的字體為止。
(1).設置字體顏色：選中文字，單擊格式工具欄上的「文本顏色」按鈕的下拉箭頭，就會彈出其下拉列表，在「標准顏色」中選擇所需顏色；若沒有，可選擇「更多的顏色」命令，然後從彈出的對話框中選擇。
(2).設置字體樣式：要對需要的文字進行粗體、斜體和下劃線處理，只要選擇要處理的文字，從格式工具欄上單擊「加粗」、「斜體」或「下劃線」按鈕即可。想解除此效果，可以選中文字，再次按相應的按鈕就可以解除效果，恢復到正常字體。在製作網頁時，一般不採用「下劃線」效果，因為下劃線在一些網頁中都表示有超鏈接。
(3).字體加線效果：共有兩種:「下劃線」可以在選中的文字下面劃一條線；「刪除線」在文字中間貫穿劃一條線。
(4).特殊的文字風格：當選中的文字需要使用某些特殊風格，如「閃爍」風格，可通過選擇「字體」對話框中「字體」選項卡（如圖）的「效果」區域的所需選項，但有的文字特殊效果只有在瀏覽器中才能體現出來。
6．文本的縮進
文本的縮進就是使文本左邊、右邊顯示空白，這種效果有利於對關鍵段落加強說明。要對一個已有的段落運用縮進的方式，首先選中段落，然後在格式工具欄上單擊「增加縮進」按鈕，段落左邊和右邊分別縮進一段距離，連續按「增加縮進」按鈕，縮進將進一步加大。這種在文字兩邊同時縮進的方式也稱之為雙向縮進。若縮進的空間太大，可以通過單擊「減少縮進」按鈕來減少縮進的空間。
7．文本對齊方式
若輸入的文字是從該頁的左邊距開始，並逐漸向右延伸，且到了行滿以後又折回下行左邊（左邊距處）重新開始，這就是左對齊。有些文字需要居中方式，比如標題之類的文字；而有些文字需要放到右邊，這些可通過格式工具欄上的「向左對齊」、「居中」和「向右對齊」按鈕來實現：，不同的對齊方式可以使文本呈現不同的顯示樣式，而且可以清楚地表明用戶想要說明的問題，使網頁整體保持協調。 要設定文本的居中、左齊或右齊方式，須先選擇好要設置的文本，再單擊相應按鈕即可。如果用戶想回到原始狀態的對齊的方式，應先選定該文本，再單擊格式工具欄上相應的對齊按鈕。
8、加入項目符號或列表編號
有一些列表前面有加圓點的符號，說明一條條的列表內容，這在專業排版中稱為項目符號，在Web頁面中加入項目符號或列表編號可使內容有條理、更清楚，可以通過列表把大量內容簡要地描述出來，便於讀者抓住重點。還有另外一種形式即列表編號，可以用來描述一個問題的處理步驟和順序，這兩種處理形式在FrontPage中運用起來很方便。
加入項目符號或列表編號與在Word中的操作很類似。先選定文本，用戶可以在格式工具欄按相應的按鈕，或選「格式」菜單中的「項目符號和編號方式」命令，打開項目符號和編號方式對話框（如圖），從中選定不同格式的列表項目。
在FrontPage中新建的兩個文本行之間都有一個空行，如果用戶在輸入或添加項目時不想每兩行之間都出現一個空行，可以在格式工具欄上單擊「項目符號」或「編號方式」按鈕。該按鈕為下凹狀後同時出現第一個項目符號，輸入需要的文字後，按「回車」鍵，然後在自動出現的下一個項目符號後繼續輸入。
FrontPage還可以通過提供列表編號或項目符號的方式對列表項進行排列。操作方法與上一段所述相同。
如果在所有項目輸入完畢後，以下的內容不再希望添加編號或項目符號，可兩次回車，則停止編號或停止添加項目符號。若想改變編號的形式或不想從1開始，可通過在列表符號上單擊滑鼠右鍵，在彈出的快捷菜單上選擇「列表屬性」命令，在彈出的「列表屬性」對話框中選擇「號碼」選項卡，選擇所需的編號風格，再在右邊的「初始號碼」微調器中調整起始編號，在調好之後單擊「確定」按鈕即可。
參考資料：http://www.zjou.e.cn
⑵ 網頁設計製作詳細流程
分析如下：
1、首先下載安裝Dreamweaver，打開後，新建一個網頁，一般選擇「HTML」建立網頁。選擇「經典」界面，有助於我們更便捷使用這個軟體。
(2)web設計基礎圖片設置擴展閱讀：
網頁設計
設計網站要注意兩個要點：整體風格和色彩搭配。
風格
網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。
風格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。
色彩搭配
無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。
網頁配色小技巧：
1．用一種色彩：這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感；
2．用兩種色彩：先選定一種色彩，然後選擇它的對比色；
3．用一個色系：簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。
在網頁配色中，還要切記一些誤區：
1．不要將所有顏色都用到，盡量控制在三至五種色彩以內；
2．背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容。
⑶ Web前端工程師要掌握的切圖技能
今天小編要跟大家分享的文章是關於Web前端工程師要掌握的切圖技能。相對於程序來說，切圖門檻很低，只要有一些ps基礎，摸索個五分鍾基本也就了解各大概。但是就跟其他的所有技能一樣，切圖也是有很多技巧性和經驗在裡面的，這些東西可以讓你的切圖工作更有效率，更有目的性。
本文將某大師切圖幾年的心得進行整理歸納一下，希望可以幫到各位前端們，純實操干貨，必看。
說明：筆者用photoshopcs5做示例，不同版本功能會有稍許差異。
第一部分：一些快捷鍵
相對於設計和繪畫，切圖用到的ps並不多，以下我總結一些在切圖中比較常用的快捷鍵，這些快捷鍵能答復的提高你的工作效率，並且看起來很酷。自由的控制視圖系列
§自由的瀏覽圖片：按住空格後，滑鼠拖動
§自由的縮放圖片：按住alt+滾輪
§切換到實際像素(100%)：Ctrl+1
§工作區類型切換：Tab
控制內容系列
§通過畫面上點選一個圖層：Alt+滑鼠右鍵
§在畫面上拖動一個圖層：V切換到移動模式滑鼠拖動
§復制拖動一個圖層：移動模式下Alt+拖動
§刪除一個圖層：選中要刪除的圖層按下Delete
§合並多個圖層：選中要合並的圖層按下Ctrl+E
§選區內填充顏色：Alt+Delete(前景色)Ctrl+Delete(背景色)
§縮放當前選擇圖層：Ctrl+T(自由變換模式)
實用工具系列
§畫一個選區：點擊M進入選區模式，滑鼠拖畫
§放棄選區：Ctrl+D
§吸管工具：點擊I進入吸管模式，點選畫面顏色
§文字工具：點擊T進入文字模式，點選畫面的文字或者創建新文本
§切片工具：點擊C進入切片模式(舊版本會有不同)
第二部分：一些實用技巧注意PS所處的狀態
photoshop開啟一個文件，軟體本身就處於不同的狀態之中，總結下來有這樣幾種工具狀態--
代表當前是出於移動模式，選區模式，切片模式或者是吸管模式等等，工具狀態代表你當前對文檔操作的類型。
有一些特殊的狀態下，要求你必須做出選擇，這時候狀態的切換會暫停。比如，文字輸入模式和自由縮放模式下，你必須先對當前所做修改做出確認，才可以進行下面的操作。這種情況的特點是狀態欄會出現如下選擇，如需快速放棄修改可點擊ESC
圖層狀態--代表你當前操作的對象，有一些對象只接受特殊類型的操作。
比如一些填充和繪制的功能無法在文字圖層進行，圖層組不能進行操作。總之，你在進行塗層修改操作的時候，一定要注意當前操作的對象，否則容易造成誤操作和操作不能
色彩索引模式--這是一個常見錯誤，通過導出web格式圖片出來的png會自動換成索引模式，如果要繼續修改需要把索引模式轉成RGB模式
操作圖層如果不是設計者自己來切圖，那麼切圖者需要從圖層里來體會設計者的意圖。如何分組，層次間的關系都體會了設計者對頁面結構個人的理解。所以對一個設計稿來說，第一步是粗看圖層，理解設計意圖，其次是根據自己的理解對圖層進行新的操作和轉換。以下是關於圖層操作的一些經驗：
§關閉圖層可見性--關閉圖層可見性非常常用，因為有些頁面元素是交織在一起的，你通常需要關閉其中某項先切一部分，再切一部分。
§合並圖層--設計師載入第三方的元素這類的作法，會讓頁面某些小部件的圖層結構異常復雜，這時候將整個組合並Ctrl+E不失為一個好辦法
§
合並圖層的時候需要注意的是圖層效果會跟隨合並，這一方面會帶來不好修改的問題，所以合並完了通常Ctrl+Alt+Z還原,另一方面在某些時候還是很有用的，但個圖層的效果跟空圖層合並也會起到圖層柵格化的效果(文字圖層也可以跟空圖層合並)。
§復制圖層--有些時候一些sprite效果可以直接通過復制圖層在原稿上列出來，再通過切片工具出圖
§圖層蓋章--在一些圖層特別復雜的頁面，有時需要用到圖層蓋章工具，選中最頂層的圖層，點擊Ctrl+Alt+Shift+E
可以把以下的所有圖層蓋到一個新的圖層上。這個操作的好處是可以在不影響圖層本身的情況下，合並圖層。
生成圖片1)圖片格式--
圖片格式的原則簡單來說是架構復雜，色彩眾多的圖片jpg優先，色彩簡單，需求透明的png優先。png24在IE6下不兼容。
2)切片工具--
切片工具是ps為切圖提供的強大的批量的工具，所以一定要盡可能的使用它。使用切片之前先採用上述的方法對圖層進行處理，然後按需劃取需要的切片區域，使用切片工具的時候有如下幾個小技巧：
§切片選項--
劃取完分區以後，要對切片進行一些設定是很重要的，切片工具下Alt+點擊切片，會彈出如下窗口。首先，可以檢查切片的尺寸和位置，尤其是尺寸，比如你要切的按鈕定寬高，這里的檢查和設置就至關重要。其次，在這里直接命名，可以省去出圖以後重命名的時間。
§切片儲存--切片在儲存的時候，可以點選每個切片對其設定不同的圖片格式，保存的時候可以選擇保存選擇的切片而不是全部。
3)全新圖片--很多時候，切片難以直接使用，圖片需要進行二次處理。這時候我認為有以下幾點需要注意：
§千萬不要對jpg進行二次處理：jpg就算質量100%也是有損格式，二次處理的jpg會有肉眼可見的質量損失，所以要採用png的各種作為中轉。
§
注意圖片尺寸：有些版本的ps在拖拽進文檔的時候會默認尺寸適應，這會導致圖片尺寸在你不知情的情況下發生改變。解決的辦法可以是優先創建尺寸正確的圖片，或者以源文檔圖層的形式拖拽進新文檔。
§縮放：任何格式的圖片縮放都會產生質量損失，盡可能採用矢量圖縮放，或者在源文件的路徑里縮放再拖拽。
4)新圖片處理--新圖片的處理有以下幾個常用的技巧：
§圖像裁切和顯示全部：圖片小於畫布或者圖片大於畫布的情況下使用裁切和顯示全部命令，可以保證圖片的精確性。命令位於圖像(I)->
裁切/顯示全部
§活動選區，復制，粘貼：這三個命令配合使用可以實現很多轉換。比如一個漸變按鈕的縮短擴大。
結語
本來是想寫一個切圖的十分鍾入門教程，發現寫著寫著有點跑題，越來越細致。本文是我自己切圖的心得，而切圖技巧也因人而異，也需要各位自己去發現總結自己的技巧。另外一方面，我想切圖的重點也許並不在其本身，而在切圖者知道要怎麼切，熟悉web頁面構建的原理，同時根據自己的需要切出不同的效果。
以上就是小編今天為大家分享的關於Web前端工程師要掌握的切圖技能的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端知識記得關注北大青鳥web培訓官網。
⑷ html如何設置圖片大小
操作方法如下：
1、以Hbuilder來講解，首先新建一個HTML頁面，如圖；
⑸ 怎樣在WEB程序設計中插入圖片呢具體一點
在<body></body>中間插入圖片，代碼為<img src="images/logo.gif">
一般做剛開始做網頁都有一個網頁文件和一個相關的文件夾
比如你現在的abc.htm和文件夾images
abc.htm是寫代碼用的，images就是放圖片、或者樣式、腳本文件或者其它相關的文件用的
而一般調用圖片都採用<img src=images/051.gif">這樣的相對路徑
⑹ html網頁製作中如何設置背景圖片（如何引用）
1、首先打開Atom編輯器導入項目文件夾，先創建一個index.html的文件。定義一下html文件的主信息：
⑺ htmL中怎麼插入背景圖片如何設置背景圖片大小
CSS里設置這兩個參數：
背景圖background: url(/*圖片路徑*/) repeat-x/*平鋪方式*/;
尺寸:backgroun-size:100% 100%。
⑻ web網頁設計中怎麼做頁面背景圖片
1.css的寫法：background:url(圖片路徑)
2.直接在html上寫：<body background="圖片路徑">
⑼ web前端怎麼設置頁面圖片背景
background:url(圖片地址) no-repeat；
⑽ html網頁設計裡面怎麼平鋪背景圖片
html網頁設計裡面平鋪背景圖片的代碼如下：
<html>
<body>
<divid="Layer1"style="position:absolute;left:0px;top:0px;width:100%;height:100%">
<imgsrc="pictures/background.jpg"width="100%"height="100%"/>
</div>
</body>
</html>