導航:首頁 > 萬維百科 > 網頁設計切換頁面模板

網頁設計切換頁面模板

 發布時間：2020-11-10 21:16:21

1、網頁模板-我就想要實現小圖切換大圖的效果的製作步驟與教程

<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產品預覽圖'/>"+imgTitle+"<\/div>"; //創建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設置x坐標和y坐標，並且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>

</head>
<body>

<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>

</body>
你再去下個jquery的庫就行了

2、求網頁設計的模板，有幾個頁面的那種，打開就可以用，相關控制項代碼可以自己寫的，

這個應該是學校的期末作業或者畢業設計，需要幾個鏈接頁面，如主頁，列表頁，內容頁等等。網頁模板相對都是比較成熟的，精美的。所以需要你自己修改成自己想要的頁面，就是美工修改下。這里有些html的靜態頁面的網頁模板www.drame.cn和mb5u.com，免費下載的，希望能找到你滿意的

3、DW怎麼把首頁設為模板，子網頁用模板設計

剛進入dreamweaver點擊新建下方的更多，然後選擇空白頁，頁面類型選擇html模板，布局選無就行了。

插入一個表格（菜單欄中選擇插入，再找到表格），表格里的布局自己根據需要設置，在這里我設置為行數為5，列為1，表格寬度為1000像素。插入表格後，選中整個表格，選中後表框會加黑加粗，在下方設置為居中對齊。

在表格第一行插入圖像（菜單欄中選擇插入，再找到圖像），第二行加入滾動字幕。第三行插入表格（方法同上），1行4列，表格寬度為百分之一百。插入表格之後，再選中第三行的表格，選中後表格邊框會加黑加粗，在下方設置表格為居中對齊，寬度為20%。

第三行中選入一些文字，如首頁，李白，杜甫，白居易。新建一個css文件，再建一個css，設置好類型中的顏色和背景中的顏色，加以區分。選中第三行，使用剛才新建的css，再新建一個css，表格的邊框使用該css。

在第四行插入可編輯區域。點擊確定，可編輯區域中的文字即EditRegion3可以去掉，換行可以擴大可編輯區域的面積。

在第五行插入可編輯區域，我還插入了一條水平線，並加上了版權。最後保存。此時模板已經建好。

新建，模板中的頁，找到新建的模板，創建，保存為index.html（即網站的主頁）,再重新打開新建的模板，在可編輯區預報輸入李白的資料，保存為li.com，此時你會發現只有在可編輯區域才能輸入內容，其他區域都是不可操作的，這就是模板的特點。同理，在新建兩個作為杜甫和白居易的網頁。

現在就差用超鏈接把上面做的幾個網頁連接起來了。在模板中選中首頁，在下方html中的鏈接中輸入首頁的名稱，即index.html，同理，選中李白，杜甫，白居易將他們連起來。超鏈接做好後在文字下方會多出一條橫線。

做完了之後在index.html中打開可以看看做出的效果，點擊圖中的小地球圖標就可進行查看。

4、初次html網頁設計，為何每一頁導航條會隨著翻頁而時大時小？我用的是同一個網頁模板，謝謝

如果你的css定位的尺寸一樣大的話，你對頁面放大或縮小，不會改變你的頁面定位的原尺寸，只是對頁面進行放大了而已
如果你在翻頁查看發現也沒尺寸不一樣，你看看你的頁面是否都是按100%顯示，如果不是按ctr+滑鼠滾輪進行調整一致的比例，再看看是否一樣

5、網頁設計時 如何在同一個網址一個模板下 顯示不同的網頁

友情鏈接

6、如何把現有網頁轉變為模板

如果看到自己喜歡的網頁，可以將其轉換為自己網站的模板。
一、主頁另存為main.htm，文章列表頁面另存為listcolumn.htm，文章頁另存為displayinfo.htm，注意文件名必須絲毫不能偏差，更不能用中文。擴展名必須是.htm，html或其他均不行。


二、將主頁中信息列表的信息刪除，換成Webplus的標簽「[頻道i]」，標題名換成標簽「[標題i]」，注意頻道外面一定要套表格。

三、將listcolumn頁面的相應位置輸出的信息替換成Webplus的標簽，如新聞列表替換成「[文章列表]」，具體標簽可以通過下載通用模板來學習或查找後面附的標簽對照表。

四、將displayinfo.htm頁面的相應位置輸出的信息替換成Webplus的標簽，如新聞標題替換成「[文章標題]」，具體標簽可以通過下載通用模板來學習或查找後面附的標簽對照表。

五、打開文件夾，選中所有文件，添加到zip壓縮文件，如下圖：


通過以上幾個步驟，您就可以獲得一套Webplus模板了，即使您不是專業美工，您也可以通過以上的過程學習Webplus製作技巧，講您喜歡的頁面轉化為webplus的模板。

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

網頁模板就是已經做好的網頁框架，使用網頁編輯軟體輸入自己需要的內容，再發布到自己的網站。每個網頁模板壓縮包內包含：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

與網頁設計切換頁面模板相關的知識