For You And For Me *** Mỗi bạn một website!

Vài thao tác cơ bản để tạo một Website với Frontpage 2003

Dưới đây là những hướng dẫn cơ bản nhất, quan trong nhất để tạo một website mà những bạn mới bắt đầu sử dụng FrontPage 2003 cần biết. Nếu bạn cần học một cách hệ thống về FrontPage (chung cho các phiên bản), xin nhấn chuột vào đây!

Bạn chọn nội dung nào?

Làm quen Frontpage 2003.

Bảng mã tiếng Việt nào cho web.

Giới thiệu chế độ soạn thảo Split

Các kiểu địa chỉ của các liên kết

Tạo một siêu liên kết cho web

Đưa ảnh vào để trang trí cho Web

Cách undo khi lỡ làm sai một thao tác

Các sách tham khảo và chuyện bên lề

http://web.good.to

 

Sau khi khởi động chương trình Frontpage 2003 bạn sẽ thấy giao diện như sau:

Chúng ta hãy quan tâm đến cách "chọn kiểu soạn thảo" Gồm các lựa chọn:

Design: Soạn thảo theo giao diện đồ họa

Split: Soạn thảo hỗn hợp, nửa trên xem Soạn thảo theo mã HTML, nửa dưới là Soạn thảo theo giao diện đồ họa.

Code: Soạn thảo bằng mã HTML

Preview: Xem thử. Cho bạn xem thử đồng thời kiểm tra luôn xem các mã HTML có lỗi không!

Nếu không biết gì về HTML bạn chỉ cần quan tâm đến thẻ Design. Bạn sẽ thao tác với một trang web như là thao tác với Word.
Các thanh công cụ bạn sử dụng như trong Word, bạn cũng có thể kẻ bảng, căn lề..., chọn font chữ, khổ chữ, màu mè.... Nếu chỉ muốn tạo một trang web "đọc được" mà không muốn quan tâm sâu hơn thì bạn có thể dừng ở đây. Còn bạn nào cần hiểu một cách hệ thống bản chất website tạo bằng FrontPage 2003 thì mời xem tiếp!

Lên trên

 

Bảng mã tiếng Việt nào cho web?

Về chuyện Font chữ việt, nếu chưa rõ bạn nên click vào đây để đọc qua bài hướng dẫn về Font chữ Việt.

Nếu bạn quan tâm đến HTML để có thể can thiệp nền web, hiệu ứng Java... mà chưa rõ lắm về nó thì hãy học qua sách điện tử iHTML-online
Bạn có thể vào đây để học HTML trực tuyến bằng sách điện tử iHTML Online (tác giả: Trí Dũng). Chúng tôi cũng đã đóng gói sách này vào một file nén. Nếu bạn muốn tải về nhà đọc cho đỡ tốn kém thì bạn có thể tải sách này về tại đây.
Bạn không phải mất nhiều thời gian để học HTML, với sách điện tử iHTML bạn chỉ cần một buổi tối để làm quen với HTML và tạo cho mình một Website rồi! Nếu có điều kiện bạn nên đọc sách Trực tuyến để có thể sử dụng hết chức năng của sách!


Đây là mã HTML cho một trang trắng mà chương trình Frontpage tạo ra mỗi khi bật lên :

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> //Nên đổi "windows-1252" thành "utf-8" (sẽ giải thích sau)
<title>New Page 1</title> //Cái tit này sẽ hiển thị ở thanh tác vụ và đỉnh của cửa sổ trình duyệt
</head>
<body>
//nội dung soạn thảo sẽ được ghi tại đây!
</body>
</html>


=============
Việc đổi "windows-1252" thành "utf-8" chính là bạn đã bắt trình duyệt web của người truy cập phải định dạng bảng mã chính xác là UNICODE dựng sẵn. Web sẽ hiển thị tiếng Việt rõ ràng. Không bao giờ lỗi font như khi tạo web trực tuyến bằng công cụ của Freewebs.com. Có nhiều bảng mã UNICODE nhưng utf-8 là UNICODE dựng sẵn. Chẳng những giảm đến 30% dung lượng website, tăng tốc truy cập mà bạn sẽ thấy tiếng việt ngay cả khi soạn thảo bằng HTML.
Ví dụ cụ thể: khi gõ cụm từ: UNICODE tổ hợp
Nếu sử dụng UNICODE tổ hợp(để nguyên windows-1252) thì trang HTML sẽ được dịch thành:

UNICODE t&#7893; h&#7907;p

Nếu sử dụng UNICODE dựng sẵn(đổi "windows-1252" thành "utf-8") thì trang HTML sẽ được dịch thành:

UNICODE tổ hợp

==> rõ ràng là dễ đọc hơn, số ký tự ít hơn==> dung lượng trang nhỏ hơn==>tốc độ duyệt web nhanh hơn.

Như vậy bạn đã hoàn thành việc định dạng tiếng việt trên Web.

Lên trên

 

Frontpage 2003 "Thông minh" hơn các phiên bản trước rất nhiều. Bạn có thể cùng lúc soạn thảo theo chế độ đồ họa ở bên dưới và theo dõi sự thay đổi bằng HTML ở bên trên với chế độ soạn thảo split. Bạn sẽ tận mắt thấy được sự thay đổi tương ứng của mã HTML khi soạn thảo bằng vùng đồ họa bên dưới. Ngược lại nếu bạn soạn thảo bằng HTML, bạn không cần nhớ chính xác các thẻ mã bởi vì bạn chỉ cần gõ cách trống, tùy theo tình huống cụ thể mà chương trình sẽ bật lên một danh sách các thẻ có thể được sử dụng, bạn chỉ cần nhấn chọn thẻ đó mà thôi. Ngoài ra khi soạn thảo dạng đồ họa bạn có thể theo dõi đoạn bạn đang soạn thảo nằm trong vùng hoạt động của thẻ mã nào, từ đó có thể có biện pháp can thiệp, chỉnh sửa...

Trong ảnh tôi đang chọn chế độ soạn thảo split (Soạn thảo hỗn hợp).

Tôi chèn con trỏ vào tag(thẻ) <body> như sau: <body [vị trí con trỏ]>.

Sau đó tôi gõ cách trống, có menu bật lên bao gồm danh sách các thẻ có thể cho vào. tôi muốn thay nền của website bằng một ảnh nên tôi chọn thẻ background.

Tôi biết sau thẻ này là dấu = nên tôi gõ tiếp dấu này. Lại có một menu nhỏ bật lên có chữ Pick URL(tra từ điển Lạc Việt bạn sẽ thấy nó có nghiã là: chỉ tới địa chỉ của ảnh) gợi ý cho tôi kích chuột đúp vào đó để bật lên bảng chọn, dẫn tới ảnh chọn làm nền web. tôi đã để file ảnh này vào chung thư mục với trang web đang tạo. chính vì thế khi bảng chọn bật lên tôi chỉ việc tìm đến thư mục đang tạo web, chỉ vào file ảnh và nhấn OK.

Thật đơn giản phải không?

Kinh nghiệm:

Bạn nên tạo ra một thư mục riêng có tên là "tenban" chứa các trang web sau khi làm xong và tất cả các file có liên quan đến web của bạn. ví dụ ảnh, tài liệu khác... Trong thư mục này bạn có thể tạo ra các thư mục con chứa các file khác nhau có liên quan đến trang web. Cái này rất quan trọng vì web trên máy bạn hoạt động thì bạn có thể để ảnh lung tung nhưng máy vẫn tìm ra. Còn khi bạn đưa nó lên mạng, nếu không xếp gọn nó vào một chỗ để tải lên cùng nhau thì tất cả sẽ bát nháo hết chứ không còn ngon lành như trên máy bạn đâu!

Lên trên



Phần dưới đây nói về địa chỉ của các liên kết trên mạng nếu bạn không biết hoặc không quan tâm về HTML có thể bỏ qua!
Các địa chỉ trên web chia làm 2 dạng: Địa chỉ đầy đủ(hay còn gọi là địa chỉ tuyệt đối) và địa chỉ thu gọn(địa chỉ tương đối)
Địa chỉ đầy đủ là địa chỉ mà bạn phải liệt kê chính xác và đầy đủ địa chỉ dẫn đến nó ở trên mạng.
Ví dụ: http://www.freewebs.com/tenban/logo.gif là địa chỉ file ảnh "logo.gif" trong đó nó phải được định nghiã chính xác cả phần mở rộng (cái đuôi .gif)
Về vấn đề này bạn phải học qua tin học căn bản trong trường học (học qua MS-DOS) thì mới hiểu được.
Địa chỉ thu gọn là địa chỉ mà bạn có thể không cần chỉ ra chính xác URL của nó trên mạng.
Nếu file ảnh có tên là anhnen có phần mở rộng là JPG (sử dụng định dạng ảnh JPG), bạn để cùng thư mục với trang web thì địa chỉ thu gọn dẫn tới nó chính là tên ảnh (ở ví dụ trên địa chỉ của nó là: anhnen.jpg)
Nếu file ảnh ấy bạn để trong thư mục "Anh", mà thư mục "Anh" lại ở trong thư mục "tenban" chứa trang web đó thì địa chỉ thu gọn dẫn tới file ảnh đó là: /anh/anhnen.jpg
Nếu file ảnh đó trong thư mục "Anh", mà thư mục "Anh" lại ở ngoài thư mục chứa trang web thì địa chỉ file ảnh đó là: ../anh/anhnen.jpg
Như vậy bạn thấy rằng dấu "chấm chấm" để lùi lên một thư mục cấp cao hơn.
Ký tự "/" để phân cách thư mục. rất giống NC phải không?

Lên trên



Phần cuối của hướng dẫn này chúng ta sẽ tìm hiểu về siêu liên kết và cách tạo nó. Nhưng trước hết bạn phải đọc bài viết "Cần nắm vững một vài nguyên tắc" trên trang "Cơ bản về Web - HTML" (trang này tôi có tạo liên kết tắt đến sách điện tử iHTML online. bạn cũng có thể học iHTML online của anh Trí Dũng tại đây!)

Sau khi đọc xong bạn đã biết siêu liên kết là gì, để làm gì rồi và nếu bạn đã từng sử dụng Freewebs.com để làm web theo dạng trực tuyến mà chúng tôi đã hướng dẫn trong phần "3 bước tạo một website" thì bạn sẽ thấy để tạo một siêu liên kết trên Frontpage cũng tương tự. ngay cả biểu tượng nút cũng hệt như nhau!
Để tạo 1 siêu liên kết bạn làm như sau:
1.Bạn chọn đối tượng muốn sử dụng làm siêu liên kết. Nếu là văn bản thì bạn bôi đen đoạn văn bản. Nếu là ảnh thì click vào nó.
2.Nhấn nút Insert hyperlink(Nút có biểu tượng quả cầu xanh và mắt xích_có trong thanh công cụ chuẩn-Standard) để mở hộp thoại Insert hyperlink.
3.Bạn chỉ đến trang web hoặc tài liệu muốn liên kết đến bằng cách chọn nó trong bảng chọn hoặc gõ địa chỉ của nó vào ô address.
4.Nhấp OK.

Lên trên



Dùng ảnh trang trí trang web:
Bạn đã biết tạo nền cho web rồi. Bây giờ chúng ta sẽ học cách đưa ảnh vào web như một đối tượng độc lập. Xử lý ảnh trong web gần giống như trong word Bạn cũng có thể căn chỉnh, kéo giãn... Để đưa một ảnh vào Web cách đơn giản nhất là từ cửa sổ Window bạn nhấn CTRL+C để copy file ảnh. Vào trong Frontpage bạn nhấn CTRL+V để dán lên Web. Bạn cũng có thể làm thế với Word đúng không? Cả hai chương trình đều cho Kết quả xử lý giống nhau chỉ có điều web thì không lưu trữ luôn bức ảnh vào bản thân nó như Word mà nó chỉ có nhiệm vụ đưa địa chỉ file ảnh đó cho trình duyệt web và bảo trình duyệt cách phải hiển thị ảnh đó. Tất cả chỉ có thế mà thôi.

Lên trên



Trong quá trình làm web nếu lỡ làm sai bạn có thể Undo(nhấn CTRL+Z) (làm ngược lại thao tác sai), tới 20 lần. và với Frontpage 2003 bạn có thể Undo trong mọi tình huống bất kể bạn đang trong chế độ soạn thảo nào hoặc ngay cả khi bạn chuyển chế độ vẫn có thể undo lại. Đây là một sức mạnh được đánh giá cực cao vì mọi phiên bản trước nếu muốn undo bạn phải đưa đúng về chế độ soạn thảo đã dùng vì thế nhiều khi bạn mất toi một trang web đấy!
Bạn nhớ là phải nhấn Ctrl+S (Save) để thường xuyên lưu lại đề phòng mất điện nhé! Sau khi nhấn Ctrl+Sbạn vẫn có thể undo như thường.

Frontpage 2003 có rất nhiều mẫu web đẹp, nếu muốn có các mẫu độc đáo hơn bạn có thể tìm chúng trên mạng Internet hoặc vào các website chuyên cung cấp mẫu web(bạn vào "thư viện Web" tìm). Sau đó bạn đem về chỉnh sửa theo ý thích

Toàn bộ hướng dẫn trên tuy không hết các chức năng cơ bản của Frontpage nhưng cũng đủ để bạn làm một trang web thú vị rồi đó! Thêm chút mày mò bạn sẽ tạo ra được cho mình một Website có một không hai đấy!
Nếu đọc kỹ bạn sẽ thấy hướng dẫn trên có tính tổng quát, gợi mở. Nó đã gần như bao hàm hầu hết các thao tác cơ bản trong sử dụng Frontpage2003. Cuối cùng là phụ thuộc vào tính sáng tạo, sự mày mò tìm hiểu của bạn.

Lên trên



Để được hướng dẫn chi tiết, Bạn nên tìm đọc các sách sau:
Học Win XP: Sách Hướng dẫn học và sử dụng windowsXP cho người mới bắt đầu-Phan Minh Ngọc
Học Office, học Frontpage, học đồ họa: tìm sách của nhóm tác giả MK PUP - NXB Minh Khai- TP HCM.

Các sách này có thể tìm mua tại các hiệu sách tự chọn. tuy nhiên giá khá đắt. Bạn có thể tìm chúng trong các thư viện trường, thư viện thành phố...Thư viện của các trường đại học có ngành CNTT chắc chắn có các sách này!

Chuyện bên lề:
Trong phần này bạn đã thấy tôi nhắc rất nhiều đến các kiến thức về tin học căn bản trong trường học. Bạn thấy tác dụng rất to lớn của nó rồi đấy. Và đừng bao giờ đặt ra câu hỏi học MS-DOS làm gì, học NC làm gì nữa nhé! (Tôi đã nói câu này không dưới một lần và nghe bạn bè than cả trăm lần. Giờ thì biết rồi nên lại phải quay ra học lại!)
Mà không chỉ có những môn ấy đâu, tất cả những gì các bạn đang học chính là hành trang cho bạn bước vào đời. Nó cũng giống như những thứ bạn mang theo khi đi leo núi. Mang theo một cây gậy có thể chẳng bao giờ bạn dùng đến nhưng nếu có chuyện không may xảy ra thì cây gậy ấy có thể sẽ cứu tính mạng của bạn đó!

Để nắm vững nội dung hướng dẫn này quả thật cũng không phải đơn giản nếu bạn mới bắt đầu! có lẽ chúng ta nên dừng ở đây cho đỡ lan man! Hy vọng bạn sẽ hài lòng với trang web vừa tạo ra. Chúc bạn thành công !

Để tìm hiểu sâu hơn về FrontPage, hãy Click here


Tổng lượt truy cập: riêng trang này lượt kể từ 20/05/2005

Mục lục | Trang trước | Trang tiếp | Lên trên

Copyright © 2004 For You And For Me http://web.good.to