slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
การออกแบบและจัดรูปแบบเว็บไซต์ด้วย CSS PowerPoint Presentation
Download Presentation
การออกแบบและจัดรูปแบบเว็บไซต์ด้วย CSS

Loading in 2 Seconds...

play fullscreen
1 / 40

การออกแบบและจัดรูปแบบเว็บไซต์ด้วย CSS

96 Vues Download Presentation
Télécharger la présentation

การออกแบบและจัดรูปแบบเว็บไซต์ด้วย CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. การออกแบบและจัดรูปแบบเว็บไซต์ด้วย CSS การเขียนโปรแกรมบนอินเทอร์เน็ต

  2. Introduction to Web Development • In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for Particle Physics (CERN) in Geneva, Switzerland • The original purpose of the World Wide Web(WWW) was to provide easy access to cross-referenced documents that existed on the CERN computer network • Hypertextlinking allows you to quickly open other Web pages

  3. Client/Server Architecture • Server (“back end”): • A database from which a client requests information • Fulfills a request for information by managing the request or serving the requested information to the client • Responsible for data storage and management • A system consisting of a client and a server is known as a two-tier system

  4. Client/Server Architecture (continued) • Client (“front end”): • Presents an interface to the user • Gathers information from the user, submits it to a server, then receives, formats, and presents the results returned from the server

  5. Client/Server Architecture (continued) • A three-tier, or multi-tier, client/server system consists of three distinct pieces: • Client tier, or user interface tier, is the Web browser • Processing tier, or middle tier, handles the interaction between the Web browser client and the data storage tier • Performs necessary processing or calculations based on the request from the client tier • Handles the return of any information to the client tier

  6. Client/Server Architecture (continued) Figure 1-16 The design of a three-tier client/server system

  7. JavaScript and Client-Side Scripting • JavaScript is: • A client-side scripting language that allows Web page authors to develop interactive Web pages and sites • Used in most Web browsers including Firefox and Internet Explorer • Client-side scripting is a language that runs on a local browser (on the client tier) instead of on a Web server (on the processing tier)

  8. JavaScript and Client-Side Scripting (continued) • JavaScript allows you to: • Turn static Web pages into applications such as games or calculators • Change the contents of a Web page after a browser has rendered it • Create visual effects such as animation • Control the Web browser window itself

  9. Server-Side Scripting and PHP • Server-side scripting refers to a scripting language that is executed from a Web server • Hypertext Preprocessor (PHP) is a server-side scripting language that is used to develop interactive Web sites • Is easy to learn • Includes object-oriented programming capabilities • Supports many types of databases (MySQL, Oracle, Sybase, ODBC-compliant)

  10. Server-Side Scripting and PHP (continued) • PHP (continued): • PHP is an open source programming language • Open source refers to software where source code can be freely used and modified • Can’t access or manipulate a Web browser like JavaScript • Exists and executes solely on a Web server, where it performs various types of processing or accesses databases

  11. Server-Side Scripting and PHP (continued) • General rule: Use client-side scripting to handle user interface processing and light processing, such as validation; use server-side scripting for intensive calculations and data storage Figure 1-17 How a Web server processes a PHP script

  12. โครงสร้างเว็บไซต์ • Linear Structure • Augmented Structure • Hierarchy Structure • Mixed Structures

  13. Linear Structures A linear structure An augmented linear structure

  14. Hierarchical Structures

  15. Mixed Structures

  16. การอ้างอิง • Absolute Path • Relative Path

  17. URL (Uniform Resource Locator) • การอ้างอิงถึงตำแหน่งของข้อมูลบนระบบอินเทอร์เน็ต ซึ่งประกอบด้วย • โปรโตคอล • โดเมน • โฟลเดอร์ • ชื่อไฟล์ • ไอดีของวัตถุบนเว็บ

  18. มาตรฐาน HTML • <DOCTYPE> • <html> • <head></head> • <body></body> • </html>

  19. มาตรฐานภาษาในการพัฒนาเว็บมาตรฐานภาษาในการพัฒนาเว็บ • HTML 4.01 • XHTML 1.0 • HTML 5

  20. ข้อแตกต่างระหว่าง HTML และ XTHML • XHTML เข้มงวดเรื่องความถูกต้องของ syntax มากขึ้น • ทุกๆ XHTML element ที่ซ้อนกันต้องเรียงลำดับให้ถูก แต่ละ element ต้องไม่เปิด ปิด ข้ามกัน • ทุกๆ XHTML element ต้องทำการปิดให้เรียบร้อย ไม่เว้นแม้แต่ element ที่ไม่มี tag ปิด เช่น <br> จะต้องทำการปิด โดยใช้เครื่องหมาย ' /' เป็น <br /> เป็นต้น

  21. ข้อแตกต่างระหว่าง HTML และ XTHML • ทุก XHTML element ต้องเขียน tag, attribute และค่าของ attribute ด้วยตัวพิมพ์เล็กและอยู่ในเครื่องหมาย “” • เอกสาร XHTML จะมี root element เดียว ทุก XHTML element จะต้องอยู่ภายใน element <html>...</html>

  22. Document type • Transitional ยินยอมให้ใช้คำสั่งล้าสมัย (depecated) • Frameset สามารถใช้คำสั่งได้เหมือนกับ Transitional และเพิ่มความสามารถในการใช้คำสั่งเกี่ยวกับ frame • Strict ไม่ยินยอมให้ใช้คำสั่งล้าสมัย

  23. HTML Document type • HTML 4 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> • HTML 4 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> • HTML 4 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

  24. XHTML Documents type • XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  25. Deprecated tag

  26. Deprecated attribute

  27. คำสั่ง HTML พื้นฐาน • <div> สำหรับกำหนดโครงสร้างเว็บ ใช้งานควบคู่กับ CSS • <span> สำหรับเก็บข้อความเพื่อให้สามารถกำหนดรูปแบบผ่าน CSS • <p> สำหรับเก็บข้อความยาวประมาณหนึ่งย่อหน้า • <label> สำหรับแสดงคำอธิบายโดยมากใช้ในฟอร์ม

  28. คำสั่ง HTML พื้นฐาน • <a> ทำการเชื่อมโยงไปยัง URL ที่กำหนด • <img> แสดงรูปภาพ • <ol> สร้างรายการแบบเรียงลำดับ • <ul> สร้างรายการแบบไม่เรียงลำดับ • <table> <tr> <th> <td> สร้างตาราง

  29. CSS(Cascade Style Sheet) • ใช้สำหรับกำหนดรูปแบบการแสดงผลให้กับ วัตถุในเว็บ • รูปแบบคำสั่ง selector {property : value;} • select ตัวกำหนดว่าต้องการใช้รูปแบบดังกล่าว ณ จุดใดของเว็บ • property คุณสมบัติที่ต้องการกำหนด • value ค่าของคุณสมบัติ

  30. CSS Selector • tag กำหนดรูปแบบแท็กนั้น ๆ ทุกตำแหน่งในเว็บ span {color:#00ffff;} • class กำหนดรูปแบบให้กับแท็กที่เรียกใช้ผ่าน attribute class .greenText {color:#00ee00;} • id กำหนดรูปแบบให้กับแท็กที่มี attribute id ตรงกัน #narrowBlock{width:75px;}

  31. Selectors & cascading Works in most browsers (incl. IE)

  32. การเรียกใช้ CSS • Inline Styles • Internal Style Sheets • External Style Sheets

  33. CSS Rule Selector Declaration Block body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Value Attribute Name CS 142 Lecture Notes: CSS

  34. Adding Styles to HTML Separate Stylesheet <head> ... <link rel="stylesheet" type="text/css" href="myStyles.css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif; ... } </style> </head> <body> ... <div style=“padding:2px; ... "> ... </body> Page-Specific Styles Element-Specific Styles

  35. CSS: HTML: body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px; } h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black } .shaded { background: #d0d0ff; } <body> <h1>First Section Heading</h1> <p> Here is the first paragraph, containing text that really doesn't have any use or meaning; it just prattles on and on, with no end whatsoever, no point to make, really no purpose for existence at all. </p> <div class="shaded"> <h1>Another Section Heading</h1> <p> Another paragraph. </p> </div> </body> CS 142 Lecture Notes: CSS

  36. R R G G B B CSS Color Specifiers • Predefined names: white black red … • 8-bit hexadecimal intensities for red, green, blue: • 0-255 decimal intensities: • Percentage intensities: #ff0000 rgb(255,255,0) R G B rgb(80%,80%,100%) CS 142 Lecture Notes: CSS

  37. CSS Element Boxes Parent’s background covers margin Border Margin Padding Element Content Padding Element’s background covers padding CS 142 Lecture Notes: CSS

  38. CSS Distances 2px pixels 1mm millimeters 2cm centimeters 0.2in inches 3pt printer’s points 2em, 4ex other printer’s units CS 142 Lecture Notes: CSS

  39. การสร้าง Project PHP ใน Netbeans

  40. การสร้าง Project PHP ใน Netbeans