網頁設計模板圖片

1、網頁設計模版是什麼,怎麼利用網頁設計模版?

網頁模板就是已經做好的網頁框架，使用網頁編輯軟體輸入自己需要的內容，再發布到自己的網站。每個網頁模板壓縮包內包含：PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改)，按鈕圖片PSD文件、Flash源文件和字體文件，推薦使用Dreamweaver軟體向網頁模板添加內容。

創建和設置

1)模板的概念：作為創建其它文檔的樣板的文檔。創建模板時，可以說明哪些網頁元素不可編輯，哪些元素可以編輯。其擴展名為.dwt。

2)模板的作用：有利於保持網頁風格的一致;提高工作效率。

1.創建模板

1)創建一個全新的模板：在模板面板中，使用快捷菜單按鈕或單擊面板上的新建按鈕

模板面板的打開：Window菜單--Templates

2)創建基於文檔的模板：File菜單-Save As Template

2.設置模板頁面屬性

1)用模板創建的文檔繼承模板的頁面屬性，頁標題除外。

2)設置：Modify菜單-Page Properties

3.定義模板的可編輯區

1)定義模板的可編輯區

在模板文檔中選定對象、Modify菜單、Templates、New Editable Region

2)取消可編輯區標記

Modify菜單-Templates-Remove Editable Region

應用和更新

1.應用模板創建文檔

1)應用模板創建文檔

使用模板創建新文檔：File菜單-New From Template

或：File菜單-New-從模板面板中拖一個模板到文檔

對現有文檔應用模板：Modify菜單-Templates-Apply Template to Page-模板面板中選定模板-單擊Select

或：從模板面板中拖一個模板到文檔中

或：從模板面板中選定一個模板，單擊Apply

2)可編輯區和鎖定區

在應用了模板的文檔中，只有可編輯區的內容才可以修改。

3)把頁面從模板中分離出來

如果要對應用了模板的頁面的鎖定區進行修改，必須先把頁面從模板中分離出來。

具體操作：Modify菜單-Templates-Detach From Template

2.修改模板

在模板面板中選定模板、單擊編輯按鈕或雙擊模板名稱或使用快捷菜單的Edit、編輯完成後保存

3.更新站點中使用模板的所有文件

Modify菜單-Templates-Update Pages

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

||<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>

3、html網頁設計如何修改模板的圖片超鏈接

我覺得自己 不會使用這些都，直接不要使用別人的模板，直接自己全部做，或者使用開源程序安裝一個網站

4、個人網頁製作模板

作為一個過來人，我倚老賣老一下，希望你不要介意。
這個應該是你們的大學的畢業設計或者期中期末的作業吧？
參考網上的可以，但是不可以照搬，否則，1，被老師抓，視為雷同。2.對你自己也沒什麼幫助。

我建議你，還是老老實實的稍微的輕微的小小的研究下網頁設計，做的不好沒關系，就怕抄襲，切忌。我發一些簡單的個人網站模板給你，http://www.drame.cn/template/gr/index.html 你參考下，一定要自己修改修改，要不你就完蛋了。謝謝！
請採納答案，支持我一下。

5、網頁設計的模板框是310PX,如何讓圖片自動識別模板框大小

在調用圖片的代碼中寫上域名模板框同樣大小的寬度，
例如：<img src="/t1.jpg" width="310px" />
或<img src="/t1.jpg" style="width: 310px" />
這里無論t1.jpg寬度是多大，在頁面中顯示出來的寬度都是310px。
同樣，也可以繼續設置高度，使寬、高都契合模板框更好。
例如後面加上高度310px。
<img src="/t1.jpg" width="310px" height="310px" />

6、網頁設計模版是什麼?應該怎麼設計？

網頁模板就是已經做好的網頁框架，使用網頁編輯軟體輸入自己需要的內容，再發布到自己的網站。每個網頁模板壓縮包內包含：PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改)，按鈕圖片PSD文件、Flash源文件和字體文件，推薦使用Dreamweaver軟體向網頁模板添加內容。

創建和設置

1)模板的概念：作為創建其它文檔的樣板的文檔。創建模板時，可以說明哪些網頁元素不可編輯，哪些元素可以編輯。其擴展名為.dwt。

2)模板的作用：有利於保持網頁風格的一致;提高工作效率。

1.創建模板

1)創建一個全新的模板：在模板面板中，使用快捷菜單按鈕或單擊面板上的新建按鈕

模板面板的打開：Window菜單--Templates

2)創建基於文檔的模板：File菜單-Save As Template

2.設置模板頁面屬性

1)用模板創建的文檔繼承模板的頁面屬性，頁標題除外。

2)設置：Modify菜單-Page Properties

3.定義模板的可編輯區

1)定義模板的可編輯區

在模板文檔中選定對象、Modify菜單、Templates、New Editable Region

2)取消可編輯區標記

Modify菜單-Templates-Remove Editable Region

應用和更新

1.應用模板創建文檔

1)應用模板創建文檔

使用模板創建新文檔：File菜單-New From Template

或：File菜單-New-從模板面板中拖一個模板到文檔

對現有文檔應用模板：Modify菜單-Templates-Apply Template to Page-模板面板中選定模板-單擊Select

或：從模板面板中拖一個模板到文檔中

或：從模板面板中選定一個模板，單擊Apply

2)可編輯區和鎖定區

在應用了模板的文檔中，只有可編輯區的內容才可以修改。

3)把頁面從模板中分離出來

如果要對應用了模板的頁面的鎖定區進行修改，必須先把頁面從模板中分離出來。

具體操作：Modify菜單-Templates-Detach From Template

2.修改模板

在模板面板中選定模板、單擊編輯按鈕或雙擊模板名稱或使用快捷菜單的Edit、編輯完成後保存

3.更新站點中使用模板的所有文件

Modify菜單-Templates-Update Pages

7、網頁設計裡面的圖片素材

「我用了PS可是在轉化大小的時候圖片會變得很難看」
可能是你的操作問題...

縮小圖片操作步驟：
①. 雙擊安裝好的Photoshop圖標打開軟體
②. 選擇「文件」 → 「打開」（打開需要處理的圖片）
③. 選擇「圖像」 → 「圖像大小」 → 然後輸入需要數值 → 「確定」

如何讓圖片成為正方形
①. 打開圖片後，點擊「選擇」 → 「全選」
②. 選擇「編輯」 → 「剪切」
③. 選擇「圖像」 → 「畫布大小」 → 然後輸入需要數值 → 「確定」
④. 用滑鼠拖動圖片，選擇合適的位置即可

這是我寫給客戶的使用文檔，photoShop版本是，photoShop CS2，你試試

進入網路圖片高級搜索頻道
http://image.網路.com/gaoji/advanced.html
然後「圖片大小」，選擇自定義

8、做一個簡單的圖片顯示網頁頁面

※ ☆ ※為您做答 希望對你有幫助 如果滿意請選擇我的答案 您的支持是我最大的動力★★
★要想學做網頁，首先得了解製作網頁的工具。
製作網頁主要有以下一些工具
Frontpage：office自帶的一個工具，操作簡單，實用，學起來比較輕松，功能不咋地，我不太喜歡。
Dreamweaver：這是網頁三劍客之一，專門製作網頁的工具，可以自動將網頁生成代碼，是普通網頁製作者的首選工具，界面簡單，實用功能比較強大。建議初學者選用。
另外一個工具就是代碼編輯工具，例如寫字本、EditPlus等，這些工具主要編輯asp等動態網頁。
此外還有一些網路編程工具，javascript、java編輯器等。
網頁製作也是一個比較吃香的行業，要真正做一個好的網站，還必須有良好的設計功底。所以還得學很多邊緣性的軟體，例如photoshop、flash等。
大型的網站往往還需要資料庫的支持，所以還得懂資料庫。sql、甲骨文等。
總之，掌握好網頁製作，能獨立完成一個網站的製作工作，那就不要考慮吃飯問題。隨便混就好了！
祝你成功。
★你可以結合 Dreamwaver 和 Photoshop 來製作網頁。
從最基礎的HTML語言開始，學會了這就可以自己弄靜態的網頁了，學會了後就可以學動態的
網站設計八步驟
由於目前所見即所得類型的工具越來越多，使用也越來越方便，所以製作網頁已經變成了一件輕松的工作，不像以前要手工編寫一行行的源代碼那樣。一般初學者經過短暫的學習就可以學會製作網頁，於是他們認為網頁製作非常簡單，就匆匆忙忙製作自己的網站，可是做出來之後與別人一比，才發現自己的網站非常粗糙，這是為什麼呢？常言道：「性急吃不了熱豆腐」。建立一個網站就像蓋一幢大樓一樣，它是一個系統工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設計出一個滿意的網站。
一、確定網站主題
網站主題就是你建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。特別是對於個人網站，你不可能像綜合網站那樣做得內容大而全，包羅萬象。你沒有這個能力，也沒這個精力，所以必須要找准一個自己最感興趣內容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網站的主題無定則，只要是你感興趣的，任何內容都可以，但主題要鮮明，在你的主題范圍內內容做到大而全、精而深。
二、搜集材料
明確了網站的主題以後，你就要圍繞主題開始搜集材料了。常言道：「巧婦難為無米之炊」。要想讓自己的網站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以後製作網站就越容易。材料既可以從圖書、報紙、光碟、多媒體上得來，也可以從互聯網上搜集，然後把搜集的材料去粗取精，去偽存真，作為自己製作網頁的素材。
三、規劃網站
一個網站設計得成功與否，很大程度上決定於設計者的規劃水平，規劃網站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網站規劃包含的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在製作網頁之前把這些方面都考慮到了，才能在製作時駕輕就熟，胸有成竹。也只有如此製作出來的網頁才能有個性、有特色，具有吸引力。如何規劃網站的每一項具體內容，我們在下面會有詳細介紹。
四、選擇合適的製作工具
盡管選擇什麼樣的工具並不會影響你設計網頁的好壞，但是一款功能強大、使用簡單的軟體往往可以起到事半功倍的效果。網頁製作涉及的工具比較多，首先就是網頁製作工具了，目前大多數網民選用的都是所見即所得的編輯工具，這其中的優秀者當然是Dreamweaver和Frontpage了，如果是初學者，Frontpage2000是首選。除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等；動畫製作工具，如Flash、Cool 3d、Gif Animator等；還有網頁特效工具，如有聲有色等，網上有許多這方面的軟體，你可以根據需要靈活運用。
五、製作網頁
材料有了，工具也選好了，下面就需要按照規劃一步步地把自己的想法變成現實了，這是一個復雜而細致的過程，一定要按照先大後小、先簡單後復雜來進行製作。所謂先大後小，就是說在製作網頁時，先把大的結構設計好，然後再逐步完善小的結構設計。所謂先簡單後復雜，就是先設計出簡單的內容，然後再設計復雜的內容，以便出現問題時好修改。在製作網頁時要多靈活運用模板，這樣可以大大提高製作效率。
六、上傳測試
網頁製作完畢，最後要發布到Web伺服器上，才能夠讓全世界的朋友觀看，現在上傳的工具有很多，有些網頁製作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網站發布到自己申請的主頁存放伺服器上。網站上傳以後，你要在瀏覽器中打開自己的網站，逐頁逐個鏈接的進行測試，發現問題，及時修改，然後再上傳測試。全部測試完畢就可以把你的網址告訴給朋友，讓他們來瀏覽。
七、推廣宣傳
網頁做好之後，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。
八、維護更新
網站要注意經常維護更新內容，保持內容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內容，才能夠吸引住瀏覽者
軟體下載 用訊雷搜索一下
建議使用網頁製作三劍客Dreamweawer+photoshop+Flash 或使用Frontpage
Dreamweaver v8.0 簡體注冊版
下載地址：
用網頁三劍客吧,教程可參照以下網站:
※ ☆ ※為您做答 希望對你有幫助 如果滿意請選擇我的答案 您的支持是我最大的動力★★