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

Chia sẻ: Nguyen Anh Tuan | Ngày: | Loại File: DOC | Số trang:13

Thêm vào BST

Báo xấu

1.018
lượt xem 335
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: HƯỚNG DẪN TẠO MỘT TRANG WEB

HƯỚNG DẪN TẠO MỘT TRANG WEB Nguyễn Ngọc Sinh Thanh tra tỉnh Khánh Hòa 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 "NutNen"; 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 đượ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 : .VnTimes) 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 : (đây là câu bạn phải gõ vào) .... 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.. 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 bạn đều thấy 2 lựa chọn bạn hãy : + 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 : * 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 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 : Name : Tên 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 là pixel điểm). 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). Frames Page : + 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 : * 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.
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 : Ở đâ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. ** 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 : 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 : 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ục gồm thơ, nhạc, hình, phim ... bạn muốn khi click vào mục" thơ" thì sẽ tiếp tục ra một mục lục chi tiết gồm : Bài 1, Bài 2, Bài 3, Bài 4 ... rõ ràng với ý đồ này thì khi click vào chữ thơ thì trang mục lục chi tiết phải tiếp tục được mở ra cũng trên Frame trái còn khi click vào Bài 1 thì nội dung trang web có bài thơ Bài 1 sẽ xuất hiện trên Frame phải. Hoặc nếu Click vào "Nhạc" thì sẽ ra một trang chuyên đề về nhạc. Trang này gỉa dụ bạn thiết kế rất quy mô, hoành tráng thì không thể bắt nó chui rúc trong một cái Frame bé tẹo được, vậy tất nhiên bạn phải chọn Trarget của nó là New Window để khi được liên kết thì nó sẽ hiện ra trên một cửa sổ mới toanh, bề thế !!! Như vậy tùy nội dung và hình thức mà bạn chọn Target phù hợp. Nếu muốn sự lựa chọn là mặc nhiên cho những lần sau thi đánh dấu chọn vào ô "set as page default". Remove link : Xóa các xác lập về link
Qua các bước cơ bản trên, nếu các bạn chịu khó thực hành sẽ dễ dàng tạo một trang web có Frame, biết được các xác lập cho Table, Page, Picture ... Phần tiếp theo sẽ hướng dẫn về cách sử dụng những kỷ xảo, hiệu ứng trên trang web. (còn tiếp) Nguyễn Ngọc Sinh Thanh tra tỉnh Khánh Hoà sinhphuoc@dng.vnn.vn PcLeHoan 1996 - 2002 Mirror : http://www.pclehoan.com Mirror : http://www.lehoanpc.net Mirror : http://www.ktlehoan.com