1 / 40

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

การออกแบบและจัดรูปแบบเว็บไซต์ด้วย CSS. การเขียนโปรแกรมบนอินเทอร์เน็ต. 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

erica-dale
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related