Giáo trình mô đun Thiết kế Web cơ bản
Giới thiệu:
Trong bài học đầu tiên sẽ cung cấp cho người học một số kiến thức cơ bản
về internet và web. Bài học này cũng đồng thời giúp người học có cái nhìn tổng
quan về quá trình thiết kế một website.
Mục tiêu:
- Trình bày được các bước lập kế hoạch thiết kế website
- Lập được kế hoạch thiết kế của một website
- Thiết kế được bố cục của trang web
1.1. CÁC KHÁI NIỆM
1.1.1. Internet và Word Wide Web
- Internet: Internet là một hệ thống thông tin toàn cầu có thể được truy nhập
công cộng gồm các mạng máy tính được liên kết với nhau.
- World Wide Web (WWW): là một hệ thống liên kết giữa các tài liệu siêu
văn bản, được truy cập trên internet thông qua trình duyệt web và được cung
cấp bởi web server.
1.1.2. Web server, web browser và webpage
- Web server đơn giản là một máy tính nối vào Internet và chạy các phần
mềm được thiết kế để truyền tải nội dung dưới dạng trang HTML.
Máy chủ phải đủ mạnh để đáp ứng nhiều kết nối Internet đồng thời.
Thông qua trình duyệt web máy chủ sẽ cung cấp các dịch vụ được yêu cầu
đến máy dịch vụ.
- Web Browser: Web browser còn được gọi là trình duyệt web - là một phần
mềm được dùng để xem, quản lý và truy cập vào các trang web. Mỗi trình
duyệt có những đặc điểm khác nhau do đó những trang web được hiển thị
trên các trình duyệt khác nhau là không hoàn toàn giống nhau. Các trình
duyệt phổ biến hiện nay là: Microsoft Internet Explorer, Mozilla Firefox,
Apple Safari, Google Chrome, Opera.
- Webpage: trang web – một file văn bản chứa dữ liệu và các thẻ HTML hoặc
những đoạn mã mà trình duyệt web có thể hiểu và thông dịch được lưu với
phần mở rộng là .html hoặc .htm.Bài 1 - Phác thảo website
- Website: là 1 tập hợp gồm nhiều trang web thể hiện thông tin của tổ chức, 1
chủ đề nào đó.
- Home page: trang chủ của 1 website
- Hyperlink: 1 liên kết chỉ đến trang web khác
- URL (Uniform Resource Locator): là địa chỉ của 1 website, 1 webpage trên
Internet.
Có dạng: protocol://domain_name/path
Protocol: tên giao thức http, ftp, file,
Domain name: tên miền - là tên giao dịch của công ty hay tổ chức
trên Internet. Thường có dạng: yourcompany.com
Các tên miền cấp 1:
.com Các tổ chức thương mại, doanh nghiệp (commercial)
.edu Các tổ chức giáo dục (education)
.int Các tổ chức Quốc tế (international organizations)
.net mạng không thuộc các loại phân vùng khác (Network)
- Trang web tĩnh: trang web chứa nội dung cố định (thường là HTML, để
cập nhật nội dung phải cập nhật trực tiếp trên HTML), không cho phép sử
dụng tương tác, cập nhật dữ liệu trên trang web.
- Trang web động: trang web có khả năng tương tác với người sử dụng.
Trang web có kết hợp HTML và mã lệnh. Mã được thực thi trực tiếp trên
server, gửi kết quả là HTML về người sử dụng.
1.1.3. Search Engine
- Là công cụ tìm kiếm nhằm tìm ra các trang trên mạng Internet có nội dung
theo yêu cầu người dùng dựa vào các thông tin mà chúng có.
- Một số công cụ tìm kiếm mạnh trên thế giới hiện nay: Google.com,
Yahoo.com, Altavista.com,
1.1.4. Xuất bản web
Xuất bản trên web (còn gọi là xuất bản trực tuyến) là quá trình xuất bản
nội dung trên Internet.
Nội dung xuất bản web bao gồm văn bản, video, hình ảnh, âm thanh, và
các hình thức truyền thông khác.
Quy trình xuất bản web gồm:
+ Xây dựng website
Trang 1
Trang 2
Trang 3
Trang 4
Trang 5
Trang 6
Trang 7
Trang 8
Trang 9
Trang 10
Tải về để xem bản đầy đủ
171 trang
9960
Bạn đang xem 10 trang mẫu của tài liệu "Giáo trình mô đun Thiết kế Web cơ bản", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
Tóm tắt nội dung tài liệu: Giáo trình mô đun Thiết kế Web cơ bản
........................................................... 15 Hình 2.10. Kết quả ví dụ 7 ............................................................................................ 16 Hình 2.11. Kết quả ví dụ 8 ............................................................................................ 17 Hình 2.12. Kết quả ví dụ 9 ............................................................................................ 18 Hình 2.13. Kết quả ví dụ 10 .......................................................................................... 18 Hình 2.14. Kết quả ví dụ 13 .......................................................................................... 20 Hình 2.15. Kết quả ví dụ 14 .......................................................................................... 22 Hình 2.16. Kết quả ví dụ 24 .......................................................................................... 27 Hình 2.17. Kết quả ví dụ 25 .......................................................................................... 29 Hình 2.18. Ví dụ form ................................................................................................... 30 Hình 2.19. Kết quả ví dụ 26 .......................................................................................... 36 Hình 2.20. Kết quả ví dụ 27 .......................................................................................... 37 Hình 2.21. Kết quả ví dụ 28 .......................................................................................... 39 Hình 2.22. Kết quả ví dụ 29 .......................................................................................... 39 Hình 2.23. Kết quả ví dụ 30 .......................................................................................... 40 Hình 2.24. Kết quả ví dụ 31 .......................................................................................... 42 Hình 2.25. Bố cục trang ................................................................................................. 42 Hình 3.1. Hộp thoại Site setup – thẻ Site ...................................................................... 47 Hình 3.2. Cửa sổ Files ................................................................................................... 48 Hình 3.3. Hộp thoại Site setup – thẻ Advanced ............................................................ 48 Hình 3.4. Hộp thoại Site setup – thẻ Server .................................................................. 49 Hình 3.5. Hộp thoại Basic ............................................................................................. 49 Hình 3.6. Hộp thoại Manage Sites ................................................................................. 50 Hình 3.7. Hộp thoại Files .............................................................................................. 51 Hình 3.8. Lệnh kiểm tra liên kết .................................................................................... 51 Hình 3.9. Lệnh sửa lỗi liên kết ...................................................................................... 52 Hình 3.10. Cửa sổ Validation ........................................................................................ 52 Hình 3.11. Cửa sổ Browser Compatibility .................................................................... 52 Hình 3.12. Cửa sổ Dreamweaver .................................................................................. 53 Hình 3.13. Lệnh kiểm tra trang web trên trình duyệt .................................................... 54 Hình 3.14. Cửa sổ Properties ......................................................................................... 55 Hình 3.15. Lệnh tạo tiêu đề ........................................................................................... 55 Hình 3.16. Lệnh canh lề ................................................................................................ 56 Hình 3.17. Lệnh tạo danh sách ...................................................................................... 56 Hình 3.18. Lệnh định dạnh chữ ..................................................................................... 57 Hình 3.19. Hộp thoại Select Image Source ................................................................... 57 Hình 3.20. Cửa sổ Properties ......................................................................................... 58 Hình 3.21. Cửa sổ Properties ......................................................................................... 59 Hình 3.22. Hộp thoại Table ........................................................................................... 60 Hình 3.23. Cửa sổ Properties ......................................................................................... 60 Hình 3.24. Cửa sổ Properties ......................................................................................... 61 Hình 3.25. Hộp thoại Split Cell ..................................................................................... 62 Hình 3.26. Lệnh chèn cột/ hàng ..................................................................................... 62 Hình 3.27. Lệnh tạo Form ............................................................................................. 63 Hình 3.28. Hộp thoại thuộc tính thẻ input ..................................................................... 64 Hình 3.29. Cửa sổ Properties ......................................................................................... 64 Hình 3.30. Cửa sổ Properties ......................................................................................... 65 Hình 3.31. Cửa sổ Properties ......................................................................................... 66 Hình 3.32. Cửa sổ Properties ......................................................................................... 66 Hình 3.33. Hộp thoại List values .................................................................................. 67 Hình 3.34. Cửa sổ Properties ......................................................................................... 67 Hình 3.35. Cửa sổ Properties ......................................................................................... 68 Hình 3.36. Cửa sổ CSS Styles ....................................................................................... 68 Hình 3.37. Cửa sổ New CSS Rule ................................................................................ 69 Hình 3.38. Danh sách chọn Selector type...................................................................... 69 Hình 3.39. Danh sách chọn Rule Definition ................................................................. 70 Hình 3.40. Hộp thoại CSS Rule definition .................................................................... 70 Hình 3.41. Hộp thoại Background ................................................................................. 71 Hình 3.42. Hộp thoại Block ........................................................................................... 72 Hình 3.43. Hộp thoại Box .............................................................................................. 73 Hình 3.44. Hộp thoại Border ......................................................................................... 73 Hình 3.45. Hộp thoại List .............................................................................................. 74 Hình 3.46. Hộp thoại Positioning .................................................................................. 74 Hình 3.47. Hộp thoại Attach Style Sheet ...................................................................... 75 Hình 4.1. Kết quả ví dụ 3 .............................................................................................. 81 Hình 4.2. Nội dung file teststyle.css .............................................................................. 82 Hình 4.3. Nội dung file test.html ................................................................................... 83 Hình 4.4. Kết quả ví dụ 4 .............................................................................................. 83 Hình 4.5. Kết quả ví dụ 5 .............................................................................................. 84 Hình 4.6. Kết quả ví dụ 6 .............................................................................................. 85 Hình 4.7. Kết quả ví dụ 7 .............................................................................................. 87 Hình 4.8. Kết quả ví dụ 12 ............................................................................................ 90 Hình 4.9. Kết quả ví dụ 13 ............................................................................................ 93 Hình 4.10. Các kiểu list style ......................................................................................... 94 Hình 4.11. Kết quả ví dụ 14 .......................................................................................... 95 Hình 4.12. Các vị trí hiển thị ảnh nền............................................................................ 98 Hình 4.13. Vị trí hiển thị ảnh nền tính theo khoảng cách x, y....................................... 98 Hình 4.14. Các kiểu đường viền .................................................................................. 100 Hình 4.15. Kết quả ví dụ 20 ........................................................................................ 102 Hình 4.16. Các vị trí lề ................................................................................................ 102 Hình 4.17. Kết quả ví dụ 21 ........................................................................................ 103 Hình 4.18. Các vị trí padding ...................................................................................... 105 Hình 4.19. Kết quả ví dụ 26 ........................................................................................ 106 Hình 4.20. Kết quả ví dụ 31 ........................................................................................ 110 Hình 4.21. Kết quả ví dụ 32 ........................................................................................ 112 Hình 4.22. Mô hình hộp .............................................................................................. 113 Hình 4.23. Ví dụ minh họa các giá trị thuộc tính overflow ......................................... 115 Hình 4.24. Thứ tự xếp chồng các phần tử ................................................................... 116 Hình 4.25. Ví dụ minh họa thuộc tính display ............................................................ 117 Hình 4.26. Ví dụ minh họa thuộc tính box-sizing ....................................................... 117 Hình 4.27. Kết quả ví dụ 33 ........................................................................................ 118 Hình 4.28. Kết quả ví dụ 34 ........................................................................................ 120 Hình 4.29. Kết quả ví dụ 36 ........................................................................................ 123 Hình 4.30. Kết quả ví dụ 37 ........................................................................................ 124 Hình 4.31. Kết quả ví dụ 38 ........................................................................................ 125 Hình 4.32. Kết quả ví dụ 39 ........................................................................................ 127 Hình 4.33. Kết quả ví dụ 40 ........................................................................................ 130 Hình 5.1. Kết quả ví dụ 3 ............................................................................................ 135 Hình 5.2. Kết quả ví dụ 7 ............................................................................................ 137 Hình 5.3. Kết quả ví dụ 11 .......................................................................................... 141 Hình 5.4. Kết quả ví dụ 12 .......................................................................................... 142 Hình 5.5. Kết quả ví dụ 13 .......................................................................................... 143 Hình 5.6. Kết quả ví dụ 14 .......................................................................................... 144 Hình 5.7. Kết quả ví dụ 20 .......................................................................................... 153 DANH MỤC BẢNG Bảng 2.1. Các thuộc tính thẻ .............................................................................. 19 Bảng 2.2. Các thuộc tính thẻ ........................................................................... 20 Bảng 2.3. Các thuộc tính thẻ ........................................................................... 21 Bảng 2.4. Các thuộc tính thẻ .......................................................................... 22 Bảng 2.5. Ký hiệu đường dẫn ........................................................................................ 23 Bảng 2.6. Các thuộc tính thẻ .................................................................................. 24 Bảng 2.7. Các thẻ tạo bảng ............................................................................................ 26 Bảng 2.8. Các thuộc tính thẻ ............................................................................ 31 Bảng 2.9. Các thuộc tính thẻ ............................................................................ 32 Bảng 2.10. Các thuộc tính thẻ ......................................................................... 36 Bảng 2.11. Các thuộc tính thẻ ........................................................................ 37 Bảng 2.12. Các thuộc tính thẻ ..................................................................... 38 Bảng 4.1. Cách viết bộ chọn .......................................................................................... 78 Bảng 4.2. Bảng đơn vị đo .............................................................................................. 80 Bảng 5.1. Đối tượng string .......................................................................................... 144 Bảng 5.2. Đối tượng number ....................................................................................... 145 Bảng 5.3. Đối tượng math ........................................................................................... 145 Bảng 5.4. Đối tượng array ........................................................................................... 146 Bảng 5.5. Đối tượng date ............................................................................................. 146 Bảng 5.6. Sự kiện ........................................................................................................ 149
File đính kèm:
- giao_trinh_mo_dun_thiet_ke_web_co_ban.pdf
