2022年8月20日 星期六

網頁素材的排列

網頁可以放入文字(text)、圖片(image)、超連結(hyperlink)、聲音(audio)及影片(video)的素材(element),祗要把所有素材都要放在<body>…..</body>便成,如下:

輸出如下:

發現了嗎? 以上所有素材皆已顯示,但如沒有設定任何格式的話,即使原始的HTML文件似乎已把不同素材分段顯示(如上),但瀏覽器仍然不會理會任何空格但祇是把素材順序由左至右排列而已,如已到視窗右邊界的話,素材會自動移至下一行顯示。

 

留意,如把瀏覽器(browser)的視窗大小改變的話,素材的位置也會變動。

 

這是好處還是局限?

 

好處是,無論視窗大小如何改變,還是可以完整地輸出所有素材,觀看者祇要往下滾動頁面便可以,而不需要左右上下滾動才看到完整資料。

局限是,素材並不按我們心目中的設計排列方式顯示! 網頁設計便沒有個人特色可言,不夠美觀。

但現時許多人也使用流動裝置觀看網頁。

 

如果我們想素材分段地顯示(就像原始文件內的樣子),我們需要替每一段素材加入段落的標記<p>…</p>便成,如下:

輸出如下:

以上是最基本的分段網頁排版的做法。當然網頁的排版不止如此,但要更多的標記設定才可以。

 

[知多一點點]

如果祗是想制作一個排版如此簡單的網頁的話,以上的做法可能有點麻煩,畢竟要輸入許多標記符號。有些軟件可協助處理這些工作的,文書處理軟件WORD本身便可以把文件另存成HTML的格式,可以試試! 但會發現那HTML文件的內容遠多於以上的文件(足足有800多行!)

 

迴圈處理(使用FOR)

    var i=1; for (i;i<=10;i=i+1)   document.write(i);