ps簡易網頁製作步驟
Ⅰ 57自學網 中用photoshop軟體製作簡單網頁的小技巧怎麼找不到了
原文內容如下：
教你一招製作簡單網頁的小技巧
一篇文章配上一個漂亮的版面，可以使人耳目一新或著是一種視覺享受。版面設計可以用photoshop軟體製作，用PS製作網頁版面可以很好的控制和調整網頁框架的布局或色彩的協調搭配，也便於整體的修改和局部的細致刻畫，使網頁更具個性化。
用PS製作網頁前，應對製作的網頁有個初步的構思，等把大的色塊做好後，再調整色塊間的明暗度、對比度、飽和度進行調整，而後再把小的插件放到網頁上，先整體後局部的製作過程。由於網路空間受文字字數（4000字）或圖片大小（500KB)的限制，所以在網頁框架的製作中盡量的簡化其結構，圖片的格式也盡量的選擇GIF格式。還要考慮空間文章區像素的大小，本人空間的文章區寬度是950像素，所以本人的網頁框架圖片一般設置為920像素。
讓我們先來了解一下版面布局的步驟：
一.草案新建頁面就象一張白紙，沒有任何錶格，框架和約定俗成的東西，你可以盡可能的發揮你的想像力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟體photoshop等也可以)。這屬於創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最後選定一個滿意的作為繼續創作的腳本。
二.粗略布局 在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(註：功能模塊我們在"首頁設計-引子"中提過，主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意，這里我們必須遵循突出重點、平衡諧調的原則，將網站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然後在考慮次要模塊的排放。
三.定案將粗略布局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的布局。）
網頁框架完成後，下一步就是做成適應網頁框架的背景圖，可以用PS將整圖切割成4部分（圖1）（這里你可以根據自己的構思，進行切割）背景圖1為LOGO區域，（LOGO製作）背景圖2為過渡區，也可以把1-2區域合並為一個區域，本人的意圖是為了減少LOGO區域背景圖的文件的大小，背景圖3為文章區，這里應注意圖片上下的銜接，因該區域的高度是根據文章內容而定的，背景圖4為網頁的底部。
2、將文章區的對齊方式分別設置為「默認」、「頂部對齊」，可以使用「格式」-「段落」調整文字的邊距。
3、左側的文章連接區的對齊方式設置為「居中」「頂部對齊」，插入若干行單元格，將連接的文章放置該去。
Ⅱ 用photoshop做網頁方法
800*600我一般寬會設成，1024*768 寬度會設成 1000px，高度當然要看內容多少來定。
布局就不好說了 要看設計者的喜好、習慣、網站的功能、設計風格來定了。
接下來就是切圖了，切圖是個很麻煩但又很關鍵的步驟。切圖前必須考慮好圖片大小（大圖為了瀏覽時能順利打開最好切割成N小快），是否為背景圖（有的圖很大，但實際上都是小圖片的平鋪效果，所以遇到這種圖只取小圖，在網頁中設為背景就可以了）。除此之外還要考慮是否可以用圖片以外的元素代替，比如有的純色塊完全沒必要用圖片，只要在網頁中調整表格的顏色就可以得到相同的效果。photoshop有專門的切割工具，按需要把設計好的網頁切割好後用ctrl+alt+shift+s保存，就會生成一個html文件了，你會發現html的圖片文件夾里已經有你切好的一塊一塊的小圖片。瀏覽這個web頁面，顯示的效果和ps中的完全一致，似乎布局已經完成了。
但Dreamweaver現在才剛剛開始排的上用場，因為網頁畢竟不是純粹的圖片，還需要文字、flash、聲音等元素的添加，Dreamweaver要做的就是繼續完善你的頁面，圖片越少越好，該刪的刪、該設背景的設為背景該用表格顏色代替的用顏色代替。
哇塞 想想都麻煩^ ^
歸根結底 photoshop 是用來構圖設計的，而Dreamweaver是為了完成並完善圖片到網頁的轉換過程。
Ⅲ 如何用photoshop進行網頁製作
HTML+CSS+JS，這是廣義上的網頁三元素，HTML負責骨骼，CSS負責血肉，JS負責行為動作。其中瀏覽器中表現的版畫面約等於(html+css)，但權僅僅擁有他們是表現不出設計師們大腦中天馬行空，不拘一格的想像力的，因此才引入了PSD作為設計稿。
這就好比，你完全自己DIY一個高達，你需要先有一副高達圖片（PSD），再通過圖片中的表現自己搭建支撐的骨架（HTML），再用各式噴漆、馬克筆（CSS）去勾畫、完善細節。
那麼回到問題上來，怎麼用PS做網頁？假定adobe體系中，PS永遠只能設計網頁，而Dreamweaver才能製作網頁，但是依然要你自己根據設計去解構設計然後劃分網頁骨架，具體到html上就是根據不同的頁面表現來寫Div標簽，製作Button按鈕，用CSS控制他們的大小和位置以及表現。更進一步的話，大部分前端會手寫html和css代碼，因為DW有各式包括啟動速度，冗餘代碼之類的問題。
至於響應式，這又是基於成型的html以後另一個話題了，但還是html+css，只不過通過UA檢測來適應不同終端的不同展現。
Ⅳ 怎麼用ps做簡易的網頁
專業的製作網頁軟體是
Dreamweaver
，做一個
靜態網頁
也是簡單的很，內含模板的
Ⅳ 網頁製作！中學生PS網頁製作，學校要求做一個簡單的網頁作業，請高手教教簡單的製作過程！
＜html＞
<head>
<title>一個簡單的網頁</title>
</head>
<body>
這是我做的網頁作業
</body>
</html>
———
你把以上代碼復制到記事本里，然後把記事本的擴展名改成***·html，就可以了，最終它是IE的圖標顯示（除安裝了網頁編輯軟體），好了希望能幫到你…
Ⅵ 在Photoshop中如何製作網頁
soso問問里答案：
首先是在Photoshop中製作網頁的框架。網頁中的元素有很多，像Banner條、文本框、文字、版權、Logo、廣告等。盡量把這些相對獨立的元素放在不同的圖層中，這樣方便以後的再編輯。
不過圖層一多，就顯得很凌亂，可建立多個圖層組來進行管理。單擊圖層面板右上角的小三角按鈕，從彈出菜單中選擇「新建組」，在隨後出現的對話框中為新建組取一個名稱（如：「網頁頂部」），確定即可。這時圖層面板中多出一個文件夾圖標，即圖層組。把相關聯的圖層都拖放到同一組中，比如網頁頂部的所有元素，標題、菜單、Logo等都放到「網頁頂部」組中。同樣方法可以建立多個組，在組的下面還可以建立子組。
點擊圖層組前面的小三角，就可以像文件夾一樣展開或折疊它，這樣圖層面板就顯示干凈利落得多，要修改某個元素也能很容易找到。對同一組中的所以圖層可以方便地進行統一操作，如整體復制、刪除、隱藏、合並等。
小提示：
★如果你想借鑒某個網頁的設計，不妨把它截成圖片放在最下面的圖層中，再拉出多個參考線劃出網頁的大致版式，再在此基礎之上邊參考邊製作自己的網頁。
從Photoshop到Dreamweaver的轉換
在Photoshop中設計好之後，下面就要用切片工具把它轉換成網頁。有些人在切片之前喜歡合並圖層，其實沒有必要，合不合並圖層對最終生成的網頁沒有多大影響，反而會妨礙以後的編輯修改。
第1步：我們最終需要的，只是Photoshop中製作的圖形和框架。選擇切片工具（快捷鍵為K），把需要的每個圖形獨立切分出來。每切分出一個圖形，在它的左上角會顯示出切片編號。
第2步：在工具箱右擊切片工具，從彈出菜單中選擇「切片選擇工具」，用它可以選取、移動切片，並可以調整切片的大小。右擊某個切片還可以刪除或劃分這個切片。
第3步：切分出所有圖片後，執行「文件→存儲為Web所用格式」命令，打開存儲對話框，根據需要設置好圖片的格式、調色板等參數後，點擊右上角「存儲」按鈕調出保存對話框，選擇HTML網頁格式，使用默認設置，選擇「所有用戶切片」，保存即可。
第4步：在Dreamweaver中打開剛才保存的網頁，添加文字並進行各種編輯修改就可以了。怎麼樣，簡單吧！注意：Photoshop導出的實際上就是一個大的表格，所有空白的地方也都會轉換為圖片填充，在DW中編輯時，直接刪除這些圖片再添加相應的內容即可。
小提示：
★在Photoshop中編輯好圖形後，點擊工具箱最下面的按鈕（快捷鍵為Ctrl+Shift+M），可以轉到ImageReady里進行編輯，在這里，切片工具的功能更為強大，輸出的圖形控制也更豐富。
Ⅶ PS怎麼製作網頁
1photoshop
.fireworks
設計網頁的
2DM.網頁排版的
3flash
製作網頁flash的
你可以慢慢學學
Ⅷ 網頁製作基本步驟
確定風格、顏色、內容，
確定板塊分類
確定框架
確定模板
確定各版塊內容、排版
測試
上傳到空間
Ⅸ 從ps切片到做成網頁具體的操作步驟初學者，望高手指點！！！
PS的切片工具適合內容較為簡單的頁面，頁面圖片過多，會導致切圖後生成的冗餘圖片過多，不利於網頁製作的最基本原則：頁面文件大小控制。
靜態頁面製作的步驟一般是：
1.搭建目錄
根據需要建立設計的目錄文件夾，如：css(存放css樣式文件)，js（存放javascript文件），images（存放網站風格的圖片文件），demo/uploads（存放演示數據）
【注意：這里有兩個大的圖片目錄，網站的修飾圖片存放在images目錄下，演示的圖片存放在demo或uploads目錄下，很多程序員都不願意去動你的靜態目錄，直接後果是很多演示圖片數據被當作網站圖片上傳了。導致上傳的時候壓縮包很大！】
2.建立首頁頁面和全局樣式
接下來就是在根目錄新建index.html文件，並引用對應的css文件，js文件資源。
在這一步，你要製作好頁面的版式布局，一般是使用css書寫，例如，可以建立一個layout.css來放置這些樣式，內容就是側邊寬度，內容區域寬度，左浮動、右浮動，清除浮動等內容。
你還要設計一下全局樣式，一般放在common.css中，主要定義全局字體、字型大小，顏色，鏈接顏色，各種顏色的文本，各種修飾的文本，等...
然後你還需要為頁面添加樣式，頁面比較少可以直接在common.css繼續添加，頁面比較多，則可以建立新的css，例如：index.css首頁的樣式，about.css關於我們的樣式，ucenter.css用戶中心的樣式。這里你要設置頁面內容的樣式，如標題、邊框、背景、圖片寬高等~
【注意：html的書寫盡量整潔，規范，注釋齊全，css同樣如此】
3.分離模板，完善其他頁面
當你的首頁完成後，差不多頁面的模板已經出來了，通常，我們會把頁面的頭部，內容和頁腳分離為：header.html,page.html,footer.html。這樣，你就無需重復書寫頭部和頁腳的模板代碼了，當然，如果你的側邊欄也是固定的，你還可以分離出sidebar.html這樣的模板頁。
根據你的模板頁，你就可以新增和完善其他頁面的製作了。
4.兼容性測試，代碼優化
兼容性測試可以分散在製作過程中，也可以最後統一驗證。通常，你需要驗證多個瀏覽器，IE6、IE8、chrome、火狐等~
代碼優化，你要適當的精簡你的代碼，把重復的代碼整合起來，把冗餘的標簽優化好，同時，你還要注意好命名的規范，盡量使用英文命名，而不是拼音或簡拚命名。
到這兒你的靜態目錄就搭建好了，程序人員看到後就明白是怎麼回事了，他可以很輕松的分離你的html到程序中，另外你的注釋齊全，他或許還會誇你幾句！：）
Ⅹ 簡單網站的製作步驟
要想學做網頁，首先得了解製作網頁的工具。
製作網頁主要有以下一些工具
Frontpage：office自帶的一個工具，操作簡單，實用，學起來比較輕松，功能不咋地，我不太喜歡。
Dreamweaver：這是網頁三劍客之一，專門製作網頁的工具，可以自動將網頁生成代碼，是普通網頁製作者的首選工具，界面簡單，實用功能比較強大。建議初學者選用。
另外一個工具就是代碼編輯工具，例如寫字本、EditPlus等，這些工具主要編輯asp等動態網頁。
此外還有一些網路編程工具，javascript、java編輯器等。
網頁製作也是一個比較吃香的行業，要真正做一個好的網站，還必須有良好的設計功底。所以還得學很多邊緣性的軟體，例如photoshop、flash等。
大型的網站往往還需要資料庫的支持，所以還得懂資料庫。sql、甲骨文等。
總之，掌握好網頁製作，能獨立完成一個網站的製作工作，那就不要考慮吃飯問題。隨便混就好了！
網站設計八步驟
由於目前所見即所得類型的工具越來越多，使用也越來越方便，所以製作網頁已經變成了一件輕松的工作，不像以前要手工編寫一行行的源代碼那樣。一般初學者經過短暫的學習就可以學會製作網頁，於是他們認為網頁製作非常簡單，就匆匆忙忙製作自己的網站，可是做出來之後與別人一比，才發現自己的網站非常粗糙，這是為什麼呢？常言道：「性急吃不了熱豆腐」。建立一個網站就像蓋一幢大樓一樣，它是一個系統工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設計出一個滿意的網站。
一、確定網站主題
網站主題就是你建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。特別是對於個人網站，你不可能像綜合網站那樣做得內容大而全，包羅萬象。你沒有這個能力，也沒這個精力，所以必須要找准一個自己最感興趣內容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網站的主題無定則，只要是你感興趣的，任何內容都可以，但主題要鮮明，在你的主題范圍內內容做到大而全、精而深。
二、搜集材料
明確了網站的主題以後，你就要圍繞主題開始搜集材料了。常言道：「巧婦難為無米之炊」。要想讓自己的網站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以後製作網站就越容易。材料既可以從圖書、報紙、光碟、多媒體上得來，也可以從互聯網上搜集，然後把搜集的材料去粗取精，去偽存真，作為自己製作網頁的素材。
三、規劃網站
一個網站設計得成功與否，很大程度上決定於設計者的規劃水平，規劃網站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網站規劃包含的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在製作網頁之前把這些方面都考慮到了，才能在製作時駕輕就熟，胸有成竹。也只有如此製作出來的網頁才能有個性、有特色，具有吸引力。如何規劃網站的每一項具體內容，我們在下面會有詳細介紹。 四、選擇合適的製作工具
盡管選擇什麼樣的工具並不會影響你設計網頁的好壞，但是一款功能強大、使用簡單的軟體往往可以起到事半功倍的效果。網頁製作涉及的工具比較多，首先就是網頁製作工具了，目前大多數網民選用的都是所見即所得的編輯工具，這其中的優秀者當然是Dreamweaver和Frontpage了，如果是初學者，Frontpage2000是首選。除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等；動畫製作工具，如Flash、Cool 3d、Gif Animator等；還有網頁特效工具，如有聲有色等，網上有許多這方面的軟體，你可以根據需要靈活運用。
五、製作網頁
材料有了，工具也選好了，下面就需要按照規劃一步步地把自己的想法變成現實了，這是一個復雜而細致的過程，一定要按照先大後小、先簡單後復雜來進行製作。所謂先大後小，就是說在製作網頁時，先把大的結構設計好，然後再逐步完善小的結構設計。所謂先簡單後復雜，就是先設計出簡單的內容，然後再設計復雜的內容，以便出現問題時好修改。在製作網頁時要多靈活運用模板，這樣可以大大提高製作效率。
六、上傳測試
網頁製作完畢，最後要發布到Web伺服器上，才能夠讓全世界的朋友觀看，現在上傳的工具有很多，有些網頁製作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網站發布到自己申請的主頁存放伺服器上。網站上傳以後，你要在瀏覽器中打開自己的網站，逐頁逐個鏈接的進行測試，發現問題，及時修改，然後再上傳測試。全部測試完畢就可以把你的網址告訴給朋友，讓他們來瀏覽。
七、推廣宣傳
網頁做好之後，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。
八、維護更新
網站要注意經常維護更新內容，保持內容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內容，才能夠吸引住瀏覽者。
網頁製作教程:
FONTRPAGE的
http://www.cqzxzx.cn/it/hongen/pc/jc-down/homepage/fp2k.zip
dreamweaver的
http://www.cqzxzx.cn/it/hongen/pc/jc-down/homepage/dreamweaver.zip