›
›

Giáo trình Thiết kế Web

doc 59 trang ngocly 2940
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế Web", để 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:

  • docgiao_trinh_thiet_ke_web.doc

Nội dung text: Giáo trình Thiết kế Web

  1. Giáo trình thiết kế Web Khoa CNTT Mục lục CHƯƠNG I: GIỚI THIỆU VỀ WEB 2 I.1. CÁC KHÁI NIỆM CƠ BẢN: 2 I.2. GIỚI THIỆU KHÁI QUÁT VỀ WEB: 3 I.3. TAG HTML: 3 I.4. CẤU TRÚC CƠ BẢN CỦA TRANG WEB: 4 I.5. CÁC TAG HTML CƠ BẢN: 4 CHƯƠNG II: HYPERLINK – HÌNH ẢNH 8 II.1. GIỚI THIỆU HYPERLINK: 8 II.2. TẠO HYPERLINK: 8 II.3. HÌNH ẢNH TRÊN TRANG WEB: 9 CHƯƠNG III: DANH SÁCH 11 IV.1. DANH SÁCH KHÔNG CÓ THỨ TỰ (Unorder List - UL) 11 IV.2. DANH SÁCH CÓ THỨ TỰ (OrderList - OL) 11 IV.3. DANH SÁCH ĐỊNH NGHĨA 13 CHƯƠNG IV: BẢNG VÀ TRÌNH BÀY TRANG 14 IV.1. BẢNG: 14 IV.2. CÁC THUỘC TÍNH: 14 IV.3. TRÌNH BÀY TRANG: 16 CHƯƠNG V: FORM 17 V.1. GIỚI THIỆU FORM: 17 V.2. CÁC PHẦN TỬ CỦA FORM: 17 CHƯƠNG VI: CASCADING STYLE SHEET 25 VI.1. GIỚI THIỆU: 25 VI.2. CÁCH TẠO: 25 VI.3. ĐỊNH BẢNG MẪU CHO LỚP (CLASS): 27 CHƯƠNG VII: GIỚI THIỆU DREAMWEAVER (DW) 31 VII.1. GIỚI THIỆU: 31 VII.2. CÀI ĐẶT: 31 VII.3. MÀN HÌNH DW: 31 VII.4.KẾ HOẠCH THIẾT KẾ MỘT WEBSITE: 33 CHƯƠNG VIII: CSS 40 VIII.1. ĐỊNH DẠNG VĂN BẢN: 40 VIII.2.SỬ DỤNG CSS: 42 C. IX: HÌNH ẢNH VÀ HYPERLINK TRONG DW 44 IX.1. CHÈN HÌNH ẢNH TRONG TRANG WEB: 44 IX.2. LIÊN KẾT TRANG TRONG DW: 47 CHƯƠNG X: BẢNG VÀ TRÌNH BÀY TRANG 54 X.1. TABLE: 54 X.2. TRÌNH BÀY TRANG: 55 X.3. TEMPLATE: 58 1
  2. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG I: GIỚI THIỆU VỀ WEB I.1. CÁC KHÁI NIỆM CƠ BẢN: o Internet: Là một mạng máy tính toàn cầu trong đó các máy truyền thông với nhau theo một ngôn ngữ chung là TCP/IP o Intranet: Là mạng cục bộ không kết nối với Internet và cách truyền thông của chúng cũng theo ngôn ngữ chung là TCP/IP. o Mô hình Client-Server: Là mô hình khách - chủ. Server chứa tài nguyên dùng chung cho nhiều máy khách (Client) như các tập tin, tài liệu, máy in, Ưu điềm của mô hình này là tiết kiệm thời gian, tài chính, dễ quản trị hệ thống, Cách hoạt động của mô hình này là máy Server trong trạng thái hoạt động (24/24) và chờ yêu cầu từ phía Client. Khi Client yêu cầu thì máy Server đáp ứng yêu cầu đó. o Internet Server: Là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server, FTP Server, ) o Internet Service Provider (ISP): Là nơi cung cấp các 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. o Internet Protocol: Các máy sử dụng trong mạng Internet liên lạc với nhau theo một tiêu chuẩn truyền thông gọi là Internet Protocol (IP). IP Address- địa chỉ IP: để việc trao đổi thông tin trong mạng Internet thực hiện được thì mỗi máy trong mạng cần phải định danh để phân biệt với các máy khác. Mỗi máy trong mạng được định danh bằng một nhóm các số được gọi là địa chỉ IP. Địa chỉ IP gồm 4 chữ số thập phân có giá trị từ 0-255 và được phân cách nhau bởi dấu chấm. o Phương thức truyền thông tin trong Internet: Một máy tính X gửi tin đến máy tính Y thì phương thức truyền tin cơ bản diễn ra như sau: Nếu máy X và Y cùng nằm trong một mạng con thì thông tin sẽ gửi đi trực tiếp. Nếu máy X và Y không nằm trong cùng một mạng con thì thông tin sẽ gởi đến một máy tính trung gian có đường thông với các mạng khác rồi mới đến máy Y. Máy trung gian này gọi là Gateway. o World Wide Web (WWW): Là một dịch vụ phổ biến nhất hiện nay trên 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 đồ hoạ. Để sử dụng dịch vụ này các máy Client cần có một chương trình gọi là Web Browser. o Web Browser (Trình duyệt web): Dùng để truy xuất các tài liệu trên các Web Server. Các trình duyệt hiện nay là: Internet Explorer, FireFox, Nestcape, Google Chrome, Opera, o Home Page: Là trang web đầu tiên trong website. o Hosting Provider: Là công ty hoặc tổ chức đưa trang web chúng ta lên mạng Internet. 2
  3. Giáo trình thiết kế Web Khoa CNTT o Publish: Làm cho trang web có thể chạy được trên mạng. o URL (Unioform resource lacator): Một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng Mỗi nguồn trên web có duy nhất một địa chỉ rất khó nhớ. Vì vậy, người ta sử dụng URL là một chuổi cung cấp địa chỉ Internet của một website hoặc nguồn trên World Wide Web. Định dạng đặt trưng là: www.nameofsite.typeofside.countrycode VD: 207.46.130.149 được biểu diễn trong URL là www.microsoft.com URL cũng nhận biết giao thức của site hoặc nguồn được truy cập. Giao thức thông thường nhất là “http”, một vài dạng khác như “fpt”, cung cấp vị trí mạng của nguồn FPT Có 2 dạng URL: URL tuyệt đối và URL tương đối. o Hyperlink: Hay còn gọi là hypertextlink. Là một từ hay một cụm từ đặt biệt dùng để tạo liên kết giữa các trang web. o Web server: là một chương trình đáp ứng lại yêu cầu truy xuất tài nguyên từ trình duỵêt. I.2. GIỚI THIỆU KHÁI QUÁT VỀ WEB: o Web là một ứng dụng chạy trên mạng, được chia sẽ khắp toàn cầu. o Trang web là một file văn bản chứa những tag HTML hoặc những đoạn 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, htm, o HTML (HyperText Markup Language), 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. o 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. Các trình soạn thảo phổ biến hiện nay là Notepad, Frontpage hoặc Dreamweaver. I.3. TAG HTML: Tag HTML là những câu lệnh nằm giữa cặp tag ‘ ’, dùng để định dạng các văn bản trên trang web. Dạng chung của một tag HTML là : Object Trong đó: tagName: là tên một tag HTML, viết liền với dấu ‘ Object Giá trị của thuộc tính được đặt trong dấu nháy đơn ‘ hoặc đôi “. : gọi là tag mở. 3
  4. Giáo trình thiết kế Web Khoa CNTT : gọi là tag đóng. Thông thường thì các tag đều có tag đóng, tuy nhiên có một số tag không có tag đóng. VD: nội dung Tag mở Property tag đóng Các tag có thể lồng vào nhau, theo nguyên tắc tag nào mở trước thì đóng sau. VD: Object Trong trang HTML, nếu một tag bị sai thì nội dung bên trong Tag đó không hiển thị trên trình duỵêt I.4. CẤU TRÚC CƠ BẢN CỦA TRANG WEB: 1. Cấu trúc trang web: ­ Phần đầu( ): là phần chứa thông tin của trang web. ­ Phần thân( ): là phần chứa nội dụng trang web. ­ Phần đầu và phần thân được đặt trong cặp tag Nội dung thông tin của trang web. Nội dung hiển thị của trình duyệt. 2. Hiển thị trang web: ­ Khởi động trình duyệt web. ­ Chọn đường dẫn đến file html vừa tạo. I.5. CÁC TAG HTML CƠ BẢN: 1. : Hiển thị nội dung tiêu đề của trang web trên thanh tiêu đề của trình duyệt. ­ Cặp tag được đặt trong phần head của trang HTML. ­ Cú pháp: nội dung tiêu đề 2. : tạo header, gồm 6 cấp header, được đặt trong phần body ­ Cú pháp: nội dung của Header ­ Trong đó, Direction gồm: left, right, center dùng để canh lề cho Header, mặc định là canh trái. VD: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 4
  5. Giáo trình thiết kế Web Khoa CNTT 3. : dùng để ngắt đoạn và bắt đầu đoạn mới. Cú pháp: Nội dung của đoạn : Không bắt buộc, vì kế tiếp sẽ tự động bắt đầu 1 đoạn mới. 4. : Ngắt dòng tại vị trí của tag. VD: Living in this cold world I forgot what was precious I had no tears even as I wandered through dark streets For a very long time, I was waiting for you For a love exactly like me 5. :dùng để kẻ đường ngang trang, không có tag đóng Cú pháp: Trong đó: o Direction: gồm có left, rign, center. o Width: độ dài đường kẻ, tính bằng pixel hoặc %. o Size: Độ dày của đường kẻ, tính bằng pixel. o Color: màu đường kẻ, có thể dùng tên màu hoặc dùng mã #rrggbb 6. : dùng để định dạng font chữ. Cú pháp: Nội dung hiển thị 7. : Chứa nội dung của trang web. Cú pháp: Nội dung của trang web. Các thuộc tính của body: o BgColor: Thiết lập màu nền của trang. o Text: Thiết lập màu chữ. o Link: Màu của siêu liên kết. o Vlink: Màu của siêu liên kết đã xem qua. o Background: Dùng load một hình làm nền cho trang o LeftMargin: Canh lề trái. o TopMargin: Canh lề trên của trang. 5
  6. Giáo trình thiết kế Web Khoa CNTT 8. : dùng để chèn hình ảnh vào trang web. Cú pháp: ­ Src: xác định đường dẫn tập tin cần load, sử dụng đường dẫn tương đối ­ Alt: chứa nội dung văn bản thay thế cho hình ảnh khi hình ảnh không load về được, nếu load về được thì sẽ xuất hiện nội dung trong textbox mỗi khi người dùng đưa chuột tới hình. ­ Width, Height: dùng để xác định chế độ phóng to, thu nhỏ hình ảnh. ­ Align=’left/right/top/bottom’: So hàng giữa hình ảnh và text. 9. : Nội dung trong cặp tag này không hiển thị trong trang. Cú pháp: > 10. : Dùng để nhập một dòng mã có định dạng ký tự riêng. Dòng mã này không được thực hiện mà được hiển thị dưới dạng văn bản bình thường. Cú pháp: Nội dung văn bản muốn định dạng 11. và : Chia văn bản thành từng khối, có chung một định dạng ­ : Chia văn bản thành từng khối bắt đầu từ một dòng mới ­ : Tách khối nhưng không bắt đầu từ một dòng mới Cú pháp: nội dung của khối bắt đầu bằng một dòng mới nội dung của khối trong 1 dòng # Ngoài ra, còn có một số các tag ít dùng khác: ­ : dùng để chèn một âm thanh vào trang web. Âm thanh này sẽ được phát mỗi khi người sử dụng mở trang web. ­ : cho phép đưa âm thanh trực tiếp vào trang Web. ­ : dùng để điều khiển đối tượng chạy tự động trên trang web. ­ hay : Định dạng chữ đậm. ­ hay : Định dạng chữ nghiêng. ­ : Gạch chân văn bản. 6
  7. Giáo trình thiết kế Web Khoa CNTT ­ hay : chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung quanh. ­ hay : đưa chữ lên cao hoặc thấp hơn so với văn bản bình thường. ­ : gạch ngang văn bản. 12. Các ký tự đặc biệt: a. Dấu > : > b. Dấu < : < c. Cập “”: " d. Ký tự &: & e. Ký tự khoảng trắng:   7
  8. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG II: HYPERLINK – HÌNH ẢNH II.1. GIỚI THIỆU HYPERLINK: 1. Hyperlink: Khả năng chính của HTML là hỗ trợ các hyperlink. Một hyperlink cho phép người truy cập có thể đi từ trang web này đến trang web khác. Một liên kết gồm 3 phần: ­ Nguồn: chứa nội dung hiển thị khi người truy cập đến, có thể là một trang web khác, một đoạn film, một hình ảnh hoặc một hộp thoại để gửi mail ­ Nhãn: có thể là dòng văn bản hoặc hình ảnh để người dùng click vào khi muốn truy cập đến liên kết, nếu nhản là văn bản thì thường được gạch dưới. ­ Đích đến (target): xác định vị trí để nguồn hiển thị. 2. Các loại Hyperlink: ­ Internal Hyperlink (liên kết trong): Là các liên kết với các phần trong cùng một tài liệu hoặc liên kết các trang cùng một website. ­ External Hyperlink (liên kết ngoài): Là các liên kết với các trang trên website khác. II.2. TẠO HYPERLINK: Cú pháp: ­ Dùng URL tương đối để liên kết đến các trang trong cùng một website: VD: ­ Dùng URL tuyệt đối để liên kết đến các trang trong website khác: VD: ­ Liên kết đến các phần trong cùng một trang web: bao gồm 2 bước: o Tạo Bookmark: Nội dung o Tạo liên kết đến Bookmark: Ví dụ: 8
  9. Giáo trình thiết kế Web Khoa CNTT Dù có điều gì xảy ra đi nửa, hãy tin rằng tình yêu của chúng ta vẫn bất diệt. Sự thanh khiết ­ Liên kết với một Bookmark ở một tài liệu khác: Cú pháp: - Trang doc1.htm: Dù có điều gì xảy ra đi nửa, hãy tin rằng tình yêu của chúng ta vẫn bất diệt. Sự thanh khiết ­ Liên kết đến hộp thư e-mail: Cú pháp: Nếu liên kết đặt ở cuối trang thì dùng tag II.3. HÌNH ẢNH TRÊN TRANG WEB: 1. Chèn hình ảnh: Cú pháp: URL: địa chỉ của ảnh, thường sử dụng đường dẫn tương đối. 9
  10. Giáo trình thiết kế Web Khoa CNTT Các thuộc tính: ­ Border = n: độ dày của đường viền, tính bằng pixel. ­ Alt = ”nội dung thay thế”: nội dung thay thế khi hình không load được hoặc khi đưa chuột ngang qua hình. ­ Align = ”left/right”: dàn văn bản quanh hình ảnh và hình ảnh nằm bên trái hoặc bên phải văn bản. ­ Align = “Top/bottom/middle/texttop”: canh lề cho ảnh so với một dòng văn bản trong một đoạn ­ Width = value và Height = value: kích thước hình ảnh. ­ Ngăn chặn văn bản nằm bên lề trái/lề phải/cả hai bên lề của ảnh. ­ HSPACE = n và VSPACE = m: thêm khoảng trống xung quanh hình. N được tính bằng pixel, sẽ thêm vào 2 bên của hình. 2. Dùng hình ảnh làm liên kết: Cú pháp: 3. Bảng đồ ảnh: Bản đồ ảnh là một ảnh trong trang web được chia ra làm nhiều vùng, mỗi vùng khi click vào sẽ liên kết đến một địa chỉ URL. Cách tạo: Trước hết phải chèn vào trang một ảnh và đặt nhãn vào cho ảnh. Trong đó: - label: Tên của bản đồ ảnh. - Type: hình dạng của các vùng trên ảnh, bao gồm: . Rect: Vùng hình chữ nhật. . Circle: Vùng hình tròn. . Poly: Vùng hình đa giác. - Coords: toạ độ của hình. . Rect(x1, y1, x2, y2) là toạ độ 2 đỉnh của hình chéo của vùng hình chữ nhật. . Circle(x, y, r) lần lượt là toạ độ tâm và bán kính của vùng hình tròn. . Poly(x1, y1, x2, y2, x3, y3, ) là các đỉnh của vùng hình đa giác. 4. Hình nền: Trong trường hợp này, người ta sử dụng thuộc tính background trong tag body Cú pháp: 10
  11. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG III: DANH SÁCH IV.1. DANH SÁCH KHÔNG CÓ THỨ TỰ (Unorder List - UL) Cú pháp: Nội dung 1 Nội dung 2 . Trong đó: ­ Shape1, Shape2 là loại bullet tự động đặt ở đầu dòng trong danh sách. ­ Shape1: ảnh hưởng đến toàn danh sách. ­ Shape2: ảnh hưởng đến một mục trong danh sách. ­ Các loại shape: o Circle: Bullet tròn, rỗng. o Square: Bullet vuông. o Disc: Bullet tròn, không rổng. Ví dụ: Monday Morning Afternoon Tuesday Wesday Thurday Friday IV.2. DANH SÁCH CÓ THỨ TỰ (OrderList - OL) Cú pháp: Nội dung 1 Nội dung 2 . 11
  12. Giáo trình thiết kế Web Khoa CNTT Trong đó: ­ x: loại ký tự muốn sử dụng trong danh sách gồm: o A: Chữ hoa o a: Chữ thường o I: Số la mã hoa o i: Số la mã thường o 1: Cho số mặc định ­ n: giá trị đầu tiên của danh sách. ­ x1: là loại ký tự sử dụng cho dòng này và dòng tiếp theo, làm mất ảnh hưởng của x ­ m: giá trị đầu tiên cho dòng này, làm thay đổi giá trị của n. Ví dụ: Monday Morning Afternoon Tuesday Rose Daisy Wesday Thurday Friday Chú ý: Chúng ta có thể lồng 2 loại danh sách có thứ tự và không có thứ tự vào nhau. 12
  13. Giáo trình thiết kế Web Khoa CNTT IV.3. DANH SÁCH ĐỊNH NGHĨA Dùng để tạo danh sách định nghĩa dành riêng cho việc tra cứu, đồng thời cũng thích hợp cho danh sách nào để nối một từ với một diễn giải dài. Cú pháp: Nhập từ muốn định nghĩa Nhập nội dung định nghĩa . Ví dụ: Learning HTML Definition List Pixel Short for picture element. A pixel refers to the small dots that make up an image on the screen. Pixel depth refers to the number of colors which may be displayed. Resolution The quality of the display on a monitor. The higher the resolution, the sharper the image. The number of pixels that can be displayed on a screen defines resolution. 13
  14. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG IV: BẢNG VÀ TRÌNH BÀY TRANG IV.1. BẢNG: Bảng thường được dùng để tạo các văn bản nhiều cột hoặc phân chia trang thành nhiều vùng khác nhau để tiện lợi trong việc thiết kế và trình bày trang web Cú pháp: Nội dung trong ô 1 cột 1 Nội dung trong ô 2 cột 2 Dòng 1 Nội dung trong ô n cột n - Tag : chỉ hiện thị bảng - Tag : xác định một dòng của bảng - Tag : xác định một ô chứa dữ liệu của bảng. Dữ liệu trong ô có thể là văn bản hoặc hình ảnh IV.2. CÁC THUỘC TÍNH: 1. Các thuộc tính của bảng: a. Thêm khung viền: n: độ dày của khung viền tính bằng Pixel. b. Định màu của khung viền và màu nền: c. Tạo bóng: : Bóng đổ ở cạnh dưới phải của bảng : Bóng đổ cạnh trên trái của bảng. d. Định chiều rộng và chiều ngang của bảng: , n,m là chiều rộng và chiều cao tính bằng pixel e. Canh lề bảng: Align = left/right/center 14
  15. Giáo trình thiết kế Web Khoa CNTT f. Thuộc tính Cellpadding và CellSpacing: CellSpacing = ‘value’: Khoảng cách giữa đường viền của các ô CellPadding = ‘value’: Khoảng cách giữa ô với văn bản. g. Tag tiêu đề của Table: Tiêu đề Tag nằm trong cặp tag 2. Thuộc tính của cột: a. Canh lề theo chiều ngang: b. Canh lề theo chiều đứng: Align = “top/bottom/middle” c. Trộn ô: Colspan = n: Trộn n cột Rowspan = n : Trộn n dòng d. Tag : Có tác dụng như nhưng làm cho dữ liệu trong ô in đậm và canh giữa. Nội dung Ví dụ: Properties of table Colspan Rowspan Cell 1 Cell 2 Cell 3 Cell 4 15
  16. Giáo trình thiết kế Web Khoa CNTT IV.3. TRÌNH BÀY TRANG: Trong thực tế, bảng thường được sử dụng để trình bày bố cục cho toàn bộ trang web. Nếu muốn thiết kế một trang web thể hiện văn bản trong cột dạng báo chí hoặc phân trang thành những vùng có chủ đề khác nhau, thì bảng là một công cụ cần thiết. Ví dụ: Nếu thiết kế trang web gồm nhiều vùng với những chủ đề khác nhau như hình dưới đây, thì chúng ta có thể dùng bảng: 16
  17. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG V: FORM V.1. GIỚI THIỆU FORM: 1. Sử dụng form: Khi cần: - Thu thập thông tin tên, địa chỉ, số điện thoại, để đăng ký cho người dùng vào một dịch vụ hoặc một sự kiên. - Tập hợp thông tin để mua hàng. - Thu thập thông tin phản hồi về một website. - Cung cấp công cụ tìm kiếm trên website. 2. Cách tạo: Cú pháp: Nội dung của Form Trong đó: - Method: xác định phương thức đưa dữ liệu lên máy chủ, có 2 giá trị: Post và Get . Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi chứa trang URL, mỗi dấu hỏi và các giá trị do form tạo ra. Trình duỵêt sẽ đổi script của câu hỏi thành kiểu được xác định trong URL để xử lý. . Nếu giá trị là POST thì dữ liệu trên form sẽ được gửi đến script như một khối dữ liệu - Action: là địa chỉ của script sẽ thực hiện khi form được submit. V.2. CÁC PHẦN TỬ CỦA FORM: Các phần tử của form thường sử dụng trên trang web gồm: ­ Input boxes: nhập dữ liệu dạng text và number. ­ Radio buttons: dùng để chọn một tuỳ chọn trong danh sách. ­ Selection lists: dùng cho một danh sách dài các lựa chọn, thường là trong Drop-down list box. ­ Check Boxes: chỉ định một item được chọn hay không ­ Text area: một text box có thể chứa nhiều dòng. ­ Submit và Reset button: để vừa gửi form đến CGI script vừa để reset form về trang thái ban đầu 1. Input boxes: Là một hộp dòng đơn dùng để nhập văn bản hoặc số. Để tạo các input boxes, sử dụng tag , tag còn được sử dụng cho nhiều loại field khác trên form. Cú pháp: 17
  18. Giáo trình thiết kế Web Khoa CNTT Các giá trị của thuộc tính TYPE: ­ Password ­ Checkbox ­ Radio ­ Hidden ­ Reset ­ Submit ­ TextArea ­ Button ­ Image a. Textbox: hộp văn bản, do người sử dụng nhập vào Cú pháp: ­ Name: tên dữ liệu đầu vào server. ­ Value: Dữ liệu ban đầu có sẳn trong textbox ­ Size: chiều rộng của textbox tính bằng số ký tự (mặc định là 20) ­ Maxlengh: số ký tự tối đa có thể nhập vào textbox. b. Password: Những ký tự nhập vào hiển thị dưới dạng dấu *, thông tin sẽ không được mã hoá khi gửi lên server. Cú pháp: ­ Size: chiều rộng của hộp password, tính bằng ký tự. ­ Maxlength: Số ký tự tối đa có thể nhập vào hộp password Ví dụ: Form User Password 18
  19. Giáo trình thiết kế Web Khoa CNTT c. Checkbox: hộp chọn, người xem có thể đánh dấu nhiều checkbox trong cùng 1 bộ Cú pháp: Nhãn ­ Name: tên của checkbox ­ Value: xác định mỗi giá trị cho mỗi hộp checkbox được gửi cho server khi người xem đánh dấu vào checkbox. ­ Checked: thuộc tính để hộp checkbox chọn mặc định Ví dụ: Form Hobby: Music Film Sport d. Radio button: Cho phép người xem chỉ chọn một tuỳ chọn tại mỗi thời điểm Cú pháp:’ Nhãn ­ Name: tên của radio button. ­ Value: xác định mỗi giá trị cho mỗi hộp radio button được gửi cho server khi radio button được chọn. ­ Checked: thuộc tính để hộp radio button chọn mặc định. 19
  20. Giáo trình thiết kế Web Khoa CNTT Ví dụ: Form Sex: male female e. Submit button: Tất cả thông tin của người xem nhập vào sẽ được gửi đến server khi người xem click nút Submit. Cú pháp: - Submit Message: Là chữ xuất hiện trên Button. - Name: tên của button. f. Reset Button: Thiết lập giá trị ban đầu của tất cả các điều khiển trên form Cú pháp: Có thể tạo nút Reset và Submit bằng hình ảnh với cú pháp: Nhãn chữ lề trái Nhãn chữ lề phải g. Button: nút dùng để thực hiện các lệnh do người sử dụng đưa ra Cú pháp: h. Hidden: là các field mà người xem không nhìn thấy trên trình duyệt, nhưng vẫn là một phần tử trên form. Hidden field dùng để lưu thông tin trong các form trước, các thông tin này cần đi kèm với các dữ liệu trong form hiện hành mà không muốn người xem nhập lại. Cú pháp: Name: tên mô tả ngắn gọn thông tin cần lưu trữ Value: Thông tin cần lưu trữ 20
  21. Giáo trình thiết kế Web Khoa CNTT 2. Selection List: a. Drop down menu: Cú pháp: Option 1 Option 2 ­ Nhãn: giới thiệu menu ­ Name: Tên dữ liệu đầu vào server ­ Size: là chiều cao của menu tính bằng hàng chữ ­ Multiple: là thuộc tính cho phép chọn nhiều đề mục(listbox) ­ Selected: đề mục được chọn mặc định ­ Value: xác định dữ liệu gởi cho server nếu đề mục được chọn Ví dụ: Dropdown menu ScanMaster ScanMaster II LaserPrint 1000 b. Nếu thêm thuộc tính Multiple thì ta được dạng listbox: Dropdown menu ScanMaster ScanMaster II LaserPrint 1000 21
  22. Giáo trình thiết kế Web Khoa CNTT c. Phần tử OPTGROUP: được sử dụng để nhóm các chọn lựa thành các nhóm riêng Ví dụ: Using the Option Group Introduction to the Internet Introduction to HTML Introduction to the web page designing Visual Basic - An Introduction Visual Basic - Application Development 3. TextArea: Hộp văn bản cho phép nhập nhiều dòng Cú pháp: Defaut text Ví dụ: Text Area Comments ? 22
  23. Giáo trình thiết kế Web Khoa CNTT 4. Nhãn: dùng để tạo nhãn liên kết với các thành phần đi kèm Cú pháp: Nội dung label Idname: là giá trị của thuộc tính ID trong thành phần Form tương ứng. Ví dụ: Text Area Comments ? 5. Fieldset: Nhóm các đối tượng giống nhau vào một phần logic Cú pháp: Chú thích Các thành phần trong nhóm - Tag : tạo chú thích cho nhóm - Align = “left/right”: chỉ vị trí của chú thích Ví dụ: Job Application Position Application for the post of: Sex Male Female 23
  24. Giáo trình thiết kế Web Khoa CNTT Language Known English French German 6. Điều khiển các phần tử trên form: a. Định thứ tự Tab Dùng phím tab để di chuyển giữa các đối tượng trong form, mặc định theo thứ tự của HTML, muốn định lại thứ tự ta dùng thuộc tính TabIndex=n trong tag tạo các phần tử của form, trong đó n là thứ tự của tag, có giá trị từ 0 -> 32767 Trong một form ta thường định thứ tự tab cho các thành phần: textbox, password, checkbox, radio button, menu và button b. Tạo phím tắt: ­ Cách tạo: Trong tag tạo các phần tử của form ta dùng thuộc tính Accesskey=“phím tắt” ­ Sử dụng phím tắt: Nhấn tổ hợp phím Alt+Phím tắt 24
  25. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG VI: CASCADING STYLE SHEET VI.1. GIỚI THIỆU: ­ Bảng kiểu (Style Sheet) nhằm thoả mản nhu cầu thẩm mĩ, tiện dụng nhưng giữ tính thống nhất cho trang HTML. CSS cho phép định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang được đánh dấu bằng tag đặc biệt. ­ Tiện ích của CSS là: o Tiết kiệm thời gian o Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó. o Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt ­ Bất lợi của CSS là: o Không một trình duyệt nào chấp nhận nó hoàn toàn. o Phải mất thời gian để học cách sử dụng VI.2. CÁCH TẠO: Một bảng mẫu được tạo bằng một tag và một hoặc nhiều các định nghĩa để xác định cách thức hiển thị của các đối tượng được đánh dấu bằng tag đó. Có 3 loại: ­ Inline style ­ Internal style ­ External style 1. Inline style: Là kiểu được gán cho một dòng hoặc một đoạn văn bản, bằng cách sử dụng thuộc tính style bên trong tag muốn định dạng. Cú pháp: Nội dung văn bản muốn định dạng Ví dụ: Setting Properties This paragraph has an inline style applied to it This paragraph is displayed in the default stype Can you see difference in this line 25
  26. Giáo trình thiết kế Web Khoa CNTT 2. Internal style: Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản, bằng cách tạo bảng mẫu chung trên đầu trang và dùng cho cả trang HTML. Cú pháp: TagName{property1: value1; property2: value2; } (lặp lại cho mỗi tag có thuộc tính cần định dạng) Ví dụ: Setting Properties H1,H2{color:limegreen; font-family:Arial} This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser 3. External style: Là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML. Bảng kiểu này được áp dụng và ảnh hưởng cho tất cả các trang của một website. ­ Cách tạo: o Tạo một tập tin văn bản mới o Nhập tên các tag muốn định dạng thuộc tính theo mẫu. TagName{property1: value1; property2: value2; } o Lưu tập tin với định dạng Text Only và phần mở rộng là .css ­ Cách dùng External style: Cú pháp: 26
  27. Giáo trình thiết kế Web Khoa CNTT Ví dụ: Tạo tập tin Sheet1.css H2{color: blue; font-style:italic} P{text-align:justify; text-indent:8pt; font:10pt/15pt “Myriad Roman”, Verdana} Trang1.htm Changing the rules Changing the rules is fun Changing the rules may not be such fun The H2 element again Trang2.htm Changing the rules The document use the sheet1 style sheet Selecting the option could delete all your files The H2 element again VI.3. ĐỊNH BẢNG MẪU CHO LỚP (CLASS): Có thể chia các yếu tố trong HTML thành các lớp để áp dụng kiểu mẫu hiệu quả hơn. Cú pháp: ­ Trong phần Style nhập cú pháp: .ClassName{property1: value1; property2: value2; } ­ Trong phần Body, đánh dấu phần nằm trong lớp cú pháp: Nội dung 27
  28. Giáo trình thiết kế Web Khoa CNTT Ví dụ: ID Selectors .forest{color:green; font-weight:bold} green things 1. Định các tag riêng biệt: ­ Trong phần Style nhập cú pháp: TagName#IDName{property1: value1; property2: value2; } ­ Trong phần Body, đánh dấu phần nằm trong lớp cú pháp: Nội dung Ví dụ: ID Selectors .forest{color:green; font-weight:bold} #control{color:limegreen; font-family:Arial} green things water 2. Tạo các tag chung: Có 2 loại tag chung có thể nối class và ID để tạo các tag tuỳ ý. Cần phân biệt đối tượng cấp khối và cấp hàng: ­ Đối tượng cấp khối giống như đoạn văn, thường bắt đầu một dòng mới và có thể chứa các đối tượng cấp khối khác gồm tag: H1, P, Body, Table ­ Đối tượng cấp hàng thường không tạo dòng mới, thường chứa văn bản và các yếu tố trong hàng khác như: B, Font ­ Các tag DIV và SPAN: có thể nối các phần tử cấp khối và ID để tạo ra các tag tuỳ ý. Trong đó DIV phù hợp với các đối tượng cấp khối, SPAN phù hợp với đối tượng cấp hàng. 28
  29. Giáo trình thiết kế Web Khoa CNTT a. Tạo tag cấp khối tuỳ ý: Cú pháp: ­ Trong phần style hoặc bảng mẫu bên ngoài ta nhập: DIV.ClassName{property1: value1; prop2:value2; } Hoặc: DIV#IDName{property1: value1; prop2:value2; } ­ Áp dụng tag cấp khối tuỳ ý vào trang HTML: Tại phần đầu văn bản muốn định dạng: Nội dung (Bên trong có thể chứa các tag: , ) b. Tạo các tag trong hàng tuỳ ý: Cú pháp: ­ Trong phần style: SPAN.ClassName{Prop1:value1; Prop2: value2; } Hoặc SPAN#IDName{Prop1:value1; prop2: value2; } ­ Trong HTML: Tại đầu đọan văn bản muốn định dạng: Nội dung văn bản Hoặc Nội dung văn bản c. Các thuộc tính định dạng văn bản: Cú pháp: ­ Chọn bộ font: Font-family: familyname1, familyname2, ­ Tạo chữ nghiêng: Font-style: italic ­ Định chữ đậm: Font-weight: bold ­ Định cỡ chữ: Font-size: xx-small hoặc x-small, small, medium, large,x-large, xx-large hoặc Font-size: 12pt(giá trị cụ thể) ­ Màu của chữ: Color: colorName/#rrggbb ­ Màu nền của chữ: Background:colorName/#rrggbb ­ Định khoảng cách giữa các từ, các ký tự: Word-spacing:n(n:khoảng cách giữa các từ, tính bằng pixel) Letter-spacing:m(m:khoảng cách giữa các ký tự, tính bằng pixel) ­ Canh lề cho văn bản: Text-Align: left, right, center, justify ­ Thay đổi dạng chữ: Text-Transform: capitalize, uppercase, lowercase. 29
  30. Giáo trình thiết kế Web Khoa CNTT d. Định dạng danh sách: List-style circle: chấm tròn rổng disc: chấm tròn đen square: chấm vuông đen decimal: đánh số ả rập lower-alpha: thứ tự alpha upper-alpha: thứ tự alpha chữ in hoa upper-roman: số la mã hoa lower-roman: số la mã thường e. Định dạng màu nền: Body{color:#rrggbb} Blockquote{background-color:#rrggbb} Background: background-color Background: background-image Background: background-position Background: background-repeat Background: background-attachment f. Định dạng Hyperlink: A{Text-Decoration:none}: không gạch dưới A:visited{color:#rrggbb} A:link{color:#rrggbb}, style cho vị trí chưa được xem A:active{color:#rrggbb}, style cho vị trí đang xem A:hover{color:#rrggbb}, style khi lướt qua link 30
  31. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG VII: GIỚI THIỆU DREAMWEAVER (DW) VII.1. GIỚI THIỆU: ­ Macromedia Dreamwaever (DW) MX 2004 là công cụ thiết kế web chuyên nghiệp, phần lõi cuả nó là HTML, là một công cụ mạnh, dễ dùng, bạn có thể dễ dàng thiểt kế và phát triển một trang web hoặc một website lớn ­ DW MX 2004 là một công cụ trực quan, trong đó có thể bổ sung Javacript, biểu mẫu, bảng biểu và nhiều loại đối tượng khác mà không cần một đoạn mã nào. ­ DW MX 2004 sử dụng các công nghệ web, chuẩn HTML và cung cấp khả năng tương thích với các trình duyệt cũ, với DW MX2004 bạn có thể thiết kế bằng chế độ Design view hoặc code view hay code and design VII.2. CÀI ĐẶT: ­ DW MX 2004 là một chương trình trong bộ Macromedia MX, bạn nên cài đặt trên máy trọn bộ Macromedia MX để có đầy đủ các chương trình hổ trợ cho DW thiết kế trang web đẹp và sinh động hơn. ­ Sau khi cài đặt, bạn khởi động DW MX 2004 theo đường dẫn Start-> Programs->Macromedia Dreamwaever MX 2004 VII.3. MÀN HÌNH DW: 1. Insert Bar: Gồm các chức năng tiện ích dùng để chèn các đối tượng vào trang web, và định các thuộc tính cho đối tượng. ­ Common: Chèn đối tượng: Image, Flash, Date, Template, ­ Layout: Chứa các công cụ trình bày trang, gồm 3 chế độ: Standard, Expended, Layout ­ Form: Chứa các công cụ tạo form. ­ Text: dùng định dạng văn bản. ­ HTML: chứa các công cụ tạo trang web bằng code view. 2. Document Toolbar:Chứa các nút cho phép xem trang web ở dạng Design hay Code hoặc Code and Design ­ Show code view: Xem dạng HTML ­ Show Design View: xem trang dạng thiết kế, sử dụng các công cụ của DW. ­ Show Code and Design View: chia cửa sổ thành 2 phần: phần trên dạng code view, phần dưới dạng design view. ­ Title: Tiêu đề của trang web. ­ Preview/Debug in Browser: Xem kết quả trang web thông qua trình duyệt ­ Document Window: Cửa sổ dùng để tạo và hiệu chỉnh trang Web 3. Properties Inspector: Hiển thị các thuộc tính của các đối tượng đang được chọn, đồng thời cho phép chỉnh sửa các thuộc tính đó. 31
  32. Giáo trình thiết kế Web Khoa CNTT 4. Panel groups:Là nhóm các Panel cho phép quản lý các đối tượng trong trang Web. ­ Bậc/Tắt các thanh Panel: chọn menu Window->thanh panel tương ứng. ­ Mở rộng các thanh Panel: Click vào mũi tên ở góc trái của mỗi panel. Insert bar Document toolbar Document window Panel Group Tag Selector Properties Inspector Window site Site panel Downloadtime 5. Site Panel: Cho phép quản lý các tập tin, thư mục trong bộ Web (giống Window Explorer) Thanh công cụ của Site Panel: Connect/Disconnect: chức năng kết nối/ ngắt kết nối với Remote Site, chỉ có tác dụng với remote site sử dụng phương thức truyền FTP, WebDAV, hoặc Sourcesafe, mặc định Dreamwaever MX 2004 sẽ ngắt kết nối khỏi remote site nếu 32
  33. Giáo trình thiết kế Web Khoa CNTT nó ở trạng thái chờ 30’. Có thể thay đổi thời gian này bằng cách chọn: Edit/Preferences/Site. Refresh: Chức năng cập nhật tập tin, thư mục cho Remote site giống với Local Site của chính nó. Thường không sử dụng chức năng này vì khi tạo site mới Dreamwaever MX 2004 luôn đánh dấu check vào mục Refresh Remote File list automatically. Get file: chức năng chép file từ từ remote Site vào local site. Tuỳ thuộc vào Enable File Check in và check out mà các tập tin chép vào có thuộc tính được ghi chép hay chỉ đọc. Put file: chép tập tin từ Local Site lên Remote Site. Check out files: Kiểm tra tập tin ở Remote Site chép vào hay chép chồng lên tập tin ở Local site. Check in files: Kiểm tra tập tin ở Local Site chép vào hay chép chồng lên tập tin ở Remote site. Expand/Collapse: Hiển thị 2 cửa sổ Local Site và Remote Site. 6. Status bar: Thanh trạng thái, nằm ở dưới đáy của Document Window, hiển thị Tag Selector, Window size và Download time ­ Tag Selector: Hiển thị các tag HTML tại vị trí hiện hành của con trỏ, khi tạo trang Web mới thì phần tử duy nhất hiển thị trong Tag Selector là Body ­ Document size and Download Time: Kích cở ước chừng của tài liệu và thời gian tải tài liệu xuống, có thể điều chỉnh tốc độ download bằng cách: o Chọn Edit->Preference->Chọn mục Status Bar. o Tại mục Connection speed-> chọn tốc độ tương ứng. ­ Window Site: Hiển thị kích thước hiện tại của tài liệu, được tính bằng pixel. Khi định kích thước của trang web phải tính đến việc sao cho an toàn đối với mọi độ phân giải. Cách thay đổi kích thước của tài liệu theo một trong các kích thước định sẳn hoặc theo một giá trị khác: Click chuột vào mũi tên bên cạnh Window size. o Chọn một kích thước có sẳn hoặc chọn Edit size để định một kích thước khác. o Trong hộp thoại Preferences: Width để định chiều rộng, Height định chiều cao. VII.4.KẾ HOẠCH THIẾT KẾ MỘT WEBSITE: 1. Các yêu cầu cơ bản khi thiết kế website: ­ Xác định yêu cầu và mục đích của Website. ­ Chuẩn bị nội dung cho các trang ­ Phác thảo khuôn mẫu (Template) cho trang, thường các trang có cùng chủ đề thì sử dụng chung một template. 33
  34. Giáo trình thiết kế Web Khoa CNTT ­ Xác định cấu trúc của Website, có 3 kiểu cấu trúc. o Tuyến tính o Phân cấp o Hình chóp ­ Tuỳ theo mục đích của Website mà chọn kiểu phù hợp 2. Thao tác tạo website cơ bản: a. Khi thiết kế một Website cần chú ý đến 2 vấn đề: ­ Nội dung của chủ đề chính, từ đó chọn bố cục, hệ màu cho tương ứng, (Ví dụ: Website thương mại phải sáng sủa, rõ ràng về bố cục, ). Sau đó thu thập đầy đủ tài liệu, phân nhóm theo nội dung, từ đó quyết định cần bao nhiêu trang, nội dung của từng trang. ­ Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnh minh họa, ảnh bố cục, ảnh trang trí, ­ Phát hoạ sơ đồ liên kết trên giấy để thấy rõ mối liên kết giữa các trang đơn trong một website. b. Cách tạo một Website mới: Trong Document Window, chọn Site->Manages sites->New->Site-> xuất hiện hộp thoại Site Definition->Chọn Tab Advance. Trong mục Local Info: 34
  35. Giáo trình thiết kế Web Khoa CNTT ­ Site name: đặt tên site, tên này xuất hiện trong hộp thoại Edit Site. ­ Local Root Folder: Khai báo đường dẫn của folder lưu trữ Website trên ổ đĩa cứng bằng cách nhập đường dẫn đến thư mục hoặc Click vào biểu tương Folder và chỉ đường dẫn đến folder ­ Default Image folder: khai báo đường dẫn đến thư mục chứa các hình ảnh của trang Web, thư mục này phải nằm trong Local root Folder đã khai báo ở trên, tất cả các hình ảnh trong trang web mặc định được lưu trong thư mục này. ­ Refresh Local File List Automatically: Khi được chọn, DW tự động cập nhật cấu trúc file trong bảng Local Folder của Site Panel, việc cập nhật này sẽ sử dụng một ít tài nguyên của hệ thống, ta có thể tự động cập nhật khi cần bằng cách chọn View->Refresh Local trong Site Window. ­ HTTP Address: Nhập địa chỉ của Site, DW sẽ sử dụng địa chỉ này để quản lý site và liên kết các file của site. ­ Enable Cache: Khi được chọn, DW tạo một file lưu trữ các thông tin về link giữa các file trong site. Sau khi chọn xong Click OK->Click Done để hoàn tất công việc tạo site mới. c. Kiểm tra website đã tạo: ­ Mở site Panel: bằng cách chọn Window-> File ta thấy được thư mục chứa Site, nếu chưa tạo Folder chứa hình ảnh thì tại đây bạn Click phải chuột vào tên Site -> Chọn New Folder-> Nhập tên thư mục là Images. Trong website phải chứa 2 folder: folder HTML gồm các file .htm và folder image chứa hình ảnh của website. ­ Để mở rộng cửa sổ Site Panel -> Click chọn nút Expand/Collapse d. Mở một site có sẳn: ­ Click vào menu hiển thị tên Site trên Toolbar của Site Panel, chọn tên Site muốn mở trong danh sách xổ xuống. ­ Chọn menu Site -> Manage Sites -> Chọn tên Site muốn mở -> Done 35
  36. Giáo trình thiết kế Web Khoa CNTT e. Hiệu chỉnh site ­ Chọn menu Site->Manage Sites ­ Chọn tên Site cần hiệu chỉnh -> Click nút Edit ­ Xuất hiện hộp thoại Site Difinition->thực hiện hiệu chỉnh->OK-> Done Tạo một site mới Hiệu chỉnh Site Tạo một site mới giống site đã chọn Xoá site Xuất thông tin một site ra tập tin .ste Dẫn nhập thư mục, tập tin vào Site f. Page Properties: ­ Trong cửa sổ Document, chọn Modify -> Page Properties, xuất hiện hộp thoại Page Properties, chọn mục Appearance ­ Text Color: Chọn màu cho text. ­ Background Color: Chọn màu nền cho trang ­ Background Image: Chọn tập tin ảnh làm nền bằng cách click nút Browse 36
  37. Giáo trình thiết kế Web Khoa CNTT 3. Thiết kế các trang web đơn: ­ Tại màn hình khởi động chọn mục Create new -> Chọn HTML hoặc trong cửa sổ Document, chọn File->new-> Chọn HTML. ­ Xuất hiện Document Window, đây là nơi thiết kế trình bày nội dung của từng trang web đơn, sau khi thiết kế xong mỗi trang web được lưu dưới dạng một tập tin có phần mở rộng là .HTM/.HTML trong thư mục đã được khai báo trong mục Local Root Folder. 4. Tạo liên kết các trang web đơn thành một website: a. Cách tạo: ­ Để tạo liên kết, cần phân biệt trang nguồn và trang đích. o Trang nguồn là trang chứa các nút liên kết (có thể là đối tượng hình ảnh hoặc chữ) o Trang đích là trang liên kết đến ­ Mở trang nguồn ­ Chọn nút liên kết ­ Trong Properties Inspector, tại mục link, thực hiện một trong hai cách sau: o Cách 1: Click nút kéo mũi tên chỉ đến tên file cần liên kết trong Site Panel o Cách 2: Click nút mở hộp thoại Select File. . Look in: Chọn tên Sile . File name: Chọn tên trang Web cần liên kết đến 37
  38. Giáo trình thiết kế Web Khoa CNTT b. Kiểm tra link: ­ Check Links in Current Document: Kiểm tra liên kết trong trang hiện tại. ­ Check links for entire Site: Kiểm tra liên kết cho tất cả các trang trong site ­ Check links for Selected files/folders in Site: Kiểm tra nhóm tập tin/ thư mục được chọn trong Site. c. Xem kết quả bằng trình duyệt và hiệu chỉnh: Chọn File/Preview in Browser/Iexplorer hoặc Click nút Preview/Debug in Browser d. Kết nối và đưa website lên Web Server: Cần lưu lại tất cả các tập tin trước khi xuất bản Website. Xuất bản Website là chép thư mục gốc của Site lên Server của nhà cung cấp dịch vụ Internet (ISP) Trong DW MX 2004, xuất bản Website cần có bước kết nối với Server trước rồi mới Put File lên sau. Cách thực hiện như sau: ­ Trong Site Panel, chọn Site cần xuất bản ­ Click nút Put Files, để đưa Site lên Server. ­ Kết nối với Remote Site: Nếu khi tạo Site mới ta chưa xác định Remote Site(Thư mục chứa Site trên Server), nên sau khi click Put Site sẽ xuất hiện thông báo yêu cầu kết nối với Remote Site. ­ Click Yes, xuất hiện hộp thoại Site Definition ­ Chọn mục Remote Info, trong khung Access, Chọn Local/Network, giả lập một thư mục trên mạng cục bộ, hoặc trên một thư mục khác của ổ đĩa cứng. ­ Tại mục Remote Folder, Click biểu tượng Folder, để tìm thư mục mới chứa Site 38
  39. Giáo trình thiết kế Web Khoa CNTT Click chọn thư mục chứa Site e. Đưa site lên Remote Site: ­ Trong Site Panel, chọn lại tên Site cần xuất bản ­ Click nút Put File. ­ Xuất hiện hộp thoại: ­ Click OK. ­ Xuất hiện hộp thoại kết nối, các tập tin và thư mục lần lượt được chéo từ Site lên Remote Site. f. Kiểm tra lại trên Remote Site: Click nút Expand trong Site Panel: Màn hình chia làm 2 phần: Bên trái là Remote, bên phải là Local Site. 39
  40. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG VIII: CSS VIII.1. ĐỊNH DẠNG VĂN BẢN: ­ Cách nhập giống như các trình soạn thảo văn bản khác, mỗi phần nội dung được phân cách bằng cách xuống dòng, nếu xuống dòng trong cùng một đoạn thì nhấn Shift+Enter, nếu ngắt đoạn thì nhấn Enter. ­ Để hiệu chỉnh văn bản thường sử dụng thanh công cụ Properties Inspector. Cách tổng quát là đánh dấu khối văn bản->chọn kiểu định dạng ­ Sử dụng thanh công cụ Properties Inspector: 1. Font: ­ Cách 1: Tại mục Format chọn các heading, đây là định dạng mẫu, bao gồm font chữ, kiểu chữ, size, thường được dùng làm tiêu đề ­ Cách chọn nhóm font chữ: Chọn văn bản, rồi chọn nhóm Font trên Font menu của Properties Inspector hoặc chọn menu Text->Font. Trong DW, kiểu font chữ được định thành từng nhóm, mỗi nhóm gồm nhiều font, một Font chính và các Font dự phòng. Có thể tạo các nhóm Font tuỳ ý bằng cách tại mục Font -> chọn Edit Font List. o Chọn font trong khung Available Font, click nút đưa vào font được chọn qua khung chosen fonts. o Tạo thêm nhóm Font mới o Xoá nhóm ra khỏi Font List o sắp xếp các nhóm Font theo thứ tự 40
  41. Giáo trình thiết kế Web Khoa CNTT a. Font Size: Chọn khối văn bản, chọn cở chữ trong mục size của Properties Inspector, hoặc chọn Text-> size. Size chữ trong DW gồm 17 Font Size, trong đó có 8 mức thể hiện bằng số, từ 9->36 và 9 mức bằng chữ b. Font Color: Chọn khối văn bản, Click nút Text color, chọn màu hoặc chọn Text -> color Click nút Text Color chọn c. Canh lề đoạn văn: Chọn Text ->Align hoặc click công cụ 2. Danh sách dạng liệt kê: ­ Chọn Text -> List ­ Unordered List: Chèn Bulletted đầu dòng ­ Ordered List: Đánh số thứ tự đầu dòng Thay đổi thứ tự liệt kê: ­ Đặt dấu nháy trong danh sách liệt kê. ­ Chọn Text -> List -> Properties hoặc click nút List Item. Xuất hiện hộp thoại List Properties ­ List Type: Chọn kiểu danh sách(Bullet hoặc Number) ­ Style: Loại chấm tròn hay vuông ­ Start count: Số bắt đầu cho danh sách liệt kê List item: ­ New Style: Liệt kê nhiều cấp ­ Reset count to: số bắt đầu cho danh sách con 41
  42. Giáo trình thiết kế Web Khoa CNTT VIII.2.SỬ DỤNG CSS: ­ CSS (Cascading Style Sheet) cũng là một dạng HTML Style. Nhưng phong phú hơn về thuộc tính và ứng dụng. Một CSS không những tập hợp các định dạng, mà còn có thể giúp định vị, viền khung, đặt màu nền ­ CSS có thể đính kèm trong trang hoặc lưu riêng thành một tập tin kiểu CSS phục vụ cùng lúc cho nhiều trang 1. Tạo CSS cục bộ: a. Cách tạo: ­ Chọn Text->CSS Styles-> New, hoặc Window->CSS Style, mở CSS Panel, Click nút new CSS Style, xuất hiện hộp thoại New CSS Style: ­ Name: Tên của CSS mới, phải bắt đầu bằng dấu chấm(.) ­ Selector Type: Chọn loại CSS ­ Define in: Chọn This document only(chỉ sử dụng cho trang cục bộ) ­ Chọn OK, xuất hiện hộp thoại CSS Style definition 42
  43. Giáo trình thiết kế Web Khoa CNTT ­ Trong mục category, chọn Type, sau đó chọn các định dạng cho CSS ­ Chọn xong, click apply->ok ­ Trong CSS Panel xuất hiện Style vừa tạo b. Áp dụng CSS cục bộ ­ Chọn nội dung văn bản cần định dạng ­ Trong CSS Style Panel, chọn tên CSS 2. Tạo một tập tin CSS: Tập tin kiểu CSS là tập tin phụ trợ cho Site, nằm trong thư mục root của Site a. Cách tạo: ­ Text -> CSS Styles -> New ­ Trong hộp thoại New CSS Style ­ Selector Type: chọn Advanced ­ Define in: New Style Sheet file, OK ­ Hộp thoại yêu cầu lưu tập tin CSS, có phần mở rộng .CSS b. Áp dụng CSS từ một tập tin CSS: ­ Mở trang HTML cần sử dụng tập tin CSS. ­ Chọn Text->CSS Style->Attach Style Sheet hoặc Click nút Attach Style Sheet trong Style Panel ­ Chọn tập tin CSS cần kết nối, click nút Browse ­ Add as: Link: chỉ liên kết với tập tin CSS để sử dụng Import: Chép tập tin CSS vào trang c. Hiệu chỉnh một CSS: ­ Click phải trên một tên CSS trong CSS Style Panel. ­ Chọn Edit, thực hiện hiệu chỉnh d. Xoá một CSS Styles: Khi xoá một CSS Style thì những nội dung áp dụng CSS Style bị xoá sẽ trở về trạng thái ban đầu ­ Chọn CSS Style cần xoá ­ Click nút Delete CSS Style trong CSS Style Panel hoặc Click phải chuột, chọn Delete 43
  44. Giáo trình thiết kế Web Khoa CNTT C. IX: HÌNH ẢNH VÀ HYPERLINK TRONG DW IX.1. CHÈN HÌNH ẢNH TRONG TRANG WEB: 1. Chèn ảnh vào trang: ­ Ảnh trong thư mục Images của Site: Đặt dấu nháy tại vị trí cần chèn ảnh Drag chuột kéo tập tin ảnh trong Site Panel thả vào trang ­ Ảnh ngoài Site: Chọn Insert -> Image Xuất hiện hộp thoại Select Image Source Chọn tập tin ảnh cần chèn -> OK 2. Hiệu chỉnh thuộc tính của ảnh: ­ Chọn ảnh đã chèn ­ Window -> Properties Image: Đặt tên cho ảnh. W(Width), H(Height): Độ rộng và chiều cao của ảnh, tính bằng pixel Src: đường dẫn tương đối đến tập tin ảnh Alt: câu thông báo xuất hiện trên trình duyệt khi rê chuột vào ảnh Link: Địa chỉ URL nơi cần liên kết đến Edit: Chuyển qua Macromedia Fire Works hiệu chỉnh ảnh Crop: Cắt xén ảnh. Brightness/contrast: chỉnh độ sáng tối của ảnh. Sharpen: Chỉnh độ sắc nét của ảnh Resample: Lưu lại kích thước đã điều chỉnh. Optimize in Fireworks: chuyển qua Macromedia Fire Works hiệu chỉnh. Map: Bảng đồ liên kết Vspace, HSpace: Khoảng cách trên, dưới, trái, phải giữa phần nội dung văn bản với ảnh. Target: Khung chứa trang liên kết đến Low Src: tên tập tin ảnh phụ có độ phân giải thấp, làm ảnh thay thế khi chờ hiển thị ảnh chính trên trình duyệt Border: đường viền ảnh Align: canh lề trái, phải, giữa 44
  45. Giáo trình thiết kế Web Khoa CNTT 3. Chèn khung ảnh: Trong thiết kế, nhiều lúc cần dự phòng trước cho ảnh trang trí, nhưng chưa có ảnh thích hợp, ta có thể chèn trước một khung ảnh với thích thước xác định để giữ chổ ­ Chọn Insert -> Image Objects -> Image Placeholder ­ Xuất hiện hộp thoại Image Placeholder ­ Nhập tên, kích thước, màu cho khung ảnh Chèn ảnh vào khung ảnh: ­ Double click vào khung cần chèn ảnh ­ Xuất hiện hộp thoại Select Image Source, chọn tập tin ảnh cần chèn vào khung 4. Insert Rollover Image: Insert -> Image Objects -> Rollover Image, xuất hiện hộp thoại Rollover Image ­ Original image: ảnh gốc ­ Rollover image: ảnh khi rê chuột vào 5. Chèn Flash: ­ Insert -> Media -> Flash ­ Chọn tập tin kiểu .swf ­ Tại vị trí chèn xuất hiện biểu tượng Flash 45
  46. Giáo trình thiết kế Web Khoa CNTT Thuộc tính của Flash: ­ Flash: Tên đối tượng Flash ­ W(Width), H(Height): Chiều rộng và chiều cao của ảnh Flash ­ File: Tên tập tin Shockware của Flash ­ Src: Tên tập tin gốc của Flash ­ Edit: Hiệu chỉnh trong Macromedia Flash. ­ Reset size: trả về kích thước ban đầu. ­ Loop: Ảnh Flash lặp vô hạn ­ AutoPlay: tự động bật khi mở trang ­ Vspace, Hspace: Khoảng cách trên, dưới, trái, phải của đối tượng Flash đến văn bản. ­ Quality: chất lượng khi hiển thị ­ Show All: hiển thị tất cả đối tượng trong khung ­ No Border: không giới hạn trong khung viền. ­ Exact fit: vừa khít trong khung viền ­ Align: Canh lề. ­ Bg: màu nền dưới ảnh Flash 6. Ảnh nền trang: ­ Ảnh nền là ảnh tự động lắp đầy trang web. Khi thiết kế, bạn nên chọn những mẫu nền thật nhạt, chữ sậm hoặc nền thật sậm, chữ sáng để người xem dễ đọc. ­ Tuỳ thuộc vào từng loại nền mà xác định kích thước ảnh nền cho phù hợp, tạo ảnh nền với số Kb càng nhỏ thì hiển thị càng nhanh. a. Cách tạo ảnh nền: ­ Đặt trỏ trong trang ­ Chọn modify -> Page Properties ­ Background Images: nhập đường dẫn đến tập tin ảnh làm nền b. Ảnh nền trang cố định không lập Đây là dạng ảnh nền khó thực hiện, kích thước ảnh thường rất lớn, nên phải nén để giảm số Kb tối đa. ­ Tạo ảnh nền cố định, không lập bằng CSS: Thiết kế ảnh cần làm nền. Chọn Text->CSS Styles->New CSS Style. Trong hộp thoại New CSS Style: Selector: Nhập tên Style Selector Style: Chọn mục Advanced. Define in: This document only->OK. 46
  47. Giáo trình thiết kế Web Khoa CNTT Xuất hiện hộp thoại CSS Style definition: Trong mục catelogy, chọn background. Background image: tên tập tin ảnh làm nền Repeat: No repeat Attachment: fixed(nền cố định không cuộn) Horizontal, vertical Position: center -> OK ­ Sử dụng CSS ảnh nền: Khi tạo CSS Style, trong CSS Style Panel xuất hiện tên style vừa tạo Để đưa CSS Style ảnh nền vừa tạo làm nền cho trang, Click phải trên Tag của trang, chọn Set Class->chọn tên style vừa tạo IX.2. LIÊN KẾT TRANG TRONG DW: 1. Liên kết: Một liên kết nối từ trang nguồn đến trang đích gồm 2 thành phần: ­ Đối tượng được chọn làm nút liên kết có thể là văn bản(Text), hình ảnh(Image) hoặc nút(Button). Trong DW MX 2004 còn cung cấp thêm một số đối tượng đặc biệt làm nút liên kết như Flash Text, Flash Button, ­ Địa chỉ URL của trang cần liên kết đến: Tuỳ thuộc vào địa chỉ URL mà có thể chia làm 3 loại liên kết: Liên kết nội: Là liên kết nội bộ các trang trong cùng một Website. Liên kết ngoại: Là liên kết đến trang thuộc một Website khác. Liên kết Email: Là liên kết đến chương trình gửi thư tín điện tử. 2. Các dạng liên kết: ­ Dạng liên kết vòng: là dạng liên kết nối đuôi nhau, trang 1 liên kết đến trang 2, trang 2 liên kết đến trang 3, trang n liên kết với trang 1, dạng liên kết này đảm bảo cho người xem có thể xem tất cả các trang, nhưng bất lợi là phải duyệt hết một vòng. ­ Dạng liên kết đầy đủ: Tại mỗi trang đều tạo liên kết đầy đủ đến tất cả các trang khác, đây là dạng liên kết trong site có độ phân cấp thấp. Nếu Site có nhiều phân cấp thì nên chọn dạng liên kết cây phân cấp. ­ Dạng liên kết cây phân cấp: Trong các Site lớn, mức độ quan trọng của từng trang được phân cấp theo từng mức, với trang gốc là trang chủ, mức 1 là nhóm chủ đề chính, mức 2 là nhóm các chủ đề con, mức 3 là mức chứa các trang chứa các thông tin chi tiết, Ở dạng này tồn tại liên kết giữa các trang cùng mức(Same level), liên kết về mức trên(Parent level) và liên kết đến mức dưới (Child level) ­ Dạng liên kết tiện nghi: Ngoài các dạng liên kết trên, để thuận tiện cho người xem khi lật trang, có thể tạo thêm một số liên kết phụ, như liên kết đến điểm dừng (BookMark) trong trang có nội dung dài, khi người xem đến cuối trang có thể nhanh chòng lật sang trang khác mà không cần trở về. ­ Liên kết trang chủ: Trang chủ thường chứa các nút liên kết đến trang con, do đó cần phải tạo liên kết từ trang con trở về trang chủ. 47
  48. Giáo trình thiết kế Web Khoa CNTT 3. Cách tạo: ­ Mở trang nguồn. ­ Chọn Insert -> Hyperlink Text: nội dung văn bản làm nút liên kết. Link: Địa chỉ URL của trang cần liên kết đến. Target: Khung chứa trang đích Title: Câu ghi chú khi chuột chạm vào nút. Access Key: Khi xem trang, nhấn tổ hợp phím Alt+ký tự nhập vào để chọn nút và nhất Enter để liên kết. Tab Index: Trình tự chọn nút khi nhấn phím Tab. 4. Kiểm tra liên kết: a. Kiểm tra liên kết bằng check link: Ta có thể sử dụng Check Link để có một bảng thống kê tất cả các liên kết trong Website. ­ Mở trang cần kiểm tra liên kết. ­ Chọn File -> Check Page -> Check links ­ Trong -> Chọn mục Link Checker ­ Trong mục Show: Chọn Broken Link -> hiển thị danh sách liên kết gãy ­ Chọn External links: hiển thị danh sách liên kết ngoài. b. Kiểm tra trang web bằng trình duyệt: ­ Chọn File -> Preview in Browser ­ Có thể thay thế trình duyệt bằng cách chọn File -> Preview in Browse -> Edit Browser List. ­ Chọn tên trình duyệt trong phần Browser, chọn ieplorer. Nếu không tìm thấy thì click nút (+) để thêm trình duyệt vào danh sách Browser, click dấu (-) để bỏ bớt trình duỵêt trong danh sách. 48
  49. Giáo trình thiết kế Web Khoa CNTT Default: Mặc định độ ưu tiên trình duyệt khi xem trang Option: Preview Using Temporary file: Chọn chức năng này để tạo tập tin tạm tương ứng với trang cần xem. Trình duyệt sẽ hiển thị trang tạm, nếu không chọn, bạn sẽ xem trực tiếp trang trên trình duyệt 5. Hiệu chỉnh liên kết: ­ Chọn nút liên kết cần thay đổi ­ Chọn menu Modify -> Change Link ­ Hộp thoại Select file cho phép chọn tập tin trang cần liên kết đến ­ Nếu biết rõ tập tin liên kết mới thì có thể nhập trực tiếp trong ô link của Properties Inspector. a. Xoá liên kết: ­ Chọn nút muốn loại bỏ liên kết. ­ Chọn Modify -> Remove Link. Hoặc xoá tên trang liên kết trong ô link của Properties Inspector b. Chọn khung cho trang liên kết: Khi liên kết thường sử dụng trang khung (Frameset) ­ Chọn nút muốn thay đổi khung liên kết ­ Chọn menu Modify -> Link target ­ Chọn tên khung phù hợp c. Chọn màu cho liên kết: Thường một liên kết dạng văn bản sẽ được gạch dưới và có màu xanh, đôi khi màu này không phù hợp với màu sắc trong trang thiết kế, có thể chọn lại màu liên kết bằng cách: ­ Chọn Modify ->Page Properties, trong mục Catalogy, chọn link ­ Links color: Chọn màu màu mặc định cho nút liên kết ­ Vistited links: Màu liên kết đến các trang đã được xem ­ Active links: Màu nút liên kết khi đang được xem 49
  50. Giáo trình thiết kế Web Khoa CNTT 6. Bản đồ ảnh liên kết: Khi chọn ảnh làm liên kết, thì có một số ảnh kích thước lớn, thường chia nhỏ ảnh đó ra thành nhiều vùng, mỗi vùng liên kết đến một trang web khác, dạng này gọi là bản đồ ảnh liên kết. a. Thuận lợi: ­ Giúp tạo nhanh các liên kết ­ Hình ảnh trực quan, dễ liên tưởng đến trang tương ứng ­ Giúp bố cục các liên kết nhanh, không chiếm nhiều khu vực nút trên Web. b. Cách tạo: ­ Chèn ảnh vào trang, click chọn ảnh. ­ Trong Properties inspector, hiển thị công cụ Map ­ Chọn công cụ muốn chia vùng. ­ Drag chuột quanh phần trên hình mà ta muốn chia vùng để tạo liên kết ­ Trong Properties inspector, tại mục link, nhập địa chỉ trang cần liên kết đến. c. Hiệu chỉnh bản đồ liên kết: ­ Di chuyển vùng liên kết ­ Click chọn công cụ để chọn vùng cần di chuyển. ­ Drag chuột kéo đến vị trí mới d. Thay đổi kích thước vùng liên kết: ­ Chọn vùng liên kết ­ Click vào một trong các nút chọn của vùng liên kết ­ Drag chuột để thay đổi kích thước. e. Xoá vùng liên kết: ­ Chọn vùng liên kết ­ Nhấn delete. 7. Nhóm ảnh động làm nút liên kết: a. Chèn nút biến đổi hình: Trong folder Images của site phải có 2 tập tin n1.gif, n2.gif. ­ Đặt dấu nháy tại vì trí cần chèn nút động. ­ Chọn Insert -> Image Objects -> Rollover Image. Trong hộp thoại: 50
  51. Giáo trình thiết kế Web Khoa CNTT Image Name: nhập tên ảnh Original Image: tên tập tin ảnh gốc(n1.gif) Rollover Image: tên tập tin ảnh hiển thị khi rê chuột (n2.gif) Preload Rollover Image: đưa ảnh thay thế vào bộ nhớ trước. Alternate Text: câu ghi chú đi kèm theo When Click, go to URL: địa chỉ của trang liên kết đến b. Chèn hệ thống nút biến đổi hình: Bạn có thể chèn một lúc nhiều nút biến đổi hình bằng cách chọn Insert -> Image Objects -> Navigation bar: Thêm hoặc xoá nút trong hệ nút Sắp xếp trình tự nút trong hệ nút ­ Nav bar element: danh sách tên nút trong hê nút ­ Element name: Nhập tên nút mới ­ Up image: Ảnh hiển thị ở trạng thái thường ­ Down image: ảnh hiển thị khi Click chuột vào nút ­ Alternate text: câu ghi chú kèm theo ảnh ­ When click, go to URL: địa chỉ trang liên kết đến ­ Preload images: đưa ảnh sẽ thay thế vào bộ nhớ trước ­ Show “Down image” initially: khởi tạo chọn ảnh ở trạng thái ẩn ­ Insert: Horizontally (hệ nút ngang), Vertically (hệ nút dọc) ­ Use Table: Hệ nút nằm trong bảng. 51
  52. Giáo trình thiết kế Web Khoa CNTT c. Chèn nút Flash: Macromedia Dreamweaver và Macromedia Flash là một bộ chương trình có thể sử dụng dữ liệu qua lại với nhau rất thuận tiện, do đó có thể dùng các nút Flash được thiết kế sẳn để làm nút liên kết trong Dreamweaver. Cách tạo:Chọn Insert -> Media -> Flash ButtonF Sample: Ví dụ mẫu nút Flash Style: danh sách tên các nút mẫu Flash Button Text: Văn bản trên nút Flash Font: Kiểu chữ. Size: Cở chữ Link: Địa chỉ liên kết đến Target: Tên khung trang liên kết Bg: Màu nền. Hiệu chỉnh Flash: ­ Chọn nút Flash cần hiệu chỉnh: ­ Trong Properties inspector, thay đổi giá trị của các thuộc tính: 52
  53. Giáo trình thiết kế Web Khoa CNTT d. Chèn nút Flash Text: ­ Insert -> Media-> Flash Text ­ Hộp thoại Insert Flash Text, nhập vào các thông số: o Font, Size: font và cở chữ. o Color: màu chữ o Rollover color: Màu chữ thay đổi khi rê chuột qua nút. o Text: nội dung văn bản làm nút o Link: Địa chỉ trang Web liên kết đến o Target: Tên khung trang o Bg Color: màu nền của văn bản nút. 53
  54. Giáo trình thiết kế Web Khoa CNTT CHƯƠNG X: BẢNG VÀ TRÌNH BÀY TRANG X.1. TABLE: 1. Kẻ bảng: Tuỳ thuộc vào từng bố cục cụ thể mà quyết định số dòng, cột của bảng, mỗi dòng có thể có số ô khác nhau. Thường chúng ta nên chọn số dòng có số ô lớn nhất làm chuẩn để kẻ bảng. Chọn Insert/Table hoặc chọn trong nhóm Table: ­ Rows: số dòng cần chèn. ­ Columns: số cột cần chèn. ­ Table width: chiều rộng của bảng theo số điểm pixels hoặc phần trăm. ­ Border thickness: độ dầy của đường viền bảng. ­ Cell Padding: khoảng cách nội dung ô và biên ô. ­ Cell Padding: Khoảng cách giữa các ô. 2. Hiệu chỉnh bảng: a. Chèn thêm dòng/cột vào bảng: ­ Thêm dòng cuối bảng: o Định vị con trỏ ở ô cuối cùng trong bảng. o Ấn phím Tab để thêm dòng. Cách khác: o Ấn vào viền bảng, hay ấn thẻ chọn bảng. o Trong Properties inspector nhập số dòng mới. ­ Chèn thêm cột vào bảng: o Trong properties inspector nhập số cột mới. b. Xoá dòng, cột, bảng: o Chọn dòng, cột, bảng o Chọn Edit/Cut (Ctrl + X). c. Nối các ô trong bảng: o Chọn ô cần nối. o Modify -> Table -> Merge Cells 54
  55. Giáo trình thiết kế Web Khoa CNTT d. Tách các ô trong bảng: ­ Chọn ô cần tách. ­ Modify -> Table -> Splits Cell o Splits Cell in Columns: Tách ô thành nhiều ô theo cột o Splits Cell in Rows: Tách ô thành nhiều ô theo dòng. o Number of Columns, Rows: xác định số ô cần tách theo cột, dòng. 3. Thuộc tính bảng: ­ Rows: số dòng. ­ Cols: số cột. ­ W(width): chiều rộng, tính theo pixel hoặc theo tỷ lệ màn hình. ­ H(Height): chiều cao mặc định, tuỳ vào nội dung. ­ Cellpad: khoảng cách văn bản đến ô trong bảng. ­ Cellspace: khoảng cách giữa các ô trong bảng. ­ Align: Canh lề bảng, trái, phải, giữa. ­ Border: độ dày nét đường viền bảng. ­ Bg color: màu nền của bảng. ­ Bg image: ảnh nền của bảng. ­ Brdr color: màu đường viền bảng. X.2. TRÌNH BÀY TRANG: 1. Layout Table và Layout Cell: a. Layout Table: ­ Layout Table là dạng biến thể của table với các thông số đi kèm như khung viền Border=0, khoảng cách giữa các ô Cellspace = 0, khoảng cách giữa nội dung trong ô và viền ô Cellpad = 0. ­ Layout table dùng để phân vùng cho trang, nếu trong trang có nhiều nội dung với những chủ đề khác nhau hoặc cần nhập nội dung với dạng cột báo thì dùng Layout table để bố cục trang theo chủ đề được chuẩn bị trước. 55
  56. Giáo trình thiết kế Web Khoa CNTT ­ Layout Table dùng để bố cục trang, không dùng để chứa dữ liệu, viền khung của Layout Table có màu xanh lá cây. ­ Khi thiết kế dạng Layout, cần chuyển sang chế độ Layout view, trong Insert View -> Table Mode -> Layout Mode. b. Layout Cell: ­ Layout Cell: nằm trong Layout Table, dùng để chứa dữ liệu, dữ liệu trong layout cell có thể là văn bản, hình ảnh, khi thiết kế dạng layout cần lưu ý các layout cell phải sát nhau để tránh trường hợp làm trang bị nát ­ Một layout Table có thể chứa nhiều layout table con. Mỗi Layout Table gồm nhiều dòng, mỗi dòng chứa nhiều Layout Cell, số Layout Cell trên mỗi dòng có thể khác nhau. Ví dụ: ­ Layout Table: chứa bố cục trang ­ Layout Cell: Chứa dữ liệu c. Một số cách kết hợp Layout Table và Layout Cell: ­ Vẽ một Layout Table có kích thước đầy trang, sau đó vẽ các Layout cell bên trong Layout Table theo đúng kích thước và yêu cầu của bố cục. ­ Vẽ nhiều Layout Table cùng cấp: Layout Table trên chứa Logo, Banner, nút ngang. Layout Table ở giữa chứa nội dung văn bản, hình ảnh, Layout Table dưới chứa địa chỉ điện thoại, phone ­ Hoặc kết hợp cả 2 cách trên, dùng 2 Layout table ngang cấp: Layout Table trên chứa Logo, banner, nút ngang, Layout dưới chứa 2 layout table con, một bên trái và một bên phải Lưu ý: Khi vẽ một Layout Cell bên ngoài Layout table thì Dreamweaver tự phát sinh một Layout Table chứa Layout Cell đó Chế độ Expand Tables: cho hiển thị khoảng cách từ nội dung trong ô đến đường viền của Table, tiện cho việc hiệu chỉnh độ rộng của ô. 56
  57. Giáo trình thiết kế Web Khoa CNTT 2. Thuộc tính của Layout Table: a. Hiệu chỉnh thuộc tính của layout table: ­ Width: Fixed: Số pixel xác định độ rộng AutoStretch: tự động kéo dãn ngang theo nội dung văn bản hoặc hình ảnh chèn vào Layout Table. ­ Height: Xác định số pixel chiều cao, nhỏ nhất là 19 pixel. ­ Bg: màu nền của Layout Table. ­ Cellpad: khoảng cách từ nội dung đến biên của Layout Table. ­ CellSpace: Khoảng cách giữa các Cell. ­ Clear Row Height: tự động thay đổi chiều cao của các dòng cho vừa khít với nội dung, nếu không có nội dung thì chiều cao của dòng ít nhất là 19 pixel. ­ Remove All Spacers: có hiệu lực khi chọn AutoStretch (xoá tất cả khoảng trống thừa) ­ Make cells Width Consistent: tạo các cell trong Layout Table có chiều rộng như nhau. ­ Remove Nesting: xoá Layout Table con trong các Layout Table cha. b. Xoá Layout Table: ­ Chọn viền của khung Layout table hoặc click thẻ ­ Nhấn Delete. c. Hiệu chỉnh thuộc tính của Layout Cell: ­ Chọn Layout Cell. ­ Mở properties inspector của layout cell. ­ Width: Fixed: số pixel xác định chiều rộng. AutoStretch: tự động kéo dãn ngang theo nội dung văn bản hoặc hình ảnh chèn vào Layout Cell. ­ Height: Xác định số pixel chiều cao, nhỏ nhất là 19 pixel. ­ Bg: màu nền của Layout Cell. ­ Horz: Canh lề cho nội dung trong layout cell theo chiều ngang(left, right, center). ­ Vert: Canh lề cho nội dung trong layout cell theo chiều dọc. ­ No Wrap: khi nội dung dài hơn kích thước của layout cell, nếu chọn mục này thì văn bản không xuống dòng mà layout cell tự dãn ra, nếu không chọn thì văn bản tự xuống dòng khi gặp lề phải của Layout Cell. ­ Di chuyển một layout cell: Chọn layout cell (Ctrl + Click chuột vào Layout cell) vần di chuyển. Drap chuột kéo tới vị trí mới. ­ Xoá một layout cell: Chọn layout cell cần xoá, nhấn delete. 57
  58. Giáo trình thiết kế Web Khoa CNTT X.3. TEMPLATE: ­ Template không những giúp ta có thể sử dụng các thành phần dùng chung mà còn giữ quan hệ giữa các thành phần trong một mẫu trang được thiết kế, bố cục trước. Ta có thể căn cứ vào một mẫu template để tạo nhanh nhiều trang có cùng một bố cục thiết kế. Thao tác với template, ta cần phân biệt trang mẫu và trang sử dụng template. ­ Trang mẫu template: là tập tin kiểu .dwt với phần thiết kế chuẩn cho một bố cục dùng chung, trong trang có 2 loại vùng: vùng được khoá và vùng không khoá. ­ Trang sử dụng template: là tập tin kiểu .htm nhưng có bố cục giống trang mẫu template, ta chỉ được phép hiệu chỉnh, nhập nội dung mới cho các vùng không khoá. Khi có sự thay đổi trong trang mẫu template thì các vùng khoá của trang sử dụng template cũng sẽ tự động cập nhật theo. 1. Tạo mới một template: a. Tạo trang template: ­ Tạo mới một trang HTML template (mẫu) như một trang bình thường, kẻ layout table, layout cell phù hợp, nhập nội dung, chèn hình vào các vùng dùng chung. ­ Lưu trang mẫu: File -> Save as template. ­ Khi lưu trang dưới dạng Template (.dwt) mặc định tất cả các vùng của trang template đều bị khoá, do đó phải mở khoá cho các vùng không dùng chung. Chọn vùng cần mở khoá Insert->template object->Editable Region->đặt tên cho vùng mở khoá * Các cách khác để tạo template: ­ Tạo template theo mẫu có sẳn: Chọn File/New Chọn Page Designs/Text: Article D with Navigation Chọn Create. b. Tạo trang theo mẫu template: 58
  59. Giáo trình thiết kế Web Khoa CNTT ­ Chọn File/New ­ Trong hộp thoại New Document, chọn tab template ­ Chọn mẫu template đã tạo sẳn -> Create. Những vùng dùng chung sẽ bị khoá, khi thiết kế người dùng chỉ có thể thay đổi nội dung trong phần đã được mở khoá. 2. Hiệu chỉnh template: a. Hiệu chỉnh template: Mở template cần hiệu chỉnh: ­ Modify/template/Open Attached template. ­ Xuất hiện trang mẫu template, thực hiện hiệu chỉnh. b. Đổi tên template: Trong Asset Panel, nhóm template: Chọn template cần đổi tên. c. Xoá một template: ­ Trong Asset Panel. ­ Chọn template cần xoá. ­ Nhấn delete. Khi xoá một template sẽ ảnh hưởng đến tất cả các trang có sử dụng template. Nếu thực sự muốn xoá, trước tiên nên mở các trang sử dụng template rồi chọn chức năng tách khỏi template. d. Tách trang khỏi template: ­ Modify/Template/Detach from template. e. Sử dụng template cho trang: Sau khi tạo được các trang mẫu template, ta có thể dễ dàng sử dụng chúng. Áp dụng một mẫu template: ­ File/New/HTML tạo trang mới. ­ Modify/Template/Apply template to page ­ Chọn mẫu template. ­ Nhập nội dung, hình ảnh vào những vùng không khoá. Hoặc thực hiện cách khác: ­ Mở Assets Panel, nhóm template. ­ Chọn trong danh sách các mẫu template. ­ Chọn nút Apply. f. Cập nhật trang sử dụng template: ­ Modify/ Template/ Update current page: cập nhật trang hiện hành. ­ Modify/Template/Update page/Entire site, trong list box/look in 59