Author: sarinya.k

CSS : การตกแต่ง link

โค้ด css จะใช้ในการตกแต่งส่วนต่างๆของหน้าเว็บไซต์ให้มีความสวยงาม คราวนี้เราจะมาอธิบายในส่วนของการใส่สีส่วนต่างๆของ link ที่อยู่ภายใต้ <style>…</style>

a:link จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ที่แสดงปกติ a:visited จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ที่ผู้ใช้งานเคยคลิกแล้ว a:hover จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ในเวลาที่เลื่อนเมาส์เข้าไปยังบริเวณ link นั้นๆ a:active จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ในเวลาที่ผู้ใช้งานกดคลิก link นั้นๆ   ตัวอย่างการตั้งค่า

ผลลัพทธ์ที่ได้ a:link ตั้งค่า background เป็นสีเหลือง จึงแสดงผลลัพธ์นี้เป็นค่าเริ่มต้นสำหรับ link a:hover ตั้งค่า background เป็นสีเขียวอ่อน จึงแสดงผลลัพธ์นี้เมื่อผู้ใช้งานนำเมาส์ไปวางบริเวณ link a:active ตั้งค่า background เป็นสีชมพู จึงแสดงผลลัพธ์นี้ในขณะที่ผู้ใช้งานคลิกเมาส์ที่ตัว link a:visited ตั้งค่า background เป็นสีฟ้า จึงแสดงผลลัพธ์นี้หลังจากกลับมาที่หน้าเดิมที่เคยคลิก link ดังกล่าวไปแล้ว  

CSS : การใช้ cursor

ปกติแล้วเวลาใช้งานเว็บไซต์ต่างๆ CURSOR หรือเมาส์ที่ชี้มักจะแสดงในรูปลูกศร หรือเป็นรูปมือเวลาเลื่อนเมาส์ไปชี้ที่ LINK ต่างๆ แต่ถ้าต้องการตกแต่งเว็บไซต์ให้มีความน่าสนใจยิ่งขึ้น การเปลี่ยนรูป CURSOR ก็เป็นอีกเทคนิคหนึ่งที่สามารถทำได้ง่ายๆ การเปลี่ยนรูป CURSOR สามารถเขียนด้วย CSS ด้วยคำสั่งนี้ cursor: รูปแบบที่ต้องการให้แสดง;   ตัวอย่างการใช้ <a href=”https://www.yourlink_url.com” style=”cursor:crosshair“>ลากเมาส์มาตรงนี้</a>   ผลลัพธ์ ลากเมาส์มาตรงนี้  เมื่อเลื่อนเมาส์ไปชี้ จะสังเกตได้ว่า CURSOR จะแสดงผลต่างไปจากปกติ ซึ่งเป็นไปตามรูปแบบที่เรากำหนด ซึ่งรูปแบบของ CURSOR ภายใต้คำสั่ง CSS ที่สามารถเปลี่ยนรูปแบบได้หลายรูปแบบ อย่างเช่นรูปนี้ Credit : http://coursesweb.net/css/css-cursor-property-custom-cursors https://www.webcodegeeks.com/css/css-cursor-pointer-example/ http://www.codetukyang.com/html/technic/mouseover_chg_cursor.htm

CSS : การใช้ overflow ในการจำกัดพื้นที่แสดงข้อมูล

กรณีที่เราอยากจัด layout บนหน้าเว็บเพจให้สวยงาม โดยกำหนดว่าอยากจะให้ข้อมูลแสดงภายในขนาดพื้นที่ๆจัดไว้ เราสามารถกำหนด style ด้วยคำสั่ง overflow เพื่อช่วยจัดการในกรณีที่ข้อมูลมีเนื้อหาหรือขนาดใหญ่เกินพื้นที่ๆกำหนดได้ ด้วยคำสั่ง   – overflow: รูปแบบที่ต้องการให้แสดง;   overflow สามารถแสดงผลในรูปแบบต่างๆ ตามตัวอย่าง โดยสมมติกำหนดพื้นที่แสดงข้อมูลเป็นพื้นที่สีฟ้า เมื่อเขียนคำสั่งรูปแบบต่างๆจะให้ผลต่างกันดังนี้  overflow: visible แสดงข้อมูลที่ต้องการทั้งหมด overflow: hidden ซ่อนข้อมูลส่วนที่ล้นเกินพื้นที่ overflow: scroll แสดงข้อมูลทั้งหมดภายใต้พื้นที่ที่กำหนด โดยใช้ scroll bar แสดงผลส่วนที่ล้น overflow: auto แสดงผลอัตโนมัติ ถ้าข้อมูลเกินก็จะมีแถบ scroll bar ขึ้นให้ (ในรูปตัวอย่างข้อมูลเกิน จึงแสดงผลเหมือน scroll)  

การทำตัวอักษรวิ่งด้วย HTML

นอกจากการเขียนเนื้อหาเว็บไซต์ด้วยตัวอักษรธรรมดาแล้ว ในการเขียนเว็บด้วย HTML ยังสามารถเพิ่มลูกเล่นให้กับตัวอักษรด้วยการกำหนดให้ตัวอักษรสามารถเคลื่อนไหวได้อีกด้วย ซึ่งสามารถเพิ่มความน่าสนใจให้กับเว็บนั้นๆได้ แถมวิธีการเขียนก็ไม่ยุ่งยาก ตัวโค้ดที่ใช้ ได้แก่ <marquee direction=”ทิศทางการวิ่ง” width=”ความกว้าง” height=”ความสูง” scrollamount=”ความเร็วในการวิ่งของตัวอักษร” scrolldelay=”เวลาหน่วง”>ข้อความที่จะแสดง</marquee>   ในการเขียนคำสั่งสร้างตัวอักษรที่มีการเคลื่อนไหว เราจะเขียนภายใต้ <marquee> และปิดด้วย </marquee> ทีนี้ ในการตั้งค่าตัวอักษรว่าจะให้เคลื่อนที่อย่างไร จะมาเซตในส่วนของ <marquee> – direction=”ทิศทางการวิ่ง” เป็นการกำหนดทิศทางการวิ่งของตัวอักษร มี 4 อย่าง ได้แก่ <marquee direction=”left”>ข้อความวิ่งจากขวาไปซ้าย</marquee> <marquee direction=”right”>ข้อความวิ่งจากซ้ายไปขวา</marquee>  <marquee direction=”up”>ข้อความวิ่งจากล่างขึ้นบน</marquee> <marquee direction=”down”>ข้อความวิ่งจากบนลงล่าง</marquee> – width=”ความกว้าง” เป็นการกำหนดความกว้างของบรรทัดตัวอักษรที่จะวิ่ง (มักใช้กรณีกำหนดทิศทางการวิ่งแบบ left หรือ right) ใช้กำหนดได้ทั้งตัวเลขโดดๆและแบบเป็นเปอร์เซนต์ – height=”ความสูง” เป็นการกำหนดความสูงของบรรทัดตัวอักษรที่จะวิ่ง (มักใช้กรณีกำหนดทิศทางการวิ่งแบบ up หรือ down) ใช้กำหนดได้ทั้งตัวเลขโดดๆและแบบเป็นเปอร์เซนต์เช่นเดียวกับการกำหนดความกว้าง – scrollamount=”ความเร็วในการวิ่งของตัวอักษร” และ scrolldelay=”เวลาหน่วง” เป็นการกำหนดความเร็วในการวิ่งและกำหนดความหน่วงของ โดยกำหนดเป็นตัวเลข ถ้าตัวเลขมากก็ยิ่งเร็วมาก ตัวเลขน้อยก็ยิ่งช้า   เพิ่มเติม หากต้องการเซตให้ข้อความวิ่งไปวิ่งมา จะเซตด้วย behavior=”alternate” เช่น <marquee behavior=”alternate”>ข้อความที่ต้องการ<marquee> นอกจากนี้ […]

การทำ Datasource และกำหนดค่าเริ่มต้นให้กับ Combobox (ASP.NET C#)

DropDownList กับ Combobox มีความคล้ายคลึงกันในแง่ของการเอาไปใช้งาน และในส่วนของการตั้งค่า Datasource สำหรับตัว DropDownList กับ Combobox เองก็มีความคล้ายคลึงกัน ดังนี้ ชื่อ combobox.Item.Clear(); ชื่อ combobox.TextField = ชื่อ col ของ dataset; ชื่อ combobox.ValueField = ชื่อ col ของ dataset; ชื่อ combobox.DataSource = ชื่อของ dataset; ชื่อ combobox.DataBind(); ตัวอย่างโค้ด จะเห็นได้ว่าโค้ด มีความคล้ายคลึงกันมากในส่วนการนำค่า Dataset มากำหนดค่าให้กับ แต่จะมีข้อแตกต่างเล็กน้อยในกรณีที่มีการกำหนด index หรือการกำหนด combobox ค่าใดค่าหนึ่งเริ่มต้นไว้ ดังรูป สิ่งที่ใช้ในการเซตค่าเริ่มต้น นั่นคือส่วน .Value ชื่อ combobox.SelectIndex = -1; ชื่อ combobox.Value = ค่าที่กำหนด; .SelectIndex ปกติแล้วจะใช้ในการกำหนด index […]

พัฒนาระบบเก็บวัสดุและครุภัณฑ์สำนักงาน สำหรับใช้งานภายในสำนักวิทยบริการ

การพัฒนาระบบเก็บวัสดุและครุภัณฑ์สำนักงาน จะมีสองระบบ คือ 1) ระบบเก็บครุภัณฑ์สำนักงานจะดึงข้อมูลจากฐานข้อมูล ERP (ระบบบริหารทัพย์สินภายในมหาวิทยาลัย) เพื่อเชื่อมโยงกับเลขครุภัณฑ์ ส่วน 2) ระบบเก็บวัสดุ จะเป็นการเก็บข้อมูลที่นอกเหนือจากข้อมูลในระบบ ERP เพื่อให้สะดวกต่อการบริหารจัดการวัสดุสำนักงาน ระบบวัสดุ เป็นส่วนหนึ่งของระบบบริหารจัดการครุภัณฑ์และวัสดุ ระบบที่ใช้บันทึกการเบิกวัสดุภายในสำนักวิทยบริการ ที่สามารถสร้างและแก้ไขรายละเอียดเกี่ยวกับวัสดุและใบเบิกวัสดุได้ ภายในระบบประกอบด้วย ระบบบันทึกรายละเอียดวัสดุ จะเป็นการบันทึกรายการวัสดุที่มีในคลังของสำนักวิทยบริการ ในหน้าวัสดุจะแสดงรายการวัสดุทั้งหมดและรายละเอียด เช่น วัสดุมีอะไรบ้าง เป็นชนิดไหหน ใช้งบใดในการจัดซื้อ จำนวนที่จัดซื้อ ราคาต่อหน่วย ยอดคงเหลือปัจจุบัน เป็นต้น ระบบบันทึกใบเบิกวัสดุ จะเป็นการบันทึกรายละเอียดการเบิกจ่ายวัสดุให้แก่บุคลากรของสำนักวิทยบริการ ในหน้าใบเบิกวัสดุจะแสดงรายละเอียดโดยรวมเกี่ยวกับใบเบิกวัสดุ เช่น ชื่อผู้เบิก ผู้จ่าย วัสดุที่เบิก ยอดคงเหลือ วันที่ทำการเบิก วันที่ทำการจ่าย เป็นต้น   วิธีการเข้าใช้ ทำการล๊อคอินเข้าใช้ ด้วย username rmutp passport พิมพ์ password กดปุ่มเข้าสู่ระบบ ถ้าล๊อคอินสำเร็จ ระบบจะเข้าสู่หน้าส่วนกลางเพื่อเลือกโหมดการใช้งาน   วิธีเพิ่มรายการวัสดุ […]

HTML : การใส่ลูกเล่นให้รูปภาพเปลี่ยนรูปเมื่อนำเมาส์ไปชี้

การใส่ลูกเล่นให้กับรูปภาพที่นำมาประกอบบนเว็บไซต์เป็นอีกหนึ่งในวิธีเพิ่มความน่าสนใจให้แก่เว็บไซต์ คราวนี้เราจะมานำเสนอการใส่รูปภาพที่มีลูกเล่น สามารถเปลี่ยนรูปได้เมื่อนำเมาส์ไปชี้ที่รูปภาพ และรูปจะเปลี่ยนกลับคืนเมื่อนำเมาส์ออกห่างจากรูป ซึ่งสามารถเขียนจากโค้ดได้ ดังนี้ <img src=”urlรูปภาพที่ 1” border=”0″ onmouseover=”this.src=’urlรูปภาพที่ 2‘;” onmouseout=”this.src=’urlรูปภาพที่ 1‘;” /> ตัวอย่างการใส่โค้ด : ในการนำรูปภาพมาใส่ลูกเล่น ให้นำ url รูปภาพมากำหนดให้กับค่า src ซึ่งจะต้องตรงกับ url ที่ใช้กับ onmouseout (ตามตัวอย่างใช้ไอคอนพื้นหลังสีฟ้า) ในขณะที่ url ที่ใช้กับ onmouseover จะกำหนดเป็นอีก url หนึ่ง (ตามตัวอย่างใช้ไอคอนพื้นหลังสีเขียว) ซึ่งจะแสดงผลได้ดังนี้ ลักษณะรูปภาพในหน้าเว็บปกติ จะแสดงรูปที่ 1 (url รูปใน src และ onmouseout)   เมื่อนำเมาสืชี้ไปที่รูปภาพไอคอนที่เชตไว้ ลักษณะรูปภาพในหน้าเว็บจะเปลี่ยนเป็นรูปที่ 2 (onmouseover) ทั้งนี้ หากผู้ใช้นำเมาส์ออกห่างจากพื้นที่ของรูปภาพ รูปภาพเดิมที่เซตไว้ก็จะกลับคืนมาเป็นหน้าเว็บไซต์ปกติ

การใส่ Placeholder ลงใน Text input

Placeholder คือข้อความตัวอย่างหรือคำอธิบายที่ใส่ text input เพื่ออธิบายคุณลักษณะของ text หรือ textarea หรือกระทั่งใช้ในการยกตัวอย่างรูปแบบข้อความที่อยากให้ผู้ใช้งานกรอกลงในหน้าเว็บไซต์ เช่น รูปแบบการกรอกอีเมล หรือ ตัวอย่างการกรอก url เพื่อแสดง link website Code ที่ใช้ : placeholder=“ตัวอย่างข้อความ”   ตัวอย่างการใช้ : จะแสดงผลได้ดัวตัวอย่าง : ตัวอย่างเมื่อทำการกรอกข้อมูล : แสดงให้เห็นว่า เมื่อกำหนด placeholder ให้แก่ text input แล้ว ข้อความหรือคำดังกล่าวจะไปแสดงใน text input ซึ่งข้อความดังกล่าวจะเป็นเพียงตัวอย่าง ไม่ใช่ input จริง ดังนั้น ผู้ใช้งานจะสามารถกรอกข้อมูลทับได้ และหากลบข้อความที่ input เข้าไป ข้อความตัวอย่างก็จะปรากฎอีกครั้ง

การเซตค่าให้กับ DropdownList (ASP.NET C#)

ในการตั้งค่า Datasurce สำหรับตัว DropDownList จากตาราง ปกติสามารถเซตได้จากการเซตที่หน้า layout โดยเลือกจากไอเท็ม แต่ทั้งนี้ ในการเซตค่าก็สามารถดึงค่า DataTable เขียนผ่านโค้ดได้เช่นกัน ด้วยการเขียนชุดคำสั่งดังนี้ DropDownList1.DataSource = ชื่อ DataSet/DataTable; DropDownList1.DataTextField = ชื่อ Col; DropDownList1.DataValueField = ชื่อ Col; DropDownList1.DataBind(); อธิบายโค้ด : – DropDownList1.DataSource คือการตั้งค่า DataSource ให้กับตัว DropDownList (ซึ่งชื่อ DropDownList ในที่นี้คือ DropDownList1) ในการเขียนให้นำชื่อ DataSet หรือ DataTable ที่ต้องการมาเติมหลังเครื่องหมายเท่ากับ – DropDownList1.DataTextField ส่วนนี้คือการกำหนด Text ที่จะแสดงบนตัว DropDownList โดยเวลาเซต ต้องเลือกจากชื่อ Column ของ DataTable ที่เลือกมา […]

การสร้างปุ่มปิดซ่อนข้อความ ด้วย html

ในการเขียนบล๊อกหรือเว็บไซต์ บางครั้งผู้เขียนอาจต้องการใส่ลูกเล่นในการซ่อนข้อความบางอย่างไม่ให้แสดง และให้ผู้อ่านสามารถเลือกปิด-เปิดข้อความเองได้ เช่น เมื่อกดปุ่ม ข้อความที่ซ่อนจะปรากฏ… วิธีการซ่อนข้อความดังกล่าวสามารถทำได้ดังนี้ จากโค้ด จะแบ่งคร่าวๆได้ 2 ส่วน คือ 1. ส่วนที่เกี่ยวกับปุ่มที่ใช้สั่งเปิดหรือปิดข้อความ จะอยู่ภายใต้แท็ก <button>  ซึ่งสามารถกำหนดค่า id ให้กับปุ่มในส่วนของ getElementById(‘ชื่อไอดี’) (ในตัวอย่างใช้ชื่อไอดีว่า spoiler) เพื่อใช้แยกแยะแต่ละปุ่ม ส่วนข้อความที่แสดงบนปุ่มนั้น สามารถกำหนดในตำแหน่งที่วงด้วยเส้นสีเขียว (ในตัวอย่างใช้คำว่า เปิด/ปิด) 2. ส่วนที่เกี่ยวข้องกับข้อความ จะอยู่ภายใต้แท็ก <div> ซึ่งเราจะสามารถใส่ข้อความที่ต้องการซ่อนลงไปในตำแหน่งที่วงด้วยเส้นสีม่วง   ทั้งนี้ ในการสร้างปุ่มซ่อนข้อความ สามารถกำหนดให้แสดงข้อความใต้ปุ่มหรือแสดงข้อความเหนือปุ่มก็ได้ โดยการเรียงโค้ดทั้งสองส่วนตามลำดับ เช่น ถ้าอยากให้ข้อความอยู่เหนือปุ่ม ให้เขียนโค้ดส่วนที่ 2 ขึ้นก่อนโค้ดส่วนแรก Credit : http://www.allbloggertricks.com/2013/05/how-to-add-openclose-button-to-blogger.html