去年在 GitHub 上架設了個人網站 (只能靜態), 當時只是暫時用 jQuery UI 的手風琴結構寫了簡單的首頁就沒再繼續, 因為我主要是把 GitHub 當成是測試網頁的分享寄存空間而已, 參考 :
最近幫湘雲老師架設 WordPress 網站時需要用 Javascript 做一些簡單的資料處理, 所寫的小程式打算整理起來放在網站中以便查找, 所以今天就花了點時間設計了一下個人網站的架構. 理工人的網站只要清爽樸素就好, 不需要太花俏 (實話是 : 缺乏藝術細胞).
資料歸納整理適合使用頁籤 (tab) 結構, 我一直很喜歡 jQueryUI 的 hot-sneak 主題佈景, 所以就用此布景套在頁籤結構上作為首頁的版型, 當然上面還要再放個網站標誌圖檔, 基本上就是使用兩個 div 元素上下堆疊而成, 上面放 logo, 下面放 tab, 網頁碼如下 :
<div style="text-align: center;">
<img id="logo" src="images/logo.jpg">
</div>
<div id="tabs">
<ul>
<li><a href="home.htm">首頁</a></li>
<li><a href="test.htm">網頁測試</a></li>
<li><a href="tools.htm">小工具</a></li>
</ul>
</div>
關於 jQueryUI 的頁籤參考 :
因為 tab 預設是佔滿整個頁面寬度 (頁籤靠左), 為了讓 logo 圖檔也能置中佔滿整個螢幕寬度, 所以將這個圖檔元素的 div 容器加上了 text-align: center 的樣式, 同時須給予一個 id 屬性, 用來根據 tab 頁籤來動態調整其寬度, 這就要用到 jQuery 物件的 width() 方法了, 此方法沒傳入參數為 getter, 會傳回物件之寬度, 有傳入參數時是 setter, 可設定元件之寬度, 控制程式碼如下 :
<script>
$(function(){
$("#tabs").tabs();
$("#logo").width($("#tabs").width());
});
</script>
首先是呼叫 tab 物件的 tabs() 方法初始化頁籤結構, 然後呼叫其 width() 方法取得頁籤的寬度, 並將其傳入 logo 圖檔物件的 width() 方法來設定圖檔寬度.
接下來只要製作 logo 圖檔再上傳到 GitHub 就可以了.
我的構想是用一個狐狸頭像再加上網站名稱就好了, 首先於 Picpick 新增一個 1040x100 的空白圖片, 打上微軟正黑體字型大小為 36 的紫色網站名稱 "小狐狸事務所 の 網路實驗室", 然後外面套個方框 :
左邊的空白就是放狐狸頭像的地方, 我用 "fox png free" 搜尋谷歌找到下面這個免費圖檔網站 :
挑中其中這張狐狸圖樣 :
下載後用 PicPick 開啟擷取其頭像並同比例縮小為高度 100px 的圖檔, 將其複製後貼到 logo 圖檔的左方空白區 :
哈哈, 果然簡單又樸素.
存檔為 logo.jpg 後先到 GitHub 個人網站根目錄下新增一個 images 子目錄 :
然後將此 logo.jpg 圖檔上傳到 GitHub 個人網站的 images 子目錄下即可.
最後修改原先的首頁檔 index.htm 如下 :
<!DOCTYPE html>
<html>
<head>
<title>小狐狸事務所 の 網路實驗室</title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.ui-widget {font-size:90%;}
</style>
</head>
<body>
<div style="text-align: center;">
<img id="logo" src="images/logo.jpg">
</div>
<div id="tabs">
<ul>
<li><a href="home.htm">首頁</a></li>
<li><a href="test.htm">網頁測試</a></li>
<li><a href="tools.htm">小工具</a></li>
</ul>
</div>
<script>
$(function(){
$("#tabs").tabs();
$("#logo").width($("#tabs").width());
});
</script>
</body>
</html>
將此 index.htm 上傳覆蓋原來的檔案就大功告成啦! 成果如下 :
在手機上瀏覽效果如下 :
可見頁首圖檔的確會隨螢幕大小而變.
其實也曾試用過 CSS3 新的寬度比例單位 vw, 也就是將 logo.jpg 的樣式設為 style="width: 100vw;", 這與以前的 100% 是類似效果, 但實測發現 100vw 會使圖檔右邊比頁籤多出一點, 調成 98vw 或 99vw 雖可改善, 但在手機上仍然會突出, 使頁面顯得不協調, 所以就不採用此方法了, vw 詳細用法參考 :
網站目前只是空殼子, 有空再來慢慢整理.
沒有留言 :
張貼留言