Tinhoc

BÀI GIẢNG
THIẾT KẾ WEB

CHƯƠNG TRÌNH KỸ THUẬT VIÊN

GV: ThS. Huỳnh Minh Phúc
ĐT: 0918 145 013 – Email:[email protected]
Giới thiệu môn học
Môn học cung cấp các kỹ năng cơ bản thiết kế web tĩnh và xử lý dữ liệu tại client.
Nội dung gồm 5 phần:
Căn bản về HTML
Một số lệnh Ngôn ngữ Javascript
Phần mềm hỗ trợ thiết kế web – Dreamweaver
Phần mềm xử lý ảnh Photoshop CS2
Phần mềm tạo hiệu ứng Flash 8.0
Thời lượng : 120 tiết.
PHẦN I
WEB – HTML - DREAMWEAVER
Internet : mạng máy tính toàn cầu, các máy truyền thông với nhau bằng giao thức chung là TCP/IP (Transfer Control Protocol/Internet Protocol)
CÁC KHÁI NIỆM CƠ BẢN
Intranet : là mạng cục bộ không nối vào Internet, truyền thông bằng giao thức TCP/IP.

Mô hình Client-Server: mô hình khách-chủ. Server chứa tài nguyên dùng chung cho nhiều máy Client
Internet Server: là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server, FTP Server…)
IAP từ chữ Internet Access Provider - nhà cung cấp khả năng truy cập Internet. Nếu hiểu Internet như một siêu xa lộ thông tin thì IAP là phương tiện để đưa bạn vào xa lộ, hay nói cách khác là kết nối bạn trực tiếp với Internet. IAP có thể làm luôn chức năng của ISP nhưng ngược lại thì không. Một IAP thường phục vụ cho nhiều ISP khác nhau.
Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng. Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.
Internet Protocol : tiêu chuẩn chi phối việc chuyển tải thông tin giữa các máy tính trong mạng
World Wide Web (WWW): dịch vụ tra cứu thông tin Internet. Dịch vụ này đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser.

Web Browser : trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web Server.
Internet Explorer
Nestcape
FireFox
URL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng.
Ví dụ: 207.46.130.149 được biểu diễn trong URL là www.microsoft.com
Phân loại trang web
Dựa vào công nghệ phát triển, có 2 loại:
Xác định cấu trúc website: phân cấp
Phần dành cho khách hàng
Xác định cấu trúc website: ví dụ
Xác định cấu trúc website: ví dụ
Phần dành cho nhà quản trị
Một số điều cần chú ý
Đặc tả:
Web để làm gì?
Ai dùng?
Trình độ người dùng?
Nội dung, hình ảnh?
Phân tích
Mối liên quan giữa các nội dung?
Thứ tự các nội dung?
Một số điều cần chú ý (tt)
Thiết kế
Sơ đồ cấu trúc website
Giao diện
Tĩnh hay động
CSDL
Nội dung từng trang
Liên kết giữa các trang
Lập trình
Cấu trúc thư mục
Các module dùng chung
…
Một số điều cần chú ý (tt)
Kiểm thử
Kiểm tra trên nhiều trình duyệt
Kiểm tra trên nhiều loại mạng
Kiểm tra tốc độ
Kiểm tra các liên kết
Thử các lỗi bảo mật
…
Công bố website trên Internet
Các điều kiện cần thiết
Xây dựng website
Quyền sử dụng hợp pháp
Domain
Sử dụng tên miền con miễn phí
Đăng ký tên miền riêng
Hosting
Sử dụng miễn phí
Thuê không gian riêng
Tự host website của mình
Duy trì, phát triển và quảng bá website
Đăng ký tên miền
Xác định tên
Tên tiếng Việt
Tên giao dịch tiếng Anh
Tên viết tắt
Xác định nơi đăng ký
Đăng ký tên miền càng sớm càng tốt
Thủ tục đơn giản, nhanh chóng
Kinh phí rẻ
Việt Nam: 450.000+480.000/năm
Nước ngoài: 8 – 12USD
Hosting
Xác định môi trường vận hành của website
Máy chủ Windows
Support ASP, PHP…, SQL Server, MySQL…
Đắt hơn máy chủ Linux
Máy chủ Linux
Support PHP, JSP…, MySQL…
Rẻ hơn máy chủ Windows
Xác định dung lượng thực tế của website, khả năng sẽ mở rộng
Xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu…
GIỚI THIỆU KHÁI QUÁT VỀ WEB & HTML
Web:
Web là một ứng dụng chạy trên mạng Client-Server, khách và chủ web liên lạc nhau bằng giao thức http (HyperText Transfer Protocol). Các web server cung cấp thông tin được định dạng theo ngôn ngữ HTML
Web Page: là một file văn bản chứa những tag HTML hoặc những đọan mã đặc biệt mà trình duyệt web có thể hiểu và thông dịch được, file được lưu với phần mở rộng là .html hoặc htm.
Website: Một tập hợp nhiều web page, thể hiện thông tin của một tổ chức hoặc một chủ đề nào đó
2. HTML (HyperText makup Language):
HTML gồm các đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi trình duyệt Web
Hypertext (Hypertext link) là một từ hay một cụm từ đặc biệt dùng để tạo liên kết giữa các trang web
Mark up: là cách định dạng văn bản để trình duyệt hiểu và thông dịch được.
Language: tập những quy luật để định dạng văn bản trên trang web.
3. Trình soạn thảo trang web:
Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage hoặc Dreamweaver.
III. Dreamweaver
1) Tổng quan về Dreamweaver:
Là một phần mềm thiết kế Web chuyên nghiệp.
Tương thích với nhiều đối tượng nhúng (Flash, Shockwave, Active X, …).
Hỗ trợ các công cụ thiết kế trang Web động rất hiệu quả.
2) Khởi động Dreamweaver:
Chọn Start  Programs  Macromedia 
Dreamweaver
3) Giao diện chính của Dreamweaver:
GIỚI THIỆU DREAMWEAVER
4) Chức năng các thành phần:
 Thanh công cụ Document:
GIỚI THIỆU DREAMWEAVER
4) Chức năng các thành phần:
 Thanh công cụ Insert:
Common:

GIỚI THIỆU DREAMWEAVER
4) Chức năng các thành phần:
 Thanh công cụ Insert:
Ngoài ra còn có các nhóm công cụ khác:
+ Layout: cách bố trí, sắp xếp các thành phần.
+ Forms: biểu mẫu.
+ Text: định dạng văn bản.
+ HTML: các thẻ HTML.
+ Application: những ứng dụng trong Web động.
+ Flash elements: các thành phần của Flash.

GIỚI THIỆU DREAMWEAVER
1) Tạo và lưu một trang Web:

THIẾT KẾ TRANG WEB
Hoặc chọn menu File  New
 Tạo mới một trang Web: click HTML
(Create New)

1) Tạo và lưu một trang Web:
THIẾT KẾ TRANG WEB
 Lưu trang Web: chọn menu File  Save (Ctrl + S)
Xuất hiện hộp
thoại Save As
Bài tập
Sử dụng dreamweaver để:
1. Tạo trang web liên hệ, lưu file với tên lienhe.html
2. Tạo trang tin tức. Lưu file với tên tintuc.html
Chú ý: thực hành các bài tập week 1
IV. CÚ PHÁP THẺ (TAG) HTML
Cú pháp:
Object
TagName : tên tag HTML, liền với dấu “< “, không có khoảng trắng
Object :đối tượng hiển thị trên trang Web
ListPropeties: danh sách thuộc tính của Tag
Nếu có nhiều thuộc tính thì các thuộc tính cách nhau khoảng trắng

Object

Ví dụ:

nội dung

V. CẤU TRÚC CƠ BẢN CỦA TRANG WEB





Nội dung hiển thị trên trình duyệt


CÁC THẺ (TAG) HTML CƠ BẢN
Thẻ này xác định phần nội dung chính của tài liệu – Phần thân của tài liệu.

: Chứa nội dung của trang web
Cú pháp:

Nội dung chính của trang web

Các thuộc tính của
BgColor: thiết lập màu nền của trang
Text: thiết lập màu chữ
Link: màu của siêu liên kết
Vlink: màu của siêu liên kết đã xem qua
Background: load một hình làm nền cho trang
LeftMargin: Canh lề trái
TopMargin: Canh lề trên của trang
Ví dụ:






Welcome to HTML



Các thẻ định dạng khối
1. Thẻ

: Dùng để ngắt đoạn và bắt đầu đoạn mới
Cú pháp:

Nội dung của đoạn

2. Các thẻ định dạng đề mục
: Tạo header, gồm 6 cấp header, được đặt trong phần BODY
Cú pháp

Nội dung của Header


: Ngắt dòng tại vị trí của tag.

---

: Kẻ đường ngang trang
Cú pháp:

---

: định dạng font chữ
Định dạng Font chữ cho cả tài liệu thì đặt tag trong phần
Định dạng từng phần hoặc từng từ thì đặt tại vị trí muốn định dạng
Cú pháp:

Nội dung hiển thị

7. : Chèn một hình ảnh vào trang Web
Cú pháp:

8. : Chèn một âm thanh vào trangWeb. Âm thanh này sẽ được phát mỗi khi người sử dụng mở trang Web.
Cú pháp:

9. : Điều khiển đối tượng chạy một cách tự động trên trang Web
Cú pháp:
Object
Ví dụ:
toi la chien sy
10. : không hiển thị trong trang
Cú pháp:

11. : định dạng chữ đậm
Cú pháp
Nội dung chữ đậm
12. Tag : Định dạng chữ nghiêng
Cú pháp:
Nội dung chữ nghiêng
13. Tag : Gạch chân văn bản
Cú pháp:
Nội dung chữ gạch chân
14. Tag và : Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung quanh
Cú pháp
Nội dung chữ to
Nội dung chữ nhỏ
Ví dụ:

Trường Đại Học Trà Vinh

Trung tâm Tin học và Ngoại ngữ Victory

Ví dụ:

Trường Đại Học Trà Vinh




Trung Tâm tin học & Ngoại ngữ Victory

15. Các ký tự đặc biệt:
Lớn hơn (>): >
Ví dụ:

If A > B
Then

A = A + 1

Nhỏ hơn (<): <
Ví dụ:

If A < B
Then

A = A + 1

If A > B Then
A = A + 1
If A < B Then
A = A + 1
Cặp nháy””: "
Ví dụ:

" To be or not to be? " That is the question

Ký tự và &: &
Ví dụ:

William & Graham went to the fair
Ký tự khoảng trắng: �
" To be or not to be? " That is the question
William & Graham went to the fair
CÁC THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆT
Cách load lại trang Web: Click biểu tượng Refresh (F5) trên thanh công cụ.
Chỉnh size chữ hiển thị trên trang: Chọn Menu View->Text size
Chỉnh lại font chữ: Chọn Menu View->EnCoding
Nếu trang Web không hiển thị được Font tiếng Việt:
Chọn menu Tool chọn Internet Options->Chọn Tab Fonts chọn Font tiếng Việt
Hoặc chọn Menu View>EnCodingchọn các font như User defined,Vietnamese….

Các tuỳ chọn khác cho trang Web: Tools  Internet option
Tab General(Hình 1): thiết lập các tùy chọn cho trình duyệt
Use Current: chọn trang hiện tại để load lên mỗi lần khởi động IE
Use Default: địa chỉ trang Web mặc định mỗi khi mở trình duyệt
Ví dụ
Khi mở IE thì tự động hiển thị trang Web Yahoo thì trong ô Address nhập: http://yahoo.com , nếu chọn Use Blank thì hiển thị trang trắng .
Chọn trang web mặc định khi mở trình duyệt
Lưu lại các trang web đã duyệt qua tại máy Client và thông tin đăng nhập của user hiện hành…Nếu khộng muốn lưu lại: Chọn Delete Cookies và Delete Files.
thiết lập khoảng thời gian lưu trữ trang trong đối tượng History
Tab Advance(Hình 2): có thể chọn các tùy chọn khác như:
Ngăn chặn không cho tải hình xuống trang web
Màu liên kết, cách thể hiện liên kết trên trang
Hiệu chỉnh trang Web: View source->hiệu chỉnhchọn File  Save để lưu lại F5 để cập nhật lại nội dung vừa hiệu chỉnh
Bài tập
Tạo trang web giới thiệu, sau đó lưu lại với tên Liên hệ.html
Tạo các trang tin tức,….


See you next class