當前位置:首頁 » 網頁前端 » web切片製作
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web切片製作

發布時間: 2022-12-31 09:51:49

⑴ 在PS里如何將PSD網頁效果圖切片成web格式是不是只靠PS就可以完成切片切片還需要什麼

給你個最簡單的方法。

打開你的PSD圖-切片(手動切仔細點)-文件-存儲為WEB所用格式
-Ctrl+A(這是為了使所有切片的圖片都清晰)-選好切片圖片格式
-存儲-「保存類型為HTML何圖像」。PS的操作到這里就完了。

上傳這些切好的圖片到網路中,然後打開DW軟體,打開在PS理保存的HTML文件,最後是逐一替換換掉圖片地址就OK了!

對照著操作100%可行!望採納!

⑵ 怎麼用photoshop做好圖片切片WEB的模式保存HTML,在dreamweaver8打開後,怎樣添加編輯內容

建議你不要用photoshop做切片,

把你的PSD檔用fireworks開啟,

使用Fireworks的切片功能分割你的網頁圖片,

將PSD檔另存成PNG檔案,

接著做2次導出,

第一次導出網頁的時候時,將所有切片的類型設定為"圖像"(有兩種選擇Html&圖像----》代表編輯區跟圖片)

如果你沒有將所有的頁面都做切片的話,記得勾選「包括無切片區域」。

並勾選"將所有圖像放入子文件夾的選項"(方便你找圖檔)

然後你在Fireworks的環境下,將你要修改做網頁編輯的切片區設定成"Html"類型,然後再輸出一次,這個時候你到Dreamweaver開啟你剛導出的Html檔,你會發現Html的切片區變成沒有圖案了,

這時最後一個步驟就是在屬性欄位(畫面下方單元格屬性里的背景欄)設定切片區的背景,點取沒有背景的切片區,然後點背景欄位旁的資料夾圖示,到images檔案夾里找你第一次輸出的切片圖片,並設定為背景就成功了。

這個時候你的html切片區就成為有背景圖案又可以編輯內容的區域了,你可以畫面左上角選擇布局,在你要編輯的地方加入表格,然後在表格內編輯網頁內容,放置圖片等等,覺得表格有框線難看的話,可以設定"邊框"為0。

大致上就是這樣,還有疑問的話給我留言吧。

⑶ ps/Web格式保存,怎麼切片啊

打開圖片,打開介紹切片工具,右鍵點擊畫布,根據需要設置切片數,文件~存儲為web格式~存儲即可。

⑷ 怎麼用photoshop cs切片製作網頁

首先選擇PS的工具菜單-然後點擊切片工具-換份好你要切片的圖片布局,然後在保存的時候選擇導出為WEB格式,選擇你保存的文件格式,一般網頁選擇GIF為好,保存文件的時候選擇保存html和圖片就行了.這樣就保存成table布局的網頁,你最後自己寫.他保存的文件不怎麼兼容.

⑸ PS切片做靜態網頁怎麼做

做完圖片後選擇切片工具,然後在圖片上右擊 按照自己的意願劃分大小,然後然後 文件--存儲為WEB所用格式--存儲,這里可以進行設置或者你將各個小圖保存到電腦文件夾里,使用代碼製作靜態網頁,教你簡單的代碼:<html>
<head>
<title>**網頁標題**</title>
<META http-equiv=Content-Type content=text/html; charset=gb2312><style type=text/css>
body,th,td{font-size:;color:black;font-family:;}
a.link{color:blue;text-decoration:none;}
img{}
input{}
</style>
</head>
<body topmargin=2 leftmargin=2 bgcolor=dddddd background=http://>
</body>
</html><TABLE style="LEFT: 0px; WIDTH: 1000px; POSITION: relative; TOP: 0px" cellSpacing=0 cellPadding=0 width=1000 align=center border=0>
<TBODY>
<TR>
<TD><img src="7022_01.gif" width="寬度" height="高度" alt=""></TD></TR><TR>
<TD><img src="7022_02.gif" width="寬度" height="高度" alt=""></TD></TR><TR>
<TD><img src="7022_03.gif" width="寬度" height="高度" alt=""></TD></TR><TR>
<TD><img src="7022_04.gif" width="寬度" height="高度" alt=""></TD></TR><TR>
</TBODY></TABLE> <<br/><p align="center"><embed style="LEFT: 167px; WIDTH: 0px; TOP: 423px; HEIGHT: 0px" src="插入音樂地址" width="1" height="1" type="audio/x-ms-wma" wmode="transparent" quality="high" autostart="autostart" loop="-1"></embed></p>

⑹ 網頁製作中的切片步驟

1、盡量切小一點
2、可能用來做背景的部分切整齊一些,以備改小做背景。
3、切完保存為網頁後,最好重新新建文件再排版

⑺ 網頁製作中用如何用PS切圖呀,求助 求詳細教程謝謝

在photoshop里製作切片的時候,另存為web使用格式
在右上角
預設欄的旁邊有個小圖標(我是的是cs5版,但估計差別不大),點了以後選擇「編輯輸出設置」(找到這個是關鍵),然後選擇儲存為xhtml,下拉菜單里選擇
儲存文件可以編輯各種選項。
設置好以後,保存,保存格式的時候把「僅保存圖像」改為「xhtml和圖像」。
之後就會生成一個表格網頁,在frontpage/dreamweaver里打開這個網頁復制粘貼這個含切片的表格到你需要的網頁里就可以了。

⑻ photoshop里切片製作網頁是怎麼規劃切片的

ps里無論你做出來的是什麼,都只是普通圖片(如果是網頁那也只有普通圖片,切割後另存為web格式,導出來的才叫靜態網頁),至於如何切片直接與後面的網頁製作有緊密關系,現在無論怎樣講你都不可能有直觀印象,我建議你去搜索一下 DIV+CSS專題:十天學會DIV+CSS
這個教程中前面是講布局的基礎,從第十天開始就是與ps中的切片結合,學會之後你應該就有一個大概的基礎了。

⑼ PS 切片生成WEB格式

切片生成web網頁,需要將圖片編輯好以後轉換到盤ps的Adobe ImageReady CS2姊妹軟體中進行前片編輯才能生成html圖片切片的web頁!在原ps中是無法完成工作的!

⑽ 如何製作美觀好看的web應用程序界面

我們需要先製作背景圖片。也就是網頁背景那塊藍色的部分。我們需要單獨做出來。
新建一個1920px*400px的文件
我們拉一個一個藍色(#506dbb)到白色的一個漸變
效果圖
然後我們保存這張圖片為gif格式
這時候我們新建一個
1000*800的文件
我們把網頁效果圖製作出來。這里都是用到ps製作的。沒有寫任何代碼。這個過程我就不講了
大家製作好網頁效果圖完成的時候一定要注意把網頁背景圖層刪掉,保持透明
下一步我們使用切片工具。把頁面進行切片。如下圖所示
注意每一個鏈接都要切片一下。切片工具和矩形選區工具一樣,拉一下就是一個切片
為了區分我這里加了背景。我們一會一定要記得去掉
我們再使用切片選擇工具選擇單個切片。然後右鍵
我們再逐個為切片添加鏈接
我們現在保存為web所用格式
我們把這里選擇png—8

保存

保存完成後
效果圖

保存完成後。會生成一個目錄和一個html文件。我們用瀏覽器打開這個html文件可以看看效果。由於我們保存時選擇的是png格式的所以看到的效果不美觀,且網頁靠左邊。我們要做的就是讓網頁有一個背景就是我們剛剛製作的藍色背景。且頁面居中
為了方便,這里我們使用 Dreamweaver。這個軟體破解版和安裝教程問度娘要這里就不多說。
打開 Dreamweaver界面
我們新建一個站點

我們先要給網頁居中。
我們用Dreamweaver打開ps生成的html文件
進入Dreamweaver的設計視圖。注意看

我們用滑鼠點一下最外邊的這根線。(把滑鼠放在四個角上單擊一下就可以選中)
選中

然後把下邊的屬性設置為居中。注意看

這樣網頁就居中了。
我們再添加一個背景
我們先把滑鼠在旁邊空白地方單擊一下,然後點擊下面的頁面屬性

把背景圖片設置為我們剛剛製作的背景圖。重復選擇no開頭的那個。其他的不用管。

然後我們按ctrl+s保存好網頁。然後即可使用瀏覽器預覽效果了