THIEÁT KEÁ WEBdulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/... · o HTML: Ngôn ng ữ...

THIEÁT KEÁ WEBTHIEÁT KEÁ WEBTHIEÁT KEÁ WEBTHIEÁT KEÁ WEB

Lưu hành nội bộ 2010

Tài liệu tham khảo Môn Thiết kế Web

Trang 2

MỤC LỤC

CHƯƠNG 1. KHÁI QUÁT CHUNG VỀ INTERNET................................................................................ 4

CHƯƠNG 2. CÁC BƯỚC THIẾT KẾ WEB ............................................................................................ 7

2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾ ................................................................................. 8

2.2 CHIẾN LƯỢC THIẾT KẾ .............................................................................................................. 9

2.3 THIẾT KẾ GIAO DIỆN .................................................................................................................. 9

BÀI THỰC HÀNH CHƯƠNG 2 ............................................................................................................. 17

CHƯƠNG 3. HTML CĂN BẢN ............................................................................................................. 18

3.1 CÁC THẺ ĐỊNH DẠNG CẤU TRÚC DỮ LIỆU............................................................................ 19

3.1.1 HTML ................................................................................................................................... 19

3.1.2 HEAD ................................................................................................................................... 19

3.1.3 TITLE ................................................................................................................................... 19

3.1.4 BODY................................................................................................................................... 19

3.2 CÁC THẺ ĐỊNH DẠNG KHỐI ..................................................................................................... 20

3.2.1 THẺ P .................................................................................................................................. 20

3.2.2 CÁC THẺ ĐỊNH DẠNG ĐỀ MỤC H1/H2/H3/H4/H5/H6....................................................... 20

3.2.3 THẺ XUỐNG DÒNG BR...................................................................................................... 21

3.2.4 THẺ PRE ............................................................................................................................. 21

3.3 CÁC THẺ ĐỊNH DẠNG DANH SÁCH......................................................................................... 21

3.3.1 DANH SÁCH THÔNG THƯỜNG ........................................................................................ 21

3.4 CÁC THẺ ĐỊNH DẠNG KÝ TỰ ................................................................................................... 22

3.4.1 CÁC THẺ ĐỊNH DẠNG IN KÝ TỰ ....................................................................................... 22

3.4.2 CĂN LỀ VĂN BẢN TRONG TRANG WEB.......................................................................... 23

3.4.3 CÁC KÝ TỰ ĐẶC BIỆT........................................................................................................ 24

3.4.4 SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ CÁC TRANG WEB ........................................... 24

3.4.5 CHỌN KIỂU CHỮ CHO VĂN BẢN...................................................................................... 26

3.4.6 KHÁI NIỆM VĂN BẢN SIÊU LIÊN KẾT ............................................................................... 26

3.4.7 ĐỊA CHỈ TƯƠNG ĐỐI ......................................................................................................... 27

3.4.8 KẾT NỐI MAILTO ................................................................................................................ 28

3.4.9 VẼ MỘT ĐƯỜNG THẲNG NẰM NGANG........................................................................... 28

3.5 CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH.................................................................................. 29

3.5.1 GIỚI THIỆU ......................................................................................................................... 29

3.5.2 ĐƯA ÂM THANH VÀO MỘT TÀI LIỆU HTML..................................................................... 30

3.5.3 CHÈN MỘT HÌNH ẢNH, MỘT ĐOẠN VIDEO VÀO TÀI LIỆU HTML .................................. 30

3.6 CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU .......................................................................................... 31


CHƯƠNG 4. CSS (Cascading Style Sheets) ..................................................................................... 46

4.1 KHÁI NIỆM CSS ......................................................................................................................... 47

4.1.1 CSS là gì?............................................................................................................................ 47

4.1.2 Tại sao CSS?....................................................................................................................... 47

4.1.3 Học CSS cần những gì?...................................................................................................... 47


Trang 3

4.1.4 Cú pháp CSS....................................................................................................................... 48

4.1.5 Đơn vị CSS.......................................................................................................................... 49

4.1.6 Vị trí đặt CSS ....................................................................................................................... 50

4.1.7 Sự ưu tiên: ........................................................................................................................... 52

4.2 MỘT SỐ ĐẶC TÍNH CƠ BẢN VỀ CSS....................................................................................... 54

4.2.1 Thuộc tính Border trong CSS .............................................................................................. 54

4.2.2 Thuộc tính Font trong CSS.................................................................................................. 56

4.2.3 Thuộc tính List trong CSS.................................................................................................... 58

4.2.4 Thuộc tính Text trong CSS .................................................................................................. 59

4.2.5 Thuộc tính Padding trong CSS............................................................................................ 60

4.2.6 Thuộc tính Background trong CSS...................................................................................... 60

4.2.7 Thuộc tính Margin trong CSS .............................................................................................. 61


CHƯƠNG 5. THIẾT KẾ WEB DÙNG FORM VÀ JAVASCRIPT.......................................................... 69

5.1 HTML FORM............................................................................................................................... 70

5.1.1 TẠO FORM.......................................................................................................................... 70

5.1.2 TẠO MỘT DANH SÁCH LỰA CHỌN .................................................................................. 70

5.1.3 TẠO HỘP SOẠN THẢO VĂN BẢN...................................................................................... 71

5.2 CĂN BẢN VỀ NGÔN NGỮ JAVASCRIPT.................................................................................. 71

5.2.1 Tổng quan Java Script......................................................................................................... 71

5.2.2 Sự kiện trong html và java script ......................................................................................... 73


CHƯƠNG 6. THIẾT KẾ WEB SỬ DỤNG DREAMWEAVER ............................................................... 95

6.1 ĐỊNH DẠNG WEBPAGE............................................................................................................. 96

6.2 TABLE......................................................................................................................................... 97

6.3 FORM.......................................................................................................................................... 97

6.4 LAYER....................................................................................................................................... 102

6.5 FLASH BUTTON, FLASH TEXT, ROLLOVER IMAGES, JUMP MENU .................................. 104

6.6 BỔ SUNG MULTIMEDIA CHO TRANG WEB (ÂM THANH, PHIM ẢNH) ................................ 107

6.7 FRAMESET............................................................................................................................... 109

6.8 CASCADE STYLE SHEET- TEMPLATE .................................................................................. 111

BÀI THỰC HÀNH CHƯƠNG 6 ........................................................................................................... 114

CHƯƠNG 7. ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE ............................................................................. 126

7.1 ĐĂNG KÝ HOST ....................................................................................................................... 127

7.2 THIẾT KẾ MỘT SỐ WEBSITE MẪU ........................................................................................ 128


Trang 4

CHCHCHCHÖÔÖÔÖÔÖÔNGNGNGNG 1 1 1 1 KHÁI QUÁT CHUNG VỀ INTERNET

Tóm tắt

Mục tiêu Các mục chính Bài tập

bắt buộc

Bài tập

làm thêm

Kết thúc bài học này

cung cấp học viên kiến

thức về mạng Internet …

- Khái niệm mạng Internet

- Các dịch vụ cơ bản : www, ftp,

email,…


Trang 5

Mạng là một nhóm các máy tính kết nối với nhau. Internet là mạng của các mạng. Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất cả các máy tính trên thế giới.

Hình 1.1: Internet

World Wide Web là một tập con của Internet. Nó bắt đầu như là đề án nghiên cứu cấp quốc gia tại phòng nghiên cứu CERN ở Thụy Sĩ. Ngày nay, nó cung cấp thông tin cho người dùng trên toàn thế giới.

WWW hoạt động dựa trên 3 cơ chế để đưa các tài nguyên có giá trị đến với người dùng. Đó là:

o Giao thức: Người dùng tuân theo các giao thức này để truy cập tài nguyên trên Web. HyperText Transfer Protocol(HTTP) là giao thức được WWW sử dụng.

o Địa chỉ: WWW tuân theo một cách thức đặt tên thống nhất để truy cập vào các tài nguyên trên Web. URL được sử dụng để nhận dạng các trang và các tài nguyên trên Web.

o HTML: Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử dụng để tạo các tài liệu có thể truy cập trên Web. Tài liệu HTML được tạo ra bằng cách sử dụng các thẻ và các phần tử của HTML. File được lưu trên Web server với đuôi .htm hoặc .html.

Khi bạn sử dụng trình duyệt để yêu cầu một số thông tin nào đó, Web server sẽ đáp ứng các yêu cầu đó. Nó gửi thông tin được yêu cầu đến trình duyệt dưới dạng các trang web. Trình duyệt định dạng thông tin do máy chủ gửi về và hiển thi chúng.


Trang 6

Hình 1.2: Trình duyệt yêu cầu đến máy chủ

Hình 1.3: Một số trình duyệt phổ dụng


Trang 7

CHÖÔCHÖÔCHÖÔCHÖÔNG NG NG NG 2222

CÁC BƯỚC THIẾT KẾ WEB

Tóm tắt


bắt buộc

Bài tập

làm thêm


cung cấp học viên kiến

thức về các bước khi

thiết kế một Website …

2.1 Mục tiêu của website

cần thiết kế

2.2 Chiến lược thiết kế

2.3 Thiết kế giao diện

Dựa vào bài tập

trong phần cuối

Chương 2.


trong phần cuối

Chương 2.


Trang 8

2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾ

Phác thảo mục tiêu, ý tưởng sẽ giúp bạn sẽ không chỉ học được làm thế nào để tạo một website mà còn tạo ra sự thành công về mặt tài chính trong khi cung cấp nội dung giá trị và đổi mới tới các khách hàng của bạn.

Bước 1: Nội dung trang web của bạn là gì?

Bạn có thể nghĩ về câu hỏi này quá nhiều tới mức bạn có thể có được câu trả lời rất rõ ràng. Nhưng chức năng và cảm nhận về trang web phải phù hợp với nội dung. Bố cục và chức năng của trang web dễ thực hiện hơn khi bạn hiểu tường tậng về nội dung trang web của mình.

Bước 2: Hãy chú trọng vào bố cục và tính thiết thực của trang web

Hãy ưu tiên thanh toán cho bất kỳ những gói hosting (lưu trữ website) hoặc các chiến dịch quảng cáo, cũng như có một cái nhìn tổng thể về nội dung trang web sẽ là gì và được thể hiện như thế nào. Điều gì sẽ là ý tưởng chính trên trang web của bạn? Nó sẽ được thảo luận như thế nào? Bạn có thể chọn bổ sung cho chủ đề của mình qua những bài báo, các blog, hoạt ảnh, hình ảnh hoặc là sự kết hợp của tất cả những cái này.Nó có phải là định dạng phù hợp mà bạn muốn sử dụng cho nội dung trang web không? Bạn có thể tạo một website như thế nào để sẽ thu hút được độc giả theo mong đợi của mình?

Bước 3: Hãy tìm một dịch vụ hosting có thể cung cấp tất cả tính năng mà bạn cần

Từ những điều đã nói ở trên, bạn nên có một danh sách đầy đủ các chức năng bạn cần như: mẫu thư điện tử, khảo sát và bình chọn, thư viện ảnh, thông tin phải đăng nhập, các blog và cả những tính năng khác. Hãy nghiên cứu kỹ các gói hosting và tìm lấy một gói chào hàng cho mọi thứ bạn cần. Nếu bạn không chắc chắn làm thế nào để tạo một website thì hãy tìm kiếm một máy chủ có hệ thống hỗ trợ vững chắc, hoặc nhờ hỗ trợ kỹ thuật chính thức hoặc các diễn đàn tích cực.

Bước 4: Đừng để bất cứ ai truy cập vào trang web của bạn khi nó chưa thực sự sẵn sàng

Mọi người ghét điều hướng truy cập tới một trang xuất hiện banner “đang triển khai”. Thông thường, một trang đang triển khai thì không bao giờ hoàn tất và nó gần như bị bỏ quên. Bởi hầu hết mọi người không trở lại nhìn khi các trang “đang triển khai” đó nữa dù nó đã được hoàn tất.

Bước 5: Hãy đảm bảo trang web của bạn được truy cập nhiều khi nó thực sự sẵn sàng.

Bạn không chỉ cần nghĩ xem làm thế nào để thiết kế website tốt nhất, mà còn làm thế nào để tiếp thị được một website tới độc giả theo mong đợi của mình. Hãy hoạch định làm thế nào bạn sẽ sử dụng những cơ hội tiếp thị miễn phí chẳng hạn như các diễn đàn, các liên kết tương hỗ cũng như có được các blogger đến với trang web của bạn. Hãy tạo thêm một kế hoạch nữa cho các chương trình quảng cáo được thanh toán mà chính chúng sẽ giúp duy trì ngân sách cho bạn.


Trang 9

2.2 CHIẾN LƯỢC THIẾT KẾ

Bất cứ điều gì bạn đang cố gắng để tiến hành thiết kế website, cho dù nếu là quảng cáo cho công ty hay bán sản phẩm thì mục tiêu chính vẫn là giành được lưu lượng truy cập Khi thiết kế một trang web mới cho công ty, dù website đó lớn hay nhỏ thì điều quan trọng là khiến mọi người luôn trở lại với trang web của bạn. Quan điểm của mỗi người về một website hiệu quả có sự khác nhau. Một số người có thể quan trọng về giao diện web trong khi những người khác lại quan tâm đến sự tiện ích nhiều hơn. Nếu bạn có thể đáp ứng được những tiêu chí sau thì trang web của bạn thật đã có sự vượt trội trong rừng website.

Giao diện website

Không ai muốn nhìn một website có giao diện kém thu hút nhưng nếu nó quá sặc sỡ thì cũng khiến khách truy cập rời bỏ. Việc tìm thấy một sự hài hoà tốt giữa chúng là chìa khoá để có bản thiết kế website hiệu quả. Màu sắc có thể được sử dụng để thể hiện cảm xúc tình cảm của con người cũng như có thể khuyến khích họ mua hàng. Các nhà thiết kế web chuyên nghiệp đã sử dụng tâm lý màu nhằm truyền tải những lời thông điệp khác nhau tới người dùng. Một bản thiết kế đừng nên quá phức tạp hay khó hiểu và cũng nên phù hợp với loại hình kinh doanh cũng như sản phẩm hoặc dịch vụ mà bạn mời chào.

Mục đích trang web

Trước khi phát triển một trang web bạn cần phải đặt ra các mục tiêu và hãy tự hỏi bản thân rằng bạn muốn mọi người có được lợi ích như thế nào từ trang web của bạn. Nội dung của website nên luôn được cập nhật. Rất dễ nhận thấy khi website chưa được cập nhật. Điều này có phản ánh không hay về công ty bởi vì trang chủ như là bản tóm tắt chung nội dung website. Bạn cũng cần có một nội dung website phản ánh được mục tiêu chính và những gì bạn đang cố gắng làm.

Tính tiện ích

Internet cung cấp vô vàn thông tin nên khó giành được sự chú ý của mọi người cũng như giữ họ trên trang web của bạn. Một trong những điều khiến người truy cập hay rời bỏ nhất là tiện ích nghèo nàn. Một trang web cần được đơn giản và dễ sử dụng. Điều hướng nên dễ dàng truy cập tới được mọi trang trên website. Khách truy cập sẽ không bao giờ phải kích chuột nhiều hơn 4 lần để vào một trang cụ thể. Một quy tắc chung của hầu hết các chuyên gia thiết kế web là không nên để khách truy cập nhấp chuột quá 2 lần khi truy cập tới bất kỳ trang nào trên website. Cấu trúc điều hướng phức tạp sẽ nhanh chóng làm mất khách truy cập và họ sẽ rời bỏ nếu họ không thể tìm thấy những điều mà họ đang tìm kiếm. Bạn hãy nhớ đến một điều nữa là các nhà cung cấp dịch vụ của bạn.

2.3 THIẾT KẾ GIAO DIỆN


Trang 10

Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng cho mình. Bạn cũng có chút khiếu về thẩm mỹ và cũng biết đôi chút về việc thiết kế web, nhưng bạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh

Đi tìm cảm hứng và hình thành ý tưởng (phần 1)

Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng cho mình. Bạn cũng có chút khiếu về thẩm mỹ và cũng biết đôi chút về việc thiết kế web, nhưng bạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh. Đã mấy lần bạn ngồi trước máy tính, quyết định sẽ làm cho mình một trang web - để rồi cả mấy tiếng sau vẫn chưa làm được gì? Bạn thật sự chẳng biết phải bắt đầu từ đâu cả…

Trong mọi việc, bước đầu tiên bao giờ cũng là bước khó nhất. Điều đó càng đúng với nếu bạn chưa có kinh nghiệm và không biết gì nhiều về những việc mà mình sẽ làm. Trong bài viết này sẽ giúp bạn trả lời một một câu hỏi rất hay thường gặp ở những người mới bắt đầu làm thiết kế web là làm thế nào để lấy cảm hứng và ý tưởng của những trang web thiết kế đẹp mà bạn thích để tạo ra thiết kế riêng cho mình mà không rơi vào tình huống sao chép thiết kế của họ?

Tuy nhiên, phải nói trước, nếu bạn hi vọng đọc xong bài viết này sẽ giúp bạn thiết kế được một trang web hoàn chỉnh thì tôi e rằng sẽ làm bạn thất vọng. Trong bài viết, tôi sẽ giả định rằng các bạn đã có kiến thức về viết mã cho web cũng như đã sử dụng tương đối thành thạo một phần mềm đồ họa nào đó. Điều bạn cần chỉ là một hướng đi để bắt đầu - và tớ hi vọng từ những kinh nghiệm của mình sẽ giúp cho các bạn có được một hướng đi đúng.

Vậy bước đầu tiên sẽ là gì? Bước đầu tiên tuy khó để nghĩ ra, nhưng thường lại là bước dễ nhất và chẳng mấy ngạc nhiên một khi bạn đã biết về nó:

Bước 1: Tìm nguồn cảm hứng

Quá trình này trong thuật ngữ của dân thiết kế gọi là “get inspired”. Việc có được cảm hứng là một điều rất quan trọng trong những ngành nghệ thuật liên quan đến quá trình sáng tạo. Trong âm nhạc, nguồn cảm hứng có thể là từ một cảm xúc chợt đến trong một buổi chiều; Trong thơ, nó có thể bắt nguồn từ một cảnh quang thiên nhiên. Còn trong thiết kế, nguồn cảm hứng đến từ … những thiết kế khác. Chính vì vậy, không giống như trong thơ và nhạc việc tìm được nguồn cảm hứng thường đến một cách ngẫu nhiên và có phần may mắn, trong thiết kế, bạn có thể tự mình đi tìm nguồn cảm hứng. Hãy vào các trang sưu tầm và giới thiệu các thiết kế đẹp như CSSBeauty, CSS Vault, Design Shake và bạn sẽ thấy có rất nhiều thiết kế rất đẹp từ khắp nơi trên thế giới. Một vài điều đáng chú ý:

• Hãy chụp và lưu lại màn hình của các trang web mà bạn thích vào một thư mục trên máy tính. Các trang gallery thường để hình ảnh thu nhỏ và thường không có mấy tác dụng trong việc giúp bạn thấy được cái đẹp của thiết kế. Việc lưu lại hình ảnh ở độ phân giải thực không những sẽ đem lại cho bạn sự chi tiết mà còn giúp bạn xem lại những thiết kế này dễ dàng hơn về sau mà không cần phải mở trình duyệt ra.

• Ở bước này, bạn không cần phải nghĩ về thiết kế “tương lai” của mình mà hãy cứ việc dạo quanh một vòng và thưởng thức những thiết kế của người khác. Tuy nhiên, bạn cần xác định rõ trang web mà mình sẽ thiết kế là thuộc phân mục nào. Có rất nhiều


Trang 11

thiết kế đẹp, nhưng không phải thiết kế nào cũng phù hợp với mục đích của bạn. Ví dụ như phong cách thiết kế của một trang web doanh nghiệp sẽ không phù hợp với một trang blog cá nhân. Việc xác định rõ ngay từ đầu sẽ giúp bạn bỏ qua rất nhanh những thiết kế không phù hợp (những gallery ở trên thường có đến hàng trăm thiết kế, việc ngồi xem hết từng cái là không thể).

Nếu bạn xác định rằng mình đang thiết kế giao diện cho blog, bạn sẽ dễ dàng bỏ qua những thiết kế như bên phải, trong khi dành nhiều chú ý hơn đến những thiết kế cho phép nhiều không gian để hiển thị bài viết như trong hình bên trái.

• Đừng ngồi quá lâu để xem cùng một lúc. Hãy dành thời gian làm việc khác, để hôm sau xem tiếp. Lý do là thường thì một khi xem quá lâu, càng về sau bạn sẽ càng cảm thấy mệt mỏi và khi đó dường như mọi thiết kế đều trở nên “nhàm nhàm” giống như nhau - mặc dù nếu bạn xem nó ngay từ lúc đầu thì bạn lại thấy nó đẹp. Vì vậy, sẽ là lý tưởng nếu mỗi ngày bạn chỉ xem vài ba thiết kế và đó là lý do tại sao bạn nên có thói quen sưu tầm thiết kế đẹp mỗi ngày - để đến lúc cần thì đã có sẵn những thiết kế mà bạn thích. Nếu bạn xác định mình sẽ đi theo nghề thiết kế web, đó là một thói quen nên học.

Vậy khi nào thì bạn nên dừng lại? Khi nào thì bạn biết rằng mình đã tìm được nguồn cảm hứng? Rất khó để trả lời được câu hỏi này. Sẽ có những lúc mà bạn bắt gặp một trang web quá đẹp mà bạn chỉ muốn dừng lại và bắt tay ngay vào việc thiết kế một trang web tương tự. Nhưng trừ khi bạn muốn sao chép nguyên xi thiết kế của họ (mà như vậy thì đã chẳng gọi là thiết kế), cảm hứng từ một thiết kế như vậy sẽ không đủ để giúp bạn có thể làm nên thiết kế của riêng mình - mặc dù bạn có thể chắc chắn là thiết kế đó sẽ đóng vai trò rất quan trọng ảnh hưởng đến thiết kế của bạn. Vậy nên, lời khuyên của tôi là hãy chỉ dừng lại khi:

• Bạn đã có được ít nhất 10 - 20 thiết kế mà bạn cảm thấy đẹp và phù hợp với trang web của mình


Trang 12

• Có ít nhất một trang thiết kế mà nó khiến bạn chỉ muốn copy nguyên xi của nó về (dù rằng mục đích của bạn không phải là như vậy)

Khi đó, bạn có thể bắt đầu chuyển sang bước thứ 2:

Bước 2: Định hình ý tưởng

Sau khi đã chọn được khoảng 10-20 thiết kế trong bước 1 và bước đầu có cái “cảm hứng” để quyết định sẽ thiết kế cho riêng mình một trang web, bạn sẽ cần phải định hình ý tưởng cho trang web của mình. Hãy ngồi duyệt lại những ảnh chụp trang web mà bạn đã lưu vào máy trong bước 1:

• Cách tốt nhất trong quá trình này là dùng tính năng Slideshow của phần mềm quản lý ảnh (ví dụ như Picasa) vì nó sẽ chỉ hiển thị một ảnh trên toàn màn hình (giúp bạn đỡ bị phân tán) cũng như nó cho phép bạn nhanh chóng chuyển qua những hình khác.

Xem giao diện toàn màn hình sử dụng tính năng slideshow của Picasa giúp bạn tránh bị phân tán.

• Ghi chú xuống một mảnh giấy nhỏ những điểm mà bạn thích về một thiết kế mà bạn nghĩ rằng mình muốn có trong thiết kế của mình. Điều rất quan trọng là bạn hãy để ý đến ý tưởng chứ không phải chi tiết của thiết kế. Điều đó có nghĩa là bạn nên ghi lại ý tưởng sử dụng mây làm hình ảnh ở đầu trang và cỏ ở cuối trang tạo cảm giác về không gian, nhưng bạn không nên copy hình ảnh mà họ sử dụng. Những gì bạn cần đề ý: cách sử dụng màu sắc, hình thức bố cục, cách sắp xếp nội dung, và thậm chí cách cách mà họ làm viền cho hình ảnh,… Những gì bạn không nên để ý: trang web đó sử dụng hình ảnh cụ thể gì, màu sắc cụ thể cho tiêu đề của bài viết,…


Trang 13

Bạn thấy gì từ một trong những thiết kế ban đầu của trang web All Women’s Talk? Một vài điểm cần ghi lại: cách sử dụng màu đơn và cách họ chọn màu thể hiện nội dung nữ tính của trang web. Bạn cũng có thể ghi lại cách mà họ đặt chủ đề của bài viết ngay trước tiêu đề của bài viết và làm nổi bật nó bằng cách tô màu nền cho nó. Cái cách mà họ chia diện tích trang web thành 2 nữa - một để liệt kê những bài viết chính và bên kia để hiển thị danh sách các bài nổi bật và danh sách phân mục. Những gì bạn không nên chép lại: hình ảnh bông hoa họ sử dụng trong hầu như tất cả các thành phần trên trang web.

Sau bước này, bạn sẽ có một ý tưởng tương đối rõ ràng (ít ra là không mơ hồ không xác định như trước) về trang web của mình. Trang web sẽ có thiết kế đơn giản và sạch sẽ hay là nó sẽ sử dụng nhiều hình ảnh đồ họa? Bạn sẽ sử dụng nhiều màu sắc tạo cảm giác tươi trẻ hay sẽ chọn tông màu đơn lẻ mà sang trọng? Trang web sẽ có bố cục 3 cột hay 2 cột? Bạn thâm chí sẽ xác định được những câu hỏi tương đối chi tiết như liệu mình sẽ sử dụng hình ảnh vector hay sẽ sử dụng ảnh chụp để làm trang trí?

Đừng quá lo lắng về việc liệu bạn có đang copy thiết kế của người khác hay không. Miễn là bạn không có ý định đó và bạn có ít nhất 10 - 20 thiết kế để tham khảo thì tôi đảm bảo khi bắt đầu đi vào thiết kế bạn sẽ không gặp phải trường hợp bạn copy thiết kế của người khác. Bạn sẽ ngạc nhiên khi sang bước 4, khi mà bạn bắt đầu xây dựng mẫu cho thiết kế của mình, những ý tưởng ban đầu mà bạn ghi chép lại ở bước này sẽ tự biến đổi thành thiết kế của riêng bạn.

Kết thúc (Phần 1)

Tất nhiên, không phải cứ là thiết kế đẹp thì nhất thiết nó sẽ phù hợp với nội dung của bạn. Trong bài kế tiếp, tớ sẽ thảo luận về việc kết hợp giữa nội dung và thiết kế, cũng như một vài kinh nghiệm trong việc bắt đầu xây dựng mẫu (”prototype”) cho thiết kế của mình.


Trang 14

Xây dựng khung nội dung (Phần 2)

Nhắc lại

Trước khi bắt đầu, sẽ không là thừa để nhắc lại những gì chúng ta đã có được từ những bước trước đó.

Cảm hứng

Ở bước 1 - sau khi xem những thiết kế của người khác, bạn đã bắt đầu có được cái “hứng” để xây dựng một trang web cho riêng mình. Một lần nữa không thể không nhắc lại tầm quan trọng của “cảm hứng”. “Cảm hứng” không thể tự nhiên xuất hiện chỉ vì bạn xác định rằng mình cần có một trang web riêng, mặc dù đó chính là lý do khiến bạn đi tìm cảm hứng. Không giống như trong các lĩnh vực nghệ thuật khác bạn vốn không biết được khi nào thì cảm hứng sẽ đến với mình, trong thiết kế bạn hoàn toàn có thể thực hiện quá trình gọi là “đi tìm cảm hứng” mà tôi đã mô tả ở trên.

“Cảm hứng” là gì? Đó là một sự thôi thúc mà một khi cảm nhận được nó, bạn chỉ muốn bắt tay vào làm ngay và ước như đừng có gì làm gián đoạn quá trình đó. Một khi bạn đã có được cái gọi là “cảm hứng” đó thì mọi thứ dường như đều tự nhiên xuất hiện - như nó đã có sẵn từ trước đó vậy. Bạn hoàn toàn có thể đánh mất cái cảm hứng của mình một cách nhanh chóng - và điều này rất thường hay xảy ra nếu như bạn bị gián đoạn giữa bước 1 và bước 2 và thậm chí đôi khi là giữa quá trình thiết kế chi tiết. Tôi sẽ nói thêm về điều này ở sau, nhưng điều quan trọng bạn nên nhớ là bạn hoàn toàn có thể tìm lại được nó với một chút thời gian tạm xa nó rồi quay lại bước 1.

Ý tưởng

Từ những trang web mà bạn đã xem, bước đầu bạn đã ghi nhận những điểm mà mình muốn thiết kế của mình thể hiện. Mặc dù bạn có thể không nhận ra, chính trong quá trình xem và chọn lọc những điểm nhấn mà bạn thích từ những thiết kế của người khác, bạn đã tự mình khám phá chính mình. Tại sao bạn thích và ghi lại cái cách phối màu mà trang AllWomenTalks sử dụng? Tôi có thể tự tin để khẳng định rằng bạn là một cô gái với một tâm hồn lãng mạn, nữ tính và thậm chí… thích sử uỷ mị.

Bước 3: Xây dựng khung nội dung


Trang 15

Thế nào gọi là xây dựng khung nội dung? Đó là quá trình đi tìm câu trả lời cho câu hỏi - nếu nhìn từ xa, bố cục trang web của bạn sẽ trông như thế nào. Thuật ngữ trong thiết kế thường gọi quá trình này là “prototyping” - tức xây dựng mô hình mẫu. Một bức hình có thể thay vạn lời giải thích - đây là cái gọi là “khung nội dung”.

Mục đích của việc thiết kế khung giao diện không phải là để tạo ra giao diện - bạn đơn giản là tạo một mô hình “thô” của giao diện. Bạn không cần quan tâm về màu sắc. Bạn cũng không cần quan tâm về những biểu tượng cụ thể được sử dụng là gì. Nói tóm lại, bạn không phải quan tâm về những chi tiết nhỏ của thiết kế mà chỉ cần tập trung vào bức tranh tổng thể của trang web (tưởng tượng nếu bạn đứng cách xa màn hình 5 mét và nhìn trang web của mình sẽ như thế nào - chắc chắn bạn sẽ không thấy cụ thể nội dung mà chỉ thấy bố cục của nó).

Nếu theo đúng bài bản, việc thiết kế khung nội dung đòi hỏi bạn phải trải qua một quá trình phân tích và tìm hiểu rất chi tiết về nội dung và tương tác thực tế với người dùng - như cái cách mà 37 Signals giới thiệu về quá trình họ thiết kế một mẫu hiển thị thông tin đơn giản của hệ thống. Tuy nhiên, việc áp dụng một quá trình “khoa học” như vậy có lẽ là không phù hợp với phần lớn những trang web nhỏ và đôi khi khiến người thiết kế mới bắt đầu rất nản và có xu hướng bỏ qua khi không thấy được hiệu quả trực tiếp của nó. Vậy nên tôi sẽ tóm tắt nó thành 2 bước chính:

• Xác định và phân loại nội dung sẽ xuất hiện. Ví dụ như nếu đó là một trang blog thì thường sẽ có những đối tượng chính sau: Tiêu đề, danh sách các phân mục, cột nội dung bài viết, các liên kết bạn bè. Tuỳ theo mục đích cụ thể, bạn có thể có thêm những đối tượng nội dung khác - ví dụ như những phản hồi gần đây nhất, cột ghi chép nhanh,…

• Sắp xếp những đối tượng nội dung này theo từng khối.


Trang 16

Một trong những quyết định quan trọng nhất mà bạn sẽ phải lựa chọn trong bước này chính là về bố cục trình bày thông tin - trang web sẽ được chia làm 1 cột, 2 cột hay 3 cột (phổ biến với các trang nội dung). Kinh nghiệm của tôi cho thấy rằng dường như tất cả các thiết kế trang web nội dung đều bắt đầu từ quyết định lựa chọn số cột để trình bày nội dung và nó sẽ ảnh hưởng rất nhiều đến những quyết định cụ thể sau đó. Thông thường thì thông tin này sẽ được hình thành từ 2 bước trước đó - nhưng nếu bạn đã có sẵn ý tưởng từ trước về bố cục giao diện thì bạn vẫn có thể hoàn toàn thực hiện nó trước. Để giúp các bạn có thêm thông tin trước khi lựa chọn - đặc biệt là nếu bạn thiết kế cho blog của mình - bạn có thể thử trả lời câu hỏi Bạn đã có sẵn nhiều nội dung chưa?

Nếu bạn chỉ mới bắt đầu viết mà chọn cho mình một giao diện 3 cột sẽ khiến trang web của bạn trở nên trống trải. Trong tình huống đó, có lẽ bạn nên thử tìm một thiết kế đơn giản 2 cột trong thời gian tích luỹ nội dung - và đến khi đã có tương đối nhiều những bài viết thì bạn có thể chuyển sang giao diện 3 cột. Thực tế là nếu bạn thiết kế blog thì nên cực kỳ hạn chế việc sử dụng giao diện 3 cột ngay cả khi đã có nhiều nội dung. Với độ phân giải của màn hình ở Việt Nam phần lớn chỉ giới hạn ở 1024 x 768, bạn thường sẽ chỉ có tối đa là 950px bề rộng cho 3 cột. Trong blog, cột nội dung chính thường sẽ chiếm ít nhất một nủa bề rộng - tức bạn sẽ chỉ còn khoảng 400px cho 2 cột nội dung còn lại sau khi đã trừ đi các khoảng cách canh lề dừa các cột và với 2 cạnh của cửa sổ trình duyệt. Bạn có thể sẽ nhét được tiêu đề các danh mục và vài liên kết ngắn ở một trong 2 cột đó, nhưng chắc chắn phần còn lại sẽ không đủ để đưa các nội dung lớn.


Trang 17

Các trang chủ báo chí (như VietnamNet) có thể sử dụng giao diện 3 cột bởi họ chỉ cần đưa tiêu đề ngắn của các bản tin trong mỗi cột - nhưng điều đó không áp dụng được với những trang blog.

Để kết thúc, sau đây là một vài kinh nghiệm có thể giúp bạn trong quá trình này:

• Không dùng phần mềm để vẽ. Ở giai đoạn này, bạn cần có khả năng vẽ và xoá thật nhanh để chuyển hoá và thử nghiệm những ý tưởng nảy sinh trong quá trình này. Sử dụng phần mềm dù đơn giản và dễ sử dụng đến mấy cũng sẽ đòi hỏi bạn phải thực hiện nhiều thao tác kỹ thuật.

• Bạn có thể sử dụng bút chì, một cục tẩy và vài tờ giấy - nhưng tốt nhất theo tôi vẫn là có một tấm bảng và vài cây bút lông màu khác nhau. Không chỉ việc xoá và vẽ lại trên bảng dễ hơn rất nhiều so với trên giấy, tôi có cảm giác rằng khi bạn đang đứng và vẽ trên bảng, khả năng “sáng tạo” của bạn sẽ được tăng cường.

• Những thành phần duy nhất mà bạn cần vẽ có lẽ sẽ chỉ là những hình chữ nhật. Bạn biểu diễn danh sách phân mục bằng một cái hộp, cột nội dung bằng một cái hộp khác cao và to hơn,…

• Hãy để những bảng vẽ của bạn xuất hiện trước mắt bạn vài ngày. Điều này dễ thực hiện nếu bạn có một tấm bảng vẽ - chỉ cần bạn không xoá thì mỗi ngày dù đang làm việc khác bạn cũng sẽ thấy nó - và đôi khi trong những lúc không tập trung như vậy bạn sẽ có được những ý tưởng chỉnh sửa đáng giá.

• Mặc dù chỉ là bản vẻ khung thô, nhìn từ xa bạn phải cảm thấy được cái giao diện và hài lòng với nó. Nếu nhìn vào bố cục mà bạn cảm thấy còn hơi “khó chịu” thì chứng tỏ nó chưa đạt tiêu chuẩn về bố cục. Nên nhớ, mặc dù ở giao diện thực tế, người dùng sẽ không chỉ thấy nội dung như những cái hộp - nhưng trong tiềm thức của bộ não - nội dung sẽ được thể hiện như những cái hộp và nó đóng một phần rất quan trọng trong nhận thức của người dùng về giao diện để họ quyết định có thích nó hay không.

Nói chung là những quyết định mà bạn lựa chọn ở bước này mặc dù rất chung chung nhưng sẽ có ảnh hưởng rất lớn một khi bạn bắt đầu chuyển sang quá trình thiết kế chi tiết. Những bạn mới bắt đầu làm quen với việc thiết kế thường dễ dàng bỏ qua bước này bởi thấy nó không cần thiết, nhưng sự thật là nếu bạn làm tốt nó, những quyết định được đưa ra trong bước này sẽ giúp bạn giảm rất nhiều thời gian sắp xếp và chỉnh sửa trong quá trình thiết kế chi tiết. Còn nếu bạn đã có ý định phát triển theo hướng thiết kế giao diện người dùng (web hay ứng dụng phần mềm) thì có lẽ đây là một quá trình bắt buộc dù bạn có muốn hay không - hãy thực hành với những thiết kế nhỏ và đơn giản để tích luỹ kinh nghiệm cho mình.

BAØI THÖÏC HAØNH CHÖÔNG 2BAØI THÖÏC HAØNH CHÖÔNG 2BAØI THÖÏC HAØNH CHÖÔNG 2BAØI THÖÏC HAØNH CHÖÔNG 2 1. Hãy thiết kế khung mẫu cho những website trong đồ án. 2. Hãy thiết kế khung mẫu cho website thương mại. 3. Hãy thiết kế khung mẫu cho website giải trí. 4. Hãy thiết kế khung mẫu cho blog.


Trang 18


HTML CĂN BẢN

Tóm tắt


bắt buộc

Bài tập

làm thêm

Kết thúc bài học này cung

cấp học viên kiến thức về

các thẻ HTML căn bản

trong việc thiết kế giao

diện Web …

3.1 Các thẻ định dạng cấu trúc dữ liệu

3.2 Các thẻ định dạng khối

3.3 Các thẻ định dạng danh sách

3.4 Các thẻ định dạng ký tự

3.5 Các thẻ chèn âm thanh, hình ảnh

3.6 Các thẻ định dạng bảng biểu

Dựa vào bài

tập trong

phần cuối

Chương 3.

Dựa vào bài

tập trong

phần cuối

Chương 3.

Mục tiêu Các mục chính Bài tập bắt Bài tập làm buộc thêm


Trang 19

<HTML> ... Toàn bộ nội của tài liệu được đặt ở đây </HTML>

<TITLE>Tiêu đề của tài liệu</TITLE>

<BODY> .... phần nội dung của tài liệu được đặt ở đây </BODY>

3.1 CÁC THẺ ĐỊNH DẠNG CẤU TRÚC DỮ LIỆU

3.1.1 HTML

Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.

Cú pháp:

Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <HTML> như những tập tin văn bản bình

thường.

3.1.2 HEAD

Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.

Cú pháp:

3.1.3 TITLE

Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ

phạm vi giới hạn bởi cặp thẻ <HEAD>.

Cú pháp:

3.1.4 BODY

Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số của thẻ.

Cú pháp:

Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều

thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính:

<HEAD>

... Phần mở đầu (HEADER) của tài liệu được đặt ở đây </HEAD>


Trang 20

<HTML> <HEAD> <TITLE>Tiêu đề của tài liệu</TITLE> </HEAD> <BODY Các tham số nếu có> ... Nội dung của tài liệu </BODY> </HTML>

BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh. Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh.

BGCOLOR= Đặt màu nền cho trang khi hiển thị. Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị màu nền trước, sau đó mới tải ảnh lên phía trên.

TEXT= Xác định màu chữ của văn bản, kể cả các đề mục.

ALINK=,VLINK=,LINK= Xác định màu sắc cho các siêu liên kết trong văn bản. Tương ứng, alink (active link) là liên kết đang được kích hoạt - tức là khi đã được kích chuột lên; vlink (visited link) chỉ liên kết đã từng được kích hoạt;

Như vậy một tài liệu HTML cơ bản có cấu trúc như sau:

3.2 CÁC THẺ ĐỊNH DẠNG KHỐI

3.2.1 THẺ P

Thẻ <P> được sử dụng để định dạng một đoạn văn bản.

Cú pháp:

3.2.2 CÁC THẺ ĐỊNH DẠNG ĐỀ MỤC H1/H2/H3/H4/H5/H6

HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường.

<P>Nội dung đoạn văn bản</P>


Trang 21

Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:

<H1> ... </H1> Định dạng đề mục cấp 1






3.2.3 THẺ XUỐNG DÒNG BR

Thẻ này không có thẻ kết thúc tương ứng (</BR>), nó có tác dụng chuyển sang dòng mới. Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng.

Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ <BR>

3.2.4 THẺ PRE

Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ <PRE>. Văn bản ở

giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào, ví dụ dấu xuống

dòng trong đoạn văn bản giới hạn bởi thẻ <PRE> sẽ có ý nghĩa chuyển sang dòng mới (trình

duyệt sẽ không coi chúng như dấu cách)

Cú pháp:

3.3 CÁC THẺ ĐỊNH DẠNG DANH SÁCH

3.3.1 DANH SÁCH THÔNG THƯỜNG

Cú pháp:

Có 4 kiểu danh sách:

•` Danh sách không sắp xếp ( hay không đánh số) <UL>

• Danh sách có sắp xếp (hay có đánh số) <OL>, mỗi mục trong danh sách được

sắp xếp thứ tự.

• Danh sách thực đơn <MENU>

• Danh sách phân cấp <DIR>

<PRE>Văn bản đã được định dạng</PRE>

<UL> <LI> Mục thứ nhất <LI> Mục thứ hai </UL>


Trang 22

Với nhiều trình duyệt, danh sách phân cấp và danh sách thực đơn giống danh sách không đánh số, có thể dùng lẫn với nhau. Với thẻ OL ta có cú pháp sau:

trong đó:

TYPE =1 Các mục được sắp xếp theo thứ tự 1, 2, 3...

=a Các mục được sắp xếp theo thứ tự a, b, c...

=A Các mục được sắp xếp theo thứ tự A, B, C...

=i Các mục được sắp xếp theo thứ tự i, ii, iii...

=I Các mục được sắp xếp theo thứ tự I, II, III...

Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách.

Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục

trong danh sách. Thuộc tính này có thể nhận các giá trị : disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông).

3.4 CÁC THẺ ĐỊNH DẠNG KÝ TỰ

3.4.1 CÁC THẺ ĐỊNH DẠNG IN KÝ TỰ

Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.

<B> ... </B> <STRONG> ... </STRONG>

In chữ đậm

<I> ... </I> <EM> ... </EM>

In chữ nghiêng

<U> ... </U> In chữ gạch chân

<DFN> Đánh dấu đoạn văn bản giữa hai thẻ này là định nghĩa của một từ. Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó.

<S> ... </S>

<STRIKE> ... </STRIKE>

In chữ bị gạch ngang.

<BIG> ... </BIG> In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một. Việc sử dụng các thẻ <BIG>lồng nhau tạo ra hiệu ứng chữ tăng dần. Tuy nhiên đối với mỗi trình duyệt có

<OL TYPE=1/a/A/i/I> <LI>Muc thu nhat <LI>Muc thu hai <LI>Muc thu ba </OL>


Trang 23

giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ <BIG> sẽ không có ý nghĩa.

<SMALL> ... </SMALL> In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. Việc sử dụng các thẻ <SMALL>lồng nhau tạo ra hiệu ứng chữ giảm dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ <SMALL> sẽ không có ý nghĩa.

<SUP> ... </SUP> Định dạng chỉ số trên (SuperScript)

<SUB> ... </SUB> Định dạng chỉ số dưới (SubScript)

<BASEFONT> Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản. Thẻ này chỉ có một tham số size= xác định cỡ chữ. Thẻ <BASEFONT> không có thẻ kết thúc.

<FONT> ... </FONT> Chọn kiểu chữ hiển thị. Trong thẻ này có thể đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ. Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4...) so với font chữ hiện tại.

3.4.2 CĂN LỀ VĂN BẢN TRONG TRANG WEB

Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để

trang Web có được một bố cục đẹp. Một số các thẻ định dạng như P, Hn, IMG... đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các thẻ đó.

Các giá trị cho tham số ALIGN:

LEFT Căn lề trái

CENTER Căn giữa trang

RIGHT Căn lề phải

Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản.

Cú pháp:

<CENTER>Văn bản sẽ được căn giữa trang</CENTER>


Trang 24

3.4.3 CÁC KÝ TỰ ĐẶC BIỆT

Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem là một thực thể duy nhất. Ký tự ; được sử dụng để tách các ký tự trong một từ.

Ký tự Mã ASCII Tên chuỗi

< &#060 &lt

> &#062 &gt

& &#038 &amp

3.4.4 SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ CÁC TRANG WEB

Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau:

#RRGGBB

trong đó:

RR - là giá trị màu Đỏ.

GG - là giá trị màu Xanh lá cây.

BB - là giá trị màu Xanh nước biển.

Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.

Sau đây là một số giá trị màu cơ bản:

Màu sắc Giá trị Tên tiếng Anh

Đỏ

Đỏ sẫm

Xanh lá cây

Xanh nhạt

Xanh nước biển

Vàng

Vàng nhạt

Trắng

Đen

Xám

Nâu

#FF0000

#8B0000

#00FF00

#90EE90

#0000FF

#FFFF00

#FFFFE0

#FFFFFF

#000000

#808080

#A52A2A

RED

DARKRED

GREEN

LIGHTGREEN

BLUE

YELLOW

LIGHTYELLOW

WHITE

BLACK

GRAY

BROWN


Trang 25

Tím

Tím nhạt

Hồng

Da cam

Màu đồng phục hải quân

#FF00FF

#EE82EE

#FFC0CB

#FFA500

#000080

#4169E1

#7FFFD4

MAGENTA

VIOLET

PINK

ORANGE

NAVY

ROYALBLUE

AQUAMARINE

Cú pháp:

<BODY LINK = color ALINK = color VLINK = color BACKGROUND = url BGCOLOR = color TEXT = color TOPMARGIN = pixels RIGHTMARGIN = pixels LEFTMARGIN = pixels > .... phần nội dung của tài liệu được đặt ở đây </BODY>

Sau đây là ý nghĩa các tham số của thẻ BODY:

Các tham số ý nghĩa

LINK Chỉ định màu của văn bản siêu liên kết

ALINK Chỉ định màu của văn bản siêu liên kết đang đang chọn

VLINK Chỉ định màu của văn bản siêu liên kết đã từng mở

BACKGROUND Chỉ định địa chỉ của ảnh dùng làm nền

BGCOLOR Chỉ định màu nền

TEXT Chỉ định màu của văn bản trong tài liệu

SCROLL YES/NO - Xác định có hay không thanh cuộn

TOPMARGIN Lề trên

RIGHTMARGIN Lề phải

LEFTMARGIN Lề trái


Trang 26

3.4.5 CHỌN KIỂU CHỮ CHO VĂN BẢN

Cú pháp:

<FONT FACE = font-name COLOR = color SIZE = n > ... </FONT>

3.4.6 KHÁI NIỆM VĂN BẢN SIÊU LIÊN KẾT

Văn bản siêu liên kết hay còn gọi là siêu văn bản là một từ, một cụm từ hay một câu trên trang Web được dùng để liên kết tới một trang Web khác. Siêu văn bản là môi trường trong đó chứa các liên kết (link) của các thông tin. Do WWW cấu thành từ nhiều hệ thống khác nhau, cần phải có một quy tắc đặt tên thống nhất cho tất cả các văn bản trên Web. Quy tắc đặt tên đó là URL (Universal Resource Locator).

Các thành phần của URL được minh hoạ ở hình trên.

• Dịch vụ: Là thành phần bắt buộc của URL. Nó xác định cách thức trình duyệt của máy

khách liên lạc với máy phục vụ như thế nào để nhận dữ liệu. Có nhiều dịch vụ như http, wais, ftp, gopher, telnet.

• Tên hệ thống : Là thành phần bắt buộc của URL. Có thể là tên miền đầy đủ của máy

phục vụ hoặc chỉ là một phần tên đầy đủ – trường hợp này xảy ra khi văn bản được yêu cầu vẫn nằm trên miền của bạn. Tuy nhiên nên sử dụng đường dẫn đầy đủ.

• Cổng : Không là thành phần bắt buộc của URL. Cổng là địa chỉ socket của mạng dành cho

một giao thức cụ thể. Giao thức http ngầm định nối với cổng 8080.

• Đường dẫn thư mục : Là thành phần bắt buộc của URL. Phải chỉ ra đường dẫn tới file

yêu cầu khi kết nối với bất kỳ hệ thống nào. Có thể đường dẫn trong URL khác với đường dẫn thực sự trong hệ thống máy phục vụ. Tuy nhiên có thể rút gọn đường dẫn bằng cách đặt biệt

danh (alias). Các thư mục trong đường dẫn cách nhau bởi dấu gạch chéo (/).

• Tên file : Không là thành phần bắt buộc của URL. Thông thường máy phục vụ được cấu

hình sao cho nếu không chỉ ra tên file thì sẽ trả về file ngầm định trên thư mục được yêu cầu.

http://www.hugo.com.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001

Dịch vụ

Tên miền

Cổng

Đường dẫn

Tên file

Ví dụ về URL

Các tham số, biến, truy vấn


Trang 27

File này thường có tên là index.html, index.htm, default.html hay default.htm. Nếu cũng không có các file này thì thường kết quả trả về là danh sách liệt kê các file hay thư mục con trong thư mục được yêu cầu

• Các tham số : Không là thành phần bắt buộc của URL. Nếu URL là yêu cầu tìm kiếm trên

một cơ sở dữ liệu thì truy vấn sẽ gắn vào URL, đó chính là đoạn mã đằng sau dấu chấm hỏi (?). URL cũng có thể trả lại thông tin được thu thập từ form. Trong trường hợp dấu thăng (#) xuất hiện đoạn mã đằng sau là tên của một vị trí (location) trong file được chỉ ra.

Để tạo ra một siêu văn bản chúng ta sử dụng thẻ <A>.

Cú pháp:

<A HREF = url NAME = name TABINDEX = n TITLE = title TARGET = _blank / _self > ... siêu văn bản

</A>

Ý nghĩa các tham số:

HREF Địa chỉ của trang Web được liên kết, là một URL nào đó.

NAME Đặt tên cho vị trí đặt thẻ.

TABLEINDEX Thứ tự di chuyển khi ấn phím Tab

TITLE Văn bản hiển thị khi di chuột trên siêu liên kết.

TARGET Mở trang Web được liên trong một cửa sổ mới (_blank) hoặc trong cửa sổ hiện tại (_self), trong một frame (tên frame).

3.4.7 ĐỊA CHỈ TƯƠNG ĐỐI

URL được trình bày ở trên là URL tuyệt đối. Ngoài ra còn có URL tương đối hay còn gọi là URL không đầy đủ. Địa chỉ tương đối sử dụng sự khác biệt tương đối giữa văn bản hiện thời và văn bản cần tham chiếu tới. Các thành phần trong URL được ngăn cách bằng ký tự ngăn cách (ký tự gạch chéo /). Để tạo ra URL tương đối, đầu tiên phải sử dụng ký tự ngăn cách. URL đầy đủ hiện tại sẽ được sử dụng để tạo nên URL đầy đủ mới. Nguyên tắc là các thành phần bên trái dấu ngăn cách của URL hiện tại được giữ nguyên, các thành phần bên phải được thay thế bằng thành phần URL tương đối. Chú ý rằng trình duyệt không gửi URL tương đối, nó bổ sung vào URL cơ sở đã xác định trước thành phần URL tương đối xác định sau thuộc tính href=. Ký tự đầu tiên sau dấu bằng sẽ xác định các thành phần nào của URL hiện tại sẽ tham gia để tạo nên URL mới.

Ví dụ, nếu URL đầy đủ là: http://www.hugo.com.vn/HTML/index.htm thì:


Trang 28

• Dấu hai chấm (:) chỉ dịch vụ giữ nguyên nhưng thay đổi phần còn lại. Ví dụ

://www.fpt.com/ sẽ tải trang chủ của máy phục vụ www.fpt.com với cùng dịch vụ http.

• Dấu gạch chéo (/) chỉ dịch vụ và máy phục vụ giữ nguyên nhưng toàn bộ đường dẫn thay đổi. Ví dụ /Javascript/index.htm sẽ tải file index.htm của thư mục Javascript trên máy phục vụ www.hugo.com.vn.

• Không có dấu phân cách chỉ có tên file là thay đổi. Ví dụ index1.htm sẽ tải file

index1.htm ở trong thư mục HTML của máy phục vụ hugo.com.vn.

• Dấu thăng (#): chỉ dịch vụ, máy phuc vụ, đường dẫn và cả tên file giữ nguyên, chỉ

thay đổi vị trí trong file.

Do đường dẫn được xem là đơn vị độc lập nên có thể sử dụng phương pháp đường dẫn tương

đối như trong UNIX hay MS-DOS (tức là . chỉ thư mục hiện tại còn .. chỉ thư mục cha của

thư mục hiện tại).

URL cơ sở có thể được xác định bằng thẻ <BASE>.

3.4.8 KẾT NỐI MAILTO

Nếu đặt thuộc tính href= của thẻ <a> giá trị mailto:address@domain thì khi kích hoạt kết nối sẽ kích hoạt chức năng thư điện tử của trình duyệt.

<ADDRESS> Trang WEB này được <A href=”mailto:[email protected]” > WEBMASTER <\A> bảo trì <\ADDRESS>

3.4.9 VẼ MỘT ĐƯỜNG THẲNG NẰM NGANG

Cú pháp:

<HR ALIGN = LEFT / CENTER / RIGHT COLOR = color NOSHADE SIZE = n WIDTH = width >


ALIGN Căn lề (căn trái, căn phải, căn giữa)

COLOR Đặt màu cho đường thẳng

NOSHADE Không có bóng

SIZE Độ dày của đường thẳng

WIDTH Chiều dài (tính theo pixel hoặc % của bề rộng cửa sổ trình duyệt).

Thẻ này giống như thẻ BR, nó cũng không có thẻ kết thúc tương ứng.


Trang 29

3.5 CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH

3.5.1 GIỚI THIỆU

Liên kết với file đa phương tiện cũng tương tự như liên kết bình thường. Tuy vậy phải đặt tên đúng cho file đa phương tiện. Phần mở rộng của file phải cho biết kiểu của file.

KIỂU PHẦN MỞ RỘNG

MÔ TẢ

Image/GIF .gif Viết tắt của Graphics Interchange Format. Khuôn dạng này xuất hiện khi mọi người có nhu cầu trao đổi ảnh trên nhiều hệ thống khác nhau. Nó được sử dụng trên tất cả các hệ thống hỗ trợ giao diện đồ hoạ. Định dạng GIF là định dạng chuẩn cho mọi trình duyệt WEB. Nhược điểm của nó là chỉ thể hiện được 256 màu.

Mở rộng của chuẩn này là GIF89, được thêm nhiều chức năng cho các ứng dụng đặc biệt như làm ảnh nền trong suốt - tức là ảnh có thể nổi bằng cách làm màu nền giống với màu nền của trình duyệt.

Image/JPEG .jpeg Viết tắt của Joint Photographic Expert Group. Là khuôn dạng ảnh khác nhưng có thêm khả năng nén.Ưu điểm nổi bật của khuôn dạng này là lưu trữ được hàng triệu màu và độ nén cao nên kích thước file ảnh nhỏ hơn và thời gian download nhanh hơn. Nó là cơ sở cho khuôn dạng MPEG. Tất cả các trình duyệt đều có khả năng xem ảnh JPEG.

Image/TIFF .tiff Viết tắt của Tagged Image File Format. Được Microsoft thiết kế để quét ảnh từ máy quét cũng như tạo các ấn phẩm.

Text/HTML .HTML, .htm

PostScript .eps, .ps Được tạo ra để hiển thị và in các văn bản có chất lượng cao.

Adobe Acrobat .pdf Viết tắt của Portable Document Format. Acrobat cũng sử dụng các siêu liên kết ngay trong văn bản cũng giống như HTML. Từ phiên bản 2.0, các sản phẩm của Acrobat cho phép liên kết giữa nhiều văn bản. Ưu điểm lớn nhất của nó là khả năng WYSISYG.

Video/MPEG .mpeg Viết tắt của Motion Picture Expert Group, là định dạng dành cho các loại phim (video). Đây là khuôn dạng thông dụng nhất dành cho phim trên WEB.

Video/AVI .avi Là khuôn dnạg phim do Microsoft đưa ra.

Video/QuickTime .mov Do Apple Computer đưa ra, chuẩn video này được cho là có nhiều ưu điểm hơn MPEG và AVI. Mặc dù đã được tích hợp vào nhiều trình duyệt nhưng vẫn chưa phổ biến bằng hai loại định dạng trên.


Trang 30

Sound/AU .au

Sound/MIDI .mid Là khuôn dạng dành cho âm nhạc điện tử hết sức thông dụng được nhiều trình duyệt trên các hệ thống khác nhau hỗ trợ. File Midi được tổng hợp số hoá trực tiếp từ máy tính.

Sound/RealAudio .ram Định dạng audio theo dòng. Một bất tiện khi sử dụng các định dạng khác là file âm thanh thường có kích thước lớn - do vậy thời gian tải xuống lâu, Trái lại audio dòng bắt đầu chơi ngay khi tải được một phần file trong khi vẫn tải về các phần khác.Mặc dù file theo định dạng này không nhỏ hơn so với các định dạng khác song chính khả năng dòng đã khiến định dạng này phù hợp với khả năng chơi ngay lập tức.

VRML .vrml Viết tắt của Virtual Reality Modeling Language. Các file theo định dạng này cũng giống như HTML. Tuy nhiên do trình duyệt có thể hiển thị được cửa sổ 3 chiều nên người xem có thể cảm nhận được cảm giác ba chiều.

3.5.2 ĐƯA ÂM THANH VÀO MỘT TÀI LIỆU HTML

Cú pháp:

<BGSOUND SRC = url LOOP = n >

Thẻ này không có thẻ kết thúc tương ứng (</BGSOUND>). Để chơi lặp lại vô hạn cần chỉ

định LOOP = -1 hoặc LOOP = INFINITE. Thẻ BGSOUND phải được đặt trong phần

mở đầu (tức là nằm trong cặp thẻ HEAD).

3.5.3 CHÈN MỘT HÌNH ẢNH, MỘT ĐOẠN VIDEO VÀO TÀI LIỆU HTML

Để chèn một file ảnh (.jpg, .gif, .bmp) hoặc video (.mpg, .avi) vào tài liệu HTML, bạn có thể

sử dụng thẻ IMG.

Cú pháp:

<IMG

ALIGN = TOP/MIDDLE/BOTTOM

ALT = text

BORDER = n

SRC = url

WIDTH = width

HEIGHT = height


Trang 31

HSPACE = vspace

VSPACE = hspace

TITLE = title

DYNSRC = url

START = FILEOPEN/MOUSEOVER

LOOP = n

>

Trong đó:

ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT

Căn hàng văn bản bao quanh ảnh

ALT = text Chỉ định văn bản sẽ được hiển thị nếu chức năng show picture của browser bị tắt đi hay hiển thị thay thế cho ảnh trên những trình duyệt không có khả năng hiển thị đồ hoạ. Văn bản này còn được gọi là nhãn của ảnh. Đối với trình duyệt có khả năng hỗ trợ đồ hoạ, dòng văn bản này sẽ hiện lên khi di chuột qua ảnh hay được hiển thị trong vùng của ảnh nếu ảnh chưa được tải về hết. Chú ý phải đặt văn bản trong hai dấu nháy kép nếu triong văn bản chứa dấu cách hay các ký tự đặc biệt - trong trường hợp ngược lại có thể bỏ dấu nháy kép.

BORDER = n Đặt kích thước đường viền được vẽ quanh ảnh (tính theo pixel).

SRC = url Địa chỉ của file ảnh cần chèn vào tài liệu.

WIDTH/HEIGHT Chỉ định kích thước của ảnh được hiển thị.

HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên, dưới, trái, phải.

TITLE = title Văn bản sẽ hiển thị khi con chuột trỏ trên ảnh

DYNSRC = url Địa chỉ của file video.

START = FILEOPEN/MOUSEOVER

Chỉ định file video sẽ được chơi khi tài liệu được mở hay khi trỏ con chuột vào nó. Có thể kết hợp cả hai giá trị này nhưng phải phân cách chúng bởi dấu phẩy.

LOOP = n/INFINITE Chỉ định số lần chơi. Nếu LOOP = INFINITE thì file video sẽ được chơi vô hạn lần.

3.6 CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU

Sau đây là các thẻ tạo bảng chính:


Trang 32

<TABLE> ... </TABLE> Định nghĩa một bảng

<TR> ... </TR> Định nghĩa một hàng trong bảng

<TD> ... </TD> Định nghĩa một ô trong hàng

<TH> ... </TH> Định nghĩa ô chứa tiêu đề của cột

<CAPTION> ... </CAPTION> Tiêu đề của bảng

Cú pháp:

<TABLE ALIGN = LEFT / CENTER / RIGHT BORDER = n BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKGROUND = url BGCOLOR = color CELLSPACING = spacing CELLPADDING = pading > <CAPTION>Tiêu đề của bảng biểu</CAPTION> ... Định nghĩa các dòng

<TR ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM> ... Định nghĩa các ô trong dòng <TD ALIGN = LEFT / CENTER / RIGHT VALIGN = TOP / MIDDLE / BOTTOM BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKBROUND = url BGCOLOR = color COLSPAN = n ROWSPAN = n > ... Nội dung của ô </TD> ... </TR> ... </TABLE>


Trang 33


ALIGN / VALIGN Căn lề cho bảng và nội dung trong mỗi ô.

BORDER Kích thước đường kẻ chia ô trong bảng, được đo theo pixel. Giá trị 0 có nghĩa là không xác định lề, giữa các ô trong bảng chỉ có một khoảng trắng nhỏ để phân biệt. Nếu chỉ để border thì ngầm định border=1. Với những bảng có cấu trúc phức tạp, nên đặt lề để người xem có thể phân biệt rõ các dòng và cột.

BORDERCOLOR Màu đường kẻ

BORDERCOLORDARK

BORDERCOLORLIGHT

Màu phía tối và phía sáng cho đường kẻ nổi.

BACKGROUND Địa chỉ tới tập ảnh dùng làm nền cho bảng

BGCOLOR Màu nền

CELLSPACING Khoảng cách giữa các ô trong bảng

CELLPADDING Khoảng cách giữa nội dung và đường kẻ trong mỗi ô của bảng.

COLSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu cột

ROWSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu hàng

BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG 3333 Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.

1. Tạo thư mục HTML-DHTML-JS-Examples trong ổ đĩa D:\ và lưu tất cả các file .htm chỉ trong

thư mục này. (Nếu không có đĩa D, hãy tạo trong ổ đĩa C:\)

2. Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”. 3. Gõ đoạn mã vào tài liệu 4. Kích vào File chọn Save As 5. Lưu file với đuôi .htm trong thư mục D:\HTML-DHTML-JS-Examples. 6. Chạy Internet Explorer. 7. Kích vào File → Open, chọn Browse và chọn file từ thư mục D:\HTML-DHTML-JS-Examples


Trang 34

BÀI TẬP 1

1/ Tạo trang web Headings.htm (sử dụng Tag Hn, từ Heading1 đến Heading6)

2/ Tạo trang web HeadingCenter.htm (Phối hợp các Tag)

3/ Tạo trang web Alignment.htm (Phối hợp các Tag)


Trang 35

4/ Tạo trang web Emphasis.htm

5/


Trang 36

6/

BÀI TẬP 2 (Link)

1/ Tạo tập tin links2.htm : tạo các Hyperlink để di chuyển đến các trang htm vừa tạo ở trên.


Trang 37

2/ Tạo tập tin Search.htm để xây dựng trang Web sau

3/ Sử dụng các tag đã học để tạo 1 trang Web cho riêng bạn (MySite.htm)

Nội dung: Tự giới thiệu và Các trang Web ưa thích (tạo các HyperLink)

4/ Tạo trang Web sau (InternalLink)

http://www.google.com for Google http://www.altavista.com for Altavista http://www.Yahoo.com for Yahoo


Trang 38

BÀI TẬP 3 (Image)

1/ Image1.htm

2/ Image2.htm

Hướng dẫn: thêm vào dòng lệnh

<body background = images/background.gif>


Trang 39

BÀI TẬP 4 (Bullete)

1/ Unordered.htm. 2/ Ordered.htm.

3/ Definition.htm

dl

dt

dd


Trang 40

4/ Horizontal.htm

5/


Trang 41

BÀI TẬP 5 (Table)

1/ Table1.htm

2/ Table2.htm (Tables with images and links)

<html> <head> <title>Exercise :: Tables2</title> <head> <body > <table width="75%" border="1" cellspacing="2" cellpadding="0" align="center"> <tr> <th>Files from Session 2</th> <th>Files from Session 3</th> <th>Files from Session 4</th> </tr> <tr> <td><a href="/headings.htm">headings exercise</a></td> <td>images.htm</td> <td>unordered.htm</td> </tr> <tr> <td><a href="/headingscentered.htm">center align exercise</a></td> <td>images2.htm</td> <td>ordered.htm</td> </tr>


Trang 42

<tr> <td><a href="/emphasis.htm">emphasis exercise</a></td> <td> </td> <td>definition.htm</td> </tr> <tr> <td><a href="/links.htm">links exercise 1</a></td> <td> </td> <td>table1.htm</td> </tr> <tr> <td><a href="/links2.htm">links exercise 2</a></td> <td> </td> <td> </td> </tr> </table> </body> </html>


Trang 43

Dùng các thẻ HTML để thiết kế các trang web sau:

1/ Tourist1.htm

2/ Tourist2.htm


Trang 44

3/ vinair.htm

4/ oto.htm


Trang 45

5) Dulich.htm

� BÀI TẬP LÀM THÊM Session 2, Session 4, Session 6 trong tập tin HDJ-Aptech.chm


Trang 46


CSS (Cascading Style Sheets)

c mục chính Bài tập bắt Bài tập làm

Tóm tắt


bắt buộc

Bài tập

làm thêm



tạo CSS trong việc thiết kế

giao diện Web …

4.1 Khái niệm về CSS

4.2 Một số đặc tính cơ bản về CSS


trong phần cuối

Chương 4.

Dựa vào bài

tập trong phần

cuối Chương

4.

buộc thêm


Trang 47

4.1 KHÁI NIỆM CSS

4.1.1 CSS là gì?

Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. Đây chỉ là một định nghĩa giàu hình ảnh nhưng cũng thực tế thôi. Còn CSS (Cascading Style Sheets tạm dịch là tờ mẫu theo Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…

4.1.2 Tại sao CSS?

Chúng ta đã biết qua HTML trong chương trước thì cũng biết HTML hỗ trợ một số thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả. Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất.

Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra phương thức “tờ mẫu” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó. Hãy thử tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn giản.

Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,…

CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

4.1.3 Học CSS cần những gì?

Thật sự không có một điều kiện gì được quy định khi học CSS. Nhưng ở một khía cạnh nào đó thì một sự chuẩn bị cho một cuộc hành trình dù là dễ nhất vẫn không thừa vì ít nhất nó sẽ giúp bạn làm tốt hơn. Hành trang thứ nhất mà bạn nên có là một kiến thức về HTML, nó không thật sự cần thiết nếu bạn chỉ dùng CSS để trình bày cho một trang HTML có sẵn (như làm skin cho blog chẳng hạn), nhưng bạn vẫn cần biết ý nghĩa một số thẻ HTML, nó sẽ có ích khi bạn viết CSS. Tuy nhiên, nếu bạn muốn tự thiết kế, trình bày một trang web của riêng mình thì tùy theo quy mô trang web, bạn cần phải học thêm cả HTML, XHMTL, Javascript và một số ngôn ngữ lập trình web khác. Hành trang thứ hai chính là một trình soạn thảo văn bản để bạn có thể viết mã CSS. Ở đây, tôi khuyên bạn nên sử dụng một trình soạn thảo đơn giản như Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac. Nó sẽ giúp bạn chắc chắn code là của bạn và không có bất kỳ một sự can thiệp nào từ chương trình như khi dùng DreamWeaver, FrontPage, Golive,… Hành trang thứ ba của bạn chính là một phiên bản mới nhất của trình duyệt mà bạn thường dùng. Và một điều nữa mà tôi muốn đề nghị đó là các bạn hãy dành một ít thời gian để thực hành CSS sau bài học nó sẽ thật sự có


Trang 48

ích cho bạn. Thực hành chẳng những giúp bạn vận dụng nhuần nhuyễn các bài học mà còn có tác dụng giải thích ngược lại những lý thuyết mà bạn chưa hiểu. Bây giờ nếu bạn đã thật sự chuẩn bị chúng ta hãy chuyển qua phần tiếp theo để thật sự bước chân vào thế giới CSS.

4.1.4 Cú pháp CSS

Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau. Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng code sau:

+ Trong HTML: <body bgcolor=“#00BFF3”>

+ Trong CSS: body { background-color:#00BFF3; }

Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa các thuộc tính trong HTML và CSS cho nên nếu bạn đã biết qua HTML thì cũng sẽ rất dễ dàng tiếp thu CSS. Đó là một chút lợi thế của câu chuyện hành trình mà tôi đã nói ở trên. Nhưng không sao cả, bây giờ hãy nhìn vào ví dụ của chúng ta và các bạn xem nó có giống với cấu trúc sau không nhé.

Cú pháp CSS cơ bản:

Selector { property:value; }

Trong đó:

+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở phần sau).

Ví dụ: body, h2, p, img, #title, #content, .username,…

Trong CSS ngoài viết tên selector theo tên tag, class, id. Chúng ta còn có thể viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết selector là #entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho các ảnh nằm trong #entry.

Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó, ví dụ như thẻ img và thẻ a cùng có class tên vistors nhưng đây lại là hai đối tượng khác nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm. Nên nếu khi viết CSS ta ghi là .visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần. Nên trong trường hợp này, nếu bạn có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ nền ghi là img .visitors thôi.

Một lối viết tên selector nữa đó là dựa trên tên các thuộc tính có trong HTML. Ví dụ trong HTML ta có đoạn mã như vầy: <input name=”Search” type=”Text” value=”Key Word”>. Để áp dụng thuộc tính CSS cho riêng ô tìm kiếm này chúng ta sẽ dùng selector input[name=”Search”].

Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web làm cho chúng có text màu đỏ.

+ Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: background-color, font-family, color, padding, margin,…

Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector.

Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }


Trang 49

Để dễ đọc hơn, bạn nên viết mỗi thuộc tính CSS ở một dòng. Tuy nhiên, nó sẽ làm tăng dung lượng lưu trữ CSS của bạn.

Ví dụ: body {

background:#FFF;

color:#FF0000;

font-size:14pt

}

Đối với một trang web có nhiều thành phần có cùng một số thuộc tính, chúng ta có thể thực hiện gom gọn lại như sau:

h1 { color:#0000FF;

text-transform:uppercase }

h2 { color:#0000FF;

text-transform:uppercase; }

h3 { color:#0000FF;


� h1, h2, h3 { color:#0000FF;


+ Value: Giá trị của thuộc tính. Như ví dụ trên value chính là #FFF dùng để định màu trắng cho nền trang.

Đối với một giá trị có khoảng trắng, bạn nên đặt tất cả trong một dấu ngoặc kép. Ví dụ: font-family:“Times New Roman”.

Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo với đơn vị của nó. Ví dụ: width:100 px. Nó sẽ làm CSS của bạn bị vô hiệu trên Mozilla/Firefox hay Netscape.

Chú thích trong CSS:

Cũng như nhiều ngôn ngữ web khác. Trong CSS, chúng ta cũng có thể viết chú thích cho các đoạn code để dễ dàng tìm, sửa chữa trong những lần cập nhật sau. Chú thích trong CSS được viết như sau /* Nội dung chú thích */

Ví dụ:

/* Màu chữ cho trang web */

body {

color:red

}

4.1.5 Đơn vị CSS

Trong CSS2 hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời gian, cường độ âm thanh và màu sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màu sắc. Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS.


Trang 50

Đơn vị chiều dài

ĐƠN VỊ MÔ TẢ

% Phần trăm

ex 1 ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x của font Times và font Tohama là khác nhau.

in Inch (1 inch = 2.54 cm)

cm Centimeter

mm Millimeter

em 1 em tương đương kích thước font hiện hành, nếu font hiện hành có kích cỡ 14px thì 1 em = 14 px. Đây là một đơn vị rất hữu ích trong việc hiển thị trang web.

pt Point (1 pt = 1/72 inch)

pc Pica (1 pc = 12 pt)

px Pixels (điểm ảnh trên màn hình máy tính)

Đơn vị màu sắc

ĐƠN VỊ MÔ TẢ

Color-name Tên màu tiếng Anh. Ví dụ: black, white, red, green, blue, cyan, magenta,…

RGB (r,g,b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với nhau tạo ra vô số màu.

RGB (%r,%g,%b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.

Hexadecimal RGB Mã màu RGB dạng hệ thập lục. Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi.

4.1.6 Vị trí đặt CSS

Ở trên chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu trong tài liệu HTML? Trong phần này, tôi xin giới thiệu với các bạn về vấn đề này. Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML

+ Cách 1: Nội tuyến (kiểu thuộc tính).

Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp. Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này. Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:

Trang 51

<html>

<head>

<title>Ví dụ</title>

</head>

<body style=”background-color=#FFF;”>

<p style=”color:green”>^_^ Welcome To My Blog ^_^</p>

</body>

</html>

+ Cách 2: Bên trong (thẻ style) Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ

nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để tiện cho công tác bảo trì, sửa chữa). Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:

<html>

<head>


<style type=”text/css”>

body { background-color:#FFF }

p { color:#00FF00 }

</style>

</head>

<body>

<p>^_^ Welcome To My Blog ^_^</p>

</body>

</html>

Lưu ý: Thẻ style nên đặt trong thẻ head.

Đối với những trình duyệt cũ, không thể nhận ra thẻ <style>. Theo mặc định, thì khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS: body {background-color:#FFF } p { color:#00FF00 } sẽ hiện ra trên trình duyệt. Để tránh tình trạng này, bạn nên đưa vào thêm dấu  ở sau khối code CSS. Như ví dụ trên sẽ viết lại là:

<style type=”text/css”>



</style>


Trang 52

+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)

Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link.

Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu, chỉ cần thay đổi nội dung 1 file CSS, tất cả các trang web sẽ được cập nhật ngay lập tức. Các ví dụ trong sách này cũng được trình bày theo kiểu này.

Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau.

Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:

<html>

<head>


<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>

<body>

<p>^_^ Welcome To My Blog ^_^</p>

</body>

</html>

Sau đó hãy tạo một file style.css với nội dung:

body {

background-color:#FFF

}

p {

color:#00FF00

}

Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả.

Lưu ý:

Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt.

Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file CSS vào CSS hiện hành. Cú pháp: @import url(link).

4.1.7 Sự ưu tiên:

Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ <style> và các CSS nội tuyến. Sau đó, trình duyệt sẽ tổng


Trang 53

hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng. Theo nguyên tắc đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt.

Ví dụ: Trong một trang web có liên kết tới file style.css có nội dung như sau:

p {

color:#333;

text-align:left;

width:500px

}

trong thẻ <style> giữa thẻ <head> cũng có một đoạn CSS liên quan:

p {

background-color:#FF00FF;

text-align:right;

width:100%;

height:150px

}

trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:

p { style=”height:200px; text-align:center; border:1px solid #FF0000; color:#000” }

Khi thực thi CSS trình duyệt sẽ đọc hết tất cả các nguồn chứa style rồi sẽ tổng hợp lại vào một CSS ảo và nếu có sự trùng lắp các thuộc tính CSS thì nó sẽ lấy thuộc tính CSS có mức ưu tiên cao hơn. Như ví dụ trên chúng ta sẽ thấy CSS cuối cùng mà phần tử p nhận được là:

p {


width:100%;

height:200px;

text-align:center;

border:1px solid #FF0000;

color:#000

}

Vậy có cách nào để thay đổi độ ưu tiên cho một thuộc tính nào đó? Thật ra thì trong CSS đã có sẵn một thuộc tính giúp chúng ta thực hiện điều này, đó chính là thuộc tính !important. Chỉ cần bạn đặt thuộc tính này sau một thuộc tính nào đó theo cú pháp selector { property:value !important } thì trình duyệt sẽ hiểu đây là một thuộc tính được ưu tiên. Bây giờ, chúng ta cùng xét lại ví dụ trên nhưng có đặt thêm một số thuộc tính !important vào xem kết quả như thế nào nhé.


Trang 54

p {

width:500px;

color:#333; !important

text-align:left; !important

}

p {


text-align:right;

width:100%;

height:150px !important

}

p { style=”height:200px; text-align:center; border:1px solid #FF0000; color:#000” }

Phần CSS sẽ tác động lên thuộc tính p là:

p {


width:100%;

height:150px; !important

text-align:left; !important

border:1px solid #FF0000;

color:#333 !important

}

Lưu ý: Cùng một thuộc tính cho một selector thì nếu cả hai thuộc tính đều đặt !important thì cái sau được lấy.

4.2 MỘT SỐ ĐẶC TÍNH CƠ BẢN VỀ CSS

4.2.1 Thuộc tính Border trong CSS

Thuộc tính Border cho phép bạn chỉ định kiểu cách, màu sắc và độ rộng của đường bao của một thành phần. Trong HTML chúng ta sử dụng bảng để tạo ra các đường bao xung quanh một văn bản, nhưng với các thuộc tính Border trong CSS chúng ta có thể tạo các đường bao với hiệu ứng đẹp và nó có thể ứng dụng cho phần tử bất kỳ.

NN: Netscape, IE: Internet Explorer, W3C: Web Standard


Trang 55

Thuộc tính Mô tả Ví dụ NN IE W3C

border Một thuộc tính để thiết lập

cho toàn bộ cả 4 đường bao

trong một khai báo.

border-width

border-style

border-color

4.0 4.0 CSS1

border-bottom Một thuộc tính để thiết lập

cho đường bao đáy trong

một khai báo.

border-bottom-width

border-style

border-color

6.0 4.0 CSS1

border-bottom-

color

Thiết lập màu sắc của đường

bao đáy

border-color 6.0 4.0 CSS2

border-bottom-style Thiết lập kiểu cách của

đường bao đáy.

border-style 6.0 4.0 CSS2

border-bottom-

width

Thiết lập độ rộng của đường

bao đáy

thin

medium

thick

length

4.0 4.0 CSS1

border-color Thiết lập màu sắc của bốn

đường bao, có thể đạt màu

từ một đến bốn.

color 6.0 4.0 CSS1

border-left Một thuộc tính để thiết lập

cho đường bao trái trong một

khai báo.

border-left-width

border-style

border-color

6.0 4.0 CSS1

border-left-color Thiết lập màu sắc của đường

bao trái.


border-left-style Thiết lập kiểu cách của

đường bao trái.


border-left-width Thiết lập độ rộng của đường

bao trái.

thin

medium

thick

length

4.0 4.0 CSS1

border-right Một thuộc tính để thiết lập

cho đường bao phải trong

một khai báo.

border-right-width

border-style

border-color

6.0 4.0 CSS1

border-right-color Thiết lập màu sắc của đường

bao phải.



Trang 56

border-right-style Thiết lập kiểu cách của

đường bao phải.


border-right-width Thiết lập độ rộng của đường

bao phải.

thin

medium

thick

length

4.0 4.0 CSS1

border-style Thiết lập kiểu cách của cả

bốn đường bao, có thể đạt

được kiểu từ một đến bốn.

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

6.0 4.0 CSS1

border-top Một thuộc tính để thiết lập

cho đường bao đỉnh trong

một khai báo.

border-top-width

border-style

border-color

6.0 4.0 CSS1

border-top-color Thiết lập màu sắc của đường

bao đỉnh.


border-top-style Thiết lập kiểu cách của

đường bao đỉnh.


border-top-width Thiết lập độ rộng của đường

bao đỉnh

thin

medium

thick

length

4.0 4.0 CSS1

border-width Một thuộc tính tốc hành để

thiết lập độ rộng của

bốn đường bao trong một

khai báo, có thể có từ một

đến bốn giá trị.

thin

medium

thick

length

4.0 4.0 CSS1

4.2.2 Thuộc tính Font trong CSS

Thuộc tính Font cho phép bạn thay đổi font chữ, độ đậm, kích cỡ và kiểu cách font chữ của văn bản.


Trang 57

Các Lưu ý - Mẹo hữu ích

Các font chữ thì được xác định bởi tên của chúng trong CSS1. Lưu ý rằng nếu một trình duyệt không hỗ trợ thuộc tính font được chỉ định thì nó sẽ sử dụng font mặc định.

Thuộc tính Mô tả Giá trị NN IE W3C

font Một thuộc tính nhỏ để thiết lập tất cả thuộc tính cho một font trong một khai báo.

font-style

font-variant

font-weight

font-size/line-height

font-family

caption icon menu message-box small-caption status-bar

4.0 4.0 CSS1

font-family Một danh sách ưu tiên của các họ font cho một thành phần.

family-name

generic-family 4.0 3.0 CSS1

font-size Thiết lập kích cỡ cho một font chữ.

xx-small x-small small medium large x-large xx-large smaller larger length

%

4.0 3.0 CSS1

font-stretch Những rút gọn hoặc mở rộng của font.

normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded

CSS2

font-style Thiết lập kiểu cách của font. normal italic oblique

4.0 4.0 CSS1

font-variant Hiển thị văn bản trong một font chữ HOA NHỎ hoặc một font chữ thường.

normal small-caps

6.0 4.0 CSS1


Trang 58

font-weight Thiết lập trọng lượng của font.

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

4.0 4.0 CSS1

4.2.3 Thuộc tính List trong CSS

Thuộc tính List cho phép bạn thay đổi giữa các điểm đánh dấu mục danh sách khác nhau, thiết lập một ảnh như một điểm đánh dấu mục danhsách và thiết lập nơi để đặt điểm đánh dấu mục danh sách.

Thuộc tính Mô tả Giá trị NN IE W3C

list-style Một thuộc tính ngắn gọn để thiết lập cho toàn bộ thuộc tính của danh sách trong một khai báo

list-style-type

list-style-position

list-style-image

6.0 4.0 CSS1

list-style-image Thiết lập một ảnh như một điểm đánh dấu mục danh sách.

none url

6.0 4.0 CSS1

list-style-position Đặt một điểm đánh dấu mục danh sách trong danh sách.

inside outside

6.0 4.0 CSS1

list-style-type Thiết lập kiểu của điểm đánh dấu mục danh sách.

none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha

4.0 4.0 CSS1

marker-offset auto length

CSS2


Trang 59

4.2.4 Thuộc tính Text trong CSS

Thuộc tính Text cho phép bạn kiểm soát diện mạo của văn bản. Nó cũng có thể thay đổi màu của văn bản, tăng hoặc giảm khoảng cách giữa các ký tự trong một văn bản, căn chỉnh một văn bản, trang trí cho văn bản, thụt dòng đầu tiên và nhiều hiệu ứng khác.

Thuộc tính Mô tả Giá trị khả dĩ NN IE W3C

color Thiết lập màu cho chữ color 4.0 3.0 CSS1

direction Thiết lập hướng cho chữ ltr

rtl

CSS2

letter-spacing Tăng hoặc giảm khoảng trống giữa

các ký tự

normal

length

6.0 4.0 CSS1

text-align Căn chỉnh văn bản trong một thành

phần

left

right

center

justify

4.0 4.0 CSS1

text-decoration Thêm trang trí cho văn bản

none

underline

overline

line-through

blink

4.0 4.0 CSS1

text-indent Thụt dòng đầu văn bản trong một

thành phần

length

%

4.0 4.0 CSS1

text-shadow

none

color

length

text-transform Kiểm soát ký tự trong một thành phần

none

capitalize

uppercase

lowercase

4.0 4.0 CSS1

white-space Thiết lập bao nhiêu khoảng trắng

trong một thành phần

normal

pre

nowrap

4.0 5.5 CSS1

word-spacing Tăng hoặc giảm khoảng trống giữa

các từ

normal

length

6.0 6.0 CSS1


Trang 60

4.2.5 Thuộc tính Padding trong CSS

Thuộc tính Padding xác định khoảng trống giữa phần tử đường bao và nội dung. Không cho phép các giá trị âm. Khoảng trống đệm của đỉnh, phải, dưới và trái có thể được thay đổi một cách độc lập sử dụng các thuộc tính riêng biệt. Một thuộc tính khoảng đệm ngắn gọn thì cũng được tạo ra để kiểm soát nhiều cạnh cùng lúc.


padding Một thuộc tính ngắn gọn để thiết lập

tất cả các khoảng đệm chỉ với một lần

khai báo.

padding-top

padding-right

padding-bottom

padding-left

4.0

4.0

CSS1

padding-bottom Thiết lập khoảng đệm tại đáy của một

phần tử.

length

%

4.0

4.0

CSS1

padding-left Thiế`t lập khoảng đệm phía trái của

một phần tử.

length

%

4.0

4.0

CSS1

padding-right

Thiế`t lập khoảng đệm phía phải của

một phần tử.

length

%

4.0

4.0

CSS1

padding-top

Thiết lập khoảng đệm trên đỉnh của

một phần tử.

length

%

4.0

4.0

CSS1

4.2.6 Thuộc tính Background trong CSS

Thuộc tính nền cho phép bạn kiểm soát màu nền của một thành phần, thiết lập một ảnh như nền trong văn bản, lặp lại một ảnh nền theo chiều dọc hoặc chiều ngang và vị trí của một ảnh trên một trang.


background Một thuộc tính ngắn gọn để thiết lập tất cả các thuộc tính nền trong một khai báo.

background-color

background-image

background-repeat

background-attachment

background-position

6.0

4.0

CSS1

background-attachment

Thiết lập liệu một ảnh có đứng cố định một chỗ hay cuộn theo phần văn bản còn lại của trang.

scroll fixed

6.0

4.0

CSS1

background-color

Thiết lập màu nền của một phần tử

color-rgb

color-hex

color-name

transparent

4.0

4.0

CSS1


Trang 61

background-image Thiết lập một ảnh như nền của trang.

url none

4.0 4.0 CSS1

background-position

Thiết lập điểm xuất phát của một ảnh nền

top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

6.0

4.0

CSS1

background-repeat Thiết lập cách một ảnh sẽ được lặp lại như thế nào.

repeat repeat-x repeat-y no-repeat

4.0 4.0 CSS1

4.2.7 Thuộc tính Margin trong CSS

Thuộc tính căn lề xác định khoảng trống xung quanh các phần tử. Nó có thể sử dụng cả giá trị âm gối lên nội dung. Các thuộc tính căn lề đỉnh, phải, đáy và trái có thể được thay đổi một cách độc lập sử dụng các thuộc tính riêng rẽ. Một thuộc tính căn lề nhanh có thể được dùng để thay đổi tất cả các lề một lần.

Lưu ý về trình duyệt: Netscape và IE thiết lập mặc định lề cho thẻ body là 8px. Trình duyệt Opera không thiết lập! Để thay thế, Opera áp dụng một khoảng đệm là 8px, vì thế nếu một người muốn căn chỉnh lề cho toàn bộ một trang và hiển thị một cách đúng đắn trong Opera, thì khoảng đệm cho body cũng phải được thiết lập.


margin

Một thuộc tính nhanh để thiết lập thuộc tính cho lề trong một khai báo.

margin-top

margin-right

margin-bottom

margin-left

4.0

4.0

CSS1

margin-bottom Thiết lập lề đáy của một phần tử.

auto

length

%

4.0 4.0 CSS1

margin-left Thiết lập lề trái của một phần tử.

auto length

%

4.0

4.0

CSS1

margin-right

Thiết lập lề phải của một phần tử.

auto length

%

4.0 4.0 CSS1


Trang 62

margin-top Thiết lập lề đỉnh của một

phần tử.

auto length

%

6.0

4.0

CSS1

BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG 4444 Bài tập 1

<html> <head> <title>Zentrale Formate</title> <style type="text/css"> h1 { color: blue; font-size: 48px; } </style> </head> <body> <h1>48 Pixel und Rot!</h1> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Ta muốn làm cho đoạn văn có màu sắc và kích thước thì ta sẽ làm như sau:

h1 {

color: red;

font-size: 48px;

}

Bài tập 2

<html> <head> <style type="text/css"> body { background-color: yellow } h1 { background-color: #00ff00 } h2 { background-color: transparent } p { background-color: rgb(250,0,255) } </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>


Trang 63

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn tạo một hình nền và tô màu cho chữ ta làm như sau:

body {

background-color: yellow

}

h1 {

background-color: #00ff00

}

h2 {

background-color: transparent

}

p {

background-color: rgb(250,0,255)

}

Bài tập 3

<html> <head> <style type="text/css">

span.highlight { background-color:yellow }

</style> </head> <body> <p> <span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span> </p> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn tạo hightlight cho đoạn text ta làm như sau:

span.highlight { background-color:yellow

}


Trang 64

Bài tập 4


h1 { font-size-adjust: 0.50 } h2 { font-size-adjust: 0.40 } p { font-size-adjust: 0.60 }

</style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn tạo font cho chữ ta làm như sau:

h1 { font-size-adjust: 0.50 }

h2 { font-size-adjust: 0.40 }

p { font-size-adjust: 0.60 }

Bài tập 5


p { border: medium double rgb(250,0,255) }

</style> </head> <body> <p>Some text</p> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn tạo đường viền ta làm như sau:

p { border: medium double rgb(250,0,255)

} p { border-bottom: medium solid #ff0000

} p { border-right: medium solid #ff0000

}


Trang 65

Bài tập 6


p { border: red solid thin; outline: green dotted thick }

</style> </head> <body> <p>Some text.</p> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn tạo đường viền ngoài của đoạn text ta làm như sau:

p { border: red solid thin;

outline: green dotted thick

}

Bài tập 7


p.topmargin { margin-top: 5cm } </style> </head> <body> <p>This is a paragraph with no margin specified</p> <p class="topmargin">This is a paragraph with a specified top margin</p> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn canh lề cho đoạn text làm như sau:

p.topmargin { margin-top: 5cm

}


Trang 66

Bài tập 8


ul.disc { list-style-type: disc } ul.circle { list-style-type: circle } ul.square { list-style-type: square } ul.none { list-style-type: none }

</style> </head> <body> <ul class="disc"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="circle"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="square"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="none"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn tạo một list ta làm như sau:

ul.disc{

list-style-type: disc

}

ul.circle{

list-style-type: circle

}

ul.square{

list-style-type: square

}

ul.none{

list-style-type: none

}


Trang 67

Bài tập 9


table { border-collapse: separate; empty-cells: show }

</style> </head> <body> <table border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td></td> </tr> </table> </body> </html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Muốn tạo border dùng thẻ <table> ta làm như sau:

table

{

border-collapse: separate;

empty-cells: show

}

Bài tập 10

Hãy tạo trang Web có menu như sau (tạo tập tin hormenu.css)


Trang 68

Bài tập 11

Hãy tạo trang Web có các tab như sau:

� BÀI TẬP LÀM THÊM Session 10 trong tập tin HDJ-Aptech.chm


Trang 69


THIẾT KẾ WEB DÙNG FORM VÀ JAVASCRIPT


Tóm tắt


bắt buộc

Bài tập

làm thêm



các thẻ HTML nâng cao

trong việc thiết kế giao

diện Web như: form, danh

sách lựa chọn, check box,

hộp soạn thảo văn bản …

5.1 HTML form

5.2 Căn bản về ngôn ngữ Javascript


trong phần cuối

Chương 5.

Dựa vào bài

tập trong phần

cuối Chương

5.

Trang 70

5.1 HTML FORM

Các HTML Form có thể có các hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn...

5.1.1 TẠO FORM

Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú pháp như sau:

Cú pháp:

<FORM ACTION = ulr METHOD = GET | POST NAME = name TARGET = frame_name | _blank | _self >  <INPUT ...> <INPUT ...> </FORM>

Trong đó

ACTION Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP...).

METHOD Phương thức gửi dữ liệu.

NAME Tên của form.

TARGET Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.

Đặt các đối tượng điểu khiển (như hộp văn bản, ô kiểm tra, nút bấm...) vào trang Web

Cú pháp thẻ INPUT:

<INPUT

ALIGN = LEFT | CENTER | RIGHT

TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT

VALUE = value

>

5.1.2 TẠO MỘT DANH SÁCH LỰA CHỌN

Cú pháp:

Trang 71

<SELECT NAME="tên danh sách" SIZE="chiều cao">

<OPTION VALUE=value1 SELECTED> Tên mục chọn thứ nhất

<OPTION VALUE=value2> Tên mục chọn thứ hai



</SELECT>

5.1.3 TẠO HỘP SOẠN THẢO VĂN BẢN

Cú pháp:

<TEXTAREA COLS=số cột ROWS=số hàng NAME=tên

> Văn bản ban đầu </TEXTAREA>

5.2 CĂN BẢN VỀ NGÔN NGỮ JAVASCRIPT

Ngôn ngữ Script là một ngôn ngữ lập trình nhằm bổ sung tính năng động của trang Web (Dynamic HTML). Ngôn ngữ này giúp giảm xử lý cho Server thay vì dùng CGI script tại Server thì ta dùng Java script tại Client. Các ngôn ngữ script thông dụng như: javascript (NetScape), jscript (Microsoft), VBScript (Microsoft). VBScript có lợi thế trong môi trường Windows, dùng cho các ActiveX control và rất giống VB. VBScript cũng là ngôn ngữ dùng cho Server, nó phối hợp với những đối tượng Server để tạo ra những trang Web động từ Server (ví dụ như ASP).

5.2.1 Tổng quan Java Script

Khi cần thiết kế một trang Web động như máy tính tay (Calculators), hiển thị giờ (Display

time), hiển thị trạng thái thông tin phản hồi(Feedback), giải trí trên web (Entertainment) thì ta dùng các ngôn ngữ script này, đó là Java Script.

Cú pháp:

Gần giống như các ngôn ngữ lập trình khác như Pascal, C++, Java…

Khai báo và dùng biến

− var x = 7

− var y,z = "19"

− var lk = "lucky"

− 5 + x // giá trị là 12

− lk + z // giá trị là "lucky19"

− lk + x // giá trị là "lucky7"

− x + z // giá trị là 26

− Java script tự động chuyển kiểu cho phù hợp và tự gán giá trị ban đầu là 0 khi ta khai báo biến.

Trang 72

Các loại dữ liệu trong Java Script

− Số như -5, 0 hoặc 3.3333

− Chuỗi như "Click Here" hoặc "JavaScript"

− Giá trị logic như: true hoặc false

− JavaScript element xem như là một hàm hoặc một đối tượng

− Giá trị null

Các hằng

− Hệ thập phân 123, -3434

− Hệ 8(octal): 017

− Hệ 16(hexadecimal): 0x12EF5

− Kiểu dữ liệu số trong java script dùng 32 bit

Chuỗi

− Khởi tạo, phép toán trên chuổi

− \t tab

− \n return

− \b backspace

Đổi kiểu

− stringthing + numberthing= string

− numberthing + stringthing= number

Các phép toán: +, -, *, /, %, ++, --, = =, !=, <, <=, >, >=, …

Các ví dụ

x = 4 + y;

y = 5.5 - z;

z = 10 / w;

w = 1.4e5 * v;

n = -m;

y = ++x;

z = x++;

if (x = 3) { }

(x < 17) && buttonPressed && (z == "Meta")

(x < 17) || buttonPressed || (z == "Meta")

(x < 25) && beaupage()

(x - 3.0) < epsilon || (3.0 - x) < epsilon

Chú thích

/* …… */

//………

Trong html

Trang 73

Cấu trúc điều khiển

if (điều kiện) { câu lệnh}

if (điều kiện) { câu lệnh} else {câu lệnh}

Cấu trúc While:

while (điều kiện) { câu lệnh}

5.2.2 Sự kiện trong html và java script

Các tác động thông thường lên trang web là:

− Chọn một liên kết.

− Di chuyển đến trang trước hoặc trang sau trong các trang đã duyệt.

− Mở một trang Web mới dùng chức năng “New Window”.

− Thoát khỏi trình duyệt web.

Các sự kiện thường gặp đối với các đối tượng là:

− Di chuyển chuột

− Thay đổi trạng thái.

Chèn đoạn mã java script trong html:

− <SCRIPT LANGUAGE="LangName" [SRC="URL"]>

<SCRIPT LANGUAGE="JavaScript" SRC="jscode/click.js"> </SCRIPT>

Ẩn nội dung source đi:

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

Một trang Web hoàn chỉnh dùng code Jaca Script: ví dụ tạo một nút “Chao”, khi click vào nút này xuất hiện thông báo “Chao cac ban”

<HTML> <HEAD> <TITLE>Chao ban</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD>

Trang 74

<BODY> <FORM> <INPUT TYPE="button" NAME="chao" VALUE="Chao!" onClick="dontclickme()"> </FORM> </BODY> </HTML>

Ta có thể viết lệnh Java script trực tiếp vào sự kiện:

<HTML> <HEAD> <TITLE>Chao ban</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="chao" VALUE="Chao!" onClick="alert('Chao cac ban');"> </FORM> </BODY> </HTML>

Bắt sự kiện của List: ví dụ kiểm tra sự thay đổi giá trị listbox dùng hàm onChange()

<HTML> <HEAD> <TITLE>Su kien List</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <SELECT NAME="Ten" onChange="Thongbao('Co su thay doi')"> <OPTION SELECTED>Lan</OPTION> <OPTION>Cuc</OPTION> <OPTION>Hong</OPTION> </SELECT> </BODY> </HTML>

Bắt sự kiện của document (dùng khi cần gọi hàm lúc trang Web vừa mở hoặc khi đóng trang Web):

<BODY onLoad="loadfunc()" onUnload="unloadfunc()">


Trang 75

BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG 5555 1/ Tạo Form chứa hộp văn bản

Mã code HTML tham khảo

<html>

<head>

<title>Text Fields</title>

</head>

<body>

<form>

First name:

<input type="text" name="firstname">

<br>

Last name:

<input type="text" name="lastname">

</form>

</body>

</html>

2/ Tạo Form chứa nút radio


Trang 76


<html>

<head>

<title>Nut radio</title>

</head> <body>

<form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

</body>

</html>

3/ Tạo Form chứa checkbox


<html>

<head>

<title>Check Box</title>

</head>

<body>

<form>

<input type="checkbox" name="bike">

I have a bike

<br>

<input type="checkbox" name="car">

I have a car

</form>

</body>

</html>


Trang 77

4/ Tạo form chứa danh sách lựa chọn


<html>

<head>

<title>Drop Down List</title>

</head>

<body>

<form action="">

cars:

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

</body>

</html>

5/ Tạo form chứa hộp soạn thảo văn bản


Trang 78


<html>

<head>

<title>Text Area</title>

</head> <body>

<form action="">

<p> Ý kiến của độc giả: </p>

<textarea rows="10" cols="30">

Gõ ý kiến vào ô này. </textarea>

</form>

</body>

</html>

6/ Tạo form chứa nút nhấn


<html>

<head>

<title>Button</title>

</head>

<body>

<form action="">

<input type="button" value="Send...">

</form>

</body>

</html>


Trang 79

7/ Tạo Form sau


<html>

<head>

<title>title goes here</title>

</head>

<body>

<form action="mailto:[email protected]" method="POST" enctype="text/plain"><br>

Your first name: <input type="text" name = "first" size="15" maxlength="60"><br>

Your student ID number: <input type="text" name = "ID"size="15" maxlength="60"><br>

<p>What age bracket are you in:<br>

<input type="radio" name="age" value="118">1 to 18 years<br>

<input type="radio" name="age" value="1925">19 to25 years<br>

<input type="radio" name="age" value="2540"> 25 to40 years<br>

<input type="radio" name="age" value="40"> Over 40<br>

</p>

<p>The best time for me to read email is <br>


Trang 80

<input type="checkbox" name="time" value="Morn">Morning <br>

<input type="checkbox" name="time" value="Afte"> Afternoon<br>

<input type="checkbox" name="time" value="Nigh"> Night<br>

<input type="checkbox" name="time" value="Mid">Midnight to dawn<br>

</p>

<br> <input type="image" src="images/submit.gif" alt="Submit!">

<br> <input type="reset" value ="clear your answers and start again.">

</form>

</body>

</html>

8/ Tạo Form sau

9/ Tạo Website chứa Form sau


Trang 81

BÀI TẬP JAVASCRIPST Phần 1: Bài tập ví dụ mẫu

Câu 1: Đây là ví dụ sử dụng các tag trong html

<html>

<head>

<title>Cau 1</title>

</head>

<body>

<script type="text/javascript">

{

document.write("<h1>This is a header</h1>");

document.write("<p>This is a paragraph</p>");

document.write("<p>This is another paragraph</p>");

}

</script>

</body>

</html>

Câu 2: Đây là ví dụ sử dụng biến trong JS

<html>

<head>


</head>

<body>


var name="QUOC PHUONG";

document.write("<b>"+name+"</b>");

document.write("<br>");

name="05TH1A";

document.write(name);

</script>

</body>

</html>

Câu 3: Đây là ví dụ sử dụng Textbox và Chương trình con

<html>

<head>


</head>


Trang 82

<body>


function chay(){

var a;

a=window.document.cau3.T1.value;

alert(" so ban vua nhap la: "+a);

}

</script>

</head>

<body>

<form name=cau3>

<input type=text name=T1>

<input type=button name=c value="chay thu" onclick="chay()">

</form>

</body>

</html>

Câu 4: Ví dụ sử dụng câu lệnh IF

<html>

<head>


</head>

<body>


function chay(){

var a;

a=window.document.cau4.T1.value*1;

if ((a%2)==0) { alert(a+ " la so chan ");}

else {alert(a+" la so le ");}

}

</script>

</head>

<body>

<form name=cau4>

<input type=text name=T1>

<input type=button name=c value="chay thu" onclick="chay()">

</form>

</body>

</html>


Trang 83

Câu 5: Ví dụ sử dụng đối tượng ngày tháng năm trong JS

<html>

<body>


var d = new Date();

var time = d.getHours();

if (time<10)

{

document.write("<b>Good morning</b>");

}

else if (time>=10 && time<16)

{

document.write("<b>Good day</b>");

}

else{

document.write("<b>Hello World!</b>");

}

</script>

<p>day la vi du su dung cau lenh if..else if...else .</p>

</body>

</html>

Câu 6: Ví dụ sử dụng câu lệnh switch

<html> <body> <script type="text/javascript"> var d=new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Friday"); break; case 6: document.write("Saturday"); break; case 0: document.write("Sunday"); break; default: document.write("Chuc dau tuan vui ve!"); }

</script> </body> </html>


Trang 84

Câu 7: Ví dụ sử dụng confirm

<html>

<head>


function disp_confirm()

{

var r=confirm("Press a button");

if (r==true) {

document.write("You pressed OK!");

}

else {

document.write("You pressed Cancel!");

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" />

</body>

</html>

Câu 8: Ví dụ sử dụng prompt

<html>

<head>


function disp_prompt()

{

var name=prompt("VUI LONG NHAP TEN CUA BAN","LE THANH LAM");

if (name!=null && name!="")

{

document.write("XIN CHAO " + name + "! How are you today?");

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body>

</html>


Trang 85

Câu 9: Ví dụ sử dụng kiểu String

<html>

<body>


var str="Hello world!";

document.write(str.indexOf("Hello") + "<br />");

document.write(str.indexOf("World") + "<br />");

document.write(str.indexOf("world")+ "<br />");

document.write(str.toUpperCase()+ "<br />");

document.write(str.length+ "<br />");

document.write(str.replace("w","W") + "<br />");

</script>

</body>

</html>

Câu 10: Ví dụ sử dụng kiểu ARRAY

<html>

<body>


var x;

var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";

for (x in mycars)

{

document.write(mycars[x] + "<br />");

}

</script>

</body>

</html>

Câu 11: Ví dụ sử dụng kiểu thiết lập thời gian

<html>

<head>


function timedMsg()

{

var t=setTimeout("alert('5 seconds!')",5000);

}


Trang 86

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!" onClick = "timedMsg()">

</form>

<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>

</body>

</html>

Câu 12: Ví dụ khác về cách sử dụng thiết lập thời gian

<html>

<head>


function timedText()

{

var t1=setTimeout("window.document.lam.txt.value='2 seconds!'",2000);

var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000);

var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000);

}

</script>

</head>

<body>

<form name=lam>

<input type="button" value="Display timed text!" onClick="timedText()">

<input type="text" id="txt">

</form>

</body>

</html>

Câu 13: Đồng hồ

<html>

<head>


function startTime()

{

var today=new Date();

var h=today.getHours();

var m=today.getMinutes();

var s=today.getSeconds();

m=checkTime(m);


Trang 87

s=checkTime(s);

document.getElementById('txt').innerHTML=h+":"+m+":"+s;

t=setTimeout('startTime()',500);

}

function checkTime(i)

{

if (i<10) {

i="0" + i;

}

return i;

}

</script>

</head>

<body onload="startTime()">

<div id="txt"></div>

</body>

</html>

Câu 14: Hiệu ứng ảnh

<html>

<head>


function mouseOver()

{

document.b1.src ="a.gif";

}

function mouseOut()

{

document.b1.src ="b.gif";

}

</script>

</head>

<body>

<a href="http://www.dayhoctructuyen.com" target="_blank">

<img border="0" alt="Chao ban" src="a.gif" name="b1" width="206" height="106"

onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

</body>

</html>


Trang 88

Câu 15: Sử dụng Select … option

<html>

<head>

<script language="JavaScript">

var phone=new Array();

phone["lam"] ="090540468";

phone["duc"] ="0905274747";

phone["thinh"] ="0904909086";

phone["hien"] ="0905146560";

phone["daotao"] ="05113519929";

function disphone(thephone,entry)

{

var num=thephone[entry];

window.document.myform.numbox.value=num;

}

</script>

</head>

<body>

<form name ="myform">

<select onChange="disphone(phone,this.options[this.selectedIndex].value);">

<option value="lam"> Lê Thanh Lâm

<option value="duc"> Nguyễn Đinh minh Đức

<option value="thinh"> Trần Văn thịnh

<option value="hien"> Đỗ Thế Hiền

<option value="daotao"> Phòng Đào tạo

</select>

<input type="text" name="numbox" value="" disabled >

</form>

</body>

</html>

Phần 2: Bài tập tự làm Bài 1:

Viết chương trình nhập vào 2 số m(dòng), n(cột) (dùng hàm prompt để nhập). Sau đó xuất ra trang Web một Table theo dạng sau:

Ví dụ (m=3,n=4)

11 12 13 14

21 22 23 24

31 32 33 34


Trang 89

Bài 2:

Viết chương trình nhập vào Mã số SV, Họ tên, Lớp (dùng hàm prompt để nhập) Sau đó hiển thị thông tin vừa nhập vào ra bảng theo dạng sau:

Bài 3:

Viết chương trình nhập vào số 3 số m, n , p (dùng hàm prompt). Sau đó tạo ra một Form gồm có m phần tử Text , n nhóm radio mỗi nhóm có 2 tùy chọn các nút radio có giá trị lần lượt là 1->2*n , và 1 Dropdown menu(Listbox) có p tùy chọn mỗi option có giá trị lần lượt là 1->p vàText của option là Text1 ->Textp.

(Lưu ý là các phần tử trên Form phải có tên khác nhau.)

Bài 4:

Viết chương trình tạo một Form như sau:

Sau đó nhập liệu vào Form khi bấm nút Nhap(button), rồi hiển thị kết quả ra dạng như sau: lấy dữ liệu trường Họ tên hiển thị vào ô YourName, Mật khẩu vào ô YourPWD


Trang 90

Bài 5:

Yêu cầu như bài 4 nhưng kiểm tra dữ liệu các trường phải không rỗng và trường Password có ít nhất 6 ký tự nếu trường nàokhông thỏa yêu cầu thì hiển thị thông báo và đưa con trỏ về ô đó để yêu cầu người sử dụng nhập lại dữ liệu.

Bài 6 :

Yêu cầu như bài 4 nhưng thêm điều kiện như sau khi Form Load lên thì con trỏ đặt trong trường UserName và nút Nhap ở chế độ không cho phép chọn . Khi người sử dụng rời khỏi trường UserName nếu kiểm tra trường này không rỗng thì nút Nhap được sáng lên (cho phép chọn)

Bài 7: Thiết kế trang như sau:

Bấm vào nút Play thì chương trình thay đổi hình thay đổi một cách ngẫu nhiên (2 giây đổi 1 hình) Bấm stop thì dừng lại

Bài 8:

Thiết kế trang như sau. Khi người sử dụng nhập vào trường số lượng và rời khỏi trường này thì ô Tổng thành tiền sẽ được cập nhật (lưu ý nếu nhập vào không phải là số thì thông báo yêu cầu nhập lại)


Trang 91

Bài 9:

Cho trang Web sau

Trong nó gồm các tùy chọn sau:

Mua vào, Bán ra là trường textbox

Loại xe là Dropdown Menu gồm các option

Text Value

Toyota ../images/mer2.jpg

KIA ../images/otoa1.jpg

Ford ../images/t2.jpg

Cập nhật cho: gồm 2 tùy chọn lần lượt có giá trị là 1 , 0 mặc định không được chọn nút nào.

Update, State là nút button.

Yêu cầu xử lý:

1) Khi trang load lên thì con trỏ nhập liệu trong trường ‘Mua vào’ và nút State ở chế độ không cho phép chọn.

2) Khi di chuyển con trỏ ra khỏi trường ‘Mua vào’ nếu như giá trị trường này là số và không rỗng thì nút State sáng lên.

3) Khi Click vào mục chọn hình quảng cáo thì sẽ thể hiện hình đó bên vùng bên.

4) Khi bấm vào nút Update và nếu nút radio ‘Vàng’ được chọn thì cập dữ liệu ở ‘Bảng tin thị trường’ trong mục ‘Vàng’ còn ngược lại thì cập nhật ở mục ‘USD’ tương ứng với trường ‘Mua vào’ của cột ‘Mua vào’ và trường ‘Bán ra’ của cột ‘Bán ra’ (Dùng inner để cập nhật)


Trang 92

Bài 10:

Cho trang web sau:

Yêu cầu: (Tự thêm các option trong Listbox và đặt giá trị trong radio)

Hãy nhập dữ liệu trên Form sau đó bấm Dang ky thì dữ liệu sẽ hiện thị vào các cột tương ứng a,b,c,d .(Lưu ý là dữ liệu trước đó vẫn còn) dùng:

Bài 11:

Thiết kế Form như sau:


Trang 93

Viết chương trình xử lý theo yêu cầu sau:

1. Khi trang load lên thì nút Nhap ở chế độ mờ và con trỏ nhập liệu ở ô họ tên.

2. Khi rời khỏi trường Lớp nếu trường họ tên và lớp khác rỗng thì nút Nhap sáng lên.

3. Bấm nút Nhap thì dữ liệu hiển thị vào bảng “Danh Sach Sinh Vien” ở bên dưới và nút Nhap lại mờ

Bài 12: Tạo một biểu mẫu mua hàng trực tuyến như hình vẽ sau:

Hình 1

- Hãy thực hiện việc kiểm tra dữ liệu như sau:

o Nếu người sử dụng không điền thông tin vào các trường: Họ và tên đệm, Tên, Địa chỉ, Thành phố

o Số điện thoại phải điền theo mẫu: (034) 344-5555


Trang 94

o Nếu người sử dụng chưa check vào ô: Chọn vào đây nếu địa chỉ của bạn khác với địa chỉ đã điền trong email thì ô text bên dưới sẽ bị mờ đi. Khi người sử dụng check vào thì sẽ hiện ra ô bên dưới cho phép đưa địa chỉ vào.

o Khi người sử dụng nhấn chuột vào ô điền địa chỉ thì dòng chữ: Hãy điền địa chỉ giao hàng vào đây nếu khác trên sẽ tự động được xóa đi.

o Kiểm tra thời gian hết hiệu lực (01/99)

- Sau khi các dữ liệu đã được điền đúng. Nếu người sử dụng nhấn vào nút Đồng ý thì mở một cửa sổ mới với các thông tin điền vào như hình vẽ 2.

Hình 2

o Nếu người sử dụng nhấn Cancel thì chuyển lại form mua hàng với yêu cầu focus vào ô Họ và tên đệm.

o Nếu người sử dụng nhấn OK thì ô thông báo như hình 3 hiện ra.

Hình 3

� BÀI TẬP LÀM THÊM Session 8, Session 12, Session 14, Session 16, , Session 18 trong tập tin HDJ-Aptech.chm


Trang 95


THIẾT KẾ WEB SỬ DỤNG DREAMWEAVER


Tóm tắt


bắt buộc

Bài tập

làm thêm



cách sử dụng phần mềm

DreamWaver trong việc hỗ

trợ thiết kế một Website

nhanh chóng và đẹp…

6.1 Định dạng Webpage

6.2 Table

6.3 Form

6.4 Layer

6.5 Flash button, flash text, rollover

images, jump menu

6.6 Bổ sung multimedia cho trang

web (âm thanh, phim Ảnh)

6.7 Frameset

6.8 Cascade style sheet- template


trong phần cuối

Chương 6.

Dựa vào bài

tập trong phần

cuối Chương

6.


Trang 96

Giới thiệu

− Dreamweaver MX là một công cụ thiết kế web chuyên nghiệp, phần cốt lõi của nó là HTML.

− Dreamweaver MX là một công cụ trực quan, trong đó có thể bổ sung Javascrip, biểu mẫu, bảng biểu và nhiều loại đối týợng khác mà không cần viết một đoạn mã nào.

− Dreamweaver MX có thể thiết kế bằng chế độ Design view hoặc Code view hoặc Code and Design.

Cài đặt

− Dreamweaver 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

− Sau khi cài đặt, khởi động Draemvaerver MX: Start� Programs� Macromedia �

Macromedia Dreamweaver MX 2004

Màn hình Dreamweaver

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

− Common: Chèn các đố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

− Forms: 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 dạng Code

− Show code view: Xem dạng trang HTML

− Show Design view: Xem trang dạng thiết kế, sử dụng các công cụ của Dreamwerver

− Show code and design view: Chia cửa sổ làm 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 web

− 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 đó

4. Panel groups: nhóm các Panel cho phép quản lý các đối tượng trong trang Web

− Bật / tắt các thanh Panel: Chọn menu Window � Chọn 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

5. Status bar: Thanh trạng thái, nằm dưới đáy của Document Window, hiển thị Tag Selector, Window size, Document size và Download time.


Trang 97

6.1 ĐỊNH DẠNG WEBPAGE

Tạo mới Website

Trong Document Window, chọn Site� Manage sites…�New � Site� xuất hiện hộp thoại Site Definition � Chọn Tab Advance, trong mục Local info:

− Site name: đặt tên WebSite

− 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

o Nhập đường dẫn hoặc

o Click vào biểu tượng Folder, Chỉ đường dẫn đến folder lưu website

− Default Images folder: khai báo đường dẫn đến thư mục chứa các hình ảnh của Website, 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

Kiểm tra website đã tạo

− Một website sau khi tạo thành công thì trong site panel phải có nhánh thư mục như sau trong đó các biểu tượng file/folder có màu xanh

Mở một site đã tạo

− Cách 1: 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ở

− Cách 2: Chọn menu Site� Manage Sites � Chọn tên Site muốn mở � Done

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 Definition� thực hiện hiệu chỉnh � OK � Done

6.2 TABLE

Cách kẻ bảng: Insert/Table, hoặc click nút Table.

− Rows: số dòng cần chèn.

− Columns: số cột cần chèn.

− Width: chiều rộng của bảng theo số điểm pixels hoặc phần trăm

− Border: độ dầy của đường viền bảng.

− Cell Padding: khỏang cách nội dung ô và biên ô.

− Cell Spacing: khoảng cách giữa các ô.


Trang 98

Hiệu chỉnh bảng

− Chèn thêm dòng, cột vào bảng:

o Đặt dấu nháy tại vị trí cần chèn

o Modify � Table� Insert row/Insert column

− Cột mới mặc định chèn vào bên trái dấu nháy

− Dòng mới mặc định chèn vào bên trên dấu nháy

− Xoá dòng, cột, bảng

o Chọn dòng, cột, bảng cần xóa

o Edit/Cut. (Ctrl +X) hoặc nhấn delete

− Nối các ô trong bảng:

o Chọn các ô cần nối

o Modify � Table � Merge Cells.

− Tách các ô trong bảng:

o Chọn ô cần tách

o Modify�Table� Splits Cell

� Split Cell into Columns: tách ô thành nhiều ô theo cột.

� Split Cell into Rows: tách ô thành nhiều ô theo dòng.

� Number of columns, Rows: xác định số ô cần tách theo cột, dòng.

Thuộc tính của bảng

− Chọn table� mở Properties inspector.

o Rows, Cols : số dòng, số cột.


Trang 99

o W, H : chiều rộng, chiều cao của bảng.

o Cellpad : khoảng cách văn bản đến ô trong bảng.

o Cellspace : khoảng càch giữa các ô trong bảng.

o Align : canh lề bảng, phải, trái, giữa.

o Border : độ dày nét đường viền bảng.

o Bg color : màu nền của bảng.

o Bg image : ảnh nền bảng.

o Brdr color : màu đường viền bảng.

6.3 FORM

TẠO FORM

− Chọn menu Insert/ Form.

− Đường khuôn viền không liền nét màu đỏ đại diện cho giới hạn trong form. Mọi thành

phần của form đều phải nằm trong khuôn viên này.

− Trong form cần thiết phải có 2 nút đặc biệt “SUBMIT” và “RESET”

CÁC ĐỐI TƯỢNG TRÊN FORM

Có 2 cách để chèn các đối tượng vào form

− Cách 1:Chọn tab form trên Insert Panel.

− Cách 2:Chọn menu Insert� Form�Chọn đối tượng

1. TEXT FIELD: Hộp văn bản

Cách tạo:

− Đặt con trỏ trong đường viền form.

− Chọn thực đơn Insert� Form� Text field


Trang 100

Thuộc tính củaTextfield :

− Chart Width : Số ký tự cho chiều dài ô.

− Max Chars : Số ký tự nhiều nhất có thể nhận.

− Init Value : Nội dung khởi tạo của ô nhập liệu.

− Single Line : Ô nhập liệu một dòng.

− Multi line : Ô nhập liệu nhiều dòng.

− Password : Ô nhập các loại mật mã, khi nhập từng ký tự nhập được thay bằng dấu “*”.

2. RADIO BUTTON

Trong 1 nhóm các nút chọn chỉ được chọn 1 tùy chọn. Các nút radio thuộc cùng nhóm phải có cùng tên nhóm (Group), nhưng khác nhau về giá trị(value).

Cách tạo:

− Đặt dấu nháy tại vị trí muốn chèn

− Chọn Insert� Form� radio Button

Thụôc tính của Radio button:

− Checked value : Giá trị từng nút đơn trong nhóm.

− Initial State : trạng thái ban đầu của nút.

− Checked: Nút đựơc chọn.

− Unchecked: Nút chưa được chọn.

3. RADIO GROUP: Tạo một nhóm nút radio

Cách tạo:

− Chọn Insert�Form�Radio

Thụôc tính của Radio group:

− Name: Nhập tên nhóm

− dấu “+”: thêm nút, dấu “-“: xoá nút.

− Label là tên nhãn nút.

− Value là giá trị gởi về cho chủ web.

− Layout Using: Bố cục đang sử dụng

− Line break: Các nút xuống dòng

− Table: Các nút nằm trong một bảng.

4. CHECKBOX: Tạo một nhóm các tùy chọn, cho phép chọn nhiều tùy chọn cùng một lúc hoặc không chọn gì cả.

Cách tạo:

− Chọn Insert� Form Objects� Checkbox.

− Hoặc click nút Checkbox trên thanh công cụ


Trang 101

5. LIST/ MENU (Dropdown menu)

− Chọn menu Insert/ Form object/ List/ Menu.

Trong thanh properties :

− Mục Type:

o Menu : Dropdown menu

o List: Listbox

− Click nút List Values: Nhập nhãn và giá trị cho List/Menu

o “+” để thêm mục, “-“ để xoá mục chọn.

6. TEXTAREA: TextArea dùng nhập các thông tin, dữ liệu dài gồm nhiều dòng, thường dùng cho các ghi chú, ý kiến, cảm nghĩ, thắc mắc… của người duyệt web.

− Chọn menu Insert�Form object� Textarea.

TextArea Properties:

− Text field : tên ô nhập liệu nhiều dòng.

− Char Width : Số ký tự cho chiều dài ô.

− Num lines : Số dòng cần hiển thị.


Trang 102

− Wrap : Văn bản tự xuống dòng.

− Init Value : Giá trị khởi tạo của ô

7. FILE FIELD

Gửi kèm tập tin:Trong form, ngoài các thông tin ngắn gọn mà người tham quan có thể nhập trực tiếp, nếu họ muốn gởi một đoạn văn bản nhiều dòng, hay một hình ảnh minh họa thì ta nên chèn thêm file field.Đây là thành phần form giúp gửi kèm một tập tin theo các thông tin nhập.

− Chọn menu Insert�Form objects�File field

8. BUTTON

Chọn menu Insert� Form object�Button.

Các thuộc tính của Button:

− Button name: tên button

− Value: Gán nhãn trên button.

− Action:

o Submit form.: nút submit

o Reset form: nút reset

o None: button do người sử dụng gán action do người sử sụng tự tạo

9. IMAGE FIELD

Chọn menu Insert�Image field

Hoặc click nút Image field trên thanh công cụ

Image field properties:

− ImageField:

o “Submit” chọn ảnh làm nút submit

o “Reset” chọn ảnh làm nút reset.

6.4 LAYER

Giới thiệu

− Layer là một thành phần mới trong thiết kế Web, nó có thể chứa nội dung văn bản, hình ảnh xếp chồng lên nhau, nổi trên trang và chuyển động rất linh hoạt

− Layer thường được sử dụng để thiết kế trang có các hiệu ứng đặc biệt như chữ rơi, ảnh bay,…

− Điểm bất lợi của Layer là không hiển thị trên các trình duyệt cũ như IE4.0, Nestcape 4.0

Cách tạo Layer trên trang

Có thể tạo Layer bằng một trong các cách sau:

Cách 1:

− Chọn Standard Mode

− Click nút Draw Layer, drag chuột vẽ Layer


Trang 103

Cách 2:

− Chọn menu Insert� Layout Objects � Chọn Layer

Hiệu chỉnh Layer

− Chọn layer, Layer được chọn sẽ xuất hiện 8 Handle xung quanh

Thay đối kích thước của Layer:

− Chọn Layer cần hiệu chỉnh kích thước

− Click chuột vào một trong các Handle, Drag chuột để thay đổi kích thước

− Hoặc nhập thông số trực tiếp vào Properties Inspector

Chèn nội dung vào Layer:

− Nếu nội dung là văn bản thì nhập trực tiếp vào Layer

− Nếu nội dung là hình ảnh thì drag chuột chọn hình trong thư mục Image thả vào Layer (hoặc chọn Insert Image)

Xếp chồng các Layer:

− Khi cần hiển thị nhiều ảnh trên trang, nhưng không đủ chổ, ta có thể xếp chồng lên nhau, sau đó cho xuất hiện từng lớp một hoặc cho từng lớp Layer bay ra khỏi màn hình, điều này có thể thực hiện được khi kết hợp Layer, Timeline và Behaviors

Thứ tự các Layer:

− Mỗi lớp Layer đều có thuộc tính Z-Index hiển thị thứ tự của các lớp Layer, lớp Layer sau sẽ che khuất lớp Layer trước

− Nếu nó có cùng toạ độ, có thể thay đổi trình tự các lớp layer bằng cách:

o Chọn Lớp Layer cần thay đổi thứ tự

o Trong Properties Inspector, nhập thứ tự mới trong mục Z-index

Ẩn hiện một Layer:

− Khi không muốn xem Layer nào thì ẩn Layer đó bằng một trong các cách sau:

o Trong Properties Inspector, tại thuộc tính Vis: chọn Hidden.

o Hoặc mở Layer Panel.


Trang 104

6.5 FLASH BUTTON, FLASH TEXT, ROLLOVER IMAGES, JUMP MENU

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

Hiệu chỉnh thuộc tính của Flash: chọn hình flash� hiệu chỉnh thuộc tính trong thanh

properties inspector

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 Button

o Sample: Ví dụ mẫu nút Flash

o Style: danh sách tên các nút mẫu Flash

o Button Text: văn bản trên nút Flash

o Font: kiểu chữ, Size: Cở chữ

o Link: Địa chỉ liên kết đến

o Target: Tên khung trang liên kết

o Bg: Màu nền

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 chi 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


Trang 105

Chèn nút biến đổi hình (Rollover Image)

− Trước hết phải có 2 tập tin ảnh, n1.gif màu cam, n2.gif màu xanh trong folder Images của Site.

− Đặt dấu nháy tại vị trí cần chèn nút động

− Insert � Image Objects�Rollover Image, xuất hiện hộp thoại Rollover Image

o Original Image: ảnh gốc

o Rollover Image: ảnh khi rê chuột vào

o Alternate Text: câu ghi chú kèm theo

o When Click, go to URL: Địa chỉ của trang liên kết đến

Ả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ữ màu sáng

− Ảnh nền với số Kb càng nhỏ thì trang hiển thị càng nhanh

Cách tạo ảnh nền:

− Đặt trỏ trong trang

− Chọn Modify � Page Properties

o Bacground Images : nhập đường dẫn đến tập tin ảnh làm nền

o Repeat: Chọn kiểu lặp

Jump Menu

Chức năng:

Công cụ xếp gọn danh sách các liên kết lại trên một dòng, khi cần chọn liên kết nào, người tham quan thả danh sách liên kết xuống, rồi chọn trong số đó. Cách này giúp những trang web có quá nhiều liên kết có thể thu hẹp diện tích, tạo thông thoáng cho web hơn. Đôi khi việc chọn liên kết này rất nhạy, nó sẽ nhảy nhanh đến các trang liên kết, để khắc phục, ta có thể chèn thêm nút GO kế bên. Chọn liên kết trong danh sách xong phải nhấn nút GO để xác nhận.

Cách tạo:

− Chọn thực đơn Insert� Form Objects� Jump Menu.


Trang 106

Hộp thoại insert Jump Menu

− Text: Đặt nhãn cho jum menu

− When selected, go To URL : Nhập tên trang liên kết �Kết quả sẽ xuất hiên trên Menu Items.

− Dấu “+” hoặc “–“ để thêm hoặc xoá một Menu Item.

− Mũi tên lên hoặc xuống để thay đổi trình tự các Menu Items.

− Menu items: danh sách các menu được nhập trong text.

− Open URL In: Target của khung chính hiển thị trang.

− Menu name: Tên của Jum Menu.

− Select Frist Item After URL Change: Chọn Item đầu tiên sau khi liên kết.

− Insert Go Button After Menu: chèn thêm nút GO.

Hiệu chỉnh Jump Menu

− Khác với các thành phần khác của form, khi cần hiệu chỉnh tên Menu Item, hay liên kết tương ứng, ta không xem ở Properties Inspector mà phải mở Behaviors.

− Chọn Jump Menu.

− Chọn menu Window� Behaviors� xuất hiện Design Panel của Behaviors.

− Double click vào tên Action: Jump Menu.


Trang 107

− Hộp thoại Jump menu xuất hiện cho phép hiệu chỉnh.

Kiểm tra liên kết của Jump Menu:

− Để kiểm tra liên kết của Jump Menu, ta cần xem trang trong trình duyệt, rồi ấn vào tên Menu Item trong Jump Menu để liên kết đi.

− File� Preview in browser, hoặc F12.

− Click vào dòng Menu Item, tên trang liên kết đến.

6.6 BỔ SUNG MULTIMEDIA CHO TRANG WEB (ÂM THANH, PHIM ẢNH)

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

Hiệu chỉnh thuộc tính của ảnh:

− Chọn ảnh đã chèn

− Window� Properties

− Image: tên ả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


Trang 108

− 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 cho ảnh

− Resample:Lưu lại kích thước đã điều chỉnh

− Optimize in Fireworks: chuyển qua Macromedia FireWoks để hiệu chỉnh

− Map : bảng đồ liên kết ảnh

− 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 đến ả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…

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 kí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.

Tạo Web Photo album

Chức năng: Tạo bộ sưu tập các hình ảnh hay cuốn Album giúp người sử dụng quản lý và chọn xem từng hình một cách nhanh nhất

Cách tạo: Để thực hiện chức năng này cần phải cài đặt Macromedia Fireworks và một thư mục chứa các hình photo.

− Chọn Commands � Create Web Photo Album


Trang 109

− Xuất hiện hộp thoại Create Web Photo Album

− Nhập các thông số� click OK, chờ kết quả, xuất hiện thông báo Album đã được tạo.

− Trong Site Panel xuất hiện thêm các folder:

o Folder Thumbnail: chứa các file JPG

o Folder Page chứa các file .HTM cho mỗi Image tương ứng (trang con)

o Tập tin Index.htm trong Folder chứa Website, đây là tập tin Album chính

o Mở tập tin Index.htm và di chuyển giữa các trang bằng các Hyperlink: Next Previous, Home.

6.7 FRAMESET

Trang khung (frameset)

− Là trang HTML đặc biệt. Trang khung không mang nội dung, không có thẻ <BODY>. Trang khung chia viền khung cho trang web.

− Muốn tạo trang khung ta phải xác định rõ các yêu cầu sau:

o Số khung (frame) trong một trang khung (frameset)

o Tên cho từng khung cụ thể.

o Các tập tin HTML làm nội dung cho từng khung.

Cách tạo frameset và liên kết trang

Dreamweaver tạo sẵn một số dạng trang khung chuẩn, ta có thể chọn và sử dụng chúng một cách dễ dàng. Nếu không có khung như ý thích, ta có thể chọn trang khung gần giống nhất rồi tự hiệu chỉnh hay thiết kế lại.

Cách tạo:

− Chọn thực đơn File/ New…

− Chọn Frameset � Chọn dạng trang khung trong khung Framesets

− Xem mẫu trang khung bên cột Preview, click Create.

Mở frames Panel:

Frames Panel giúp ta thao tác với từng khung một.

− Windows� Frames.

− Hoặc nhấn phím Shift + F2.

Thao tác trên Frames Panel:

Tuỳ thuộc vào thao tác trên Frames Panel mà Properties Inspector tương ứng cung cấp thông tin phù hợp


Trang 110

− Click vào giữa khung, hay tên khung trong Frames panel để chọn khung cần làm việc, hiệu chỉnh như đổi tên khung, dổi nội dung tập tin khung, thanh cuộn, màu nền….

− Click đường viền ngoài cùng chọn cả trang khung, click vào đường viền giữa khung trên, khung dưới chọn dòng khung. Click đường viền giữa khung trái, phải chọn được cột khung. Sau thao tác chọn là thay đổi mối quan hệ giữa 2 khung, thường là kích thước, tỉ lệ khung, đường viền khung.

Hiệu chỉnh trang khung

Chia khung

− Chọn tên khung trong Frame Panel cần chia.

− Chọn thực đơn Modify� Frameset.

− Chọn Split Frame Left/ Right / Up / Down để chia một khung thành 2 khung theo ý muốn.

Xoá khung

− Đưa trỏ chuột đến biên khung cần xoá.

− Kéo biên khung đó ra khỏi màn hình, hoặc kéo sang hướng biên của khung cha.

Hiệu chỉnh thuộc tính trang khung

Thay đổi kích thước khung:

− Đặt con trỏ chạm vào biên khung.

− Drag chuột và kéo biên đến vị trí mới.

Thay đổi tên khung :

− Chọn khung cần đổi tên.

− Nhập tên mới trong ô Frame Name.

Thay đổi nội dung đại diện trong khung:

− Đặt trỏ trong khung cần đổi nội dung.

− Nhập tên tập tin .html mới vào Site Panel.

− Hoặc click Browse to file… để tìm tập tin thay thế..


Trang 111

Thay đổi biên cho khung:

− Margin Width.

− Margin hight

Thay đổi kích thước khi xem:

− Chọn No Resize, không cho phép thay đổi kích thước trước khi duyệt trang khung.

Hiển thị thanh cuộn: Tại mục Scroll

− Yes: luôn luôn hiện thanh cuộn.

− No: không hiển thị thanh cuộn, dù trang nội dung dài nhiều dòng.

− Auto: Thanh cuộn tự xuất hiện khi nội dung dài hơn trang.

− Default: Tuỳ thuộc vào cài đặt mặc định.

Không viền nét đường khung:

− Border =No: không có đường viền

− Border = yes: có đường viền

− Width : Chọn kích thước nét viền

− Border Color: Tô màu viền khung

Lưu trang khung:

− Lưu cả khung trang:

o Chọn viền ngoài cùng trang khung trong Frame Panel.

o File� Save Frameset As… đặt tên trang khung.

o Chọn File� Save Frameset: cập nhật thông tin

− Lưu trang đại diện khung :

o Đặt con trỏ vào khung cần lưu.

o File�Save Frameset As….

o Nếu chỉ cần cập nhật thông tin nội dung trong khung thì chọn File�Save Frameset

6.8 CASCADE STYLE SHEET- TEMPLATE

Giới thiệu:

− Dreamweaver cung cấp công cụ để tạo style một cách đơn giản và nhanh chóng.

− CSS (Cascading Style Sheets) 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

Tạo CSS cục bộ: Style được tạo trong trang hiện hành

Cách tạo:

− Chọn Text �CSS Styles� New…�Xuất hiện hộp thoại New CSS Style.

− Hoặc Window� CSS Style, mở CSS Panel, Click nút New CSS rule


Trang 112

o Selector type: chọn loại CSS

o Define in: Chọn This document only: Tạo style (dạng internal style), sử dụng trong trang hiện hành.

Có 3 loại style:

− Class: Style dạng lớp

o Name : Nhập tên lớp, bắt đầu bằng dấu (.)

− Tag: Định nghĩa tag

o Tag: Chọn tên tag

− Advanced: Định dạng các tag riêng biệt

o Selector: Nhập #IDName (bắt đầu bằng dấu #)

− Chọn xong, Click OK � Cửa sổ CSS Style definition :

o Khung category: Chọn nhóm định dạng

o Khung style: chọn các định dạng

− Chọn xong, Click Apply � OK

− Trong CSS Panel xuất hiện Style vừa tạo


Trang 113

Cách sử dụng Style 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

− Hoặc chọn tên style trong Properties inspector

− Nếu loại tag định dạng riêng biệt thì đối tượng sử dụng style phải có tên định danh ID

Tạo một tập tin CSS: Tập tin kiểu .CSS là một tập tin phụ trợ cho webSite, nằm trong thư

mục root của Site.

Cách tạo:

− Text� CSS Styles� New

− Trong hộp thoại New CSS Style

o Selector Type: Chọn loại style

o Define in: Chọn 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

− Cửa sổ CSS Style definition :

o Khung category: Chọn nhóm định dạng

o Khung style: chọn các định dạng giống style cục bộ

− Chọn xong, Click Apply � OK

− Trong CSS Panel xuất hiện tập tin Style vừa tạo


Trang 114

Áp dụng CSS 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…

− 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

Hiệu chỉnh một CSS:

− Click phải trện tên CSS trong CSS Style Panel

− Chọn Edit, thực hiện hiệu chỉnh

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 chuột phải, chọn Delete

BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG BAØI THÖÏC HAØNH CHÖÔNG 6666

Hướng dẫn sử dụng Dreamweaver

Attach Style Sheet

New Style Sheet

Delete Style


Trang 115

1. Tạo mới trong Dreamweaver

Nhấn File � New

Chọn HTML

2. Giao diện chính làm việc của Dreamweaver

Chú thích:

1:................................................................................. làm việc trên code (code) 2: ........... làm việc trên giao diện và trên code cùng lúc trên 02 vùng liền nhau 3: ......................................................................làm việc trên giao diện (design) 4: ................................................................................. làm việc với bảng (table) 5: ......................................................................... làm việc với hình ảnh (image) 6: .......................................................................... Nội dung Title của trang web


Trang 116

3. Lưu file trong Dreamweaver

Vào menu File , chọn Save..

Chú thích: 1: chọn đường dẫn ổ đĩa để lưu bài 2: gõ tên file cần lưu 3: đuôi tập tin ưu tiên. Nếu chúng ta không gõ phần mở rộng cho tập tin thì lấy đuôi ưu tiên là .htm Ví dụ: gõ tên index.html -> lưu file với đúng tên index.html

gõ tên index -> tự động lưu file với tên index.htm


Trang 117

4. Làm việc với bảng (table)

Tạo mới bảng: Vào menu Insert -> Table

5. Hình ảnh trong Dreamweaver

Chèn hình ảnh: vào menu Insert ->Image


Trang 118

Chú thích: 01: ............................................................................độ cao, rộng của hình(V,H) 02: ....................................................................................... đường dẫn của hình 03: ......................................................................................... ghi chú trong hình 04: .................................................................................... phục hồi kích cỡ hình 05: ........................................................................................... chế độ canh hình 06: ...................................................................................... đường viền của hình 07: ......................................................................... chế độ canh chữ so với hình 08: ............................................................... sử dụng hình ảnh làm bảng đồ link 09: ..................................................................... khoảng cách bề cao so với chữ 10: ................................................................. khoảng cách bề ngang so với chữ 11: ...................................................................................dùng hình làm liên kết

Thuộc tính của trang ( thuộc tính của thẻ body)


Trang 119

Dùng Dreamweaver thiết kế các website sau Bài 1:

Bài 2:


Trang 120

Bài 3:

Bài 4: a) Tạo 2 tập tin HTML như hình 4.1 và hình 4.2 sau

Hình 4.1 Hình 4.2

b) Tạo các điểm hotspot trên tập tin hình world.gif tại vị trí xung quanh khu vực nước Ấn Độ trong tập tin World.htm. Liên kết các hotspot đến tập tin India.htm chứa bản đồ chi tiết nước Ấn Độ.

Hướng dẫn


Trang 121

A) World.htm:

1. Chọn Insert | Image hoặc nhấn nút Insert Image trong Objects Panel. Hộp thoại sau xuất hiện.

2. Chọn hình “world.gif” và nhấn Select. Hình được chèn vào trong tài liệu.

3. Để lưu file, ta nhấn File | Save và gõ “World.htm” trong mục file name.

4. Lặp lại các bước trên để tạo tập tin “India.htm” và chèn hình “India.gif” vào.

B)

1. Chọn hình World.gif. Trong Property Inspector, bạn sẽ nhìn thấy mục Map.

2. Trong mục Map, đặc tả tên cho Hotspot.

3. Chọn công cụ ‘Polygon Hotspot Tool’ và vẽ một hotspot trên India như hình sau.

4. Khi chúng ta cho hotspot là một ảnh, Property Inspector thay đổi như hình.


Trang 122

5. Cho hotspot liên kết đến tập tin India.htm hoặc click vào biểu tượng folder và chọn vị trí chứa tập tin sau đó gõ INDIA vào hộp Alt dùng để chú thích khi bạn di chuyển trên khu vực bản đồ nước Ấn Độ sẽ hiện chữ INDIA.

Bài 5:

Bài 6:


Trang 123

Bài 7:

Bài 8:


Trang 124

Bài 9: Trang Gioithieu.htm


Trang 125

Trang LienHe.htm

Bài 10:


Trang 126


ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE

Tóm tắt


bắt buộc

Bài tập

làm thêm


cung cấp học viên biết

cách đăng ký host và đưa

Website lên trên mạng

Internet…

7.1 Đăng ký Host

7.2 Thiết kế Website mẫu


trong phần cuối

Chương 7.


trong phần cuối

Chương 7.


Trang 127

7.1 ĐĂNG KÝ HOST

1. Vào địa chỉ http://www.freeservers.com để đăng kí website miễn phí với địa chỉ truy cập có

dạng http://<yourname>.freeservers.com

2. Gõ vào địa chỉ mà bạn dự định đăng kí tại ô yourname. Sau đó click Go. Màn hình tiếp

theo sẽ hiện ra, bạn chọn mục cuối cùng 100% Free Hosting Option và click vào SignUp

3. Sau đó bạn hãy điền vào các thông tin liên quan cần thiết như Họ tên, mật khẩu, email, …

Cuối cùng gõ vào ARTK để chắc rằng bạn đã đồng ý với các qui định của FreeServers khi

cung cấp dịch vụ miễn phí này.


Trang 128

4. Nếu đăng kí thành công, màn hình sau sẽ hiện ra để cung cấp cho bạn một số lựa chọn khi

xây dựng website của mình.

7.2 THIẾT KẾ MỘT SỐ WEBSITE MẪU

1. Thiết kế website theo mẫu sau (http://greetings.yahoo.com)


Trang 129

2. Thiết kế website theo mẫu sau (http://www.flowers.com)

3. Thiết kế website theo mẫu sau (http://shopping.yahoo.com)


Trang 130

4. Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn)


Trang 131

5. Thiết kế website theo mẫu sau (http://www.bttvn.com )

Với mỗi trang web đã xem hãy chú ý các vấn đề sau:

- Cách bố trí các bảng (table)

- Cách sử dụng font chữ

- Cách chèn vào các hình ảnh để trang trí

- Cách định nghĩa các thuộc tính như màu chữ, màu nền, ...

- Phần tĩnh (không thay đổi) mỗi khi click vào các hyperlink chuyển qua một nội dung

mới

Từ các trang web trên, hãy tự thiết kế các trang cho website của mình.

THIEÁT KEÁ WEBdulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/... · o HTML: Ngôn ng ữ...

Documents

Transcript of THIEÁT KEÁ WEBdulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/... · o HTML: Ngôn ng ữ...