Thiết kế web chương 1

Mục tiêu môn học Nắm vững các khái niệm căn bản của quá trình thiết cài ñặt và triển khai một ứng dụng web Thiết kế trang Web và cài ñặt một ứng dụng Web hoàn chỉnh bằng HTML,CSS,Java

Trang 2

ðiểm ñánh giá

ðiểm chuyên cần: 10%

ðiểm làm ñồ án môn học: 30%

– Sinh viên chia thành nhóm 3-5 người

– ðăng ký với lớp trưởng, Danh sách gồm: stt nhóm, Họ & tên SV, MSSV, e-mail của trưởng nhóm (buổi sau lớp trưởng nộp lại)

ðiểm thi cuối kỳ: 60%

Trang 3

Mục tiêu môn học

Nắm vững các khái niệm căn bản của quá trình thiết cài ñặt và triển khai một ứng dụng web

Thiết kế trang Web và cài ñặt một ứng dụng

Web hoàn chỉnh bằng HTML,CSS,JavaScript và PHP

Triển khai và khai thác ứng dụng web trên

Internet

Trang 4

Nội dung môn học

Chương 1 : Giới thiệu.

Chương 2 : Các bước thiết kế web

Chương 3: Ngôn ngữ HTML

Chương 4: CSS

Chương 5: Web Form

Chương 6: Thết kế trang web ñộng với

JavaScript

Chương 7: Thiết kế web với PHP

Trang 5

Các kiến thức tiên quyết

Lập trình cơ bản C, C++ hoặc Java

Các kiến thức cơ bản về CSDL

Thiết kế, ứng dụng MS Access, MS SQL

Server hoặc MySQL

Trang 6

Tài liệu tham khảo

1 Jennifer Niederst Robbins Web Design in a Nutshell (A

Desktop Quick Reference), Third Edition, 2006.

2 Jeffrey Veen The Art & Science of Web Design, 2001.

3 Lê Minh Hoàng Tự học thiết kế web, NXB “Lao ðộng”,

Trang 7

Chương I: Giới thiệu

ñó Hypertext Markup Language - HTML

– 1990 – Tim viết trình duyệt (Web Browser) và Web server ñầu tiên (info.cern.ch)

– Việt nam có Internet vào tháng 11/1997

– ðến nay, có khoảng hơn 30 tỉ trang web thuộc hơn

100 triệu website

Trang 8

Các thành phần của web

Web là gì?

– Là các dịch vụ phân tán cung cấp thông tin

– Web Page – Web site

– Web Server, Web Browser

Trang 9

Webpage - Website

Web page:

– Là một trang web

– Có thể viết bằng các ngôn ngữ khác nhau

nhưng kết quả trả về client là trang HTML

Web site:

Là tập hợp các trang Web có nội dung thống nhất,

phục vụ cho một mục ñích nào ñó.

World Wide Web (WWW):

Là hệ thống các Web Site trên toàn thế giới ñược truy cập thông qua mạng Internet.

Trang 10

URL-Uniform Resource Locator

URL-Uniform Resource Locator : (Chuỗi ñịnh vị tài nguyên)

Dạng:

giaothức://ñịa_chỉ_máy_chủ:cổng/ñường_dẫn_ñến_tài_nguyên

Ví dụ: http://www.lhu.edu.vn:80/index.aspx

Trang 11

Webserver – Web Browser

– Là chương trình chạy trên client ñể khai

thác DV web của server – Một số web browser thông dụng: Internet

Explorer (IE), Nescape (NS), Mozilla Firefox,

Trang 12

ðịnh hướng

Khi nào thì bắt ñầu? Bắt ñầu từ

ñâu?

Cần học những gì ñể thiết kế web?

- Thiết kế ñồ họa, Thiết kế giao diện

- Thiết kế thông tin

- Tạo các trang web với HTML

- Lập trình và quá trình tạo mã kịch bản

- Truyền thông ña phương tiện

Trang 13

ASP.NET Visual Studio.NET

Web Matrix

Trang 15

Hoạt ñộng của trang web

Internet và Web

ðịa chỉ trang web - URL

http:// www.domain.com :8080/ 2007/dbase /index.html

Server name 203.162.39.106

Trang 16

Cách hiển thị trang web

a) Request/ Response

Trang 17

b) Client-side model

Trang 18

c) Server-side model

Trang 19

Các triết lý xây dựng web

- Mục ñích của Website cần thiết kế

- Xác ñịnh ñối tượng ñộc giả của Website

- Thiết lập các chủ ñề

- Thiết kế các khối thông tin chủ yếu sẽ

cung cấp

Trang 20

Các triết lý xây dựng web (tt)

ðộc giả (Web surfer)

- ðộc giả mới và ðộc giả không thường xuyên

- ðộc giả chuyên nghiệp và ñộc giả thường xuyên

- Sự hiểu biết

- Trình ñộ

- Sở thích

- Kinh nghiệm

- ðộc giả trong nước

- ðộc giả nước ngoài

Trang 21

Các bước trong tổ chức thông tin

- Thiết lập hệ thống cấp bậc theo tầm quan trọng và tính tổng quát

- Tạo cấu trúc quan hệ giữa chúng

- Phân tích sự thành công về chức năng và thẩm mỹ

của hệ thống

Trang 22

Bố trí các trang web

Hệ thống phân cấp

Trang 23

Bố trí các trang web (tt)

Các mối quan hệ-liên kết

Không nên xây dựng một website như sau

Trang 24

Website quá nông, chỉ một mức liên

kết => không có liên kết, trật tự

Trang 25

Website quá sâu => mở nhiều thư mục mới tới

ñích

Trang 26

Một cấu trúc hợp lý

Trang 27

4 kiểu cấu trúc: Nối tiếp, ô lưới, phân cấp, mạng nhện

Trang 28

- Thời gian quản lý

- Các tiêu chuẩn thiết kế

Trang 29

Các khái niệm cơ bản

Trang 30

Mạng máy tính – Computer Network

Là hệ thống các máy tính ñược kết nối với nhau nhằm trao ñổi dữ liệu.

Phân loại mạng theo phạm vi:

– Local Area Network (LAN)

– Wide Area Network (WAN)

– Metropolitan Area Network (MAN)

– Global Area Network (GAN)

– Internet

có quy mô trên toàn thế giới

Trang 32

ðịa chỉ IP – IP address

Nhiệm vụ: Phân biệt các máy khác nhau trên mạng

Trang 33

Tên miền - Domain Name

IP dùng ñể liên lạc giữa các máy tính trong mạng

nhưng không thân thiện với con người.

Tên miền là tên của các máy phục vụ trên mạng sao

cho thân thiện với con người

Người ta dùng máy chủ DNS ñể chuyển ñổi qua lại

giữa ñịa chỉ IP và tên miền.

Tên miền ñược chia thành nhiều cấp, phân cách bởi

dấu chấm "."

VD: www.lhu.edu.vn

– Là ñịa chỉ máy chủ thuộc trường ðH Lạc Hồng, có ñịa chỉ IP

Trang 34

ñể cho các máy tính khác có thể khai thác và truy cập (máy phục vụ).

Một máy chủ có thể dùng cho một hay nhiều mục ñích Tên máy chủ thường gắn với mục ñích sử dụng

khai thác các tài nguyên trên máy chủ

Việc kết nối của client với server và việc khai thác dịch

vụ của server tạo nên mô hình Client/Server

Một máy tính vừa có thể là server vừa là client

Trang 35

Cổng dịch vụ - Service Port

Một máy server có thể cung cấp nhiều dịch

vụ -> Cần có cơ chế ñể client khai thác ñúng dịch vụ cần thiết

Mỗi dịch vụ trên máy tính nằm ở những vị trí khác nhau (cổng dịch vụ), máy khách truy

cập và khai thác dịch vụ thông qua các cổng này.

Hai dịch vụ khác nhau phải ñược chạy trên

những cổng khác nhau

Mỗi một dịch vụ thường chiếm những cổng

mặc ñịnh (ftp: 21; http: 80…)

Trang 36

Các dịch vụ cơ bản

ðăng tải các thông tin

Thư ñiện tử – Email (Electronic mail):

– Là dịch vụ trao ñổi các thông ñiểm qua mạng viễn thông

– Sử dụng giao thức SMTP/POP3 ñể gởi/nhận email

– ðịa chỉ email có dạng : user_name@domainame – ðược quản lý bởi Mail Server

– Phân biệt Webmail, Mail Client

Truyền, tải tập tin – FTP

Trò chuyện – Chat,

Trang 37

Web tĩnh và web ñộng

Trang web tĩnh:

– Chứa nội dung cố ñịnh HTML

– Không cho phép NSD tương tác, cập nhật

– Một trang web chứa các hình ảnh chuyển

ñộng chưa hẳn là trang web ñộng

Trang 40

Thiết kế web Khoa CNTT 1

ðiểm thi cuối kỳ: 60%

Mục tiêu môn học

Nắm vững các khái niệm căn bản của quá trình

thiết cài ñặt và triển khai một ứng dụng web

Thiết kế trang Web và cài ñặt một ứng dụng

Web hoàn chỉnh bằng HTML,CSS,JavaScript và

PHP

Triển khai và khai thác ứng dụng web trên

Internet

Nội dung môn học

Chương 1 : Giới thiệu

Chương 2 : Các bước thiết kế webChương 3: Ngôn ngữ HTMLChương 4: CSS

Chương 5: Web FormChương 6: Thết kế trang web ñộng với JavaScript

Chương 7: Thiết kế web với PHP

Các kiến thức tiên quyết

Lập trình cơ bản C, C++ hoặc Java

Các kiến thức cơ bản về CSDL

Thiết kế, ứng dụng MS Access, MS SQL

Server hoặc MySQL

Tài liệu tham khảo

1 Jennifer Niederst Robbins Web Design in a Nutshell (A Desktop Quick Reference), Third Edition, 2006

2 Jeffrey Veen The Art & Science of Web Design, 2001

3 Lê Minh Hoàng Tự học thiết kế web, NXB “Lao ðộng”, tập I&II, 2007

Các trang Web tham khảo:

– www.w3schools.com

– www.php.net

– www.w3.org

– www.javascript.internet.com

Trang 41

Chương I: Giới thiệu

Lịch sử:

– Mạng Internet xuất phát từ mạng ARPANET của Mỹ

(1969) - mạng giữa các trường ðH

– 1989 - Tim Berners Lee phát minh ra giao thức World

Wide Web (tại phòng TN vật lý phân tử-Geneva), sau

ñó Hypertext Markup Language - HTML

– 1990 – Tim viết trình duyệt (Web Browser) và Web

server ñầu tiên (info.cern.ch)

– Việt nam có Internet vào tháng 11/1997

– ðến nay, có khoảng hơn 30 tỉ trang web thuộc hơn

100 triệu website

Web là gì?

– Là các dịch vụ phân táncung cấp thông tin

multimediadựa trên hypertext

– Web Page– Web site–Uniform Resource Locator (URL)– Web Server, Web Browser

Webpage - Website

Web page:

– Là một trang web

– Có thể viết bằng các ngôn ngữ khác nhau

nhưng kết quả trả về client là trang HTML

Web site:

Là tập hợp các trang Web có nội dung thống nhất,

phục vụ cho một mục ñích nào ñó

World Wide Web (WWW):

Là hệ thống các Web Site trên toàn thế giới ñược truy

cập thông qua mạng Internet

URL-Uniform Resource Locator

URL-Uniform Resource Locator : (Chuỗi ñịnh vị tài nguyên)

Dạng:

giaothức://ñịa_chỉ_máy_chủ:cổng/ñường_dẫn_ñến_tài_nguyên

Ví dụ: http://www.lhu.edu.vn:80/index.aspx

Webserver – Web Browser

– Là chương trình chạy trên client ñể khai

thác DV web của server

– Một số web browser thông dụng: Internet

Explorer (IE), Nescape (NS), Mozilla

- Thiết kế ñồ họa, Thiết kế giao diện

- Thiết kế thông tin

- Tạo các trang web với HTML

- Lập trình và quá trình tạo mã kịch bản

- Truyền thông ña phương tiện

Trang 42

Hoạt ñộng của trang web

Internet và Web

ðịa chỉ trang web - URL

http://www.domain.com:8080/2007/dbase/index.html

Server name

203.162.39.106

Protocol Port Directory File name

a) Request/ Response

b) Client-side model

c) Server-side model

Trang 43

Các triết lý xây dựng web

- Mục ñích của Website cần thiết kế

- Xác ñịnh ñối tượng ñộc giả của Website

- Thiết lập các chủ ñề

- Thiết kế các khối thông tin chủ yếu sẽ

cung cấp

ðộc giả (Web surfer)

- ðộc giả mới và ðộc giả không thường xuyên

- ðộc giả chuyên nghiệp và ñộc giả thường xuyên

- Sự hiểu biết

- Trình ñộ

- Sở thích

- Kinh nghiệm

- ðộc giả trong nước

- ðộc giả nước ngoài

Các bước trong tổ chức thông tin

-Chia thành các ñơn vị logic, cắt ñoạn thông tin

- Thiết lập hệ thống cấp bậc theo tầm quan trọng và tính

tổng quát

- Tạo cấu trúc quan hệ giữa chúng

- Phân tích sự thành công về chức năng và thẩm mỹ

Các mối quan hệ-liên kết

Không nên xây dựng một website như sau

Website quá nông, chỉ một mức liên kết => không có liên kết, trật tự

Trang 44

4 kiểu cấu trúc: Nối tiếp, ô lưới, phân cấp, mạng nhện

- Trang chủ

- Menu ñồ họa hay text? Ai sẽ là ñộc giả của trang web ? (ñồ họa – www.kodak.com , text – www.w3schools.com )

- Menu và các submenu

- Thời gian quản lý

- Các tiêu chuẩn thiết kế

Các khái niệm cơ bản

Mạng máy tính – Computer Network

Là hệ thống các máy tính ñược kết nối với nhau nhằm trao ñổi dữ liệu

Phân loại mạng theo phạm vi:

– Local Area Network (LAN)– Wide Area Network (WAN)– Metropolitan Area Network (MAN)– Global Area Network (GAN)– Internet

Mạng Internet:Là mạng của các mạng máy tính,

có quy mô trên toàn thế giới

Trang 45

Giao thức – Protocol

Giao thức – Protocol: Là tập hợp các qui

tắc ñược thống nhất giữa hai máy tính

nhằm thực hiện trao ñổi dữ liệu ñược

Nhiệm vụ: Phân biệt các máy khác nhau trên mạng

Khuôn dạng: Có ñộ dài 32 bít (4 số 1 byte) xxx.yyy.zzz.ttt (0 <

xxx, yyy, zzz, ttt <255) Ví dụ: 203.162.18.59

ðịa chỉ IP ñược chia thành 4 lớp A, B, C, D, mỗi ñịa chỉ gồm hai phần: Network address và host address

ðể biết IP: ping www.intel.com

Tên miền - Domain Name

IP dùng ñể liên lạc giữa các máy tính trong mạng

nhưng không thân thiện với con người

Tên miền là tên của các máy phục vụ trên mạng sao

cho thân thiện với con người

Người ta dùng máy chủ DNS ñể chuyển ñổi qua lại

giữa ñịa chỉ IP và tên miền

Tên miền ñược chia thành nhiều cấp, phân cách bởi

Máy chủ - server:Chứa dữ liệu và tài nguyên, dịch vụ

ñể cho các máy tính khác có thể khai thác và truy cập (máy phục vụ)

Một máy chủ có thể dùng cho một hay nhiều mục ñích

Tên máy chủ thường gắn với mục ñích sử dụng

– File server – Application server – Mail server – Web server – …

Máy khách - client:Là máy tính dùng ñể kết nối và khai thác các tài nguyên trên máy chủ

Việc kết nối của client với server và việc khai thác dịch

vụ của server tạo nên mô hình Client/Server

Một máy tính vừa có thể là server vừa là client

Cổng dịch vụ - Service Port

Một máy server có thể cung cấp nhiều dịch

vụ -> Cần có cơ chế ñể client khai thác ñúng

dịch vụ cần thiết

Mỗi dịch vụ trên máy tính nằm ở những vị trí

khác nhau (cổng dịch vụ), máy khách truy

cập và khai thác dịch vụ thông qua các cổng

ðăng tải các thông tin

Thư ñiện tử – Email (Electronic mail):

– Là dịch vụ trao ñổi các thông ñiểm qua mạng viễn thông

– Sử dụng giao thức SMTP/POP3 ñể gởi/nhận email

– ðịa chỉ email có dạng : user_name@domainame– ðược quản lý bởi Mail Server

– Phân biệt Webmail, Mail Client

Truyền, tải tập tin – FTP

Trò chuyện – Chat,

Trang 46

Web tĩnh và web ñộng

Trang web tĩnh:

– Chứa nội dung cố ñịnh HTML

– Không cho phép NSD tương tác, cập nhật

– Một trang web chứa các hình ảnh chuyển

ñộng chưa hẳn là trang web ñộng

Trang web ñộng

– Kết hợp HTML và mã lệnh

– Mã lệnh ñược thực thi trên server, gửi kết quả

là HTML về NSD

– Có khả năng tương tác với NSD

Định dạng
Số trang	46
Dung lượng	339,6 KB