1. BÀI 1
BƯỚC ĐẦU LÀM QUEN VỚI ADOBE DREAMWEAVER CS4
VÀ NHỮNG THAO THÁC CƠ BẢN TRONG THIẾT KẾ
WEBSITE
2. MỤC TIÊU BÀI HỌC
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 2
4. KHÁI NIỆM VỀ WEBSITE
Tập hợp các trang web (webpages)
Chứa văn bản, đối tượng đồ họa (âm
thanh, hình ảnh, …)
Được lưu trữ trên máy chủ web
(web server)
Website
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 4
Được lưu trữ trên máy chủ web
(web server)
Truy cập thông qua Internet và trình
duyệt web (phần mềm ở client)
Website
5. THÀNH PHẦN CỦA TRANG WEB
Cách thức hiển thị trang web
Web Client
(trình duyệt)
Web Client
(trình duyệt) Web serverWeb server
HTML
URL
Máy chủ chứa web
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 5
Máy chủ chứa web
6. TÊN MIỀN, ĐỊA CHỈ IP
Mỗi một máy tính tham gia vào mạng máy tính đều
được gán một địa chỉ IP. Các máy tính khác nhau sẽ
có địa chỉ IP khác nhau
Có 2 phiên bản địa chỉ IP: 32 bit và 64 bit
Tên miền là tên tương ứng với địa chỉ IP
Máy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữa
tên miền và địa chỉ IP
Mỗi một máy tính tham gia vào mạng máy tính đều
được gán một địa chỉ IP. Các máy tính khác nhau sẽ
có địa chỉ IP khác nhau
Có 2 phiên bản địa chỉ IP: 32 bit và 64 bit
Tên miền là tên tương ứng với địa chỉ IP
Máy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữa
tên miền và địa chỉ IP
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 6
64.233.181.9964.233.181.99 www.google.comwww.google.com
DNSDNS
Địa chỉ IP Tên miền
7. CLIENT – SERVER – WEB HOST
Client – Server là loại kiến trúc thông dụng cho
nhiều loại ứng dụng mạng, trong đó:
Server – máy chủ: Là máy tính chuyên cung cấp tài nguyên,
dịch vụ cho máy tính khác. Một máy chủ có thể được dùng
cho một hoặc nhiều mục đích khác nhau. Phải được duy trì
kết nối internet 24h/ ngày
Client – máy trạm: Là máy tính khai thác các dịch vụ được
cung cấp bởi máy chủ. Việc khai thác này thường được thực
hiện thông qua các phần mềm
Client – Server là loại kiến trúc thông dụng cho
nhiều loại ứng dụng mạng, trong đó:
Server – máy chủ: Là máy tính chuyên cung cấp tài nguyên,
dịch vụ cho máy tính khác. Một máy chủ có thể được dùng
cho một hoặc nhiều mục đích khác nhau. Phải được duy trì
kết nối internet 24h/ ngày
Client – máy trạm: Là máy tính khai thác các dịch vụ được
cung cấp bởi máy chủ. Việc khai thác này thường được thực
hiện thông qua các phần mềm
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 7
8. THIẾT KẾ WEBSITE
Xác định yêu
cầu & phân
tích
Tổ chức và
phác thảo
website
Bảo trì
Thiết kế
Graphic
Thiết kế
HTML/ CSS/ Js
Viết mã lập
trình
Kiểm thử
Triển khai
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 8
Thiết kế website
9. THIẾT KẾ WEBSITE
Xác định yêu cầu và phân tích:
Là quá trình thu thập và phân tích chi tiết tất cả các
yêu cầu liên quan đến website cần xây dựng
Mục tiêu là trả lời cho các câu hỏi sau:
• Mục đích của website là gì ?
• Đối tượng sử dụng website ?
• Website bao gồm các nội dung gì, liên kết giữa các nội
dung ra sao ?
• Yêu cầu về hình thức cho website là gì ?
• …
Đưa ra sitemap (cấu trúc website) cho toàn bộ
website
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 9
Xác định yêu cầu và phân tích:
Là quá trình thu thập và phân tích chi tiết tất cả các
yêu cầu liên quan đến website cần xây dựng
Mục tiêu là trả lời cho các câu hỏi sau:
• Mục đích của website là gì ?
• Đối tượng sử dụng website ?
• Website bao gồm các nội dung gì, liên kết giữa các nội
dung ra sao ?
• Yêu cầu về hình thức cho website là gì ?
• …
Đưa ra sitemap (cấu trúc website) cho toàn bộ
website
10. THIẾT KẾ WEBSITE
Thiết kế Graphic:
Thiết kế là quá trình xác định rõ về mặt nội dung và
hình thức cho website
Sản phẩm của quá trình thiết kế Graphic:
• Thiết kế dạng prototype (phác thảo) giao diện cho từng
trang web (mock-up)
• Thiết kế mịn giao diện từng trang web (photoshop,
flash, firework, …)
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 10
Thiết kế Graphic:
Thiết kế là quá trình xác định rõ về mặt nội dung và
hình thức cho website
Sản phẩm của quá trình thiết kế Graphic:
• Thiết kế dạng prototype (phác thảo) giao diện cho từng
trang web (mock-up)
• Thiết kế mịn giao diện từng trang web (photoshop,
flash, firework, …)
11. THIẾT KẾ WEBSITE
Thiết kế HTML/ CSS/ Js:
Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giai
đoạn viết mã cho trang web
Sử dụng mã HTML/ CSS/ Js … để chuyển giao diện
graphic của web sang dạng chuẩn HTML
Thực hiện đúng chuẩn trong bản thiết kế: kích thước
web, khoảng cách các thành phần trên trang web,
hình ảnh, …
Chạy trên trình duyệt
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 11
Thiết kế HTML/ CSS/ Js:
Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giai
đoạn viết mã cho trang web
Sử dụng mã HTML/ CSS/ Js … để chuyển giao diện
graphic của web sang dạng chuẩn HTML
Thực hiện đúng chuẩn trong bản thiết kế: kích thước
web, khoảng cách các thành phần trên trang web,
hình ảnh, …
Chạy trên trình duyệt
12. THIẾT KẾ WEBSITE
Viết mã lập trình:
Sử dụng các công cụ hỗ trợ và ngôn ngữ lập trình để
tạo ra website theo như thiết kế
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 12
13. THIẾT KẾ WEBSITE
Kiểm thử:
Là quá trình kiểm tra tính năng, nội dung và giao diện
của các trang Web dựa trên các yêu cầu đã được
phân tích ở bước đầu tiên
Việc kiểm thử cần được thực hiện trên nhiều trình
duyệt web khác nhau, nhiều loại mạng khác nhau
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 13
Kiểm thử:
Là quá trình kiểm tra tính năng, nội dung và giao diện
của các trang Web dựa trên các yêu cầu đã được
phân tích ở bước đầu tiên
Việc kiểm thử cần được thực hiện trên nhiều trình
duyệt web khác nhau, nhiều loại mạng khác nhau
14. THIẾT KẾ WEBSITE
Triển khai và bảo trì:
Triển khai là quá trình đưa website lên một Web
server cụ thể nào đó trên mạng
Bảo trì là công việc duy trì cập nhật nội dung/hình
thức của trang web
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 14
Triển khai và bảo trì:
Triển khai là quá trình đưa website lên một Web
server cụ thể nào đó trên mạng
Bảo trì là công việc duy trì cập nhật nội dung/hình
thức của trang web
15. THIẾT KẾ WEBSITE
Công cụ thiết kế website:
Là các phần mềm hỗ trợ việc thiết kế website (giao
diện hình ảnh, mã)
Bao gồm các tính năng sau:
• Soạn thảo HTML
• Tạo giao diện trang Web theo kiểu WYSIWYG
• Chạy Website trên máy cục bộ
Các công cụ thông dụng:
• Adobe Dreamweaver
• PHPEditor
• Microsoft FrontPage
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 15
Công cụ thiết kế website:
Là các phần mềm hỗ trợ việc thiết kế website (giao
diện hình ảnh, mã)
Bao gồm các tính năng sau:
• Soạn thảo HTML
• Tạo giao diện trang Web theo kiểu WYSIWYG
• Chạy Website trên máy cục bộ
Các công cụ thông dụng:
• Adobe Dreamweaver
• PHPEditor
• Microsoft FrontPage
17. HTML
Là ngôn ngữ đánh dấu siêu văn bản (HyperText
Markup Language)
Là cơ sở hoạt động của web
Trang web được xây dựng bằng mã HTML
Trình duyệt đọc và xử lý mã HTML để bố cục và
định dạng cho các thành phần (văn bản, hình ảnh,
video, …) trên trang web
Tạo và chỉnh sửa HTML bằng các công cụ soạn thảo
văn bản:
Notepad
TextEdit
….
Là ngôn ngữ đánh dấu siêu văn bản (HyperText
Markup Language)
Là cơ sở hoạt động của web
Trang web được xây dựng bằng mã HTML
Trình duyệt đọc và xử lý mã HTML để bố cục và
định dạng cho các thành phần (văn bản, hình ảnh,
video, …) trên trang web
Tạo và chỉnh sửa HTML bằng các công cụ soạn thảo
văn bản:
Notepad
TextEdit
….
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 17
18. HTML
Cấu trúc thẻ & thuộc tính
HTML sử dụng thẻ hoặc từ khóa (đặt trong dấu < và
>)
Thẻ mở kèm theo thẻ đóng: <body>…</body>
Thẻ đóng: <br />
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 18
File BasicHTML.html trong
thư mục dw01lessons
Mã HTML
Kết quả hiển thị
19. HTML
Cấu trúc trang HTML:
<html >
<head>
<title>tiêu đề website</title>
</head>
<body>
Văn bản và hình ảnh sẽ nằm ở đây …
</body>
</html>
Phần mô tả
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 19
<html >
<head>
<title>tiêu đề website</title>
</head>
<body>
Văn bản và hình ảnh sẽ nằm ở đây …
</body>
</html>
Phần nội dung
20. HTML
Phân cấp thẻ trong HTML:
Thẻ HTML tuân theo thứ tự phân cấp thẻ
<html>các thẻ khác nằm dưới</html>
<body>các thẻ nhỏ hơn</body>
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 20
<p><strong>Big bold paragraph</strong></p>
Thẻ <strong> phân cấp thấp hơn thẻ <p>
21. XHTML
XHTML 1.0 là phiên bản mới nhất của HTML
Là phiên bản chặt chẽ hơn so với HTML, khiến HTML
tương thích hơn với các nền tảng mới (thiết bị di
động)
Là sự kết hợp giữa các thành phần HTML và ngôn
ngữ mô tả dữ liệu XML (eXtensible Markup
Language – Ngôn ngữ đánh dấu mở rộng)
XHTML 1.0 là phiên bản mới nhất của HTML
Là phiên bản chặt chẽ hơn so với HTML, khiến HTML
tương thích hơn với các nền tảng mới (thiết bị di
động)
Là sự kết hợp giữa các thành phần HTML và ngôn
ngữ mô tả dữ liệu XML (eXtensible Markup
Language – Ngôn ngữ đánh dấu mở rộng)
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 21
22. XHTML
Tạo web sử dụng chuẩn XHTML:
Dreamweaver mặc định sẽ tạo ra trang web sử dụng
chuẩn XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tạo web sử dụng chuẩn XHTML:
Dreamweaver mặc định sẽ tạo ra trang web sử dụng
chuẩn XHTML 1.0 Transitional
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 22
HTML XHTML
Cấu trúc ngôn ngữ chặt chẽ hơn
Cẩu thả trong việc viết mã lòng & đóng
thẻ
Tất cả các thẻ đều phải có thẻ đóng và
phải lồng các thẻ đúng theo phân cấp
Không phân việt kiểu chữ hoa/ thường Phải sử dụng kiểu chữ thường khi tạo thẻ
24. ADOBE DREAMWEAVER CS4
Là công cụ thiết kế, soạn thảo mã trang web
Các tính năng chính:
Cung cấp rất nhiều tính năng thiết kế giao diện và
định dạng trang web
Hỗ trợ quản lý site và FTP
Cung cấp môi trường để code và soạn thảo
Là công cụ thiết kế, soạn thảo mã trang web
Các tính năng chính:
Cung cấp rất nhiều tính năng thiết kế giao diện và
định dạng trang web
Hỗ trợ quản lý site và FTP
Cung cấp môi trường để code và soạn thảo
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 24
25. ADOBE DREAMWEAVER CS4
Menu Nút hiển thị chế độ
làm việc
Vùng làm
việc
Bảng làm việc
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 25
Bảng PROPERTIES
26. ADOBE DREAMWEAVER CS4
Cửa sổ tạo file mới: File > New
Tùy chọn để lựa
chọn loại trang
muốn tạo
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 26
Tùy chọn để lựa
chọn bố cục cho
trang
27. ADOBE DREAMWEAVER CS4
Chức năng tổng quát:
Hỗ trợ 3 chế độ hiển thị: Design, Code và Split
Tích hợp sẵn FTP
Cho phép thêm các đối tượng vào trang web/code từ
Insert Panel
Dễ dàng thay đổi layout của màn hình làm việc
Có nhiều công cụ trực quan mạnh
Hỗ trợ CSS thông qua CSS panel
Chức năng tổng quát:
Hỗ trợ 3 chế độ hiển thị: Design, Code và Split
Tích hợp sẵn FTP
Cho phép thêm các đối tượng vào trang web/code từ
Insert Panel
Dễ dàng thay đổi layout của màn hình làm việc
Có nhiều công cụ trực quan mạnh
Hỗ trợ CSS thông qua CSS panel
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 27
28. ADOBE DREAMWEAVER CS4
Tính năng mới của phiên bản CS4:
1. Live view
2. Cải thiện về CSS
3. Tập hợp các dữ liệu cho HTML
4. Code navigator
1
3
Tính năng mới của phiên bản CS4:
1. Live view
2. Cải thiện về CSS
3. Tập hợp các dữ liệu cho HTML
4. Code navigator
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 28
1
2
30. KHỞI TẠO TRANG WEB
Cách khởi tạo trang web trong Dreamweaver:
Sử dụng tính năng Site Definition: Site > New Site
Sử dụng hộp thoại Manage Sites
Sử dụng tính năng Site Definition thực hiện các công
việc:
Định nghĩa site
Đặt tên site
Định nghĩa thư mục gốc cục bộ
Làm việc với thiết lập nâng cao
Lưu site
Cách khởi tạo trang web trong Dreamweaver:
Sử dụng tính năng Site Definition: Site > New Site
Sử dụng hộp thoại Manage Sites
Sử dụng tính năng Site Definition thực hiện các công
việc:
Định nghĩa site
Đặt tên site
Định nghĩa thư mục gốc cục bộ
Làm việc với thiết lập nâng cao
Lưu site
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 30
31. KHỞI TẠO TRANG WEB
Site > New Site:
Đặt tên cho website
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 31
Có thể nhập địa chỉ http
cho web nếu đang làm
việc trực tiếp trên web
server
32. KHỞI TẠO TRANG WEB
Chọn No nếu không sử dụng
môi trường server
Chọn thư mục chứa các
file của trang web
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 32
Chọn thư mục chứa các
file của trang web
33. KHỞI TẠO TRANG WEB
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 33
Chọn None cho tùy chọn kết nối từ xa
(không phải làm việc qua server)
34. KHỞI TẠO TRANG WEB
Tùy chọn nâng cao khi định nghĩa website
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 34
tùy chọn thiết lập
khả năng trình bày,
hợp tác và triển
khai:
Tính năng kiểm tra liên kết có phân biệt
chữ hoa/ thường
35. KHỞI TẠO TRANG WEB
Kết quả hiển thị trên bảng Files
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 35
36. KHỞI TẠO TRANG WEB
Định nghĩa thuộc tính trang:
Modify > Page Properties (Ctrl + J)
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 36
37. KHỞI TẠO TRANG WEB
Appearance (CSS): tự động tạo CSS định nghĩa hình
thức trang
Appearance (HTML): không linh hoạt bằng việc sử
dụng CSS
Links (CSS): định nghĩa hình thức liên kết trên trang
Headings (CSS): định nghĩa thuộc tính của đề mục
Title/ Encoding: hiện thêm các thiết lập
Appearance (CSS): tự động tạo CSS định nghĩa hình
thức trang
Appearance (HTML): không linh hoạt bằng việc sử
dụng CSS
Links (CSS): định nghĩa hình thức liên kết trên trang
Headings (CSS): định nghĩa thuộc tính của đề mục
Title/ Encoding: hiện thêm các thiết lập
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 37
38. LÀM VIỆC VỚI THÀNH PHẦN VĂN BẢN,
HÌNH ẢNH TRÊN WEB
39. LÀM VIỆC VỚI VĂN BẢN
Các định dạng cho từng kiểu tiêu đề
HTML tương ứng:
<h1>OrganicUtopia Events</h1>
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 39
40. LÀM VIỆC VỚI VĂN BẢN
Sử dụng CSS để định dạng văn bản
HTML tương ứng:
h1
{
font-family: Arial, Helvetica, sans-serif;
color: #9C3;
}
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 40
HTML tương ứng:
h1
{
font-family: Arial, Helvetica, sans-serif;
color: #9C3;
}
41. LÀM VIỆC VỚI VĂN BẢN
Tạo danh sách (list):
List là cách hữu ích trình bày thông tin cho người độc
và không có những ràng buộc hình thức của một
đoạn văn
Rất quan trọng trên web
Giúp người duyệt web nắm được thông tin một cách
dễ dàng nhất
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 41
Tạo danh sách (list):
List là cách hữu ích trình bày thông tin cho người độc
và không có những ràng buộc hình thức của một
đoạn văn
Rất quan trọng trên web
Giúp người duyệt web nắm được thông tin một cách
dễ dàng nhất
42. LÀM VIỆC VỚI VĂN BẢN
Tạo danh sách (list):
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 42
43. LÀM VIỆC VỚI VĂN BẢN
Bảng Text Insert
Định dạng tiêu đề
Định dạng kiểu dáng cho chữ
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 43
Định dạng tiêu đề
Tạo list
Tạo các ký tự đặc biệt
44. LÀM VIỆC VỚI HÌNH ẢNH
Chèn hình ảnh vào trang web:
Insert > Image
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 44
45. LÀM VIỆC VỚI HÌNH ẢNH
Liên kết hình ảnh:
liên kết những hình ảnh thu nhỏ tới những hình ảnh
lớn hơn
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 45
46. LÀM VIỆC VỚI HÌNH ẢNH
Sử dụng ảnh giữ chỗ:
Insert > Image Objects > Image Placeholder
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 46
47. TỔNG KẾT
Trang web là một trang nội dung, có thể chứa: ký
tự, hình ảnh, âm thanh, flash và các đối tượng đồ
họa khác. Hầu hết các trang web được trình bày
dựa trên chuẩn HTML
HTML là ngôn ngữ đánh dấu siêu văn bản
(HyperText Markup Language), là cơ sở của trang
web
XHTML là sự kết hợp giữa các thành phần HTML và
ngôn ngữ mô tả dữ liệu XML (eXtensible Markup
Language – Ngôn ngữ đánh dấu mở rộng)
Khi thiết kế website, nên bắt đầu bằng việc tạo một
site tương ứng với nó trước
Trang web là một trang nội dung, có thể chứa: ký
tự, hình ảnh, âm thanh, flash và các đối tượng đồ
họa khác. Hầu hết các trang web được trình bày
dựa trên chuẩn HTML
HTML là ngôn ngữ đánh dấu siêu văn bản
(HyperText Markup Language), là cơ sở của trang
web
XHTML là sự kết hợp giữa các thành phần HTML và
ngôn ngữ mô tả dữ liệu XML (eXtensible Markup
Language – Ngôn ngữ đánh dấu mở rộng)
Khi thiết kế website, nên bắt đầu bằng việc tạo một
site tương ứng với nó trước
Slide 1 - Website và bước đầu làm quen với Adobe Dreamweaver CS4 47