如何利用ps和DW輕鬆製作網頁?製作的具體方法

2021-01-14 太平洋電腦網

今天PConline小編為大家帶來的是如何利用ps和DW輕鬆製作網頁 ，看那密密麻麻的網頁導航，想來製作網頁也不太簡單，那怎麼讓製作網頁變得簡單起來呢?有興趣的朋友一起往下看看吧!

PS3模擬器軟體版本：中文版遊戲娛樂立即查看

DW軟體版本：1.0.1iOS軟體立即查看

只需要兩個軟體： ps 和 Dreamweaver !

效果圖：

我們需要先製作背景圖片。也就是網頁背景那塊藍色的部分。我們需要單獨做出來。

新建一個1920px*400px的文件

我們拉一個一個藍色(#506dbb)到白色的一個漸變

效果圖

然後我們保存這張圖片為gif格式

這時候我們新建一個

1000*800的文件

我們把網頁效果圖製作出來。這裡都是用到ps製作的。沒有寫任何代碼。這個過程我就不講了

大家製作好網頁效果圖完成的時候一定要注意把網頁背景圖層刪掉，保持透明

下一步我們使用切片工具。把頁面進行切片。如下圖所示

注意每一個連結都要切片一下。切片工具和矩形選區工具一樣，拉一下就是一個切片

為了區分我這裡加了背景。我們一會一定要記得去掉

我們再使用切片選擇工具選擇單個切片。然後右鍵

我們再逐個為切片添加連結

注意。我們上面的加的黑色背景一定要記得去掉

我們現在保存為web所用格式

我們把這裡選擇png—8

保存

相關焦點

  • 無錫網頁設計培訓,DW+PS,全面學習
    PC端頁面製作利用Dreamweaver系統的介紹HTML各類標籤運用和網頁的設計製作技巧，包括HTML中文本、圖像、多媒體、超連結、表格、框架、層、CSS樣式、模板、庫和表單的使用、網頁JavaScript腳本的調用等。電腦網頁設計-利用div+css編寫完成多個商業網站的製作。
  • 如何利用Word製作學生考試座位號?具體方法分享
    如何利用Word製作學生考試座位號？很多老師在考試前都要給同學們安排考場座位，為了方便學生查看，可以為每位同學製作考試座位號。這個該怎麼製作呢？下面我就來教給大家具體的方法，大家也可以先看一下下面的效果圖：具體方法：第一步：新建標籤打開空白文檔，點擊郵件——開始郵件合併——標籤，在打開標籤選項中，點擊新建標籤，然後設置想要的標籤大小，點擊確定。
  • PS教程:製作馬賽克效果的方法
    咱們常見的電視、報刊、網絡等等媒體上人物臉部被製作成模糊的樣子，讓人很難分辨出其廬山真面目，這種模糊的效果稱為馬賽克效果。
  • DW靜態網頁製作:跳轉聽音樂!
    1、建立站點後，在文件夾上右鍵新建一個文件，改名為音樂製作網頁，然後雙擊進入網頁，首先，插入表格，17行，2列，表格寬度和表格粗細都為0，確定。選中表格，下邊的對齊方式為，居中對齊2、選中第一個格，按住Ctrl鍵再選中第二個格，右鍵，表格，合併單元格，點擊插入，圖像，選擇建的站點下的素材，確定3、用剛才的方法合併第二行單元格，填寫導航欄文字，選擇拆分，找到對應代碼位置，填寫空格代碼 在文字前後都添加空格，使導航欄文字間隙均勻，下邊背景顏色改為紫色
  • PS如何製作光影效果?
    有時候我們能夠看到畫面中的一些光影效果，這個是可以用ps製作出這樣的素材的，下面來看看具體的製作方法吧！1.我們首先新建一個畫布，然後點擊選區工具。2.拖拽出一個矩形來，填充為黑色。PS的光影效果是通過黑色的矩形方塊進行變形就可製作出，下面來看看具體的操作方法吧！1.我們先將矩形框線拖拽排列好之後，按住shift鍵將所有的圖層選中。2.然後按快捷鍵Ctrl+T，滑鼠右鍵選擇——扭曲選項。
  • ps如何製作淘寶產品主圖圖片,只需幾個步驟,輕鬆搞定
    ps如何快速修復圖像，超詳細的圖像修複方法整理，原來這麼簡單3、然後對圖片進行調亮調色操作ps常用保存文件格式整理，原來都有這些……白底圖的製作方法，我也會單獨建立一個蒙版，方便自己隨時修改，喜歡這種方法的也可以參考一下（如果對工具欄面板不是很了解各工具的作用和使用方法的，可以看看之前的教程ps工具面板的介紹和ps如何建立選區以及簡單的摳圖工具）
  • 使用ps如何製作新年賀卡
    ps是功能強大的平面設計軟體，我們使用ps可以製作新年賀卡，下面就來看看使用ps是如何製作新年賀卡的。方法/步驟在桌面上雙擊ps的快捷圖標，將ps這款軟體打開，進入到ps的操作界面。打開ps之後，按下Ctrl+O鍵，在彈出的對話框內選擇圖片素材，然後使用移動工具鍵公雞圖形拖放到背景圖層之內，並調節其大小和位置。
  • ps如何製作動態GIF圖片
    ps如何製作動態GIF圖片 只要你有ps軟體就可以輕鬆製作一個自己喜歡的diy準備好幾張尺寸大小一樣的圖片 如圖所示：打開自己電腦桌面上的ps軟體  如圖所示：點擊ps左上角的「文件」按鈕選項點擊打開之前準備好的圖片  然後點擊打開 如圖所示：
  • 學生如何製作一個個人網頁?
    那麼學生的個人網頁製作如何才能做好呢？下面就跟大家分享下製作教程以及保持網站高質量的方法。上線了建站案例，禁止轉載新手想要製作個人網站的話，你需要找一個簡單點的個人建站系統，操作越傻瓜越好，比如上線了，有很多現成的網站模板，新手直接套用模板再稍加編輯就能生成個人網站，操作如下
  • 利用Premiere製作出斜角邊效果的具體操作方法
    使用Premiere這款軟體怎樣製作出斜角邊效果呢?不懂的用戶就去下文看看利用Premiere製作出斜角邊效果的具體操作方法。上文就是小編講解的利用Premiere製作出斜角邊效果的具體操作方法，你們都知道了嗎?
  • 如何製作板繪ps筆刷?ps入門基礎
    如何製作板繪ps筆刷？ps入門基礎！一些剛接觸photoshop軟體繪畫的萌新，可能還不清楚PS筆刷是如何導入的，筆刷一般存放在哪個文件夾，怎麼自定義設置筆刷。本期微課菌就來分享一組入門級的筆刷創建教程。
  • 如何用網頁製作軟體快速生成網站?
    新手如何製作出一個美觀漂亮、功能實用的網站？這就需要你用到網頁製作軟體了。網頁製作軟體有哪些？不同的人群有不同的適用軟體。如果你懂一些編程知識，那麼可以考慮用網頁製作軟體dreamweaver來編輯網頁。
  • 用ps製作簡單的泡泡方法
    下面我們用ps製作簡單的泡泡，太複雜的泡泡也比較麻煩，製作點簡單的泡泡就夠用了。方法/步驟進入PS界面，選擇橢圓形狀工具，在畫布上按住SHIFT繪製一個白色的圓。ctrl+左鍵點擊橢圓圖層，然後點擊「選擇-修改-羽化」，對橢圓進行一定羽化半徑的調整，具體數值看整個圓的大小。羽化完成之後，delete刪除選擇，ctrl+shift+n新建圖層，然後用白色的畫筆單繪製一個高光部分。
  • ps經典操作技巧分享,如何製作一張3D圖片
    我們在實際工作中，當我們需要處理圖片的時候，特別是處理比較複雜的圖片的時候，我們通常會使用功能強大的ps軟體，通過這段時間的學習，我們知道了ps具有很多實用的圖片處理工具，我們不僅可以處理簡單的圖片美化問題，我們還是利用ps處理更加高級的圖片問題，今天我們要分享的ps操作技巧是比較炫酷的
  • 如何利用ps製作複雜線條背景的宣傳海報?3分鐘教你搞定它!
    ps怎樣製作電商海報中高端大氣又好看的複雜線條背景型的宣傳海報？運用PHOTOSHOP軟體，可以很簡單的製作大家想要的照片，下面和小編一起來看看具體步驟吧。先看效果：1. 打開PS新建畫布，大小為：1920*900，如下圖所示；2.
  • 板繪煙花如何繪製?Ps製作煙花效果教程
    板繪煙花如何繪製？Ps製作煙花效果教程！煙花雖美，但轉眼即逝，今天微課菌就教大家一個如何利用ps製作一個煙花，煙花可以作為商品或者海報上面的裝飾元素都很不錯，一起來學習吧。6、選擇：圖像——圖像旋轉——順時針旋轉90度7、選擇：濾鏡——扭曲——極坐標——平面坐標到極坐標——確定8、新建一個圖層，在工具欄找到「漸變工具」，填充漸變，最後將圖層混合模式改為「顏色」板繪煙花如何繪製
  • 吸管愛心的製作方法 舊物利用手工小製作圖片教程
    其實吸管還可以二次利用，變成是很漂亮的小玩具呢。今天就給大家分享一款關於吸管的手工製作，用吸管制作美麗的愛心小玩具哦，大家一起來看看具體的製作步驟吧，小朋友們拿起身邊的吸管也來做一做吧。舊物利用手工小製作圖片教程舊物利用手工小製作圖片教程舊物利用手工小製作圖片教程吸管愛心的製作方法吸管愛心的製作方法吸管愛心的製作方法舊物利用手工小製作圖片教程
  • Dreamweaver學習:[23]如何製作網頁
    一個網頁中包含很多元素，涉及到很多知識點，比如表格，背景，文本，顏色，邊框等等，一起通過一個實例來學習。下面第一張圖是要製作的頁面，第二張圖是網頁製作的要求。一起來做。首先打開Dreamweaver，新建一個新的頁面，並命名。
  • PS教程:如何利用ps製作透視效果?簡單幾步教你做出來
    給大家分享一個PS快速給衣服製作透視效果的小技巧!!首先要準備好以下素材（一個模特圖與一個背景圖）最終的效果圖：具體步驟如下：先把背景圖在PS裡面打開。如圖1所示：（圖3）4.用鋼筆工具或者套索工具把衣服的區域選出來，並把選擇的衣服複製出來。
  • 如何通過ps移動工具製作證件照
    證件照真的是無處不在，走到哪裡都需要，那麼如何通過ps移動工具製作證件照呢？方法/步驟打開ps，將拍好的半身照打開，先取消鎖定。