การออกแบบและจัดรูปแบบเว็
Download
Report
Transcript การออกแบบและจัดรูปแบบเว็
การออกแบบและจัดรูปแบบ
เว็บไซตด
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
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
2
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
3
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
4
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
5
Client/Server Architecture
(continued)
Figure 1-16 The design of a three-tier client/server system
6
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)
7
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
8
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)
9
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
10
Server-Side Scripting and PHP
(continued)
Figure 1-17 How a Web server processes a PHP script
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
11
โครงสร้างเว็บไซต์
Linear Structure
Augmented Structure
Hierarchy Structure
Mixed Structures
Linear Structures
A linear structure
An augmented linear
structure
Hierarchical Structures
14
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
ข้อแตกต่างระหว่าง HTML และ XTHML
ทุก XHTML element ตองเขี
ยน tag,
้
attribute และคาของ
attribute ดวยตั
วพิมพ ์
่
้
เล็กและอยูในเครื
อ
่ งหมาย “”
่
เอกสาร XHTML จะมี root element เดียว
ทุก XHTML element จะตองอยู
ภายใน
้
่
element <html>...</html>
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"
23
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML Documents type
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
XHTML 1.0 Frameset
24
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML
Deprecated tag
<applet>
<basefont>
<dir>
<embed>
<isindex>
<menu>
<u>
25
<center>
<font>
<listing>
<plaintext>
<s>
<strike>
<xmp>
Deprecated attribute
align
background
border
height
language
nowrap
text
vspace
26
alink
bgcolor
clear
hspace
link
start
vlink
width
คาสัง่ 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 & cascading
Pattern
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).
EF
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:visited
Pseudo-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
CSS Rule
Selector
Declaration Block
body {
font-family: Tahoma, Arial, sans-serif;
color: black;
background: white;
margin: 8px;
}
Value
Attribute Name
Slide 33
CS 142 Lecture Notes: CSS
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>
Page-Specific Styles
<body>
...
<div style=“padding:2px; ... ">
...
</body>
Element-Specific Styles
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;
}
Slide 35
<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
CSS Color Specifiers
Predefined names:
white black red …
8-bit hexadecimal intensities for red, green, blue:
#ff0000
RGB
0-255 decimal intensities:
rgb(255,255,0)
R
G B
Percentage intensities:
rgb(80%,80%,100%)
Slide 36
R
G
B
CS 142 Lecture Notes: CSS
CSS Element Boxes
Parent’s background covers margin
Border
Margin
Element
Padding
Content
Padding
Element’s background covers padding
Slide 37
CS 142 Lecture Notes: CSS
CSS Distances
2px
1mm
2cm
0.2in
3pt
2em, 4ex
Slide 38
pixels
millimeters
centimeters
inches
printer’s points
other printer’s units
CS 142 Lecture Notes: CSS
การสราง
Project PHP ใน Netbeans
้
39
การสราง
Project PHP ใน Netbeans
้
40