Hướng dẫn tạo trang web

Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị 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 khơng biết 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 rồi. Hiện cĩ rát nhiều CT : Pagemilk, Dreamwaver, webMaker . kể word nữa. Tuy nhiên tơi thích dùng Frontpage. Lý nĩ dễ dùng lại "ăn theo" Office nên Office lên đời nĩ 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 được. 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 cĩ thể 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. Ngồ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. Đ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 nhiều Font, cĩ thể 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 Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị 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 : .Vn-Times) 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, tơi 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 cả. Năm 1998, làm CD tơi phải khốn khổ học chiêu đấy. 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 trên. 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 lớn (theo khuyến cáo khơng nên Mb), nội dung nhiều ta cĩ thể 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 yêu cầu khơng tuyệt vời Adobe photoshop Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị - 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ĩ thể đọc 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, thử đi. 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 hồn tồn. 2. Các định dạng trang : Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị * 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 Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị - 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 bao nhiêu. 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 bao nhiêu. 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 tơi 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). Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị - 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 đánh dấu chọn vào Resizable in browse; muốn tạo cuộn để cĩ thể xem đầy đủ nội dung frame nĩ dài, vượt 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 hơn. + 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 cịn nhiều vấn đề khác trước tiên tơi giới thiệu nhất. 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 nền. 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 : Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị * 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 khơng phải 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 nhau. 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 1. Mục đích chọn kích thước nhỏ để Table nằm "lọt thỏm" Table 1. 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, 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 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 tơ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. Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị Qua ví dụ trên, bạn rõ phần cơng dụng Table 2) Chèn hình : Bạn cĩ thể 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 cĩ thể 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ĩ yêu cầu đặc biệt, nên sử dụng dạng hình *.jpg *.Gif. bạn cĩ thể 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 cịn 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 trên. Đá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. Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị ** 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 : Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị - 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 đế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 này. 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ố hồn tồn. Bạn xem : Nguyễn Văn Giám sưu tầm Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị - 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, nĩ định tính hợp lý, khoa học trang web bạn. VD bên Fram trái mục l Nguyễn Văn Giám sưu tầm [...]... TH Trần Quốc Toản - Cam Lộ - Quảng Trị - Chọn Frame file liên kết sẽ mở ra - Chọn New Window để trang liên kết mở ra ở cửa số mới - Nếu muốn lựa chọn trên là mặc nhiên thì đánh dấu vào Set as page default Lựa chọn nơi trang web liên kết sẽ mở ra rất quan trọng, nĩ quyết định tính hợp lý, khoa học của trang web của bạn VD như bên Fram trái là một mục l Nguyễn Văn Giám sưu tầm . Trường TH Trần Quốc Toản - Cam Lộ - Quảng Trị HƯỚ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. 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. 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