จากตอนที่แล้ว http://callmebird.com/weblog/using-image-as-link
วันนี้มีอีกวิธีนึง จะเขียนไว้กันลืม
ใช้แท็ก <a> เหมือนเดิม
-
<a class="imagelink" href="#">xxx.com</a>
การสร้าง element เพื่อบรรจุข้อความในเว็บบ่อยครั้งที่เรา
ไม่สามารถคาดการณ์ได้ล่วงหน้าว่าข้อความจะมีความยาวเท่าไหร่
ถ้าหากใช้ height กำหนดความสูงให้กับ element ก็จะเกิดปัญหา
เมื่อข้อความใน element นั้นยาวเกินกว่าที่ element นั้นจะบรรจุไว้ได้
ส่งผลกระทบต่อ element อื่น ๆ ในหน้าเว็บ เพราะความสูงยังคงเท่าเดิม
ไม่ได้ขยายไปพร้อม ๆ กับตัวอักษรที่ล้นออกไป ทำให้เกิดปัญหา
ข้อความซ้อนทับกัน
การที่เราจะเขียนเว็บไซต์ที่ใช้ style sheet โดยเฉพาะแบบ tablelessให้ cross browser
มาสักเว็บนึง เป็นเรื่องที่ยากลำบาก เพราะ web brower รุ่นเก่า มาตรฐานการ render จะต่าง
จาก web browser รุ่นใหม่ แม้กระทั่งยี่ห้อเดียวกัน แต่ต่างรุ่น ก็แสดงผลต่างกัน เช่น IE6 กับ
IE7 ที่แสดงผลบางอย่าง ไม่เหมือนกัน ดังนั้น เพื่อให้บรรลุวัตถุประสงค์(ทำเว็บ cross browser)
เราก็ต้องอาศัย การ hack css เข้าช่วย
ตัวอย่างคำสั่งที่ทำให้ <div> สามารถกลายเป็น link ได้ อีกทั้งเมื่อเอาเมาส์ไปโอเวอร์ก็ให้ cursor เป็นรูปมือ มีดังนี้
-
-
<div style="cursor: pointer; cursor: hand;" onclick="window.location = ‘/process/enterprise/training/change_index.shtml’;">
-
BlahBlah</div>
เพียงแค่นี้ ไม่ว่าจะเป็น div หรือ อะไรก็ตามก็สามารถเป็น link ได้หมด
framework คือ
ชุดเครื่องมือ ไลบรารี่ แนวทางในการเขียนแอปพริเคชั่น ช่วยลดการเขียนโคดที่ต้องเขียนบ่อย ๆ ให้อยู่ในรูปแบบที่พร้อมในการใช้งานได้ พูดง่าย ๆ คือ โคดที่ต้องมีในทุก ๆ โปรเจ็คหรือโคดพื้นฐานทั่วไป เราไม่ต้องเสียเวลาเขียนขึ้นใหม่ หน้าที่ของเราคือเขียนโคดที่จะทำให้แอปพลิเคชั่นบรรลุวัตถุประสงค์
CSS framework คือ
ชุดของไฟล์ css ที่ได้จัดเตรียมการจัดรูปแบบพื้นฐาน รูปแบบฟอร์ม grid เลย์เอาท์ ไว้ให้ใช้ โดยเราไม่จำเป็นต้องเขียนโคดซ้ำ ๆ เช่น เรามีงานออกแบบเว็บไซท์ 10 โปรเจ็ค ทุกโปรเจ็คจะต้องมีบางสิ่งที่คล้ายกัน ไอ้สิ่งที่คล้ายกันนี้เราก็ไม่จำเป็นต้องเขียนซ้ำแล้วซ้ำอีก
การออกแบบเว็บในยุคก่อน(ปัจจุบันก็ยังใช้กันอยู่)จะใช้ <table> ในการวางเลเอาท์ ดังตัวอย่างต่อไปนี้
-
<html>
-
<head>
-
<title> my website </title>
-
<meta name="keywords" content="joe bloggs’ website, site, pages,">
-
<meta name="author" content="joe bloggs">
-
-
<link href="stylesheet.css" rel="stylesheet" type="text/css">
-
</head>
-
<body>
-
-
<table id="main">
-
<tr><td>
-
<img src="images/bla.gif" align="left" alt="layout image 1"><br />
-
</td></tr>
-
<tr><td>
-
<h1>Welcome to my website</h1>
-
<p>This is my wonderful website with funky content and groovy images!</p>
-
</td></tr>
-
</table>
-
-
</body>
-
</html>
