作者: Fred F.M. Wang (FW知識瑣記) 日期:2022-6-21
網站設計時需要使用圖示，但常需自行製作或購買然後上傳網站，如何免製作免上傳圖示直接使用圖示的方法。
1 直接使用字元集或HTML符號 : 參考 https://www.htmlsymbols.xyz/
1.1 ASCII標準字元集 : 範圍: 十進制 0~127
1.2 UTF-8擴充字元集 : 範圍: 十進制 128~1327
1.3 HTML符號 : 範圍: 十進制 8192~129501
2 使用網路圖示庫 Font Awesome Icons
3 使用網路圖示庫 Bootstrap Icons
4 使用網路圖示庫 Google Icons
2~4 參考 https://www.w3schools.com/icons/icons_reference.asp
作者: Fred F.M. Wang (FW知識瑣記) 日期: 2021-12-20
可用性設計與用戶體驗這門學問在網頁設計已經談了很多年了，還是有很多網站犯了一些糟糕的錯誤。下面是筆者認為糟糕的三類網頁設計。
第一類，干擾用戶閱讀內容
第二類，操作困難
第三類，視覺效果不佳
作者: Fred F.M. Wang (FW知識瑣記) 日期: 2021-9-29
網頁中如何設計一個表頭固定但內容可以捲動的表格
要讓表格表頭固定，內容可以捲動，首先，table header(thead)與table body(tbody)必須各
自設定顯示方式為block(CSS設定 display: block;)，但是，table header(thead)與table body
(tbody)各自設定為block時，表頭與內容的欄位寬度就無法對齊。因此，必須透過Javascript設定table header欄寬與table body的欄寬一致
==================================================
<style>
thead.fixedHeader { display: block; }
thead.fixedHeader tr th { padding: 4px 0px!important; }
tbody.scrollContent {
display: block;
overflow: auto;
}
</style>
<table id="itemtable">
<thead id="itemheader" class="fixedHeader">
<tr>
..
</tr>
</thead>
<tbody id="itemcontent" class="scrollContent">
<tr>
..
</tr>
</tbody>
=============================================
<script type="text/javascript">
$( document ).ready(function () {
// 設定捲動區域，區域底部不要超過視窗底部
var content_y = get_offset_y("itemcontent"); // 取得table body畫面左上角的座標y位置
var content_height = window.screen.height - content_y - 200; // 設定table body的高
document.getElementById("itemcontent").style.height= content_height + "px";
// 設定table header欄寬與table body的欄寬一致 by Fred
var theader = document.getElementById("itemheader");
var tbody = document.getElementById("itemcontent");
row0 = theader.rows[0]; // table header row
row1 = tbody.rows[0]; // table body 1st row
// 逐一設定table header每一欄欄寬等於table body每一欄的實際顯示寬度
for (var j = 0; j < row1.cells.length; j++) {
row0.cells[j].style.width = (row1.cells[j].offsetWidth - 1) + "px"; // offsetWidth:實際顯示
寬度，注意要減一，否則無法對齊
}
/* 取得一個HTML元素在畫面中的位置(左上角的座標y位置) */
function get_offset_y(id) {
var e = document.getElementById(id);
var offset = {x:0,y:0};
while (e)
{
offset.x += e.offsetLeft;
offset.y += e.offsetTop;
e = e.offsetParent;
}
if (document.documentElement && (document.documentElement.scrollTop
|| document.documentElement.scrollLeft)) {
offset.x -= document.documentElement.scrollLeft;
offset.y -= document.documentElement.scrollTop;
} else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
offset.x -= document.body.scrollLeft;
offset.y -= document.body.scrollTop;
} else if (window.pageXOffset || window.pageYOffset) {
offset.x -= window.pageXOffset;
offset.y -= window.pageYOffset;
}
// alert(offset.x + '\n' + offset.y);
return offset.y
}
</script>
註: 取得一個HTML元素在畫面中的位置參考來源https://stackoverflow.com/questions/211703/is-it-possible-to-get-the-position-of-div-within-the-browser-viewport-not-withi
作者: Fred F.M. Wang (FW知識瑣記) 日期:2021-3-7
開發同仁或客戶通訊錄網頁時，可以透過通訊錄中的郵件地址連結，開啟預設電子郵件軟體的
新信件, 收件人為特定對象的郵件地址，方式如下 :
<a href="mailto:郵件地址"> Email: 郵件地址 </a>
如果要在網頁中開啟與特定對象Skype或QQ軟體的對話窗要如何做到呢? 方法如下 :
Skype :
<a href='skype:Skype帳號?chat'>Skype: Skype帳號</a>
QQ:
<a href='tencent://message/?uin=QQ號碼&Site=qq&Menu=yes'>QQ: QQ號碼</a>
<form action="form_action.php" id="signupForm" method="get">
...輸入資料...
<input type="submit" value="Submit" />
</form>
如果少這行就不會正常呼叫後台檢查表單內容的程式。 $('#signupForm').submit(...) 內的程式碼，如果使用GET方式傳遞參數時, 部分參數內容無法傳遞
, 例如參數值有"XXX" 時就無法傳遞，改用POST就沒有問題，因此，建議一律採用POST方式傳遞資
料給後台程式。
$('#signupForm').submit(...) 程式 (如果不寫unbind, 會重複執行這段Ajax程式)。
$('#signupForm').submit(function(event){
event.preventDefault(); // 取消表單預設送出Submit動作
$.ajax({
url: 'check_signup.php', // 後台檢查表單內容的程式
method: 'POST',
data: {user_name:$('#user_name').val(),email:$('#email').val(),
first_name:$('#first_name').val(),last_name:$('#last_name').val(),
password:$('#password').val(),password2:$('#password2').val(),},
dataType: 'json',
success: function(data){ // 表單內容檢查完畢
for(var input_field in data){
$('#'+input_field+'-error').html(data[input_field]);
}
var if_signup = true;
for(var key in data){
if(data[key]!==""){
if_signup = false;
break;
}
}
if(if_signup){ // 檢查無誤
this.unbind('submit');
this.submit();
}
}
});
作者： Stoyan Stefanov 2010
作者： Addy Osmani 2007
作者： Harmes, Ross/ Diaz, Dustin 2008
作者：Simon Timms 2014