Tải bản đầy đủ

Thiet ke web 2

MỤC LỤC
NỘI DUNG

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


Link font: Chọn font chữ cho văn bản liên kết
Size: Chọn kích tước chữ cho văn bản liên kết
Link color: Chọn màu mặc định cho văn bản liên kết
Rollover link: Chọn màu cho văn bản liên kết khi rê chuột đến
Visited links: Chọn màu mặc định cho văn bản liên kết đã được click
Active links: Chọn màu mặc định cho văn bản liên kết hiện tại
Underline style: Chọn định dạng gạch chân cho văn bản liên kết
Always underline: định dạng gạch chân
Nerver underline: không gạch chân
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
o
o
o
o
o
o
o
o
o

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ẻ ..., 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
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ẻ
đã được khai báo ở
đầu file css với các thuộc tính như sau:
Code:
#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ẻ
với
các thuộc tính.
Code:
#vidu {
width: 400px;
background-color: #CC0000;
}
Sau đoạn khai báo này thì thẻ
sẽ có thuộc tính:
Code:
#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).
Code:
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
Code:
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


Code:
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.
Code:
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ẻ .... Ta có cú pháp như sau:
Code:


medial="all" />




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:
Code:
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ẻ

Có một số trình duyệt cũ sẽ không hiểu thẻ

3. Chèn trực tiếp vào thẻ của HTML(inline style)
Inline style được sử dụng nhiều trong trường hợp một thẻ HTML nào đó cần có style riêng
cho nó.
Inline style được áp dụng cho chính thẻ HTML đó, cách này sẽ có độ ưu tiên lớn nhất so với
hai cách trên. Dưới đây là một ví dụ mà chúng ta dùng Inline style
Code:


This is a paragraph


4. Nhiều Stylesheet
Trong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với
nhau. Giả sử như sau:
Code:
h1, h2, h3 {
margin-left: 10px;
font-size: 150%;
...
}
Giống đoạn mã trên thì cả ba thẻ h1, h2, h3 đều có cùng 3 thuộc tính như trên.
D: Các vấn đề về văn bản và cách định dạng văn bản
Thuộc tính CSS text cho phép bạn hoàn toàn có thể quản lí được các thuộc tính của văn bản,
bạn có thể quản lí được sự ẩn hiện của nó, thay đổi màu sắc, tăng hoặc giảm khoảng cách
giữa các ký tự trong một đoạn, căn chỉnh việc dóng hàng (align),...
Các thuộc tính của text mà CSS hỗ trợ
Đặt màu cho một đoạn văn bản
Để đặt màu cho một đoạn văn bản chúng ta có thể dùng thuộc tính: color: #mã màu;
Code:
p{
color: #333333;
Giáo trình Thiết kế web

Trang 20


}
Đặ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;
Code:
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;
Code:
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.
Code:
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í;
Code:
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;
Code:
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.
Code:
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ữ;
Code:
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;
Code:
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;
Code:
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ị;
Code:
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:
Mã: Chọn tất cả

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

4. Xác định JavaScript là ngôn ngữ sẽ được viết bên trong tag

5. Viết code JavaScript xuất chuổi “Hello Zend.vn”
Mã: Chọn tất cả
Giáo trình Thiết kế web

Trang 23





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:
Mã: Chọn tất cả
// -->
Ví dụ cụ thể:
Mã: Chọn tất cả




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

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×