Giáo án - Bài giảng: Công nghệ thông tin: Làm thế nào để trở thành lập trình viên Website chuyên nghiệp? (tài liệu)

Tài liệu tham khảo Môn Thiết kế Web 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ự t

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

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

BÀI THỰC HÀNH CHƯƠNG 3 33

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

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

BÀI THỰC HÀNH CHƯƠNG 4 62

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

BÀI THỰC HÀNH CHƯƠNG 5 75

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

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

CH CHÖÔ ÖÔ ÖÔNG NG NG 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

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

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

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

CHÖÔ CHÖÔNG NG NG 2 2

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

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

Dựa vào bài tập trong phần cuối Chương 2

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

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

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

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

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

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

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

• 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,…

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

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

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

“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

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

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

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

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

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

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

CHÖÔ CHÖÔNG NG NG 3 3

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

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

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

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

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

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

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

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

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

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

Để 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)

•` 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>

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

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)

đị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>

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

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)

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:

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>

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

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:

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:

YELLOW LIGHTYELLOW WHITE

BLACK GRAY BROWN

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

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

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

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

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ì:

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

• 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

trình duyệt)

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

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

Microsoft thiết kế để quét ảnh từ máy quét cũng như tạo các ấn phẩm

lượng cao

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

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

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

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

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

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

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ể

ALIGN = TOP/ MIDDLE/

BOTTOM/ LEFT/ RIGHT

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

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

(tính theo pixel)

theo pixel) theo bốn phía trên, dưới, trái, phải

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

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:

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

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

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

Ý nghĩa các tham số:

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

BORDERCOLORDARK

BORDERCOLORLIGHT

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

của bảng

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

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

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)

4/ Tạo trang web Emphasis.htm

5/

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

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

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

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

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>

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

4/ Horizontal.htm

5/