網頁設計框圖

1、網頁設計中怎樣插入動態圖

動態圖是GIF擴展名的圖片，你只需使用img標簽就行了。

<img src="圖片地址" width="寬度" height="高度" alt="圖片說明" />

2、網頁效果圖怎麼製作？

　平面廣告和網站頁面設計的宗旨就是吸引眼球，符合平面視覺沖擊特點，如何設計一款有特色、另類能吸引眼球的作品是擺在平面設計人員和photoshop愛好者面前的難題

現在以一款網頁平面設計效果圖為實例，講解網頁設計方面的創意知識，從網頁效果圖布局創意、顏色選擇，裁減效果圖和製作網頁特效等方面來學習。下面我們就一起來學習吧。

首先聲明一下，這款網頁效果圖在得到朋友許可後拿來製作教程實例，切勿抄襲和用做其他用途。先看效果圖0。

一、 創意設計思路

一個網站在製作前需要確定網站風格、網站主題、和主色調，在沒有確切的方案之前，最好不要貿然動手製作，不然最後的結果很可能是以失敗而告終。

筆者決定從關鍵字"路行""獨自行走"加上是暗色系的要求上下手，敲定顏色採用沙漠黃，沙漠很容易讓人聯想到孤單；板式確定為戶外廣告的樣式沙漠黃配合生銹的廣告牌。符合"頹廢""艱辛路途"主題。

二、 網站效果圖及LOGO的製作。

1、LOGO的樣式採用的是圖形和字元的組合。漢字LOGO的字體不是下載的字體，是筆者用鋼筆工具畫出來的字體。如圖1和1-1。

　鋼筆工具勾勒出圖1的行走的人樣式，填充紅色，然後調整混合模式"斜面和浮雕"選擇浮雕效果、雕刻清晰、深度1、方向上、大小2，其他默認。這LOGO 的創意是，一個人在崎嶇不平的路上堅持自己的方向，配合網站的英文加中文名字，構成一個形象LOGO，剛好"路"字和"行"字採用紅色，突出了路行。

文字LOGO筆者用鋼筆工具勾畫出字的各個部件，然後拼接在一起，這里只給出"路"字的方法，"行"字方法如同。[next]

2、製作布局參考圖。如圖2

　3、根據布局效果圖，新建文件大小1000X765，填充黑色。布局中的"顯示區域"為廣告牌是要掛到牆上的，使用"石頭材質"放置在頁面最上方來製作石板牆；使用"銹跡皮革材質"製作"顯示區域""LOGO"區域的邊框（註：一些材質的製作方法省略，平時可自行製作也可去圖片站下載保存，用的時候方便），將LOGO區域的邊框復制一層，調整不透明度為60%放置到LOGO曾下方，這樣大體的框架就完成了。如圖3和3-1。

（圖5）

（圖6）

4、找來一張沙漠公路的圖片，把這張圖片進行聚焦處理。點圖4示例的按扭進入"以快速蒙版編輯模式"，選擇漸變，漸變模式為"徑向漸變"在圖中間向兩邊拉，屏幕會出現一團紅色；然後再點"以標准模式編輯"畫面會出現一個圓圈選擇區域，按"DELETE"刪除即可。如圖4和圖4-1。

（圖7）

（圖8）

　5、在"路"圖片上方新建一層，按住CTRL+"路"圖層，單擊新建的圖層，填充顏色4E341B，調整為暗系沙漠黃。如圖5。

（圖9）

製作文字LOGO牌。找來圖5-1中的灰色材質，在"LOGO邊框"下面新建一層，然後在其之上新建一層，放置沙漠圖片，將其混合模式修改為"顏色"然後打開一開始制

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

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

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

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

4、網頁製作怎麼進行圖文混排

要實現圖文混排其實很簡單，如果是使用dreamweaver 的話，插入圖片的時候會有一個對齊的選項，如左對齊，就是圖片在左側，然後文字從右麵包圍圖片。反之亦然。

如果不是使用dreamweaver，直接用記事本編輯，直接給img加上align=left或者align=right就可以了。

當然了，更復雜的混排還可以通過表格或者層來實現。

5、網頁設計頁面線形圖和框架結構圖的區別

框圖的製作是快速而廉價的，特別是當你使用諸如UXPin、Balsamiq、Axure這樣的軟體來製作的時內候。當容然，線框圖也理當是在設計之初就使用這些工具來製作。
比起創建一個完整細致高保真的線框圖，搜集反饋信息來得更加重要。為什麼這么說呢？
一般而言，大家更注重軟體的功能、信息架構、用戶體驗、用戶交互流程圖、可用性，這些東西，而不是考慮這些因素的美學特徵。同時，在這種情況下，根據需求進行修改也無需涉及代碼調整和圖形編輯。

6、網頁設計圖是什麼

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

7、網頁設計的規劃書

一、實驗目的和要求
綜合應用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,並鉤選自動播放和循環。

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、網頁設計是不是就是做圖？

網頁來設計是不是就是自做圖？只能說是有一部分，那麼什麼是網頁設計呢？

什麼是網頁設計，

網頁設計是一種視覺體驗的設計，特別講究編排布局和視覺交互，網頁設計不等同平面設計，它們和平面設計有許多不同之處。網頁設計是版式設計通過文字、圖形的空間組合，表達出和諧與美。想學網頁設計的就直接點它，都給你安排好了一份資料。

「網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。」

網頁設計一般分為三種大類:功能型網頁設計、形象型網頁設計、信息型網頁設計。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。

網頁設計是互聯網發展的產物，雖然移動端已是主流，但網這重要地位重要地位。