您現在的位置是:電腦技術吧?>? 組裝維修 ??>??漂亮的網頁,漂亮網頁二級頁面??>??正文詳情

漂亮的網頁,漂亮網頁二級頁面

同俊馳2019-11-30 10:22:05 人圍觀
簡介漂亮的網頁排版總有人炫耀他們的PS(Photoshop)技術。看來飛機需要用PS來制作,所以很多網頁設計師也會用PS來制作平面圖,然后切割出導覽圖,再制作網站。今天,我要講的最新網頁

總有人在那里炫耀自己的ps(photoshop)技術,好象是平面就要用ps做,結果很多做網頁的設計師也用ps做平面圖然后切割導圖,再做網站,今天我就來說說用fireworks一樣可以做出好的網頁設計,只要你有心!  先看最終效果圖:

  下面開始講解:  1.布局  先來說一下 我們制作網頁一般的大小  高度:沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件占了半個屏幕,所以高度沒有確切值。

  寬度:  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安全一點。

  如果是800的分辨率一般都設成770。

  這些需要明白并且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化 所以 800的分辨率一般設定760左右,1024的設定990左右.

  我這樣用輔助線和標尺把大概范圍劃分出來,注意我的劃分,正好是770,和1000的地方,應為我要做的網站是1024分辨率下的,但是考慮到依然可能存在800分辨率的用戶,所以我回把主要的內容和菜單都放置在770以內,770-1000的地方放一些輔助的東西,這個習慣特別是在做一些門戶網站設計的時候更要考慮以下,畢竟改善用戶體驗也是我們要考慮的問題.  2.開始工作  我們繼續講解,現在我們來畫上部菜單部分的內容,其實很簡單拉,就是畫一個方框,一個圓,然后組合,加上漸變就可以了,如下圖設置

  3.下面我們來畫哪個類似徽章的東西  其實也很簡單,創意是類似獎狀上貼的哪個獲獎標志一樣,會讓網站生動一點,嘿嘿.  我們選擇多邊形,如圖:

  設置如下,繼續貼圖,大家要注意一下圖層順序,拖動到下層就好了

  恩 要注意,這個圖層我們固定了以后通常就不動了,所以要鎖定,不然鼠標晃來晃去很容易把圖移位,注意圖層那里點一下就多了一個小鎖子,方便吧,這下他就徹底不干擾我們了!

  好的我們繼續,其實其他的東西都大同小異  我們來研究一下細節.  我最喜歡的就是firewroks超級多的紋理,在ps里面有些紋理要自己做真的好麻煩啊!  我最喜歡的對角線,恩  看頁面左邊的漸變部分,其實就是拉出來了一個矩形,然后加上線性的漸變,然后加上對角線的紋理,稍微調整一下透明度,就這么簡單,效果卻很好看,嘿嘿

  下一個小地方,就是產品資訊的背景框,其實也很簡單  就是一個矩形,然后外框為紅色,矩形加一個內部發光,發淺灰色的光,就這樣就成了

  下一個地方 就是右上角大家可以看到一個類似網格的底紋  其實就是一個矩形,再加上一個蒙版,一個漸變,就ok了,現在看起來是不是生動很多,嘿嘿  OK,看圖

  就這樣一個網站的平面設計三下五除二的就搞定了,嘿嘿,怎么樣fireworks方便不!  OK,今天就到這里,再欣賞一下我們的作品吧,不錯吧!

版權聲明:本文由 同俊馳 整理編輯。

原標題:網頁越做越漂亮,漂亮的網頁界面

轉載注明出處:http://www.dn9ww09s.icu/assemble/14918.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 網頁模板,個人網頁模板

    網頁模板,個人網頁模板 相關圖片個人主頁模板在焰火或Photoshop中設計的網頁渲染需要導入Dreamweaver進行布局。在導入到Dreamweaver之前,可以使用焰火對渲染進行切片和優化,然后可以個人網站模板...

  • 金屬刀具,適合做刀具的金屬

    金屬刀具,適合做刀具的金屬 相關圖片金屬切削原理與刀具其實方法比較簡單,也沒有花哨的制作方法。我知道金屬可以做到這一點。如果我有時間,任何人都可以做一個漂亮的男人。首先看最后的效果:1。用鋼筆工具畫出...

  • 沙灘美女背景真實照片,美女照片背景好看的

    沙灘美女背景真實照片,美女照片背景好看的 相關圖片背景美女真實圖片首先看效果圖:首先是材質圖,用鋼筆勾選,然后將其轉換為選擇框,并使用字符作為材質。如果勾選不好,可以將背景的主要部分羽化到邊緣旁邊。在畫布上輸入字...

  • 表情包制作教程,表情包制作

    表情包制作教程,表情包制作 相關圖片微信表情包制作方法人的面部表情可以表現出成千上萬、無數、非常細膩的表情,表情的變化非常迅速、敏捷、細致,能夠真實準確地反映情感,傳遞信息。各種情緒的表情,最能吸引...

  • 邊緣破損的隱形,隱形邊緣破損什么情況

    邊緣破損的隱形,隱形邊緣破損什么情況 相關圖片瓷磚邊緣破損本教程是關于煙花筆工具簡單鉤圖像破碎邊緣的一個簡單教程。窗紗邊緣破損了怎么補...

  • ps制作燃燒效果,ai制作火焰燃燒效果

    ps制作燃燒效果,ai制作火焰燃燒效果 相關圖片ae制作火焰燃燒效果現在焰火MX的新功能提供了強大的像素圖像處理能力。盡量使用涂抹和脫鹽工具,使燃燒效果,這也是非常好的。下面是煙花教程制作的一個示例:燃燒效果制作的示...

  • 紅墻一號有什么作用,紅墻御

    紅墻一號有什么作用,紅墻御 相關圖片紅墻一號官網一。首先創建一個寬800高310的文件(我這樣做D,你也可以自由設置)。畫一個文件大小相同的矩形。屬性為:填充(灰色)填充類別:(線性漸變)。在斑點效果斑點處添...

  • 實例教學,課堂上用實例是案例教學嗎

    實例教學,課堂上用實例是案例教學嗎 相關圖片常用的八種教學方法在網頁中插入電影有兩種方法,一種是沒有播放器界面,另一種是有播放器界面。這兩種發布方式都不需要復雜的程序代碼,也不需要深刻的編程。以下是幾分鐘內...

  • 可愛小兔子的捏法,捏小兔子教程

    可愛小兔子的捏法,捏小兔子教程 相關圖片簡單畫可愛小兔子這些天,我們在玩flash游戲娛樂自己。以我的業余時間水平,我得慢慢地磨練。半年過去了,我還沒做完。但現在,有時間做你喜歡做的事很好。本教程主要是總結一些...

  • 立體的怎么做倒影,制作倒影

    立體的怎么做倒影,制作倒影 相關圖片倒影怎么做首先,放大圖像,使用多邊形選擇工具精確地扣圖像,選擇扣部分并垂直旋轉,然后右鍵單擊以變形-平行扭曲工具調整位置。如果無法確定位置的精度,可以將零件設置為稍...

熱評文章

  • 氙氣大燈更換燈泡教程,更換h7燈泡教程

    氙氣大燈更換燈泡教程,更換h7燈泡教程 相關圖片9005燈泡首先,看最后的效果:第一步:畫一個圓形的玻璃泡泡。一。畫一個88*80大小的橢圓,不填充。筆劃邊緣,然后用鋼筆添加定位點。位置如下(盡量對稱)。2。然后使用一些大燈...

  • 飄逸的彩帶,飄逸的絲帶

    飄逸的彩帶,飄逸的絲帶 相關圖片如何用PS制作飄舞的彩帶煙火筆畫流淌紅絲帶的整體效果:絲帶飄逸的圖片...

  • 的光澤,什么的光澤

    的光澤,什么的光澤 相關圖片光澤資訊昨天,一種新的膠囊被研究。這種膠囊可以增強熒光燈在制作圖形時的光感能力。這不是欺騙。如果你不相信這一點,你應該首先考慮視角問題。不過,這個膠囊比上次用藍色...

  • 沖擊波特效,沖擊波特效素材

    沖擊波特效,沖擊波特效素材 相關圖片ps沖擊波特效在本節中,我們將學習一種簡單但非常直觀的效果——沖擊波效果。它很簡單,因為它使用的技術只是掩模的基本應用。讓我們看看這個效果是如何實現的。創建一個新文件...

  • 隨節奏跳動的小球,ppt跳動的小球怎么做

    隨節奏跳動的小球,ppt跳動的小球怎么做 相關圖片js實現小球跳動現在flash已經覆蓋了網絡的方方面面,很多人都想在看了網絡動畫后學習,大部分的網絡視頻,課程都很枯燥,你記不起來了,這次可以和編輯一步步來做。今天,我想帶...

  • flash播放器手機版,flash播放器安卓版

    flash播放器手機版,flash播放器安卓版 相關圖片swf播放器Adobe PHP? /Flash player / target flash player. This is aflash播放器手機下載安裝...

  • 常見爆炸,常見的爆炸有幾種

    常見爆炸,常見的爆炸有幾種 相關圖片爆炸類型爆炸是一種動作劇烈、速度極快的突發狀態。動畫電影主要從三個方面描述爆炸場景。一。強烈的散光。2。各種爆炸物。三。爆炸時產生的煙。強散光效果一般需要8-12幀圖像爆...

  • flash下載不了怎么辦,為什么下載不了flash

    flash下載不了怎么辦,為什么下載不了flash 相關圖片flash插件下載了沒用A:可能是你電腦IE瀏覽器的安全級別太高,ActiveX控件和彈出窗口被禁止,或者你安裝了雅虎助手等IE插件。請暫時降低IE瀏覽器的安全級別,允許ActiveXflash軟件怎么下載...

  • flash卷軸展開動畫,ppt圖片卷軸展開動畫

    flash卷軸展開動畫,ppt圖片卷軸展開動畫 相關圖片卷軸動畫制作過程北京奧運會開幕式上的詩情畫意的畫卷和它呈現給我們的美麗畫卷,至今仍記憶猶新。今天,我們將用flash制作一個水墨卷軸展開的詩意動畫,主要使用矩形工具和漸變...

  • Flash制作,flash怎么制作

    Flash制作,flash怎么制作 相關圖片flash動畫的制作流程效果展示:1。創建一個空白的flash文檔,將背景顏色設置為黑色和其他默認值。2。單擊文本工具,選擇字體和大小,將填充顏色設置為紅色,然后在舞臺上閃爍以調...

關注微信

变脸官网查询