ads by google

แสดงบทความที่มีป้ายกำกับ NAVIGATION แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ NAVIGATION แสดงบทความทั้งหมด

วันจันทร์ที่ 22 เมษายน พ.ศ. 2556

สร้าง Link ด้วย CSS

เว็บที่ใช้แสดงผล http://www.kroovit.com/  ครูวิทย์สอนวิทยาศาสตร์

      ก่อนอื่นก็งูๆ ปลา ๆ เขียน CSS ไปลองผิดลองถุกไปเรื่อย พอเห็นว่าสวยดูดี ก็เอาเลย บ้างอันก็ Copy มาน่ะ แล้วมาเปลี่ยนแปลง ให้เป็นแนวของเรา งงอยู่เหมือนกัน ภาษาแต่ละภาษานี่แหละ ทำให้งง แต่ก้ได้ศึกษาเนื้อหาเบื้องต้นมาแล้วน่ะ ก็เนื้อหาก่อน ๆ หน้านี้ที่โพสไปล่ะครับ 
      แต่ว่าวันที่ก็เอา โค้ดที่ตัวเองเขียนมาเพื่อมาเผยแพร่เป็นวิทยาทานให้แก่ชาวโปรแกรมเมอร์ เว็บโปรแกรมเมอร์ทั้งหลาย ท่านที่ชำนาญก็สามารถติชมผมมาได้นะครับ ที่เมล์ผมเลย อิอิ ไม่อยากให้ติชมในนี้ ประจานความโง่เขลาของผมเอง 555 ส่วนเว็บโปรแกรมเมอร์มือใหม่ ก็สามารถ คัดลอก โค้ดไปศึกษาเนื้อหาได้เลยนะครับ ไม่หวงห้าม อีกอย่าง ถ้าต้องการดูตัวอย่างให้ไปดูได้ที่เว็บ ครูวิทย์สอนวิทยาศาสตร์ นะครับ หน้าแรกเลย ตัวอย่างเป็นอย่างนั้น ๆ แหละ ครับ  
    โปรแกรมมเมอร์สามารถปรับเปลี่ยนเนื้อหาสามารถคลิกไปคลิกมาได้นะครับ ลองดูละกัน ครับ 
ผมเอาโค้ดเค้ามาก้ลองเปลี่ยนค่าดู และ ลอง แสดงผลตัวอย่างดูเอา เปลี่ยนค่าไปเรื่อย ๆ หลาย ๆ ตัว จนได้เว็บเพจมาได้อย่างพอใจ เลยได้อย่างที่เห็ฯในเว็บตัวอย่างนี่แหละครับ 

Code CSS 
ที่ผมเขียนตอนนั้นผมเขียนโดยใช้ โปรแกรมดรีมเอเวอร์ 8  แต่ตอนนี้มาแก้ไขด้วยเวอร์ชั้น CS6 ก็ไม่ต้องกลัวอะไรนะครับ เพราะใช้ได้เหมือนกัน แล้วก็ไฟล์ที่ทำสำเร็จก็ไม่เปลี่ยนแปลงอะไร 

เอาแหละ ร่ำเพ่อ พรรณนามามากพอสมควรแล้ว เอาโค้ดไปดุกันเลยนะครับ 

#tables a {
display: block;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
padding: 0px;
font-size: 12pt;
text-decoration: none;
}

#tables a:hover{
padding: 20px;
list-style-position: outside;
color: #009;
text-align: center;
font-size: 12pt;
text-decoration: blink;
font-weight: bold;
background-color: #9F9;
letter-spacing: normal;
word-spacing: normal;
border-top-style: groove;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
 
}


ตัวอย่างที่เว็บ ครูวิทย์สอนวิทยาศาสตร์  ครับ

เขียนโดย ที่
ป้ายกำกับ: , , , , ,

วันอังคารที่ 11 ธันวาคม พ.ศ. 2555

การเพิ่ม NAVIGATION BAR


รายชื่อในส่วนบนของหน้า HTML ตั้งใจจะใช้เป็นเมนู navigation เวบไซด์หลายเวบมีการใช้เมนูวางเรียงไว้ด้านบนหรือไว้ด้านข้างของ หน้าและหน้านี้ก็ควรมีเช่นกันซึ่งเราจะวางไว้ด้านซ้ายเนื่องจากดูแล้วน่าแล้วน่าสนใจกว่าวางไว้ด้านบน
เมนูดังกล่าวนี้มีอยู่ในหน้า HTML แล้วโดยใช้ <ul>แสดงรายการไว้ด้านบนลิงค์ยังไม่สามารถใช้ได้เนื่องเวบไซด์ของเราในขณะนี้มี เพียงหน้าเดียวแต่ในขณะนี้เรื่องนั้นไม่สำคัญ แต่แน่นอนว่าสำหรับเวบไซด์จริงๆแล้วไม่ควรจะมีลิงค์ที่ใช้งานไม่ได้
ดังนั้นเราจะต้องย้ายรายชื่อลงมาอยู่ด้านซ้ายและย้ายข้อความที่เหลือทั้งหมดมาทางด้านขวาเล็กน้อยเพื่อให้มีพื้นที่ CSS property ที่เราใช้คือ 'padding-left' (สำหรับย้ายข้อความในส่วน body) และ 'position' 'left' และ 'top' (เพื่อย้ายเมนู)
ยังมีวิธีอื่นๆที่สามารถทำได้หากคุณดูในส่วน “column” หรือ “layout” ในหน้า Learning CSS (เรียนรู้ CSS)คุณจะเจอเทมเพลตที่ใช้ได้เลยหลายอันแต่ อันนี้ก็ใช้ได้เหมาะสมกับจุดประสงค์ของเรา
ในหน้าโปรแกรมแก้ไข ให้เพิ่มบรรทัดต่อไปนี้เขาไปในไฟล์ HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]
หากคุณเซฟไฟล์อีกครั้งและ reload ในบราวเซอร์ทีนี้คุณก็จะได้รายชื่อลิงค์ที่อยู่ทางด้านซ้ายของข้อความหลัก ซึ่งตอนนี้หน้าเวบนี้ก็ ดูน่าสนใจขึ้น
ภาพจากหน้าจอที่มีเมนูด้านซ้าย
ข้อความหลักย้ายไปอยู่ที่ด้านขวาและตอนนี้รายชื่อลิงค์ย้ายไปอยู่ที่ด้านซ้ายแล้วแทนที่จะอยู่ด้านบน
เดือน! ล่วงหน้า:การใส่ 'position: absolute' เป็นการบอกว่า element ul ถูกวางไว้แยกออกจากข้อความที่มาก่อนหรือหลังภายในเอกสารและการใช้ 'left' และ 'top' ก็เพื่อแสดงให้รู้ว่าอยู่ในตำแหน่งใด ในกรณีนี้ คือ 2em จากด้านบนและ 1em จากด้านซ้ายของหน้าต่าง
'2em' หมายถึง 2 เท่าของขนาดฟอนท์ปัจจุบันเช่น ถ้าเมนูใช้ฟอนท์ขนาด 12 point ดังนั้น '2em' จะเท่ากับ 24 point 'em' เป็นหน่วย การวัดประเภทหนึ่งที่มีประโยชน์ในการใช้ CSS เนื่องจากสามารถนำมาใช้กับฟอนท์ที่ผู่อ่านมักจะใช้ได้โดยอัตโนมัติ บราวเซอร์ส่วนใหญ่ มีเมนูที่ไว้เพิ่มหรือลดขนาดของฟอนท์คุณจะเห็นได้ว่าขนาดของเมนูจะเพิ่มเมื่อขนาดของฟอนท์เพิ่มซึ่งจะไม่เป็นไปตามนั้นหากในกรณี ที่เราใช้หน่วยเป็นพิกเซลแทน
เขียนโดย ที่
ป้ายกำกับ: , ,
สมัครสมาชิก: บทความ (Atom)