技術在進步，思維在發展，網頁上的花樣當然也要一天天地趕時髦了。在“滾動字符”、“跑馬燈”已成平常的今天，網頁上還能變出新花樣嗎?是的,今天就跟小編一起來學習如何利用樣式動態創建頁首、頁腳和換頁符,感興趣否?
在仔細閱讀一個討論區的時候，我讀到了一個開發人員提出的問題，他正在努力編程在HTML頁面裡自動創建頁首和頁腳並插入換頁符。這還沒有去考慮你的輸出會是什麼，因為弄清浏覽器對空白、頁面大小等的當前設置很難。然而，如果確實想要強制指定寬度和換頁符，你也可以實現。
實現這一目的的一種方法是使用TABLE。在本文裡，我將向你演示如何把頁首和頁腳動態地插到頁面裡，從而構成格式化的頁面。(請注意：這裡我使用IE 6.0來測試代碼。它也可以在5.0和更高版本的浏覽器上使用，因為我使用了從IE 5.0以來STYLE元素都可以使用的@media偽類。)
實現這一功能最簡單的方法是使用TABLE。然而，你的格式化的輸出必須包括單獨的行，而且它們不能超過打印頁面的高度。此外，你的TABLE一定不能超過打印頁面的寬度。由於你無法控制風景畫或者肖像畫，所以你必須進行一些假設。你要假定文檔的方向是肖像畫，左右邊距是1"(2.54厘米)，上下邊距0.25"(0.64厘米)，紙張的大小是8.5"(21.59厘米)X 11"(27.94厘米)。這就意味著輸出的總寬度是6.5"(16.51厘米)，所以你的TABLE寬度應該被設置為6.5in、無邊界。在表格的頂端，你要創建兩個隱藏的DIV，它們將作為頁首和頁腳。DIV有設定好的寬度和高度，overflow樣式屬性被設置為hidden(隱藏)。這就為你的輸出打下了基礎。為了創建換頁符、頁首和頁腳，你必須在page load後面加入一些JavaScript。
創建格式化輸出的想法是把頁首和頁腳DIVS復制到隱藏的行裡。但是，你要把@media print的顯示樣式設置為inline。而且，你要把頁首之前的TR的page-break-after樣式屬性設置為always。
在BODY onload事件期間，在所有的行裡迭代，以確定行的offsetTop加上offsetHeight是否超過了頁面可用的長度。可用長度是頁面的長度減去頁首、頁腳、上下空白的總高度。所以，如果頁首的高度和頁腳的高度都是1”，那麼上下的空白就是0.25"，頁面的長度是11"，那麼可用的寬度就是8.5"：11 - (1 x 2) - (0.25 x 2) = 8.5。
下面就是實現這一任務的HTML代碼：
在查看上面的示例代碼時，你會注意到頁首和頁腳是兩個放在TABLE元素前面的DIV。TABLE tbl1包含多個TR。每一行都被標識為t1，以便使用all集合幫助在它們中間迭代。這個例子只能用於超過兩行的頁面。我創建了一個hdrftr，用來識別這些項目應該在什麼時候顯示。JavaScript代碼則詳細敘述了這個功能是如何被創建的。
首先，一個頁首行被加到表格的頂端。然後，每個行都會被檢查，以確定top坐標加上行的高度加上頁腳的高度——1in * screen.deviceYDPI或者僅僅screen.deviceYDPI——達到或者超過可用的總高度。如果這個值符合可用的高度，那麼當前的行就被設置為後面有一個換頁符。如果這個值超過了可用高度，那麼就會在前一行後面設置換頁符。然後，相關的行後面就會加入一個頁腳，而頁腳後面接著就是頁首。這一過程一直持續到所有的行都被檢查到。最後，一個頁腳行被加到表格的末端。頁腳行包括有絕對位置，以防止浏覽器無意中分頁，而這可能會導致錯誤發生。而且，後面的每個頁面都必須為我們另外添加的頁首行做好准備：(頁面 – 1)* 1，這裡(頁面 – 1)是後面的頁面數，而1是頁首的高度。
上文中小編向你演示如何把頁首和頁腳動態地插到頁面裡，從而構成格式化的頁面。你學會了嗎?
