Việc thiết kế web, đặc biệt là web cá nhân, không ghê gớm như những gì người ta thường nghĩ về nó, nào là ngôn ngữ lập trình HTML, Visual Basic hay C++, nào là các đoạn mã nguồn dài dằng dặc mà chỉ cần sai một dấu chấm là tất cả “đi tong”, nào là xử lý đồ họa cao cấp, … Thật ra, việc đó vô cùng đơn giản: thiết kế trang web = gõ văn bản + trang trí. Tuy nhiên, vì đơn giản như thế mà các trang web cá nhân hơn thua nhau về mặt thẩm mỹ, sáng tạo của người tạo ra chúng. Và việc này thì chẳng ai dạy cả, nó chỉ phụ thuộc vào khả năng cá nhân và các kinh nghiệm có được nhờ tìm tòi. Mạng Internet là phương tiện chính. Nó cung cấp cho chúng ta nguồn “tài nguyên phong phú” gồm vô số các tiện ích, các phần mềm, hình ảnh, âm thanh, tư liệu, thủ thuật, … để xây dựng một trang web hoàn chỉnh và sau đó, nhờ Internet, website của bạn được mọi người biết tới. Vì thế, bạn càng chịu khó tìm kiếm, lục lọi, học hỏi bao nhiêu, trang web của bạn sẽ phong phú và mang đặc biệt bấy nhiêu. Tuy nhiên, để có được phong cách riêng, ngoài những kinh nghiệm thu thập được, bạn phải có được một sự sáng tạo nhất định để sản phẩm của mình không đi theo lối mòn hay “màu mè đa phong cách”.

Trong phạm vi bài viết này, tôi sẽ giới thiệu đến các bạn một số khái niệm, cách thức căn bản nhất để tự thiết kế một trang web riêng, các thủ thuật trong việc khai thác Internet và một số kinh nghiệm cần biết.

1. Trước tiên, bạn cần phải biết phân biệt website và web page (trang web). Các trang web là các tập tin (thường là các tập tin văn bản gồm hình ảnh, tư liệu, nhạc, …) có dạng *.HTML hay *.HTM. Website là một tập họp các trang web được liên kết với nhau. Ví dụ, website của bạn gồm 3 web pages: 1 trang chủ giới thiệu sơ lược về gia đình và công việc, 1 trang nói riêng về gia đình, 1 trang nói riêng về công việc. Người đọc khi ở trang chủ, muốn biết thông tin về gia đình bạn, click vào mục GIA ĐÌNH, mục này đã được tạo một liên kết dẫn đến trang web về thông tin gia đình bạn và trang web này sẽ được mở lên. Tương tự nếu muốn từ trang chủ --> trang công việc, từ công việc --> gia đình hay ngược lại.

2. Như đã nói ở trên, việc thiết kế web căn bản chỉ là gõ văn bản và trang trí. Đó là tính năng của Microsoft Word. Vì thế, bạn dùng Word để tạo website cũng được.

Thật vậy, rất đơn giản. Đầu tiên, bạn mở Word và chọn File/New. Trong thẻ General templates(phía bên phải) bạn chọn Web Page. Tới đây là công việc của bạn: gõ thông tin, chèn hình ảnh, chèn âm thanh, chọn màu nền, vẽ hình,…tất cả giống như khi bạn soạn thảo một văn bản. Xong việc, bạn chọn Save as type là: Web Page (hình)

Việc bạn cần biết thêm là việc tạo liên kết (hyperlinks). Ví dụ bạn đã hoàn thành 3 trang web: trang chủ có tên là trangchu.html, trang về gia đình bạn - giadinh.html, trang giới thiệu về công việc của bạn - congviec.html, tất cả chứa trong c:web. Trong trang trangchu.html, đến mục giới thiệu gia đình, bạn quét chuột bôi đen chữ “gia đình”, click phải chuột, chọn Hyperlinks, trong ô “Type File or Webpage name”, bạn gõ vào đường dẫn đến trang giadinh.html (trong trường hợp này là c:webgiadinh.html). Click OK. Khi đó, khi đưa chuột đến chữ gia đình, con trỏ chuột sẽ thay đổi và khi bạn click vào đó, trang web giadinh.html sẽ được mở ra. Tượng tự như thế vời các liên kết đến congviec.html và ngược lại.

Bạn còn có thể tạo một liên kết đến những trang web có sẵn trên mạng. Ví dụ, bạn muốn từ trang chủ của mình đến ngay trang Yahoo!Mail, hãy gõ vài từ, đại khái như “dzô Yahoo! xem có mail không?”. bôi đen chữ Yahoo!, click phải chuột, chọn Hyperlinks và gõ địa chỉ của trang Yahoo!Mail (mail.yahoo.com) vào khung “Type File or Webpage name” và click OK. Khi đó, khi người được đưa click chuột vào chữ Yahoo!Mail trong trang chủ của bạn, trang mail.yahoo.com sẽ được mở. 3. Microsoft Word chỉ là giải pháp cho những trang web căn bản. Microsoft Frontpage (MF, trong bộ Microsoft Office) mới là một phần mềm chuẩn, dành riêng cho việc thiết kế web. Những tính năng của MF là chuyên nghiệp, tiện dụng và đầy đủ hơn so với Word (dĩ nhiên rồi!).
MF cung cấp cho bạn nhiều kiểu mẫu trang web có sẵn như:

Format - >Themes những sơ đồ website của bạn giúp bạn kiểm soát dễ dàng các trang web và các liên kết.

Tạo có nút bấm đổi màu Insert/Component/Hover Button

Tạo dòng chữ chạy gang màn hình Insert/Component/Marquee

Tạo máy đếm số lượt người đến thăm trang web của bạn Insert/Component/Hit Counter

Tạo sổ thu thập ý kiến cho khách đến thăm bằng cách đặt những câu hỏi (đại loại như: “bạn chấm mấy điểm cho website của tui?”) hay những câu hỏi trắc nghiệm tự tạo,

Tạo những “không gian” để khách viết những ý kiến của họ,…Insert/Form

Tạo hiệu ứng đặc biệt cho các đối tượng Format/DHTML Efeects

Hay khi chuyển từ trang này sang trang khác Format/Page Transitions ... Ngoài ra, bạn còn có thể xem được trang web của mình sẽ hoạt động như thế nào bằng cách click vào thẻ Preview ở góc dưới bên phải của màn hình.
MF còn rất nhiều tính năng hấp dẫn khác chờ bạn khám phá đấy, đừng lo MF rất dễ sử dụng vì nó gần như là phần mềm căn bản nhất để tạo web. Vì không gian hạn hẹp tôi không thể chỉ dẫn làm 1 website được, bởi mỗi người mỗi vẻ. Bạn làm và tự học hỏi thêm, có gì lên diễn đàn này để hỏi các…. “chiên gia” nhá.

4. Ngoài những phần mềm quen thuộc trên, bạn còn có nhiều lựa chọn khác để tạo website cho mình. Trên mạng có rất nhiều phần mềm, tiện ích giúp bạn làm công việc này, chẳng hạn như Site Craft. SiteCraft là một phần mềm hoàn hảo, thú vị, giúp những người không biết một chút gì về ngôn ngữ HTML thiết kế được trang web riêng của họ một cách dễ dàng. Với phần mềm này, bạn tạo ra một trang web theo từng bước một mà chương trình sẽ “chỉ dẫn một cách tận tình”. Bạn click vào các nút Steps (bước) 1 đến 6 để hoàn chỉnh website của mình. Đó là các công việc từ đơn giản nhất như việc tạo ra cấu trúc của website, chọn tên và chủ đề của website, việc trang trí, chọn màu, đến việc điều chỉnh các hiệu ứng âm thanh và hình ảnh đến việc tải (upload) và quảng bá trang web của bạn trên Internet. Tất cả được được đơn giản hoá, bạn chỉ cần làm theo chỉ dẫn của chương trình. SiteCraft cung cấp rất nhiều công cụ để bạn trang trí giao diện website của mình như các wallpaper, các buttons, các ảnh động, âm thanh, chủ để bạn download thêm những gì mình cần. Ngoài ra, SiteCraft còn đọc được rất nhiều file multimedia. Với sự hỗ trợ hoàn hảo về giao diện như thế, bạn chỉ cần tập trung cho phần nội dung của trang web. Giao diện SiteCraft thân thiện, hiện đại và bắt mắt. Nhưng điều làm cho chương trình này hấp dẫn là cách tạo ra một website cực kỳ dễ dàng vì nó đã hỗ trợ hầu hết các công đoạn quan trọng. 6. Công việc thiết kế đã xong, bây giờ phải tìm cách đưa trang web của bạn lên mạng. Đầu tiên, bạn phải kiếm một địa chỉ. Hãy vào các trang web sau, đăng ký cho mình 1 tài khoản (giống như việc đăng ký mail trong Yahoo hay Hotmail). Qua e-mail. các trang web sẽ cung cấp cho bạn một địa chỉ trang web của bạn theo username mà bạn đã đăng ký, kèm theo đó là một mật mã để bạn quản lý tất cả mọi thứ đã tải lên địa chỉ đó.

7. Công việc cuối cùng là việc tài các trang web của bạn từ máy lên mạng. Bạn vào trang chủ (trang cung cấp cho bạn địa chỉ) và đăng nhâp (log in) vào tài khoản của mình. Vào mục Upload và bạn sẽ có thể chọn các file từ máy của mình tải lên trang web đơn giản như việc chọn file đính lèm khi gửi mail bằng Yahoo! hay Hotmail. Cuối cùng, bạn gõ vào khung địa chỉ tên trang web của mình và kiểm tra lại.

Tạo Album ảnh trong Website

Bạn đừng lo lắng vì sợ chuyện đó là quá sức mình, hãy yên tâm vì chuyện tạo album ảnh trong website của mình rất đơn giản như… đang giỡn. Thật ra, album ảnh chỉ là một trang web gồm các ảnh thôi! Bây giờ, có rất nhiều chương trình giúp bạn tạo những album ảnh rất tiện lợi nhưng trong bài viết này cách đơn giản nhất, thủ công nhất sẽ được giới thiệu đến với bạn. Không cần phải biết nhiều tiếng Anh, không cần phải nặn óc suy nghĩ, hãy làm theo chỉ dẫn, bạn sẽ có album ảnh vừa ý trên trang web của mình!

1. Album ảnh trên website là gì? Như đã nói ở trên, thật ra, đó chỉ là các trang web chứa hình thôi, nhưng vấn đề ở đây là làm sao sắp xếp và trình bày album ảnh cho thật logic, tạo cho khách đến thăm trang web của bạn thoải mái.

Đây là mẫu đơn giản và chuẩn nhất: 1 album ảnh gồm 2 phần. Phần giới thiệu và phần ảnh.
Phần giới thiệu là 1 trang web (tạm gọi là trang web giới thiệu) gồm các “hình thu nhỏ” (tiếng Anh gọi là thumbnails) của các hình trong album.
Phần thứ 2 là các hình trong album ảnh. Và đây là phương thức hoạt động: ở trang web giới thiệu, người đọc được giới thiệu danh sách các hình trong album bằng các “hình thu nhỏ”. Họ sẽ click vào các “hình thu nhỏ” để xem các hình thực sự. QUÁ ĐƠN GIẢN!!!!

2. Tạo các “hình thu nhỏ” – thumnails: bạn phải nhờ tới phần mềm Easy Thumbnails 2.5. Đây là phần mềm giúp bạn biến các ảnh lớn của mình thành các ảnh nhỏ.
Sau khi download Easy Thumbnails, bạn khởi động nó lên và bắt đầu làm việc. Công việc thật ra chỉ là chọn hình và click nút Make để tạo các thumnails. Không còn gì đơn giản hơn.
Khi chọn hình, bạn nhìn qua màn hình bên phải, ở đó có 2 ô “Original Image” và “Preview output”. Bạn muốn xem trước “hình thu nhỏ” như thế nào, chỉ cần click vào ô “Preview output” là thấy ngay.
Nếu chưa hài lòng về kích thước hay màu sắc của thumnails, bạn vào SEasy Thumbnailstings để chỉnh sửa. Ở đây bạn có thể điều chỉnh chiều ngang, chiều dọc, độ phân giải, độ sáng, màu sắc, độ nghiêng và chất lượng của thumbnails. Một kinh nghiệm nhỏ: bạn chỉ cần chọn chất lượng thumnails (JPEG Output) khoảng 30-50% thôi, không cần phải nhiều vì suy cho cùng các thumnails chỉ là hình mẫu! Quan trọng hơn, bạn sẽ tiết kiệm được vài KB mỗi hình. Bạn còn có thể thu nhỏ một lúc nhiều file bằng cách chọn thư mục chứa các file ảnh và click nút “Make all”. Một điểm tiện lợi nhất của Easy Thumbnails là nó có thể xử lý nhiều dạng hình gốc như JPG, PNG, TIFF, ICO, PCX, GIF,…. File insatall Easy Thumnails nặng chưa đến 1MB.

3. Tạo trang web giới thiệu: khởi động Microsft Frontpage. Chọn new để mở 1 trang web mới. Sau đó, bạn chọn Table/draw table để vẽ một bảng gồm các dòng và cột. Sau đó, bạn click vào thumbnail và chọn hyperlink, trong ô URL, bạn chọn đường dẫn đến tấm ảnh thật sự. Và tới đây, bạn sẽ có 1 trang web giống giống trang web dưới đây của tôi:

Việc còn lại của bạn là chỉnh sửa và trang trí cho web site của mình.

Cuối cùng, bạn đã có 1 album ảnh trên website của mình. Khi khách vào xem, học click chuột vào ảnh nhỏ, một cửa sổ Internet Explorer mới hiện lên và khách sẽ thấy được tấm ảnh lớn.

Quá Đơn GIản! Hãy thử 1 lần rồi xem, bạn sẽ thích ngay mà !!!

Tạo nút bấm – Button cho trang web.

Các nút bấm – button là một phần không thể thiếu của 1 trang web. Chúng thật ra là những file ảnh có dạng giống 1 cái nút bấm được kết nối đến 1 trang web khác hay 1 file khác. Khi bạn nghĩ như thế thì tất cả lại trở lên hết sức đơn giản, như đang… ăn cháo + trứng gà vậy.(Bạn thôi nha, còn tôi thì…. Chúa ghét)
Có rất nhiều cách tạo ra các nút bấm như là tự vẽ bằng các phần mềm như Paint, Photoshop, Corel Draw hay Foto Canvas; sử dụng các chương trình tạo nút bấm như 1Cool Button. Hoặc bạn cũng có thể tìm kiếm tại 1 số website cung cấp mẫu sẵn.

Trong phạm vi bài viết này, tôi sẽ giới thiệu cho các bạn cách tạo button

1. Bạn sẽ được cung cấp khoảng trên 20 kiểu nút bấm. Click chọn kiểu nào mà bạn thấy ưng ý nhất. Sau đó, bạn sẽ được chọn cách trình bày nền – background của nút (trong suốt, nền đen, nền màu), kích thước. Việc của bạn là gõ vào ô Text những chữ trên nút bấm. Bạn có được tới 63 fonts chữ độc đáo để lựa chọn. Nhưng nhớ chọn font chữ càng đơn giản càng tốt, bởi loằng ngoằng quá sẽ càng khó nhìn trong phạm vi 1 BUTTON bé nhỏ.
Sau cùng, click submit. Ở trang web mới, bạn sẽ thấy được kết quả của mình. Click phải chuột và save hình trong cùng ổ chứa với các trang web. Hình được save dưới dạng file JPEG.

2. Các nút bấm file JPEG không bao giờ hấp dẫn bằng các button flash cả. Dĩ nhiên ngoài việc có thể chuyển động được, công nghệ flash tạo đuợc nhiều hiệu ứng rất độc đáo và vì thế gây được sự thú vị nơi người sử dụng. Trang web Flashbuttons sẽ giúp bạn tạo những nút bấm bằng flash, dưới dạng *.SWF. Nhưng bù lại các file SWF chiếm nhiều dung lượng hơn các file JPEG. Căn bản, việc tạo nút bấm cũng giống như ở trên đã đề cập, chọn kiểu nút, chọn cách trình bày, hiệu ứng, mầu sắc…. Nhưng trang web này còn cho bạn nhiều tiện ích khác như: tạo một lúc nhiều nút bấm, mỗi nút sẽ được liên kết đến sẵn trang web của bạn.
Sau khi chọn tên cho nút bấm, bạn phải gõ vào ô “Links to assign to your button” đường dẫn của trang web mà nút của bạn liên kết (ví dụ như hinhanh.html; amnhac.html, …). Sau đó, bạn sẽ được cung cấp 1 đường dẫn để download các button mà bạn vừa mới tạo ra xuống máy. Đó là một file SWF. Hãy lưu ở cùng ổ chứa với các trang web. Ở cuối trang, có một đoạn mã rất khó hiểu (dĩ nhiên rồi… nhưng hãy save lại.)

3. Cách chèn nút vào trang web: bạn mở Start/Programs Files/Accessories/Notepad. Sau đó, chọn Open và mở trang web mà bạn muốn chèn các nút bấm vào (file HTML). Đừng ngạc nhiên khi thấy một rừng chữ hiện lên trước mắt bạn, đơn giản thôi, cách trang web HTML thực ra được tạo bằng ngôn ngữ HTML. Cái mà chúng ta thấy qua Internet Explorer là phần trình bày của trang web .

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 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ượt thanh trượt trong phần Image Quality. Hình ảnh có độ phân giải 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.
Hoặc khó tính hơn, bạn có thể tự tìm cho mình 1 chương trình Convert nhạc trong GOOGLe với từ khóa: “ Convert music”

Đố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.

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 bạn

Để 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.
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ệu ứ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.

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.