MỤC LỤC. Giáo trình Thiết kế web Trang 1

NỘI DUNG MỤC LỤC TRANG LỜI NÓI ĐẦU... ERROR! BOOKMARK NOT DEFINED. TÀI LIỆU THAM KHẢO... ERROR! BOOKMARK NOT DEFINED. BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER... 3 I. GIỚI THIỆU... 3 II. CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER... 3 III. ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB... 5 BÀI 2: BẢNG (TABLE)... 8 I. CHÈN BẢNG... 8 II. HIỆU CHỈNH BẢNG... 8 BÀI 3: IMAGE... 9 I. CHÈN ẢNH VÀO TRANG WEB... 9 II. XÓA ẢNH KHỎI TRANG WEB... 10 III. HIỆU CHỈNH KÍCH THƯỚC ẢNH... 10 IV. HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES... 10 BÀI 4: FORM... 11 I. CHÈN FORM MỚI VÀO TRANG WEB... 11 II THAY ĐỔI CÁC THUỘC TÍNH CỦA FORM... 11 III TEXT FIELD... 11 IV. TEXTAREA... 11 V. HIDDEN FIELD... 11 VI. CHECKBOX... 11 VII. CHECKBOX GROUP... 11 VIII. RADIO BUTTON... 11 IX. RADIO GROUP... 11 X. LIST/MENU... 12 XI. JUMP MENU GROUP... 12 XII. FILE FIELD... 12 XIII. BUTTON... 12 BÀI 5: HIỆU ỨNG HÌNH ẢNH... 12 I. ROLLOVER IMAGE... 12 Giáo trình Thiết kế web Trang 1

II. FLASH TEXT... 12 III. FLASH BUTTON... 13 IV. CHÈN ĐỐI TƯỢNG FLASH... 13 V. HYPERLINK... 13 Giáo trình Thiết kế web Trang 2

BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER I. GIỚI THIỆU Công dụng: Quản lý toàn bộ website o Các trang web bên trong website o Các tập tin thư viện dùng trong quá trình thiết kế trang web Xây dựng bố cục Chèn nội dung văn bản Chèn hình ảnh Chèn âm thanh (audio), đoạn phim (video clip) Ưu điểm của DreamWeaver: kết quả hiển thị trên trình duyệt gần giống với giao diện ta thiết kế trên DreamWeaver Khởi động Adobe DreamWeaver Cách 1: Vào Start -> All Programs -> Adobe DreamWeaver CS2 Cách 2: Click đôi chuột lên biểu tượng Adobe DreamWeaver CS2 trên màn hình desktop (Từ đây về sau, giáo trình sẽ viết tắt là DreamWeaver cho ngắn gọn) II. CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER Tạo site mới B1: Vào menu Site -> New Site. Xuất hiện hộp thoại Site Definition, Editing Files B2: Nhập tên site. Ví dụ: LTMT1K10. Chọn Next tiếp tục. Xuất hiện Editing Files, Part 2 Giáo trình Thiết kế web Trang 3

B3: Chọn No, I do not want to use a server technology, chọn Next. Xuất hiện Editing Files, Part 3 B4: Chọn Edit local copies on my machine, chọn thư mục chứa website. Chọn Next tiếp tục. Xuất hiện Sharing Files B5: Chọn None rồi chọn Next tiếp tục. Xuất hiện Summary. Chọn Done hoàn tất. Chọn Site đã có để tiếp tục thiết kế cho các trang Vào menu Site -> Manage Sites. Xuất hiện hộp thoại Manage Sites. Giáo trình Thiết kế web Trang 4

Chọn site trong danh sách, chọn Done Thêm thư mục mới vào Site Click chuột phải lên đối tượng chứa trong cửa sổ Files, chọn New Folder. Xuất hiện thư mục mới, đặt tên cho thư mục. Thêm file (html) mới vào Site Click chuột phải lên đối tượng chứa trong cửa sổ Files, chọn New File Xuất hiện file mới, đặt tên cho file (phần mở rộng là.html) Mở một file (html) đã có trong Site để thiết kế Trong cửa sổ Files, click đôi chuột lên file cần mở III. ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB Định dạng tổng thể cho trang web B1: Vào menu Modify -> Page Properties (Ctrl-J). Xuất hiện hộp thoại Page Properties B2: Category Appearance (CSS) o Page font: Chọn font chữ mặc định cho trang web o Size: Chọn kích thước và đơn vị cho mặc định cho ký tự o Text color: Chọn màu mặc định cho ký tự o Background color: Chọn màu nền cho trang web o Background image: Chọn tập tin ảnh làm nền cho trang web o Repeat: Chọn chế độ lập lại ảnh nền o Left margin: Canh lề trái o Right margin: Canh lề phải o Top margin: Canh lề trên o Bottom margin: Canh lề dưới B3: Category Link (CSS) Giáo trình Thiết kế web Trang 5

o Link font: Chọn font chữ cho văn bản liên kết o Size: Chọn kích tước chữ cho văn bản liên kết o Link color: Chọn màu mặc định cho văn bản liên kết o Rollover link: Chọn màu cho văn bản liên kết khi rê chuột đến o Visited links: Chọn màu mặc định cho văn bản liên kết đã được click o Active links: Chọn màu mặc định cho văn bản liên kết hiện tại o Underline style: Chọn định dạng gạch chân cho văn bản liên kết o Always underline: định dạng gạch chân o Nerver underline: không gạch chân o Show underline only on rollover: chỉ gạch chân khi rê chuột đến văn bản liên kết o Hide underline on rollerver: không gạch chân cho văn bản liên kết nhưng khi rê chuột đến thì gạch chân B4: Category Title/Encoding o Titlte: Văn bản tiêu đề trang (hiển thị trên thanh tiêu đề của trình duyệt) o Encoding: Chọn mã hóa văn bản. Luôn luôn chọn Unicode (UTF-8) B5: Chọn Apply và OK hoàn tất Định dạng văn bản B1: Nhập văn bản B2: Dùng chuột chọn khối văn bản cần định dạng B3: Vào menu Format Align: Canh lề văn bản o Left: canh trái o Center: canh giữa o Right: canh phải o Justify: canh đều List: Định dạng danh sách đề mục o None: không định dạng đề mục o Unordered List: định dạng đề mục (không đánh số thứ tự) o Ordered List: định dạng đánh số thứ tự đề mục Font: Chọn font chữ cho văn bản o Sau khi chọn font, xuất hiện hộp thoại New CSS Rule o Chọn lớp định dạng (Class) o Chọn tên lớp định dạng hoặc nhập tên mới o Chọn OK Style: Chọn định dạng o Bold: chữ đậm o Italic: chữ nghiêng o Underline: chữ gạch chân Color: Chọn màu cho văn bản Giáo trình Thiết kế web Trang 6

Giáo trình Thiết kế web Trang 7

BÀI 2: BẢNG (TABLE) I. CHÈN BẢNG B1: Click chuột tại vị trí cần chèn bảng B2: Vào menu Insert -> Table. Xuất hiện hộp thoại Table. B3: Nhập các thông số cho bảng cần chèn Rows: số dòng Columns: số cột Table width: chiều rộng của bảng Border thickness: độ dày đường viền Cell padding: khoảng cách giữa đường biên của ô với nội dung trong ô Cell spacing: khoảng cách giữa các ô trong bảng Header: tùy chọn vị trí tiêu đề II. HIỆU CHỈNH BẢNG Định dạng cho bảng B1: Click chuột tại vị trí bất kỳ bên trong bảng cần hiệu chỉnh B2: Vào menu Modify -> Table -> Select table B3: Hiệu chỉnh các thông số của bảng trong cửa sổ Properties Bg color: chọn màu nền cho bảng Bg Image: chọn ảnh làm nền cho bảng Brdr color: chọn màu cho đường viền của bảng Trộn nhiều ô thành 1 ô B1: Quét chọn các liên tiếp cần trộn B2: Vào menu Modify -> Table -> Merge cells Tách 1 ô thành nhiều ô B1: Click chuột vào ô cần tách B2: Vào menu Modify -> Table -> Split cell. Xuất hiện hộp thoại Split cell Giáo trình Thiết kế web Trang 8

B3: Chọn tùy chọn Split cell into o Rows: tách ô thành nhiều dòng o Columns: tách ô thành nhiều cột o Number of : số lượng cần tách Định dạng ô trong bảng B1: Click chuột vào ô cần định dạng B2: Chọn các tùy chọn định dạng trong vùng Cell của cửa sổ Properties o Horz: canh lề theo chiều ngang o Vert: canh lề theo chiều dọc o W: chiều rộng của ô o H: chiều cao của ô o Bg: chọn màu, tập tin ảnh làm nền cho ô o Brdr: chọn màu cho đường viền của ô BÀI 3: IMAGE I. CHÈN ẢNH VÀO TRANG WEB Cách 1: Chèn bằng menu lệnh B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn ảnh B2: Chọn menu Insert -> Image. Xuất hiện hộp thoại Select Image Source. B3: Chọn file ảnh cần chèn, chọn OK. B4: Xuất hiện hộp thoại Image Tag Accessibility Attributes Giáo trình Thiết kế web Trang 9

o Alternate text: nội dung ngắn, mô tả cho hình ảnh o Long description: địa chỉ trang web mô tả đầy đủ cho hình ảnh B5: Nhập nội dung cho Alternate text và Long description trong hộp thoại Image Tag Accessbility Attributes B6: Chọn OK *Có thể bỏ qua bước B5 Cách 2: Kéo rê ảnh từ cửa sổ Files và trang web. II.XÓA ẢNH KHỎI TRANG WEB B1: Trên vùng nhìn Design của trang web, click chuột lên ảnh cần xóa. B2: Bấm Delete trên bàn phím III. HIỆU CHỈNH KÍCH THƯỚC ẢNH Thay đổi kích thước (chiều rộng và chiều cao) hiển thị của ảnh trên trang web B1: Trên vùng nhìn Design của trang web, chọn ảnh cần thay đổi kích thước B2: Di chuyển chuột đến các điểm neo của ảnh, con trỏ chuột sẽ có hình mũi tên 2 chiều B3: Click giữ trái và kéo rê chuột để thay đổi kích thước *Chú ý: trong quá trình kéo rê chuột, nên ấn và giữ phím Ctrl trên bàn phím để ảnh không bị biến dạng IV. HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES W: Kích thước chiều rộng hiển thị trên trang web H: Kích thước chiều cao hiển thị trên trang web Border: Kích thước viền của đường biên ảnh V Space: Khoảng cách giữa đường biên (theo chiều dọc) với hình ảnh H Space: Khoảng cách giữa đường biên (theo chiều ngang) với hình ảnh Src: đường dẫn đến tập tin ảnh Link: địa chỉ liên kết đến trang khác khi click chuột lên hình ảnh trên trình duyệt web Target: tên đối tượng hiển thị trang web được liên kết khi click chuột lên ảnh (sẽ được biết ở bài sau) Low src: đường dẫn đến file ảnh khác nhưng có kích thước (lưu trữ) nhỏ hơn Alt: nội dung ngắn, mô tả cho hình ảnh Align: cách thức hiển thị hình ảnh trên trang web Class: lớp định dạng cho ảnh trên trang web (sẽ được biết đến trong bài CSS) Giáo trình Thiết kế web Trang 10

BÀI 4: FORM I. CHÈN FORM MỚI VÀO TRANG WEB B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn form B2: Chọn menu Insert -> Form -> Form. II THAY ĐỔI CÁC THUỘC TÍNH CỦA FORM B1: Click chuột trên đường viền đỏ thể hiện form B2: Hiệu chỉnh các thuộc tính của form trên cửa sổ Properties o Action: địa chỉ trang web sẽ nhận các dữ liệu trên form o Method: phương thức gửi dữ liệu o Target: đối tượng cửa sổ (hoặc frame) hiển thị kết quả III TEXT FIELD B1: Click chuột lên vị trí cần chèn Text Field trong form B2: Vào menu Insert -> Form -> Text Field. Xuất hiện hộp thoại Input Tag Accessibility Attributes B3: Nhập các thông tin tùy chọn cho Text Field IV. TEXTAREA B1: Click chuột tại vị trí cần chèn Textarea B2: Vào menu Insert -> Form -> Textarea B3: Nhập các thông tin tùy chọn cho Textarea V. HIDDEN FIELD B1: Click chuột tại vị trí cần chèn Hidden Field B2: Vào menu Insert -> Form -> Hidden Field VI. CHECKBOX B1: Click chuột tại vị trí cần chèn Checkbox B2: Vào menu Insert -> Form -> Checkbox B3: Nhập các thông tin tùy chọn cho Checkbox VII. CHECKBOX GROUP B1: Click chuột tại vị trí cần chèn Checkbox Group B2: Vào menu Insert -> Form -> Checkbox Group B3: Nhập các thông tin tùy chọn cho Checkbox Group VIII. RADIO BUTTON B1: Click chuột tại vị trí cần chèn Radio Button B2: Vào menu Insert -> Form -> Radio Button B3: Nhập các thông tin tùy chọn cho Radio Button IX. RADIO GROUP B1: Click chuột tại vị trí cần chèn Radio Group B2: Vào menu Insert -> Form -> Radio Group B3: Nhập các thông tin tùy chọn cho Radio Group Giáo trình Thiết kế web Trang 11

X. LIST/MENU B1: Click chuột tại vị trí cần chèn List/Menu B2: Vào menu Insert -> Form -> List/Menu B3: Nhập các thông tin tùy chọn cho List/Menu B4: Nhập các mục chọn trong List/Menu XI. JUMP MENU GROUP B1: Click chuột tại vị trí cần chèn Jump Menu B2: Vào menu Insert -> Form -> Jump Menu B3: Nhập các thông tin tùy chọn cho Jump Menu XII. FILE FIELD B1: Click chuột tại vị trí cần chèn File Field B2: Vào menu Insert -> Form -> File Field B3: Nhập các thông tin tùy chọn cho File Field XIII. BUTTON B1: Click chuột tại vị trí cần chèn Button B2: Vào menu Insert -> Form -> Button B3: Nhập các thông tin tùy chọn cho Button BÀI 5: HIỆU ỨNG HÌNH ẢNH I. ROLLOVER IMAGE Tạo hiệu ứng đổi ảnh khi rê chuột lên ảnh B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn form B2: Chọn menu Insert -> Image Objects -> Rollover Image. Xuất hiện hộp thoại Insert Rollover Image B3: Nhập các thông tin cho Rollover Image o Image name: tên của rollover image. Tên của các rollover image phải khác nhau. o Original image: đường dẫn hình ảnh hiển thị đầu tiên o Rollover image: đường dẫn hình ảnh sẽ được hiển thị khi rê chuột lên ảnh o Preload rollover image: các ảnh sẽ được nạp xong rồi mới hiển thị o Alternate text: nội dung ngắn mô tả cho ảnh o When clicked, go to URL: địa chỉ trang web sẽ được liên kết điến khi click chuột lên ảnh II. FLASH TEXT Tạo nội dung ngắn có hiệu ứng flash đổi màu đơn giãn B1:Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn Flash Text. B2:Chọn menu Insert -> Objects -> Flash Text. Xuất hiện cửa sổ Insert Flash Text. Giáo trình Thiết kế web Trang 12

B3: Nhập các thông tin cho Flash Text o Font, size: chọn font và kích thước chữ. o Text: nội dung văn bản ngắn o Color: màu sắc hiển thị văn bản o Rollover color: màu sắc của văn bản sẽ được thay đổi khi rê chuột lên Flash Text o URL: địa chỉ trang web được liên kết đến khi click chuột lên Flash Text o Path: đường dẫn tập tin để lưu kết quả III. FLASH BUTTON Tạo nút nhấn có hiệu ứng flash đơn giãn theo mẫu của DreamWeaver B1:Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn Flash Button B2:Vào menu Insert -> Objects -> Flash Button. Xuất hiện hộp thoại Insert Flash Button B3:Nhập các thông tin cho Flash Button o Font, size: chọn font và kích thước chữ o Style: chọn mẫu nút nhấn o Text: nội dung văn bản ngắn trên nút o URL: địa chỉ trang web được liên kết đến khi click chuột trên Flash Button o Path: đường dẫn tập tin để lưu kết quả IV. CHÈN ĐỐI TƯỢNG FLASH B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn đối tượng Flash B2: Kéo rê đối tượng flash (tập tin.swf) vào vị trí cần chèn. V. HYPERLINK Tạo liên kết đến trang web khác, liên kết gửi email hoặc nhảy đến vị trí khác trong trang. B1: Quét khối hoặc chọn hình ảnh cần tạo liên kết. B2: Vào menu Insert -> Hyperlink. Xuất hiện hộp thoại Hyperlink B3: Nhập các thông tin cho liên kết muốn tạo o Link: đường dẫn đến trang trong site hoặc trang web bên ngoài cần liên kết đến o Target: đối tượng đích sẽ hiển thị nội dung trang được liên kết o Title: tiêu đề mô tả cho liên kết * Tạo liên kết đến một trang cùng site với trang hiện tại: Link: đường dẫn tương đối đến trang Ví dụ: gioithieu.html * Tạo liên kết đến trang ngoài site Link: đường dẫn tuyệt đối Ví dụ: http://www.hcmus.edu.vn * Tạo liên kết gửi email: Giáo trình Thiết kế web Trang 13

Link: mailto://địa chỉ email Ví dụ: mailto://tailieu@gmail.com VI. TEMPLATE 1. Cách tạo Template Hình 20. Tạo template cho Website Trong việc thiết kế web, bạn sẽ thiết kế một trang chủ và hệ thống gồm rất nhiều trang con. Để trang chủ và các trang con đều có cấu trúc nhất quán với nhau, bạn phải tạo một trang gọi là template. Khi đó muốn thay đổi nội dung cho toàn bộ Website, bạn chỉ cần đơn giản thay đổi nội dung ở trang template và cập nhật lại cho toàn bộ Website với những thao tác thật đơn giản. Tập tin template tạo ra sẽ có phần đuôi là.dwt và nó sẽ mặc định đặt trong Templates folder. Để tạo một template, bạn tiến hành như sau: Khởi động Dreamweaver. Vào menu File, chọn New. Ở Page Type > chọn HTML template sau đó bấm vào nút Create để mở một trang mới lên (hình 20). Tiếp theo, bạn khai báo các thông tin về website mới bằng cách vào Site, chọn Manage Sites, sau đó chọn New trong cửa sổ tiếp theo để khai báo. Tối thiểu cần khai báo một số thông tin sau (hình 21) - Site name: tên Website. - Local root folder: thư mục gốc trên máy. Giáo trình Thiết kế web Trang 14

- Default images folder: thư mục mặc định dành cho hình ảnh. Hình 21. Chọn thư mục lưu trữ Website Sau khi khai báo xong chọn Save và bắt đầu tạo template. Khi xác định thành phần nào trong web là không thay đổi, bạn sẽ tạo trang web với những thành phần đó, sau đó chọn File > Save as Template. Ngoài ra, bạn cũng có thể tạo ra một template từ một trang web đã thiết kế trước đó bằng cách mở trang web đó lên bằng Dreamweaver, tiến hành khai báo Site mới cho trang web đó và chọn File > Save as template. Sau đó đặt tên cho template vừa tạo. Tiếp theo, bạn xác định các vùng có thể thay đổi được như sau: - Chọn vùng có thể thay đổi được bằng cách bấm chuột vào bảng của vùng đó (vùng được chọn sẽ có viền màu đen đậm bao quanh). - Chọn Insert > Tenplate > Editable Region (hình 22). Giáo trình Thiết kế web Trang 15

Hình 22. Chọn vùng thay đổi trên template Đặt tên cho vùng vừa chọn và bấm OK trong cửa sổ tiếp theo. Cuối cùng, chọn File > Save để lưu lại trang template vừa tạo.` 2. Tạo trang web mới từ template Bây giờ, bạn có thể tạo ra trang web đầu tiên từ template vừa tạo. Chọn File > New. Trong cửa sổ hiện ra, chọn Page from Template và chọn File Template vừa tạo sau đó bấm nút Create (hình 23). Lưu ý, các tập tin tạo ra từ template chỉ có thể soạn thảo ở vùng Editable Region mà bạn đã chọn lúc tạo template. Còn các vùng khác thì sẽ không được phép thay đổi. Giáo trình Thiết kế web Trang 16

Hình 23. Tạo trang web mới từ template Ngoài ra, khi đã tạo xong template với đầy đủ nội dung và liên kết thì bạn lưu thay đổi trên template này. Dreamweaver sẽ xuất hiện hộp thoại nhắc nhở có muốn cập nhật thay đổi trên các trang dùng template này hay không, bấm Update để cập nhật. VII. CSS A : Cơ bản về CSS Trong bài mở đầu này chúng ta sẽ đi tìm hiểu một số khái niệm và đặc tính của CSS, mà chúng ta cần chú ý trong suốt quá trình làm việc với CSS I. CSS là gì CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web II. Một số đặc tính cơ bản của CSS 1. CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css" CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác. 2. Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt Giáo trình Thiết kế web Trang 17

Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau. 1. Style đặt trong từng thẻ HTML riêng biệt 2. Style đặt trong phần <head> 3. Style đặt trong file mở rộng.css 4. Style mặc định của trình duyệt Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới. 3. CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã được khai báo ở đầu file css với các thuộc tính như sau: #vidu { width: 200px; height: 300px; Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div id="vidu"> với các thuộc tính. #vidu { width: 400px; background-color: #CC0000; Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính: #vidu { width: 400px; /* Đè lên khai báo cũ */ height: 300px; background-color: #CC0000; B : Cú pháp CSS Sau khi hiểu là nắm bắt được một số đặc tính của CSS chúng ta tiếp tục đi tìm hiểu về cú pháp và cách khai báo của các thẻ CSS Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value). selector {property: value Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của bạn vào trong dấu nháy kép p {font-family: "sans serif" Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;). Giáo trình Thiết kế web Trang 18

p {text-align:center;color:red Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt. p { text-align: center; color: black; font-family: arial C: Làm sao chèn CSS vào trang Web Bạn đã có một file CSS của bạn, bây giờ công việc tiếp theo là làm thế nào để chèn những đoạn CSS của bạn vào trong trang, Và xem chúng hoạt động như thế nào. Trong phần này chúng ta sẽ đi tìm hiểu chi tiết về cách chèn một đoạn style trong trang HTML hay liên kết tới một file CSS viết sẵn. Khi trình duyệt đọc đến CSS, thì toàn bộ Website sẽ được định dạng theo các thuộc tính đã được khai báo trong phần CSS. Có ba cách cho phép chúng ta chèn định dạng CSS vào trong Website. 1. CSS được khai báo trong file riêng. Toàn bộ mã CSS được chứa trong file riêng có phần mở rộng.css là một ý tưởng được dùng khi một file CSS sẽ được áp dụng cho nhiều trang khác nhau. Bạn có thể thay đổi cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS. Trong cách này thì file CSS sẽ được chèn vào văn bản HTML thông qua thẻ <link>...</link>. Ta có cú pháp như sau: <html> <head> <link rel="stylesheet" type="text/css" href="/mystyle.css" medial="all" /> </head> <body> </body> </html> Trình duyệt sẽ đọc toàn bộ các định dạng được quy định trong file mystyle.css và định dạng cho văn bản HTML. File CSS có thể được soạn thảo bằng một số trình duyệt khác nhau. Trong file không được chứa mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại với phần mở rộng là.css. Giả sử chúng trong file mystyle.css ở trên chứa đoạn mã sau: hr {color: sienna p {margin-left: 20px body {background-image: url("http://vnwebmaster.com/images/back40.gif") Không bao giờ sử dụng khoảng trắng trong nhãn, giả sử rằng nếu bạn dùng margin-left: 20 px; thay cho margin-left: 20px; thì IE6 sẽ hiểu còn các trình duyệt như Firefox, Opera sẽ không hiểu 2. Chèn CSS trong tài liệu HTML Chèn thẳng CSs trong tài liệu được áp dụng trong trường hợp những định dạng CSS này chỉ giành riêng cho tài liệu HTML đó. Khi bạn chèn trực tiếp thì đoạn mã của bạn phải đặt trong thẻ <style> và đặt trong phần <head>. <head> Giáo trình Thiết kế web Trang 19

Đặt màu nền cho đoạn văn bản. Bạn có thể đặt màu nền (background) cho đoạn văn bản bằng thuộc tính background-color: #mã màu; p { background-color: #FFFF00; Căn chỉnh khoảng cách giữa các ký tự. Khoảng cách giữa các ký tự trong một đoạn văn bản có thể được tăng hoặc giảm bởi thuộc tínhletter-spacing: khoảng cách; h3 { letter-spacing: 2em; h1 { letter-spacing: -3em; Căn chỉnh khoảng cách giữa các dòng. Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng cách giữa các dòng trong một đoạn văn bản. p { line-height: 150%; // line-height: 15px; Dóng hàng Để gióng hàng cho một đoạn văn bản chúng ta sẽ dùng thuộc tính text-align: vị trí; p { text-align: left; /* left center right */ Trang hoàng thêm cho đoạn văn bản. Một đường gạch chân hoặc đường gạch ngang dòng văn bản sẽ làm cho đoạn văn bản của bạn thêm sinh động. Để tô điểm thêm cho đoạn văn bản chúng ta sẽ dùng thuộc tính textdecoration: thuộc tính; h3 { text-decoration: underline; /* Gạch chân */ h2 { text-decoration: line-through; /* Gạch ngang */ h1 { Giáo trình Thiết kế web Trang 21

text-decoration: overline; /* kẻ trên */ Chỉnh vị trí của đoạn văn bản (indent). Thuộc tính text-indent: vị trí; sẽ căn chỉnh vị trí của dòng văn bản theo chiều ngang. h1 { text-indent: -2000px; /* text-indent: 30px; */ Điều kiển các ký tự trong một đoạn văn bản. Bạn có thể điều khiển toàn bộ đoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính texttransform: kiểu chữ; p.uppercase { text-tranform: uppercase; p.lowercase { text-tranform: lowercase; p.capitalize { text-tranform: capitalize; Đặt hướng cho đoạn văn bản. Hướng của đoạn văn bản có thể từ trái qua phải hay từ phải qua trái chúng ta có thể điều khiển bởi thuộc tính direction: hướng; div.rtl { direction: rtl; /* Right to left */ div.ltr { direction: ltr; /* Left to right */ Tăng khoảng cách giữa các từ. Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng cách; word-spacing: 30px; Làm mất tác dụng của đường bao của một thẻ HTML. Để làm mất tác dụng đường bao của một thẻ HTML chúng ta dùng thuộc tính white-space: giá trị; p { white-space: nowrap; Giáo trình Thiết kế web Trang 22

Thuộc tính white-space sẽ làm cho toàn bộ đoạn văn bản ở trên một dòng. VIII. Javascript cơ bản 1. Tạo một đoạn Script JavaScript là một ngôn ngữ kịch bản động, cho phép bạn xây dựng các tương tác vào các trang HTML tĩnh. Điều này được thực hiện bằng cách nhúng các đoạn Code JavaScript hầu hết vào bất cứ nơi nào trong trang web của bạn. Để thực hiện công việc này, các đoạn Code JavaScript được bỏ trong tag script như sau: <script...> Code JavaScript viết ở đây </script> Tag script có một thuộc tính quan trọng, đó là thuộc tính language. Thuộc tính này xác định loại ngôn ngữ được sử dụng bên trong tag <script>. Thông thường, giá trị của nó sẽ là JavaScript hoặc JavaScript1.0, JavaScript1.1, JavaScript1.2. Bằng cách xác định phiên bản JavaScript cụ thể, bạn chỉ ra cho trình duyệt biết script này chỉ có thể chạy trên một trình duyệt có hỗ trợ các phiên bản được bạn chỉ định. Ví dụ, sau đây là một ví dụ về một tag script hoàn thiện: <script language="javascript"> Code JavaScript viết ở đây </ script> Sau đây là các bước cơ bản hướng dẫn bạn cách để viết script vào trang HTML. Ví dụ sẽ viết một đoạn Script xuất chữ Hello Zend.vn vào nội dung trang. 1. Dùng notepad, tạo mới một file HTML 2. Tạo phần nội dung cho file HTML bằng thẻ <body> như sau <body> </body> 3. Chèn đoạn script vào: <body> <script> </script> </body> 4. Xác định JavaScript là ngôn ngữ sẽ được viết bên trong tag <script> <body> <script language= JavaScript > </script> </body> 5. Viết code JavaScript xuất chuổi Hello Zend.vn Giáo trình Thiết kế web Trang 23

<body> <script language= JavaScript > document.write( Hello Zend.vn ); </script> </body> 6. Lưu file với tên vidu001.html (hay tên nào đó tùy bạn, với đuôi *.html) 7. Mở file bằng trình duyệt web và xem kết quả 2. Ẩn mã JavaScript của bạn Trên đây, bạn đã biết cách chèn một đoạn Code JavaScript vào HTML, tuy nhiên có một vấn đề đặt ra là: Nếu trình duyệt web không hổ trợ JavaScript thì sao? hoặc người dùng đã Disable JavaScript trên trình duyệt ủa họ? - Câu trả lời là Script có thể sẽ được hiển thị mã nguồn ra nội dung trang và người dùng sẽ nhìn thấy. Để ẩn code trong trường hợp này bạn chỉ cần đặt đoạn Script của mình giữa 2 dấu:  Ví dụ cụ thể: <body> <script language= JavaScript >  </script> </body> 3. Lựa chọn khác cho mã JavaScript Mọt câu hỏi đặt ra nữa là, nếu trình duyệt không support JavaScript (như mục 2), làm thế nào để thông báo cho người dùng biết, hoặc thay vào đó một content khác? - HTML support tag <noscript> để làm việc này: <body> <script language= JavaScript >  </script> <noscript> Trình duyệt của bạn không support JavaScript! </noscript> </body> 4. Ghi chú thích Để code script dễ đọc, dễ sửa về sau, thường khi viết code các bạn cần phải ghi chú thích. Xem code sau để biết các kiểu ghi chú thích được JavaScript chấp nhận: // Đây là một dòng chú thích riêng document.write( Hello Zend.vn ); // Đây là chú thích trên cùng dòng lệnh JavaScript Giáo trình Thiết kế web Trang 24

/* Đây là một đoạn chú thích có nhiều dòng. */ 5.Viết lệnh JavaScript a. Mỗi lệnh một dòng: var a = "Yes"; document.write("hello Zend.vn"); reasult = window.confirm(a); b. Trên cùng 1 dòng: var a = "Yes"; document.write("hello Zend.vn"); reasult = window.confirm(a); c. Kết hợp: var a = "Yes"; document.write("hello Zend.vn"); reasult = window.confirm(a); 6.Tạm bỏ lệnh từ Script Sử dụng cách ghi chú thích như đã trình bày trên mục 5 để làm việc này. Xem một số ví dụ: var myvariable = "Hello Zend.vn" // document.write("hello"); document.write("hello") // document.write("zend"); document.write(".vn"); document.write("hello") // document.write("zend"); // document.write(".vn"); /* document.write("hello") document.write("zend"); document.write(".vn"); */ /* document.write("hello") */ // document.write("zend"); document.write(".vn"); 7.Sử dụng các dấu ngoặc Dấu ngoặc đơn "()" gôm biểu thức điều kiện, dấu ngoặc nhọn gôm/tổ hợp các lệnh thành một nhóm lệnh. Ví dụ mệnh đề điều kiện có cấu trúc: Giáo trình Thiết kế web Trang 25

if (điều kiện) lệnh Ví dụ: if (1==1) document.write("hello Zend.vn"); //Dòng này sẽ xuất ra trình duyệt chuổi "Hello Zend.vn" Câu hỏi đặt ra là: Nếu không chỉ dùng 1 lệnh sau điều kiện như trên, ta muốn thực hiện nhiều lệnh thì sao? - Trả lời: Bạn phải gôm các lệnh đó lại thành một nhóm lệnh (block). Xem ví dụ: if (1==1) { document.write("hello"); document.write("zend"); document.write(".vn"); 8.Viết nội dung ra trình duyệt <body> <script language="javascript">  </script> </body> 9.Tạo một biến kiểu chuỗi var day = "Tuesday"; //khai báo biến day = "Thursday"; //gán cho biến giá trị mới day = "Monday";//gán cho biến giá trị mới Sau đây là ví dụ tạo biến trong phần header của HTML: <head> <script language="javascript"> var myvariable = "Hello"; </script> </head> <body> Chúng ta đã tạo một biến trong phần header của HTML </body> IX.HTML 1. Giới thiệu và thuật ngữ Web Browser: trình duyệt web, là chương trình dùng để xem nội dung các trang web. HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu văn bản). HTML Document: tài liệu HTML (hay còn gọi là tập tin HTML). Một trang web là một tài liệu HTML. Từ tài liệu HTML, Web Browser hiển thị kết quả (bao gồm văn bản, hình ảnh, video, audio, tương tác) tương ứng. HTML Element (phần tử HTML): bên trong một tài liệu HTML gồm nhiều HTML Element. Web site: bao gồm cấu trúc thư mục và các tài liệu bên trong: các tập tin HTML, các tập tin Giáo trình Thiết kế web Trang 26

hình ảnh, audio, video, Web Server (máy phục vụ web): có nhiệm vụ tiếp nhận yêu cầu sau đó trả về kết quả (tài liệu HTML) cho Web Browser. JavaScript: ngôn ngữ lập trình tạo tính tương tác sinh động trên trang web, được tiếp nhận và thực hiện tại Web Browser. jquery: thư viện được tạo từ JavaScript, cung cấp sẵn các hàm giúp việc thiết kế hiệu ứng động, tương tác trên trang web được dễ dàng hơn. 2.Tổng quan về HTML Quy tắc trong một tài liệu HTML - Bên trong một tài liệu HTML là các HTML Element. - HTML Element bắt đầu bằng một thẻ mở và kết thúc bởi một thẻ đóng theo quy tắc: <TênThẻ [ThuộcTính_i= gt_i ]> </TênThẻ> - Nội dung của HTML Element là toàn bộ những gì được đặt ở giữa thẻ mở và thẻ đóng. Ví dụ: <p>khoa CNTT</p> <h1 style= margin-left:20px; >GIỚI THIỆU</h1> - Một số HTML Element mở và đóng ngay tại một thẻ theo dạng <TênThẻ /> Ví dụ: <br /> <img src= images/banner.jpg width= 100% height= 200px /> - Quy tắc khi viết các thẻ lồng nhau: mở sau thì phải đóng trước. Ví dụ: <p> <a href= contact.html >Giới thiệu</a> </p> 3.Chú thích trong HTML  4.Một số HTML Element cơ bản <html> </html> Một tài liệu HTML bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ đóng </html> <head> </head> Được đặt ngay sau thẻ mở <html>, chứa các khai báo cho tài liệu HTML: tiêu đề, các tập tin JavaScript, các đoạn JavaScript, các tập tin định dạng, <title>tiêu đề</title> Tạo tiêu đề (được hiển thị trên thanh tiêu đề của Web Browser) cho tài liệu HTML. Được đặt bên giữa thẻ mở <head> và thẻ đóng </head> <meta /> <meta name= keyword content= các từ khóa /> Tạo từ khóa cho phép trang web được tìm thấy bởi bộ máy tìm kiếm <meta name= description content= nội dung mô tả /> Tạo nội dung mô tả cho trang web giúp trang web được tìm thấy bởi bộ máy tìm kiếm Giáo trình Thiết kế web Trang 27

7.Tạo danh sách đánh số thứ tự <ol> </ol> HTML Element liên quan: <li>nội dung</li>: một mục trong danh sách 8.Thuộc tính của HTML Element Các thuộc tính được đặt trong thẻ mở của HTML Element style: định dạng cho nội dung bên trong style= các thông số định dạng margin: top, right, bottom, left Xác định vị trí biên cho nội dung padding: top, right, bottom, left Xác định khoảng cách giữa biên với nội dung border: kích cỡ, màu, kiểu Định dạng đường viền xung quanh biên font-family: font chữ font-size: kích cỡ chữ color: màu chữ float: name: khai báo tên, được dùng trong form id: khai báo định dạnh, được sử dụng trong JavaScript Ngoài ra, còn có một số thuộc tính khác tùy thuộc vào từng HTML Element Giáo trình Thiết kế web Trang 29