การออกแบบและพัฒนาเว็บไซต์

งานนำเสนอเรื่อง: "การออกแบบและพัฒนาเว็บไซต์"— ใบสำเนางานนำเสนอ:

1 การออกแบบและพัฒนาเว็บไซต์
สำหรับการบริการสารสนเทศ WEBPAGE DESIGN AND DEVELOPMENT FOR INFORMATION SERVICES

2 Search Engine Optimization(SEO)
Review Search Engine Optimization(SEO) 1. ค้นหาคีย์เวิร์ด 2. ปรับแต่งเว็บเพจ (On-page Optimization)

3 Search Engine Optimization(SEO)
Review Search Engine Optimization(SEO) คีย์เวิร์ดหลัก 1. ค้นหาคีย์เวิร์ด คีย์เวิร์ดรอง 2. ปรับแต่งเว็บเพจ (On-page Optimization)

4 Search Engine Optimization(SEO)
Review Search Engine Optimization(SEO) คีย์เวิร์ดหลัก 1. ค้นหาคีย์เวิร์ด คีย์เวิร์ดรอง title tag meta keywords tag meta description tag body tag H1 tag 2. ปรับแต่งเว็บเพจ (On-page Optimization)

5 Search Engine Optimization(SEO)
Review Search Engine Optimization(SEO) Inbound link 3. Off-page Optimization Outbound link

6 Cascading Style Sheet (CSS)

7 อะไรคือ Cascading Style Sheet (CSS) ชุดคำสั่งสำหรับจัดรูปแบบการแสดงผลเนื้อหาภายในเว็บเพจ โดยคำสั่ง CSS ถูกนำมาใช้เสริมคุณสมบัติของ HTML

8 ทำไมต้องใช้ Cascading Style Sheet (CSS) ?

9 การใช้งาน Cascading Style Sheet (CSS) 1
การใช้งาน Cascading Style Sheet (CSS) 1. External Style Sheet คือ สไตล์จากไฟล์. css ที่ถูกดึง เข้ามาใช้ในเว็บเพจ 2. Embedded Style Sheet คือสไตล์ที่เก็บอยู่ในเว็บเพจเอง 3. Inline Style คือคำสั่ง CSS ที่ถูกใส่กำกับไว้ในแท็ก HTML

10 1. External Style Sheet

11 2. Embedded Style Sheet

12 3. Inline Style Sheet

13 ควรใช้งาน CSS แบบใด. 1. External Style Sheet. 2. Embedded Style Sheet
ควรใช้งาน CSS แบบใด ? 1. External Style Sheet 2. Embedded Style Sheet 3. Inline Style Sheet

14 External Style Sheet

15 External Style Sheet

16 รูปแบบคำสั่ง CSS รูปแบบคำสั่ง ประกอบด้วย 2 ส่วน คือ
Selector รูปแบบคำสั่ง CSS รูปแบบคำสั่ง ประกอบด้วย 2 ส่วน คือ declaration

17 รูปแบบคำสั่ง CSS (ต่อ) เมื่อนำไปใช้แบบ Embeded

18 รูปแบบคำสั่ง CSS (ต่อ) เมื่อนำไปใช้แบบ External

19 ประเภทของ Selector แบ่งออกเป็น 3 ประเภท. 1. Class Style. 2. Tag Style
ประเภทของ Selector แบ่งออกเป็น 3 ประเภท 1. Class Style 2. Tag Style 3. Advanced (IDs, contextual selector,etc

20 Class Style เป็นสไตล์ที่สามารถนำไปใช้ประกอบกับ tag ใดๆ เพื่อเสริมให้ tag ตรงจุดนั้นๆ เปลี่ยนไปตามคุณสมบัติที่ได้กำหนดไว้

21 Tag Style เป็นสไตล์ที่ดัดแปลงคุณสมบัติของ tag โดยตรง ซึ่งจะมีผลต่อทุกๆ tag ในเว็บเพจ

22 การประยุกต์ใช้งาน CSS 1. เริ่มต้น เว็บเพจยังไม่มีการใช้งาน CSS

23 การประยุกต์ใช้งาน CSS 2
การประยุกต์ใช้งาน CSS 2. นำ css แบบที่หนึ่งมาใช้ในการเปลี่ยน theme ของเว็บเพจ style1.css

24 การประยุกต์ใช้งาน CSS 3. ผลลัพธ์ที่ได้เมื่อใช้ css แบบที่หนึ่ง
style1.css

25 การประยุกต์ใช้งาน CSS 4. ยกเลิกการใช้งาน css แบบที่หนึ่ง

26 การประยุกต์ใช้งาน CSS 5
การประยุกต์ใช้งาน CSS 5. นำ css รูปแบบที่สองมาใช้ในการเปลี่ยน theme ของเว็บเพจ style2.css