kinh nghiệm thiết kế web

Chia sẻ: Yukogaru | Ngày: | Loại File: PDF | Số trang:5

Thêm vào BST

Báo xấu

145
lượt xem 22
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Việc đầu tiên là bước chuẩn bị cho sự ra đời của “đưa con tinh thần”: Bạn hãy viết ra giấy tất cả những dự định của mình về trang web như nội dung chính, cấu trúc các trang web, cách trang trí, sắp xếp, màu sắc chính của từng trang, các trang web cần lấy tư liệu,…. Hãy làm việc này càng tỉ mỉ càng tốt vì nó sẽ tiết kiệm cho bạn rất nhiều thời gian trong giai đoạn xây dựng website. Để tránh rắc rối phát sinh sau này, bạn phải lưu trữ các trang web của...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: kinh nghiệm thiết kế web

Những kinh nghiệm xương máu Việc đầu tiên là bước chuẩn bị cho sự ra đời của “đưa con tinh thần”: Bạn hãy viết ra giấy tất cả những dự định của mình về trang web như nội dung chính, cấu trúc các trang web, cách trang trí, sắp xếp, màu sắc chính của từng trang, các trang web cần lấy tư liệu,…. Hãy làm việc này càng tỉ mỉ càng tốt vì nó sẽ tiết kiệm cho bạn rất nhiều thời gian trong giai đoạn xây dựng website. Để tránh rắc rối phát sinh sau này, bạn phải lưu trữ các trang web của mình (tập tin HTML) và các file được sử dụng trong một ổ chứa. Ví dụ: trong trang giadinh.html của bạn có sử dụng file hình ancom.gif và file nhạc giutar.mid thì 3 file đó phải nằm trong 1 thư mục. Ngoài ra, bạn nên đặt tên cho trang chủ của mình thay vì là trangchu.html hay home.html thành index.html. Kế tiếp đến việc sắp xếp các công cụ. Bạn nên sưu tập thật nhiều các tập tin multimedia như các file ảnh, các file âm thanh, tiếng động, các file flash,… và đưa chúng vào những ổ chứa một cách trật tự. Internet là phương tiện chủ yếu. Hãy gõ vào thanh Search của Google hay Yahoo các từ khoá như “pictures”, “images”, “clips art”, “sounds”,…. Ngoài ra, bạn còn có thể kiếm được những gì mình cần trong các CD trên thị trường như là HTML Grafix, Web Decoration, Best Pictures, Clips Art,…. Bên cạnh đó, bạn còn có thể tạo ra một hình ảnh với nhiều hiệu ứng đặc biệt như Xara3D – phần mềm làm các chữ xoay, Button Studio, 1 Cool Button, Button Maker – cá tiện ích tạo nút bấm, AniGif – tạo các ảnh động,…. - các file multimedia chuẩn (WAV, BMP,…) thường có dung lượng rất lớn, nếu bạn sử dụng chúng để chèn vào web, người đọc khó có thể xem đựơc vì không đủ kiên nhẫn chờ Internet tải xuống vài MB cho 1 trang web. Vì thế, hãy dùng những cách sau: Đối với các file ảnh: hãy chuyển đổi tất cả các file ảnh sử dụng trong web của bạn sang file JPG hay file GIF bằng các phần mềm xử lý ảnh. Ơû đây, tôi lấy ví dụ bằng phần mềm thông dụng nhất là ACD See. Mở ACD See, tìm đến đường dẫn và chọn file hình, chọn Tools/Convert. Trong khung Destination Convert, bạn chọn JPG hay GIF rồi click OK. So sánh dung lượng của file mới được nén với file gốc, bạn sẽ thấy sự khác biệt hoàn toàn. Riêng với file JPG, bạn có thể điều chỉnh độ chất lượng cũng như dung lượng của ảnh được tạo ra. sau khi chọn JPG trong khung Destination Convert, bạn click chọn nút Format Settings. Sau đó, bạn điều chỉnh chất lượng ảnh bằng cách trượ thanh trượt trong phần Image Quality. Hình ảnh có độ phân giải (chất lượng) càng thấp thì dung lượng càng thấp và ngược lại. Sau đó click OK để hoàn thành công việc. Với các file âm thanh lớn như WAV hay WMA, hãy nén chúng lại bằng MPEG Layer-3. bằng phần mềm trên, file nén của bạn sẽ có dung lượng chỉ bằng 1/5, thậm chí 1/10 file gốc mà chất
lượng gần như chẳng kém bao xa. Ngoài ra, bạn còn có thể chuyển các file WAV thành các file nhạc cơ bản MIDI bằng phần mềm WAV2MIDI. Đối với các file COM, EXE, DOC, RAR,…hãy nén chúng lại bằng các phần mềm nén phổ thông như WinZip hay WinRar. -để tránh rắc rối phát sinh sau này, bạn phải lưu trữ các trang web của mình (tập tin HTML) và các file được sử dụng trong một ổ chứa. Ví dụ: trong trang giadinh.html của bạn có sử dụng file hình ancom.gif và file nhạc giutar.mid thì 3 file đó phải nằm trong 1 thư mục. Các phần mềm kể trên bạn rất thông dụng, bạn có thể kiếm chúng dễ dàng trong các CD sofwares trên thị trường. Làm đẹp trang web của mình Để trang web của bạn thêm phần hấp dẫn, hãy thêm vào đó các hiệu ứng đặc biệt. Một vài phần mềm dưới đây sẽ giúp bạn làm việc đó dễ dàng. Koolmoves 3.70 KoolMoves giúp bạn dễ dàng tạo file Flash, banner,ảnh động... cho trang web của mình. Nó kết hợp và thao tác một cách khéo léo với những hình ảnh, âm thanh, văn bản mà bạn cung cấp cho nó để tạo Flash. Bạn có thể chọn trong thư viện đồ sộ của nó rất nhiều hiệu ứng văn bản, clip art, hình ảnh, video... cho file Flash của mình thêm đặc sắc.Nó cho phép bạn thêm vào nhiều loại file âm thanh(MP3,WAV...), nhiều hiệu ứng chuột, button và sự chuyển đổi hài hòa giữa các hiệu ứng ấy. KoolMoves được đánh giá 5 sao theo bình chọn của tạp chí PC Magazine(Mỹ), đây là shareware, dung lượng 2.6MB, download tại www.getafile.com/cgi- bin/merlot/get/koolmoves/kmsetup.exe Anfi- Tạo hiệu ứng sống động Phần mềm này giúp bạn tạo ra những hiệu ứng sống động cho các nút bấm, hình ảnh, banner, … nói chung là tất cả các đối tượng trong trang web của bạn. Đối với mỗi đối tượng, bạn có gần 20 hiệu ứng đặc biệt để chọn. Ví dụ đối với hiệu ứng dành cho hình ảnh, bạn có thể đặt hình của bạn trong sa mạc Sahara. hay làm cho người ta cảm thấy là bạn đang bị chìm dần trong một hồ nước sâu không đáy,… Còn rất nhiều, rất nhiều những hiệu ứng lạ mắt khác đang chờ bạn khám phá. Sau khi hoàn tất mọi công đoạn như chọn hiệ ứng, điều chỉnh ánh sáng, trục quay, màu sắc, hình nền, bạn sẽ được cung cấp mọi mã nguồn. Hãy click vào nút Copy into clipboard để lưu mã nguồn này vào máy. Sau đó, bạn mở trang web mà bạn muốn chèn các hiệu ứng vừa mới tạo bằng Notepad. Dưới dòng , bạn thêm vào , ở dấu ………bạn chèn đoạn mã vừa lưu. Anfi còn cung cấp cho bạn gần 100 ví dụ về các hiệu ứng để bạn tiện tham khảo. File install của Anfi nặng khoảng 3,3MB, download tại: http://www.anfyteam.com/ .
Javascript Clock 1.0: đây là một phần mềm nhỏ, giúp bạn tạo ra một chiếc đồng hồ nho nhỏ trong trang web của mình bằng ngôn ngữ Java. Khởi động chương trình, bạn chỉ cần chọn màu của các kim giờ, phút, giây và màu nền của đồng hồ. Ngoài ra bạn còn có thể điều chỉnh được kích thước, kiểu dáng hay hiệu ứng đặc biệt và vị trí, liên kết của đồng hồ trên trang web. Sau khi xong việc, bạn chọn Menu/Build HTML. Lưu đoạn mạ đó vào và chèn vào các file HTML như cách mà tôi đã hướng dẫn ở trên. File xài thử của Javascript Clock 1.0 nặng khoảng 500KB, chạy được trên hệ điều hành Win9x, Win2k, WinNT và WinXP. Bạn có thể download tại: http://www.usingit.com/products/js/datetime/jck/jck10trl.zip . Xara Webstyle – tất cả trong một Để tạo nút bấm cho trang web, bạn tìm chương trình Button Maker hay 1Cool Button, để tạo các banner bạn tìm phần mềm Create Banner hay tự tạo bằng Microsoft Frontpage, để tạo các dòng chữ xoay “anh một kiểu, em một kiểu”, bạn phải tìm đến chương trình ABC nào đó, để tạo các menu cho trang web bạn phải lục tung trên xa lộ thông tin phần mền XZY... Thật là một chuyện không đơn giản... Dù là người luôn say mê, tìm tòi tạo web nhưng nhiều khi bạn cũng cảm thấy hơi khó chịu khi phải thực hiện quá nhiều động tác. Nắm được tâm lý này, hãng Xara đã cho ra đời phần mềm XARA WEBSTYLE ( http://www.xara.com/products/webstyle ). Đây có thể coi là một cái “giỏ đựng đồ trang điểm” của các trang web của bạn. Thật vậy, chương trình cho phép tạo ra các nút bấm, các banners, các menu, các logo, chữ xoay, hình nền, những chấm đầu dòng, hình ảnh,… vô cùng bắt mắt một cách dễ dàng. XARA WEBSTYLE có sẵn cả chục, thậm chí cả trăm mẫu tạo sẵn cho bạn lựa chọn, còn nếu bạn vẫn chưa vừa lòng? Hãy sử dụng hình ảnh của mình hoặc lên trang chủ download xuống những mẫu mới. Rõ ràng, với XARA WEBSTYLE , bạn có cả thế giới màu sắc trước mắt. Khi khởi động chương trình, bạn sẽ thấy xuất hiện một cửa sổ được gọi là cửa sổ Start. Hãy bắt đầu! 1/Tạo button: Việc này cũng đâu phải là khó lắm! Bạn chọn phần Button ở cửa sổ Start. Sau đó, hãy để ý cột phía trái màn hình. Hãy click vào từng phần ở đó để bắt đầu và kết thúc công việc. Ở phần Design, bạn sẽ phải chọn kiểu của button. Ở phần Text, bạn gõ những chữ sẽ hiện lên trên nút. Sau đó, trong phần Colors và Textures, bạn chọn màu nền và màu nút. Bạn chọn hiệu ứng bóng cho button trong phần Shadows và chỉnh kích thước cho nút ở phần Size. Cuối cùng bấm Save. XARA WEBSTYLE cho phép lưu file dưới 3 dạng GIF, JPEG, PNG và dưới 3 tiêu chuẩn về chất lượng: Fast download (nghĩa là chất lượng ảnh thấp nhất, nhưng sẽ được download nhanh hơn trên mạng), Medium Quality và High Quality. Bạn còn có thể xem trước sản phẩm bằng Browser Preview. Bạn còn tạo ra một “hệ thống nút bấm” từ các mẫu của button có sẵn bằng cách click vào NavBar. Phần này sẽ được nhắc đến ở mục 3. 2/Tạo logo (biểu tượng), background (màu và hình nền), dividers (tạm dịch là các đường kẻ nghệ thuật), banner (các bảng thông báo, quảng cáo), bullets (các chấm, gạch đầu dòng, dùng để tạo ra một danh sách). Với các phần này, bạn cũng thao tác giống như phần tạo nút bấm. Khi lưu lại, bạn có thể chọn số màu của đối tượng (từ 2 đến 256 màu).
3/Tạo NavBar và Menu: nói nôm na đó là một hệ thống nút bấm giống nhau về hình thức và được kèm theo một tí xíu hiệu ứng âm thanh, hình ảnh khi bạn đưa hay click chuột vào nó. XARA WEBSTYLE cung cấp cho chúng ta rất nhiều mẫu Navbar rất “sành điệu”, hấp dẫn và bắt mắt. Các công việc đầu tiên cũng bình thường như chọn kiểu, chọn màu,… Ở giai đọan cuối, bạn click vào phần Navbar. Bạn sẽ thấy hiện ra một bảng. Trong cột URL, bạn phải gõ vào đó kết nối (hyperlinks) của từng buttons. Nếu muốn thêm hay xóa một button, bạn click vào nút Add hay Delete ở dưới bảng. Ở đây, bạn còn có thể chỉnh được khoảng cách giữa các nút (Spacing). 4/3D Heading: là một phần truyển thống của Xara. Ở đây, bạn có thể tạo ra các từ, các cụm từ có khả năng xoay theo nhiều kiểu khác nhau. Ở mục này, bạn có một phần mới phải lưu ý là phần bevel – chỉnh góc cạnh, độ dày mỏng, hiệu ứng ánh sáng, độ cong,… của đối tượng. XARA WEBSTYLE còn rất nhiều tính năng thú vị khác nữa. Nếu bạn còn có gì thắc mắc hay chưa biết sử dụng một chi tiết nào của chương trình, bạn có thể click vào nút Tutorial và chương trình sẽ hướng dẫn cho bạn thật tỉ mỉ về từng bước thực hiện. Nói chung, XARA WEBSTYLE có thể được chấm 9.5/10 vì những lợi ích của nó cung cấp cho người sử dụng. Tiện ích này có giao diện hiện đại, hấp dẫn và đẹp mắt, ngoài ra, các tính năng của nó rất dễ khai thác và sử dụng. Với XARA WEBSTYLE này, bạn không cần mất thời gian tìm kiếm nhiều tiện ích khác nhau cho cùng một mục đích “làm trang web bạn nổi bật giữa đám đông”. Đưa games flash vào web Bạn có một cửa hàng dịch vụ chơi games và để “phô trương thân thế” cho thiên hạ biết, bạn sẽ xây dựng một trang web với dịch vụ chơi games miễn phí? Nhưng điều quan trọng là… “tui nào có biết lập trình "gem ghiếc" gì trên máy ví tính đâu cơ chư! Lại còn đưa lên trang web nữa, vậy là phải biết lập trình web nữa hả? Trời ạ!!”. Bạn có biết rằng nếu bạn biết lập trình game thì bạn sẽ không phải mở dịch vụ trò chơi để kiếm cơm đâu, mà bạn đang ở “bển” làm ăn với EA Games hay Konami rồi. Cái quan trọng ở đây là chúng ta biết động não để tận dụng 100% “vốn tự có ”ù và “ của chùa” trên Internet. “Vốn tự có” là gì? Là cái óc tưởng tượng phong phú sáng tạo của bạn. Còn “của chùa” trên mạng là gì? Là những gì miễn phí trên mạng mà điển hình là những dòng ở dưới mà bạn sẽ đọc tới. 1/ Đối với các tập tin games flash mà bạn đã có sẵn. Chắc chắn bạn sẽ hỏi tôi: tìm đâu ra những games flash? Tôi chắc chắn sẽ hỏi ngược lại bạn: Bạn không biết sử dụng Yahoo!, Google, Altavista à? Chỉ cần gõ lên thanh tìm kiếm vài chữ như là: games flash free hay là download games flash,… bạn sẽ nhận nhiều câu trả lời hữu ích hơn bạn hy vọng đấy! Thông thường, các file download về thừơng là file có dạng *.SWF. Làm gì tiếp theo nhỉ?
Đầu tiên, điều căn bản phải nhớ: “tất cả các tập tin đều phải ở trong một ổ chứa!!!” (bài 1 và bài 4 đều đề cập kỹ điều này). Nghĩa là trang web và game của bạn phải nằm trong một thư mục. Ví dụ: khách sẽ vào trang web boxing.html của bạn để chơi trò đánh box, điều này có nghĩa là file boxing.html và file game đánh box (boxing.swf, chẳng hạn) sẽ nằm cùng trong thư mục C:web- cua-tui…. Trong bài (Tạo nút bấm cho trang web) tôi đã có hướng dẫn các bạn cách chèn một nút bấm dạng flash vào trong trang web. Hãy động não một chút xem chúng ta có thể ứng dụng nó như thế nào nhỉ? Đây là mã nguồn mà bạn được cung cấp: Thú thật, tôi cũng chẵng hiểu đoạn mã này nói gì cả. Nhưng hãy để ý những chỗ màu đỏ, đó chẳng phải là nơi để chèn tên tập tin game flash của bạn và điều chình kích thước của game trên màn hình? Vậy là rõ rồi nhé! Bạn chèn đoạn mã này vào trang web boxing.html như cách tôi đã hướng dẫn ở bài 3, sau đó, gõ vào chỗ “tên tập tin SWF” tên tập tin games của bạn, và điều chỉnh các con số để kích thước cùa trò chơi phù hợp vói kích thước màn hình Windows. 2/Với các tập tin games flash tạo ra bời các chương trình đơn giản. Ở đây, tôi lấy ví dụ là chương trình Flash Jigsaw Producer . Đây là một chương trình khá đơn giản, giúp bạn tạo ra một game xếp hình nho nhỏ từ những file ảnh động và tĩnh của bạn như: BMP, GIF hay JPG. Công việc của bạn cũng không nặng nhọc gì lắm, bạn chỉ cần chọn hình, sau đó chòn số lượng các mảnh ghép ngang, kích thước của game và dọc và cuối cùng là điều chỉnh các hiệu ứng cho trò chơi để nó thếm phần hấp dẫn. Sau đó, bạn click vào nút Make và đợi vài giây trước khi chơi thử trò chơi của mình. Cuối cùng, bạn lưu trang web này lại (File/Save As) . Flash Jigsaw Producer có giao diện rất thân thiện và rất dễ sử dụng, không những giúp ích cho người mới làm quen với web mà nó còn là một công cụ hỗ trợ khá hấp dẫn cho các lập trình viên chuyên nghiệp. File download của Flash Jigsaw Producer năng khoảng 1,3MB, download tại: http://www.anim- fx.com/downloaddemo/setupanimfx.exe Kết: chỉ với vài thủ thuật nhỏ được tận dụng bởi “vốn tự có” và xử lý “của chùa” trên Internet, bạn trang web của bạn sẽ có sức hấp dẫn lớn hơn hẳn. Tại sao à? Ai lại không thích chơi bời!!! Hãy thất sáng tạo để tạo thêm sức hút cho trang web của bạn nhé!