Điều đặc biệt phải nhớ là khi tạo trang web ta thường đưa nhiều hình ảnh, tư liệu khác CÓ TRÊN Ồ ĐĨA CỨNG nhưng rất hay quên đưa các tư liệu sử dụng vào TM "CD" để rồi khi ghi TM "CD" ra
Trang 1HƯỚNG DẪN TẠO MỘT TRANG WEB
Hiện nay Internet, trang web không còn là những khái niệm xa vời,
"xa xỉ" nữa ! gía cả dịch vụ cũng như thiết bị (đầu ghi, đĩa CD trắng) ngày càng giảm, do đó xuất hiện nhu cầu tạo trang web riêng hay một CD dạng web để phục vụ cho nhu cầu cá nhân Một số người "tay ngang" muốn tự thiết kế lấy trang web nhưng không biết phải bắt đầu từ đâu ! sách trên thị trường tuy nhiều nhưng "bài bản" và "bác học" quá nên khó tiếp thu Qua thực tế của mình, tôi mạnh dạn giới thiệu các bước thiết lập một trang web một cách đơn giản, dễ hiểu nhất không ngoài mục đích hỗ trợ các "tay ngang như tôi" bớt đi phần nào khó khăn Tất nhiên bài viết sẽ có rất nhiều sai sót, xin các bạn lượng thứ
Tất nhiên là đầu tiên bạn phải cài CT tạo trang web rồi Hiện nay có rát nhiều CT như : Pagemilk, Dreamwaver, webMaker kể cả word nữa Tuy nhiên tôi vẫn thích nhất là dùng Frontpage Lý do là nó rất dễ dùng lại
"ăn theo" bộ Office nên hễ Office lên đời là nó cũng lên đời theo Hiện tôi đang dùng FrontpageXP do đó mọi hướng dẫn này đều viết trên cơ sở FrontpageXP Nếu chưa có thì bạn hãy cài vào, kẹt quá thì dùng Frontpage2000 cũng được Nào, chúng ta bắt đầu
I/ CHUẪN BỊ BƯỚC ĐẨU :
Trước hết bạn hãy lấy giấy ra, tạo trước sơ đồ cấu trúc thư mục của
CD : Hãy tạo một thư mục chủ (VD : CD), thư mục này sẽ chứa tất cả các thư mục con khác Điều này tuy đơn giản nhưng rất quan trọng : sau này khi ghi vào CD bạn chỉ cần copy toan bộ thư mục "CD" là xong Tiếp đến tạo các thư mục phù hợp với nội dung CD định làm như : Software, Giới thiệu, Hình ảnh, Giải trí và các thư mục con khác như : Trong Software
có thể tạo thêm : Utility, Multimedia, Net, Graphic; trong giải trí có các thư mục con như : Game, nhạc, thơ vv nghĩa là tùy theo ý đồ và cơ sở dữ liệu bạn có Bạn nên thống nhất cách sắp xếp để sau này dễ tìm kiếm như : tất cả các mẫu về nền (background), nút) (button) ta đặt vào TM
"Nut-Nen"; hình trang trí đặt vào TM "Images" chẳng hạn Cac TM này xem như một thư việc chung, sau này bất kỳ trang web nào cần sử dụng nút, nền, hình sẽ vào TM này để lấy Ngoài ra bạn cũng cần phải thống nhất cách sắp xếp, cách đặt tên VD : Một software nào đó sẽ có những file kèm theo như bài viết hướng dẫn sử dụng, Crack nên sắp chung vào một thư mục Việc sắp xếp thế nào cho khoa học là cả một quá trình kinh nghiệm, bạn cứ thử đi Điều đặc biệt phải nhớ là khi tạo trang web ta thường đưa nhiều hình ảnh, tư liệu khác CÓ TRÊN Ồ ĐĨA CỨNG nhưng rất hay quên đưa các tư liệu sử dụng vào TM "CD" để rồi khi ghi TM "CD" ra đĩa để chạy ở máy khác thì bị lỗi tùm lum !
Tiếp đến cần thống nhất một số việc sau :
- Chỉ nên dùng duy nhất một font chữ, chọn font nào thật phổ thông mà
PC nào cũng có như Tahoma chẳng hạn Không nên lạm dụng quá nhiều Font, có thể PC người dùng không có Đặc biệt đối với các trang sưu tầm
Trang 2được trên mạng hay từ một nguồn nào khác, bạn chú ý convert (chuyển mã) cho đồng nhất một font Trang web bạn tạo ra hầu hết được đọc trên trình Internet Explore, để đọc được tiếng Việt yêu mến của ta, ta phải set như sau : vào menu Toos/Internet Options/Fonts chọn font chữ Việt phù hợp với font chữ Việt sử dụng trên CD (VD là Tahoma) nhưng sau khi đã set xong, nếu mở trúng trang web khác dùng loại font khác (VD : .Vn-Times) ta lại phải set lại font, rất bất tiện phải không ? Để khắc phục tạm thời hiển thị tiếng Việt, bạn vào chọn : View/Encoding/User Define thì
sẽ tạm thời đọc được chữ Việt nhưng chỉ trên trang đang xem thôi, khi chuyển sang trang khác thì lại bị mất font ! Để trình duyệt tự động nhận dạng ra font chữ Việt trên CD của bạn, bất kể trình duyệt của mát đang set
ở font nào, tôi khuyến mãi các bạn chiêu sau : Mở source nguồn của trang web (Trong Fronpage, click vào nút HTML ở cuối trang), gõ câu lệnh sau vào phần head :
<head>
<META content="text/html; charset=x-user-defined" http-equiv=Content-Type> (đây là câu bạn phải gõ vào)…
</head>
Kể từ đây, trình duyệt sẽ tự động set font, sướng nhé ! CD viết bằng bất
cứ font tiếng Việt nào cũng được tự động nhận ra, khỏi set xiếc gì cả Năm
1998, khi làm CD đầu tiên tôi phải khốn khổ lắm mới học được chiêu này đấy Mẹo : Bạn nên tạo sẵn câu lệnh trên ở một trang mẫu nào đó, sau này cần thì chỉ copy và dán vào là xong
- Nên thống nhất trước cách đặt tên File, ví dụ như bạn sử dụng kiểu trang có các Frame : Tiêu đề nằm ngang phía trên, Frame bên trái chứa các tiêu mục, Frame chính chứa nội dung hiển thị, ta đặt tên thống nhất : trang chứa tiêu đề ở trên đầu trang đặt là head_xxx (VD: head_software ); trang ở Frame bên trái là left_xxx; trang bên phải thường là trang hiện nội dung chính, đặt là main_xxx Tên File đừng nên bỏ dấu (dù CT cho phép)
và sao cho dễ gợi lại nội dung của trang VD như : SuutapnhacTrinhcongson.htm
- Như đã nêu trên một lỗi thường gặp là khi tạo web, các bạn tạo mối liên kết đến cơ sở dữ liệu (hình, tài liệu, CT ) trong ổ đĩa cứng của mình nhưng khi ghi ra CD bạn chỉ ghi các thư mục của CD do đó khi chạy CD sẽ
bị lỗi Để khắc phục, bạn phải lưu ý chép tất cả các dữ liệu sẽ sử dụng vào các thư mục sau này sẽ ghi lên CD
- Không nên tạo một trang web kích thước quá lớn (theo khuyến cáo không nên quá 2 Mb), nếu nội dung nhiều ta có thể cắt ra nhiều trang : trang 1, trang 2 Không nên lạm dụng nhiều hình ảnh sẽ làm tăng kích thước trang; nếu phải dùng hình thì nên cố gắng format hình ở dạng Gif hay JPG và thu nhỏ kích thướchình trước Về việc xử lý ảnh theo yêu cầu này không gì tuyệt vời hơn Adobe photoshop
Trang 3- Hạn chế việc
sử dụng hiệu ứng nếu không cần thiết vì tăng kích thước trang và nhất là không phải PC nào cũng có cài phần mềm tương ứng để xem Mọi hiệu ứng nên kết xuất ra dưới dạng *.html để dễ dàng sử dụng VD bạn dùng các trình FlashMacromedia Flash, Swish, Flax tạo hiệu ứng về hình ảnh, chữ, sau đó nên chuyển thành file *.html và đưa vào trang web của bạn Cách convert của từng CT thường được hướng dẫn đầy đủ trong các File Help, tuy nhiên bạn có thể đọc các bài hướng dẫn sử dụng tôi viết kèm theo
II/ KHỞI TẠO
1 Chọn kiểu trang :
- Vào File/New/Page or web/New from template/Page Templates : Sẽ có hàng lô hàng lốc kiểu cho bạn chọn, cứ thử đi Tôi thì khoái dùng kiểu : Frames Pages/banner and contents (giống như trang web LH bạn đang đọc)
Sau khi trang mới xuất hiện, sẽ có 3 frames (khung) : Trên cả 3 khung
+ Set Initial Page : Để đưa vào một trang web có sẵn : chọn đường dẫn tới trang web muốn đưa vào
+ New Page : Tạo một trang mới hoàn toàn
2 Các định dạng trên trang :
Trang 4* Page Properties : Click chuột phải, chọn Page Properties xuất hiện hộp thoại với nhiều tính năng định dạng; tôi chỉ giới thiệu một số căn bản :
** Nút General :
Location : Nơi lưu trang web
Title :Tên hiện trên tiêu đề trang
Background sound :Đưa nhạc nền vào
** Nút Background :
- Formatting :
Backgroud picture : Chọn hình nền; nhấn Browse để xác định đường dẫn tới hình muốn chọn Nếu muốn làm mờ hình nền như màu nước đánh dấu chọn vào ô Watermark
- Color :
- Background : Chọn màu nền
- Text : Chọn màu chữ
- Hyperlink : Màu chữ khi có kết nối
Trang 5- Màu chữ khi đã được click vào
- Màu chữ khi kết nối đang hoạt động
** Nút Margin :
- Specifytop margin : Đánh dấu chọn và chọn số pixel Dùng lựa chon này khi bạn muốn nội dung trong trang cách đầu trang là bao nhiêu Nếu không chọn thì CT sẽ tự động chọn chế độ mặc định
- Specify left margin :
Đánh dấu chọn và chọn số pixel Dùng lựa chon này khi bạn muốn nội dung trong trang cách lề trái trang là bao nhiêu Nếu không chọn thì CT sẽ
tự động chọn chế độ mặc định
Đó là các định dạng căn bản của một trang web Ngoài ra bạn sẽ còn phải định dạng cho Frame, table, cell, picture khi có sử dụng các đối tượng này, sẽ trình bày sau
Riêng nút Custom, Language hơi "chuyên sâu" nên tôi sẽ giới thiệu sau 3/ Các định dạng trên Frame :
Khi bạn chọn kiểu trang có Frame như nêu trên thì lúc này bạn sẽ có một trang chính (VD như trang tên software), trong đó có 3 trang "con" nằm trong 3 Frame : VD như Trang head_software nằm ở Frame đầu trang; trang left_software nằm ở Frame bên trái và trang main_software nằm ở Frame chính bên phải Sau đây là các định dạng đối với Frame :
- Initial page : Trang nằm trong Frame Muốn chèn trang khác thì nhấn
- Frame size : Xác định kích thước frame Rất cần thiết Gỉa sử bạn đã tạo được một banner bằng Adobe PhotoShop có kích thước 450, 70 pixel thì ta điều chỉnh kích frame head là 452, 71 banner sẽ nằm khít trong Framr
Trang 6head, rất đẹp.
- Margins : Xác định canh chỉnh về chiều cao và chiều rộng của Frame (đơn
- Options : Nếu bạn muốn người dùng có thể dùng chuột để rê mở rộng hay thu hẹp Frame thì đánh dấu chọn vào ô Resizable in browse; nếu muốn tạo thanh cuộn để có thể xem đầy đủ nội dung của frame khi nó quá dài, vượt quá kích thước của màn hình thì bạn chọn trong Show scrollbars chế độ thích hợp (trừ Never - sẽ không xuất hiện thanh cuộn)
+ Frame spacing : xác định khoảng "hở" giữa trang và khung Theo tôi nên chọn bằng 0 để trang nằm khít trong Frame, đẹp hơn + Show Borders : Đánh dầu chọn nếu muốn có một khung bao quanh Frame
** Nút Frames Page : Thực chất nội dung trong Frame là của một trang web (tạo mới hay Insert vào) Click nút Frame page để thay đổi các thuộc tính như canh chỉnh lề, chỉnh Frame Quan trọng nhất là nút Magrins
và Frames để xác lập khỏang cách tới lề trái và đầu trang cũng như khoảng hở giữa trang và khung (Frames) Bạn phải điều chỉnh sao cho trang nằm trong khung khít khao hay có độ hở thích hợp với yêu cầu về
mỹ thuật
Qua những bước trên, bạn đã căn bản tạo và định dạng trang và Frame Tất nhiên còn nhiều vấn đề khác nữa nhưng trước tiên tôi chỉ giới thiệu những gì căn bản nhất Dạng trang web có Frame như trên thích hợp với yêu cầu dùng để tra cứu như chọn một tiêu mục bên Frame trái thì nội dung sẽ tạo ra ở Frame phải Xét về mặt mỹ thuật thì không thể đẹp bằng trang web không Frame
III/ THIẾT KẾ TRÊN TRANG WEB :
Vấn đề tiếp theo là những gì thể hiện trên trang web Sau đây ta tiếp tục nghiên cứu về :
- Sử dụng Table
- Chèn hình
- Tạo mối liên kết
- Nút nền
1/ Sử dụng Table :
Vào Menu Table/Insert :
Những thông số trên các bạn
nào sử dụng Table trong word chắc
quá rõ :
+ Rows : Số hàng
+ Columns : Số cột
+ Alignment : Canh chỉnh để nội dung trong table nằm trái, phải, giữa
Trang 7hay để mặc nhiên (default)
+ Border size : Kích thước khung viền
+ Cell Padding, Cell spacing : điều chỉnh trong ô Cell
+ Specify width : Nếu bạn đánh dấu chọn thì bạn phải xác định chính xác kích thước table nghĩa là Table này không giãn ra khi nội dung đưa vào vượt quá kích thước table Có 2 kiểu lựa chọn :
* Chọn bằng Pixel : Xác định theo điểm
* Chọn bằng percent : tính bằng % so với trang web VD 50% nghĩa
là table sẽ có kích thước rộng bằng một nửa trang web
Việc dùng Table rất quan trọng vì bạn nên nhớ trên trang web viết bằng html không phải như gõ chữ trên word Để tạo từng nhóm chữ hoặc trang trí viền hoặc tạo một khoảng hở giữa các Table, giữa Table với Frame bạn phải sử dụng nhiều Table lồng vào nhau VD bạn hãy xem Table sau :
VD 1:
Tôi đã dùng 2 table :
Table 1: Có bề rộng bằng 30%; nền màu đen, viền (border) màu đỏ rộng 2 pixels, chiều cao 146 pixels Cell padding = 5 pixels Nằm chính giữa trang
Table 2 : Có bề rộng bằng 85% Table 1, nềnmàu xanh, viền màu tím rộng 2 pixels,chiều cao bằng 100 pixel Nằm chính giữa Table 1 Mục đích chọn kích thước nhỏ hơn để Table 2 sẽ nằm "lọt thỏm" trong Table 1 Trong Table 2 insert vào hình cô gái Hình cô gái cũng sẽ nằm chính giữa và lọt thỏm trong Table 2
Các bạn hãy vào Properties cua 2 table này để xem các thông số có kiên quan
Như vậy sử dụng 2 Table lồng vào nhau để tạo một ảnh có nhiều khung nền khác nhau, gây ấn tượng
VD 2:
Trên một trang Web, tôi không muốn chữ nằm sát vào mép trang mà muốn cách mép trái của trang một khoảng Trong word thì chỉ cần chọn khối chữ và sử dụng nút Table là xong nhưng trên trang web, tôi phải tạo một Table có 2 cột, trong
đó cột bên trái có bề rộng bằng khoảng cách mép
Trang 8trang như mong muốn; cột 2 gõ chữ vào Chọn chế độ ẩn khung Khi hiển thị, ta sẽ đạt yêu cầu là chữ sẽ cách lề trái một khỏang
VD 3 :
Tôi muốn trang trí bên lề trái cho đẹp Tôi tạo một Table gồm 2 cột : Cột trái tôi chọn background picture và chèn hình gáy sách lò xo vào Cột phải tôi gõ nội dung bài viết Trang web tạo ra sẽ sinh động hơn nhiều
Qua 3 ví dụ trên, chắc các bạn đã rõ phần nào công dụng của Table 2) Chèn hình :
Bạn có thể insert hình bằng cách vào Menu Insert/Picture/FromFile như CT word Tuy nhiên có các vấn đề cần lưu ý như sau :
+ Để trang web có thể mở ra nhanh chóng, bạn nên xác định trước kích thước của hình trong source Lý do là nếu bạn không xác định trước thi CT
sẽ phải tự tính toán kích thước và sẽ mất thời gian VD :
<img border="0" src="taotrangweb_files/taotra1.jpg" align="left" width="468" height="411"></p>
Ở đây đã ấn định sẵn width là 468 và height là 411
+ Tối ưu hóa hình trước khi đưa vào trang web vì hình có dung lượng rất lớn Nếu không có yêu cầu gì đặc biệt, chỉ nên sử dụng dạng hình *.jpg
và *.Gif bạn có thể sử dụng các trình OptimizeJPG nhưng theo tôi nên dùng Adobe PhotoShop 7.0, sử dụng chức năng Save as web, hình sẽ được format dạng Gif nhưng chất lượng vẫn còn rất tốt
+ Các định dạng về hình :
Click chuột phải vào hình, chọn Properties :
** Nút Apperance :
- wrapping Style : Chọn kiểu hình không
có chữ bên cạnh hay hình có chữ bên trái, phải
- Layout : Chọn độ dày khung viền (Border thickness); khoảng hở
từ hình tới chữ xung quanh theo chiều ngang, dọc
- Size : Đánh dấu chọn vào Specify size
Trang 9sẽ xác định cố định kích thước hình theo Pixel hay percent như đã nêu trên Đánh dấu chọn vào Keep aspect ratio thì khi ta chỉnh hình thu nhỏ hay phóng to thi tỷ lệ cân đối của hình được giữ nguyên
** Nút Genaral :
- Picture source : Nhấn nút Browse tới nơi chứa hình Nút Edit để biên tập lại hình (chỉnh sửa, thêm chữ )
- Alternative representtation :
Đánh chữ vào Ô Text, chữ này sẽ hiện ra khi đưa chuột vào hình
Trang 10
- Default hyperlink : Nhấn nút Browse, tìm đến file muốn liên kết Khi click vào hình thi sẽ mở file được liên kết Chú ý các xác lập sau :
- Bookmark : Để đánh dấu, định vị vị trí thể hiện Ví dụ ta muốn liên kết tới trang huongdantaotrangweb.htm và đến ngay phần "2/ Định dạng Frame" : Trước hết tại trang huongdantaotrangweb.htm, đưa con trỏ chuột tới mục "2/ Định dạnh Frame", vào Menu Insert/Bookmark/ , đặt tên Bookmark này là ddFrame Sau đókhi nhấn nút Bookmarknhư ở hình minh họa trên ta sẽ thấy xuất hiện :
Click vào Bookmark "ddFrame" để chọn Bookmark này Như vậy trên trang web khi ta click vào hình để liên kết tới trang huongdan thì màn hình sẽ hiện ngay tại mục "2/ Định dạng Frame"
- Target Frame : Nếu bạn dùng trang web có sử dụng Frame thì cần chú
ý : Theo mặc nhiên thì khi click vào một liên kết ở Frame trái thì file liên kết sẽ mở ra ở Frame phải (main Frame); nói chung có các kiểu liên kết như thế này : file liên kết sẽ mở ra ngay tại Frame cũ, tại Frame khác hay tại một cửa số mới hoàn toàn Bạn hãy xem :
