›
›

Bài giảng Thiết kế và triển khai Website - Chương 3: Một số công cụ thiết kế Website

pdf 87 trang hapham 2130
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và triển khai Website - Chương 3: Một số công cụ thiết kế Website", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_va_trien_khai_website_chuong_2_mot_so_con.pdf

Nội dung text: Bài giảng Thiết kế và triển khai Website - Chương 3: Một số công cụ thiết kế Website

  1. Chương 3. MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE Bùi Quang Trường Bộ môn CNTT – Khoa HTTT.KT – Trường ĐH Thương Mại
  2. Nội dung • Ngôn ngữ đánh dấu siêu văn bản HTML • PHP, Javascript • Một số công cụ hỗ trợ thiết kế website 11/18/2013 Công cụ thiết kế Web - HTML 2
  3. 3.1. Ngôn ngữ HTML 3.1.1. Tổng quan về HTML 3.1.2. Các thẻ của HTML 3.1.3. Sử dụng Frontpage thiết kế web tĩnh 3.1.4. Định dạng website với CSS 11/18/2013 Công cụ thiết kế Web - HTML 3
  4. 3.1.1. Tổng quan về HTML • HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế ra để tạo nên các trang web. Tập tin (File) HTML là một văn bản có chứa các thẻ đánh dấu (markup tags), các thẻ đánh dấu này giúp các trình duyệt Web hiểu được cách trình bày và hiển thị trang Web. File HTML có phần mở rộng (Extension) là htm hay html và có thể được tạo ra bằng bất cứ chương trình xử lý văn bản đơn giản nào. 11/18/2013 Công cụ thiết kế Web - HTML 4
  5. 3.1.1. Tổng quan về HTML • Trong File HTML các phần tử (Element) được đánh dấu bằng các thẻ HTML. Các thẻ này được bao bởi dấu . Thông thường các thẻ HTML được dùng theo một cặp (thẻ bắt đầu) và (thẻ kết thúc), văn bản nằm giữa cặp thẻ này là nội dung của phần tử. Các thẻ HTML không phân biệt chữ hoa và chữ thường, có nghĩa là các kiểu chữ đều được xem như nhau. 11/18/2013 Công cụ thiết kế Web - HTML 5
  6. 3.1.1. Tổng quan về HTML Cấu trúc cơ bản Một document HTML luôn bắt đầu bằng và kết thúc bằng (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa và ). Nhờ có cặp TAG này mà Browser biết được đó là HTML - document dành cho trình duyệt. Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết giữa cặp TAG và . Trong một document html, chú thích được dùng như sau: Như vậy một trang web viết bằng html sẽ có cấu trúc như sau: 3 11/18/2013 Công cụ thiết kế Web - HTML 6
  7. 3.1.1. Tổng quan về HTML Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân. Tiêu đề luôn được viết to. Bạn có thể dùng size lớn hơn và cũng có thể dùng những TAG đã được định sẵn cho tiêu đề. Tiêu đề của trang web Welcome to my Homepage! Tiêu đề của trang web Tiêu đề của trang web Tiêu đề của trang web Tiêu đề của trang web là to nhất và là nhỏ nhất. Tiêu đề luôn nằm ở trung tâm của trang, vì vậy ta phải dùng thêm một cặp TAG nữa : Tất cả những gì nằm giữa cặp TAG này đều được định hướng vào phía giữa của trang. 11/18/2013 Công cụ thiết kế Web - HTML 7
  8. 3.1.1. Tổng quan về HTML Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp tag . Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó là Giữa và là tên của trang web được browser trình bày phía trên cùng của menubar. Như vậy một trang web với "đầu" sẽ có cấu trúc như sau: Trang web dau tien cua toi Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. Trong "head" ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine Next 11/18/2013 Công cụ thiết kế Web - HTML 8
  9. 3.1.2. Các thẻ HTML I. C¸c thÎ ®Þnh cÊu tróc tµi liÖu 1.1 HTML 1.2 HEAD 1.3 TITLE 1.4 BODY 11/18/2013 Công cụ thiết kế Web - HTML 9
  10. 1.1 HTML • • Toµn bé néi cña tµi liÖu ®îc ®Æt ë ®©y • 11/18/2013 Công cụ thiết kế Web - HTML 10
  11. 1.2 HEAD • • PhÇn më ®Çu (HEADER) cña tµi liÖu ®îc ®Æt ë ®©y • 11/18/2013 Công cụ thiết kế Web - HTML 11
  12. 1.3 TITLE Tiªu ®Ò cña tµi liÖu 11/18/2013 Công cụ thiết kế Web - HTML 12
  13. 1.4 BODY • • phÇn néi dung cña tµi liÖu ®îc ®Æt ë ®©y • 11/18/2013 Công cụ thiết kế Web - HTML 13
  14. 1.4 BODY (TT) 11/18/2013 Công cụ thiết kế Web - HTML 14
  15. 3.1.2. Các thẻ HTML (TT) II. C¸c thÎ ®Þnh d¹ng khèi 2.1. ThÎ tr×nh bµy mét ®o¹n P 2.2. C¸c thÎ ®Þnh d¹ng tiªu ®Ò H1/H2/H3/H4/H5/H6 2.3 ThÎ ng¾t xuèng dßng BR 2.4 ThÎ ®Þnh d¹ng v¨n b¶n(v¨n b¶n ®îc ®Þnh d¹ng tríc trong tµi liÖu HTML vµ khi tr×nh duyÖt hiÓn thÞ th× sÏ tu©n theo ®Þnh d¹ng nµy) PRE 11/18/2013 Công cụ thiết kế Web - HTML 15
  16. 3.1.2. Các thẻ HTML (TT) III. C¸c thÎ ®Þnh d¹ng danh s¸ch Có ph¸p: Môc thø nhÊt Môc thø hai Cã 4 kiÓu danh s¸ch: Danh s¸ch kh«ng s¾p xÕp ( hay kh«ng ®¸nh sè) Danh s¸ch cã s¾p xÕp (hay cã ®¸nh sè) , mçi môc trong da nh s¸ch ®îc s¾p xÕp thø tù. Danh s¸ch thùc ®¬n Danh s¸ch ph©n cÊp 11/18/2013 Công cụ thiết kế Web - HTML 16
  17. 3.1.2. Các thẻ HTML (TT) IV. C¸c thÎ ®Þnh d¹ng ký tù 4.1. C¸c thÎ ®Þnh d¹ng in ký tù 4.2. C¨n lÒ v¨n b¶n trong trang Web 4.3. C¸c ký tù ®Æc biÖt 4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web 4.5. Chän kiÓu ch÷ cho v¨n b¶n 4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt 11/18/2013 Công cụ thiết kế Web - HTML 17
  18. 4.1. C¸c thÎ ®Þnh d¹ng in ký tù 11/18/2013 Công cụ thiết kế Web - HTML 18
  19. 4.2. C¨n lÒ v¨n b¶n trong trang Web 11/18/2013 Công cụ thiết kế Web - HTML 19
  20. 4.3. C¸c ký tù ®Æc biÖt 11/18/2013 Công cụ thiết kế Web - HTML 20
  21. 4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web Sau ®©y lµ mét sè gi¸ trÞ mµu c¬ b¶n: 11/18/2013 Công cụ thiết kế Web - HTML 21
  22. 4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web (TT) Cú pháp: 11/18/2013 Công cụ thiết kế Web - HTML 22
  23. 4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web (TT) Sau ®©y lµ ý nghÜa c¸c tham sè cña thÎ BODY: 11/18/2013 Công cụ thiết kế Web - HTML 23
  24. 4.5. Chän kiÓu ch÷ cho v¨n b¶n •Có ph¸p: 11/18/2013 Công cụ thiết kế Web - HTML 24
  25. 4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt •§Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ . •Có ph¸p: 11/18/2013 Công cụ thiết kế Web - HTML 25
  26. 4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt (TT) ý nghÜa c¸c tham sè: HREF ®Þa chØ cña trang Web ®îc liªn kÕt, lµ mét URL nµo ®ã. NAME ®Æt tªn cho vÞ trÝ ®Æt thÎ. TABLEINDEX Thø tù di chuyÓn khi Ên phÝm Tab TITLE Văn b¶n hiÓn thÞ khi di chuét trªn siªu liªn kÕt. TARGET Më trang Web ®îc liªn trong mét cöa sæ míi (_blank) hoÆc trong cöa sæ hiÖn t¹i (_self), trong mét frame (tªn frame). 11/18/2013 Công cụ thiết kế Web - HTML 26
  27. 3.1.2. Các thẻ HTML (TT) V. C¸c thÎ chÌn ©m thanh, h×nh ¶nh 1. §a ©m thanh vµo mét tµi liÖu HTML: 2. ChÌn mét h×nh ¶nh, mét ®o¹n video vµo tµi liÖu HTML: 11/18/2013 Công cụ thiết kế Web - HTML 27
  28. §a ©m thanh vµo mét tµi liÖu HTML Cú pháp: 11/18/2013 Công cụ thiết kế Web - HTML 28
  29. ChÌn mét h×nh ¶nh, mét ®o¹n video vµo tµi liÖu HTML Cú pháp: 11/18/2013 Công cụ thiết kế Web - HTML 29
  30. 3.1.2. Các thẻ HTML (TT) VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu Sau ®©y lµ c¸c thÎ t¹o b¶ng chÝnh: Định nghĩa một bảng Định nghĩa một hàng trong bảng Định nghĩa một ô trong bảng Định nghĩa ô chứa tiêu đề củ cột Tiêu đề của bảng 11/18/2013 Công cụ thiết kế Web - HTML 30
  31. VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu (TT) Cú pháp: Tiªu ®Ò cña b¶ng biÓu §Þnh nghÜa c¸c dßng §Þnh nghÜa c¸c « trong dßng Néi dung cña « 11/18/2013 Công cụ thiết kế Web - HTML 31
  32. 3.1.2. Các thẻ HTML (TT) VII. FORM 1. HTML Forms: 2. T¹o Form: 3. T¹o mét danh s¸ch lùa chän: 4. T¹o hép so¹n th¶o v¨n b¶n : 11/18/2013 Công cụ thiết kế Web - HTML 32
  33. T¹o Form Cú pháp: 11/18/2013 Công cụ thiết kế Web - HTML 33
  34. T¹o mét danh s¸ch lùa chän Cú pháp: Tªn môc chän thø nhÊt Tªn môc chän thø hai 11/18/2013 Công cụ thiết kế Web - HTML 34
  35. T¹o hép so¹n th¶o v¨n b¶n Cú pháp: Văn bản ban đầu 11/18/2013 Công cụ thiết kế Web - HTML 35
  36. 3.1.3 Sử dụng Frontpage thiết kế web tĩnh bằng HTML 1. Khởi động FrontPage 2. Tạo 1 trang web mới 3. Tạo 1 website mới 4. Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề 5. Ðịnh dạng đoạn 6. Ðịnh dạng ký tự 7. Tạo hyperlink 8. Tạo các điểm dừng(Bookmark) trong trang 9. Chèn hình ảnh 10.Tạo table 11.Mở trang web hoặc web site đã có 11/18/2013 Công cụ thiết kế Web - HTML 36
  37. Khởi động FrontPage • Click chuột vào Start/Programs/Microsoft FrontPage. Màn hình sau sẽ xuất hiện: 11/18/2013 Công cụ thiết kế Web - HTML 37
  38. Tạo 1 trang web mới • Chọn File/New/Page 11/18/2013 Công cụ thiết kế Web - HTML 38
  39. Tạo 1 website mới • Chọn File/New/Web 11/18/2013 Công cụ thiết kế Web - HTML 39
  40. Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề • Click File/Properties, Chọn tab General 11/18/2013 Công cụ thiết kế Web - HTML 40
  41. Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề (TT) • Click File/Properties, Chọn tab Background: 11/18/2013 Công cụ thiết kế Web - HTML 41
  42. Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề (TT) • Click File/Properties, Chọn tab Margin: 11/18/2013 Công cụ thiết kế Web - HTML 42
  43. Ðịnh dạng đoạn •Thanh formatting: 11/18/2013 Công cụ thiết kế Web - HTML 43
  44. Ðịnh dạng ký tự 11/18/2013 Công cụ thiết kế Web - HTML 44
  45. Tạo hyperlink • Chọn Insert/Hyperlink 11/18/2013 Công cụ thiết kế Web - HTML 45
  46. Tạo các điểm dừng(Bookmark) trong trang • Chọn chức năng Insert/Bookmark 11/18/2013 Công cụ thiết kế Web - HTML 46
  47. Chèn hình ảnh • Di chuyển con nháy đến vị trí muốn chèn hình, click nút 11/18/2013 Công cụ thiết kế Web - HTML 47
  48. Tạo table • Chọn Table/Insert/Table 11/18/2013 Công cụ thiết kế Web - HTML 48
  49. Mở trang web hoặc web site đã có • Click biểu tượng 11/18/2013 Công cụ thiết kế Web - HTML 49
  50. 3.1.4. Định dạng website với CSS 1. Giới thiệu 2. Một Số Quy Ước Về Cách Viết CSS 3. Background 4. Font Chữ 5. Text 6. Pseudo-classes For Links 7. Class & ID 8. Span & Div 9. Box Model 10. Margin & Padding 11. Border 12. Height & Width 13. Float & Clear 14. Position 15. Layers 11/18/2013 Công cụ thiết kế Web - HTML 50
  51. Giới thiệu 1. CSS là gì? 2. Tại sao CSS? 11/18/2013 Công cụ thiết kế Web - HTML 51
  52. Một Số Quy Ước Về Cách Viết CSS 1. Cú pháp CSS 2. Đơn vị CSS 3. Vị trí đặt CSS 4. Sự ưu tiên 11/18/2013 Công cụ thiết kế Web - HTML 52
  53. Cú pháp CSS Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau. Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng code sau: + Trong HTML: + Trong CSS: body { background-color:#00BFF3; } Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt } Ví dụ: body { background:#FFF; bolor:#FF0000; font-size:14pt } Đối với một trang web có nhiều thành phần có cùng một số thuộc tính, chúng ta có thể thực hiện gom gọn lại như sau: h1 { color:#0000FF; text-transform:uppercase } h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text- transform:uppercase; } Chú thích trong CSS được viết như sau /* Nội dung chú thích */ Ví dụ: /* Màu chữ cho trang web */ body { color:red } 11/18/2013 Công cụ thiết kế Web - HTML 53
  54. Đơn vị CSS Đơn vị chiều dài Đơn vị màu sắc 11/18/2013 Công cụ thiết kế Web - HTML 54
  55. Vị trí đặt CSS + Cách 1: Nội tuyến (kiểu thuộc tính) 11/18/2013 Công cụ thiết kế Web - HTML 55
  56. Vị trí đặt CSS (TT) + Cách 2: Bên trong (thẻ style) 11/18/2013 Công cụ thiết kế Web - HTML 56
  57. Vị trí đặt CSS (TT) + Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) 11/18/2013 Công cụ thiết kế Web - HTML 57
  58. Vị trí đặt CSS (TT) + Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) 11/18/2013 Công cụ thiết kế Web - HTML 58
  59. Sự ưu tiên 11/18/2013 Công cụ thiết kế Web - HTML 59
  60. Background 1. Màu nền (thuộc tính background-color 2. Ảnh nền (thuộc tính background-image) 3. Lặp lại ảnh nền (thuộc tính background-repeat) 4. Khóa ảnh nền (thuộc tính background- attachment) 5. Định vị ảnh nền (thuộc tính background- position) 11/18/2013 Công cụ thiết kế Web - HTML 60
  61. Màu nền (thuộc tính background- color Ví dụ: 11/18/2013 Công cụ thiết kế Web - HTML 61
  62. Ảnh nền (thuộc tính background- image) ảnh logo của blog Pearl Viết CSS để đặt logo này làm ảnh nền trang web như sau: body { background-image:url(logo.png) } h1 { background-color:red } h2 { background-color:orange } p { background-color: FDC689 } 11/18/2013 Công cụ thiết kế Web - HTML 62
  63. Lặp lại ảnh nền (thuộc tính background-repeat) • Thuộc tính này có 4 giá trị: + repeat-x: Chỉ lặp lại ảnh theo phương ngang. + repeat-y: Chỉ lặp lại ảnh theo phương dọc. + repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định. + no-repeat: Không lặp lại ảnh. 11/18/2013 Công cụ thiết kế Web - HTML 63
  64. Khóa ảnh nền (thuộc tính background-attachment) Thuộc tính này có 2 giá trị: + scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. + fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web. 11/18/2013 Công cụ thiết kế Web - HTML 64
  65. Định vị ảnh nền (thuộc tính background-position) Ví dụ: Thuộc tính background rút gọn 11/18/2013 Công cụ thiết kế Web - HTML 65
  66. Font Chữ 1. Thuộc tính font-family 2. Thuộc tính font-style 3. Thuộc tính font-variant 4. Thuộc tính font-weight 5. Thuộc tính font-size 11/18/2013 Công cụ thiết kế Web - HTML 66
  67. Text 1. Thuộc tính color 2. Thuộc tính text-indent 3. Thuộc tính text-align 4. Thuộc tính letter-spacing 5. Thuộc tính text-decoration 6. Thuộc tính text-transform 11/18/2013 Công cụ thiết kế Web - HTML 67
  68. Pseudo-classes For Links Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết: 11/18/2013 Công cụ thiết kế Web - HTML 68
  69. Class & id 1. Nhóm phần tử với class 2. Nhận dạng phần tử với id 11/18/2013 Công cụ thiết kế Web - HTML 69
  70. Nhóm phần tử với class 11/18/2013 Công cụ thiết kế Web - HTML 70
  71. Nhận dạng phần tử với id 11/18/2013 Công cụ thiết kế Web - HTML 71
  72. Span & div 1. Nhóm phần tử với 2. Nhóm phần tử với 11/18/2013 Công cụ thiết kế Web - HTML 72
  73. Nhóm phần tử với 11/18/2013 Công cụ thiết kế Web - HTML 73
  74. Nhóm phần tử với 11/18/2013 Công cụ thiết kế Web - HTML 74
  75. Box Model 11/18/2013 Công cụ thiết kế Web - HTML 75
  76. Margin & padding 1. Thuộc tính margin 2. Thuộc tính padding 11/18/2013 Công cụ thiết kế Web - HTML 76
  77. Thuộc tính margin 11/18/2013 Công cụ thiết kế Web - HTML 77
  78. Thuộc tính padding • Cú pháp: Padding: | | | 11/18/2013 Công cụ thiết kế Web - HTML 78
  79. Border 1. Thuộc tính border-width 2. Thuộc tính border-color 3. Thuộc tính border-style 11/18/2013 Công cụ thiết kế Web - HTML 79
  80. Height & width 1. Thuộc tính width 2. Thuộc tính max-width 3. Thuộc tính min-width 4. Thuộc tính height 5. Thuộc tính max-height 6. Thuộc tính min-height 11/18/2013 Công cụ thiết kế Web - HTML 80
  81. Float & clear 1. Thuộc tính float 2. Thuộc tính clear 11/18/2013 Công cụ thiết kế Web - HTML 81
  82. Thuộc tính float Thuộc tính float có 3 giá trị: + Left: Cố định phần tử về bên trái. + Right: Cố định phần tử về bên phải. + None: Bình thường. 11/18/2013 Công cụ thiết kế Web - HTML 82
  83. Thuộc tính clear Thuộc tính clear có tất cả 4 thuộc tính: • left (tràn bên trái) • right (tràn bên phải) • both (không tràn) • none. 11/18/2013 Công cụ thiết kế Web - HTML 83
  84. Position 1. Absolute position 2. Relative position 11/18/2013 Công cụ thiết kế Web - HTML 84
  85. Absolute position 11/18/2013 Công cụ thiết kế Web - HTML 85
  86. Relative position • Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative. 11/18/2013 Công cụ thiết kế Web - HTML 86
  87. Layers • #logo1 { • position:absolute; top:70px; left:50 px; z-index:1 • } • #logo2 { • position:absolute; top:140px; left:100px; z-index:2 • } • #logo3 { • position:absolute; top:210px; left:150px; z-index:3 • } • #logo4 { • position:absolute; top:280px; left:200px; z-index:4 • } • #logo5 { • position:absolute; top:350px; left:250px; z-index:5 • } 11/18/2013 Công cụ thiết kế Web - HTML 87