導航:首頁 > 萬維百科 > 網頁設計嵌套

網頁設計嵌套

發布時間:2020-08-20 00:40:45

1、網頁製作—表格嵌套問題

不要這樣重復書寫某一個數字和字母,這樣的書寫,在網頁里不會自動轉到下一行會,一直顯示為一行。造成頁面的錯誤。

沒有明白你所說的意思,但是這個錯誤的確是上述原因造成的,以後不要這樣測試頁面,多打幾個數字或字母,並打標點符號,如果表格設定了固定寬度,基本上可以自動轉到下一行。
==========================================
另外表格嵌套排版,像你做這樣比較復雜的板塊,還要多嵌套幾層,才能固定每一個表格,或者在最外圍的表格設置單元格,固定寬度。

這就是表格排版的弊病,使用css就沒有這樣的麻煩了。

2、如何將一個HTML頁面嵌套在另一個頁面中

這個在做網頁中常要用到,有些通用的內容可集中放在一個頁面文件中,其它要用到這些內容的頁面只需要包含(引用)這個通用文件即可。這樣便於維護,如果有很多網頁,當通用內容需要修改時,只改一個文件就可以了,不需要每個文件單獨修改。
最典型的應用比如頁腳的版權信息等內容可以放在一個叫做footer.html文件里, 然後其他頁面文件在頁面內容的最後包含這個文件就可以了,具體例子下面有。

html文件嵌套,最簡單的辦法是使用SSI(Server Side
Include)技術,也就是在伺服器端兩個文件就被合並了。除了少數免費網頁寄存服務外,幾乎所有的網頁寄存伺服器都支持
SSI。這也是一個比較推薦的方法,它與ASP和ASP.NET網頁使用的語法一模一樣。如果網站管理員偏向使用PHP或JSP的話,語法會稍有不同。
對於不能使用SSI、ASP、ASP.NET、PHP和JSP等伺服器端動態頁面語言的情況,這里還將介紹兩種客戶端鑲嵌的辦法:JavaScript和iframe的方法。當這兩種客戶端的方法都有很大的弊病,一般不推薦使用。
下面對各種方法單獨具體介紹。
1、SSI (Server Side Include)
SSI是一種簡單的動態網頁製作技術,但是有些伺服器要求網頁文件擴展名為.shtml才能識別文件中SSI命令。所以如果你的SSI命令看起來不工作,先別放棄,試著把文件擴展名改為.shtml,也許會成功。如果知道自己的伺服器是否支持SSI,請看另一篇文章。
使用SSI一個局限性是頁面一定要放在網頁伺服器上才能看到效果,在本地是不好調試的。當然,如果非要在本地調試,就本地裝一個Apache伺服器好了。
比如你想在每個網頁的底部加上同樣的版權信息,像

© 2009 程序員實驗室 版權所有

可以把這行信息放到一個叫做footer.html的文件里,footer.html的內容為:

<center> © 程序員實驗室 版權所有</center>;

這樣同一路徑下的其他頁面文件要包含footer.html的SSI命令是:
<!- #include virtual="footer.html" ->(常用)
或者
<!- #include file="footer.html" ->

兩者的幾乎是一樣的,不同之處在於include
virtual後面取的是一個URL形式的路徑,甚至還可以執行一個CGI程序並包含其輸出結果,如果你的伺服器支持CGI的話。而include
file後面取的是一個文件系統路徑,並且不能執行CGI程序。兩者都可以接受相對路徑,所以對上面這個簡單例子,兩者的效果是一樣的。如果你不知道
URL路徑與文件系統路徑兩者的區別的話,就用include virtual
更多關於SSI的介紹,請看這篇SSI的介紹文章。
2、PHP
如果你的伺服器支持PHP的話,用PHP引用footer.html文件的寫法如下:
<?php include("footer.html"); ?>
這句命令所在的文件擴展名必須被為.php。
除了引用本伺服器上的文件,PHP的include命令還可以用來引用其它網站上的html文件,比如:
<?php include(http://www.prglab.com/examples/footer.html); ?>
當然你要得到其它網站的允許才能引用別人的文件。
3、ASP和ASP.NET
如果你使用的是老式的ASP,則語法是與上面SSI一樣的,不需要任何修改,只要把命令所在文件的擴展名改為.asp即可。
對於ASP.NET,也是類似,不同之處在於,因為SSI命令是在ASP命令運行之前被首先編譯,所以文件名中不能夠使用ASP.NET的變數。如果一定要用的話,就用ASP.NET的命令來做文件嵌套吧。
比如:
<%

Response.WriteFile ("footer.html")

%>

更多關於怎樣在ASP.NET中實現動態文件嵌套,請參考微軟的這篇文章。
4、JSP (Java Server Page)

JSP文件需要在基於Java的伺服器上運行,比如Apache Tomcat。JSP包含文件的語法是:
<%@ include file="footer.html" %>
5、客戶端包含
5。1 客戶端包含的利弊
客戶端包含有兩種方式:JavaScript和iframe。讓我們先看看兩種方法各有什麼利弊。
兩種方法中Javascript生成的頁面格式比較好,Javascript可以從一個URL取到頁面片斷然後鑲嵌在另一個頁面的任何位置

。其結果與伺服器端包含的結果基本上一樣,但弊端是客戶端必須開啟Javascript功能(目前大多數人是選擇開啟的,但也有少數出於安全方面的考慮不
開啟)。另一個弊端是搜索引擎是看不到由Javascript包含的頁面的內容的,這對你的網站推廣比較不利。
使用iframe比較簡單,它可以強制一個HTML頁面鑲嵌在另一個頁面中,類似於是用
object控制項將Flash電影、錄像、或者MP3播放器嵌入一個頁面中。使用iframe,用戶端不需要開啟Javascript功能。但不利的方面
是iframe有固定的高度和寬度,不能隨著被嵌入頁面的大小而改變。當被嵌入頁面大於給定高寬度時,會顯示滾動條(當然你也可以使用
scrolling = "no"
來強制滾動條不顯示,但這樣頁面內容會顯示不完整),影響頁面美觀。另外就是搜索引擎可能不收錄iframe引用的頁面,不利網站推廣。
5。2 使用JavaScript的客戶端包含
這個方法主要適用於Firefox瀏覽器(任何操作系統)、IE5以上(Windows)、蘋果的Safari瀏覽器(MacOS X),可以使用一項叫做XMLHTTP 的API技術來通過Javascript程序讀取一個動態讀取一個XML文件。這種方法也可以用來讀取一個HTML文件,並放到當前網頁文件的指定位置。

專業網站設計者:不要用這個!
也許在某些情況下你不得不用JavaScript來實現網頁嵌套,但是這只是一種轉彎抹角的替代方法。當你的伺服器可以支持前面講的伺服器端嵌套方法時,
尤其是專業人士,應盡可能避免使用這種方法,因為你的客戶可能會投訴你做的網頁內容無法被Google搜索到,或不能在某些瀏覽器中正常顯示。

記住這種方法做的網頁只能在Firefox,Safari,和IE5以上版本的瀏覽器中正常顯示。大部分人都是用這幾種瀏覽器的,但是不是所有人,而且有些用戶因為安全因素考慮會關閉Javascript功能。

重要提示:如果你是在本地電腦上調試網頁而不是在伺服器上瀏覽,最新版本的IE瀏覽器會自動屏蔽
Javascript動態生成的部分,並顯示警告信息,你必須選擇」允許顯示動態內容」網頁才能正常顯示。當你把這些網頁文件放到伺服器上去的時候這個問
題就會自動消失的,因為IE會辨別出主頁和被包含的網頁內容都來自同一個伺服器。

好了,說了夠多了,下面是具體怎麼做。把以下代碼放在網頁的<head>裡面:
<script>
function clientSideInclude(id, url) {
var req = false;
// Safari, Firefox, 及其他非微軟瀏覽器
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
req = false;
}
}
}
var element = document.getElementById(id);
if (!element) {
alert("函數clientSideInclude無法找到id " + id + "。" +
"你的網頁中必須有一個含有這個id的div 或 span 標簽。");
return;
}
if (req) {
// 同步請求,等待收到全部內容
req.open(』GET』, url, false);
req.send(null);
element.innerHTML = req.responseText;
} else {
element.innerHTML =
"對不起,你的瀏覽器不支持" +
"XMLHTTPRequest 對象。這個網頁的顯示要求" +
"Internet Explorer 5 以上版本, " +
"或 Firefox 或 Safari 瀏覽器,也可能會有其他可兼容的瀏覽器存在。";
}
}
</script>

了這段代碼我們就可以在網頁的任何位置插入另一個頁面了。首先我們要生成一個作為」容器」的HTML控制項,比如<span>,並給這個」容
器」控制項一個ID,比如includefooter,然後把這個ID和要包含的頁面的URL地址傳遞給前面寫的這個js函數
clientSideInclude就可以了。
一個需要注意的地方是函數clientSideInclude只有在頁面被完全載入後才能工作,所以我們需要在<body>標
簽的onload事件上來調用這個函數,這是最保險的調用時機,因為這個事件觸發的時候瀏覽器肯定已經完全解析了頁面中所有HTML了。
所以,具體代碼是:
在需要插入另一頁面的地方寫:
<span id="includefooter" > </span>
在頁面開始處標簽里寫:
<body onLoad="clientSideInclude('includefooter', 'footer.html');>
當然,你也可以把函數clientSideInclude放在一個單獨的文件裡面,比如命名為clientSideInclude.js,然後在你的頁面<head>標簽中插入下面這<script>標簽以便可以調用這個函數:
<script src="clientSideInclude.js" language="JavaScript"> </script>
5。3 使用iframe的客戶端包含
客戶端頁面嵌套還可以使用iframe的方法,弊端是必須事先想好被嵌套的頁面在首頁中要佔多大的位置。如果被嵌套頁面太大,超過事先定義的寬度或高度,則首頁會出現滾動條。這也許正是你所需要的,但也許會完全破壞主頁的設計。
iframe的使用很簡單,下面的例子會在你的頁面中嵌入另一個叫做include.html的頁面:
<iframe src="included.html" width="450" height="400" >
<a href="included.html">你的瀏覽器不支持iframe頁面嵌套,請點擊這里訪問頁面內容。</a>
</iframe>
這里主頁中定義了要插入的頁面將顯示的高度為400的像素,寬度為450個像素。
我們為什麼要在
iframe的裡面插入一個普通的超級鏈接元素<a>呢?這是因為老版本的瀏覽器和搜索引擎不支持iframe,雖然現在已經很少有人還會使
用Netscape
4這樣老的瀏覽器了,但是幾乎所有人都會使用象Google這樣的搜索引擎。在iframe裡面加上超級鏈接可以幫助搜索引擎找到網頁的內容。
另外我們可以定義iframe的一些屬性來控制網頁的顯示效果
,除了前面用到的最常用寬度(width)和高度(height)的定義外,如果在任何情況下都不希望出現滾動條的話,可以定義iframe的
scrolling屬性等於"no"。如果不希望鑲嵌頁面的周圍出現邊框的話,可以將frameborder屬性設置為0。下面這個例子顯示了
scrolling和frameborder屬性的使用:
<iframe src="included.html" width="450" height="400" frameborder="0" scrolling="no">
<a href="included.html">你的瀏覽器不支持iframe頁面嵌套,請點擊這里訪問頁面內容。</a>
</iframe>

3、怎麼用dw往網頁里邊嵌套另一個網頁?

<iframe框架

4、網頁設計中如何使用嵌套的框架集

一個框架集文件可以包含多個嵌套的框架集。大多數使用框架的 Web 頁實際上都使用嵌套的框架,並且在 Dreamweaver 中大多數預定義的框架集也使用嵌套。如果在一組框架里,不同行或不同列中有不同數目的框架,則要求使用嵌套的框架集。 例如,最常見的框架布局在頂行有一個框架(框架中顯示公司的徽標),並且在底行有兩個框架(一個導航框架和一個內容框架)。此布局要求嵌套的框架集:一個兩行的框架集,在第二行中嵌套了一個兩列的框架集。 Dreamweaver 會根據需要自動嵌套框架集;如果您在 Dreamweaver 中使用框架拆分工具,則您就不需要考慮哪些框架將被嵌套、哪些框架不被嵌套這樣的細節。 有兩種方法可在 HTML 中嵌套框架集:內部框架集可以與外部框架集在同一文件中定義,也可以在不同文件中單獨定義。Dreamweaver 中每個預定義的框架集均在同一文件中定義其所有框架集。 這兩種類型的嵌套均產生相同的視覺效果;如果沒有看到代碼,很難判斷使用的是哪種類型的嵌套。在 Dreamweaver 中使用外部框架集文件的最常見情況如下:使用"在框架中打開"命令在框架內打開框架集文件時,可能導致設置鏈接目標時出現問題。

5、HTML網頁設計中嵌套表格可以基層嵌套?最多不要超過幾個嵌套表格比較好?

願意套多少層都行,表格未必載入會慢,相反,DIV的布局,如果不是很精通,反而影響載入速度,另外SEO與你布局方式沒有任何的關系,只不過,表格不是那麼主流而已。

樓上的應該多學學基礎,至少表格布局兼容性要少很多麻煩。

當然,我這么說,並不代表我提倡表格布局,技術總是在向前的。

6、網頁設計:如何把一個動態的頁面嵌套到另一個頁面當中啊..

插入一段代碼
<iframe
src="Untitled-1.html" frameborder="0" width="238"
scrolling="No" height="178" leftmargin="0"
topmargin="0"></iframe>

Untitled-1.html這個就是動態的頁面的名字

7、在網頁設計是怎樣在多個網格嵌套多個網格

可以使用代碼加入。
<table>
<tr><td></td></tr>
<tr><td>
<table>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</td><></tr>
上面是一個兩行一列的大表格,在大表格的第二行又插了一個兩行一列的小表格。不知道這樣,你看的懂嗎?

8、網頁設計編號列表嵌套圖像列表,怎麼做才能達到圖中的效果

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
ol{list-style:upper-alpha; }
ul{font-size:30px; list-style-type:square; list-style-image:url(此處填寫你的圖片路徑);}
</style>
</head>
<body>
<ol>
<li>有序列表項1</li>
<li><span class="">有序列表項2</span>
<ul>
<li>嵌套圖像列表1</li>
<li>嵌套圖像列表2</li>
<li>嵌套圖像列表3</li>
</ul>
</li>
<li>有序列表項3</li>
</ol>
</body>
</html>

關鍵在於list-style-image這個屬性,設置前面那個小圖標的路徑就行了。不過這樣子設置文字前面的圖標,圖標並不會居中顯示,一般用background-image比較多。

9、在網頁製作當中,網頁如何相互嵌套?

ASP 可以用
<!-- #include file="文件名"-->
html
就用框架

10、網頁設計中,div+css,div多層嵌套,會影響網頁載入速度和被搜索嗎?

載入速度是這個意思:
比如一個表格里有圖,有程序,有文字,假如打開網頁其中的圖載入很慢,那麼這個表格的其它元素,比如文字,程序等都不會顯示,直到那張圖完整載入完後,這個表格才全部顯示出來。
那麼div1里嵌套了div2,div2裡面又嵌套div3,假如div3的一張圖片載入很慢,這時div2和div1的元素是否會獨立顯示出來?還是要等到div3里的圖片完成載入後,div1里的全部內容才能顯示出來?

這個問題基本上是瀏覽器找到你的圖片鏈接,已經解析了標簽,最後只剩下下載!它會接著往下解析,並不會影響其他內容的展示,在網速過慢的時候,你會發現圖片會一節一節的顯示,而其他地方的文字全部顯示,並不影響!接上次你的問題,div1和div2的內容會獨立顯示出來。瀏覽器解析只是解析標簽,對於div來說只要保證路徑和標簽的正確和完整,就沒有問題,打開的瀏覽器在自己的標准下顯示你定義的樣式,網速決定你顯示的速度!總的來說,你的結構簡潔,瀏覽器理解解析的快一些,復雜慢一些!

與網頁設計嵌套相關的知識