網頁設計效果圖加代碼_網頁效果圖怎麼製作

1、十萬火急！要做靜態網頁製作作業，誰有完整的某個網頁的全套素材和效果圖？

大學？？社會上沒有免費的。花一點點小錢，就可以完成任務。進我知道空間，你就知道了

2、HTML5如何在網頁中實現3D效果

CSS3除了為開發者提供二維變形之外，還將動畫從二維平面推動到了三維立體狀態，能夠實現真正的三維特效。

三維變形和二維變形一樣，均使用的是transform屬性。想要觸發三維變形有兩種方式：一種方式是通過語法告知瀏覽器「請採用三維方式進行變形處理」，另一種方式是直接使用CSS3三維變形的語法。

觸發方法1：告知瀏覽器變形方式

-webkit-transform-style:preserve-3d;

Tips：IE不支持三維變形，在移動端，絕大多數的瀏覽器均為WebKit內核，因此，在此句代碼之前需要書寫-webkit-的前綴內核。

Tips：不要為body元素設置-webkit- transform-style: preserve 3d,否則會對position:fixed定位的元素造成布局影響。在開發當中，如果當前元素屬於body的子級元素，又希望應用三維變形，則在body和當前元素之間多嵌套一層結構，並為這層元素應用三維變形即可。

觸發方法2：直接使用CSS3變形語法

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>言成科技/title>
    <style>
        .box1 {
            width: 150px;
            height: 150px;
            border: 2px solid blue;
        }
        .box1 div {
            height: 150px;
            background: rgba(0, 0, 0, 0.5);
            -webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg);
            transform: translate3d(30px, 60px, 20px) rotateX(30deg);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div></div>
    </div>
</body>
</html>

具體三維變形的具體屬性詳見《CSS3-3D相關知識詳解—視角以及變形方向》

3D效果製作

需求

製作一個立方體，並進行旋轉

代碼實例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>言成科技</title>
<link rel="stylesheet" type="text/css" href="https://css.h5course.cn/reset-1.0.0.css" />
<style>
  .main-bac { -webkit-perspective:1500; } /*設定透視距離*/
  .main{
   width:200px;
   height:200px;
   margin: 0 auto;
   position:relative;
   -webkit-transform-style:preserve-3d;
   -webkit-transition:-webkit-transform 2s ease 0s;/*過渡時間*/
  }
  /*基本樣式*/
  .main p{
   position: absolute;
   margin: 0;
   padding: 0;
   width: 200px;
   height: 200px;
   text-align: center;
   line-height: 200px;
   font-size: 26px;
   opacity:0.5;
  }
  /*將第一個元素Z軸向前移動100px，形成第一個面（正面）*/
  .main p:nth-of-type(1) {
   background-color:red;
   -webkit-transform:translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞x軸旋轉90度形成上面的面*/
  .main p:nth-of-type(2) {
   background-color:orange;
   -webkit-transform:rotateX(90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞x軸旋轉-90度形成下邊的面*/
  .main p:nth-of-type(3) {
   background-color:yellow;
   -webkit-transform:rotateX(-90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞y軸旋轉90度形成右側的面*/
  .main p:nth-of-type(4) {
   background-color:green;
   -webkit-transform:rotateY(90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞y軸旋轉-90度形成左側的面*/
  .main p:nth-of-type(5) {
   background-color:#b435bf;
   -webkit-transform:rotateY(-90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞y軸旋轉180度形成後面（背面）*/
  .main p:nth-of-type(6) {
   background-color:blue;
   -webkit-transform:rotateY(180deg) translateZ(100px);
  }
  /*滑鼠移入時繞Y軸旋轉180度，繞Z軸旋轉180度*/
  .main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg); }
</style>
</head>
<body>
<div class="main-bac">
  <div class="main">
   <p>言成科技</p>
   <p>3D立方體</p>
   <p>HTML5學堂</p>
   <p>3D立方體</p>
   <p>碼匠</p>
   <p>JavaScript</p>
  </div>
</div>
</body>
</html>

代碼解析

當滑鼠移入的時候，立方體逐漸的發生旋轉（非突變），圍繞X軸旋轉45度的同時，圍繞Y軸旋轉45度。

當滑鼠移出立方體時，立方體恢復到初始狀態。在最開始狀態時，並沒有採用無限遠的視角，設置一定的視角，讓剛開始時直視立方體時，不會覺得是一個平面。

3D效果製作-目標效果圖

以上資料來源：《HTML5布局之路》

3、求教網頁設計師，怎麼知道效果圖中的字體是哪種字體，然後在html裡面相應的設置

網上有檢測字體的軟體，把你看到的字捷圖，上傳，下一步，然後對應輸入上面的字，會自動檢測出這是什麼字體，當然不是100%精確，但是給出大概的，你自己看著哪個最像就是哪個了。我經常用的一個網站就是（qiuziti）地址前面後面懂得加什麼吧？直接百度搜這英文也能搜到，建議如果用在網站里的話最好不要用偏僻的字體，畢竟你電腦有，人家不一定有，然後別人看你網頁的時候就會出現字體全部變回宋體，出不了你想要的效果，（特殊字體用圖片再放入HTML中）

4、設計網頁效果圖時寬度一般設置為多少

效果圖現在比較流行1920

5、網頁效果圖製作，網頁效果圖一般是多大尺寸，在coreldraw或PS製作的區別？~~

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

6、如何做漂亮的界面嗎

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

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

3
我們拉一個一個藍色（#506dbb）到白色的一個漸變

4
效果圖

5
然後我們保存這張圖片為gif格式
這時候我們新建一個
1000*800的文件
我們把網頁效果圖製作出來。這里都是用到ps製作的。沒有寫任何代碼。這個過程我就不講了
大家製作好網頁效果圖完成的時候一定要注意把網頁背景圖層刪掉，保持透明

6
下一步我們使用切片工具。把頁面進行切片。如下圖所示
注意每一個鏈接都要切片一下。切片工具和矩形選區工具一樣，拉一下就是一個切片
為了區分我這里加了背景。我們一會一定要記得去掉

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

8
我們再逐個為切片添加鏈接

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

10
我們把這里選擇png—8

保存

保存完成後
效果圖

保存完成後。會生成一個目錄和一個html文件。我們用瀏覽器打開這個html文件可以看看效果。由於我們保存時選擇的是png格式的所以看到的效果不美觀，且網頁靠左邊。我們要做的就是讓網頁有一個背景就是我們剛剛製作的藍色背景。且頁面居中
為了方便，這里我們使用 Dreamweaver。這個軟體破解版和安裝教程問度娘要這里就不多說。
打開 Dreamweaver界面
我們新建一個站點

我們先要給網頁居中。
我們用Dreamweaver打開ps生成的html文件
進入Dreamweaver的設計視圖。注意看

我們用滑鼠點一下最外邊的這根線。（把滑鼠放在四個角上單擊一下就可以選中）
選中

然後把下邊的屬性設置為居中。注意看

這樣網頁就居中了。
我們再添加一個背景
我們先把滑鼠在旁邊空白地方單擊一下，然後點擊下面的頁面屬性

把背景圖片設置為我們剛剛製作的背景圖。重復選擇no開頭的那個。其他的不用管。

然後我們按ctrl+s保存好網頁。然後即可使用瀏覽器預覽效果了

ps製作網頁就是這么簡單

7、網頁製作問題：公司一般網頁效果圖是自己設計，還是套模板？

看看情況咯，大多數都是套模板的，有實力的公司都是要求自己設計的。。

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

　平面廣告和網站頁面設計的宗旨就是吸引眼球，符合平面視覺沖擊特點，如何設計一款有特色、另類能吸引眼球的作品是擺在平面設計人員和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邊框"下面新建一層，然後在其之上新建一層，放置沙漠圖片，將其混合模式修改為"顏色"然後打開一開始制

導航:首頁 > 萬維百科 > 網頁設計效果圖加代碼

網頁設計效果圖加代碼

與網頁設計效果圖加代碼相關的知識