導航:首頁 > 萬維百科 > 網頁設計版圖

網頁設計版圖

發布時間:2020-07-24 11:31:55

1、網頁設計好後的切圖是什麼意思呢

切圖就是把用設計軟體設置好的圖片切成相應的大小,切圖後再把圖片上傳就可以可以加快顯示速度,不用等整個圖片都下載以後顯示。

PS切圖步驟:

1、打開PS,然後點擊切片工具。

2、點擊切片工具後,就可以把圖片切成需要的大小。

3、切好圖片後,點擊導出web所用格式。

4、進入導出web所用格式頁面,按住shift鍵把所有切片都選中。

5、導出格式設置為JPEG。

6、最後點擊存儲就可以了。

2、網頁設計圖是什麼

網頁設計圖就是要把網頁做成什麼樣子的一張圖,可以是手工在白紙上畫的,也可以是用電腦軟體製作的。效果多種多樣,根據不同的行業進行分析之後製作的。想知道怎麼樣,可以直接看別人的網站做出來是什麼樣的,再分析一下是否符合用戶需求,方便用戶瀏覽?
步驟是分析行業用戶需求,設計內容分布去滿足這些用戶的需求,畫出一張圖。
我覺得就這么簡單,雖然看起來不怎麼專業,但是能解決用戶的一些實際的問題了。

3、用PS做一個網頁設計圖

挺簡單的,現在fireworks中做下PSD圖,然後在DW中處理一下就行了

我也有現成的,加些分留個郵箱可以發給你。。。。

網站分為好多類型,像個人主頁、門戶、論壇等,你可以選擇其中的一個來做。。如果你是新手的話,那就做個個人主頁吧,比較自由,做成什麼樣的都可以。。。。
如果你的程序搞的比較好的話,那就做個論壇吧、

4、網頁設計的規劃書

一、實驗目的和要求
綜合應用Dreamweaver 8的基礎知識創建和編輯網頁。
二、實驗內容及步驟
(1) 在「文件」中新建一個網頁,在「插入面板」的「布局」中,新建「左側和嵌套的頂部框架」框架,並使框架網頁符合下列要求。
① 「文件」中的「框架集」另存為,保存框架集時,把框架集文件名改為index.htm。
② 在「框架浮動面板」中選中左框架,在「文件」中選擇「保存框架頁」,同時給左框架文件命名為left.htm,在框架浮動面板中選中左框架,在「修改」中將「頁面屬性」中設置背景圖像為bg0035.jpg以及左框架的列寬度為320像素。
③在框架浮動面板中選中頂框架,在「文件」中選擇「保存框架頁」,頂框架文件名為top.htm,選中頂框架,「屬性面板」中設置行高度為65像素。
④ 選中主框架,在「屬性面板」中設置主框架頁面的「滾動」方式為自動,[源文件]為本地站點中的網頁文件main.htm。
⑤ 分別選中3個框架,在「屬性面板」,「頁面屬性」中將三個框架網頁的頁面屬性「左邊界」、「頂部邊界」、「邊界寬度」、「邊界高度」設為0,在「文件」中選擇「保存全部」,將全部框架文件保存在本地站點中。

(2) 用photo子文件夾中的圖像創建網站圖像冊,其要求如下。
①新建一個網頁,在「命令」中「創建網站相冊」,在彈出的窗口中設置標題為「名畫——人類的精神糧食」,省略副標題。
②在①彈出的窗口中繼續設置頁面圖像的縮略圖尺寸為100*100像素;每行列數我為6列;縮略圖像文件格式為.jpg。
③在①彈出的窗口中繼續設置「源圖像文件」為本地站點根文件夾中的photo子文件夾,「目標文件夾」為本地站點根文件夾,其他參數默認。
④在「頁面屬性」中用img文件夾中的文件bg0029.jpg設置網頁背景圖像。
⑤插入「庫」項目:在頁面中插入層,點擊「文件浮動面板」,「資源」中選擇「庫」,選中庫項目return,按下」插入」按鈕。
⑥在「文件」中選擇「另存為」,保存網頁文件,以index1.htm為名保存在本地站點的根文件夾中。

(3) 新建一個網頁,命名為 fg1.htm,並將此文件保存本地站點根文件夾中。打開文件fangao.dwt.
①將 「梵高的故事.doc」中的文字內容復制粘貼到網頁文字可編輯區域的藍色框中,並在模板左側2個圖像可編輯區域中,單擊可編輯區域,在「插入」中選擇「圖像」,選擇img文件夾中的tu1_3.jpg和tu2_3.jpg,模板頂部標題可編輯區域輸入文字「梵高的故事」。
②在「屬性面板」中選擇「樣式」,「附加樣式表」,附加本地站點根文件夾中的外部層疊樣式表文件format.css,選中網頁標題,在「屬性面板」樣式中選擇title作用於網頁標題,同樣方法將樣式format作用於網頁中的其他文字,樣式filter作用於圖像文件tu1_3.jpg和tu2_3.jpg。
③把游標放在要插入的位置,在「插入」中選擇「命名錨記」,輸入名稱」aa」,在網頁中最後一段的文字「鑲板畫」中間插入用於超鏈接的名為「aa」的站點。
④在頁面左下角插入層, 在「文件浮動面板」的「資源」中選擇「庫」,選中庫項目return,按下」插入」按鈕。

(4) 新建網頁文件,並將此文件以fg2.htm為名保存在本地站點的文件夾中。
①在「屬性面板」的「頁面屬性」中設置頁面背景圖像為bg0029.jpg,在「插入」中選中「表單」中的「表單」。在「屬性面板」中設置表單的名稱為:「調查」,動作為:答題學生本人的郵件地址,方式為:POST。
②輸入文字「問卷調查」,選中文字在「屬性面板「中設定」居中」,並設置文字格式。
③在「插入」中選擇「表單」,「文本域」,在表單的第2行,插入文本域。設置標簽文字為「姓名」,確定.選中文本域,在「屬性面板」中設置「字元寬度」為20,「類型」為單行,「最多字元數」為20。
④在「插入」中選擇「表單」,「單選按鈕組」,在同一行中再插入單選按鈕組,單選按鈕組的名稱為「性別」。將標簽改為」男\女」,在屬性面板中設置標識是「男」的單選按鈕的「初始狀態」為已勾選,「選定值」為「男」。標識為「女」的單選按鈕的「初始狀態」為未勾選,「選定值」為「女」。
⑤在「插入」中選擇「表單」,「文本區域」,在表單的第3行中插入多行文本域,在彈出的窗口中設置標簽文字為「談談你對本網站的觀感:」。換行後,插入多行文本域,選中該文本域,在屬性面板中設置其「字元寬度」為50,「類型」為多行,「行數」為10,「換行」為默認,「初始值」為「請發表您的瀏覽觀感」。
⑥在「插入」中選擇「表單」,「按鈕」,在表單的第5行居中插入2個按鈕,在「屬性面板」中並分別將它們的「標簽」和「動作」設為:遞交表單和重設表單。
⑦在頁面左下角插入層, 在「文件浮動面板」中選擇「資源」,「庫」,選中庫項目return,按下」插入」按鈕。

(5) 打開網頁首頁文件index.htm。
①點擊頂部框架,在「插入」中選擇「媒體」中的flash,在頂部框架中插入Flash文件fgl.swf。
②在「插入面板」的「布局」中選擇「繪制布局表格」,在左框架的上半部分畫布局表格,在其中畫5個布局單元格分別選中,在「屬性面板」中設置大小為93*63像素,在「插入」中選擇「滑鼠經過圖像」,在其中分別插入「滑鼠經過圖像」,在彈出的窗口中設置其「原始圖像」文件分別為tu1_2.gif、tu2_2.gif、tu3_2.gif、tu4_2.gif、tu5_2.gif,「滑鼠經過圖像」文件分別為tu1_1.gif、tu2_1.gif、tu3_1.gif、tu4_1.gif、tu5_1.gif。
③在左框架的下半部分按樣張畫三個層,屬性設置為210*150大小,在這個3層中插入3幅圖像分別是tu1_3.gif、tu2_3.gif、tu3_3.gif,選中3個層,在「修改」中選擇「排列順序」中設置3個層重疊,分別將3個層選中,在右鍵菜單中選擇添加到時間軸,在3幅圖像的動畫條中插入適當的關鍵幀,在「屬性」中更改關鍵幀處的可見性,製作時間軸控制3幅圖像輪流顯示的時間軸動畫,每幅圖像顯示的時間為1s,並鉤選自動播放和循環
④在「文件浮動面板」的「資源」中選擇「庫」中,選中庫項目return,點擊面板右下角的」編輯」按鈕,選中它,在「屬性面板」中設置其與首頁index.htm建立鏈接,並使首頁index.htm在復框架中顯示,目標_parent,然後「修改」中選擇「庫」的「更新頁面站點」。
⑤在首頁文件index.htm被瀏覽時播放聲音文件Applause.wav。
⑥將文件保存
.

(6) 按下列要求為左框架中的5個圖像按鈕添加行為和超鏈接。
①選中圖像,在「行為面板」中選擇行為「Ondblclick」.然後「添加行為」,「控制shockwave或flash」,操作:停止, 在「行為面板」中選擇行為Onclick,「添加行為」「控制shockwave或flash」,操作:播放,可達到以下效果:雙擊該圖像,停止播放頂部框架中的Flash文件fg1.swf,單擊該圖像,開始播放頂部框架中的Flash文件fg1.swf。
②選中第2個滑鼠經過圖像在「屬性面板」添加超鏈接,鏈接至index1.htm,選擇「目標」為「mainframe」可達到以下效果:單擊此圖像是鏈接網站相冊文件index1.htm,並使該文件在主框架中顯示。
③選中圖片在「屬性面板」中設置鏈接為fg1.htm#aa,目標為_mainframe,即可單擊此圖像時鏈接到文件fg1.htm的錨點「aa」上,並使該文件在主框架中顯示。
④給網頁左框架第4個滑鼠經過圖像添加超鏈接,選中圖片,在「屬性面板」中設置鏈接至fg2.htm, 目標為_mainframe,即可單擊此圖像時鏈接到文件fg2.htm上,並使該文件在主框架中顯示。
⑤選中圖像,在行為面板中選擇行為「Ondblclick」, 「添加行為」「控制」shockwave或flash,操作:停止;選擇行為「Onclick」, 「添加行為」「控制」shockwave或flash,操作:播放。使雙擊該圖像,停止播放左框架底部的時間軸動畫,單擊該圖像,開始播放左框架底部的時間軸動畫。

三、實驗中遇到的問題及解決方法
1.起初插入的flash動畫始終無法顯示,插入的main.htm中有個別圖象無法顯示,通過改變絕對路徑,完成顯示效果.
2.做超鏈接時,鏈接的無效果,通過改變鏈接途徑達到鏈接效果。
3.在做最後一步的六個圖片的超鏈接時,添加行為和控制shockwave或flash,多次操作和調試都無法成功,後來經過請教同學,知道是在「行為面板」中選擇行為「Ondblclick」.然後「添加行為」,「控制shockwave或flash」,操作:停止,再在「行為面板」中選擇行為Onclick,「添加行為」「控制shockwave或flash」,操作:播放,即可達到要求的效果。
4.在做3副圖象輪流顯示的時間軸動畫時,開始不會做,後來知道是在右鍵菜單中選擇「添加到時間軸」,在3幅圖像的動畫條中插入適當的關鍵幀,在「屬性」中更改關鍵幀處的可見性,製作時間軸控制3幅圖像輪流顯示的時間軸動畫,每幅圖像顯示的時間為1s,並鉤選自動播放和循環。

5、正常網頁製作背景圖片應該多大?

1、背景最好是能夠做到自動延伸,現在的顯示器是越來越大,解析度也慢慢的變大了,現在用1600*900解析度的也不少,我的就是,當然也有人用1280*768、1024*768等,所以網頁設計的背景一般是不會設計成固定尺寸的,你可以做成可循環平鋪的圖片或者漸變顏色,直接是一種顏色那就更方便了;

2、其實網頁設計一般所說的尺寸指的是主體框架的尺寸,就拿現在這個百度知道的頁面距離,中間的主體部分無論是瀏覽器怎麼伸展,主體內容的寬度是保持不變的,我查看了一下css代碼,這個主體框架的寬度是980px;

3、你設計的時候把主體部分設置成980-1000px就差不多了,畢竟現在使用1024*768解析度以下的人已經畢竟少了。

6、網頁設計如何定義圖片的位置和大小

網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計. 網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Firefox等.
高度:
高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。
寬度:
1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。 2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005 3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001 註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。
所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.
如果是800的解析度一般都設成770。但也有設成760的.
這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.

網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.
頁面標准按800*600解析度製作,實際尺寸為778*434px 頁面長度原則上不超過3屏,寬度不超過1屏 每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px 另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K
標准網頁廣告尺寸規格
一、120*120,這種廣告規格適用於產品或新聞照片展示。 二、120*60,這種廣告規格主要用於做LOGO使用。 三、120*90,主要應用於產品演示或大型LOGO。 四、125*125,這種規格適於表現照片效果的圖像廣告。 五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。

六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。 七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。 八、88*31,主要用於網頁鏈接,或網站小型LOGO。 廣告形式 像素大小 最大尺寸 備注 BUTTON 120*60(必須用gif) 7K 215*50(必須用gif) 7K 通欄 760*100 25K 靜態圖片或減少運動效果 430*50 15K 超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果 巨幅廣告 336*280 35K 585*120 豎邊廣告 130*300 25K 全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式 圖文混排 各頻道不同 15K 彈出窗口 400*300(盡量用gif) 40K BANNER 468*60(盡量用gif) 18K 懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀) 網頁中的廣告尺寸 1.首頁右上,尺寸120*60 2.首頁頂部通欄,尺寸468*60 3.首頁頂部通欄,尺寸760*60 4.首頁中部通欄,尺寸580*60 5.內頁頂部通欄,尺寸468*60 6.內頁頂部通欄,尺寸760*60 7.內頁左上,尺寸150*60或300*300 8.下載地址頁面,尺寸560*60或468*60 9.內頁底部通欄,尺寸760*60 10.左漂浮,尺寸80*80或100*10

7、網頁設計工作多數用ps還是ai,有什麼有缺點

多數用到PS,但AI也用,有事PS處理不了的,就用AI,軟體不同,功能自然也不同,PS處理點陣圖的,AI是矢量圖形處理軟體,當網頁中出現像素特別小的logo標志時,一般會選擇用AI來做。
PS是點陣圖,AI是矢量圖,點陣圖與矢量圖的區別和優缺點:
點陣圖就是你看到普通圖片那種,顏色信息豐富,但放大會模糊並且有馬賽克塊;
矢量圖是可以無限放大都不會模糊和馬賽克的;但好像顏色控制不好;經常會很鮮艷和單調
PS是最優秀的專業圖像編輯軟體,做出的圖是點陣圖。點陣圖是點或像素方式來記錄圖像的,因此圖像由許多小點組成。優點是色彩顯示自然、柔和、逼真。缺點是圖像在放大或縮小的轉換過程中會產生失真,且隨著圖像精度提高或尺寸增大,所佔用的磁碟空間也急劇增大。點陣圖放大後圖像會變得模糊。
而AI,或者CorelDraw、Freehand等是用於繪制矢量圖形的軟體,矢量圖,是以數學方式來記錄圖形的,由軟體製作而成。優點是信息存儲量小,與解析度完全獨立,在圖形的尺寸放大或縮小過程中圖形的質量不會受到絲毫影響。缺點是用數學方程式來描述圖形,運算比較復雜,且所製作出的圖形色彩顯得比較單調,圖形看上去比較生硬,不夠柔和逼真。
在圖形的復雜程度不大的情況下,矢量圖具有文件短小,可無級縮放等優點。
接下來,現在對比PS和AI兩軟體,看一下它們的應用吧。
Photoshop是非常優秀的專業圖像處理軟體,一直占據著圖像處理軟體的領袖地位,是平面設計、建築裝修設計、攝影後期、三維動畫製作及網頁設計等的必用軟體。其驚人的功能也引起廣大業余圖像處理愛好者的強烈興趣。
Illustrator作為全球最著名的圖形軟體,以其強大的功能和體貼的界面已經占據了便於矢量編輯軟體中的大部分份額。據不完全統計,全球有67%的設計師在使用Illustrator進行藝術設計。無論你是線稿的設計者和專業插畫家、生產多媒體圖像的藝術家,還是互聯網頁在線內容的製作者,都可以用到Illustrator。但並不局限於用它進行廣告作品、報紙插圖、海報宣傳畫等側重矢量圖效果的表現。它的點陣圖處理功能依然強大。

8、html網頁設計裡面怎麼平鋪背景圖片?

html網頁設計裡面平鋪背景圖片的代碼如下:
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
網頁背景默認是平鋪整個屏幕的,可能有以下原因導致不能平鋪:

1、圖片不夠大,又background屬性不能拉伸圖片;
2、只能用個div,把其z-index值設為負,並使這個div大小為整個body大小,在div里用<img> ;
3、body的background屬性去掉,要不然會被遮住。

9、html網頁設計裡面怎麼平鋪背景圖片

html網頁設計裡面平鋪背景圖片的代碼如下:
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
網頁背景默認是平鋪整個屏幕的,可能有以下原因導致不能平鋪:

1、圖片不夠大,又background屬性不能拉伸圖片;
2、只能用個div,把其z-index值設為負,並使這個div大小為整個body大小,在div里用<img> ;
3、body的background屬性去掉,要不然會被遮住。

10、網頁設計圖片主流尺寸

瀏覽器全屏打開後網頁實際的內容區域離屏幕兩邊有一定空白,網頁做的時候一般寬九百多像素吧,自己看著做吧。

與網頁設計版圖相關的知識