Hướng dẫn chi tiết đưa 1 website lên mạng

Bạn muốn lập một trang web hay một diễn đàn.. Nhưng chưa bít làm thế nào để đưa nó lên mạng. Phải làm sao đây ? Bài hướng dẫn dưới đây sẽ giúp bạn làm được điều đó.

Việc đầu tiên bạn cần làm là phải kiếm một mã nguồn của một diễn đàn nào đó. Chẳng hạn IBF, PhpBB, Joomla, hay kiếm những bản VBB đã crack cũng được.

Đây là link đến mã nguồn của những trang đó :
mình lấy cái này làm ví dụ nha
Vbulletin 3.6.8 :
http://www.mediafire.com/?31x0zozzjtx
Chọn một trong những mã nguồn trên. Rùi sau đó giải nén ra. Nếu cảm thấy ngại thì cứ cài trên localhost trước.

Cài đặt : cứ tìm cài file install mà đọc hướng dẫn rùi cài đặt. Ở trong mỗi mã nguồn đều có những hướng dẫn rất cụ thể rõ ràng tôi xin phép ko nói thêm ở đây nữa.(cài cái này là trên localhost).

Tiếp theo bạn cần kiếm một cái webhosting để có thể up mã nguồn của bạn lên. Hiện nay có rất nhiều trang miễn phí mà dung lượng và băng thông cũng rất lớn. Trang mà tôi dùng hiện nay là http://hosting.zymic.com.

Sau khi đăng kí một hosting rùi, công việc tiếp theo của bạn là gì? Dĩ nhiên là upload mã nguồn website của mình lên rùi. Để upload lên được bạn cần dùng các trình upload để hỗ trợ việc upload ví dụ :

CuteFTP
http://www.benhvientinhoc.com/index....e=post&id=1750

Ngoài ra còn có rất nhiều trình upload nổi tiếng khác như WS_FTP pro/home, Flashxp, FTP commander...

Cái này các bạn tự tìm hiểu thêm nhé.

Bây giờ có phần mềm upload rùi làm gì tiếp theo, dĩ nhiên là cài đặt và kết nối đến ftp server rùi. Tùy vào webhosting khác nhau mà ftp username sẽ khác nhau, bạn cần để ý đến điều này. Ví dụ như tôi đăng kí tại trang http://zymic.com 1 tài khoản là chaien281985, sau đó tui đăng kí một webhosting tên là khongdunghang, thì host của tui là khongdunghang.99k.org và username là khongdunghang@99k.org">khongdunghang@99k.org">khongdunghang@99k.org">khongdunghang@99k.org. Rồi bạn lấy hai cái đó và cái pass tài khoản đó điền vào phần host, username và pass của chương trình upload ( giả sử ở đây là cuteftp). nhấn vào nút kết nối. Nếu kết nối thành công, thì bạn có thể upload thoải mái rùi đó. Dưới đây là hình minh họa của chương trình ftp



Chương trình này có 3 cửa sổ đáng chú ý. Cửa sổ 1 chỉ đến máy của bạn. Cửa sổ thứ hai là trên host, và cửa sổ thứ 3 cho biết tiến trình đang chạy đến đâu. Muốn upload một mã nguồn lên host, bạn nhìn vào cửa sổ thứ nhất, chọn Local drives, rồi tìm đường dẫn đến thư mục chứa mã nguồn của bạn. Nhấn chuột phải chọn Upload ( hoặc nhấn Ctrl + PgUp), quá trình upload sẽ diễn ra, bây giờ bạn chỉ việc ngồi chờ cho quá trình này xong thì thôi.

Rùi xong rùi, bây giờ việc tiếp theo của chúng ta là sẽ cài đặt diễn đàn, ( giả sử diễn đàn cần cài đặt là V.bulletin 3.6.x), bạn vào thư mục mã nguồn của vbb trên host, vào tiếp thư mục includes, sau đó tìm file config.php.new đổi tên nó thành config.php.

Tiếp đến chúng ta cần tạo một cơ sở dữ liệu cho diễn đàn, cái này cần hết sức để ý, để cấu hình cho file config.php được chính xác, giả sử bạn tạo một cơ sở dữ liệu tên là forum, và một user database là admin, pass là abc chẳng hạn. Rồi tiếp theo bạn gán quyền cho user đó, ( có thể là tất cả các quyền cái đó tùy bạn). Rồi bây giờ là phần quan trong nhất cấu hình file config.php.

Bạn vào edit file config.php trên host. Thay đổi 1 số thứ như sau:

$config['Database']['dbname'] = 'khongdunghang_99k_org_forum'; //database vừa mới tạo

$config['MasterServer']['servername'] = 'localhost'; // cái này luôn là localhost đối với server này.

$config['MasterServer']['username'] = 'khongdunghang_99k_org_admin';
//Đây là user database mà bạn vừa đăng kí

$config['MasterServer']['password'] = 'abc'; //Password

Rùi save file này lại.

Bây giờ bạn mở FF hoặc IE lên, đánh vào địa chỉ http://khongdunghang.99k.org/{thu muc ma nguon v.bulletin}/install/install.
Cứ next cho đến hết 13 bước.

Rùi bạn có một website rùi đó. Chúc mừng bạn.

Thư viện JavaScript 02

- Cây thư mục Đây là đoạn JavaScript nhỏ giúp bạn tạo một mục lục dạng "cây thư mục" đơn giản.

- Hình ảnh 3D ảo Đoạn mã giúp tạo hiệu ứng 3D.

- Bộ tìm kiếm đơn giản Bạn muốn tạo một trang tìm kiếm riêng cho website của mình mà không cần sự hỗ trợ của các website khác, nhưng bạn chẳng biết tí chút gì về các ngôn ngữ lập trình web như: PHP, ASP, CGI... Vậy xin mời bạn hãy vào website e-Chip để download bộ tìm kiếm viết bằng JavaScript này về, sau đó theo hướng dẫn bạn có thể tự tạo cho mình một trang tìm kiếm theo phong cách riêng của bạn.

- Background ấn tượng Bạn có thể làm trang Web của mình có ảnh nền thật ấn tượng với các bước: chọn một hình nền (chân trời) sẫm màu, mô phỏng thêm hiệu ứng mưa rơi, và cuối cùng là cho xuất hiện ngẫu nhiên hình tia sét. Chúc bạn thành công!

- Hiệu ứng Batman Mời bạn tải chương trình tạo hiệu ứng “batman” về dùng thử. Tương tự các hiệu ứng chuột khác, các chú dơi sẽ bay lượn quanh vị trí trỏ chuột. Nếu muốn bạn có thể giữ nguyên mã nguồn và thay đổi hình ảnh cho hợp với trang Web của mình.

- Quay hình Với một số logo có sẵn, tôi xin giới thiệu đoạn mã xoay vòng các hình ảnh. Bạn thay vđo logo trang Web mnh rồi đặt vị trí thể hiện ở góc trên trái, sẽ rất đẹp và “huyền bí”, chúc bạn thành công!

- Trắc nghiệm trực tuyến Bạn cần làm một cuộc trắc nghiệm nho nhỏ để kiểm tra lại kiến thức của mnh ở một vđi lĩnh vực? Mời bạn dùng thử chương trnh “Trắc nghiệm trực tuyến”.  Bạn chỉ cần thay đổi nội dung câu hỏi, đáp án là có thể mời bạn bè “thi đấu” tính điểm trên trang Web của mnh rồi.

- Ngoài kia... lá rơi đầy Tương tự như hiệu ứng tuyết rơi, mưa rơi... bạn có thể tạo một hiệu ứng thật đẹp trên trang Web của mình với những chiếc lá nhiều màu sắc, đủ các kích cỡ. Chương trình có trên Website eChíp mục Thư viện JavaScript cùng với các file ảnh đi kèm, mời bạn tải về dùng thử.

- Chiếu đèn ... disco! Với hiệu ứng bộ lọc, thêm vào một chút tính toán là bạn có ngay các đèn chiếu nhiều màu sắc thật hấp dẫn trên trang Web. Nếu muốn, bạn có thể thêm vào một file âm thanh (nhạc nhảy sôi động chẳng hạn) để làm “nóng” Website của mình. Khi cần thiết, bạn thay đổi thông số về thời gian nháy đèn (không cho nháy đèn ngẫu nhiên) để phù hợp với tiết tấu bài nhạc.

- Chữ chạy bốn hướng Các dòng chữ sẽ xuất hiện chồng chất lên nhau, sau đó di chuyển theo bốn hướng ra các cạnh màn hình. Bạn có thể dùng hiệu ứng này để làm trang mở đầu, giới thiệu các thông tin quan trọng đến người lướt Web, rất đẹp và hấp dẫn.

- Xem vùng tối của Trái Đất Nếu bạn muốn xem bóng tối đang phủ trên vùng nào của Trái Đất ở thời điểm hiện tại, mời bạn tải chương trình này về dùng thử. Bạn có thể thay đổi giờ hệ thống để kiểm tra độ chính xác vùng tối trên bản đồ của chưong trình.

- Các kiểu menu Bạn muốn tìm hiểu các kiểu xuất hiện thực đơn, bảng thông báo động khi rê chuột lên trên liên kết? Chương trình tôi giới thiệu sẽ lướt qua hơn 10 kiểu menu động, trong đó có cả những menu xuất hiện kèm theo hiệu ứng ngẫu nhiên. Tùy theo mục đích sử dụng và phần thiết kế trang trí của Website, bạn có thể tham khảo để chọn cho mình hiệu ứng phù hợp.

- Khoảng cách không phận Xin giới thiệu cùng các bạn chương trình đo khoảng cách giữa một số thành phố ở các quốc gia. Bạn chọn điểm khởi hành và nơi đến, rồi chọn đơn vị tính ( theo kilomet hay theo dặm) rồi nhấp chuột vào nút “Đo khoảng cách”.

- Tạo mã HTML tự động Để thu hút nhiều khách tham quan vào web của bạn hơn thì bạn nên mở thêm một dịch vụ miễn phí nào đó, tôi xin đề cử dịch vụ thiết kế web. Người lướt Web chỉ cần nhập một vài thông tin là có thể tạo ra một trang Web đơn giản rồi!

- Hình chuyển động Có nhiều cách để chuyển động hình trong Website, cũng như với mỗi cách bạn có thể tạo nhiều đường chuyển động khác nhau. Xin giới thiệu một đoạn Script ngắn tạo chuyển động hình ngẫu nhiên.

- Hiệu ứng chuyển ảnh Xin giới thiệu cùng các bạn hiệu ứng chuyển tiếp đơn giản mà thật đẹp mắt. Mỗi khi người dùng nhấp chuột vào nút “Play” thì “Trang 1” và “Trang 2” sẽ được hoán đổi cho nhau. Bạn cũng có thể cài đặt thêm phần tự chuyển đổi theo thời gian cho trước.

- Màu và mã màu Đôi lúc bạn tự hỏi chọn màu background cho trang Web của mình như thế nào, và cần đối chiếu hiệu quả giữa một số màu thông dụng... Mời bạn vào Website e-Chíp tải chương trình về dùng thử. Khi bạn rê chuột lên ô màu nào thì background sẽ được đổi ngay thành màu đó, đồng thời giá trị số biểu diễn cho màu vừa chọn sẽ hiện ra bên dưới.

- Đồng hồ theo chuột Có thể các bạn đã quen thuộc với những dòng chữ hoặc hiệu ứng theo chuột, tôi xin giới thiệu chương trình tạo đồng hồ di chuyển theo chuột. Bạn có thể thay đổi tùy ý dòng chữ xoay bên ngoài ở phần đầu chương trình.

- Chọn hình nền cho Website Nếu e ngại những vị khách khó tính không hài lòng với “skin” của trang Web  mình, bạn có thể cho phép họ tự chọn hình nền (background) tùy ý. Mời bạn tải chương trình về dùng thử, sau đó bạn sưu tầm thêm nhiều hình nền đẹp để bổ sung cho chương trình.

- Tạo bảng đổi đơn vị đo chiều dài Để có một bảng cho phép chuyển đổi giữa các đơn vị đo chiều dài, bạn chỉ cần vào Website e-CHÍP để tải đoạn chương trình này về. Nếu cần bạn có thể chỉnh sửa mã nguồn để có nhiều loại đơn vị tính hơn.

- Tạo hiệu ứng album ảnh Bạn có thể tạo một album ảnh “tự động” lật từng tờ, khi người lướt Web nhấp chuột vào hình ảnh sẽ dẫn đến một liên kết cụ thể khác ( ở đây tôi đưa người lướt Web đến số báo tương ứng hình trong album).

- Tạo trang giới thiệu ấn tượng Chương trình cho phép bạn tạo phần  giới thiệu thật ấn tượng về nhóm thực hiện trang Web, những dòng chữ này sẽ được “cuộn” từ dưới lên. Bạn cũng có thể thay đổi nội dung giới thiệu để biến phần này thành những lời quảng cáo.

- Cẩm nang thời gian cho trang Web Xin giới thiệu cùng các bạn chương trình JavaScript cho phép tham khảo thời gian ở khắp năm châu. Bạn chỉ cần chọn tên thành phố từ năm danh sách cho sẵn của chương trình, thời gian sẽ được hiển thị rất nhanh chóng và rõ ràng.

- Cuộn hình từ dưới lên Bạn có thể đưa file hình thích hợp vào đoạn mã JavaScript tôi giới thiệu để cuộn hình. Với cách thể hiện này bạn có thể tự tạo một “banner” cho trang Web của mình.

- Chú thích trên thanh trạng thái Có nhiều cách giới thiệu nội dung của một liên kết trên Web, mời bạn “xài” thử phương pháp tạo một dòng chú thích trên thanh trạng thái (khi người lướt Web rê chuột lên trên liên kết).

- Hình nền trên Website Khi bạn kéo thanh trượt, hình nền vẫn đứng yên tạo cảm giác chuyển động rất mượt và hấp dẫn. Bạn có thể tham khảo mã nguồn để thay hình ảnh thích hợp hơn cho Website của mình.

- Rung chuyển liên kết Các hình ảnh liên kết sẽ chuyển động liên hồi khi bạn rê chuột vào khung ảnh. Hiệu ứng này gây sự chú ý đặc biệt đến người lướt Web và giúp trang Web bạn sinh động hơn.

- Tùy biến màu sắc trang Web Cho phép người dùng tự chọn màu sắc thể hiện văn bản, màu nền cũng là một điều lý thú phải không bạn? Bạn có thể thay đổi giao diện khác đi theo ý thích của mình và tăng thêm số màu thể hiện cho phong phú hơn.

- Hồ cá trên Web Các bạn hẳn đã quen với các hiệu ứng nền động như mưa rơi... sao bạn không vào website e-CHÍP để tải chương trình này về dùng thử? Chỉ cần kết hợp vài hiệu ứng là bạn có ngay một... hồ cá các loại trên Web rồi!

- Liên kết trên Website Các liên kết “nóng” thường dùng được đưa vào một khung thể hiện rất tiện lợi và rõ ràng đối với người lướt Web. Khi rê chuột đến liên kết nào đó, một mũi tên đỏ sẽ nhấp nháy ngay trước liên kết.

- Chữ mờ ảo trên Web Khi bạn rê chuột lên liên kết, một số dòng chữ ( nội dung tùy ý như lời chú giải, thậm chí dòng quảng cáo,vv...) sẽ hiện lên mờ ảo, rất nhẹ nhàng mà vẫn gây sự chú ý đối với người lướt Web.

- Menu chuột phải Bạn đã bao giờ truy cập vào một menu của trang web bằng cách nhấp phải chuột chưa ? Đoạn mã JavaScript sau đây ứng dụng định vị động của HTML đối với đối tượng lớp (ở đây là 1 menu).

- Tạo lựa chọn dẫn đường cho các liên kết Có nhiều hình thức để tạo liên kết để dẫn đến các Website khác. Bạn có thể sử dụng menu chuột phải, các liên kết trực tiếp, vv... Xin giới thiệu cùng các bạn một phương pháp rất dễ dàng và rõ ràng (về mặt giao diện đối với người sử dụng): cho phép người lướt Web lựa chọn các liên kết, rồi sau đó nhấp chuột vào nút thực hiện.

- Chữ quay nhiều hướng Các dòng chữ chuyển động bao giờ cũng làm trang web của bạn thêm sinh động và lôi cuốn. Xin giới thiệu cùng các bạn một hiệu ứng quay chữ nhiều hướng. Bạn có thể thay nội dung dòng chữ rồi đặt trục quay ở góc trên-trái website là thích hợp nhất.

- Chữ nhảy múa Hiệu ứng này phù hợp cho việc thiết kế một trang giới thiệu cho website của bạn. Trước hết dòng chữ vừa uốn lượn vừa di chuyển ngang màn hình, sau đó các ký tự sẽ lần lượt rơi xuống đáy màn hình như một cơn mưa ngập tràn màu sắc vậy.

- Các dạng Cursor Đây là một chương trình demo các hình dáng của trỏ chuột, từ đồng hồ cát, bàn tay, dấu hỏi, vv... Các bạn có thể vào website e-Chíp mục Thư viện JavaScript để tải chuơng trình về dùng thử.

- Hiệu ứng banh rơi Trái banh sẽ  dội xuống đáy màn hình (điểm bắt đầu ở vị trí bạn nhấp chuột) và nảy lên, độ cao giảm dần cho đến khi chuyển động dừng hẳn. Bạn có thể áp dụng hiệu ứng rất đẹp mắt này cho một dãy các ký tự.

- Menu di chuyển được Giữa nhiều loại menu trên trang Web, menu di chuyển được có một vị trí “không đụng hàng”. Để bắt đầu di chuyển menu, bạn nhấp chuột vào thanh tiêu đề, sau đó “thả” menu đến vị trí mới bằng cách nhấp đúp chuột.

- Vẽ biểu đồ Biểu đồ trong Office thật đơn giản phải không bạn, tuy nhiên tôi muốn giới thiệu với các bạn một cách thể hiện biểu đồ trên trang Web dùng JavaScript. Các bạn có thể nhập thẳng số liệu vào các ô nhập liệu, sau đó nhấp chuột vào nút “vẽ”, thế là xong!

- Đồng hồ đeo tay Đồng hồ gắn trên các website thường là “điện tử” (không có kim) hoặc là dạng đồng hồ “treo tường”, tôi xin giới thiệu với các bạn một chiếc đồng hồ đeo tay rất dễ thương, ngoài chức năng báo giờ (đương nhiên) nó còn báo luôn thứ mấy trong tuần, ngày mấy trong tháng...

- Cổ động viên Ai-Ti Còn đây là cổ động viên nhiệt tình và vô tư nhất, bạn có thể gắn cổ động viên này lên bất kỳ trang web nào. Nếu muốn cổ vũ lần nữa bạn chỉ cần nhấp chuột vào nút nhấn cạnh hình là xong, lúc này bạn có thể thưởng thức một màn biểu diễn hoạt ảnh bằng các ký tự ráp lại.

- Xem mã màu Đây là chương trình cho phép bạn có được mã RGB từ các màu thường gặp, bạn có thể thêm sáng, hoặc cho màu gốc tối đi. Nếu muốn, bạn cũng có thể gõ trực tiếp các thông số RGB (theo dec hoặc hex) để xem thử hiệu quả màu mình chọn.

- Đồng hồ JavaScript Xin giới thiệu cùng các bạn một chiếc đồng hồ có vẻ đẹp rất cổ điển. Bạn hoàn toàn có thể "treo" chiếc đồng hồ này lên trang Web của mình.

- Ẩn - hiện logo Cho logo của mình xuất hiện cố định trên Website đôi lúc cũng nhàm chán, bạn có thể thử cho logo bay "lòng vòng" trên trang quảng cáo. Logo sẽ chợt ẩn chợt hiện nên không làm "rối" tầm nhìn của người lướt Web.

- Tạo hiệu ứng cho liên kết Bạn có thể thêm nhiều ý nghĩa hơn cho các liên kết bằng cách hiển thị thêm hình và/hoặc logo của Website được liên kết. Hình ảnh sẽ được hiện ra khi người lướt Web trỏ chuột vào liên kết.

- Dòng chữ xoay quanh con trỏ chuột Dòng chữ xoay quanh con trỏ chuột là một hiệu ứng phổ biến trên các trang Web và có nhiều cách thực hiện. Nếu để ý bạn sẽ thấy khi di chuyển chuột thì dòng chữ cũng uốn lượn theo những đường cong đặc trưng (ở các Script khác nhau).

- Không gian ảo Tương tự hiệu ứng "mưa rơi". Tuy nhiên, bạn thay đổi hướng di chuyển thành trái-phải hoặc phải-trái, đồng thời tạo ra các mức tốc độ di chuyển khác nhau (nhằm tạo chiều sâu như không gian 3 chiều, ở tốc độ bằng nhau vật thể ở gần trông như chuyển động nhanh hơn). Như vậy là trang Web của bạn xem như được đặt vào một không gian huyền ảo rồi đó.

- Lịch để bàn kết hợp đồng hồ Nếu trên bàn làm việc có một bộ lịch “khuyến mãi” đồng hồ thì quá thuận tiện phải không các bạn? Mời các bạn vào website e-Chíp để tải chương trình về.

- Menu động Menu cho trang web được thiết kế với màu sắc trang nhã, dễ theo dõi. Khi bạn di chuyển chuột đến một mục nào trong menu, chú gà con - “linh vật” của e-Chíp sẽ bay theo. Bạn chỉ cần tìm một góc thích hợp để trình bày menu này trên trang web của mình thôi.

- Hồ cá “Java” Screensaver – trình bảo vệ màn hình đôi khi còn giúp chúng ta có những giây phút thư giãn với các hình ảnh hết sức tuyệt vời đi kèm. Xin giới thiệu cùng các bạn một “hồ cá” thật dễ thương mô phỏng các Screensaver để “ngâm cứu”.

- Khung hình di động Tương tự thủ thuật soi hình, tuy nhiên bạn phải làm cho khung hình trong suốt để tăng độ hấp dẫn. Khách thăm website của bạn sẽ nhấp và giữ chuột trái, sau đó di chuyển chuột để xem hình ảnh (hay nội dung) bên dưới.

- Đôi mắt lém lỉnh... Bạn hãy thử tải đoạn JavaScript này về rồi thử xem, khi bạn di chuyển chuột đến đâu, đôi mắt sẽ “liếc” theo đến đó. Chỉ khi nào bạn di chuyển chuột ra ngoài vùng thể hiện của trang web thì đôi mắt này mới bị “ngoài vùng phủ sóng” thôi.

- Chữ quay chong chóng Xin giới thiệu cùng các bạn một hiệu ứng đơn giản: cho một dòng văn bản xoay tròn như chong chóng, với kích thước to dần. Bạn chỉ nên dùng đoạn mã này khi website bạn có không gian trình bày và bạn muốn nó thêm phần sinh động.

- Rồng vàng Bạn có bao giờ thấy một đoạn text bay lượn trên trang web trông như chú “Rồng Vàng” chưa? Mời các bạn vào website e-Chíp mục Thư viện JavaScript để lấy chương trình này về. Rất đẹp mắt đó bạn.

- Liên kết... đẹp như trong phim Đoạn mã JavaScript được sử dụng để truyền các thông số cho một JavaApplet, các liên kết di chuyển trông như đoạn phim đang chiếu. Hiệu quả thật tuyệt vời phải không các bạn? Mã nguồn ngắn gọn và rất đơn giản, bạn chỉ cần thay đổi các liên kết cho phù hợp với website của mình.

- Tạo hiệu ứng cho liên kết ”Dân” làm web luôn cố gắng gây ấn tượng đối với khách tham quan “ngôi nhà” trên mạng của mình. Do đó các hình ảnh và liên kết thường được chăm chút kỹ để tạo nét hấp dẫn riêng. Xin giới thiệu cùng bạn một chiêu: “nổ tung” tên liên kết bay ra thành nhiều hướng khi trỏ chuột vào nó.

- Thế giới quay Xin giới thiệu cùng các bạn một bản đồ “kỹ thuật số” hấp dẫn. Muốn phóng to hay thu nhỏ bạn chỉ cần nhấp chuột vào hai nút tương ứng (nằm bên cạnh bản đồ). Các bạn có thể xem mã nguồn chương trình để tìm hiểu và thay đổi tỷ lệ phóng, cũng như góc xoay theo ý muốn.

- Chữ ngược Hiệu ứng chữ ngược (đổ bóng cho chữ) rất đơn giản mà thật hiệu quả. Nếu kết hợp cùng việc làm nhòe khung hình, bạn sẽ có thêm hiệu ứng “soi mặt hồ” thật đẹp. Bạn có thể vào website eChíp mục “Thư viện JavaScript” để tải mã nguồn về.

- Làm bảng quảng cáo Với vài cách thể hiện (cuộn hình từ trái sang, từ trên xuống, đan lưới các ô vuông, vv...) và kết hợp chúng cùng nhau, bạn đã có đoạn mã JavaScript ngắn nhưng “đủ xài” để làm “banner” quảng cáo. Những hình ảnh sinh động này luôn tăng sự hấp dẫn cho trang web, đồng thời bạn cũng có thể gởi thêm thông tin cho người lướt web.

- Thần tình yêu trên... trang web của bạn Nhiều hình ảnh của vị thần tình yêu sẽ bay... lơ lửng trên trang web của bạn. Tuy nhiên bạn có thể thay đổi số lượng hình ảnh, tốc độ di chuyển hình,vv... thật dễ dàng ( chương trình có chú thích chi tiết các thông số ). Kỹ thuật di chuyển ảnh dùng “layer” này cũng thường được sử dụng trong các minigame viết bằng Javascript trên mạng, bạn thử tìm hiểu xem.

- Quảng cáo... mờ ảo Bạn từng thấy các dòng quảng cáo khá bắt mắt trên những trang web? Thay vì phải dùng những phần mềm tạo chữ “nhảy múa” 3D phức tạp (tất nhiên chất lượng hình ảnh cao hơn) và mất khá nhiều thời gian, bạn có thể sử dụng những bộ lọc “có sẵn” trong Javascript. Đơn giản hơn nhiều mà hiệu quả cũng... được lắm!

- Ánh đèn sân khấu Chú gà e-Chíp đang “hăm hở” dưới ánh đèn sân khấu... thật đẹp và hấp dẫn phải không bạn? Hiệu ứng đèn “follow” chiếu theo từng vùng trên ảnh đích có thể sẽ làm ngạc nhiên và gây ấn tượng với những vị khách tham quan website của bạn. Chương trình có thể tải về từ website e-Chíp mục “Thư viện Javascript”.

- Phóng to và thu nhỏ ảnh Bạn chỉ cần rê chuột lên các mục “Phóng to”, “Bình thường”, hay “Thu nhỏ” để điều chỉnh kích cỡ ảnh. Thật thuận tiện và đơn giản phải không bạn?

- Xoay hình Nếu bạn đã thiết kế một logo cho mình và đặt lên trang web thì tại sao bạn không thử cho logo đó xoay ở một góc màn hình nhỉ?  Bạn có thể tải về và tìm hiểu đoạn chương trình tôi giới thiệu rồi cải tiến cho phù hợp với trang web của bạn. Công đoạn sau cùng chỉ là... thay đổi logo mới thôi.

- Soi ảnh trên Web bằng... kính lúp Xin giới thiệu với các bạn một “chiêu” hấp dẫn: dùng kính lúp soi ảnh trên web. Người lướt web dùng chuột để “nắm” kính lúp và khi chuột di chuyển, kính lúp sẽ soi theo, phần ảnh phóng to tương ứng hiển thị gần bên. Đây là một hiệu ứng rất độc đáo và công phu, mong là các bạn sẽ thích...

- Con trỏ chuột Có rất nhiều các trang trí cho con trỏ chuột ( đồng hồ, chữ, hình ảnh xoay quanh, vv...) và độ sinh động của chúng đối với người lướt web cũng rất khác nhau. Xin giới thiệu với các bạn một “chiêu” về con trỏ chuột khá hấp dẫn: các quả bóng “dí” theo tọa độ chuột, đồng thời xoay vòng tạo ra những chuyển động rất đẹp mắt và hấp dẫn.

- Đổi màu cho thanh cuộn Bạn thích trang trí lại thanh cuộn với màu sắc bắt mắt hơn? Rất đơn giản, chỉ cần hơn 10 dòng lệnh JavaScript, bạn có thể dễ dàng thay đổi màu sắc các thành phần trong thanh cuộn “made in tự tui” rồi.

- Chữ xoay quanh chuột Bạn đã biết cách gắn một dòng văn bản (text) vào “đuôi chuột”,  bạn đã biết cách tạo dòng chữ chuyển động mô phỏng không gian ba chiều (3D), sao bạn không thử kết hợp hai công đoạn này với nhau? Mời bạn ghé thăm website e-Chíp mục “Thư viện JavaScript” để tải mã nguồn chương trình “Chữ xoay quanh chuột 3D” về  xài thử.

Thư viện JavaScript 01

- Máy tính đơn giản Bạn có thể tạo một Máy tính số học đơn giản trong trang Web với các chức năng: cộng, trừ, nhân, chia và tính luỷ thừa

- Bảo vệ trang web bằng Javascript Các đoạn Javascript này giúp bạn bảo vệ trang Web của mình tránh bị copy tràn lan. Kỹ thuật sử dụng rất đơn giản là không cho dùng chuột phải để mở menu đồng thời vô hiệu thao tác đánh dấu chọn bằng chuột cũng như phím Ctrl+A (chọn tất cả nôi dung).

- Đồng hồ kim di chuyển theo chuột Đoạn mã này sẽ tạo ra một đồng hồ tự động chạy theo “sát nút” con trỏ chuột khi di chuyển chuột trong trang Web. Đồng hồ có kim chỉ giờ, phút, giây và có một vòng bao quanh phía ngoài chỉ ngày tháng. Bạn có thể thay đổi kích thước đồng hồ, cách hiển thị của giờ, ngày tháng. Thay đổi màu cho kim, cho giờ và ngày, điều chỉnh tốc độ xoay của vòng ngày tháng, dịch chuyển vị trí của đồng hồ so với chuột..

- Tạo “mưa tuyết” Bạn muốn thấy cảnh mưa tuyết rơi trên trang Web của mình? Xin mời bạn tải về đoạn mã JavaScript. Các bông tuyết được vẽ bằng công cụ Airbrush trong Microsoft Paint, kích thước 10x10 pixel, lưu thành tập tin blue_snow.gif. Chương trình có thể chạy được trên cả Internet Explorer 4.0 và Netscape Navigator 4.0 trở lên.

- Đặt mật khẩu cho trang Web Bạn có thể hạn chế số người truy cập trang web của bạn bằng cách tạo thêm trang web có chứa đoạn Script dưới đây làm trang đòi hỏi mật khẩu. Khi người xem nhập đúng mật khẩu, họ sẽ được chuyển qua trang cần xem. Chú ý: cách đặt mật khẩu này có thể giúp bạn hạn chế bớt việc truy cập “ngoài ý muốn” nhưng không thể qua mặt được các tay chuyên nghiệp.

- Tạo chữ từ nhỏ phóng to ra màn hình Đoạn mã này giúp bạn tạo một loạt những câu (hoặc từ) tự động phóng từ nhỏ đến to trên màn hình, thích hợp cho việc quảng cáo hoặc tạo ấn tượng cho Website của bạn. Bạn có thể thay đổi kiểu hiển thị của Font chữ, tốc độ và kích cỡ của chữ...

- Đặt Logo vào trong trang Web Đoạn mã này giúp bạn đưa một hình Logo vào trang web của bạn, nó sẽ luôn nằm góc phải phía dưới màn hình và luôn giử vị trí cố định cho dù bạn kéo trang web lên hay xuống. Chú ý là Logo này bạn phải dùng các phần mềm đồ hoạ để thiết kế riêng và đưa vào. Bạn có thể điều chỉnh kích thước và vị trí của logo tuỳ ý.

- Tạo dòng chữ chạy trong Status bar của Internet Explorer Tạo các dòng chữ chạy và thay đổi nhau trên thanh trạng thái (Status Bar) của Internet Explorer. Bạn có thể điều chỉnh tốc độ, thay đổi nội dung cũng như số lượng các dòng chữ.

- Tự động thay đổi hình ảnh Những hình ảnh trong trang Web sẽ thay đổi tuần tự một cách rất đẹp, rất bắt mắt người lướt web. Bạn có thể thêm hay bớt hình, thay đổi hình hiển thị đầu tiên, co giản kích thước lớn nhỏ cho thích hợp với trang web.

- Lập “lịch công tác” Ngày nay, với sự phát triển mạnh mẽ của hầu như mọi lĩnh vực trong xã hội, không mấy ai được an nhàn “đếm lá mùa thu rơi trong những chiều thu mát rượi” mà hàng ngày phải vùi đầu vào cả núi công việc. Để sắp đạt công việc một cách khoa học và hợp lý, xin giới thiệu với các bạn một cách lập lịch công tác bằng ngôn ngữ JavaScript mà ai cũng có thể làm được.

- Chữ chạy trên thanh trạng thái Có nhiều chiêu đối với thanh trạng thái của trình duyệt Web. Kỳ này xin giới thiệu cùng các bạn “dòng chữ chạy trên thanh trạng thái”. Bạn chỉ cần “dán” đoạn mã JavaScript này vào trang Web của mình. Nếu cần, bạn có thể thay đổi nội dung dòng chữ cho phù hợp.

- Trang Web biết chào hỏi Đoạn code này giúp bạn đưa một câu chào vào trong trang Web của mình mỗi khi trang Web đó được mở lên ở thời gian nào đó trong ngày. Ví dụ như là: Good morning!, Good afternoon!..., bạn không cần phải dùng câu Welcome to my web... Tuy nhiên, nó chỉ đúng khi giờ trong hệ thống của bạn trùng với giờ thực tế.

- Tự tạo nút Scroll Bạn không cần phải dùng nút Scroll trên chuột, không cần phải dùng thanh cuộn của trình duyệt mà vẫn “thoải mái đi tới đi lui” trên trang Web. Bạn chỉ cần dán đoạn mã JavaScript kèm theo vào Web site của mình và ... a lê hấp, rà chuột lên nút để đi xuống, và rà chuột lên nút để đi lên.

- Khúc dạo đầu cho trang Web Một số trang Web trên Internet thường có những đoạn mở màn bằng đồ họa rất đẹp, một số trang khác lại xuất hiện lời chào, hoặc những thông báo cần thiết đến người lướt Web. Xin giới thiệu với các bạn một cách xử lý nhẹ nhàng mà hiệu quả. Bạn có thể tìm những hình ảnh thích hợp và thay đổi đường dẫn trong mã nguồn, màn hình giới thiệu sẽ tự động tắt sau vài giây.

- Bong bóng ... bay Chỉ cần chèn đoạn mã JavaScript kèm theo vào mã nguồn Website của bạn là đã có thể đưa những quả bong bóng đầy màu sắc tuổi thơ lên... Internet! Trang Web sẽ hấp dẫn và sinh động hơn nhiều. Chúc các bạn ngon miệng với JavaScript - “bánh mì Sài gòn”.

- Tạo những ô vuông sáng lấp lánh di chuyển theo chuột Bạn đã từng thấy các hiệu ứng kèm theo chuột thật bắt mắt trên các Web site (thường được tạo bằng Macromedia Flash)? Xin giới thiệu với các bạn đoạn mã JavaScript “biến hóa cái đuôi chuột” cho dài hơn, lấp lánh nhiều màu sắc. Bạn chỉ cần dán đoạn mã này vào giữa thẻ và , sau đó từ từ “ngâm cứu” để thay đổi màu sắc, kích thước, tốc độ di chuyển của “cái đuôi” này.

- Tạo dòng chữ xoay quanh con trỏ chuột Dòng chữ “JavaScript như bánh mì Sài Gòn” sẽ xoay tròn quanh con trỏ chuột. Chương trình viết bằng JavaScript được chú thích “cực kỳ” đầy đủ, bảo đảm bạn sẽ hài lòng.

- Đồng hồ đếm ngược thời gian Bạn muốn tạo đồng hồ đếm ngược thời gian để nhắc nhở mình một sự kiện quan trọng cần ghi nhớ? Dán đoạn mã kèm theo vào trang Web của bạn. Ngày của sự kiện được tô màu đỏ trong mã nguôn, bạn có thể thay đổi thành một ngày khác như ngày ... khai mạc Seagames 22 chẳng hạn ;-)

- Tạo trình đơn (menu) động trên trang Web Khi lướt Net cũng như lúc xây dựng trang Web, trình đơn động là một công cụ rất mạnh, vừa tiện lợi về mặt tạo liên kết vừa giúp trang Web của bạn có thêm không gian để trình bày. Chỉ có một góc “nho nhỏ” của trình đơn xuất hiện, còn nội dung chính thì “núp” sau trang Web và chỉ hiện ra khi bạn rê chuột lên. Phần mã Java Script dành cho trình đơn được tách thành hai tập tin , bạn có thể chỉnh sửa lại màu sắc, phông chữ, ... cho phù hợp.

- Dòng chú thích liên kết Dòng chú thích cho các liên kết thường xuất hiện ở những trang Web có “trách nhiệm” , mô tả ngắn gọn liên kết đó trỏ đi đâu, nội dung gì. Chỉ với một câu lệnh đơn giản OnMouseOver = “ popup(‘ Dòng chú thích ở đây ’, ‘ tên màu sắc’ ) ” ; là hầu như bạn đã có câu chú thích cho riêng mình rồi đó. Bạn đọc bài viết chi tiết và tải về mã nguồn tại Website của e-Chíp. Chúc bạn thành công!

- Tạo chuyển động quay quanh chuột Các chuyển động quay quanh chuột trên trang Web thì “hằng hà sa số”, nhưng bạn có thể yên tâm là chuyển động dưới đây là “chơi được”. Các quả bóngĠ sẽ bay quanh con trỏ chuột như những vệ tinh bay quanh quả đất vậy, rất sinh động và dễ thương. Nếu chưa thích , bạn có thể thay đổi số lượng bóng và hình quả bóng.

- Màn hình giới thiệu Một bài nhạc thường có phần mở đầu gọi nhẹ nhàng là intro. Trang Web cũng vậy , đôi khi bạn muốn “nhắn nhủ” vài điều với “khách thập phương”. Lúc này chắc chỉ còn cách làm khúc intro cho mình. Mời bạn “vọc” thử đoạn mã Java Script làm trang mở đầu cho Website. Trong mã nguồn có hướng dẫn chi tiết, bạn có thể mở trang Web rồi chọn trình đơn View > Source (đối với trình duyệt Internet Explorer) để xem mã nguồn.

- User ID và Password Kiểm tra mật khẩu là việc quá quen thuộc nếu như bạn thường xuyên kết nối Internet, “check mail”, vv... Tuy có vẻ phức tạp nhưng thật sự bạn hoàn toàn có thể đặt một đoạn kiểm tra “nho nhỏ” vào trang Web của mình. Bạn hãy chép đoạn mã trên Website của e-CHÍP và “gắn” chúng vào sau thẻ . Từ nay, mỗi khi truy cập trang Web của bạn, khách thăm sẽ phải nhập ID và password rồi mới được mời vào. Chúc bạn thành công! Nhưng làm chơi thôi và chỉ khi trang Web của bạn có nhu cầu bảo mật cao, còn không thì coi chừng mất khách!

- Đồng hồ nhiều múi giờ Một đồng hồ có được nhiều múi giờ? Quá đã phải không bạn! Mời bạn “nhào dzô” thử chơi. Muốn biết giờ của nơi nào, bạn chỉ cần nhấp chuột vào nút tương ứng là ... xong.

- Thước đo cho Web Do yêu cầu thiết kế, đôi khi trang Web của bạn không đóng khung trình bày nên ... hơi bị khó khi đọc dữ liệu. Đoạn mã JavaScript tôi giới thiệu với các bạn tạo ra một hiệu ứng nhẹ nhàng mà vô cùng hiệu quả: một thước đo canh ngang và dọc trên trang Web dựa trên vị trí của con trỏ chuột, giúp bạn tra cứu dữ liệu dễ dàng.

- Tạo chữ chạy trong nút lệnh Có nhiều cách để trang trí nút lệnh, một đối tượng xuất hiện rất nhiều trên các trang Web. Bạn có thể làm cho nó đổ bóng, có hình dạng đặc biệt, vv.... Tôi xin giới thiệu với các bạn đoạn mã Java Script tạo một dòng chữ chạy từ phải sang trái trong nút lệnh. Các bạn tải về ví dụ từ Website của e-Chíp. Để xem mã nguồn, các bạn chọn trình đơn View > Source (đối với trình duyệt Internet Explorer).

- Tạo trình đơn cho chuột phải Khi nhấp chuột phải vào bất kỳ vị trí nào trong trang Web, bạn sẽ có ngay một trình đơn hiện ra chờ “phục vụ”. Đoạn mã cần được dán vào sau thẻ , bạn có thể “thêm mắm dặm muối” để trình đơn thay đổi về màu sắc và danh sách các liên kết.

- "Nhấn nhá” các loại cho dòng văn bản Bạn hoàn toàn có thể tạo “hào quang” các kiểu cho dòng văn bản thông qua bộ lọc, các tham số được đưa vào vòng lặp để có hiệu quả “động”. Ví dụ có thể tải về từ trang Web của e-CHÍP. Để xem mã nguồn, bạn chọn View > Source từ trình đơn của Internet Explorer.

- Tạo menu chuyển động Có nhiều giải pháp cho việc trình bày các trình đơn cho một trang Web. Xin giới thiệu với các bạn một “chiêu”: tạo menu chuyển động. Trình đơn chính cho trang Web sẽ luôn xuất hiện cho dù bạn di chuyển lên hay xuống để xem thông tin. Bạn chỉ cần chép mã nguồn rồi dán vào Website của mình (vị trí nào cũng được), sau đó chỉnh sửa các đường dẫn cho thích hợp và thế là xong!

- Màn hình rung chuyển rồi... mất tiêu Chương trình sẽ làm màn hình Web rung chuyển rồi di chuyển (kích thước nhỏ dần) từ góc trên-trái về góc dưới-phải. Bạn xem mã nguồn bằng cách vào trình đơn View>Source trong trình duyệt (Internet Explorer).

- Soi gương... trên Web Một chú sư tử đang “ngẩn ngơ” ngắm mình bên dòng nước, rất hấp hẫn và hiệu quả nhưng lại thật đơn giản. Chỉ với vài câu lệnh đặt sau thẻ là bạn đã có được hiệu ứng “soi gương”. Bạn có thể thay đổi đường dẫn hình ảnh cho phù hợp với nhu cầu của mình (bạn nhớ lưu ý về kích thước hình nhé).

- “eChip Revolution” Một hiệu ứng thường thấy trong các đoạn giới thiệu phim... hành động (có liên quan ít nhiều đến “computer”), như phim Matrix chẳng hạn. Sau một khoảng thời gian, dòng chữ “eChip – Tin học như cơm bình dân” sẽ xuất hiện. Bài hướng dẫn chi tiết có trên Website của e-Chíp, mời các bạn “nhào vô”.

- Hiệu ứng “đánh máy” trong hộp văn bản Những thông tin bạn muốn gởi đến người lướt Web sẽ lần lượt xuất hiện trong một hộp văn bản (textbox) như là đang được đánh máy từng ký tự một. Hiệu ứng này thật đơn giản nhưng lại tăng vẻ sinh động của trang Web. Nếu điều chỉnh co chữ, thay đổi màu sắc “chút xíu”, biết đâu bạn lại có được một bảng quảng cáo điện tử?

- Chơi game trên Web Trò chơi hứng bóng có luật chơi đơn giản thôi: bạn di chuyển chuột (tương ứng tọa độ chuột, bốn thanh đỡ cũng di chuyển theo) để hứng bóng, nếu bóng chạm các cạnh là bạn mất một bóng. Sau một số lần chạm, các ô vuông sẽ đổi màu và biến mất, khi đó bạn … chiến thắng. Tuy nhiên, nếu mất hết bóng bạn sẽ thua. Muốn đặt game này vào một liên kết trong trang Web, bạn thêm dòng sau: Games Hứng Bóng Chúc bạn thành công!

- Cửa sổ “biết bay” Một cửa sổ hiện ra và … bay “tùm lum” trên trang Web. Ồ, bạn đừng ngạc nhiên! Cửa sổ này bay theo “quy hoạch” đấy nhé, bạn có thể lập trình chỉnh sửa quỹ đạo bay của nó, cũng đơn giản thôi. Tuy nhiên, công dụng lớn nhất của “chiêu” này chính là thu hút sự chú ý của người lướt Web. Bạn đưa những thông tin thật hấp dẫn vào trong cửa sổ này và thế là xong.

- Sắc màu cho... chú chuột Để thêm phần sinh động cho Website, xin giới thiệu các bạn một chiêu: thêm màu sắc cho... chú chuột. Tiêu điểm gặp nhau của ba dãy màu Red, Green, Blue chính là con trỏ chuột. Bạn download chương trình từ Website e-CHÍP, chọn View > Source (đối với trình duyệt Internet Explorer) để xem mã nguồn, sau đó chép đoạn mã này rồi dán vào trang Web của mình. Bạn có thể tìm và thay thế màu sắc khác cho phù hợp với mình hơn, chúc các bạn thành công!

- Đồng hồ trên thanh tiêu đề Trên trang Web, bạn có thể “vọc” thanh trạng thái hoặc thanh tiêu đề để cung cấp thêm thông tin cho người lướt Net. Chương trình viết bằng JavaScript (có trên Website e-CHÍP) sẽ hiển thị một đồng hồ gồm các thông tin Thứ, Ngày, Tháng, Năm, Giờ. Bạn chỉ cần tải về chương trình này, rồi dán đoạn mã vào chương trình của mình, “dzậy là xong rùi” !

- Đặt minigame vào trang Web Trên đường lướt Net, hẳn hơn một lần các bạn thấy những game nhỏ trên các Website rất hấp dẫn. Với “chút vốn lận lưng” về JavaScript, bạn cũng có thể thực hiện khá nhiều việc, ngay cả xây dựng cho mình một trò chơi nho nhỏ. Xin giới thiệu cùng các bạn ba trò chơi: đoán chữ (góp phần tăng cường khả năng tiếng Anh của bạn), máy đo tình yêu (nhưng tui hổng dám đảm bảo nếu bạn bị người yêu “uýnh” đâu nghen?) và Carô 9 ô – tương tự trò chơi TicTacToe.

- Bắn chữ Dòng chữ “Echip – Tin học như cơm bình dân” sẽ được “bắn xối xả” lên góc trên - trái màn hình. Chương trình cũng đơn giản thôi, các bạn sẽ rất dễ dàng khi tìm hiểu mã nguồn để thay đổi các tham số.

- Dòng chữ vui nhộn Một “banner” quảng cáo rất sống động và ấn tượng, bảo đảm trang Web của bạn sẽ làm các vị khách “hết hồn” khi ghé thăm. Dòng chữ sẽ được xuất hiện theo hình làn sóng nhấp nhô rất đẹp. Bạn có thể thay đổi nội dung phần văn bản thể hiện trong câu lệnh var theText = "Tin Hoc Nhu Com Binh Dan".

- e-Chíp... bay vào không gian Những ký tự lần lượt bay vào một không gian bí ẩn và vô tận tương tự như một screen saver của Windows, một hiệu ứng thật đẹp phải không bạn? Ở góc độ lập trình, bạn cũng có thể xem đó là quá trình “vẽ nhỏ dần những ký tự với tọa độ hướng tâm”. Các bạn tải mã nguồn từ Website của e-Chíp và chèn đoạn mã này sau thẻ :

- Tô sáng liên kết (bằng hình ảnh) Mỗi lần chuyển hướng liên kết trong các Website, thường các liên kết sẽ được gắn với các nút nhấn, hình ảnh, vv… Một việc chúng ta thường phải làm là “tô sáng” liên kết đang được chọn (liên kết đang được rê chuột lên). Xin giới thiệu với các bạn một cách “giải quyết” ngắn gọn. Mời các bạn ghé xem và chép chương trình cùng các hình ảnh kèm theo tại Website e-Chíp.

- Chiếc đồng hồ thần kỳ Trong khi lướt Net, chat với bạn bè, nhiều lúc bạn cũng cần biết múi giờ các nước để còn “tham khảo”. Trong Windows cũng có một đồng hồ vạn năng như thế, thậm chí còn “xịn” hơn nhiều. Tuy nhiên nếu trên Website của mình bạn có cài đặt một chiếc đồng hồ tương tự kể ra cũng lý thú lắm. Tôi xin gởi đến các bạn chưong trình JavaScript hiển thị múi giờ năm châu lục, chương trình khá dài, tuy nhiên bạn có thể tìm hiểu và thay đổi giao diện khá dễ dàng.

- Pháo hoa trên trang Web Năm hết Tết dến, xin giới thiệu cùng bà con cô bác “tiểu xảo” bắn pháo hoa trên trang Web cho “dzui”. Gọi là “tiểu xảo” vì có nhiều thuật giải và kiểu bắn rất đẹp và phức tạp, tuy nhiên cách đơn giản và dễ thực hiện lại là cách... “tui” trình bày trên Website e-Chíp, xin mời mọi người tải về xem thử.

- Mã nguồn của trang Web Nhiều trang Web cho phép bạn “lấy” mã nguồn thoải mải (thông qua chức năng View | Source của trình duyệt), tuy nhiên một số trang khác lại “bế quan tỏa cảng” với mọi người. Nếu muốn cung cấp luôn mã nguồn (đặc biệt là trong lĩnh vực đào tạo, giảng dạy), bạn có thể tạo liên kết cho mở thêm một cửa sổ để người lướt Web xem source.

- Dòng chữ lung linh Bộ lọc (filter) cho rất nhiều hiệu ứng đẹp khi bạn dùng JavaScript để hiển thị các đối tượng. Đoạn chương trình tôi giới thiệu với các bạn làm cho dòng chữ lung linh nhảy múa từ nhẹ đến mạnh... Bạn có thể tải chương trình từ Website của e-Chíp, và hãy thử chỉnh sửa các thông số để xem hiệu ứng thay đổi như thế nào nhé...

- Menu đa tầng Bạn có quá nhiều mục lựa chọn cho website của mình? Bạn muốn tiết kiệm tối đa không gian của website? Trình đơn đa tầng (gắn với chuột phải) có lẽ sẽ là giải pháp đơn giản nhất. Bạn có thể thêm vào thoải mái các mục trong trình đơn, vấn đề là phải sắp xếp cho hợp lý.

- Menu xoay Xin giới thiệu cùng các bạn một “chiêu” khác cũng về cách trình bày menu trên trang web, đó là trình đơn xoay. Người dùng có thể nhấp chuột vào hai nút mũi tên để thay đổi (xoay) trình đơn. Ưu điểm của loại trình đơn này là tính hấp dẫn, lạ mắt. Bạn nên dùng loại trình đơn này nếu như website của bạn . . . còn dư chỗ.

- “Hồi đó” mình sinh vào ngày thứ mấy nhỉ? Có bao giờ bạn “théc méc” rằng “hồi đó” mình sinh vào ngày thứ mấy trong tuần không? Có thể bạn sẽ dùng một chương trình “lịch vạn niên” để xem lại chẳng hạn, nhưng xem ra chỉ cần một đoạn JavaScript nhỏ là bạn đã giải quyết được vấn đề rồi. Mời bạn ghé thăm website e-chíp mục JavaScript để lấy chương trình về... xài thử.

- Chuột rượt... Gà Chuyện chú mèo vờn chú chuột chắc là ai cũng biết, còn chuyện chú chuột “dí” gà con là chuyện mới đây thôi. Muốn tìm hiểu mời các bạn ghé thăm website e-Chíp mục JavaScript để tải về. Mỗi lần bạn di chuyển chuột đến gần gà con là gà con “biến” ngay. Hiện tại chương trình chỉ xác định một cờ nhớ để điều khiển 3 vị trí cho gà con. Nếu có thể bạn sửa chương trình để tọa độ gà con là ngẫu nhiên sẽ hấp dẫn hơn.

- Tô sáng liên kết và chú thích Trên trang web thông thường có rất nhiều các liên kết đến những địa chỉ có nội dung liên quan, hỗ trơ... Việc tô sáng các liên kết khi người duyệt web rê chuột bên trên trở nên phổ biến. Tuy nhiên có một số các liên kết cần được chú thích cho rõ ràng hơn. Xin giới thiệu cùng các bạn một hiệu ứng: tô sáng hình ảnh (có gắn liên kết) đồng thời hiện dòng chú thích kế bên khi người duyệt web trỏ chuột đến. Dòng chú thích sẽ hiện ra trong một khoảng thời gian sau đó từ từ mất đi (fade out).

- Lời chào hỏi thú vị Những dòng chữ sẽ bay ra màn hình như một màn trình diễn đồ họa tuyệt đẹp. Trên trang web có hướng dẫn chi tiết và mã nguồn, bạn có thể tìm hiểu và thay đổi nội dung cho thích hợp với website của mình hơn.

- Trang trí liên kết kiểu... Spider Xin giới thiệu cùng các bạn cách trang trí “kết hợp” giữa các liên kết và con trỏ chuột để tăng sự sinh động cho website. Vị trí chuột sẽ là tâm điểm cho một loạt các đường kẻ tạo cảm giác lưới nhện, đồng thời khi bạn rê chuột lên trên, “lưới nhện” và liên kết sẽ đổi màu giúp bạn dễ theo dõi. Bạn có thể tải chương trình nguồn từ website e-Chíp mục thư viện JavaScript.

- Máy tính nhiều chức năng Bạn có thể so sánh chức năng của chiếc máy tính JavaScript này với máy tính thông thường và chắc hẳn bạn sẽ ... hài lòng! Máy được thiết kế với nhiều “khuyến mãi” như: tính lũy thừa x^y, giai thừa, vv… Các chức năng này được phân thành năm nhóm và thay đổi bằng cách nhấp chuột vào nút “More Options”.

- Dòng chú thích cho các liên kết Các liên kết đôi khi không diễn tả được hết ý nghĩa và đôi khi người lướt web phải mất thời gian để tìm hiểu. Bạn có thể “giải quyết” đơn giản bằng cách thêm dòng chú thích vào các liên kết, đoạn văn bản này chỉ hiện ra khi người lướt web rê chuột lên bên trên. Trong dòng chú thích bạn mô tả rõ hơn nội dung mà liên kết trỏ đến.

- Con trỏ chuột... hình trái tim Ngày lễ Tình nhân 14-02 vừa qua rồi, nếu không bạn có thể làm một trang web để tỏ tình với nàng và chọn con trỏ chuột hình trái tim này thì thật … là hết ý! Mời bạn vào website e-Chíp để tải về đoạn JavaScript cùng các hình ảnh “minh họa”.

- Cửa sổ sống động Thường trên các website luôn có liên kết “Contact” để liên lạc với “chủ nhân” , xin giới thiệu cùng các bạn chiêu “bung cửa sổ” để trang web có phần sinh động, lôi cuốn hơn. Khi bạn nhấp chuột vào liên kết “Contact”, một cửa sổ mới sẽ hiện ra, mở rộng chiều dọc và sau đó là chiều ngang đến tối đa.

- Đồng hồ 3D: Đồng hồ 3 chiều xoay "tá lả" trong website, thật ấn tượng phải không bạn! Thêm 1 kiểu thể hiện website của bạn bằng cách kết hợp Applet vào trang web.

- Chạy chữ Karaoke: Nếu đã từng vọc Web và JavaScript, có thể bạn đã từng nghe nhạc... online. Xin giới thiệu cùng các bạn một cách chạy chữ trên Web trông như Karaoke vậy, dù chỉ là phần hình ảnh! Sao các bạn không thử kết hợp phần tiếng (nhạc) và phần hình (chạy chữ) ? biết đâu chúng ta lại có một bản Karaoke hoàn chỉnh?

- Menu... nhúc nhích: Trình đơn là phần không thể thiếu trong những website có thật nhiều các thông tin. Đoạn JavaScript trên website e-Chíp sẽ giới thiệu với các bạn trình đơn biết “nhúc nhích” liên tục, và đổi cách thể hiện liên kết khi bạn trỏ chuột về phía nó.

- Kết hợp các trang tìm kiếm: Đôi khi bạn muốn thêm phần tìm kiếm vào website của mình, nhưng thật khó khăn để có thể xây dựng một công cụ tìm kiếm (search engine). Nếu muốn, bạn có thể “nhờ” các trang tìm kiếm nổi tiếng như Yahoo!, Infoseek, vv... “ra tay nghĩa hiệp”. Để biết cách kết nối, mời bạn vào thăm website e-Chíp mục JavaScript để tải chương trình về.

- Bắn pháo hoa: “Bắn pháo hoa” là tiết mục rất hấp dẫn và đẹp mắt, sao bạn không thử lấy chương trình này về  “vọc” thử. Bạn có thể thay đổi các thông số để có những tốc độ bắn, loại “pháo” khác nhau, v.v...

Macromedia Flash - Hiệu ứng Đom Đóm

Đây là bài mình sưu tầm của bác Judaz bên vnfx...

Bước 1: Chuẩn bị

Chọn một stage với kích thước 550x400, màu nền là đen hoàn toàn (0x000000).


Bước 2: Vẽ đom đóm

Chọn công cụ Oval Tool:



Vẽ một hình tròn tùy ý



Del phần line của hình tròn đi



Tô màu cho nó, trong panel Color Mixer chọn Radial.Từ trái sang phải,
-màu vàng cho ô màu đầu tiên với alpha bằng 100
-màu vàng nhạt cho ô màu thứ 2 vơi alpha bằng 70
-màu đen cho ô màu thứ 3 với alpha=0



Sau này nếu muốn đổi tông màu thì bạn có thể chuyển sang xanh hoặc đỏ thay cho vàng.

Bước tiếp theo đơn giản là tô màu cho hình tròn vừa vẽ bằng công cụ Fill



Bước 3: Thiết lập các Level

Chọn hình tròn vừa tô màu xong, nhấn F8 để convert nó thành symbol.(Có thể dùng chuột phải, rồi chòn Covert to Symbol).
-Để nguyên tên nó là Symbol 1
-Chọn Behavior là Movie Clip
-Chọn Registration ở giữa.



Lặp lại bước trên 2 lần nữa. Có nghĩa là:
-Kích đúp vào Symbol 1 rồi Convert hình tròn trong nó thành Symbol 2 với các tùy chọn như trên
-Kích đúp Symbol 2 rồi Convert hình tròn trong nó thành Symbol 3 với các tùy chọn như trên.

Như vậy khi ta kích đúp vào Symbol 3 sẽ thấy bar này




Bước 4: Thêm AS cho đom đóm

Ra ngoài Stage chính.
Chọn MovieClip Symbol 1
Đặt Instance Name cho nó là domdom




Level 1

Tạo một layer mới (Layer 2) với 2 Key Frame.
Layer 1 lúc này đang chứa con đom đóm ta cho nó thêm một Frame nữa cho bằng layer 2.



Cho đoạn code này vào Frame1 của Layer 2:

amount=50;
for(i=0;i
     duplicateMovieClip(_root.domdom,"domdom"+i,i);
}

Đoạn này dùng để nhân số đom đóm lên thành 50, bạn có thể thay đổi thông số amount để có số đom đóm mong muốn.

Cho đoạn code này vào Frame2 của Layer 2
stop();
Lệnh Stop dùng để cho Player không lặp lại Frame1 số đom đóm chúng ta sẽ bảo toàn không bị nhân thêm nhiều lần nữa.

Level 2

Kích đúp vào MC Symbol 1.
Tạo một layer mới (Layer 2) với 3 Key Frame.
Layer 1, lúc này đang chứa MC Symbol 2, ta cho nó thêm 2 Frame nữa cho bằng layer 2.



Cho đoạn code này vào Frame 1 của Layer 2

this.maxSpeed = 3+random(10);
this.agility = 3+random(10);
this._xscale=this._yscale=4+random(50);
this._rotation=random(360);

Đoạn code này dùng để khởi tạo các giá trị ban đầu của con đom đóm từ trên xuống:
- tốc độ bay
- độ linh động (con nào có agility cao sẽ thích rẽ qua rẽ lại hơn  )
- kích thước
- hướng bay ban đầu.

Cho đoạn code này vào Frame 2 của Layer 2

this.onEnterFrame = function() {
     if (!this.angle) {
          this.angle = this._rotation-90;
     }
     // speed control
     this.speed += (1-random(2));
     if (this.speed>this.maxSpeed) {
          this.speed = this.maxSpeed;
     }
     if (this.speed<1) {
          this.speed = 1;
     }
     // turning (+/- 5 degrees / frame)
     this.aby = (1-Math.round(Math.random()*2))*this.agility;
     this.angle += this.aby;
     // update the rotation
     this._rotation = this.angle+90;
     // update the position
     this._x += this.speed*Math.cos(this.angle*Math.PI/180);
     this._y += this.speed*Math.sin(this.angle*Math.PI/180);
     if (this._x<-20) this._x = 570;
     if (this._y<-20) this._y = 420;
     if (this._x>570) this._x = -20;
     if (this._y>420) this._y = -20;
}

Đoạn code trên dùng để làm cho con đom đóm chuyển động. Đây là đoạn code Random Movement rất nổi tiếng của UltraShock. Mình không muốn giải thích dài dòng ra đây. Ai có thắc mắc cứ hỏi tiếp.

Cho đoạn code này vào Frame 3 của Layer 2:
gotoAndPlay(2);
Lệnh này giữ cho Player không chuyển về Frame 1 (khởi tạo lại các biến). Các giá trị khởi tạo của chúng ta được bảo toàn.


Level 3

Kích đúp vào MC Symbol 2.
Tạo một layer mới (Layer 2) với 1 Key Frame.
Layer 1 lúc này đang chứa MC Symbol 2.



Cho đoạn code này vào Frame 1 của Layer 2:
this.onEnterFrame=function(){
     choice=random(40)
     if (choice==0) this._alpha=10;
     else this._alpha+=20;
}
Đoạn code này làm con đom đóm của chúng ta lập lòe. Nó sẽ tắt đi với tỉ lệ 1/40 mỗi 1/12 giây.

Bây giờ là thời điểm thích hợp để chạy thử, thứ nhất để ngắm thành quả nãy giờ của mình, thứ 2 xem thử có sai sót gì không để kịp thời chỉnh sửa. Nhấn Ctr+Enter để Test. Nếu thấy đom đóm bay đầy trời thì sang bước tiếp theo.


Bước 5: Làm Background

Chọn một tấm ảnh có rừng cây. Tấm này chẳng hạn:



Tạo một Layer mới ở stage chính (Layer 3). Layer này nằm dướ 2 Layer trước.
Import nó vào stage chính(đặt tại Layer 3), rồi convert nó thành Symbol. Dùng các công cụ Align (Ctr+K) để làm cho fix với stage chính. Chắc Judaz không phải bàn gì thêm về bước này vì để đạt được đến trình độ đọc bài tut này thì chắc ai cũng biết.

Chọn Symbol rừng cây mới tạo. Vào panel Property của nó để giảm Alpha của nó xuống còn 20%:


Ok thế là đã hoàn thành ^_^

Macromedia Flash - Hiệu ứng phóng to ảnh thành phố

Bài này sẽ hướng dẫn bạn cách phóng to bất kỳ ảnh nào bằng một vài thủ thuật trong flash. Trong ví dụ này, chúng tôi sẽ sử dụng một bức ảnh thành phố, nhưng bạn có thể sử dụng những hiệu ứng tương tự này cho bất kỳ ảnh nào. Bài này hoàn toàn không sử dụng mã script trong flash mà chỉ cần thực hiện một vài bước đơn giản dưới đây

Ví dụ:

Bước 1

Đầu tiên bạn có thể download bức ảnh của tôi về để sử dụng, và nhớ là hãy đặt file vào vị trí để bạn có thể dễ dàng tìm thấy.

Bước 2

Mở chương trình Flash trên máy. Vào File > Import > Import to Library. Trong cửa sổ chọn file xuất hiện, hãy tìm tới vị trí ảnh mà bạn vừa download về, chọn nó sau đó kích vào Open. Nếu bây giờ mở thư viện flash (Ctrl + L), bạn sẽ thấy bức ảnh đã được nào vào (hình dưới).

Bước 3

Nhấn phím Ctrl + J trên bàn phím để mở Document Properties, và thiết lập độ rộng (width) của file là 300 pixel, chiều cao (height) là 200 pixel. Chọn bất kỳ màu nào làm màu nền. Thiết lập Frame rate là 30 và kích OK.

Bước 4
Chọn công cụ Selection Tool (V) và sử dụng công nghệ “kéo-thả” để đưa bức ảnh từ thư viện flash vào phần nội dung. Bức ảnh này to hơn file và bạn có thể co nhỏ nó lại theo kích thước 300x200px như kích cỡ của nền. Bạn có thể kéo nhỏ ảnh bằng công cụ Free Transform Tool (Q) hoặc vài Info Panel (Ctrl + I) và đặt W: 300, H: 200 như hình dưới đây.

Bước 5

Chọn bức ảnh, vào Align Panel (Ctrl + K) sau đo thiết lập các nội dung sau:

1. Hãy đảm bảo rằng nút To Stage trong Align/Distribute đã được bật.
2. Kích lên nút căn giữa theo chiều ngang ở Align
3. Kích vào nút căn giữa theo chiều dọc ở Align

Bước 6
Chọn ảnh, nhấn phím F8 (Convert to Symbol) để chuyển đổi ảnh sang dạng Movie Clip Symbol.

Bước 7

Chọn frame 40 và sau đó là frame 45, nhấn phím F6

Bước 8

Trong khi vẫn chọn frame 45, dùng công cụ Free Transform Tool (Q), nhấn - giữ phím Shift và kéo to bức ảnh thành phố lên một chút (thực hiện như hình dưới)

Bước 9
Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa hai keyframe trên dòng timeline và chọn Create Motion Tween từ menu xuất hiện.

Bước 10

Kích lên frame 60 và nhấn phím F6. Sau đó lại chọn công cụ Free Transform Tool (Q) và phóng to ảnh một lần nữa. Tiếp tục kéo ảnh sang bên trái một chút.

Bước 11
Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa frame 45 và frame 60 trên dòng timeline, chọn Create Motion Tween từ menu xuất hiện.

Bước 12
Kích lên frame 65 và nhấn phím F6. Sau đó, lại phóng to ảnh lên một chút nữa.

Bước 13

Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa frame 60 và frame 65 trên dòng timeline, chọn Create Motion Tween từ menu xuất hiện

Bước 14

Kích lên frame 85 và nhấn phím F6. Sau đó, lại phóng to ảnh lên một chút nữa.

Bước 15

Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa frame 65 và frame 85 trên dòng timeline, chọn Create Motion Tween từ menu xuất hiện.

Bước 16
Kích lên frame 100 và nhấn phím F6. Sau đó, lại phóng to ảnh lên một chút nữa.

Bước 17
Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa frame 85 và frame 100 trên dòng timeline, chọn Create Motion Tween từ menu xuất hiện.

Bước 18
Kích chọn frame 125 và nhấn phím F7 (blank keyframe). Sau đó trở lại frame đầu tiên và nhấn phím Ctrl + C (Copy). Tiếp tục kích chọn lại frame 125 và nhấn phím Ctrl + Shift + V (Paste in Place).

Bước 19

Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa frame 100 và frame 125 trên dòng timeline, chọn Create Motion Tween từ menu xuất hiện.

Kiểm tra lại sản phẩm (Ctrl + Enter)

Download file nguồn tại đây!

Macromedia Flash - Tùy biến con trỏ

Sử dụng flash, bạn có thể ẩn đi con trỏ mặc định của trình duyệt và thay vào đó là tạo được một con trỏ tùy biến theo ý bạn. Trong bài này, tôi sẽ hướng dẫn cách thực hiện điều đó trên bất kỳ file flash nào mà bạn muốn.

Bước 1

Mở một file flash mới. Vào phần Document Properties (Ctrl + J) và thiết lập Width và Height của file. Đặt Frame rate set là 22fps.

Bước 2

Kích đúp vào layer 1 và đổi lại tên nó thành background.

Bước 3
Nhấn Ctrl + R (Import to Stage) để đưa ảnh nền vào file.

Bước 4

Thên một layer mới và đặt tên là cursor.

Bước 5
Chọn layer cursor và vẽ bất kỳ hình shape nào lên layer đó để thay thế cho con trỏ mặc định. Có thể là hình như bên dưới.

Bước 6

Chọn con trỏ vừa vẽ và nhấn phím F8 (hoặc vào Modify -> Convert to Symbol) để chuyển nó sang dạng Movie Clip. Xem hình dưới

Bước 7
Mở phần Properties Panel (Ctrl + F3), trong phần Color chọn Alpha và giá trị là 45%.

Bước 8
Vẫn trong phần Properties Panel, dưới lựa phần Movie Clip nhập tên cursor (như hình dưới)

Bước 9
Thêm một layer mới và đặt tên là action

Bước 10

Chọn layer mới vừa thêm, kích vào frame đầu tiên và mở Action Script Panel (F9), sau đó đưa vào đoạn script sau:

_root.cursor.swapDepths(1000);

_root.onEnterFrame = function() {

    Mouse.hide();

    cursor._x = _root._xmouse;

    cursor._y = _root._ymouse;

    };

Macromedia Flash - Tạo mask nâng cao với action script

Trong bài tập này, tôi sẽ hướng dẫn bạn cách tạo mask kéo theo chuột bằng đoạn mã action script. Cách tạo rất đơn giản, hãy thực hiện tuần tự theo các bước trong bài này!

Kéo hình tròn dưới đây bằng chuột!

Bước 1
Đầu tiên, hãy chọn bức ảnh làm nền cho bài tập này.

Bước 2
Tạo một file flash mới. Nhấn phím Ctrl + J (Document Properties) và thiết lập kích thước rộng (Width) và cao (Hight) của file theo độ rộng của ảnh. Chọn bất kỳ màu nền nào và thiết lập tốc độ Frame rate của file là 32, sau đó kích OK.

Bước 3
Chọn file, vào Import > Import to stage (Phím tắt: Ctrl + R) và import vào bức ảnh mà bạn đã chọn.

Bước 4

Trong khi bức ảnh vẫn được chọn, vào phần Align Panel (Ctrl + K) và thực hiện theo các bước sau:

1. Đảm bảo rằng nút Align/Distribute to Stage được chọn,
2. Kích vào nút Align horizontal center
3. Kích vào nút Align vertical center

Bước 5
Trong khi bức ảnh vẫn được chọn, nhấn phím F8 (Convert to Symbol) để chuyển ảnh sang dạng Movie Clip.

Bước 6

Khi Movie Clip mới vẫn được chọn, vào phần Properties Panel bên dưới. Trên phần bên trái trong trường Instance name bạn nhập tên của Movie Clip vào. Trong ví dụ này sẽ là photo.

Bước 7
Tạo một layer mới và đặt tên là mask. Sử dụng công cụ Oval Tool (O) để vẽ một hình tròn như hình bên dưới (giữ Shift trong quá trình vẽ).

Trong khi hình tròn vẫn được chọn, nhấn phím F8 (Convert to Symbol) để chuyển hình tròn này sang dạng Movie Clip.

Hình 8
Khi Movie Clip hình tròn mới tạo vẫn được chọn, vào Properties Panel ở phía dưới. Trong phần bên trái bạn nhập tên Movie Clip vào trường Instance name, trong ví dụ này nhập là mask

Bước 9
Tạo một layer mới trên layer mask và đặt tên là action.

Bước 10

Chọn frame đầu tiên của layer action, vào Action Script (F9) và đưa vào đoạn mã sau:

stop();
photo.setMask(mask);
mask.onPress = function() {
    startDrag(this);
    }
mask.onRelease = function() {
    stopDrag();
    }

Kiểm tra lại sản phẩm vừa tạo (Ctrl + Enter)