導航:首頁 > 萬維百科 > 網頁圖片設計教程

網頁圖片設計教程

發布時間:2020-11-18 04:13:56

1、PS設計網頁頁面的教程

網頁設計需要的PS操作技術並不是很多,只要掌握基礎就行了。
但是你想要做好一個稿子就不是那麼簡單了。
這當中有一些天賦的因素,但是更多的是學習。
你可以從模仿別人的稿子開始,漸漸的融入自己的東西。

http://www.68design.net/
這個站每天都會有新的酷站收藏,也有設計欣賞。
http://www.zcool.com.cn/
這個站素材豐富而且也有酷站收藏。

要做好網頁設計,一定要多看,拚命的看並且吸收裡面的東西,看看高手們是怎麼處理細節的,這樣慢慢自然會有提高。

2、求取一份用ps cc設計的web網頁和移動界面設計的視頻教程,謝謝

1、首先需要創建一個新文檔,大小 1200*1172px,背景設置為#efefef

2、使用矩形工具,在所創建新的圖層內一個大的灰色矩形,命名「Grey」,大小1200*62px。

3、為這個Grey矩形添加如下圖層樣式。

4、在Grey圖層上方再新建一個圖層Image,再該層添加另一個形狀,但這次我將使用圓角矩形工具。加入選擇一張如下圖漂亮的夢幻圖片。

5、對這張夢幻圖片,添加一些圖層樣式,如下。

6、在大圖片下面,繼續創建4個小矩形。嘗試使用不同的顏色。
我使用的尺寸是222*182px。顏色值分別是:#f15522、#66aa44、#eea411、#1188cc

7、現在我們做一下小顏色塊上的高光效果。
創建另一個層(按CTRL + SHIFT + ALT + N),在高光層內,添加白色到透明的徑向漸變。

8、調整該高光層的混合模式為疊加,同時改變不透明度為50%.

9、復制該高光層到每個顏色圖層上方。

10、接下來做導航部分。
在網站布局的頂部,將創建一個新的矩形。

11、對該層使用下面的圖層樣式。

12、創建一個小圓橢圓工具,直徑22px。

13、對這個小圓,添加下面的圖層樣式。

14、現在進行圓形的重要的調整,刪除圓形下半部。有兩種方法:
①、首先需要右鍵單擊層在你的圖層面板中,然後使用矩形選框工具選擇的下半部分的圓圈,按鍵盤上按上刪除。
②、另一種方式是柵格化的該圓形路徑,使用橡皮擦。

15、為導航添加Icon。
這個導航樣式適合比較簡約版Icon,並做出凹陷進去的圖層質感。

16、對於所有這些Icon,添加下面的圖層樣式。

17、在Icon之間,加入一些垂直分割線。

18、分割線設置如下的圖層樣式。

19、下一步是為網頁加入Logo。

20、使用圓角矩形工具,在Image圖層底部添加另一個的形狀。

21、為該矩形添加下面的圖層樣式。

22、使用橢圓工具繼續添加一些小圓形。

23、在顏色矩形右上方,使用橢圓工具繪制一個圓形。

24、選擇圓形圖層,創建剪切模板。

25、對於這個白色圖形,添加下面的圖層樣式

26、復制該樣式,到每個顏色框的右上方,並保持相同的空間比例。

27、然後添加另一個圖標,和一些標題文本。

28、繼續完善內容,注意正文內容較多時,要文字比例比較小,同時採用與標題字顏色反差,這樣能突顯出Title的醒目性,並在其間加入橫向分割線。

29、最後一個步驟,添加另一個文本與橫排文字工具。

30、這是最後的結果。希望你會喜歡它。
您可以使用該Web布局,加以細微的修改,使得它成為另一個Wordpress主題。

3、wps怎麼做網站設計圖圖文教程

打開wps文字,可能會出現廣告或者其它的東西。我們可以選擇直接關閉,然後看版界面工具欄下面的權+號,滑鼠移動到上面是「新建」對我們要做的第一步就是新建一個文字頁面

在我們新建好我們需要的新文字頁面後,我們把滑鼠移動到最上面的工具欄。選擇【視圖】在其下面的選項中我們要點擊勾選的是【web版式】進入一個類似網頁的編輯狀態

我們開始編輯,選擇工具欄中的【插入】找到【表格】這里需要根據我們自己網站的需求來進行選擇並新建表格。當然後面還是可以修改的,不過最好是一步到位免得太亂。

表格會出現,但是太小或者不適合編輯網頁。我們這個時候可以選擇把滑鼠移動到表格的右下角的地方,等到滑鼠出現雙箭頭然後拉動滑鼠進行拖拽。大小是跟著我們滑鼠拖動而決定的。

如圖不論是底部還是右邊都有個+號,滑鼠移動到此處+號會變亮。在我們設計網站的時候可以根據自己的需要通過點兩個+號進行增加表格

當然可以增加也可以刪減,熟悉wps文字的朋友對這個應該比較熟悉。對於不熟悉的朋友可以右鍵一下。這里我們要說是在最上面的表格我們選擇用文字編輯網頁的導航,圖片則需我們通過ps來進行一定的處理才能比較准確。

4、如何設計製作網頁,那裡有教程學習。

一、定義站點
1、 在任意一個根目錄下創建好一個文件夾(我們這里假設為E盤),如取名為MyWeb。
***備註:網站中所用的文件都要用英文名。
2、打開Dreamweaver,選擇「站點—新建站點」,打開對話框。在站點名稱中輸入網站的名稱(可用中文),在本地根文件夾中選擇剛才創建的文件夾(E:web)。然後確定即可。
***備註:再次打開Dreamweaver,會自動找到剛才設立的站點。如果有多個站點,可以在菜單「站點—打開站點」中去選擇。
二、創建頁面
1、在本地文件夾E:\MyWeb下面的空白處,按右鍵選「新建文件」,這樣就建好了一個頁面,默認的文件名為untitled.htm。htm就表示這個網頁文件是一個靜態的HTML文件。給它改名為index.htm。
***網站第一頁的名字通常是index.htm或index.html。其它頁面的名字可以自己取。
2、雙擊index.htm進入該頁面的編輯狀態。在標題空格里輸入網頁名稱,按右鍵選頁面屬性,打開「頁面屬性」窗口。在這里可以設置網站的標題、背景顏色或背影圖像,超級鏈接的顏色(一般默認即可),其他都保持默認即可。
3.此時游標位於左上角,可輸入一句話,如「歡迎來到我的主頁」。選取文字,用菜單「窗口/屬性」打開屬性面板,選取文字大小為6,再使文字居中,然後在文字前用幾個回車使其位於頁面中間。
4.如要選取字體,則選擇字體中的最後一項:編輯字體列表。然後在對話框中選+號,接著在「可用字體」欄中選擇需要加入到字體列表中的一種字體,點擊中間的按鈕就可以加入了。
***在網頁上最常用的是宋體字。不要將特殊的字體加到列表中使用,因為別人電腦上未裝就看不到。如果需要用的話,要做成圖片後再使用。
***在網頁上打入空格的辦法是:把輸入法調為全形。
***在網頁上換行的辦法是:shift+Enter。只按Enter則為換段。
三、為頁面添加圖片
1、在本地文件夾E:\MyWeb下面的空白處,按右鍵選「新建文件夾」,這樣建立了一個文件夾,用它來放圖片,可以改名為tu或pic或images都可以。
2、用菜單「窗口/對象」打開對象面板,點擊「插入圖像」,在對話框里選要插入的圖片。如果會出現對話框:「你願意將該文件復制到根文件夾中嗎?」,必須選「是」,然後將它保存到剛建好的文件夾里。
3、選中該圖片,打開屬性面板,可以在上面為圖片取名,重新設置圖片的高、寬,拖住圖片角上的點可以變大小。按住shift鍵,再拖動角上的點,可以使圖片保持寬高比例拉伸。如要恢復這原始大小,則單擊右下角的「重設大小」按鈕。
4、 「鏈接」可以直接在這里輸入地址。「替代」是圖片的說明,即滑鼠指向圖片所顯示的文字;「邊框」是圖片邊框寬度,「對齊」是對齊方式。
四、添加超級鏈接
1、為文字添加鏈接。
比如,在頁面上輸入「我的文章」,然後將其選中,打開屬性面板,在「鏈接」一格中,選擇它所要鏈接到的頁面即可。後面一格「目標」我們一般常用的是self即打開的新窗口代替了現開的窗口;或是選擇blank即打開新窗口。
2、為圖片添加鏈接
與上面文字的鏈接同理,插入圖片,然後在屬性面板中的鏈接一格中選擇即可。
****圖片可以創建不同的多個鏈接。方法如下:
在屬性面板中的「地圖」一項下面有一些圖形,比如點擊方形,游標變成十字,在圖片上畫一個藍色矩形的熱區,此時在屬性面板上可以為這個熱區設置鏈接地址,滑鼠指向會顯示。同樣,再用圓形設置一個熱區,就可以再為該圖片設置其他鏈接了。
3、添加E-mail鏈接
選中需要添加E-mail鏈接的文字或圖片,打開屬性面板,在「鏈接」一格中輸入填寫郵件地址。格式如下:mailto:郵件地址。注意中間不空格。
4、如果鏈接到瀏覽器無法打開的文件,例如exe、Zip等文件,那麼瀏覽者在點擊這個鏈接的時候,就會實現文件下載、或是在線播放的功能。
五、表格的使用
1、點擊插入/表格,打開表格面板進行設置。行數、列數、寬度、邊框等,「單元格填充」為單元格內側與內容的距離;「單元格間距」為單元格之間的距離,單位均為像素。
2、插入表格後,在表格的邊框上點擊一下,可以全選整個表格。然後在下面的屬性面板里可以進行各種設置。
3、把游標移到其中一個單元格,此時看到的屬性面板,就是單元格的屬性面板。也可以進行各種關於單元格的操作。如背景色、背景圖、邊框、合並、拆分等。
六、關於表格的其他操作
一製作細線表格 原理:
1、選中整個表格,設置其背景為黑色(該顏色即表格線的顏色)。
2、選中所有單元格,設置其背景為白色。
二自動格式化表格
1、先製作好一張表格,然後選中。
2、選菜單中的命令/格式化表格。即可以其中選擇預設好的一些表格樣式。
三一像素分割條
1、插入一個1行1列,寬為200像素,邊框邊距均為0的表格。
2、選中表格,設置表格高為1像素,並設置一個背景色(即所要的線條顏色)。
3、切換到代碼和設計窗口,將代碼<td> 刪除。
七、用表格構建完整的頁面
一網頁頂部(一般包括圖標、廣告、導航菜單)
1、創建一個1行2列,寬為760像素,邊框及邊距均為0的表格。
2、選中表格,設置排列方式為居中對齊,背景色為#3366CC。
3、將游標置於左邊單元格中,設置其水平排列為左對齊,垂直排列為頂端對齊,然後插入一張圖像,一般在此插入的是網站的圖標,即logo。
4、將游標置於右邊單元格中,設置其寬度為500,水平排列為居中對齊,垂直排列為中間,然後插入圖像,一般是網頁廣告,即banner。
5、將游標置於剛完成的表格之後,插入/表格,創建一個1行1列,寬為760像素,邊框及邊距均為0的表格。
6、選中剛創建的表格,設置排列方式為居中對齊,背景色為#005173。
7、在該表格中依次插入多個圖像,作為導航條菜單。
二網頁中部(左邊欄目列表、中間網站新聞、右邊欄目列表)
1、 在導航條表格後面,插入/表格,創建一個1行3列,寬為760像素,邊框及邊距均為0的表格。並設置排列方式為居中對齊,背景色為#FFFFFFF。
2、 將游標置於左邊單元格中,設置其寬度為18%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入一張圖像,插入一個導航條。
3、 將游標置於剛插入的圖片後,插入/表格,插入一個12行1列,寬為90%的表格。設置其單元格間距為1,背景色為#CCCCCC。
4、 將游標放在表格第一個單元中,設置其高為20,背景色為#FFFFFF。插入/圖像,插入一個導航文字前面的小點。同樣設置其他11個單元格,這樣左邊的欄目分類列表就完成了。
5、 將游標置於主體表格的中間單元格中,設置其寬度為66%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入/圖像,插入一個導航條。
6、 將游標置於圖像後,插入/表格,插入一個4行1列,寬為95%的表格。設置其單元格間距為1,背景色為#CCCCCC。
7、 將游標置於表格的第一個單元格中,拖動滑鼠,將4個單元格都選中,設置高為60,背景色為#FFFFFF。
8、 將游標置於主體表格右邊的單元格中,設置其寬度為16%,水平排列為居中對齊,垂直排列為頂端對齊,插入/圖像,插入一個導航條。
9、 將游標置於圖像後,插入/表格,插入一個7行一列,寬為90%的表格。設置其間距為1,背景色為#CCCCCC。
10、按住Ctrl鍵,用滑鼠點擊剛插入的表格的第1、3、5、7單元格,然後設置它們的高為55,背景色為#FFFFFF。
11、選中第2、4、6單元格,設置其高為6,背景色為#FFFFFF。
12、切換到源代碼窗口,將第2、4、6單元格中的空格符號「 」刪除。
三網頁底部(一般包括版權信息及其他相關內容)
1、 將游標置於主體表格後,插入/表格,創建一個2行2列,寬為760像素,邊框及邊距均為0的表格。
2、 選中表格,設置排列方式為居中對齊,背景色為#3366CC。
3、 將游標置於表格第1行的左邊單元格中,設置其寬度為50%,水平排列為默認,垂直排列為基線,背景色為#FFFFFF,然後輸入版權信息,內容顏色隨便。
4、 將游標置於表格第1行右邊單元格中,插入/圖像,插入一個圓角圖像,在它後面輸入Email字樣,設置其大小和顏色為1和#FFFFFF。
5、 插入/表單對象/文本域,插入一個文本域,寬度可以隨意。
6、 插入/圖像,插入一個GO的圖像。
7、 設置頁屬性。點擊菜單修改/頁面屬性,在標題一欄中輸入標題,並選擇背景圖像,將頂部邊界設為0。
***將整個網頁分部分放到不同的表格中組合而成,還可以加快瀏覽器讀取頁面的時間。;因為瀏覽器是讀完整個表格後才顯示內容的,所以最好不要框在整個一個表格中。
八、用布局表格構建完整的頁面
1、 單擊插入/布局,裡面的布局視圖按鈕,就切換到布局視圖狀態(默認為標准視圖)。也可以用菜單里的查看/表格視圖/布局視圖來進入。
2、 先單擊繪制布局表格按鈕,然後在頁面中像繪圖一樣創建出布局表格。
3、 就像上一個例子一樣,先繪制好網頁的頂部,再中部,再底部的大表格。
4、 再單擊繪制布局單元格按鈕,然後在已經繪制好的布局表格中,再繪制布局單元格。
5、 返回到標准視圖,在已經劃分好的表格里,再插入嵌套的小的表格,把頁面再細化,就可以完成整個頁面的設計了。
****注意把整個頁面都放在一個大的布局表格中,因為這樣的網頁瀏覽速度會很慢。應該按照頁面的版面和內容劃分出幾個布局表格,然後在其中分別插入布局單元格。

九、層的使用
1、點擊插入/層。也可以點擊圖標,然後拖動滑鼠創建出一個層。
3、選中創建的層,看屬性面板。「層編號」和「標簽」都使用默認即可。「層編號」是編程時需要用的,我們現在一般不用。「上」即距頁面上邊界的距離;「左」是距左邊界的距離。「z軸」是層的順序,數字大的疊加在數字小的上面。
****如不設置顏色時,層是透明的。
4、點中層左上角的小方框可以隨意拖動層,大小也可以調節。
5、「溢出」一欄中,當文字多於層的大小時,visible(超出的部分照樣顯示)、hidden(超出部分隱藏)、scroll(不管有否超出,都顯示滾動條)、auto(有超出時才出現滾動條)。
6、點擊菜單窗口/其他/層,此時將出現層管理窗口。可以在其中修改層的名稱和Z軸值,也可以點擊眼睛圖標使層可見或不可見。還有一個防止重疊的選項。
7、層的對齊。按住shift鍵,同時選中幾個層。然後用修改/對齊,用這里的選項。
8、嵌套層。⑴首先在文檔中插入一個層。⑵將游標置於該層內,然後繼續插入一個層,就得到了嵌套層。⑶裡面的叫子層,外面的父層。它們的Z軸順序是一樣的。拖動父層時,子層也會相對移動。移動子層時,父層不會隨之移動。
十、了解時間軸
1、點擊菜單中的插入/層,插入一個層。
2、在層中插入圖片,如一張飛機的圖片。(這里的圖片也可以是一張小動畫的.gif圖像)
3、點擊菜單中的窗口/其他/時間軸,打開時間軸窗口。
4、選中頁面上創建的層,用滑鼠按住層左上角的小方框圖標,將層拖放到時間軸的第1幀中。這時自動創建了一個長度為15幀的時間軸。
5、選中時間軸上的第1幀,將頁面中的層拖放到頁左上角,即動畫開始時的位置。
6、選中時間軸上第15幀,可以拖動該幀至任意長度,如30幀。
7、選中第30幀,將層拖放到頁面的右下方,此時窗口中顯示出層從第1幀到第30幀的運動軌跡。(此時運動為直線)
8、可以點中第15幀,右鍵選「增加關鍵幀」,在選中第15幀的狀態下,拖動層到頁面中下方。
9、勾選「自動播放」項。
十一、製作滾動公告牌
1、在頁面上插入一個層,然後為層設置一個背景,作為公告版的框架。
2、然後在創建的層中插入嵌套層,將嵌套層移動到父層的下方。
3、在嵌套層中輸入文本,並將其居中排列。
4、打開時間軸面板,將子層作為對象添加到面板中。
5、為子層創建一個向上移動的路徑,將其移動到父層的上方。
6、拖動最後一關鍵幀,增長動畫時間,然後勾選「自動播放」和「循環」兩項。
7、選定父層,在其屬性面板中將「溢出」屬性設置為「hidden」。
十二、在頁面中運用flash動畫
1、點擊插入中的Flash按鈕,即可為頁面插入一個動畫。也可以選菜單插入/媒體/Flash來完成這一步。
2、選中已插入的動畫,看屬性面板。這里可以設置它的寬、高,也可以通過拖動來改變大小。
3、可以在這里點擊「播放」來預覽動畫。
十三、讓插入的flash動畫變透明
1、當網頁上已經有背景,或是想要在一張圖片上再插入flash動畫,而flash動畫本身也有背景色,所以會影響美觀,這時我們要把它做成透明動畫。
2、如在頁面上插入一張圖像。
3、在圖像上插入一個層,在層中插入好所需要的flash動畫。
4、選中flash動畫,在屬性面板中點擊「參數」按鈕。
5、在「參數」的左面一格輸入「wmode」。在右面「值」一格輸入「transparent」。
十四、在頁面中播放聲音
1、在完成全頁面以後,如果要為該頁添加背景音樂,注意背景音樂一般是*.midi文件,這樣的聲音文件十分小,易於快速下載,其他格式不適合作為背景音樂。
2、在頁面中所有表格之外,(注意此時編輯窗口左下方的標簽選擇欄中僅顯示<body>這一項,或是在左下角點一下<body>,這樣才能保證這個行為是添加在整個頁面上的)。點擊行為窗口上的「+」按鈕,(或用菜單 窗口/行為,打開行為窗口。)
3、從彈出菜單中選擇「播放聲音」。打開一個對話框。
4、在這個對話框里用「瀏覽」選擇要播放的聲音,並確定。
5、這時行為面板上自動顯示了事件為onload,動作為播放聲音。點擊這一行,中間出現一個按鈕。點擊按鈕,可以設置這個聲音在什麼事件下播放。可以選擇「顯示事件」/「IE5.0。
6、我們常用的如Onload(當頁面載入時)、OnClick(單擊滑鼠)、OnMouseOver(滑鼠移到對象上)、OnUnload(當關閉頁面時)等。
7、該行為也可以設置在圖片上、文字鏈接上。在文字鏈接上播放聲音之前,先為文字添加一個空鏈接,即選中文字,在鏈接一格里輸入一個「#」符號。
十五、彈出窗口
1、首先製作一個准備在小窗口中顯示的頁面(比如a.htm),由於這個彈出窗口不能太大,所以內容要少一些。
2、打開一個製作好的頁面,把游標移到頁面中所有我表格以外,點擊行為窗口上的「+」按鈕,從彈出菜單中選擇「打開瀏覽器窗口」一項。
3、在對話框中里輸入相應的設置。要顯示的URL即a.htm,窗口寬度和高度自己定,單位為像素。屬性中的各項參數需要就打勾。
4、設置完畢後,點「確定」。此時行為窗口中將顯示打開瀏覽窗口這個行為,觸發條件為Onload,如果不是要這項,就自己設置。
5、該行為也可以設置在圖片上、文字鏈接上。。
6、可以用這個方法來表示對瀏覽者的打開時的歡迎、網站公告、離開時的告別語等。
十六、控制狀態欄信息
1、打開頁面,選中一張圖片。
2、點擊行為窗口上的「+」號按鈕,選擇設置文本/設置狀態條文本。
3、在對話框里的「消息」一欄里,輸入需要顯示的話,如對這張圖片的介紹。
4、可以設置行為的觸發條件為OnMouseOver(滑鼠移到對象上),這樣當滑鼠經過這張圖片的時候,狀態欄將出現相關的信息。
5、如果需要滑鼠在移開後,這個信息消失,那麼再次使用這個行為,在「消息」一欄里什麼都不寫,然後把觸發條件改為OnMouseOut(滑鼠移開)。
6、同樣可以在一段文字上設置該行為。或是設置在整個頁面上也可以。
十七、彈出信息
1、打開一個製作好的頁面,點左下角<body>項。點擊行為窗口上的「+」按鈕,從彈出菜單中選擇「彈出信息」一項。
2、在設置窗口中「消息」一欄里輸入想顯示的消息即可。
3、觸發條件設置為Onload(當頁面載入時),就可以用來作為打開頁面的歡迎信息。如設為OnUnload(當關閉頁面時),就可以作為用戶關閉頁面時送別信息。
4、也可以在某一段文字上設置彈出信息。比如一段文字不願讓人復制,就選中整段文字,注意此時左下角顯示〈P〉,即段落。
5、然後同樣操作,消息可以輸入版權之類的語句。只是設置觸發條件為OnBeforeCopy(按右鍵時觸發),或OnCopy(按右鍵選復制時觸發)。
十八、動態圖片按鈕
1、准備好兩張同樣大小的圖片,常用的方法是如一張為灰度照片,一張為彩色照片。或一張是按鈕凹下的樣式,一張是按鈕凸起的樣式。
2、舉例:插入一個3行1列的表格,設置寬度為180像素。
3、將游標置於第一行,插入一張灰度的圖片。
4、在屬性面板中「鏈接」一欄里輸入需要鏈接的地址,並給圖片加上名稱,如tu1.
5、點擊行為窗口上的「+」按鈕,從彈出菜單中選擇「交換圖像」。
6、此時在「圖像」一欄中已顯示要交換的圖像,然後在「廟宇原始檔為」一欄里選擇好交換後的那張圖。
7、下面有兩個參數,「預先載入圖像」和「滑鼠滑開時恢復圖像」,都要選中。
8、同樣方法創建另外兩個動態按鈕。
十九、用框架布局頁面
框架由兩個主要部分組成——框架集和單個框架。
1、 點擊插入中的框架,即顯示出已定義的13種框架的樣式。我們上—中—下結構為例。
2、 點擊「上—中—下」框架結構的圖標,此時在頁上插入上下兩個框架,將整個頁面分割成了3部分。我們分別在上面輸入「上」,在中間輸入「中」,在下面輸入「下」。
3、 先保存一下。點擊菜單中的文件/保存全部。這時首先保存框架集文件,可以自己修改名字,如kuangjia.htm。然後將分別保存框架集中的其他頁面。在保存對應的頁面的時候,該部分會以虛線框起來,這樣可將上面部分保存為shang.htm。下面部分保存為xia.htm。中間部分保存為zhong.htm。
4、 至此,我們保存了四個頁面,分別是框架集,和組成框架集的上、中、下三個頁面。所以,其實這個框架是由四個頁面組成的,所以用框架會降低一點用戶瀏覽的速度。
5、 點擊窗口/其他/框架,打開框架的面板。在這里單擊某個框架,即可選中該框架。當框架被選中時,編輯窗口中對應的框架出現虛線。
6、 如:選中上面topframe,此時屬性面板上顯示的是上面這個框架的屬性。同樣選中中間框架和下面框架,也可以分別設置它們的屬性。
7、 在編輯窗口中,將滑鼠放在兩框架之間的邊框上,游標將變成上下箭頭形,此時點擊邊框,選中的是整個框架集。
8、 此時屬性面板上出現的是整個框架組的屬性。可以在此設置框架集是否有邊框、寬度及顏色等。不過最為重要的是可以在這里設置框架集中各個框架的大小。
9、 在屬性面板的右面的圖示上選中上面框架,設置它的行為80像素,邊框為0。
10、選中下面框架,設置行高為30像素,邊框為0。
11、選中中間框架,設置行高為1,單位為相對。(相對的意思是:當前行相對於其他行所佔的比例。設為1就是指占據除上和下以後的所有瀏覽窗口剩餘空間。
12、舉例:將游標置於上面框架topFrame上,右鍵選頁面屬性,設置背景色為#FF6600。然後插入/表格,插入一個1行2列,邊框邊距都為0的表格。設置第1個單元格的寬度為116像素,然後插入一張圖片。將第2個單元格設置為水平對齊方式為居中,垂直排列方式為底部,然後依次輸入「獅子座」、「魔蠍座」、「雙子座」字樣。
13、將游標置於中部框架mainFrame中,右鍵選頁面屬性,設置背景色為#FFFFCC。然後插入一張大圖像。
14、將游標置於下面框架bottomFrame中,右鍵選頁面屬性,設置一個背景圖像。
15、另外做好三個頁面,作為「獅子座」、「魔蠍座」、「雙子座」所要鏈接的頁面。
16、選中「獅子座」,在屬性中為它設置好要鏈接的頁面,然後在「目標」里選「mainframe」,即該內容在中間那個框架中顯示。
17、同樣設置「魔蠍座」、「雙子座」的鏈接。
二十、跳轉菜單
1、 點擊主菜單中的插入/表單對象/跳轉菜單,也可以用插入/表單,中的跳轉菜單圖標,來調出跳轉菜單設置窗口。
2、 首先在「文本」一欄里輸入「請選擇相關網站」字樣。然後點擊窗口上的「+」號按鈕。這時菜單里多了一個選項,這個選項沒有鏈接,僅作為跳轉菜單的說明文字。
3、 在文一欄里輸入需要的網站,如「新浪」,然後在「選擇時,前往URL」一欄里輸入網站鏈接地址http://www.sina.com.cn,此時,菜單項一欄里又多了一個選項,這個選項對應一個網的鏈接地址。
4、 使用同樣方法,在菜單中添加其他一些選項及對應的鏈接。還可以用「上」「下」的按鈕,來調整它們的順序。
5、 設置窗口的「菜單之後插入前往按鈕」一項先不要選擇。選中「更改URL後選擇第一個項目」一項,這樣當使用跳轉菜單到某個頁面後,如果返回到跳轉菜單頁面,此時頁面中的跳轉菜單默認顯示的依舊是第1項內容。
6、 設置完畢後點擊「確定」即可。
****因為跳轉菜單是一個表單,所以其實是先插入了表單(紅色虛線區域),然後在表單中再插入了下拉菜單。
7、 想修改選項,可以選中頁面上的下攔菜單,此時點擊屬性面板中的「列表值」,即可修改各項內容了。
8、 當選中跳轉菜單時,行為窗口中也出現行為。雙擊該行為,也可以進入設置窗口,可以重新對其進行設置。
9、 如果「菜單項」里的第一項就是鏈接,而不是上面所說的一句提示的話,那麼就要選中「選項「中的「菜單之後插入前往按鈕」。添加一個「前往」按鈕。
網頁製作詳細教程:http://www.cr173.com/html/27216_1.html

5、網頁是如何實現的,Web UI設計理論入門教程

一、學習HTML5和CSS3基礎
隨著這移動互聯網快速發展的時代,尤其是4G時代,HTML5+CSS3已然成為新一代的web前端技術。
隨著HTML5的發展和普及,了解 HTML5 也將成為 Web開發人員的必修課。涉及到網頁外觀時,就需要學習 CSS 了,它可以幫你把網頁做得更美觀。
利用 HTML5 和 CSS3 模擬一些你所見過的網站的排版和布局(色彩,圖片,文字樣式等等)。
當然,遠標Web前端開發課程第一階段還會學習 PS設計工具使用和互聯網UI設計理論。
二、學習Java,了解DOM
Java 是一種能讓你的網頁更加生動活潑的程序語言。學習 Java 的基本語法,學會用 Java 操作網頁中 DOM 元素。
Web前端開發課程第二階段完全可以實現大家平常喜歡玩的 2048 游戲。(是不是感覺挺有意思)
接著學習使用一些 Java 庫,比如 Jquery 是大部分 Web開發人員都喜歡用的,通過 Jquery 可以有效的提高 Java 的開發效率。
三、學習Web前端核心
學習 Jquery 之後,大家就要學習 HTML5 高級階段(HTML5 Canvas 繪圖、HTML5 SVG、音頻和視頻處理、表單處理、表單驗證...等)
四、學習HTTP協議及Server端技術
伺服器端腳本編程(後台開發)也是Web開發人員的基本功之一。
要構建動態頁面通常會使用到資料庫,通常PHP使用Oracle、MySQL資料庫。
對於Web伺服器來說,Apache 一個就已經是了。那麼Apache、php、資料庫,該怎麼理解它們的關系?
1、Apache是伺服器基礎,php和資料庫都需要Apache來協調工作
2、php是腳本解釋,如果不用php,那麼Apache出來的東西就只是靜態的,而不能在伺服器實現功能
3、資料庫完全可以單獨使用,但是和Apache、php一起,則是由php代碼調用資料庫介面,而apache就負責解釋php代碼,讓他能真正地實現對資料庫的調用
五、學習Web前端高級技術
當你掌握了HTML5,CSS3,Java等技術之後,就應該找一個Web框架加快你的Web開發速度,使用框架可以節約你很多時間。
學習的Bootstrap是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVA 的,它簡潔靈活,使得 Web 開發更加快捷,是web前端開發者最喜歡,也是現在企業里最常用的前端框架。
Angular JS是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS有著諸多特性,最為核心的是:MVC編程、模塊化、控制器、路由、事件綁定等等。
AngularJS通過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣,這也會損失一部分靈活性。換句話說,並不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是,至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建,就得了解什麼不適合用AngularJS構建。

6、求ps網頁設計視頻教程全集下載

給你推薦個網站吧,上面有很多學習視頻資源,很詳細,講的也很到位,各種軟體學習資源都有,[url=http://www.51zxw.net/study.asp?vip=5214386]51自學網-專業培訓老師錄制的視頻教程,讓學習變得很輕松[/url]。。。真的不錯啊。

7、用Photoshop做網頁設計圖的教程有哪些

photoshop是處理圖片的軟體,並非做網頁的。
網頁需要格局,代碼等。如果只是拿PS做一張圖,再用firework去隔,會很簡單,很枯燥的。
再學學dreamweaver

8、急!求一套完整的 html+CSS+javascript 的網頁設計教程!

http://www.youku.com/playlist_show/id_1095101.html
這個是張孝祥講的視頻專輯,裡面的視頻都是。標題內是JavaScript視頻教程,但是容我看了裡面前一半都是講html+css的,很適合你。

如果想要文字教程的話,還是數最經典的網站:
http://www.w3school.com.cn/,裡面網站所有的知識都有了,很有條理很詳細,又可以在線演習代碼。

9、從入門到精通v6手把手叫你做網站教程6怎麼建網站

網站來建設是指使用標識語言自(markup language),通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說,網頁設計的目的就是產生網站。簡單的信息如文字,圖片(GIF、JPEG、PNG)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。而更復雜的信息如矢量圖形、動畫、視頻、聲頻等多媒體檔案則需要插件程序來運行,同樣地它們亦需要標示語言移植在網站內。

網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。不同領域的網頁設計、網頁圖形設計、界面設計、創作,其中包括標准化的代碼和專有軟體、用戶體驗設計和搜索引擎優化。許多人常常會分為若干個工作小組,負責網站不同方面的設計。網頁設計是設計過程的前端(客戶端),通常用來描述的網站,並不是簡單的一個頁面,一個網站是包括很多工作的,其中包括域名注冊、設計效果圖、布局頁面、寫代碼等工作。

與網頁圖片設計教程相關的知識