Giáo trình Thiết kế web (Nghề Lập trình máy tính)

Mục tiêu thực hiện Học xong bài này học viên sẽ có khả năng: - Xây dựng hệ thống thông tin thể hiện trên trang WEB bằng SITE MAP - Một số kỹ thuật về thiết kế và xây dựng các biểu tượng:

Trang 1

Trình độ (lành nghề)

Trang 2

Giáo trình thiết kế web

Tuyên bố bản quyền :

Tài liệu này thuộc loại sách giáo trình

Cho nên các nguồn thông tin có thể được

phép dùng nguyên bản hoặc trích dùng cho

các mục đích về đào tạo và tham khảo

Tổng Cục Dạy Nghề cám ơn và hoan

nghênh các thông tin giúp cho việc tu sửa

và hoàn thiện tốt hơn tàI liệu này.

Địa chỉ liên hệ:

Dự án giáo dục kỹ thuật và nghề nghiệp

Tiểu Ban Phát triển Chương trình Học liệu

………

Trang 3

Trong giai đoạn viết giáo trình chúng tôi cũng đã có những sự điều chỉnh

để giáo trình có tính thiết thực và phù hợp hơn với sự phát triển của lĩnh vựccông nghệ thông tin

Ngày nay Internet đã phổ biến rộng khắp trên toàn thế giới ,thông tinchính mà chúng ta truy nhập trên dịch vụ World Wide Web là các trang Web.Trang Web là tài liệu cơ bản trên dịch vụ World Wide Web.Vì vậy nhu cầu thiết

kế web ngày càng phát triển rộng rãi trên toàn thế giới.Nhiều trường học đãnhận ra được điều này và đã tạo ra những khoá học thiết kế web như một phầnchính yếu của hệ thống thông tin tin học hoá và các chương trình khoa học máytính.Giáo trình này dự kiến sẽ cung cấp một số kiến thức nền tảng về thiết kếwebsite.Mục tiêu của giáo trình là cung cấp cho sinh viên các kỹ năng thiết kếweb cơ bản,chu trình thiết kế và tạo ra một website theo đúng trình tự vàphương pháp

Trong quá trình biên soạn, mặc dù đã cố gắng tham khảo nhiều tài liệu

và giáo trình khác nhưng tác giả không khỏi tránh được những thiếu sót và hạnchế Tác giả chân thành mong đợi những nhận xét, đánh giá và góp ý để cuốngiáo trình ngày một hoàn thiện hơn

Tài liệu này được thiết kế theo từng mô đun/ môn học thuộc hệ thống mô

đun/môn học của một chương trình, để đào tạo hoàn chỉnh nghề Lập trình máy tính ở cấp trình độ bậc cao và được dùng làm Giáo trình cho học viên trong

các khoá đào tạo, cũng có thể được sử dụng cho đào tạo ngắn hạn hoặc chocác công nhân kỹ thuật, các nhà quản lý và người sử dụng nhân lực thamkhảo

Đây là tài liệu thử nghiệm sẽ được hoàn chỉnh để trở thành giáo trìnhchính thức trong hệ thống dạy nghề

Đà lạt tháng 10 năm 2007

Trang 4

MỤC LỤC

1.- -Lời tựa -3

2 Mục lục -4

3 Giới thiệu về mô đun 5

4 Nội dung chính của mô đun -5

5 Liệt kê các nguồn lực cần thiết cho mô đun -6

6 Kế hoạch và cách thức đánh giá kết quả học tập mô đun -8

-

-5

7 Bài 1 – Phác Thảo Web Sites -9

8 Bài 2 - Thiết Kế Tổng Thể Một Web Sites -12

9 Bài 3 – Xây Dựng Prototype -21

10 Bài 4 - Thiết Kế Web Với Các Đối Tượng Đơn Giản -23

11 Bài 5 - Thiết Kế Web Với Các Đối Tượng Phức Tạp -28

12 Bài 6 - Giới Thiệu Các Công Cụ Thiết Kế Và Tổ Chức File Của Site Map 47 13 Bài 7 - Kiểm Thử Và Chuyển Tải Trang Web Lên Server -50

14 Bài 8 -Thiết Kế Web Theo Chủ Đề -60

-15 Đáp án các câu hỏi và bài kiểm tra -139

16 Các thuật ngữ chuyên môn -154

17 Tài liệu tham khảo -155

Trang 5

GIỚI THIỆU VỀ MÔ ĐUN/MÔN HỌC

Vị trí, ý nghĩa, vai trò mô đun/môn học :

Ngày nay internet đã phổ biến rộng khắp trên toàn thế giới,là một kênh thông tin,giải trí,mua bán,học tập được đa số dân chúng trên thế giới sử

dụng.Vì vậy môn thiết kế web là một môn không thể thiếu trong ngành tin học

Mục tiêu của mô đun:

Sau khi học xong môn học này học viên có khả năng:

Xác định được các yếu tố cấu thành 1 Web site, xác định đúng mục đích yêu cầu của Web được một khung site, đặt Web Site vào 1 trong 4 đời công nghệ của Web site Biết thiết kế Web site bắt mắt , dễ dàng sử dụng thoả mãn các yêu cầu thực tế

Mục tiêu thực hiện của mô đun:

Học xong môn học này học viên có khả năng:

- Thiết kế được các trang web và trình bày tổng hợp trên trang web chính baogồm thông tin, hình ảnh, âm thanh liên kết với các kiểu định dạng khác nhau

- Sử dụng được các kỹ thuật màu sắc

- Xây dựng được hệ thống tổ chức thông tin từ các yêu cầu thực tế Xây dựng được hệ thống Site Map phục vụ việc xây dựng trang Web

Lập được bộ hồ sơ thiết kế về thi công trang Web

Nội dung chính của mô đun (Có thể là danh sách các bài học) :

Chủ đề chính :

- Phác thảo kế hoạch xây dựng Web Site

- Thiết kế hệ thống thông tin Web Site

- Xây dựng Prototype và đánh giá hệ thống Web Site

- Tích hợp các phần tử căn bản của Web Site

- Tích hợp các phần tử Multimedia cùa Web Site

- Chọn công cụ và tổ chức Files

- Kiểm thử và chuyển tải Web Site lên Server

- Sử dụng các công cụ thiết kế Web

- Tích hợp các phần tử có trong Web Site (hình ảnh, âm thanh, chữ từ các form, các database ) có hiệu quả tạo được tính logic và tính hấp dẫn của Web Site

Trang 6

Sơ đồ quan hệ theo trình tự học nghề

Lập trình căn bản

Mạng căn bản

Kỹ năng Giao tiếp

Kỹ năng

Internet & WWW

Phần cứng máy tính

Lập trình nâng cao

Lập trình hướng đối tượng

Lập trình Web

Phân tích thiết

kế hệ thống

Thiết kế hướng đối tượng

Ứng dụng CNTT trong doanh nghiệp

Công nghệ phần mềm

Hướng dẫn đồ

án tốt nghiệp

Công nghệ Đa phương tiện Lập trình Visual Basic

Quản lý dự án phần mềm

Thi tốt nghiệp

Hệ cơ sở dữ liệu Môi trường PT

Phần mềm

Trang 7

Ghi chú:

Thiết kế web là mô đun cơ bản và bắt buộc Mọi học viên phải học và đạt kết quả chấp nhận được đối với các bài kiểm tra đánh giá

và thi kết thúc như đã đặt ra trong chương trình đào tạo

Những học viên qua kiểm tra và thi mà không đạt phải thu xếp cho học lại những phần chưa đạt ngay và phải đạt điểm chuẩn mớiđược phép học tiếp các mô đun/ môn học tiếp theo

Học viên, khi chuyển trường, chuyển ngành.nếu đã học ở một cơ sở đào tạo khác rồi thì phải xuất trình giấy chứng nhận; Trongmột số trường hợp có thể vẫn phải qua sát hạch lại

Trang 8

CÁC HÌNH THỨC HỌC TẬP CHÍNH TRONG MÔ ĐUN/MÔN HỌC

1 Học trên lớp về :

- Phác thảo kế hoạch xây dựng Web Site

- Thiết kế hệ thống thông tin Web Site

- Xây dựng Prototype và đánh giá hệ thống Web Site

- Chọn công cụ và tổ chức Files

2 - Học tại phòng học thực hành trường về:

- Tích hợp các phần tử căn bản của Web Site

- Tích hợp các phần tử Multimedia cùa Web Site

- Sử dụng các công cụ thiết kế Web

- Kiểm thử và chuyển tải Web Site lên Server

YÊU CẦU VỀ ĐÁNH GIÁ HOÀN THÀNH MÔ ĐUN/MÔN HỌC

Kỹ năng thực hành:

- Học viên xây dựng được bảng thiết kế tổng thể Web Sites từ yêu cầu thực tế

- Xây dựng được Site map mô tả được cấu trúc tổng thể của Web sites làm cơ sở cho việc xây dựng WEB

- Tích hợp các phần tử có trong Web Site (hình ảnh, âm thanh, chữ từ các form, các

database ) có hiệu quả tạo được tính logic và tính hấp dẫn của Web Site

Thái độ học viên:

- Cẩn thận lắng nghe ý kiến và thảo luận trong nhóm thiết kế

- Học viên cần tuân thủ các bài tập thực hành theo thứ tự các chương, từ dễ đến khó

Đánh giá học viên thông qua 2 bài kiểm tra:

Phần kiến thức chung : mỗi học viên thiết kế ý tưởng và mô hình hệ thống Web sites ra giấy,

qua đó thuyết minh được mục đích, ý nghĩa của Web sites cũng như những tính năng của nó

Phần thực hành

Mỗi học viên được tham gia vào một nhóm Thiết kế Websites với một chủ đề Nhóm sẽ có 2 sản phẩm :

 Hồ sơ thiết kế Web

 Thể hiện Web sites bằng một phần mềm xây dựng Web

Điểm TB=(Lý thuyết+thực hành*2)

3

Trang 9

BÀI 1 PHÁC THẢO WEB SITES

Mã bài : ITPRG13.1 Giới thiệu

Khi xây dựng bất kỳ website nào, bước đầu tiên là xác định rõ mục đích của mình.Không

có mục đích và nhiệm vụ rõ ràng, các dự định sẽ khó có thể đạt được kết quả như mongmuốn.Lập kế hoạch cẩn thận kết hợp với việc đề ra mục tiêu rõ ràng là chìa khóa để xây dựngweb site thành công

Mục tiêu thực hiện

-Nắm được cấu trúc tổng thể của 1 Web Site

-Xác định mục đích của Web Site

-Xác định các đối tượng trong trang Web

Nội dung chính

1.1 Một số kiến thức căn bản về Web và World Wide Web (WWW)

World Wide Web có nhiều tên hơn các tài nguyên khác của Internet, còn được gọi làWWW hay W3 Để hiểu được Web, bạn cần phải bắt đầu tìm hiểu về tư tưởng Hypertext

Hypertext là dữ liệu gồm những phần liên kết với những dữ liệu khác Một ví dụ đơn giảncủa Hypertext là bộ bách khoa toàn thư Bạn đang đọc một phần tử trên “những cây” ở cuốicủa bài báo bạn thấy một phần tham khảo nói rằng “để biết thêm các thông tin liên quan, hãyxem các thực vật (plants)” Dòng cuối cùng này là một liên kết, từ các bài báo “cây” (trees) đếncác bài báo “thực vật” (plant)

Trong ngôn ngữ của Web, một tài liệu Hypertext gồm phần dữ liệu và phần có thể liên kếtvới những tài liệu khác Chương trình mà bạn dùng để đọc một tài liệu Hypertext được gọi làBrowser Khi bạn theo liên kết đến một phần khác thì chúng tôi nói rằng bạn đang định vị(Navigate) Web

Điều gì làm cho Web có khả năng liên kết với những loại tài nguyên của Internet: một filevăn bản, một phiên kết nối của Telnet, một Gopher, một nhóm tin của Usenet và v.v…

Chức năng của Browser của bạn giống như một cửa sổ vào Internet bằng cách vàonhững phần liên kết mà bạn muốn và việc truy cập vào mỗi tài liệu dùng một phương phápthích hợp

Như vậy đặc điểm của Web là rất chính xác Web là một sự cố gắng tổ chức tất cả cácthông tin trên Internet (thêm vào một số thông tin địa phương mà bạn muốn thêm chúng vào)bằng việc cài đặt các tài liệu ở dạng Hypertext Mặc dù giấc mơ này xa rời thực tế, nhưng Webcho phép bạn truy cập vào các loại tài nguyên của Internet, chỉ bằng cách dùng một Browser

để đọc tài liệu thích hợp

Tại sao chúng ta phải dùng Web?

Web đã được phát triển ở Thụy Sĩ, tại trung tâm nghiên cứu CERN Tư tưởng này đượcđưa ra nhằm giúp các nhà vật lý học của CERN chia sẻ công việc của họ và dùng chungnhững thông tin trong nhóm Chẳng bao lâu sau, tư tưởng của Web được mở rộng và áp dụngvào trong Internet như là một kỹ xảo của việc truy cập thông tin và các dịch vụ của Internet.Điều đã làm cho Hypertext có giá trị hơn các văn bản bình thường là có phần liên kết Vấn đềnảy sinh ra là phải đặt các phần liên kết vào Hypertext cho hợp lý Điều này mất rất nhiều côngsức và không phải Hypertext nào cũng làm tốt điều này Đã có một vài chương trình cố gắng tựđộng xử lý điều này: có một chương trình đọc một văn bản bình thường và cố gắng tìm ra nơi

để đặt các liên kết

Trang 10

Tuy nhiên không có được chương trình nào có thể thực sự thay thế được sự suy luận củacon người

Giá trị được các liên kết của Hypertext thêm vào văn bản bình thường phụ thuộc vào cáchdùng các phần liên kết hữu dụng Mỗi liên kết là một phần cho biết là có thể nhảy đến một vănbản khác để đọc Nhưng đáng tiếc thay là nhiều loại văn bản không thích nghi cho việc chúng

tự nhảy đi Hơn nữa ngay cả khi nhảy được, không phải lúc nào cũng biết được chính xác nơi

mà các liên kết sẽ nhảy đến Việc nhảy đến nhảy lui của một tài liệu Hypertext phụ thuộc rấtnhiều và suy nghĩ của người đặt các phần liên kết vào tài liệu

Điều quan trọng thứ hai của việc dùng Web là truy cập vào các tài nguyên Internet Cáchtốt nhất để bạn có thể dùng được các tài nguyên thích hợp nhiều lần Web không hoàn hảolắm Đôi lúc khi bạn sẽ thấy dùng một công cụ đã được thiết kế riêng cho một loại dữ liệu nào

đó thì tốt hơn Ví dụ, mặc dù bạn có thể dùng Web để đọc các bài báo của Usenet, nhưng bạndùng chương trình Newsreader thì vẫn tốt hơn Tuy nhiên, Web được xác định là công cụ mềmdẻo nhất để bạn thám hiểm Internet

1.2 Cấu trúc tổng thể của một Web Site

Để xác định được cấu trúc tổng thể của website điều đầu tiên chúng ta cần xác định đó là mục đích website cần thiết kế:

Bước đầu tiên trong công đoạn thiết kế một Web site là chúng ta đã có những quyết định chắc chắn về việc chúng ta sẽ "xuất bản" cái gì với Web site của mình Không có chủ định và mục tiêu rõ ràng thì cả web site đó sẽ trở nên lan man, sa lầy và cuối cùng đi đến một điểm khó có thể quay trở lại Thiết kế cẩn thận và định hướng rõ là những chìa khoá dẫn đến thành công trong việc xây dựng một Web site

Trước khi xây dựng một Web site, chúng ta nên:

 Xác định đối tượng độc giả của web site

 Web site có mục đích rõ ràng

 Thiết lập các chủ đề chính của web site

 Thiết kế các khối thông tin chủ yếu mà web site sẽ cung cấp

Chúng ta cũng nên bắt đầu với việc xác định nguồn tài nguyên về nội dung, hình ảnh thôngtin mà chúng ta cần đến để tạo nền web site phù hợp với mục đích được đề ra - đó là nguồn thông tin sẽ duy trì cho web site hoạt động sau này

1.3 Phân tích, xác định các đối tượng trong Web Site

Để định hình cho website chúng ta cần thiết kế,đối tượng quan trọng nhất chi phối chocấu trúc toàn bộ website chúng ta cần thiết kế đó là đối tượng độc giả, vì vậy việc phân tích vàxác định đối tượng độc giả là điều đầu tiên và bắt buộc trong quá trình thiết kế website

Xác định các độc giả chính của web site, để chúng ta có thể thiết kế cấu trúc phù hợpvới nhu cầu, mong muốn của họ Sự hiểu biết, trình độ, sở thích cũng như yêu cầu của độc giảthay đổi từ một người đọc hoàn toàn không có kinh nghiệm, người sẽ cần đến một sự dẫn dắtcẩn thận, đến người đọc thành thục, người sẽ nổi giận với bất cứ cái gì mang vẻ chiếu cố tới

họ, hoặc làm chậm trễ việc truy nhập thông tin của họ Một hệ thống được thiết kế tốt sẽ thíchhợp cho một dải rộng trình độ, nhu cầu độc giả Ví dụ, nếu mục đích web site của chúng ta làchuyển tải các thông tin về tình hình của nội bộ công ty, các tài liệu về nhân lực, hay các tài liệukhác dùng cho việc in các hướng dẫn sẽ thích hợp cho các độc giả đọc hàng ngày, và cho cảcác độc giả chỉ truy nhập ít lần

Trang 11

1.3.1 Độc giả (web surfer)

Các trang web (homepage) cho các chương trình duyệt web cũng nên tương tự như cácbìa tạp chí Mục tiêu là tính toàn thể với hình ảnh bắt mắt, chủ đề nội dung gây chú ý Tất cảcác liên kết trên trang chủ này nên chỉ tiếp đến các trang bên trong web site Chúng ta cũngphải tạo được thông báo ngắn gọn, súc tích cái có trong web site có thể được độc giả quantâm

1.3.2 Độc giả mới và độc giả không thường xuyên

Số độc giả nhóm này phụ thuộc vào một cấu trúc site rõ ràng, dễ truy nhập đến

sự tổng quát về cấu trúc toàn bộ thông tin trên web site Người mới truy nhập sẽ có cảm giác bị

đe doạ bởi một cấu trúc menu phức tạp, ngại đi sâu vào web site nếu trang đầu không có hnhfảnh hấp dẫn và không được sắp xếp rõ ràng Theo Jakob Nielsen ở Sun Microsystems, thì códưới 10% độc giả cuộn màn hình xuống dưới phần đầu của một trang web Các độc giả khôngthường xuyên lại chú trọng đến trang khái quát, cấu trúc có phân lớp và hình ảnh đồ hoạ, biểutượng giúp họ nhớ, kết nối đến vị trí thông tin họ cần trong web site của chúng ta Một từ điểncác khái niệm kỹ thuật, từ viết tắt và danh sách các vấn đề thường được xảy ra (FAQ -frequently asked questions) có thể rất hữu dụng cho các độc giả mới và không thường xuyêncủa chúng ta

1.3.3 Các độc giả chuyên nghiệp, thường xuyên

Số độc giả này phụ thuộc vào web site của chúng ta để nhận thông tin nhanhchóng và chính xác Các độc giả chuyên nghiệp rất sốt ruột với menu nhiều lớp có đồ hoạ chấtlượng kém mà chỉ cung cấp từ 2 đến 6 lựa chọn một lần Họ khát khao các menu không đồ hoạ(text), có thể kéo thả được và thời gian nạp xuống nhanh chóng Các kiểu cách làm dáng đồhoạ sẽ làm họ phát điên Các độc giả chuyên nghiệp, thường xuyên thường có chủ định rõràng trong đầu, do vậy sẽ đánh giá cao các menu text chi tiết, các nét chính của web site hoặccác chỉ số site phong phú giúp họ tìm kiếm, thu nhận thông tin nhanh chóng

1.3.4 Các độc giả nước ngoài

Phải luôn nhớ là chúng ta đang thiết kế cho World Wide Web Các độc giả củachúng ta có thể là một người ngay ngoài phố, hoặc một ai đó đang ở bên Mỹ, Nhật bản Để đápứng tối đa số lượng độc giả trên các quốc gia khác nhau, chúng ta cần biên dịch, ít nhất cũng

là các trang chủ đạo Tránh các từ địa phương, hoặc các khái niệm kỹ thuật, viết tắt trong bảngiới thiệu hay các trang giải thích Ví dụ, đừng bao giờ viết tắt ngày trên các trang web, vì đốivới một người Mỹ, thì "10/5/97" sẽ được hiểu là ngày 5 tháng 10 năm 1997, nhưng đa số độcgiả các quốc gia khác sẽ hiểu đó là ngày 10 tháng 5 năm 1997

Bài tập chương 1: Học sinh làm bài tập chương 1 trang 139,phần đầu của bài 1 và bài 2

Trang 12

BÀI 2 THIẾT KẾ TỔNG THỂ MỘT WEBSITE

Mã bài : ITPRG 13.2

Giới thiệu

Sau khi chúng ta xác định được mục đích và đồi tượng độc giả của website,việc xậydựng hệ thống thông tin trong trang web một cách khoa học,rõ ràng và chính xác sẽ là yếu tốquyết định sự thành công của toàn bộ chu trình thiết kế web,đem lại sự nhất quán cho toàn bộwebsite

Học xong bài này học viên sẽ có khả năng:

- Xây dựng hệ thống thông tin thể hiện trên trang WEB bằng SITE MAP

- Một số kỹ thuật về thiết kế và xây dựng các biểu tượng: Banner, logo, hình ảnh, âm thanh

và một số đối tượng khác trong trang WEB

đã biết từ hàng thập niên trước rằng đại đa số chúng ta chỉ có thể lưu giữ khoảng 4 đến 7 mẫuthông tin rời rạc trong trí nhớ ngắn hạn Mục đích của các hệ thống tổ chức là giữ số lượngmẫu thông tin mà người đọc cần lưu nhớ đên tối thiểu, bằng việc sử dụng kết hợp giữa thiết kế

đồ hoạ, qui ước lớp và biên tập thông tin thành các đơn vị riêng rẽ Phương pháp độc giả tìmkiếm và sử dụng thông tin cũng thừa nhận, các tin ngẵn hơn, riêng biệt sẽ chức năng hoá hơn

và dễ định vị hơn khối thông tin dài

Đại đa số web site có thông tin tham khảo để độc giả tìm kiếm trong các bài ngắn hơn Độcgiả rất ít khi đọc các tài liệu dài, liên tục trên màn hình, và đa số họ, những người đi tìm mộtmẩu tin, sẽ khó chịu khi phải rà soát một bài dài toàn chữ để cuối cùng tìm cái họ cần Cácđoạn tin nhỏ của các thông tin có liên quan sẽ dễ tổ chức hơn thành các khối thông tin riêng đểtạo nên hệ thống đồng nhất, hình thành nên cơ sở các liên kết hypertext "Nhỏ" chỉ có thể đượcxác định trong ngữ cảnh của tài liệu chúng ta trình bày và cái ta mong muốn cho độc giả

2.1.2 Các bước trong tổ chức thông tin

Ngày lại ngày, cuộc sống xã hội và công nghiệp càng ít đòi hỏi chúng ta tạo bản tườngtrình chi tiết về cái chúng ta biết và những cái đó liên quan đến nhau như thế nào, nhưngkhông có một nền tảng hệ thống hoá logíc và vững chắc, web site của chúng ta sẽ không hoạtđộng tốt, ngay cả khi các nội dung cơ bản của chúng ta là xác đáng và hay Bốn bước cơ bản

Trang 13

trong việc tổ chức thông tin của chúng ta là chia nó thành các đơn vị logic, thiết lập hệ thốngcấp bậc theo tầm quan trọng và tính tổng quát, sử dụng hệ thống này để tạo cấu trúc quan hệgiữa chúng, sau đó phân tích sự thành công về chức năng và thẩm mỹ của các hệ thống

2.1.3 Cắt đoạn thông tin

Đa số thông tin trên World Wide Web gồm có các bài giới thiệu ngắn không cần đọc nốitiếp Điều này rất đúng đối với các web site của các tổ chức, chính phủ, doanh nghiệp và giáodục hay cung cấp các thông tin đã được in trên giấy trước đó Những nhà viết tài liệu kỹ thuật

đã phát hiện rất lâu trước khi web ra đời rằng độc giả đánh giá cao các đoạn thông tin ngắn do

có thể nhanh chóng rà soát và định vị chúng Các đoạn thông tin ngắn, tổ chức thống nhất đặcbiệt thích hợp với trình bày của web, do:

 Có ít độc giả dành thời gian để đọc tài liệu dài trên màn hình Đa số họ sẽ lưu tài liệudài vào đĩa, hoặc in chúng, chỉ đọc những gì bao quát trực tuyến

 Các mẩu tin ngắn, riwng biệt thích hợp với liên kết web Độc giả thường muốn tìm thấymột phần thông tin chủ định, chứ không phải toàn bộ cả quyển sách để rồi lọc nó ra.Nhưng cũng đừng chia cắt quá nhỏ thông tin, chúng ta sẽ làm độc giả thất vọng Từmột đến ba trang (in) thông tin là đủ cho một đoạn thông tin trên web Một liên kết màchỉ đến một mẩu tin cụt lủn sẽ thật ngớ ngẩn trong mọi trường hợp

 Hình thức đồng nhất của cách tổ chức và hình thức trình bầy thông tin cho phép độcgiả áp dụng kinh nghiệm của họ có từ web site của chúng ta để tìm kiếm, khám phá,

và cũng cho phép độc giả dự đoán được phần web site mới, lạ sẽ được tổ chức nhưthế nào

 Các đoạn thông tin ngắn gọn, súc tích sẽ thích hợp hơn với màn hình máy tính, cái màgiới hạn tầm nhìn của các văn bản dài

Việc áp dụng phân chia thông tin phải linh động, và nhất quán với ý thức chung, với hệ thống logic và với sự thuận tiện cho độc giả web Cách tốt nhất để phân chia và tổ chức thông tin thực hiện theo bản chất của nội dung Cũng có lúc cần tạo một tài liệu dài trên web như một bản tổng hợp của các đoạn thông tin Điều này cần thiết khi chúng ta tạo các trang web để độc giả có thể lưu hay in chúng

2.1.4 Hệ thống phân cấp

Nếu chỉ xác định cấu trúc định vị cơ bản cho độc giả thì mọi tổ chức cần đến sự phân cấp theo tầm quan trọng Mọi "đoạn" thông tin có thể và nên được sắp xếp theo mức quan trọng, và được hệ thống theo mức độ quan hệ giữa các thành phần Khi chúng ta đã xác định được hợp lý các mức ưu tiên, chúng ta có thể xấy dựng một hệ thông phân cấp từ mức ưu tiênnhất hay mức tổng quát nhất, xuống đến mức cụ thể nhất hay mức chi tiết nhất Hệ thống phâncấp thực sự là cần thiết đối với web, vì ý tưởng trang chủ-liên kết phụ thuộc vào sự phân cấp,

di chuyển từ cái nhìn khái quát nhất của toàn web site (trang chủ), qua các menu con xuống đến trang nội dung đã ngày càng trở nên đặc trưng

Trang 14

Hình 2.2:Các mối quan hệ

2.1.6 Chức năng

Sau khi đã tạo nên web site, chúng ta nên phân tích tính thẩm mỹ của nó, và tính thực tế cũngnhư tính hiệu quả của cả cơ cấu hệ thống Chúng ta chọn cấu trúc hệ thống nào cho web sitekhông quan trọng, quan trọng là thiết kế web site thích hợp, cân bằng giữa cấu trúc và quan hệcủa menu hay các trang "homepage" với các trang nội dung độc lập, các đồ hoạ liên kết, tàiliệu Mục đích là để xây dựng một hệ thống phân cấp của menu, trang web sao cho tự nhiênđối với độc giả, không gây trở ngại hoặc làm lúng túng khi đọc web site

Các web site quá nông, chỉ có một mức liên kết, uỷ thác vào các trang menu nặng nề mà sau một thời gian sẽ giống như một mớ hỗn độn các thông tin không liên quan đến nhau, được liệt

kê không theo một trật tự nào cả:

Trang 15

Hệ thống menu lại có thể quá sâu, cất giấu thông tin dưới nhiều lớp menu:

Hình 2.3:Chức năng

Các Gopher site là ví dụ điển hình cho những bất tiện của các menu lồng nhau, nơi mà chúng

ta đôi khi phải mở nhiều thư mục trước khi chúng ta gặp các tài liệu Menu mất giá trị khi chúngkhông chuyển tải từ 4 đến 5 liên kết; các trang menu dựa trên danh sách, bằng chữ có thể tảirất nhiều liên kết mà không dìm sâu độc giả hay bắt họ cuộn màn hình qua một danh sách dàidặc Bắt độc giả phải định vị qua nhiều mức menu lồng nhau trước khi đọc được thông tin làtrọc tức độc giả và không cần thiết

Nếu web site phát triển nhanh, sự cân bằng các menu và trang web là rất cần thiết Các phảnhồi của độc giả (và sự phân tích việc sử dụng web site) có thể giúp chúng ta quyết định đượccấu trúc web site có còn thích hợp không, hay có phần nào thiết kế kém không.Các tài liệuphức tập đòi hỏi sự phân bổ menu sâu, nhưng độc giả lại không bao giờ muốn vào các tranglại các trang toàn menu nếu có khả năng truy nhập trực tiếp Mục tiêu là tạo một cây phân lớpthích hợp có khả năng truy nhập thông tin nhanh, và giúp độc giả hiểu được thông tin được tổchức như thế nào

Trang 16

2.2Xây dựng Site Map

Nếu bạn là người quan tâm, chú ý đến World Wide Web, bạn thật khó thoát khỏi dính dángđến hypertext, hypermedia Ngày nay, chế bản máy tính đầy ắp ý nghĩ kỳ quặc về việc thông tintrên web có thể bằng cách nào đó liên kết mọi cái với nhau Với gợi ý này, bạn có thể bỏ quamột trong những thách thức lớn nhất của việc trình bày thông tin - đặt thông tin vào trật tự logicnhư thế nào và tạo một web site dễ hiểu, đáng quan tâm cho độc giả Không có gì xa sự thật

cả Nếu chúng ta chỉ có ý tưởng mơ hồ về cách thức một phần web site liên quan đến phầnkhác, nếu chúng ta không có một cái nhìn tổng thể hoặc ý thức rõ ràng về tổ chức, độc giả củachúng ta sẽ sớm biết đủ, và đai đa số họ sẽ bỏ đi để tìm thông tin khác tốt hơn

2.21 Sự nối tiếp

Cách đơn giản nhất để hệ thống thông tin là theo dãy, với nó chúng ta có thể hiển thị thông tinmột cách tuần tự Thông tin sẽ tiếp nối nhau như một bản tường thuật, theo thời gian, hoặctrong sự sắp xếp logic nó là ý tưởng cho sự luận bàn nối tiếp Sắp xếp tuần tự có thể theo thứ

tự thời gian, ví dụ như một chuỗi logic các chủ đề được phát triển từ tổng quát đến cụ thể, hoặccũng có thể theo thứ tự abc, như các chỉ số, tự điển bách khoa, từ điển thuật ngữ Tuy nhiên,cách tổ chức này chỉ thích hợp với các web site nhỏ (hoặc các danh sách cấu trúc như chỉ số),các chuỗi càng dài càng trở nên phức tạp hơn, và khi đó càng cần có cấu trúc hơn để vẫn dữđược tính dễ hiểu

Hình 2.4: Sự nối tiếp

Nhiều web site lớn vẫn còn được tổ chức kiểu nối tiếp, nhưng mỗi trang trong chuỗi chính có thể có một hay nhiều trang nói ngoài đề, thông tin chen giữa, hoặc các liên kết đến các web site khác

2.2.2 Ô lưới

Nhiều bản hướng dẫn, danh sách các khoá học của trường đại học hoặc các giải nghĩacho các trường hợp kỹ thuật được tổ chức tốt nhất theo phương thức ô lưới Nó là cách tốt đểtương quan các biến số như sự kiện, công nghệ, văn hoá, Để thành công, từng đơn vị riêngbiệt trong lưới nhất định phải có cùng cấu trúc cho các chủ đề lớn và nhỏ Các chủ đề thườngkhông có sự phân cấp về mức quan trọng Ví dụ, "TCP/IP" cũng quan trọng không hơn, khôngkém so với "IPX/SPX", do vậy cả hai mô tả nên có cùng cấu trúc Như vậy độc giả có thể đi tiếp(dọc xuống lưới) để đọc diễn giải về "TCP/IP", hay đi ngang (đi ngang lưới) bằng cách đọcphần "packet" của cả hai chủ đề TCP/IP và IPX/SPX Có điều không hay là tổ chức lưới có thểkhó hiểu với độc giả chừng nào độc giả xác định được mối liên quan giữa các loại thông tin.Nhưng nó rất tốt với các độc giả có kinh nghiệm, những người đã có sẵn kiến thức về chủ đề

và hệ thống của nó Các sơ đồ tổng quát có thể rất hữu ích đối với các site kiểu lưới

Hình 2.5:Ô lưới

Trang 17

2.2.3Phâncấp

Sự phân cấp thông tin là một trong những cách tốt nhất để tổ chức các khối thông tinphức hợp Sắp xếp có phân cấp đặc biệt thích hợp cho các web site, vì các web site luôn đượcthực hiện theo cách rẽ nhánh từ một trang chủ duy nhất Đa số độc giả quen thuộc với các biểu

đồ phân cấp, và các chỉ dụ sẽ trở nên dễ hiểu hơn Một tổ chức phân cấp cũng tác động có íchđến bản thân việc phân tích nội dung web site do sự phân cấp chỉ hoạt động hiệu quả khichúng ta đã tổ chức hoàn hảo nội dụng của chúng ta Do biểu đồ phân cấp rất giống đến cấutrúc của các doanh nghiệp, viện, độc giả dễ dàng xây dựng mô hình lý trí của cả web site:

Hình 2.6: Phâncấp

2.2.3 Web (mạngnhện)

Cấu trúc tổ chức giống mạng nhện yêu cầu ít hạn chế cho việc sử dụng mẫu thông tin.Mục đích thường cho ý tưởng liên kết giống nhau và tự do, nơi mà độc giả đi theo sự quan tâmcủa họ trong một mô hình tự khám phá, tự do tư tưởng đối với từng độc giả đến web site Môhình web site này đầy rẫy các liên kết đến các tài liệu ở trong web site đó cũng như trên toànWorld Wide Web Mục đích là khai thác triệt để năng lực của web trong việc liên kết và kết hợp,tuy vậy các cấu trúc theo kiểu mạng nhện này rất dễ phát triển thành một mớ hỗn độn, lộn xộncủa các khối thông tin Cũng rất trớ trêu, các web có tổ chức lại thường có cấu trúc phi thực tếnhất đối với các web site, vì nó rất khó hiểu, dự đoán đối với độc giả Các web làm việc tốt nhấtcho các site nhỏ, có nhiều danh sách liên kết, nhắm vào các độc giả chuyên nghiệp hoặc trình

độ cao, những độc giả tìm kiếm những kiến thức chuyên sâu

Hình 2.7:Web (mạngnhện)2.2.1 Xây dựng các tiêu chí đánh giá và xử lý thông tin phản hồi

Thiết kế hướng tới người sử dụng

Giao diện đồ hoạ cho người sử dụng (GUI) được thiết kế nhằm cho người dùng điều khiển trực tiếp maý tính của họ Ngày nay, người sử dụng yêu cầu một mức độ hoàn hảo của mọi thiết kế giao diện đồ hoạ, kể cả các trang web Mục đích là cung cấp mọi cần thiết cho tất

cả độc giả quan trọng của chúng ta, mô phỏng công nghệ web cho mọi mong chờ của họ, và không bao giờ đòi hỏi người đọc chỉ đơn giản là làm theo một giao diện mà đặt những cản trở không cần thiết lên con đường của họ

Đây là nơi nghiên cứu của chúng ta về các nhu cầu và tâm lý học khách hàng là những yếu tố quyết định Không thể thiết kế cho một độc giả vô danh mà chúng ta không biết đến các yêu cầu của người đó Chúng ta nên tạo các kịch bản mẫu cho các nhóm độc giả đang tìm kiếm

Trang 18

thông tin trên web site của chúng ta Một độc giả có kinh nghiệm tìm một mẩu tin nhất định có được giúp đỡ hay cản trở bởi thiết kế của chúng ta? Mọt độc giả mới có bị lúng túng trước một

hệ thống menu phức tap? Thử nghiệm các thiết kế của chúng ta và nhận các phản hồi từ độc giả là phương pháp tốt nhất để tìm ra các ý tưởng thiết kế cho phép độc giả nhận được cái họ muốn từ web site của chúng ta

Các giúp đỡ định hướng rõ ràng

Với thực tại của công nghệ web, đa số độc giả tương tác với các trang web bằng cách thực hiện các liên kết giữa các tài liệu Vấn đề chủ

yếu của giao diện trong các web site là độc

giả không ý thức được họ đang ở đâu trong

tổ chức thông tin Các biểu tượng nhất quán,

dễ hiểu, các lược đồ đồ hoạ đồng nhất và

bản khái quát (đồ hoạ hay văn bản), màn

hình tổng hợp có thể cho độc giả sự tin

tưởng là họ có thể tìm thấy cái họ tìm mà

không lãng phí thời gian

Độc giả phải luôn có khả năng quay trở lại

trang chủ và các điểm chủ chốt trên web site của chúng ta Các liên kết cơ bản này nên có trên mọi trang web của chúng ta, nó thường là các nút ấn đồ hoạ với hai mục đích: tạo các mối liên kết cơ bản và giúp tạo một biểu tượng đồ hoạ thông báo cho độc giả biết họ vẫn còn đang ở trong web site của chúng ta Ví dụ, trên web site của Netscape, thanh biểu tượng sau đây có tại cuối mỗi trang web:

Được thu gọn từ hình ảnh lấy tại: home.netscape.com

Thanh nút ấn hay được sử dụng (cho nhiều lựa chọn trong một diện tích nhỏ), có thể đoán trước (có ở tất các chân trang), và tạo một đặc tính đồng nhất cho mọi trang web của Netscapesite

Không có trang cuối cùng (dead-end)

Mọi trang web nên có ít nhất một liên kết Các trang "dead-end" - các trang không móc

nối đến các trang khác trong cùng site - không chỉ là một sự thất vọng với độc giả, chúng

thường làm mất khả năng đưa độc giả đến với các trang khác trong web site của chúng ta.Các trang web thường được đưa ra không có lời tựa đầu: độc giả thường tạo hay đi theo các liên kết thẳng đến các trang cất sâu trong cấu trúc của web site Do vậy họ có thể không bao giờ nhìn thấy trang chủ (Homepage) hoặc các thông tin mở đầu trên we site của chúng ta Nếu các trang phía dưới của site không có các liên kết quay lên, về trang chủ hoặc quay lại menu, độc giả thực chất là bị loại khỏi việc truy nhập đến các phần còn lại của web site

Cho phép truy nhập trực tiếp

Mục đích là cung cấp cho độc giả thông tin họ cần với ít bước nhất và với thời gian ngắnnhất Điều này có nghĩa là chúng ta cần thiết kế cấu trúc thông tin hiệu quả nhất, giảm tối đa các bước qua hệ thống menu Các nghiên cứu về giao diện chỉ ra rằng độc giả thích các menu

mà có từ 5 đến 7 liên kết, và độc giả cũng thích ít màn

menu đơn giản

Trang 19

Bảng sau đây cho thấy chúng ta không cần nhiều mức menu để tạo nên một số lượng lớn lựa

chọn:

Dải thông và ảnh hưởng

Độc giả không chịu đựng thời gian trễ dài Các nghiên cứu nhân tố con người cho thấy đối với

đa số công việc tính toán, ngưỡng của sự mất tác dụng là khoảng 10 giây Các thiết kế trang web mà không thích hợp với tốc độ truy nhập mạng của độc giả sẽ chỉ làm cho họ thêm thất vọng Nếu độc giả chỉ là một người dạo chơi web bình thường sử dụng modem tốc độ 28.8 kbps qua đường điện thoại, thật dại dột đặt một ảnh lớn (kích thước) lên trang web, độc giả sẽ không đủ kiên nhẫn chờ đến khi ảnh được nạp xuống Thế nhưng, nếu chúng ta xây dựng một web site cho nội bộ (intranet) trường học, doanh nghiệp, nơi mà mọi người truy nhập web server với tốc độ mạng LAN hay cao hơn nữa, thì chúng ta lại nên sử dụng nhiều ảnh và

multimedia

Đơn giản và nhất quán

Độc giả sẽ không ấn tượng với sự phức tạp không lý do, đặc biệt các độc giả phụ thuộc vào web site của chúng ta về thời gian hoặc thông tin chính xác, liên quan đến công việc Các biểu tượng nên đơn giản, quen thuộc là dẽ hiểu với độc giả, ví dụ nếu chúng ta muốn một biểu tượng cho việc thiết kế thông tin, nên chọn quyển sách hay thư viện, chứ đừng chọn tầu vữ trụ hay vo tuyến truyền hình Thiết kế thông tin tốt nhất là những cái mà đa số độc giả chưa bao giờ nhận thấy

Được thu nhỏ từ ảnh của www.adobe.com

Adobe (do Studio Archetype thiết kế) là một mô hình xuất sắc cho thiết kế web site Các trang sử dụng đồ hoạ một cách rộng rãi với các trợ giúp định vị (navigation), áp dụng nhất quán ở tất cả các trang trên web site Một khi chúng ta biết các liên kết cơ bản nằm trên đầu trang, ranh giới trở thành vô hình và việc định vị sẽ dễ dàng hơn

Trang 20

Để đạt được tối đa việc chức năng hoá và tính rõ ràng, thiết kế trang của chúng ta nên được xây dựng trên các đơn vị mẫu nhất quán, tất cả đều sử dụng chung một kiểu đồ hoạ, phong cách biên tập và mô hình tổ chức Mục đích là tính đồng nhất, có thể đoán trước, đểđộc giả cẩm thấy thoải mái khi khai thác web site của chúng ta, và chắc chắn họ biết phải tìm cái họ cần tìm Các biểu tượng đồ hoạ trên trang web cung cấp các tín hiệu trực quan

về sự tiếp nối của thông tin Biểu tượng đồ hoạ trên tất cả đầu trang của Adobe site tạo nên một giao diện độc giả nhất quán, và cũng là nét nhận dạng duy nhất cho site của Adobe:

Được thu nhỏ từ ảnh của www.adobe.com

Ngay cả khi các trang của chúng ta không sử dụng đồ hoạ, sử dụng nhất quán các tiêu đề, các chân trang và các liên kết đến trang chủ, các trang liên quan sẽ tăng cường cảm giác của độc giả là họ đang trong khung cảnh web site của chúng ta

Để tạo hiệu quả cho một hệ thống "không đứt đoạn - seamless", chúng ta nên xem xét đến việcđưa các thông tin quan trọng vào web site của chúng ta, gộp nó vào hệ thống hơn là tạo liên kết đưa độc giả của chúng ta ra khỏi site của chúng ta (nếu không vi phạm bản quyền cho việc sao chép thông tin)

Tính ổn định thiết kế

Nếu chúng ta mong muốn thuyết phục độc giả của chúng ta rằng cái mà chúng ta cung cấp là chính xác, đáng tin cậy, chúng ta cũng phải thiết kế web site của chúng ta cẩn thận, giống như chúng ta tạo các mối liên hệ với các doanh nghiệp khác, với cùng sự biên tập và các trình độ thiết kế cao Một site trông luộm thuộm, với thiết kế trực quan nghèo nàn, trình độ biên tập kém

sẽ không truyền được sự tin cậy cho các độc giả

Tính ổn định chức năng trong thiết kế web có nghĩa là giữ các thành phần giao tiếp của web site làm việc ổn định Tính ổn định chức năng có hai thành phần - đặt các vật đúng chỗ ngay từđầu khi thiết kế web site, và sau đó giữ chúng hoạt động nhịp nhàng trong suốt thời gian Các web site tốt có tự nó đã có tác động qua lại, với nhiều liên kết đến các trang trong site đó, và cócác liên kết đến các site khác Trong khi thiết kế, chúng ta cần kiểm tra thường xuyên các liên kết để đảm bảo chúng còn tồn tại, mọi cái trên web thay đổi rất nhanh, cả trên web site của chúng ta và các web site khác Chúng ta cần có lịch kiểm tra lại các liên kết và cả nội dung của

nó có còn thích hợp không

Phản hồi và đối thoại

Thông qua hình ảnh đồ hoạ, các nút bấm, các liên kết đặt một nơi duy nhất, thiết kế web của chúng ta nên đưa ra khả năng xác nhận vị trí, lựa chọn của độc giả

Phản hồi cũng có nghĩa là bước chuẩn bị cho việc trả lời, đáp ứng các đòi hỏi, góp ý của độc giả Các web site thiết kế tốt luôn cung cấp mối liên hệ trực tiếp tới ban biên tập hoặc

"webmaster" phụ trách kỹ thuật của site Lên kế hoạch đảm bảo quan hệ liên tục với các độc giả là quan trọng sống còn đối với sự thành công lâu dài của một doanh nghiệp

Bài tập chương 2: Sinh viên tham khảo bài tập trang 139 bài 1 và bài 2.

Trang 21

- Xây dựng hồ sơ thiết kế trang Web

- Khảo sát phân tích và đánh giá một số Web sites điển hình

- Thiết lập các Prototype

- Đánh giá việc thiết kế qua các Prototype

3.1 Xây dựng hồ sơ thiết kế trang web

Đây chính là quá trình chúng ta lập kế hoạch nhiêm vụ website cần thiết kế.Giải quyếttừng vấn đề và nhiệm vụ được liệt kê phác hoạ nên các mối quan hệ khi chúng ta lập kếhoạch:

 Ghé thăm các trang web tương tự để biết bạn muốn gì và không muốn gì,và tìm hiểuxem làm sao chúng ta làm trang web của mình trở nên độc đáo

 Đảm bảo rằng trang của bạn nói lên bạn là ai hoặc nói lên công ty của bạn

 Chọn các màu sắc gợi lên cảm giác thích hợp cho trang web

 Phân loại trang để không bị mất trọng tâm.Với mục đích thiết kế,phân loại trang là thôngtin,thương mại, cộng đồng,nghệ thuật hoặc một số kiểu trang khác

 Thiết kế trang để phản ảnh cách mà người sử dụng hay dùng nhất để duyệt qua cáctrang.Đảm bảo có các chủ đề bao trùm trên trang hướng tới đối tượng độc giả mà chúng

ta đã xác định, sau đó cung cấp nhiều liên kết cụ thể hơn trên mỗi trang con

 Đảm bảo trang phải cung cấp cho người dùng một số cách để liên hệ với webmasternhư địa chỉ thư tín,số điện thoại

 Đặt tên các tập tin một cách thích hợp

 Tạo ra các nút dể hiểu phản ánh rõ ràng cấu trúc trang muốn xây dựng

 Chia nội dung thành các đơn vị logic.Không chia một trang thành 2 trang chỉ vì trang đóquá dài,nếu chia phải có liên kết logic thuận tiện cho người dùng

 Phân tích thông tin và để thông tin quan trọng nhất ở nơi người dùng dễ thấy và dễ truycập nhất

Trang 22

 Xác định một số cách tạo ra một chủ đề hoặc một cái nhìn thống nhất trên toàntrang.Đừng quên sử dụng logo và các liên kết chuyển hướng nhất quán trên mỗi trang

 Hãy có ít nhất một yếu tố khuyến khích người sử dụng quay trở lại,ví dụ như cập nhậthàng ngày,hàng tuần hay các phòng trò chuyện (forum)

3.2 Xây dựng các Prototype mẫu

Sau khi thiết lập mục thiết lập được các mục tiêu và xác định được khán giả chúng tachuyển sang bước tiếp theo đó là thiết kế nên bộ khung cho trang web.Sau khi đã thu thập cácthông tin chính mà chúng ta muốn đưa lên trang web,chúng ta cần tìm cách tốt nhất để trìnhbày thông tin lên trang web của mình.Ví dụ chúng ta có thể tổ chức trang web theo nhiều cáchkhác nhau,bao gồm các loại sau:

3.3 Đánh giá việc thiết kế qua Prototype

Sau khi thiết kế các Prototype các yếu tố trên Prototype có thể được đánh giá thông quacác tiêu chí như:

 Dễ dàng xác định và hiển thị các liên kết và các nút chuyển hướng

 Biểu tượng hoặc biểu trưng trong trang chủ có thể sử dụng trong toàn trang web

 Các thông tin quan trọng phải được hiển thị trên cùng

 Tiêu đề có nội dung

 Các hiệu ứng hoặc chủ đề gợi cảm xúc bằng các công cụ như từ ngữ,màu sắc,bốtrí,phong chử

 Mở các liên kết của trang để thu hút người xem

 Tạo điều kiện tải nhanh trang web(hình không quá lớn và quá nhiều hình )

 Mục đích của trang rõ ràng và người xem biết được tiếp theo họ phải làm gì

 Liên kết văn bản hiển thị dưới đáy trang

 Phải có chứng minh nguồn gốc web

Bài tập chương 3:Sinh viên tham khảo bài tập trang 139,bài 1 và 2

Trang 23

BÀI 4

Tên bài : THIẾT KẾ WEB VỚI CÁC ĐỐI TUỢNG ĐƠN GIẢN

Mã bài : ITPRG13.4

Giới thiệu

Sau khi xác định được mục tiêu,lập hồ sơ website và xác định các đối tượng,bài học này

sẽ giúp chúng ta hiểu và xử lý các đối tượng trong thiết kế web như thế nào là hợp lý và chínhxác để có được trang web chuyên nghiệp

- Xây dựng các đối tượng là các ký tự, số trong trang WEB

- Xây dựng và xử lý các file đồ hoạ đưa vào trang WEB

4.1 Xác định các đối tượng bên trong trang WEB

Trong phần này chúng ta cần xác định rõ các đối tượng cần có trong website của chúngta,thông thường bao gồm các đối tượng sau:

 Đối tượng về văn bản như ký tự,số trong trang web

 Đối tượng về đồ hoạ

 Đối tượng về âm thanh

 Đối tượng về video

4.2 Xây dựng các đối tượng là các ký tự, số trong trang WEB

Các yếu tố văn bản xuất hiện trên trang web được mô tả trong các phần sau:

4.2.1 Thanh tiêu đề

Khi tạo trang web phải tạo văn bản xuất hiện trên thanh tiêu đề của cửa sổ trìnhduyệt.Yếu tố văn bản trong thanh tiêu đề rõ ràng,chính xác và hữu ích.Nội dung tiêu đề trênthanh tác vụ giúp người dùng dễ dàng chuyển đổi giữa một số cửa sổ đang mở

4.2.2 Nội dung

Nội dung của một trang web đề cập đến thực chất vấn đề của nó-lý do khiến mọi ngườighé thăm trang web.Nội dung của trang web phải rõ ràng,ngắn gọn,dễ lướt,nhiều thông tin,cótính cập nhật và không có nhiều lỗi chính tả Nên nhớ dù trang web có đẹp mắt đến đâu,đặttính hấp dẫn của internet vẫn là văn bản

4.2.3 Siêu liên kết

Các siêu liên kết cung cấp liên kết từ trang của chúng ta đến một nhóm các trang webbằng cách liên kết trang chủ đến khu vực có các thông tin có liên quan.Các văn bản trong siêuliên kết phải rõ ràng nhất quán,gợi mở nội dung của liên kết và được đặt ở vị trí thích hợp

Trang 24

4.2.4 Biểu trưng văn bản và đồ hoạ

Chúng ta có thể sử dụng biểu trưng, văn bản đồ hoạ và WordArt để làm cho trang web

có vẻ chuyên nghiệp hơn.Nếu tất cả các thành phần của một trang web có hình thức tươngquan nhau sẽ cho người dùng biết rằng họ vẫn ở trong lãnh thổ của trang web mặc dầu họ đã

đi từ trang này đến trang khác.Bất cứ khi nào có thể,hãy tận dụng phương pháp này để liên kếtbiểu trưng với các trang chủ trong toàn bộ trang web của bạn

4.2.5 Các chuyển hướng văn bản thuần tuý.

Nhiều nhà thiết kế lựa chọn định dạng thanh thực đơn và các yếu tố chuyển hướng chỉ

là hình hoạ nhưng đôi lúc chúng ta cũng cần sử dụng các yếu tố chuyển hướng liên kết ấybằng văn bản thuần tuý kết hợp với đồ hoạ.Nếu không cung cấp các thành phần chuyểnhướng dựa trên văn bản,một vài người sử dụng có thể không biết cách truy cập đến trang gốccủa bạn.Nên bổ sung các chuyển hướng ở cuối mỗi trang web sẽ giúp người dùng không phảicuộn lên màn hình để nhấn nút liên kết qua trang khác

4.2.6 Thông tin về ngày tháng

Chúng ta nên đưa yếu tố ngày tháng vào trong các trang web.Ngày tháng có thể là mộtdòng văn bản nhỏ ở cuối trang.Tuy nhiên nếu nội dung thường xuyên được cập nhật là mộttrong những yếu tố hấp dẫn của trang web chúng ta sẽ đặt rõ hơn phía trên thông tin

4.2.7 Thông tin về bản quyền

Nếu chúng ta đang sở hữu bản quuyền với tất cả các văn bản gốc mà chúng ta tạora.Do đó để bảo vệ bản quyền chúng ta nên thêm vào bản thông báo bản quyền về trang webcủa mình.Thông tin bản quyền nên đặt ở cuối trang và có cỡ chữ nhỏ hơn cỡ chữ trong nộidung trang web

Một số yêu cầu thiết kế nội dung trong trang web với đối tượng là ký số,ký tự:

 Tạo tiêu đề,đầu đề đồ hoạ cho các hiệu ứng bổ sung

 Hiển thị đoạn trích và thanh nách để giảm nhẹ dung lượng văn bản

 Thêm WordArt,biểu trưng,văn bản đồ hoạ và các biểu ngữ để tạo hình thức nhấtquán cho trang

 Sử dụng các biểu tượng dễ hiểu để thay thế cho các từ như New,home được bốtrí khắp trang web

 Áp dụng thận trọng các màu sắc hoặc các định dạng in ấn(ví dụ như chữ đậmhoặc nghiêng) để lôi kéo sự chú ý vào những nội dung quan trọng

 Đảm bảo việc trang trí nền không làm cho nội dung văn bản trở nên khó đọc

 Đưa vào các thông tin quan trọng như chi tiết liên lạc,tên công ty

 Để tránh in chữ quá bé-hoặc nếu nghi ngờ,hãy để người dùng xác định cỡ vănbản thông qua thiết lập mặc định trình duyệt của họ

 Sử dụng các phông chữ dễ đọc cùng với nền thích hợp.Hiện tại các phông chữthích hợp nhất trên các nền Window là các phông unicode

4.3 Thiết kế, xây dựng và xử lý các file đồ hoạ trong trang WEB

4.3.1 Cơ chế đồ hoạ của web

Trang 25

Đồ hoa của web trông gần giống như đồ hoạ trong in ấn,xong một vài yếu tố đặt

trưng web sẽ đóng vai trò quan trong khi bạn sáng tạo và sử dụng đồ hoạ trên web.Đặc biệt là

đồ hoạ trực tuyến đòi hỏi bạn phải tính đến giới hạn màu sắc,định dạng tập tin và kích cỡ tậptin cũng như độ trong suốt có thể,vấn đề tải ảnh và ảnh động trên web…Nhận thức được bayếu tố chính-màu sắc-dạng tập tin và kích cỡ tập tin cho phép bạn bắt đầu sử dụng đồ hoạ trênweb của mình

4.3.2 Ảnh điểm bảng màu và màu sắc

Đầu tiên và quan trọng nhất mỗi đồ hoạ trực tuyến bao gồm một chùm ô vuông màunhỏ kết hợp với nhau để tạo nên hình ảnh.Máy tính hiển thị các bức tranh sử dụng các điểmảnh.Ví dụ hãy nhìn vào những hình quả sơri trong hình dưới.Hình quả sơri cũng giống như tất

cả các hình khác trực tuyến,không có dấu hiệu nào của các dấu chấm,các ô vuông của điểmảnh

Hình 4.1:Một hình ảnh đồ hoạ điển hình

Bây giờ hãy nhìn vào ảnh đồ hoạ gần hơn một chút.Nếu bạn phóng đại quả sơri lên bạn

sẽ thấy màu sắc của các bức tranh sẽ được biến đổi theo từng ảnh điểm hay từng ô vuông

Hình 4.2:Khi phóng to một hình ảnh trực tuyến,có thể thấy các điểm ảnh

Sau khi đã hiểu về điểm ảnh chúng ta sẽ xem xét về bảng màu trong đồ hoạ web.Mộtbảng màu chỉ đơn giản là một bảng các màu sắc trong đồ hoạ.Một số đồ hoạ web sử dụng một

số lượng màu hạn chế.Bạn có thể phân bố bảng màu cho hình ảnh,hoặc có thể để chươngtrình đồ hoạ tự động tạo bảng màu khi tạo và sửa hình ảnh.Một hình ảnh gif có thể sử dụngđến 256 màu nhưng nhiều hình ảnh thì sử dụng ít hơn thế.Ví dụ nhìn vào hình 4.3 quả sơri sửdụng 8 màu nhưng quả ớt sử dụng đến 128 màu.Hãy chú ý đến kích cỡ ảnh,hình quả sơ ri 3kbnhưng hình quả ớt là 7kb

Trang 26

Hình 4.3:Bảng màu của hình quả sori chứa 8 màu nhưng hình quả ớt chứa 128 màu

4.3.3 Các dạng tập tin đồ hoạ

Ảnh GIF

Gif là dạng đồ hoạ được sử dụng rộng rãi nhất trên web.Gif viết tắt của từ GraphicsInterchange Format.Compuserve đã tạo ra định dạng này vào thập kỷ 1980 như một công cụhữu hiệu để truyền tải các hình ảnh qua các mạng dữ liệu.Điểm mạnh chính của các hình gif làhình ảnh gif thường có kích cỡ nhỏ,có nghĩa là chúng tải và hiễn thị nhanh

Các hình ảnh Gif được có thể được sử dụng đến 256 màu trong bảng màu.Do gif hỗtrợ số lượng màu tối đa là 256 màu nên sử dụng định dạng gif cho các dạng màu dẹt,các biểutrưng,vẽ nét đơn,các biểu tượng,các minh hoạ kiểu hoạt hình,các nút nói chung là các yếu tố

đồ hoạ ít cần màu sắc.Hình 4.4 sẽ cho thấy một vài ví dụ điển hình về việc sử dụng các hìnhảnh Gif

Trang 27

Hình 4.4: Một chuổi ảnh Gif sắp xếp để tạo ra ảnh gif động

Các màu sắc an toàn cho Web

Như chúng ta đã biết các máy tính khác nhau sẽ có cấu trúc khác nhau.Vì vậy khi bạnthiết kế trang web phải nhớ rằng không phải tất cả mọi người điều có thể truy cập trang củabạn nếu trang web đòi hỏi phải có phần cứng hiển thị tốt nhất và mới nhất.Do vậy khi thiết kếcác ảnh gif và jpg bạn phải cân nhắc về các màu sắc mà các màn hình 256 màu có thể hiển thị

mà không bị rung nhiễu.Các màu sắc phổ biến được coi là các màu sắc an toàn cho web hoặccho trình duyệt

Ảnh JPEG

Ngoài các ảnh gif trang web của bạn có thể chứa các ảnh JPEG.Định dạng này hổ trợhàng triệu màu và được hầu hết các trình duyệt hỗ trợ rộng rãi.Do hỗ trợ hàng triệu màu nênthường định dạng ảnh này dùng cho các hình chụp

Kích cỡ ảnh

Mối quan tâm cuối cùng mà chúng ta nói đến trong bài học này là kích cỡ các tậptin,vốn liên quan trực tiếp đến tốc độ tải xuống.Là một nhà thiết kế bạn quan tâm đến cảm giácnôn nóng của người lướt web khi phải đợi.Khi thiết kế các trang web và sử dụng nghệ thuậtweb,bạn nên để ý đến vấn đề thời gian của người sử dụng Vì vậy không nên để kích thướcảnh quá lớn khi đưa vào web.Chúng ta có thể sử dụng các phần mềm để làm giảm kích thướcảnh.Hình 4.5 cho thấy một ví dụ về hộp thoại của một phần mềm Paint Shop Pro giúp giảmthiểu kích cỡ ảnh

Hình 4.5:Thay đổi kích cở ảnh bẳng Paint Shop Pro

Bài tập chương 4: Sinh viên tham khảo bài tập trang 116,bài 1& bài 2.

Trang 28

BÀI 5 THIẾT KẾ WEB VỚI CÁC ĐỐI TUỢNG PHỨC TẠP

Mã bài :ITPRG13.5 Giới thiệu

Việc trình bày thông tin với diện mạo đẹp, ấn tượng cùng các đối tượng hỗ trợ thuận tiệncho người dùng là một điều thiết yếu cần bỗ sung vào web để thu hút người xem.Trong bài họcnày chúng ta sẽ cùng tìm hiểu quy trình xử lý và đưa multimedia vào web

- Thiết kế ảnh động, âm thanh, hình ảnh trang trang WEB

- Thiết kế các Form trong trang WEB, thiết kế các Cơ sở dữ liệu sử dụng trong trang WEB

5.1 Xử lý nhạc,hình ảnh,video cho web

Hiện nay trên thị trường xuất hiện rất nhiều phần mềm tạo âm tham và hình ảnh với cácmức chất lượng khác nhau, việc lựa chọn phần mềm sử dụng cho bản thân và doanh nghiệp,công ty phụ thuộc vào túi tiền, nhu cầu và nhân lực Các bạn có thể sử dụng một số phần mềm

xử lý, thiết kế đồ họa như Photoshop, Corel Draw, … Hay để tạo nhanh các hình ảnh thiết kếWeb mà không cần nhiều kỹ năng, bạn có thể sử dụng phần mềm tạo banner, nút lệnh… nhưMacromedia Flash, WebStyle, Cool3D,… phần mềm tạo Video chất lượng cao như UleadVideo, phần mềm thu nhạc với định dạnh MP3 như Super MP3 Recorder

- Trong chương này, chúng tôi xin giới thiệu tới các bạn một số kỹ thuật tạo hình ảnh động

bằng phần mềm Macromedia Flash MX.

Sử dụng Macromedia Flash để thiết kế hình ảnh, Flash

Tổng quan về Macromedia Flash

Các khái niệm cơ bản:

• Thuộc tính (Properties): là các tính chất áp dụng cho đối tượng (lớp, hình vẽ, …)

• Lớp (Layer): là nơi chứa các hình vẽ, đối tượng, được xem là thành phần của tiến trìnhhoạt hình Các lớp được xếp và chồng lên nhau (che phủ nhau), có bao nhiêu lớp cũng được

• Lớp dẫn (Guide Layer): là lớp dùng làm khung, sườn để bố trí các lớp khác

• Khung (Frame): cửa sổ thao tác

• Tập tin FLA: Tập tin chứa đối tượng của Flash

• Tập tin SWF: Tập tin đã chuyển sang hoạt hình của Flash

5.1.1 Các thao tác cơ bản

+Định trang in: File\Page setup

+Menu View:

Goto: Chuyển đấn các khung hoặc các cảnh trong Film đang làm việc.

Zoom in, Zoom Out: Phóng to, thu nhỏ của sổ làm việc.

Magnification: điều chỉnh tỉ lệ cửa sổ làm việc (Show Frame, Show All: Hiện 1 ,

tất cả các khung làm việc)

Outlines: chuyển toàn bộ các đối tượng trên khung làm việc ra dạng đường nét

Trang 29

không có tô màu để làm việc nhanh hơn

Fast: Tắt tính năng bỏ đường răng cưa (antialiasing) để vẽ nhanh hơn.

Antialias: làm trơn các đường nét ngoài của hình vẽ(trừ text)

Antialias Text: làm trơn các đường nét ngoài của hình vẽ kể cả văn bản.

Timeline: hiển thị cửa sổ tiến trình.

Work Area: hiển thị hoặc che đi vùng làm việc.

Rulers: Hiện ẩn cây thước.

Grid\Show Grid: hiện ẩn đường lưới (ô lưới).

Grid\Snap to Grid: bật tắt tính năng cho đối tượng bám dính ô lưới.

Grid\Edit Grid: điều chỉnh ô lưới.(Accuracy: chính xác)

Guiders: các chế độ cho lớp dẩn.

Hide Edges: Hiện ẩn gờ bao đối tượng.

Hide Panels: hiện ẩn các Panel (instance, info, character, mixer)

+Menu Windows:

New Window: mở cảnh làm việc trong cửa sổ mới

Toolbasr : trình bày Toolbar (Main, Status, Controller)

Tools: hiện ẩn thanh công cụ Tools.

Panels: hiện các thành phần cửa sổ làm việc khác.

Panel set: bố trí lại các thành phần cửa sổ dạng mặc định.

Save Panel Layout: ghi lại bố trí của một thành phần cửa sổ.

Close All Panel: đóng tất cả các thành phần cửa sổ khác.

Action, Movie Explorer, Output, Debugger: Mở các cửa sổ chức năng khác

Cascade, Tile: sắp các cửa sổ làm việc theo lớp, lát gạch.

5.1.2 Công cụ (Tools)

Trang 30

1/ Arrow Tool (V) : dùng chọn, drag, sắp đặt các đối tượng vẽ

Snap to objects: các đối tượng vẽ sẽ bám dính vào lưới hoặc các

đối tượng gần kế khi di chuyển, quay, co dãn

Smooth: làm mềm các đường và hình dạng đơn giản.

Straighten: làm thẳng các đường và hình dạng đơn giản.

Rotate: xoay các đối tượng (nếu muốn xoay chính xác phải chỉnh

góc xoay trong khung Transform [Window\Panels\Transfrom])

Scale: thay đổi kích thước các đối tượng(co kéo).

2/ Sub select tool (A): dùng chọn đối tượng, thành phần của hình

3/ Line Tool (N): dùng vẽ đường thẳng

4/ Lasso Tool (L): chọn đối tượng làm việc với các tính năng đặc

biệt hơn.(chọn xong double click)

Magic wand: dùng chọn các đối tượng với vùng có hình dạng bất

kỳ

Magic wand properties: xác lập các thuộc tính cho Magic wnad.

Polygon mode: dùng chọn các đối tượng theo được đa giác bất

kỳ

5/ Text Tool (T): công cụ dùng tạo văn bản (muốn xuống dòng

nhấn Enter)

6/ Pen Tool (P): dùng tạo các nét thẳng hoặc cong

7/ Oval Tool (O): dùng vẽ hình tròn hoặc Ellipse

8/ Rectangle Tool (R): dùng vẽ hình vuông hoặc hình CN

Round Rectangle radius: dùng định góc tròn cho hình (Corner

radius)

9/ Pencil Tool (Y): dùng vẽ đường bằng tay

Pencil Mode: chọn 1 chế độ vẽ: Straighten: vẽ đường thẳng

trơn_gấp khúc;

Smooth: vẽ đường mềm mại_cong; Ink: khôn làm gì với nét vẽ

10/ Brush (B): Vẽ theo nét cọ

Brush mode: Paint normal: vẽ trên vùng làm việc(đè); Paint Fills:

vẽ các vùng có thể tô màu nhưng không vẽ trên các đường nét; Paint

behind: vẽ quanh các đối tượng, không đè, chỉ vẽ dưới các hình;

Paint inside: vẽ bên trong vùng được tô màu, không vẽ đè lên nét,

nếu không có vùng tô màu thì vẽ không tác dụng; Paint selection: chỉ

vẽ bên trong vùng tô màu đã được chọn

Brush size: chọn kích thước nét vẽ

Brush shape: chọn nét vẽ.

Lock fill: bật tắt kiểu tô màu gradient.

11/ Ink Bottle Tool (S): dùng thay đổi màu của nét bao quanh hình

(màu nét)

12/ Paint Bucket Tool (K): dùng tô màu các hình được tạo ra từ

đường viền (màu bên trong hình)

Gap size: chọn một cách tô trong hình: Don’t close gap: hình

Trang 31

không lỗ hở; Close small gaps: hình có lổ nhỏ; Close large gaps: hình

có lỗ hở lớn; Close medium gaps: hình có lỗ hỗ trung bình

Lock fill: bật tắt chế độ tô với kiểu màu Gradient.

Transform fill: cho phép co dãn, quay, xô nghiêng với kiểu tô

Gradient trong Hình

13/ Dropper Tool (I): dùng cho phép lấy mẫu tô, kiểu đường nétcủa 1 đối tượng rồi áp dụng mẫu tô đó cho 1 đối tượng khác (chọn 1mẫu rồi quét vào 1 mẫu khác)

14/ Eraser Tool (E) : dùng xóa đường nét, vùng tô màu và cáchình dạng

Eraser mode: chọn chế độ xóa: Erase normal: xóa nét và màu tô;

Erase fill : chỉ xóa màu tô; Erase lines: chỉ xóa đường nét; Eraseselected fills: chỉ xóa vùng tô màu đang chọn, không xóa nét; Eraseinside: xóa bên trong 1 vùng có tô màu, không xóa nét

Faucet: xóa đường nét và vùng tô màu.

Eraser shape: chọn nét xóa

15/ Hand Tool (H): dùng di chuyển “bằng tay” quanh vùng làmviệc

16/ Zoom Tool (M, Z) : dùng phóng to, thu nhỏ vùng làm việc

Enlarge: phóng to vùng làm việc.

Reduce: thu nhỏ vùng làm việc.

5.1.3 Các thao tác

Thao tác chọn:

+Chọn thông thường: Click đâu chọn đó

+Chọn đường nét và màu tô: Double click

+Chọn bằng đường bao: chọn công cụ Arrow Tool, tạo đường bao khu vực chọn

+Chọn nhiều: đè Shift trong khi click chọn

Di chuyển: chọn, drag | đè Shift + mũi tên (8 pixel)| mũi tên (1 pixel)

Nhóm: chọn các đối tượng cần nhóm, Modify\Group

Bỏ nhóm: chọn, Modify\Ungroup

Phân đoạn:

+Phân đoạn bằng hình vẽ: tạo các hình bên trong nhau, drag chúng tách nhau

+Phân đoạn bằng đường: tạo hình, chọn công cụ Pencil Tool, chọn Ink, vẽ cắt lát (slicing)qua hình ta được 2 hình phân đoạn

Kết nối các hình: (chỉ dùng cho hình trên cùng lớp, cùng màu và không có đường nét)

Trang 32

Chọn 1 hình kéo lên hình kia, chúng sẽ kết nối thành 1

Thao tác trên hình:

+Modify\Shape\Convert lines to fills: chuyển đường nét thành hình dạng có thể tô màu.+Modify\Shape\Expand fill: mở rộng vùng tô của 1 hình (expand: mở ra ngoài, Inset: mởvào trong, Distance: khoảng mở)

+Modify\Shape\Soften fill edges: làm mềm đường biên của hình(Distance: khoảng cáchgiữa biên mềm và biên ngoài; Step: số bước của biên mềm)

+Modify\Transform\Scale: co dãn

+Modify\Transform\Rotate: xoay

+Modify\Transform\Flip…: lật ngang dọc

+Modify\Transform\Edit Center: chỉnh tâm hình che phủ

Đặt thuộc tính cho khung: Modify\Movie hiện hộp thoại:

+Frame rate: chứa tốc độ hoạt cảnh cho frame

+Dimension: kích thước ngang dọc cho frame

+Match: khung vừa với máy in hoặc nội dung

+Background color: chọn màu nền cho frame

+Rulers unit: chọn đơn vị đo trên thước làm việc

Thao tác văn bản: chọn, menu Text chọn các mục sau:

+Character: hiện cửa sổ thành phần Character

+Paragraph: hiện cửa sổ thành phần Paragraph

+Tách rời văn bản: chọn, Modify\Break Apart (có thể sửa từng ký tự, tô màu…

Canh biên: cho hiện của sổ thành phần Align (Window\Panels\Align | Ctrl + K)

Chọn 1 trong:

Align left edge: canh về cạnh tráiAlign horizontal center: canh về giữa(ngang)

Align right edge: canh về cạnh phảiAlign top edge: canh về cạnh đầuAlign vertical center: canh về giữa(dọc)

Align bottom edge: canh về cạnh đáyDistribute top edge: canh về đầuDistribute vertical center:

Distribute bottom edge:

Distribute left edge:

Distribute horizontal center:

Distribute right edge:

Trang 33

Match width:

Match height:

Match width and height:

Space evenly vertically:

Space evenly horizontally:

5.1.4 Ảnh

+Flash có thể chèn vào các tập tin ảnh dạng: BMP, JPG, GIF (tĩnh), PNG

+Chèn ảnh: menu File\Import chọn tên tập tin ảnh.(là đối tượng che phủ có thể thao tác nhưđối tượng hình vẽ)

+Phân rã ảnh: chọn ảnh, Modify\Break Apart

+Sử dụng cửa sổ thành phần Library: Window\ Library

+Tối ưu ảnh: Mở cửa sổ Library, Right click, chọn Properties, xác lập các tính chất (Allowsmoothing: cho phép làm mềm đường nét, Compression: chọn 1 phương pháp nén, Quality:nhập chất lượng nén)

+Lấy 1 bản sao từ Library: Drag từ khung Library ra

+Ảnh động Gif: nạp và quan sát trên thanh tiến trình (Timeline)

5.1.5 Âm thanh (SOUND)

+Flash cho phép chèn vào các tập tin âm thanh dạng Wav, Mp3

+Chèn âm thanh: File\Import chọn tên tập tin âm thanh (âm thanh được đưa vào Library)

6 Hoạt hình

Tạo Hoạt hình:

Cách 1_ Tạo hoạt hình bằng các khung hình nối tiếp: là cách cho hiện liên tiếp các

khung hình biến đổi nối tiếp nhau

+Tạo hình trên khung làm việc

+Click chọn 1 khung hình trên thanh TimeLine, chọn Insert\KeyFrame (ta được 1 khunghình hoá giống với khung trước đó), thực hiện thêm, bớt, thay đổi trên khung hình tùy ý

+Lập lại bước trên cho đến khi kết thúc hoạt hình

+Nhấn Enter để kiểm tra

Cách 2_Tạo hoạt hình bằng cách biến đổi hình dạng: là cách cho 1 hình biến đổi dạng

thành một hình khác Flash sử dụng phép biến hình theo cách lôgic nhất (có thể tạo ra cácdạng hình ngoài ý muốn) Không thể biến đổi hình dạng các biểu tượng, ảnh, nhóm

+Click chọn 1 khung hình trên Timeline, chọn Insert\Blank Key Frame (ta được khung hìnhkhoá rỗng), Tạo 1 dạng hình khác

+Trở về khung hình 1, chọn Window\Panels\Instance chọn thẻ Frame và qui định như sau:

Trang 34

Label: nhập tên bất kỳ (sẽ hiện trên thanh tiến trình, tuỳ chọn)

Tweening: chọn Shape (biến hình theo nét)

++Easing: chỉnh tốc độ (Easing in: hoạt hình chậm,

Easing Out: hoạt hình nhanh)

++Blend: chọn cách thiết lập cho biến hình (Angular: tốt cho góc và đường thẳng, Distribute:tốt cho các đường cong, trơn)

+ Lập lại bước trên cho đến khi kết thúc hoạt hình

+Nhấn Enter để kiểm tra

Định các điểm biến hình:

+Chức năng Shape Hint: có thể co <= 26 điểm Shape Hint (a ! z)

++Bắt đầu từ khung hình đầu tiên, Modify\Transform\Add Shape Hint, ta thấy xuất hiệnchấm đỏ, di chuyển chấm này đến vị trí tham chiếu trên hình

++Click chọn các khung hình kế tiếp để di chuyển Shape Hint…

++Tương tự cho các khung hình khác

+Hiện / ẩn Shape Hint: View\Show Shape Hint

+Gỡ bỏ Shape Hint: Click chọn Frame cần gở bỏ, Modify\Transform\Remove All Hints.Tạo các dạng hoạt hình sau:

1/ Cánh quạt quay, Bánh xe quay

2/ Biến đổi chử, hình …

Cách 3_Tạo hoạt hình bằng cách biến đổi chuyển động: là cách cho 1 hình di chuyển,

co dãn, xoay … để thành hình dạng khác Cho phép biến đổi hình, biểu tượng, nhóm, khối vănbản

++Click chọn 1 khung hình cách quãng (N) trên Timeline, chọn Insert\Frame (ta được N-1khung hình giống như khung 1)

++ Right click tại khung hình 1 (đầu) , chọn Create Motion Tween, chọn Window\Panels\Instance chọn thẻ Frame và qui định như sau:

Label: nhập tên bất kỳ (sẽ hiện trên thanh tiến trình, tuỳ chọn)

Tweening: chọn Motion (biến hình theo chuyển động).

Trang 35

" Scale: nếu chọn sẽ cho phép co dãn khi chuyển động.

Easing: chỉnh tốc độ (Easing in: hoạt hình chậm, Easing Out: hoạt hình nhanh)

Rotate: chọn cách quay (None: không, Auto: tự động, CW: quay theo chiều kimh đồng hồ,

CCW: quay ngược kim đồng hồ)

Times: nhập số lần quay trong khi chuyển động.

" Orient to path: chọn khi chuyển động theo 1 đường dẫn.

" Synchronize: chọn khi cần đồng bộ các khung hình.

" Snap: chọn khi muốn hình biến đổi bám vào đường dẩn trên lớp dẩn

++Tại khung hình cuối, chọn hình đã có ở khung 1 và di chuyển, xoay, co dãn tùy ý

+Enter để kiểm tra

+Muốn chỉnh sửa phải trở về khung hình đầu, cuối

+Cửa sổ thành phần Instance:

Thẻ Instance: thể hiện hình

Thẻ Effect: hiệu ứng màu

Thẻ Frame: qui định dạng quay

Thẻ Sound: hiệu ứng âm thanh

Biến đổi chuyển động theo 1 đường dẫn (Motion with Orient to path):

+Tạo hoạt hình biến đổi chuyển động(nhớ chọn Orient to path và Snap).

+Click nút Add Guide Layer trên thanh tiến trình, ta được một lớp dẫn trên lớp hoạt hình

(kiểm tra tên lớp hoạt hình có thụt vào so với lớp dẫn không?)

+Click chọn lớp dẫn, chọn công cụ Pencil Tool, chế độ Smooth, nét Solid, thực hiện vẽ 1

đường chuyển động trên lớp dẫn

+Click tại Clock (ổ khoá) để khoá đường chuyển động trên lớp dẫn không cho sửa

+Click chọn lớp hoạt hình (đừng quên)

+Click tại khung hình đầu, kéo tâm của nó đến đầu đường chuyển động

+ Click tại khung hình cuối, kéo tâm của nó đến cuối đường chuyển động

+Enter để kiểm tra

+Chú ý: có thể tạo nhiều hình khác nhau trên nhiều Frame để cùng chuyển động với nhau;

có thể dùng nhiều lớp dẫn hoặc lớp dẫn chung có nhiều đường dẫn

Lớp (Layer) và Frame:

1/.Frame: là các khung làm việc dùng chứa các đối tượng

Khung rỗng: Là khung hình chưa làm việc (không chứa gì cả)

Khung Khóa: Là khung hình là khung hình nơi chứa các đối tượng, thiết lập chuyển động,…

Khung thường: Là khung hình hiển thị nội dung của khung hình khoá gần nhất

2/ Các thao tác Frame:

+Thêm 1 frame:

++Insert\Frame | F5: chèn thêm 1 khung hình thường tại vị trí chọn

++Insert\Keyframe | F6: chèn thêm 1 khung hình khóa tại vị trí chọn(trước đó là các khunghình thường)

++Insert\Blank Keyframe | F7: chèn thêm 1 khung hình khóa rỗng tại vị trí chọn(trước đócũng là các khung hình thường)

+Xóa 1 frame: chọn khung hình cần xóa, right click, chọn Remove Frame

Trang 36

+Copy, cắt, dán: chọn , right click, chọn Copy Frames, Cut Frames, Paste Frames

+Clear Frame: chuyển 1 khung hình khoá thành khung hình bình thường

3/ Các thao tác trên lớp:

+Thêm 1 lớp:

++Click nút Insert Layer | Insert\Layer: chèn 1 lớp

++Click nút Add Guide Layer | Insert\Motion Guide: chèn 1 lớp dẫn

+Chọn lớp: Click tại lớp (xem có dấu chưa?)

+Xóa 1 lớp: chọn lớp cần xoá, right click, chọn Delete Layer | click tại thùng rác

+Thay đổi thứ tự của 1 lớp: Drag chuột các lớp lên trên hoặc xuống dưới

+Đặt thuộc tính cho lớp: chọn lớp, right click, chọn Properties: tên, hiện\ẩn, khóa, loại, màunền, Outlines, chiều cao

++Guide: lớp dẫn (ở trên lớp hoạt hình chuyển động)

++Guided: lớp là lớp hoạt hình chuyển động theo lớp dẫn (ở dưới lớp dẫn và thụt vào sovới lớp dẫn)

++Mask: lớp dùng làm mặt nạ (ở trên lớp che)

++Masked: lớp bị mặt nạ che | lớp che (ở dưới lớp mặt nạ, chỉ thấy được qua 1 đối tượngđặc của lớp mặt nạ)

4/ Thanh tiến trình (Timeline):

+Nút Onion Skin: xem và chỉnh sửa nhiều khung hình cùng lúc (các khung hình trong phạm

vi Onion Skin sẽ hiện ra cho chỉnh cùng lúc)

+Nút Onion Skin Outlines: tương tự Onion Skin nhưng các hình trên khung hiện dưới

dạng đường viền

+Nút Edit Multiple Frames: hiện và cho sửa nhiều khung hình cùng lúc.

+Nút Modify Onion Markers: di chuyển phạm vi Onion Skin.

++Always Show Markers: luôn hiện dấu Onion Skin

++Anchor Onion: khoá dấu Onion Skin

++Onion 2, Onion 5, Onion All: đánh dấu 2, 5 hoặc tất cả các khung hình chung quanh

+Show all layer as outlines: hiện ẩn cách trình bày các lớp ở dạng đường viền.

+Lock/Unlock all layers: Khoá hoặc bỏ khoá các lớp (khoá sẽ không chọn được).

+Show/Hide all layers: hiện ẩn các lớp (ẩn sẽ không thấy gì cả).

5/ Quản lý các Scenne: Click chọn công cụ Edit Scene trên thanh tiến trình, chọn 1 cảnh.

Vị trí khung Số

khung/giây Thời gian đã chiếu

Trang 37

6/ Quản lý các Frame: Click chọn công cụ Edit Symbols trên thanh tiến trình, chọn 1 biểu

tượng cần sửa

Chú ý:

Các khung có -! màu tím là khung biến đổi chuyển động

Các khung có -! màu xanh là khung biến đổi hình dạng

Các khung có - là khung không xác định rõ chuyển động gì (có thể bị sai!)

Biểu tượng (Symbol)

1/.KN: là đối tượng được tạo ra nhằm mục đích sử dụng nhiều lần mà không phải tạo lại,biểu tượng được cất trữ trong thư viện Biểu tượng được chia thành 3 loại sau:

+Graphic: biểu tượng dạng đồ họa được tạo ra từ các hình vẽ, hình ảnh có tính chất tĩnh(không chuyển động)

+Button: biểu tượng dạng các nút nhấn, thường được phối hợp với lập trình để tạo các điềukhiện cho đoạn Film

+Movie: biểu tượng dạng đoạn Film, chứa toàn bộ các phần tử của đọan Film: hình ảnh, âmthanh, chuyển động…

2/ Tạo biểu tượng:

+Graphic: Tạo hình ảnh, nhóm… chọn Insert\Convert to Symbol , hiện hộp thoại:

nhập tên, chọn Graphic, OK, xong mở cửa sổ thành phần Library để kiểm tra lại

+Button: Tạo dạng nút, chọn Insert\Convert to Symbol, hiện hộp thoại: chọn Button, OK.

+Movie: Tạo đoạn hoạt hình, chọn Layer, chọn đoạn hoạt hình vừa tạo, Right click, chọn

Copy Frames, chọn Insert\New Symbol, hiện hộp thọai Symbol Properties, đặt tên chọn Movie Clip, OK Flash chuyển sang chế độ tạo hoạt hình, Right click tại khung 1, chọn Paste Frames xong click nút Scene trên thanh tiến trình để trở về.

3/ Các thao tác trên biểu tượng:

Trang 38

+Sửa: chọn biểu tượng trên Library, chọn Edit\Edit Symbols, sửa xong click nút Scene.

(Double Click tại biểu tượng để sửa)

+Sửa Button: khi sửa biểu tượng Button, ta thất có 4 khung: Up, Over, Down, Hit, mỗi

khung thể hiện trạng thái khác nhau của biểu tượng nút, ta có thể thêm, bớt, bỏ trống cáckhung nhằm tạo các “đáp ứng” với sự di chuyển con trỏ tùy ý, sửa xong click nút Scene

Up: Khung này thể hiện Button khi con trỏ không ở trong phạm vi nút.

Over: Khung này thể hiện Button khi con trỏ ở trong phạm vi nút.

Down: Khung này thể hiện Button khi người dùng click vào nút.

Hit: Khung này thể hiện Button khi di chuyển con trỏ, nút có thể được thay đổi vị trí, hình

dạng Nút trong khung Hit sẽ không thấy trong đoạn hoạt hình

+Xoá: Right click, chọn Delete.

+Lấy ra sử dụng: Drag từ Library ra Frame

+Nhân bản: Right click, chọn Duplicates.

Sử dụng Thư viện tập tin của Flash.

1/ Giới thiệu:

Flash cho phép ta có thể sử dụng lại các hình ảnh, âm thanh, đoạn Film, biểu tượng có sẵnchứa trong các tập tin đã tạo ra hoặc tập tin mẫu Các tập tin này được xem như một thư việnchứa các thành quả ta làm việc, có thể có rất nhiều tập tin được dùng làm thư viện

2/ Các Thao tác:

+Mở thư viện của 1 tập tin: File\Open as Library , chọn tên tập tin Fla, Open Có thể mở

nhiều tập tin làm thư viện

+Mở thư viện dùng chung: File\Open as Shared Library, chọn tên tập tin.Fla, Open.

3/ Sử dụng: (trong các thư viện có hình ảnh, đoạn Film, biểu tượng, nút) Drag từ thư viện

bỏ vào Frame

4/ Sử dụng thư viện chung:

Window\Common Libraries, chọn 1 loại Sử dụng như các thư viện khác

Trang 39

1/ Giới thiệu:

Là sự liên hệ qua lại giữa các đoạn hoạt hình, cảnh, khung hình khi trình chiếu

Hoạt cảnh có thể thực hiện tốt nhờ các thiết lập tương tác hoặc lập trình (Scripting)

2/ Khái niệm cơ bản:

+Sự kiện: là tình huống xảy ra hoặc thời điểm thiết lập đã đến.

+Đích: là đối tượng bị tác động bởi hành động khi xảy ra sự kiện.

+Hành động: là một tác động, tương tác trên đích khi sự kiện xảy ra.

3/ Sự kiện:

Các sự kiện của Mouse:

+Press: Sự kiện xảy ra khi người dùng nhấn chuột trên nút.

+Release: Sự kiện xảy ra khi người dùng nhấn và nhả chuột trên nút.

+Release Outside: Sự kiện xảy ra khi người dùng nhấn và nhả nút chuột bên ngoài nút +Roll Over: Sự kiện xảy ra khi người dùng di chuyển con trỏ lên phía trên của nút nhấn.

(cuộn lên)

+Roll Out: Sự kiện xảy ra khi người dùng di chuyển con trỏ ra khỏi phạm vi của nút.(Cuộn

ra)

+Drag Over: Sự kiện xảy ra khi người dùng nhấn nút trong phạm vi nút (không nhả) , kéo

con trỏ ra ngoài phạm vi nút và di chuyển trở lại phạmvi nút (Drag trong)

+Drag Out: Sử kiện xảy ra khi người dùng nhấn nút trong phạm vi nút (không nhả) , kéo con

trỏ ra ngoài phạm vi nút.(Drag ngoài)

Scene: chọn cảnh bắt đầu cho hành động Go To

Type: chọn Frame có thể là theo số, theo nhãn, Frame trước, Frame sau.

Frame: nhập số là khung hình thứ mấy.

Go to and Play: nếu chọn sẽ là Go to and Play (Chuyển đến và thực hiện) còn không là Go

to and stop (Chuyển đến và dừng)

Vd: Chuyển đến và chiếu khung 1, theo sự kiện nhấn và nhả chuột.

on (release) {

Trang 40

URL: chứa địa chỉ URL nơi truy cập.

Window: xác định cửa sổ tải URL

Self: Tải địa chỉ URL vào cửa sổ làm việc

Blank: Mở cửa sổ mới và tải địa chỉ URL vào đó

Parent: Mở địa chỉ URL vào cửa sổ cha của cửa sổ hiện tại

Top: nếu đoạn hoạt hình Flash với hành động Get URL đang nằm trong

khung HTML thì sẽ loại bỏ khung để tải URL vào cửa sổ

Variables: chọn biến trong đoạn hoạt hình được xử lý ra sao?

Don’t send: Không gởi các biến

Send using Get: Gởi các biến nối tiếp vào địa chỉ URL

Send using Post: Gởi các biến tách biệt với URL

+FS Command: gởi dữ liệu đến ứng dụng sử dụng đoạn hoạt hình như trình duyệt Web FS

Command được dùng khi đoạn hoạt hình Flash tương tác với JavaScript trên trang Web

+Load/Unload Movie: Nạp 1 đoạn Film ở địa chỉ URL hoặc loại bỏ đoạn hoạt hình đã nạp.

Có các tham số sau:

URL: đường dẫn đến tập tin Swf cần tải vào (htpt://www.ngcuong……)

Location: định mức hay đích bị hành động tác động

Định dạng
Số trang	156
Dung lượng	3,02 MB