網頁設計藍圖_網頁設計圖是什麼

1、網頁設計圖片瀏覽模塊如何設計

||<style type="text/css">
.container, .container *{margin:0; padding:0;}

.container{width:408px; height:168px; overflow:hidden;position:relative;}

.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}

.slider2{width:2000px;}
.slider2 li{float:left;}

.num{ position:absolute; right:5px; bottom:5px;}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

<br />

<div class="container" id="idTransformView2">
<ul class="slider slider2" id="idSlider2">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
</ul>
<ul class="num" id="idNum2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div><br />
<p>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

var TransformView = Class.create();
TransformView.prototype = {
//容器對象,滑動對象,切換參數,切換數量
initialize: function(container, slider, parameter, count, options) {
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container), oSlider = $(slider), oThis = this;

this.Index = 0;//當前索引

this._timer = null;//定時器
this._slider = oSlider;//滑動對象
this._parameter = parameter;//切換參數
this._count = count || 0;//切換數量
this._target = 0;//目標參數

this.SetOptions(options);

this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";

oSlider.style.position = "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//設置默認屬性
SetOptions: function(options) {
this.options = {//默認值
Up: true,//是否向上(否則向左)
Step: 5,//滑動變化率
Time: 10,//滑動延時
Auto: true,//是否自動轉換
Pause: 2000,//停頓時間(Auto為true時有效)
onStart: function(){},//開始轉換時執行
onFinish: function(){}//完成轉換時執行
};
Object.extend(this.options, options || {});
},
//開始切換設置
Start: function() {
if(this.Index < 0){
this.Index = this._count - 1;
} else if (this.Index >= this._count){ this.Index = 0; }

this._target = -1 * this._parameter * this.Index;
this.onStart();
this.Move();
},
//移動
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);

if (iStep != 0) {
this._slider.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
} else {
this._slider.style[style] = this._target + "px";
this.onFinish();
if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
}
},
//獲取步長
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
Stop: function(iTarget, iNow) {
clearTimeout(this._timer);
this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
}
};

window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

var objs = $("idNum").getElementsByTagName("li");

var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按鈕樣式
});

tv.Start();

Each(objs, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})

////////////////////////test2

var objs2 = $("idNum2").getElementsByTagName("li");

var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按鈕樣式
Up: false
});

tv2.Start();

Each(objs2, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv2.Auto = false;
tv2.Index = i;
tv2.Start();
}
o.onmouseout = function(){
o.className = "";
tv2.Auto = true;
tv2.Start();
}
})

$("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); }
$("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); }
$("idNext").onclick = function(){ tv2.Index++; tv2.Start(); }
$("idPre").onclick = function(){ tv2.Index--;tv2.Start(); }
$("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }
$("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }
$("idRece").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }
$("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }

$("idReset").onclick = function(){
tv2.Step = Math.abs(tv2.options.Step);
tv2.Time = Math.abs(tv2.options.Time);
tv2.Auto = !!tv2.options.Auto;
tv2.Pause = Math.abs(tv2.options.Pause);
}

}
</script>

2、網頁設計是不是就是做圖？

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

什麼是網頁設計，

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

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

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

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

3、html求製作一個簡單網頁代碼，只需要一些文字加張圖片

完整的代碼如下：
<html>
<head>
<title>簡單網頁製作練習</title>
</head>
<body>
<p>1.文字內容，直接輸入文字即可。。。。。如果想設置其相關屬性可以使用font標簽
<font size="18" color="red" >紅色18號文字</font> </p>
<p> 2.添加圖片 <img src="圖片名稱.屬性" id=「圖片簡介」>
<img src="1.jpg" id=" 加入圖片練習"> </p>
</body>
</html>
樓主，如果不明白可以HI聯系我。。。。

4、網頁設計圖是什麼

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

5、關於網站設計圖

做網站設計抄很實用的工襲具就是Photoshop，可以設計出任何的樣式。
現在一般的網頁都是寬度有1920像素的，高度可以不限（但是需要結合用戶的體驗度就行控制頁面的長度）；
網頁的設計一般都養遵循用戶的體驗度、搜索引擎的喜好度以及後期做優化推廣的難易程度，這些都是要在設計網頁前首要考慮的問題。
一般需要從整體的風格、色彩的搭配、想要實現什麼功能去做設計就可以。

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

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

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

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

7、網頁切圖怎麼做? 網頁設計切圖

網頁切圖怎麼做，網頁設計切圖的方法。

如下參考：

1.打開PS，點擊切片工具，如下圖所示。

2.點擊切片工具，可以將圖片切割成所需的大小，如下圖所示。

3.剪切圖片後，點擊導出特殊網頁使用的格式，如下圖所示。

4.輸入屬導出web的格式頁面，並按住shift鍵選擇所有部分。

5.導出格式設置為JPEG，如下所示。

6.最後，單擊save存儲，如下圖所示。

8、網頁設計模仿百度首頁如下圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<style>
body{
    text-align:center;
}
#header{
    width:100%;
    text-align:end;
    margin-bottom:100px;
}
li{
    display:inline;
}
li a{
    margin:10px;
}
#content{
    width:600px;
    height:200px;
    margin:0px auto 250px;
}
#content img{
    margin-bottom:90px;
}
#content #searchitem input{
    line-height:30px;
    float:left;
    border:1px solid #00F;
}
#content #searchitem button{
    background-color:#00F;
    color:#FFF;
    width:60px;
    height:35px;
    float:left;
    border:1px solid #00F;
}
#footer{
    width:100%;
    margin:0px auto;
    clear:both;
}
</style>
<div id="header">
  <ul id="nav">
    <li><a href="http://www.baidu.com">a</a></li>
    <li><a href="http://www.baidu.com">b</a></li>
    <li><a href="http://www.baidu.com">c</a></li>
    <li><a href="http://www.baidu.com">d</a></li>
    <li><a href="http://www.baidu.com">e</a></li>
    <li><a href="http://www.baidu.com">f</a></li>
  </ul>
</div>
<div id="content"> <img height="50px" src="../img/music.gif" />
  <div id="searchitem">
    <input name="search" size="70"  />
    <button>搜索</button>
  </div>
</div>
<div id="footer">
版權所有仿冒必究
</div>
</body>
</html>

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

　平面廣告和網站頁面設計的宗旨就是吸引眼球，符合平面視覺沖擊特點，如何設計一款有特色、另類能吸引眼球的作品是擺在平面設計人員和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。