Đ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 ngồ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 Ngồ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 đượ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
Trang 2Options/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ì khố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 bạn đều
+ 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 hồn tồ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 Ngồ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 Browse
- 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 head, rất đẹp
- Margins : Xác định canh chỉnh về chiều cao và chiều rộng của Frame (đơn vị tính
Trang 6- 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
+ 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
hay để 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 :
Trang 7* 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 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
Trang 8
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 tố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 sẽ 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
Trang 9** 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
- 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 :
Trang 10- 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 hồn tồn Bạn hãy xem :