DEX  WAT  LEARN

LEARN  FOR  WEB  DESIGN  WITH  DEX  WAT  DEV

CSS

การเตรียมการเพื่อเขียนโปรแกรม CSS

- Website
- รู้จักกับ CSS
- text editor
- โปรแกรมสำหรับจำลอง web server

Website

Website

           ในการเขียนเว็บไซต์แบ่งลักษณะการทำงานของโปรแกรมได้เป็น 2 ประเภท คือ
1. Static Web
2. Dynamic Web

                     1. Static Web เป็นลักษณะของโปรแกรมบนเว็บที่ไม่ค่อยมีการเปลี่ยนแปลง เช่น เว็บประวัติส่วนตัว, เว็บนำเสนอประวัติและโครงสร้างขององค์กร เป็นต้น ลักษณะเว็บประเภทนี้ เมื่อผู้พัฒนาเว็บสร้างเว็บขึ้นมาแล้วหากต้องการที่จะทำการแก้ไขข้อมูลบางอย่างนั้นก็จะต้องใช้text editor เพื่อเปิดไฟล์ของหน้าเว็บนั้นแล้วจึงทำการแก้ไขข้อมูลที่ต้องการ เมื่อเสร็จแล้วก็ต้องทำการบันทึกไฟดังกล่าวและ ทำการอัพโหลดไฟล์ขึ้นไปเก็บไว้ที่ Web Server จะเห็นว่าลักษณะของโปรแกรมบนเว็บประเภทนี้จะ ไม่มีความยึดหยุ่นในการจัดการ และสร้างความยุ่งยากให้แก่ผู้พัฒนาเว็บเพจด้วย

                     2. Dynamic Web เป็นลักษณะของโปรแกรมบนเว็บที่เกิดขึ้นมาเพื่อแก้ปัญหา ความไม่ยืดหยุ่นในการจัดการข้อมูลของ Static Web โดยเหมาะสมสำหรับเว็บที่ต้องมี การเปลี่ยนแปลงข้อมูลอยู่บ่อยครั้ง หรือเว็บที่มีการจัดเก็บข้อมูลจำนวนมากได้ภายในฐานข้อมูล เช่น เว็บหนังสือพิมพ์, เว็บแสดงรายละเอียดของสินค้า เป็นต้น ในการพัฒนาโปรแกรมบนเว็บประเภทนี้ จะต้องอาศัยผู้พัฒนาโปรแกรมที่มีความรู้ความสามารถในการเขียนโปรแกรม นอกจากนั้นในส่วนของ ซอฟต์แวร์ที่ต้องติดตั้งประกอบไปด้วย ซอฟต์แวร์ที่ใช้ในการทำให้เครื่องคอมพิวเตอร์มีความสามารถ เป็นเครื่อง Web Server, ซอฟต์แวร์ที่ใช้ในการแปลโปรแกรมภาษา และซอฟต์แวร์ที่ใช้จัดการ ฐานข้อมูล

CSS

CSS คืออะไร

           CSS ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า "สไตล์ชีต" คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ "Style") ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการกำหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปีพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ที่กำหนดโดย องค์กร World Wide Web Consortium หรือ W3C

Text Editor

text editor คือ

           Text Editor คือโปรแกรมที่ใช้ในการแก้ไข plain text (ตัวอักษรรูปแบบปกติทั่วไป ไม่มีการตกแต่งใดๆ) เช่น Notepad(ของ Windows) TextEdit(ของ macOS) และ gedit(ของ Linux GNOME) หลายๆคนคงเคยใช้กันอยู่แล้วเพื่อ พิมพ์อะไรง่ายๆ หรือแก้ไขอะไรง่ายๆ เพราะเป็นโปรแกรมที่คอมทุกเครื่องมีมาให้

           Text Editor แนะนำ
- Visual Studio Code (วิชวล สตูดิโอ โค้ด)

web server

โปรแกรมสำหรับจำลอง web server

           Xampp คือโปรแกรมสำหรับจำลองเครื่องคอมพิวเตอร์ส่วนบุคคลของเราให้ทำงานในลักษณะของ Webserver ซึ่งเครื่องคอมพิวเตอร์ของเราจะเป็นทั้งเครื่องแม่ และเครื่องลูกในเครื่องเดียวกัน โดยไม่ต้องเชื่อมต่อกับ Internet ก็สามารถทดสอบกับเว็บไซต์ที่เราสร้างขึ้นมาได้ทุกที่ทุกเวลา อีกทั้งยังประหยัดเวลาและไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น ซึ่งในปัจจุบันนี้ได้รับความนิยมจากผู้ใช้ CMS ในการสร้างเว็บไซต์

           XAMPP ประภอบด้วย Apache, PHP, MySQL, PHP MyAdmin, Perl ซึ่งเป็นโปรแกรมพื้นฐานที่รองรับการทำงาน CMS เป็นชุดโปรแกรม สำหรับออกแบบเว็บไซต์ที่ได้รับความนิยมในปัจจุบัน ไฟล์สำหรับติดตั้ง XAMPP นั้นอาจมีขนาดใหญ่สักหน่อย เนื่องจาก มีชุดควบคุมการทำงานที่ช่วยให้การปรับแต่งส่วนต่าง ๆ ง่ายขึ้น XAMPP นั้นรองรับระบบปฏิบัติการหลายตัว เช่น Windows, Linux, MacOS
           Download