Download
1 / 63
630 likes | 704 Views
1106 211 Web Design and Implementation. Week 5 : CSS. CSS.
E N D
1106 211 Web Design and Implementation Week 5 : CSS
CSS CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น
ประโยชน์ของ CSS • 1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว2. เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร 4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser5. สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี
โครงสร้าง CSS • คำสั่งของ CSS ประกอบด้วย selector, property และ value • - selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
ตัวอย่างคำสั่ง CSS • กำหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำ และวางอยู่กึ่งกลาง • /* selector ที่เป็น HTML Tag */p {color:#000000;text-align:center;}
หน่วยที่ใช้ใน CSS • หน่วยแบบ Relative Length (กำหนดแบบอัตราส่วน) • px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น 1px, 4px • em (emphasize, ความสูงของตัวอักษร) เป็นขนาดจำนวนเท่าของขนาด font ที่กำหนดให้ body ถ้า font ที่ body กำหนดเป็น 10px h1{fon-size:1.5em} h1 จะมีขนาดเป็น 1.5 เท่า ของ 10px = 15px h2{fon-size:1.4em} h2 จะมีขนาดเป็น 1.4 เท่า ของ 10px = 14px และถ้าเรากำหนดเป็น 1em ก็จะมีขนาด้เท่ากับ 10px เหมือนเดิม • ex (x-height, ความสูงของตัวอักษร "x") เช่น 1.5ex, 2ex • %(percent, สัมพันธ์กับขนาดหน้าจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู่) เช่น 50%, 130%
หน่วยที่ใช้ใน CSS • หน่วยแบบ Absolute Length (กำหนดตายตัว) • in (inches; 1in=2.54cm =72pt =6pc) เช่น 2in, 1.5in • cm (centimeters; 1cm=10mm) เช่น 2cm, 1.11cm • mm (millimeters) เช่น 50mm, 0.8mm • pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เป็นหน่วยที่ใช้ในงานสิ่งพิมพเช่น 12pt, 20pt • pc (picas; 1pc=12pt) เช่น 1pc, 2pc
การกำหนดสี Color CSS • การกำหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุ สามารถกำหนดได้หลายแบบ1. กำหนดโดยใช้ชื่อสี แต่การระบุชื่อสีแบบนี้ใช้สีได้จำนวนจำกัด ได้แก่ aqua, black, blue, fuchsia (แดงอมม่วง), gray, green, lime, maroon (น้ำตาลแดง), navy, olive, purple, red, silver, teal (เขียวขนเป็ด), white, และ yellow 2. กำหนดเป็นค่าสีแบบ RGB • #rrggbb เช่น #eecc00, #42e15e • #rgb เช่น #ec0 หมายถึง #eecc00 • rgb(x,x,x) โดยที่่ x คือจำนวนเต็มตั้งแต่ 0-255 เช่น rgb(0,204,0) • rgb(y%,y%,y%) โดยที่ี่ y คือเปอร์เซ็นต์ตั้งแต่ 0%-100% เช่น rgb(0%,80%,0%)
CSS Box Model • เราสามารถใช้ CSS ในการควบคุม style ของ content boxes ได้ • Box ใน html แบ่งเป็น สองประเภท • Block : box ที่อยู่ใน levelนี้ ยกตัวอย่างเช่น paragraph สามารถบรรจุ box ที่เป็น block หรือ inline ก็ได้ • Inline : เป็น box ที่มีเนื้อหา อยู่ภายใน block ไม่สามารถสร้าง block ใหม่ได้ • <body> เป็นcontaining boxและมี box ย่อยๆภายใน ภายใน box ย่อยนั้นสามารถมี box อีกได้
CSS Box Model ทดสอบ Block and Inline box <h1>heading text</h1> <p> <p>line of text within the paragraph</p> <p>line of text within the paragraph</p> <p>line of text within the paragraph</p> </p>
CSS Box Model • เราสามารถใส่รูปแบบการแสดงของ box ทั้งแบบ block และ inline โดยใช้ attribute ‘display’ • Display property ส่วนใหญ่จะใช้กับ การทำเมนูในแนวนอน โดยใช้คำสั่ง list ทดสอบ li { display: inline; list-style-type:none; } <ul> <li><a href=“url”>Home</a></li> … <li><a href=“url”>Contact</a></li> </ul>
CSS Box Model • Box model คือการจัดรูปแบบกล่องสีเหลี่ยมที่มีเนื้อหาอยู่ภายใน เช่น box paragraph • แต่ละbox จะประกอบด้วย 3 ส่วน • Border กรอบของ box • Marginพื้นที่ว่างระหว่างbox และ containing box จะเป็น transparent เสมอ • Padding พื้นที่ว่างระหว่าง border และcontent
Box border กรอบของ box หรือ element สามารถกำหนดได้ด้วย property • border • border-left • border-right • border-top • border-bottom • border-width • border-color • border-style • Border-(left/right/top/bottom)-style • border-(left/right/top/bottom)-width
Box border Styleต่างๆของ border
Box border ทดลอง p{ border: 2em; border-style: solid; border-color: black }
Box border ทดลอง p{ border: 2px; border-style: solid; border-color: black margin-left: 10px; margin-top: 10px; }
Box border ทดลอง p{ border: 2px; border-style: solid; border-color: black margin-left: 10px; margin-top: 10px; padding-top: 10px; / padding-left: 10px; /padding: 10px; }
Box border ทดลอง p{ border: 2px; border-style: solid; border-color: black margin-left: 10px; margin-top: 10px; padding-top: 10px; / padding-left: 10px; /padding: 10px; }
Margin and Padding browser อาจตั้งค่า default ของ margin และ padding ไว้ ถ้าเราไม่ต้องการ สามารถกำหนดค่า margin ไว้เป็น ‘0’ เลย body{ margin:0; padding:0; }
CSS name and id การกำหนด ชื่อ ให้กับ สไตล์ ของ CSS เราสามารถกำหนดได้ 2 รูปแบบ • Class - เป็นการกำหนดชื่อรูปแบบ CSSที่แท็กสามารถเรียกใช้ซ้ำได้ • Id - เป็นการกำหนดรูปแบบ CSS ที่สามารถกำหนดให้ได้เพียง element เดียวเท่านั้น ทดลอง การกำหนด classs .ax {…} การกำหนด id #ax {…}
วิธีใช้งาน CSS • 1. InlineStyles- วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เีพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style="" ดังนี้ • <Tagstyle="property:value;"> • <html><body><h1 style="color:red; font-family:Arial">วิธีดูแลรักษาสุขภาพ</h1><p style="color:black; font-family:Arial; font-weight:bold">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p> </body></html>
วิธีใช้งาน CSS • 2. Internal Style Sheet- วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำสั่ง Style Sheet ไว้ระหว่าง <head>...</head> • <style type="text/css"><!-- selector {property1: value1; property2: value2}....--></style>
วิธีใช้งาน CSS <html> <head> <style type="text/css"> <!– h1{color:red; font-family:Arial } p{color:black; font-family:Arial; font-weight:bold } --> </style> </head> <body> <h1>วิธีใช้งาน CSS </h1> <p>CSS ช่วยให้งานดีไซน์ของคุณดีขีืน</p> </body> </html>
วิธีใช้งาน CSS • 3. External Style Sheet - วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำเอาคำสั่ง Style Sheet ที่อยู่ใน <style type="text/css"> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet ชุดนี้ ไว้ในส่วน <head>...</head> โดยใช้คำสั่ง • <link rel="stylesheet" type="text/css" href="URL ไฟล์.css”> • ตัวอย่างใน file style.css • h1{ color:red; font-family:Arial }p{ color:black; font-family:Arial; font-weight:bold }
Typographic element ส่วนประกอบด้าน Typography
Typography Typography principles หลักการใช้รูปแบบอักษรสำหรับเว็บดีไซน์ • Choose fewer fonts and sizes. • Use available fonts’ • Design for legibility • Avoid using text as graphics.
Choose fewer fonts and size เพื่อให้เพจดูสะอาดไม่รก หรือไม่ขัดตา ออกแบบขนาดของตัวอักษรโดยไล่ความสำคัญ เช่น page heading, section heading, and body text สื่อสารโดยการจัดระดับขั้นของข้อมูล โดยการเปลี่ยนขนาด สี น้ำหนัก หรือ รูปแบบตัวอักษร เช่น Page heading should have a larger, bolder type, แต่ section heading would appear in the same typeface, only lighter or smaller เลือกใช้ขนาด และรูปแบบตัวอักษรให้้น้อย อยากใช้มากเกินไป เช่น ขนาดตัวอักษรเลือกไว้ 3 ขนาด a large one for heading, a smaller size for subheading, and a size for text body.
Use common web font • Web Safe Fonts หรือฟอนต์ที่ปลอดภัยสำหรับเว็บ หรือบางคนอาจจะเรียกฟอนต์มาตรฐาน เหล่านี้มันคือ ฟอนต์ที่ส่วนใหญ่แล้วจะมีอยู่ในคอมพิวเตอร์ทุกเครื่อง และเมื่อกำหนดฟอนต์นั้นแล้ว ผู้เรียกดูเว็บก็จะเห็นแบบตัวอักษรที่ถูกต้อง. หากไม่ได้ใช้ฟอนต์ที่ปลอดภัย หรือฟอนต์ที่มีในทุกเครื่องแล้วนั้น ผลก็คือจะทำให้ผู้เรียกดูไม่สามารถเห็นฟอนต์ที่ถูกต้องตามผู้ออกแบบเว็บต้อง การได้ อาจแสดงฟอนต์ที่น่าเกลียดไปเลย หรือแสดงฟอนต์ธรรมดาๆที่ไม่ใช่ดีไซน์ที่ออกแบบไว้
Use common web font ตัวอย่าง web safe font Font-family : arial, helvetica, sans-serif; Font-family : ‘Bookman Old Style’, serif; Font-family : Vernada, Geneva, sans-serif; สามารถเข้าเช็คดูได้ที่ http://demo.okvee.net/web-safe-font.php
Design for legibility ลักษณะการอ่านออกง่ายบน web site • Size and typeface ขนาดและรูปแบบตัวอักษรที่ใช้มีผลต่อการอ่านของคนอ่าน หน้าจอคอมพิวเตอร์มีความละเอียดตำ่กว่าเอกสารพิมพ์ การออกแบบเอกสารให้อ่านง่ายในเอกสารพิมพ์แต่มาดูใน computer screen กลายเป็นสูญเสียความง่ายในการอ่าน ควรใช้ตัวอักษรที่ใหญ่พอให้อ่านง่าย และหลีกเลี่ยงการใช้รูปแบบอักษรแปลกๆที่อ่านทำให้ลดระดับการอ่านง่ายเมื่อดูผ่าน มอนิเตอร์ • Adding space around the block and between line ควรแบ่งพื้นที่เปล่ารอบเนื้อหาเพื่อให้อ่านได้สบายขึ้น รวมไปถึงพื้นที่ว่างระหว่าง line • สีที่ใช้สำหรับตัวอักษร และสีพื้น ต้องให้ตัดกันเพื่ออ่านได้ชัดเจน โดยทั่วไป ตัวอักษรสีเข้ม บนพื้นสีอ่อน ทำให้ง่ายต่อการอ่าน
Avoid Creating text as Graphic Web safe font มีให้เลือกน้อย คนจึงนิยมออกแบบที่มี font ลูกเล่นเยอะๆผ่านทางPhotoshop หรือ ออกแบบwebsite โดยใช้ Flash ผลที่ได้คือจะได้เป็นภาพ graphic เช่น logo, title, banner หรือ งาน mulitimedia(flash) จะนิยมทำในรูปแบบนี้มากในช่วงแรกๆของการออกแบบ หรือช่วงที่เว็บไซต์มีข้อจำกัดในเรื่องของ fonts ปัญหาที่พบเจอ • ไม่สามารถที่จะ search ข้อความบนเว็บไซต์ได้ • การแก้ไข้ข้อมูลเป็นเรื่องยุ่งยาก • ไม่สามารถดูใน screen reader
CSS typography Font property สำหรับ CSS กำหนดลักษณะการแสดงผลของตัวอักษร Font-family :ก่อนออกแบบเว็บไซต์ ควรเริ่มคิดก่อนว่าจะใช้ font รูปแบบไหน serif/san-serif หรือจะเป็นชื่อของชุดอักษร เช่น Helvetica ควรใช้ fontที่computerน่าจะมี ตัวอย่าง p { font-family: sans-serif;} p {font-family: helvetica, “lucida console”, arial; }
CSS typography font-face : สามารถระบุ font ให้ดาวโหลด และแสดงบน browser แก้ปัญหาข้อจำกัดการใช้ font ที่มีแต่ในคอมพิวเตอร์เท่านั้น Font ที่ระบุปกติจะเป็นไฟล์ truetype format (TTF) วิธีเรียกใช้ ต้องเรียกผ่าน font-family ด้วย ตัวอย่าง @font-face { font-family: generica; src: url(http://www.generic.com/fonts/generica.ttf)} h1 { font-family : generica, serif; } บทความเกี่ยวกับ Font-face/ Font-face generaterhttp://www.wecraftweb.com/2011/04/css3-font-face-%E0%B8%9F%E0%B8%AD%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B9%84%E0%B8%97%E0%B8%A2%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A/
CSS typography font-size : เป็นการกำหนด ขนาดของ font ที่เราจะใช้ในการออกแบบ เว็บไซต์ โดยกำหนดให้ใช้หน่วย 2 ประเภท absolute unit ( cm, in, pt) และ relative unit ( em, px, %) Absolute - fixed value, ไม่เหมาะกับ web designเพราะไม่สามารถปรับขนาดตามขนาดของ browser - absolute จะเหมาะกับงานที่ทราบแน่นอนว่า destination medium มีขนาดเท่าไร เมื่อทราบขนาดจึงสามารถคำนวณว่าจะต้องใช้ตัวอักษรขนาดเท่าไรถึงจะเหมาะ จึงเหมาะกับสื่อพิมพ์มากกว่า
CSS typography Relative Unit • ออกแบบมาเพื่อให้ใช้กับเว็บไซต์ที่ต้องมีปรับขนาด • ตัวอักษรที่ใช้หน่วยนี้จะถูกปรับตาม containing element • เหมาะกับงานด้านเว็บไซต์ ที่อาจต้องมีการแสดงผ่าน ขนาดจอ size ต่างๆ เช่น แสดงทางโทรศัพท์ tablet มอนิเตอร์ ตัวอย่าง Body { font-family: arial, sans-serif; font-size: 14px; }
CSS typography Propertyต่างๆ font-style : italic; font-weight : bold; เพิ่มน้ำหนังตัวอักษณให้หนาขึ้น อาจใส่ค่าเป็นตัวเลข 100-900
CSS typography Text spacing Propertiesกำหนดลักษณะของ space ใน paragraph Text-indent เยื้องเข้าให้บรรทัดแรกของย่อหน้า คุณสมบัตินี้กำหนดค่าได้สองแบบค่ะ คือเป็น px (pixel) กับเป็น % (เปอร์เซนต์) p{text-indent:50px;} Line-height ระยะห่างระหว่างบรรทัด ค่ามาตรฐานคือ normal ถ้าจะเปลี่ยนเป็นค่าอื่นๆ ก็สามารถกำหนดเป็น ตัวเลข (number), ความยาว (length), หรือ เปอร์เซนต์ (%) ก็ได้ค่ะ p.small {line-height:90%;} p.big {line-height:200%;}
CSS typography Text spacing Propertiesกำหนดลักษณะของ space ใน paragraph Text-decoration ลักษณะรูปแบบตัวอักษร ค่ามาตรฐานคือNone และมีค่าต่างๆ underline/overline/line-through/blink h1 { text-decoration: underline;} Letter Spacing ระยะห่างระหว่างตัวอักษร ค่ามาตรฐานคือ normal ส่วนค่าอื่นๆ จะเป็นหน่วยความยาว h1 {letter-spacing:11px;} h2 {letter-spacing:-1px;}
CSS typography Text spacing Propertiesกำหนดลักษณะของ space ใน paragraph Vertical Align ตำแหน่งในแนวแกน y (แนวตั้ง)คุณสมบัตินี้นิยมให้จัดข้อความคู่กับภาพ .top {vertical-align:text-top;} .bottom {vertical-align:text-bottom;} Word Spacing ระยะห่างระหว่างคำคุณสมบัตินี้เหมาะกับภาษาอังกฤษ ถ้าเป็นภาษาไทยน่าจะเรียกว่าจะระยะระหว่างประโยคมากกว่า เอาเป็นว่ามันเป็นการกำหนดความกว้างของการเว้นวรรค ค่ามาตรฐานคือ normal ส่วนค่าอื่นๆ จะเป็นหน่วยความยาว เช่นเดียวกับ letter-spacing p {word-spacing:30px;}
Garaphic Element ส่วนประกอบด้าน Graphic
Graphic กราฟฟิกหรือรูปภาพ มีความจำเป็นมากในการสร้างเว็บไซต์ ถือเป็นองค์ประกอบที่สำคัญที่นักออกแบบใช้ในการนำเสนอเว็บไซต์ เพราะเราสามารถนำรูปมาแทนคำบรรยายได้เป็นอย่างดี ในการประยุกต์ใช้ภาพในเว็บไซต์โดยมากจะใช้สำหรับ เป็นภาพพื้นหลัง ปุ่ม ไอคอน หรือโลโก้ เป็นต้น
