網站設計圖輸出標注

1、若要設計網頁的背景圖形,標記為

背景樣式為body{ background:url(1.png) #000;}

2、如何在網站上增加地圖標注

你做個圖片地圖就簡單啊！不要做動畫

3、網頁UI設計稿里的標注是用什麼軟體標注的

在國外做項目的時候，同事都在用zeplin，使用體驗也是非常順暢的。國內的開發設計流程環境不同，zeplin反而水土不服，現在團隊主要在用摹客iDoc，除了基礎的標注切圖功能以外還有交互原型和需求文檔功能，能夠很好地應對目前的產品開發環境，整體使用體驗比不上國外已經成熟zeplin，但是還是算易用

4、請問在「網站中的電子地圖」是怎麼標注的??

一般都是用google地圖，先查找你要標注地址的經緯度，再引入google地圖代碼就OK了，可以從google上找到你要的東東。

5、網頁設計有陰影的圖怎麼標注給前端

首先我是一名前端開發工程師，也做過設計：

你在切圖標的時候連陰影都切好

在你切完圖以後，你的在網頁上標注一下，專門給他發一個你標注過的網頁圖片，他會看的

6、請利用HTML標記符設計一個個人網站，網頁要有菜單、圖片、表格、命令按鈕等。 要截圖代碼形式的報告ORZ

不然就是繁瑣，看著都頭疼，花半個小時做還不如玩局游戲，反正都是金幣

7、網頁製作中使用什麼標記符給圖像加邊框

直接border=1，或者使用css

img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
/*定義圖片邊框*/

顏色需要在css里邊加上

border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;

8、如何高效地輸出iOS和Android標注和切圖

現在有很多產品為了降低設計成本並保持多平台體驗的一致性，都以iOS為主做一套交互設計，應用於iOS和Android兩個平台。但是在標注與切圖的環節，如何高效的與開發對接，似乎並沒有什麼更高明的辦法。很多團隊的做法是先做一套iOS的UI+標注+切圖，再在iOS的基礎上縮放一套Android的UI+標注+切圖。事實上這樣的做法是低效，且無效的。為什麼且如何做呢？

首先本文大前提是，交互以iOS的設計為主導，應用於iOS和Android兩個平台。本文描述的方法更適用於人力資源較為匱乏的設計團隊。

對於設計環節。

我對iOS和Android使用同一套iOS的交互設計這種做法不置可否，畢竟好多人都已經這么幹了。而很多情況下，到底用一套交互還是兩套，這個問題是被設計部門的話語權、項目的周期、人力資源等多個因素影響的，並不是簡單的節操問題。所以這里不討論到底一套交互對不對，只討論這種情況下怎麼幹活。

那麼既然是同一套設計，如果僅僅是為了達到的交付物標准，輸出兩套幾乎完全一樣的iOS和Android的UI圖，這種事情略顯蛋疼。據我所知有一些設計團隊都在不明真相地這么干著。

來看設計環節的交付物。

iOS和Android開發需要的設計交付物至少要有：高保真UI圖，標注，切圖。

高保真UI圖所起到的作用是，開發會參照其畫頁面，僅僅是獲知頁面樣子的一個手段，並非什麼高精度的事情。僅僅基於這一條，設計師就沒有必要出iOS和Android兩套樣子一樣只是大小不同的圖的，對於開發來說，他們只需要看到頁面樣子即可。

標注和切圖的作用是，開發會按照標注的尺寸，把切圖按照高保真UI圖的擺放方式做到界面上。那麼問題來了，iOS的開發和Android開發所需要的標注和切圖是不一樣的。如何在一套iOS的高保真UI圖上做出兩套標注和切圖呢？

眾所周知iOS設計的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如圖，他們的換算關系是，iOS像素尺寸的75%是Android的像素尺寸

於是很多設計團隊就基於這個75%的關系去做Android的圖了，但是這不是個好方法，這是一個設計和開發沒有成為好基友的狀態下所使用的方法。

我們知道Android開發所使用的單位並非像素，而是一個叫做dp/sp的單位，人家壓根就不用像素，你費勁半天調一個480*800又有啥用呢？你給他標註上，這個寬度300像素，又有啥用呢？設計不懂開發，開發也不懂設計，Android不懂iOS，iOS也不懂Android，很多同志就在這種「矩陣式的彼此的不理解」中湊合干著。

我們以480*800像素尺寸下做的設計圖為基準。開發將部件尺寸換算成dp尺寸的方法是，像素尺寸*2/3。這也是為什麼要讓Android部件尺寸能讓3整除的原因。所以在hdpi模式，480*800像素尺寸設計圖中，開發看到300px寬度的標注，會定義其為寬200dp，到這里Android開發才得到一個他們真正會用於開發的數值。

這整個過程，設計師做iOS尺寸圖並標注，設計師調整iOS尺寸圖為Android尺寸並標注px，Android開發看著設計師交付的標注，再將其換算成dp，很長的一個過程。

其實經過以上整個過程之後，我們已經得出了一個更簡單的換算關系：iOS像素尺寸*75%=Android像素尺寸，Android像素尺寸*2/3=Android的dp尺寸。進而得出：iOS像素尺寸*75%*2/3=Android的dp尺寸。所以，iOS里一個寬600px的東西，在Android的hdpi模式下，正好300dp，正好是50%，很容易算是吧？

在這個關系的指導下，我們可以在同一套UI圖上做適用於兩個平台的標注。只要Android的開發知道，標注600px的東西，在hdpi模式下等於300dp這個換算關系，一切都簡單了。當然，平台的區別要留意，例如iOS使用十進制色值，Android使用16進制，iOS可以繪制圓角和陰影，Android更傾向於用.9.png等。這些差異要在同一套標注中體現出來，讓兩端的開發各取所需。（如果你發現標注軟體中無法在同一張圖上標十進制和十六進制色值，你可以用文字標注替代其中一個，qq的截屏工具中也是帶色值提示的，辦法很多不再贅述。）

至此，已經可以做一套標注，讓Android和iOS的開發共同使用了。當然前提是你要告訴開發這個標注怎麼看，怎麼用！

下面看切圖

在iOS切圖與Android切圖的轉換中，是可以使用75%的換算關系的。也就是說iOS的切圖縮小75%之後，就是Android的hdpi模式下的切圖，而Android開發還需要其他dpi模式的切圖，按照如下關系換算即可。

我們會發現xhdpi模式和hdpi模式的換算比例也是75%。也就是說xhdpi模式下切圖尺寸跟iOS下是一樣的。所以iOS的切圖可以直接適用於Android的xhdpi模式。至於除hdpi和xhdpi之外的其他模式，如果需要適配，就需要單獨處理圖片了。

要注意的是切圖在縮放之後像素會糊在一起，很可能需要重新調整，還有各種虛邊情況，尤其是那些帶透明陰影的，都要重新調，但是這個工作量顯然要比重新調UI重新切，要小多了。

至此，我們設計一套適配iOS的高保真UI，基於該UI做一套適用於iOS和Android兩類開發人員的標注，再輸出一套可適用於iOS和 Android的xhdpi模式的切圖，再調整一套Android的hdpi模式切圖，基本上大部分工作就已經完成了。

資料來源：博客頻道

9、web網頁界面如何給前端標注，切圖

公司團隊現在用的是摹客idoc，我們把設計稿上傳到摹客後，可以自動生成標注，前端可以直接查看，針對大多數工具存在的標注誤差的情況，摹客也支持手動進行修改；設計規范等信息，摹客也支持手動標注在設計稿上面。
切圖的話，我們是用摹客的PS插件先在設計稿裡面標記切圖然後上傳到idoc，前端小姐姐就可以去直接下載，同時還支持切圖壓縮和自定義切圖尺寸，還是比較方便的推薦使用。

10、HTML在網頁中插入圖片的標記是什麼

例如<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> src="logo.gif" 圖片來源，接受 .gif, .jpg 及 .png 格式，前兩者通行已久，後者則由 96 年開始發展， 於未來取代前兩者。若圖片檔與該 html 檔同處一目錄則只需寫上檔案名稱，否則 必須加上正確的路徑，相對或絕對均可。 width=100 height=100 設定圖片大小，此寬度及高度一般採用 pixels 作單位。通常只設為圖片的真實 大小，以免失真，若需要改圖片大小最好使用圖像編輯工具。 hspace=5 vspace=5 設定圖片邊沿空白，以免文字或其它圖片貼近。hspace 是設定圖片左右的空間， 是設定圖片上下的空間，高度採用 pixels 作單位。 border=2 圖片邊框厚度。 align="top" 調整圖片旁邊文字的位置，你可以控制文字出現在圖片的偏上方、中間、底部、 左右等，可選值：top, middle, bottom, left, right，內定為 botom。Netscape 還支持 texttop, baseline, absmiddle, absbottom， texttop 表示圖片和文字依頂線對齊， baseline 表示圖片對齊到目前文字行底線值， absmiddle 表示圖片對齊到目前文字行絕對中央， absbottom 表示圖片對齊到目前文字行絕對底部，（絕對底部是指它考慮到比如 y 、g、q 等字的下邊）。 alt="Logo of PenPal Garden" 這是用以描述該圖形的文字，若使用文字瀏覽器，由於不支持圖片，這些文字 將會代替圖片被顯示。若支持圖片的瀏覽器，當滑鼠移至圖片上該文字也會顯示。