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

การออกแบบและจัดร�ปแบบเว็�บไซต์�ด�ว็ย 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

Hypertext linking 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

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

Linear Structures

A linear structure

An augmented linear structure

14

Hierarchical Structures

Mixed Structures

การอ้�างอ้�ง Absolute Path Relative Path

URL (Uniform Resource Locator) การอ�างอ�งถึ!งต์"าแหน$งขีองขี�อม�ลบนระบบ

อ�นเทอร�เน�ต์ ซ!%งประกอบด�ว็ย โปรโต์คอล โดเมน โฟลเดอร� ชื่)%อไฟล� ไอด�ขีองว็ต์ถึ*บนเว็�บ

มาต์รฐาน HTML <DOCTYPE> <html> <head></head> <body></body> </html>

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

ข้�อ้แต์กต์�างระหว็�าง HTML และ XTHML XHTML เขี�มงว็ดเร)%องคว็ามถึ�กต์�องขีอง syntax

มากขี!+น ท*กๆ XHTML element ท�%ซ�อนกนต์�องเร�ยง

ล"าดบให�ถึ�ก แต์$ละ element ต์�องไม$เป.ด ป.ด ขี�ามกน

ท*กๆ XHTML element ต์�องท"าการป.ดให�เร�ยบร�อย ไม$เว็�นแม�แต์$ element ท�%ไม$ม� tag ป.ด เชื่$น <br> จัะต์�องท"าการป.ด โดยใชื่�เคร)%องหมาย '/' เป/น <br /> เป/นต์�น

20

ท*ก XHTML element ต์�องเขี�ยน tag, attribute และค$าขีอง attribute ด�ว็ยต์ว็พิ�มพิ�เล�กและอย�$ในเคร)%องหมาย “”

เอกสาร XHTML จัะม� root element เด�ยว็ ท*ก XHTML element จัะต์�องอย�$ภายใน element <html>...</html>

ข้�อ้แต์กต์�างระหว็�าง HTML และ XTHML

Document type Transitional ย�นยอมให�ใชื่�ค"าส%งล�าสมย

(depecated) Frameset สามารถึใชื่�ค"าส%งได�เหม)อนกบ

Transitional และเพิ�%มคว็ามสามารถึในการใชื่�ค"าส%งเก�%ยว็กบ frame

Strict ไม$ย�นยอมให�ใชื่�ค"าส%งล�าสมย

22

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">23

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">

24

Deprecated tag

<applet> <center>

<basefont> <font>

<dir> <listing>

<embed> <plaintext>

<isindex> <s>

<menu> <strike>

<u> <xmp>

25

Deprecated attribute

align alink

background

bgcolor

border clear

height hspace

language link

nowrap start

text vlink

vspace width26

ค#าส�$ง HTML พั%&นฐาน <div> ส"าหรบก"าหนดโครงสร�างเว็�บ ใชื่�งาน

คว็บค�$กบ CSS <span> ส"าหรบเก�บขี�อคว็ามเพิ)%อให�สามารถึ

ก"าหนดร�ปแบบผ่$าน CSS <p> ส"าหรบเก�บขี�อคว็ามยาว็ประมาณหน!%ง

ย$อหน�า <label> ส"าหรบแสดงค"าอธิ�บายโดยมากใชื่�ใน

ฟอร�ม

27

ค#าส�$ง HTML พั%&นฐาน <a> ท"าการเชื่)%อมโยงไปยง URL ท�%ก"าหนด <img> แสดงร�ปภาพิ <ol> สร�างรายการแบบเร�ยงล"าดบ <ul> สร�างรายการแบบไม$เร�ยงล"าดบ <table> <tr> <th> <td> สร�างต์าราง

28

CSS(Cascade Style Sheet) ใชื่�ส"าหรบก"าหนดร�ปแบบการแสดงผ่ลให�กบ ว็ต์ถึ*

ในเว็�บ ร�ปแบบค"าส%ง selector {property :

value;} select ต์ว็ก"าหนดว็$าต์�องการใชื่�ร�ปแบบดงกล$าว็

ณ จั*ดใดขีองเว็�บ property ค*ณสมบต์�ท�%ต์�องการก"าหนด value ค$าขีองค*ณสมบต์�

29

CSS Selector tag ก"าหนดร�ปแบบแท�กน+น ๆ ท*กต์"าแหน$งในเว็�บspan {color:#00ffff;} class ก"าหนดร�ปแบบให�กบแท�กท�%เร�ยกใชื่�ผ่$าน

attribute class.greenText {color:#00ee00;} id ก"าหนดร�ปแบบให�กบแท�กท�%ม� attribute id

ต์รงกน#narrowBlock{width:75px;}

30

Selectors & cascadingPattern Meaning

* Universal selector: matches any element.

E Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P).

E F Descendant selector: matches any F element that is a descendant of an E element.

E > F Child selector: matches any F element that is a child of an element E.

E + F Adjacent siblings selector: Matches any F element immediately preceded by an element E.

E[foo] Attribute selector: matches any E element with the "foo" attribute set (whatever the value).

E[foo="warning"] Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning".

E[foo~="warning"]Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".

E[lang|="en"]Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en“ (e.g. en-US).

DIV.warning HTML only. The same as DIV[class~="warning"].

E#myid ID selector: matches any E element ID equal to "myid".

E:lang(c)Pseudo-class selector: matches element of type E if it is in (human) language c (the document language specifies how language is determined).

E:first-child Pseudo-class selector: matches element E when E is the first child of its parent.

E:link, E:visitedPseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).

E:active, E:hover, E:focus Dynamic Pseudo-class selector: matches E during certain user actions.

E:first-line, E:first-letter Pseudo-element selector: matches the first formatted line or letter of element E.

Works in most browsers (incl. IE)

การเร�ยกใชื่� CSS Inline Styles Internal Style Sheets External Style Sheets

32

CS 142 Lecture Notes: CSSSlide 33

body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px;}

Selector Declaration Block

Attribute Name

Value

CSS Rule

Adding Styles to HTML

<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>

Separate Stylesheet

Page-Specific Styles

Element-Specific Styles


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>

CSS: HTML:


Predefined names:white black red …

8-bit hexadecimal intensities for red, green, blue:

0-255 decimal intensities:

Percentage intensities:

CSS Color Specifiers

#ff0000

R G B

rgb(255,255,0)

R G B

rgb(80%,80%,100%)

R G B


Padding

CSS Element Boxes

ElementContent

Padding

Margin

Element’s background covers padding

Parent’s background covers margin Border


CSS Distances

2px pixels1mm millimeters2cm centimeters0.2in inches3pt printer’s points2em, 4ex other printer’s

units

การสร�าง Project PHP ใน Netbeans

39

การสร�าง Project PHP ใน Netbeans

40