HƯỚNG DẪN TẠO MỘT TRANG WEB

HƯỚNG DẪN TẠO MỘT TRANG WEB Hiện Internet, trang web khơng cịn khái niệm xa vời, "xa xỉ" ! gía dịch vụ thiết bị (đầu ghi, đĩa CD trắng) ngày giảm, xuất nhu cầu tạo trang web riêng hay 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 phải đâu ! sách thị trường nhiều "bài bản" "bác học" nên khó tiếp thu Qua thực tế mình, tơi mạnh dạn giới thiệu bước thiết lập trang web cách đơn giản, dễ hiểu khơng ngồi mục đích hỗ trợ "tay ngang tơi" bớt phần khó khăn Tất nhiên viết có nhiều sai sót, xin bạn lượng thứ Tất nhiên bạn phải cài CT tạo trang web Hiện có rát nhiều CT : Pagemilk, Dreamwaver, webMaker kể word Tuy nhiên tơi thích dùng Frontpage Lý dễ dùng lại "ăn theo" Office nên Office lên đời lên đời theo Hiện tơi dùng FrontpageXP hướng dẫn viết sở FrontpageXP Nếu chưa có bạn cài vào, kẹt dùng Frontpage2000 Nào, bắt đầu I/ CHUẪN BỊ BƯỚC ĐẨU : Trước hết bạn lấy giấy ra, tạo trước sơ đồ cấu trúc thư mục CD : Hãy tạo thư mục chủ (VD : CD), thư mục chứa tất thư mục khác Điều đơn giản quan trọng : sau ghi vào CD bạn cần copy toan thư mục "CD" xong Tiếp đến tạo thư mục phù hợp với nội dung CD định làm : Software, Giới thiệu, Hình ảnh, Giải trí thư mục khác : Trong Software tạo thêm : Utility, Multimedia, Net, Graphic; giải trí có thư mục : Game, nhạc, thơ vv nghĩa tùy theo ý đồ sở liệu bạn có Bạn nên thống cách xếp để sau dễ tìm kiếm : tất mẫu (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 xem thư việc chung, sau trang web cần sử dụng nút, nền, hình vào TM để lấy Ngoài bạn cần phải thống cách xếp, cách đặt tên VD : Một software có file kèm theo viết hướng dẫn sử dụng, Crack nên chung vào thư mục Việc xếp cho khoa học trình kinh nghiệm, bạn thử Điều đặc biệt phải nhớ tạo trang web ta thường đưa nhiều hình ảnh, tư liệu khác CĨ TRÊN Ồ ĐĨA CỨNG hay quên đưa tư liệu sử dụng vào TM "CD" để ghi TM "CD" đĩa để chạy máy khác bị lỗi tùm lum ! Tiếp đến cần thống số việc sau : - Chỉ nên dùng font chữ, chọn font thật phổ thông mà PC có Tahoma chẳng hạn Khơng nên lạm dụng q nhiều Font, PC người dùng khơng có Đặc biệt trang sưu tầm mạng hay từ nguồn khác, bạn ý convert (chuyển mã) cho đồng font Trang web bạn tạo hầu hết đọc trình Internet Explore, để đọc tiếng Việt yêu mến ta, ta phải set 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 CD (VD Tahoma) sau set xong, mở trúng trang web khác dùng loại font khác (VD : VnTimes) ta lại phải set lại font, 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 tạm thời đọc chữ Việt trang xem thôi, chuyển sang trang khác lại bị font ! Để trình duyệt tự động nhận dạng font chữ Việt CD bạn, trình duyệt mát set font nào, khuyến bạn chiêu sau : Mở source nguồn trang web (Trong Fronpage, click vào nút HTML cuối trang), gõ câu lệnh sau vào phần head : (đây câu bạn phải gõ vào)… Kể từ đây, trình duyệt tự động set font, sướng ! CD viết font tiếng Việt tự động nhận ra, khỏi set xiếc Năm 1998, làm CD phải khốn khổ học chiêu Mẹo : Bạn nên tạo sẵn câu lệnh trang mẫu đó, sau cần copy dán vào xong - Nên thống trước cách đặt tên File, ví dụ bạn sử dụng kiểu trang có Frame : Tiêu đề nằm ngang phía trên, Frame bên trái chứa tiêu mục, Frame chứa nội dung hiển thị, ta đặt tên thống : trang chứa tiêu đề đầu trang đặt head_xxx (VD: head_software ); trang Frame bên trái left_xxx; trang bên phải thường trang nội dung chính, đặt main_xxx Tên File đừng nên bỏ dấu (dù CT cho phép) cho dễ gợi lại nội dung trang VD : SuutapnhacTrinhcongson.htm - Như nêu lỗi thường gặp tạo web, bạn tạo mối liên kết đến sở liệu (hình, tài liệu, CT ) ổ đĩa cứng ghi CD bạn ghi thư mục CD chạy CD bị lỗi Để khắc phục, bạn phải lưu ý chép tất liệu sử dụng vào thư mục sau ghi lên CD - Không nên tạo trang web kích thước q lớn (theo khuyến cáo khơng nên Mb), nội dung nhiều ta cắt nhiều trang : trang 1, trang Khơng nên lạm dụng nhiều hình ảnh làm tăng kích thước trang; phải dùng hình nên cố gắng format hình dạng Gif hay JPG thu nhỏ kích thướchình trước Về việc xử lý ảnh theo u cầu khơng tuyệt vời Adobe photoshop - Hạn chế việc sử dụng hiệu ứng khơng cần thiết tăng kích thước trang khơng phải PC có cài phần mềm tương ứng để xem Mọi hiệu ứng nên kết xuất dạng *.html để dễ dàng sử dụng VD bạn dùng trình FlashMacromedia Flash, Swish, Flax tạo hiệu ứng hình ảnh, chữ, sau nên chuyển thành file *.html đưa vào trang web bạn Cách convert CT thường hướng dẫn đầy đủ File Help, nhiên bạn đọc hướng dẫn sử dụng viết kèm theo II/ KHỞI TẠO 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, thử Tơi khối dùng kiểu : Frames Pages/banner and contents (giống trang web LH bạn đọc) Sau trang xuất hiện, có frames (khung) : Trên khung bạn thấy lựa chọn bạn : + Set Initial Page : Để đưa vào trang web có sẵn : chọn đường dẫn tới trang web muốn đưa vào + New Page : Tạo trang hoàn toàn Các định dạng trang : * Page Properties : Click chuột phải, chọn Page Properties xuất hộp thoại với nhiều tính định dạng; tơi giới thiệu số : ** Nút General : Location : Nơi lưu trang web Title :Tên tiêu đề trang Background sound :Đưa nhạc 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 màu nước đánh dấu chọn vào ô Watermark - Color : - Background : Chọn màu - Text : Chọn màu chữ - Hyperlink : Màu chữ có kết nối - Màu chữ click vào - Màu chữ kết nối hoạt động ** Nút Margin : - Specifytop margin : Đánh dấu chọn chọn số pixel Dùng lựa chon bạn muốn nội dung trang cách đầu trang Nếu không chọn CT tự động chọn chế độ mặc định - Specify left margin : Đánh dấu chọn chọn số pixel Dùng lựa chon bạn muốn nội dung trang cách lề trái trang Nếu khơng chọn CT tự động chọn chế độ mặc định Đó định dạng trang web Ngồi bạn cịn phải định dạng cho Frame, table, cell, picture có sử dụng đối tượng này, trình bày sau Riêng nút Custom, Language "chuyên sâu" nên giới thiệu sau 3/ Các định dạng Frame : Khi bạn chọn kiểu trang có Frame nêu lúc bạn có trang (VD trang tên software), có trang "con" nằm Frame : VD Trang head_software nằm Frame đầu trang; trang left_software nằm Frame bên trái trang main_software nằm Frame bên phải Sau định dạng Frame : Name : Tên Frame - Initial page : Trang nằm Frame Muốn chèn trang khác 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 banner Adobe PhotoShop có kích thước 450, 70 pixel ta điều chỉnh kích frame head 452, 71 banner nằm khít Framr head, đẹp - Margins : Xác định canh chỉnh chiều cao chiều rộng Frame (đơn vị tính pixel điểm) - Options : Nếu bạn muốn người dùng dùng chuột để rê mở rộng hay thu hẹp Frame đánh dấu chọn vào Resizable in browse; muốn tạo cuộn để xem đầy đủ nội dung frame dài, vượt q kích thước hình bạn chọn Show scrollbars chế độ thích hợp (trừ Never - không xuất cuộn) Frames Page : + Frame spacing : xác định khoảng "hở" trang khung Theo tơi nên chọn để trang nằm khít Frame, đẹp + Show Borders : Đánh dầu chọn muốn có khung bao quanh Frame ** Nút Frames Page : Thực chất nội dung Frame trang web (tạo hay Insert vào) Click nút Frame page để thay đổi thuộc tính canh chỉnh lề, chỉnh Frame Quan trọng nút Magrins Frames để xác lập khỏang cách tới lề trái đầu trang khoảng hở trang khung (Frames) Bạn phải điều chỉnh cho trang nằm khung khít khao hay có độ hở thích hợp với yêu cầu mỹ thuật Qua bước trên, bạn tạo định dạng trang Frame Tất nhiên nhiều vấn đề khác trước tiên tơi giới thiệu Dạng trang web có Frame thích hợp với yêu cầu dùng để tra cứu chọn tiêu mục bên Frame trái nội dung tạo Frame phải Xét mặt mỹ thuật khơng thể đẹp trang web khơng Frame III/ THIẾT KẾ TRÊN TRANG WEB : Vấn đề thể trang web Sau ta tiếp tục nghiên cứu : - Sử dụng Table - Chèn hình - Tạo mối liên kết - Nút 1/ Sử dụng Table : Vào Menu Table/Insert : Những thông số bạn sử dụng Table word rõ : + Rows : Số hàng + Columns : Số cột + Alignment : Canh chỉnh để nội dung table nằm trái, phải, hay để (default) + Border size : Kích thước khung viền + Cell Padding, Cell spacing : điều chỉnh ô Cell + Specify width : Nếu bạn đánh dấu chọn bạn phải xác định xác kích thước table nghĩa Table khơng giãn nội dung đưa vào vượt kích thước table Có kiểu lựa chọn : * Chọn Pixel : Xác định theo điểm * Chọn percent : tính % so với trang web VD 50% nghĩa table có kích thước rộng nửa trang web Việc dùng Table quan trọng bạn nên nhớ trang web viết html gõ chữ word Để tạo nhóm chữ trang trí viền tạo khoảng hở Table, Table với Frame bạn phải sử dụng nhiều Table lồng vào VD bạn xem Table sau : VD 1: Tôi dùng table : Table 1: Có bề rộng 30%; màu đen, viền (border) màu đỏ rộng pixels, chiều cao 146 pixels Cell padding = pixels Nằm trang Table : Có bề rộng 85% Table 1, nềnmàu xanh, viền màu tím rộng pixels,chiều cao 100 pixel Nằm Table Mục đích chọn kích thước nhỏ để Table nằm "lọt thỏm" Table Trong Table insert vào hình gái Hình gái nằm lọt Table Các bạn vào Properties cua table để xem thơng số có kiên quan Như sử dụng Table lồng vào để tạo ảnh có nhiều khung khác nhau, gây ấn tượng VD 2: Trên trang Web, không muốn chữ nằm sát vào mép trang mà muốn cách mép trái trang khoảng Trong word cần chọn khối chữ sử dụng nút Table xong trang web, tơi phải tạo Table có cột, cột bên trái có bề rộng khoảng cách mép trang mong muốn; cột gõ chữ vào Chọn chế độ ẩn khung Khi hiển thị, ta đạt yêu cầu chữ cách lề trái khỏang VD : Tơi muốn trang trí bên lề trái cho đẹp Tôi tạo Table gồm cột : Cột trái chọn background picture chèn hình gáy sách lị xo vào Cột phải tơi gõ nội dung viết Trang web tạo sinh động nhiều Qua ví dụ trên, bạn rõ phần công dụng Table 2) Chèn hình : Bạn insert hình cách vào Menu Insert/Picture/FromFile CT word Tuy nhiên có vấn đề cần lưu ý sau : + Để trang web mở nhanh chóng, bạn nên xác định trước kích thước hình source Lý bạn không xác định trước thi CT phải tự tính tốn kích thước thời gian VD :

Ở ấn định sẵn width 468 height 411 + Tối ưu hóa hình trước đưa vào trang web hình có dung lượng lớn Nếu khơng có u cầu đặc biệt, nên sử dụng dạng hình *.jpg *.Gif bạn sử dụng trình OptimizeJPG theo tơi nên dùng Adobe PhotoShop 7.0, sử dụng chức Save as web, hình format dạng Gif chất lượng tốt + Các định dạng 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 xác định cố định kích thước hình theo Pixel hay percent nêu Đánh dấu chọn vào Keep aspect ratio ta chỉnh hình thu nhỏ hay phóng to thi tỷ lệ cân đối hình 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ữ đư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 mở file liên kết Chú ý xác lập sau : - Bookmark : Để đánh dấu, định vị vị trí thể Ví dụ ta muốn liên kết tới trang huongdantaotrangweb.htm đến phần "2/ Định dạng Frame" : Trước hết trang huongdantaotrangweb.htm, đưa trỏ chuột tới mục "2/ Định dạnh Frame", vào Menu Insert/Bookmark/ , đặt tên Bookmark ddFrame Sau đókhi nhấn nút Bookmarknhư hình minh họa ta thấy xuất : Click vào Bookmark "ddFrame" để chọn Bookmark Như trang web ta click vào hình để liên kết tới trang huongdan hình mục "2/ Định dạng Frame" - Target Frame : Nếu bạn dùng trang web có sử dụng Frame cần ý : Theo click vào liên kết Frame trái file liên kết mở Frame phải (main Frame); nói chung có kiểu liên kết : file liên kết mở Frame cũ, Frame khác hay cửa số hoàn toàn Bạn xem : - Chọn Frame file liên kết mở - Chọn New Window để trang liên kết mở cửa số - Nếu muốn lựa chọn đánh dấu vào Set as page default Lựa chọn nơi trang web liên kết mở quan trọng, định tính hợp lý, khoa học trang web bạn VD bên Fram trái mục l ... *.html đưa vào trang web bạn Cách convert CT thường hướng dẫn đầy đủ File Help, nhiên bạn đọc hướng dẫn sử dụng viết kèm theo II/ KHỞI TẠO Chọn kiểu trang : - Vào File/New/Page or web/ New from... tính % so với trang web VD 50% nghĩa table có kích thước rộng nửa trang web Việc dùng Table quan trọng bạn nên nhớ trang web viết html gõ chữ word Để tạo nhóm chữ trang trí viền tạo khoảng hở... chọn kiểu trang có Frame nêu lúc bạn có trang (VD trang tên software), có trang "con" nằm Frame : VD Trang head_software nằm Frame đầu trang; trang left_software nằm Frame bên trái trang main_software