Latest images
SearchCác bước tạo website bằng Front Page
Page 1 of 1
Các bước tạo website bằng Front Page
nguyen thi ngoc yen 86 Sun Jul 17, 2011 2:23 pm
Dạy thiết kế web bằng Front page
Trong nhiều chương trình tạo website, Frontpage là chương trình thông dụng nhất vì là một thành phần trong bộ MS Office. Mặc dù ít chức năng nhưng Frontpage thường được dùng cho người mới “tập tễnh” làm web vì dễ học (sử dụng tương tự như Word) và có đầy đủ những tính năng cơ bản cần thiết cho việc tạo website.
Nhằm giúp các bạn chưa biết gì trong việc làm web, có thể tiếp cận “thoải mái” với những khái niệm “rắc rối”, e-CHÍP sẽ mách bạn cách tạo một website có các thành phần cơ bản là văn bản, liên kết, hình ảnh và âm thanh.
Bước 1: Mở trang mới
Website là tập hợp nhiều trang web và các tập tin khác liên kết lại với nhau. Mỗi website có một trang chủ là trang đầu tiên bạn sẽ xem khi gõ địa chỉ website. Chọn File/New/Page or Web. Bạn có thể mở một trang trắng (Blank page) hay lựa chọn trong số các trang mẫu sẵn có (Page Template). Ở đây, chúng ta mở một trang trắng (chưa có gì). Khi cần lưu những gì bạn đã làm, đơn giản là chọn lịnh Save (hay Save As khi lưu thành file mới) trong menu File
Bước 2: Nhập văn bản và định dạng
Sau khi một trang mới đã được mở, sẵn sàng cho bạn đưa dữ liệu và hình ảnh trang trí vào, trong phần góc dưới bên trái của cửa sổ Frontpage có ba bảng (tab) chọn lựa gồm Normal, HTML, Preview. Công dụng của chúng như sau:
- Normal: Cho phép bạn soạn thảo trang web trong tình trạng gần giống như khi hiển thị trong trình duyệt.
- HTML: Cho phép bạn soạn thảo trang web với đầy đủ mã nguồn. Bạn sẽ thấy toàn bộ tag (thẻ) nội HTML của trang và làm việc với trang web giống như khi mở bằng NotePad.
- Preview: Xem như đang ở trong trình duyệt web và không sửa được. Để soạn thảo văn bản tiếng Việt với font Unicode, bạn mở menu File/Properties/Language, chọn Save the document as: Unicode (UTF-
. Hay chọn bảng HTML và thay thế dòng <meta http-equiv=”Content-Type” content=”text/ html; charset=windows-1252"> (ở giữa hai thẻ <head> và </head>) thành <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8"> rồi chuyển trở lại bảng Normal. Chú ý: Nếu dùng font tiếng Việt khác như ABC, VNI, Bách Khoa,... bạn phải thay bằng dòng <meta http-equiv=”Content-Type” content=”text/html; charset=x-user-defined”>.
Nếu bạn chỉ dùng tiếng Việt Unicode, bạn có thể xác lập mặc định UTF-8 cho Frontpage bằng cách lưu trang này thành trang mẫu có tên là Normal.htm trong thư mục Program Files/Microsoft Office/Templates/1033/Pages/normal.tem/.Bạn có thể dùng trình gõ tiếng Việt hỗ trợ Unicode như VietSpell, Vietkey, Unikey,... để nhập tiếng Việt khi soạn thảo.
Việc định dạng văn bản cũng tương tự như Word với thanh công cụ Formatting, tức là bạn có thể chọn kiểu
tiêu đề, font và kích cỡ font, làm đậm, nghiêng, gạch dưới, canh lề, so hàng, màu font, màu nền...
Cách làm: Chọn vùng văn bản cần định dạng rồi bấm các biểu tượng định dạng trong thanh công cụ.
Bước 3: Tạo chữ cuộn (Marquee)
Bạn có thể thêm vào trang web một dòng chữ cuộn để thu hút sự chú ý, bạn có thể chỉnh tốc độ, hướng di chuyển cũng như kích thước, font chữ và kiểu cách của Marquee. Cách làm: Chọn menu Insert/Web Component/Dynamic Effects/Marquee. Trong cửa sổ Marquee Properties, bạn nhập dòng văn bản vào ô Text rồi bấm OK. Bạn có thể chọn chiều cuộn, tốc độ cuộn, kích thước và màu nền cho khung cuộn...
trong cửa sổ này. Để định dạng phần văn bản của Marquee, bạn bấm nút Style/Format rồi chọn Font.
Frontpage sẽ đặt một Marquee lên trang web của bạn nhưng bạn sẽ không thấy nó cuộn khi đang ở bảng Normal, nếu muốn xem đoạn văn bản cuộn bạn phải chuyển qua bảng Preview.
Bước 4: Chèn một file văn bản
Bạn có thể chèn nội dung một file văn bản vào Frontpage, với các định dạng cho phép là: Word, Rtf, Txt, Excel, HTML,...
Cách làm: Di chuyển dấu nháy đến vị trí chèn file, mở menu Insert/File rồi chỉ định file cần chèn.
Bước 5: Tạo liên kết (link) văn bản
Một liên kết là một lệnh HTML được nhúng trong trang web, lệnh này yêu cầu trình duyệt hiển thị một trang web hay một file khác khi người xem bấm chuột vào một đoạn văn bản hay một hình ảnh tương ứng. Mỗi liên kết có hai phần: phần liên kết và phần “đích”. Theo mặc định, khi người dùng di chuyển chuột đến liên kết, nó sẽ đổi hình dạng thành bàn tay đang chỉ để báo hiệu và trong thanh trạng thái ở dưới cửa sổ trình duyệt sẽ hiển thị địa chỉ của đối tượng đích. Cách làm: Chọn cụm từ để tạo liên kết trong văn bản đã soạn thảo, mở menu Insert/Hyperlink hay bấm biểu tượng Insert Hyperlink trong Toolbar.
Trong hộp thoại Insert Hyperlink, bạn chỉ định địa chỉ file đích bằng cách chọn trong ô liệt kê hay gõ địa chỉ vào ô Address rồi bấm OK. Cụm từ liên kết sẽ được gạch dưới để thể hiện đây là một liên kết. Nếu liên kết đến một địa chỉ e-mail, bạn chọn Link to/E-mail Address rồi nhập địa chỉ e-mail và tiêu đề (subject), Frontpage sẽ tự động chèn dòng “mailto:” vào trước địa chỉ e-mail.
Chú ý: Địa chỉ liên kết file có hai loại:
* Điạ chỉ tuyệt đối: Điạ chỉ đầy đủ, chính xác. Thí dụ:
“C:/web/andi/image/logo/lh3d.gif”. Hay [You must be registered and logged in to see this link.] com/index.htm”.
* Địa chỉ tương đối: Địa chỉ được định vị theo mối quan hệ tương đối(trên, dưới, ngang hàng) với trang chủ. Thí dụ: Nếu đối tượng liên kết chứa trong cùng thư mục với trang chủ, ta chỉ cần ghi “tên file”. Nếu trong thư mục khác ngang cấp, ta ghi “../tên thư mục/tên file”. Nếu thư mục trên một cấp, ta ghi “../tên file”. Nếu thư mục dưới một cấp, ta ghi “tên thư mục/tên file”.
Ngoài ra, theo mặc định của trình duyệt, khi người xem bấm chuột vào các liên kết file dạng chương trình (exe, com, zip...), hay multimedia (audio, video...) trình duyệt sẽ cho hiện hộp thoại để bạn chọn tải file về máy cá nhân hay chạy chương trình tương ứng.
Bước 6: Sửa/ xoá liên kết
Bạn di chuyển dấu nháy đến liên kết rồi bấm biểu tượng Insert Hyperlink trong Toolbar, trong hộp thoại Edit Hyperlink chọn Remove Link hay sửa lại địa chỉ liên kết trong ô Address.
Bước 7: Tạo các đánh dấu trang (Bookmark)
Khi người xem bấm vào một liên kết nạp trang web mới, nếu trang web đó lớn hơn màn hình, người xem cần phải cuộn màn hình nhiều lần để đến đoạn cần xem. Để giảm bớt phiền toái này, bạn có thể tạo một liên kết đến chính xác đoạn văn bản cần xem bằng Bookmark. Bạn cũng có thể di chuyển từ vị trí này đến vị trí khác trong cùng một trang web bằng Bookmark.
Cách làm: Bạn chỉ cần đặt dấu nháy tại nơi bạn muốn đặt bookmark, mở menu Insert/Bookmark, nhập tên cho Bookmark rồi bấm OK.
Bước 8: Liên kết đến Bookmark
Để liên kết đến Bookmark trong cùng trang web, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink, chọn Bookmark.
Để liên kết đến Bookmark trong một trang web khác, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink. Chọn trang web đích trong ô liệt kê rồi bấm nút Bookmark. Trong danh sách Bookmark có trong trang web đích, chọn một Bookmark đích.
Chú ý: Liên kết bookmark có dạng là “#tên bookmark” (thí dụ: weblh/ ctv/ctvlk.htm#lvd) trong mã lệnh và có biểu tượng lá cờ khi đang soạn thảo trong bảng Normal.
Bước 9: Tạo liên kết dạng bản đồ ảnh
Bạn có thể chèn một hình vào trang web, chia hình này ra làm nhiều phần rồi cho mỗi phần liên kết với một trang web nào đó. Đặc điểm này được gọi là bản đồ ảnh (Image map).
Cách làm: Di chuyển dấu nháy đến vị trí cần chèn hình, mở menu Insert/Picture/From file. Trong hộp thoại Picture, chọn file hình rồi chọn OK. Sau khi hình đã được chèn vào trang web, chọn hình để vẽ các điểm nóng (hotspots) tạo thành một bản đồ ảnh. Frontpage sẽ hiển thị thanh công cụ Picture, bấm chuột vào nút Rectangular Hotspot trong thanh công cụ này. Giữ phím trái chuột và kéo con trỏ chuột để vẽ một hình chữ nhật có kích thước tuỳ ý lên hình, sau đó nhả ra. Hộp thoại Insert Hyperlink xuất hiện, bạn chỉ định file liên kết cho vùng ảnh mà bạn đã chọn. Bạn tiếp tục vẽ các vùng khác và chọn liên kết file cho các vùng này cho đến khi kết thúc.
Chú ý: Bấm phím phải chuột lên hình rồi chọn Picture Properties để xác định vị trí của hình, canh lề, tạo đường viền,...
Bước 10: Thêm âm thanh nền cho trang web
Một cách để làm cho trang web của bạn thêm hấp dẫn là thêm nhạc nền vào đó, nhạc nền chỉ phát một thời gian hay phát liên tục chừng nào trang web này còn được mở là tuỳ bạn.
Cách làm: Bấm phím phải chuột vào vùng trống trên trang web rồi chọn lịnh Page Properties. Trong hộp thoại Page Properties, chọn bảng General/Background Sound/Location/Browse, chỉ định file âm thanh (wav, mid, ram, ra, aif, aifc, au, snd). Bạn chỉ định cho phát liên tục (đánh dấu chọn Forever) hay một số lần nhất định (bỏ dấu chọn Forever và nhập số vào Loop).
---------- Post added at 16:15 ---------- Previous post was at 16:15 ----------
Bước 11: Thêm Video vào trang web
Bạn có thể thêm các clip ảnh động vào trang web để chúng tự động thực hiện mỗi khi trang web được mở.
Cách làm: Bấm chuột vào vùng trống trong trang web, mở menu Insert/Picture/Video. Chỉ định file video (avi, asf, ram, ra). Bạn cũng có thể tạo liên kết đến các file video.
Cách làm: Chọn đoạn văn để tạo liên kết, mở menu Insert/Hyperlink. Trong hộp thoại Create Hyperlink, chọn file video đích. Sau khi liên kết được tạo, bạn chuyển qua bảng Preview để xem trang web và bấm chuột vào liên kết. Windows sẽ tự động mở chương trình xem video thích hợp và “chiếu” file video này.
(còn tiếp)
Bạn có thể chèn các file ảnh khác nhau (GIF, JPG, BMP, PNG) vào website, FrontPage có kèm theo một “kho” (Clip Art) với hàng trăm ảnh có sẵn bao gồm các nút ảnh động, ảnh nền, ảnh nghệ thuật, ảnh minh hoạ,... thậm chí còn có các file âm thanh và video. Ngoài ra, FrontPage còn có một khả năng đặc biệt là tự động tạo các thumbnail (ảnh đại diện nhỏ của ảnh gốc) để tăng tốc độ hiển thị khi xem trang web.
* Chèn ảnh: Di chuyển con trỏ đến nơi cần đặt ảnh, mở menu Insert/ Picture/From File, chọn file ảnh rồi bấm OK. Bạn có thể chọn ảnh trong kho của FrontPage bằng cách mở menu Insert/Picture/Clip Art/Clip Organizer hay truy cập vào kho ảnh của Microsoft trên internet (Insert/Picture/Clip Art/Clips Online).
* Tạo Thumbnail: Bấm chuột vào ảnh rồi bấm chuột vào biểu tượng Auto Thumbnail trong thanh công cụ, hay bấm phím phải chuột vào ảnh rồi chọn lệnh Auto Thumbnail trong menu rút gọn. FrontPage sẽ thay ảnh gốc bằng một ảnh đại diện nhỏ hơn liên kết với ảnh gốc. Khi người xem bấm chuột vào ảnh đại diện, trình duyệt sẽ hiển thị ảnh nguyên gốc.
* Tạo liên kết cho file ảnh: Bạn có thể tạo liên kết với bất kỳ ảnh nào trong website, ngoại trừ thumbnail (vì thumbnail đã có liên kết với file ảnh gốc). Bấm phím phải chuột vào ảnh rồi chọn lệnh Hyperlink trong menu rút gọn.
* Thay đổi kích thước ảnh: Bấm chuột vào ảnh để hiện khung chỉnh kích thước bao quanh ảnh, bấm phím chuột vào ô vuông giữa các cạnh, giữ phím và kéo chuột để thay đổi kích thước rộng hay cao tương ứng. Dùng các ô vuông ở bốn góc để thay đổi kích thước nhưng giữ nguyên tỷ lệ dọc/ngang.
Bạn có thể bấm phím phải chuột vào ảnh rồi chọn lệnh Picture Properties để điều chỉnh vị trí, kích thước cũng như tạo khung viền, chỉ định khoảng không gian trống bao quanh ảnh.
Bước 13. Nút Hover
Đây thực chất là một Java applet được tạo bởi FrontPage nhằm làm cho website sinh động hơn. Bạn có thể dùng nút hover để liên kết đến một website hay một file bất kỳ khác, khi người xem di chuyển chuột lên nút hover, nút này sẽ chuyển màu hay chuyển hình thái để tạo cảm giác “nổi.
* Đưa con trỏ đến nơi cần tạo nút hover trong website, mở menu Insert/Web Component, chọn Dynamic Effects/Hover Buton rồi bấm nút Finish. Trong hộp thoại Hover Button Properties, bạn đặt tên cho nút (Button text), tạo liên kết (Link to), chọn màu cho nút (Button color), chọn hiệu ứng động trong danh sách Effect, chọn màu cho hiệu ứng (Effect color), kích thước nút (Width/Height). Bạn bấm nút Custom trong hộp thoại này nếu muốn chỉ định cho “chơi” một bản nhạc khi di chuyển (hoặc bấm) chuột lên nút hay khi muốn chỉ định hai file ảnh làm nút bấm ở trạng thái bình thường và khi có chuột. Chú ý: Bạn chỉ xem được hiệu ứng nút hover trong trình duyệt, không xem được trong FrontPage.
Bước 14. Làm văn bản chuyển động với HTML động
FrontPage cung cấp sẵn một số hiệu ứng văn bản động để tránh đơn điệu như: chữ rơi từng từ, rơi từng câu, bay, nhảy, cuộn sóng,...
* Chọn dòng văn bản muốn cho chuyển động, mở menu Format/Dynamic HTML Effects. Trong thanh công cụ DHTML Effects, bạn chọn sự kiện (On), chọn hiệu ứng (Apply) và chọn hướng chuyển động (Choose Settings). Để tháo bỏ DHTML đã có, bạn chọn Remove Effect.
Bước 15. Hiệu ứng chuyển trang
Bạn có thể tạo các hiệu ứng đặc biệt khi nạp trang hay thoát trang bằng cách vào menu Format/Page Transitions. Trong hộp thoại Page Transitions, bạn chọn sự kiện (Event), thời gian xẩy ra hiệu ứng (Duration) và chọn hiệu ứng trong danh sách, thí dụ: Blend (rõ dần), Box (hình vuông nhỏ/lớn dần), Circle (hình tròn nhỏ/lớn dần), Wipe (cuộn), Random (thay đổi hiệu ứng ngẫu nhiên).
Sau khi thực hiện đủ 14 bước trong bài viết này, xem như website của bạn đã phong phú và có vẻ hấp dẫn rồi đấy. Bạn có thể nâng cao tay nghề, làm các trang web phong phú hơn với phần đồ hoạ “chuyên nghiệp” (Flash, 3D...) hay tương tác với người dùng qua các ứng dụng web, quản lý cơ sở dữ liệu, v.v...
Cần biết khi tạo website
Đối với những người thiết kế website rồi đưa lên internet, điều đầu tiên nên biết là quy ước đặt tên file trên internet như thế nào, để tránh trường hợp các liên kết bị mất hiệu lực khi chuyển file lên server hay chuyển từ server nầy sang server khác.
Lỗi mất liên kết thường xảy ra khi tạo website trên máy Windows hay Macintosh rồi gởi nó đến server Unix vì Windows và Macintos là hai hệ điều hành phổ biến nhất cho máy cá nhân còn Unix lại là hệ điều hành phổ biến nhất cho máy server.
Có vài quy ước cần phải theo để phù hợp với cả Windows, Macintosh và Unix:
* Đặt tên file theo quy ước Dos 8.3: An toàn nhất là dùng tên file theo quy ước 8+3 (tên file 8 ký tự, phần mở rộng 3 ký tự) và không dùng ký tự đặc biệt nào trừ dấu gạch dưới (thí dụ: image_1.htm). Đây là tên file được nhận diện bởi mọi hệ điều hành đang có.
* index.html: Tên file chính hay file đầu tiên của website nên được đặt là index.html vì server Unix đòi hỏi file nầy phải có phần mở rộng là html thay vì htm như các trang khác. Các Server Windows và Macintosh cũng chấp nhận tên file như vậy làm file chính. Khi bạn gõ URL là địa chỉ website không kèm tên file (thí dụ: ktlehoan.com), tất cả các Server sẽ tự động đi tìm trang web chính có tên index.html nạp cho bạn xem.
* Chữ hoa và chữ thường: Windows và Macintosh không quan tâm tới việc phân biệt chữ hoa và chữ thường trong tên file cũng như trong mã liên kết html. Khi bạn sao chép file, những file có tên giống nhau nhưng khác chữ hoa và chữ thường sẽ được coi là cùng một file và sẽ đè chồng (thay thế) lên nhau.
Nhưng Unix lại phân biệt chính xác chữ hoa, chữ thường trong tên file và đòi hỏi các liên kết mã html phải chính xác như vậy. Bạn chỉ cần gõ sai một từ thôi thì cả liên kết coi như hỏng. Khi bạn sao chép file, những file trùng tên nhưng khác các ký tự hoa, thường là những file khác nhau và tồn tại độc lập với nhau.
* Dấu cách (khoảng trắng) trong tên file: Windows và Macintosh cho phép trong tên file có khoảng trắng nhưng Unix thì lại không cho phép nên để tương thích nhiều hệ điều hành, bạn nên đặt tên file không có khoảng trắng (thay bằng các dấu gạch dưới để dể phân biệt). Thí dụ: Nên đặt tên file là “thi_nghiem.htm” thay vì “thi nghiem.htm”.
* Tải file: Khi dùng các chương trình để tải file lên internet, bạn cần chú ý là: Có chương trình cho phép bạn chuyển đổi toàn bộ tên file tải lên thành chữ thường hay thành chữ hoa. Trong quá trình tải file, bạn nên chú ý thông báo tên file trong hộp thoại kết quả, nếu thấy tên file hiển thị khác đi thì cần kiểm tra lại tên file gốc và mã liên kết trên ổ đĩa cục bộ.
* Link: Một thói quen tốt nên có khi tạo link là dùng toàn bộ chữ thường trong mã liên kết nội bộ (tương đối). Thí dụ: /andi/ndc.htm. Và tất cả tên file nên đặt theo kiểu chữ thường để dể kiểm tra sửa chữa khi có sai lạc.
Liên kết tuyệt đối dùng để nối kết sang các website khác, mã liên kết của nó sẽ bao gồm địa chỉ website (URL) và tên file (hay tên file mặc định là index.html). Thí dụ <A HREF = “http://www.yourname.com/index.html”
Liên kết tương đối sử dụng khi nối kết các file trong cùng một website và việc định địa chỉ link tương đối tùy thuộc vào việc theo dõi thư mục và file ở đâu trong mối tương quan với nhau. Nếu dùng liên kết tương đối cho toàn bộ website, bạn có thể khai thác chúng trên đĩa cứng nội bộ, di chuyển website của bạn qua bất kỳ máy nào hay vật trữ tin nào cũng được (các liên kết vẫn có giá trị tiếp tục).
Trong nhiều chương trình tạo website, Frontpage là chương trình thông dụng nhất vì là một thành phần trong bộ MS Office. Mặc dù ít chức năng nhưng Frontpage thường được dùng cho người mới “tập tễnh” làm web vì dễ học (sử dụng tương tự như Word) và có đầy đủ những tính năng cơ bản cần thiết cho việc tạo website.
Nhằm giúp các bạn chưa biết gì trong việc làm web, có thể tiếp cận “thoải mái” với những khái niệm “rắc rối”, e-CHÍP sẽ mách bạn cách tạo một website có các thành phần cơ bản là văn bản, liên kết, hình ảnh và âm thanh.
Bước 1: Mở trang mới
Website là tập hợp nhiều trang web và các tập tin khác liên kết lại với nhau. Mỗi website có một trang chủ là trang đầu tiên bạn sẽ xem khi gõ địa chỉ website. Chọn File/New/Page or Web. Bạn có thể mở một trang trắng (Blank page) hay lựa chọn trong số các trang mẫu sẵn có (Page Template). Ở đây, chúng ta mở một trang trắng (chưa có gì). Khi cần lưu những gì bạn đã làm, đơn giản là chọn lịnh Save (hay Save As khi lưu thành file mới) trong menu File
Bước 2: Nhập văn bản và định dạng
Sau khi một trang mới đã được mở, sẵn sàng cho bạn đưa dữ liệu và hình ảnh trang trí vào, trong phần góc dưới bên trái của cửa sổ Frontpage có ba bảng (tab) chọn lựa gồm Normal, HTML, Preview. Công dụng của chúng như sau:
- Normal: Cho phép bạn soạn thảo trang web trong tình trạng gần giống như khi hiển thị trong trình duyệt.
- HTML: Cho phép bạn soạn thảo trang web với đầy đủ mã nguồn. Bạn sẽ thấy toàn bộ tag (thẻ) nội HTML của trang và làm việc với trang web giống như khi mở bằng NotePad.
- Preview: Xem như đang ở trong trình duyệt web và không sửa được. Để soạn thảo văn bản tiếng Việt với font Unicode, bạn mở menu File/Properties/Language, chọn Save the document as: Unicode (UTF-
. Hay chọn bảng HTML và thay thế dòng <meta http-equiv=”Content-Type” content=”text/ html; charset=windows-1252"> (ở giữa hai thẻ <head> và </head>) thành <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8"> rồi chuyển trở lại bảng Normal. Chú ý: Nếu dùng font tiếng Việt khác như ABC, VNI, Bách Khoa,... bạn phải thay bằng dòng <meta http-equiv=”Content-Type” content=”text/html; charset=x-user-defined”>.Nếu bạn chỉ dùng tiếng Việt Unicode, bạn có thể xác lập mặc định UTF-8 cho Frontpage bằng cách lưu trang này thành trang mẫu có tên là Normal.htm trong thư mục Program Files/Microsoft Office/Templates/1033/Pages/normal.tem/.Bạn có thể dùng trình gõ tiếng Việt hỗ trợ Unicode như VietSpell, Vietkey, Unikey,... để nhập tiếng Việt khi soạn thảo.
Việc định dạng văn bản cũng tương tự như Word với thanh công cụ Formatting, tức là bạn có thể chọn kiểu
tiêu đề, font và kích cỡ font, làm đậm, nghiêng, gạch dưới, canh lề, so hàng, màu font, màu nền...
Cách làm: Chọn vùng văn bản cần định dạng rồi bấm các biểu tượng định dạng trong thanh công cụ.
Bước 3: Tạo chữ cuộn (Marquee)
Bạn có thể thêm vào trang web một dòng chữ cuộn để thu hút sự chú ý, bạn có thể chỉnh tốc độ, hướng di chuyển cũng như kích thước, font chữ và kiểu cách của Marquee. Cách làm: Chọn menu Insert/Web Component/Dynamic Effects/Marquee. Trong cửa sổ Marquee Properties, bạn nhập dòng văn bản vào ô Text rồi bấm OK. Bạn có thể chọn chiều cuộn, tốc độ cuộn, kích thước và màu nền cho khung cuộn...
trong cửa sổ này. Để định dạng phần văn bản của Marquee, bạn bấm nút Style/Format rồi chọn Font.
Frontpage sẽ đặt một Marquee lên trang web của bạn nhưng bạn sẽ không thấy nó cuộn khi đang ở bảng Normal, nếu muốn xem đoạn văn bản cuộn bạn phải chuyển qua bảng Preview.
Bước 4: Chèn một file văn bản
Bạn có thể chèn nội dung một file văn bản vào Frontpage, với các định dạng cho phép là: Word, Rtf, Txt, Excel, HTML,...
Cách làm: Di chuyển dấu nháy đến vị trí chèn file, mở menu Insert/File rồi chỉ định file cần chèn.
Bước 5: Tạo liên kết (link) văn bản
Một liên kết là một lệnh HTML được nhúng trong trang web, lệnh này yêu cầu trình duyệt hiển thị một trang web hay một file khác khi người xem bấm chuột vào một đoạn văn bản hay một hình ảnh tương ứng. Mỗi liên kết có hai phần: phần liên kết và phần “đích”. Theo mặc định, khi người dùng di chuyển chuột đến liên kết, nó sẽ đổi hình dạng thành bàn tay đang chỉ để báo hiệu và trong thanh trạng thái ở dưới cửa sổ trình duyệt sẽ hiển thị địa chỉ của đối tượng đích. Cách làm: Chọn cụm từ để tạo liên kết trong văn bản đã soạn thảo, mở menu Insert/Hyperlink hay bấm biểu tượng Insert Hyperlink trong Toolbar.
Trong hộp thoại Insert Hyperlink, bạn chỉ định địa chỉ file đích bằng cách chọn trong ô liệt kê hay gõ địa chỉ vào ô Address rồi bấm OK. Cụm từ liên kết sẽ được gạch dưới để thể hiện đây là một liên kết. Nếu liên kết đến một địa chỉ e-mail, bạn chọn Link to/E-mail Address rồi nhập địa chỉ e-mail và tiêu đề (subject), Frontpage sẽ tự động chèn dòng “mailto:” vào trước địa chỉ e-mail.
Chú ý: Địa chỉ liên kết file có hai loại:
* Điạ chỉ tuyệt đối: Điạ chỉ đầy đủ, chính xác. Thí dụ:
“C:/web/andi/image/logo/lh3d.gif”. Hay [You must be registered and logged in to see this link.] com/index.htm”.
* Địa chỉ tương đối: Địa chỉ được định vị theo mối quan hệ tương đối(trên, dưới, ngang hàng) với trang chủ. Thí dụ: Nếu đối tượng liên kết chứa trong cùng thư mục với trang chủ, ta chỉ cần ghi “tên file”. Nếu trong thư mục khác ngang cấp, ta ghi “../tên thư mục/tên file”. Nếu thư mục trên một cấp, ta ghi “../tên file”. Nếu thư mục dưới một cấp, ta ghi “tên thư mục/tên file”.
Ngoài ra, theo mặc định của trình duyệt, khi người xem bấm chuột vào các liên kết file dạng chương trình (exe, com, zip...), hay multimedia (audio, video...) trình duyệt sẽ cho hiện hộp thoại để bạn chọn tải file về máy cá nhân hay chạy chương trình tương ứng.
Bước 6: Sửa/ xoá liên kết
Bạn di chuyển dấu nháy đến liên kết rồi bấm biểu tượng Insert Hyperlink trong Toolbar, trong hộp thoại Edit Hyperlink chọn Remove Link hay sửa lại địa chỉ liên kết trong ô Address.
Bước 7: Tạo các đánh dấu trang (Bookmark)
Khi người xem bấm vào một liên kết nạp trang web mới, nếu trang web đó lớn hơn màn hình, người xem cần phải cuộn màn hình nhiều lần để đến đoạn cần xem. Để giảm bớt phiền toái này, bạn có thể tạo một liên kết đến chính xác đoạn văn bản cần xem bằng Bookmark. Bạn cũng có thể di chuyển từ vị trí này đến vị trí khác trong cùng một trang web bằng Bookmark.
Cách làm: Bạn chỉ cần đặt dấu nháy tại nơi bạn muốn đặt bookmark, mở menu Insert/Bookmark, nhập tên cho Bookmark rồi bấm OK.
Bước 8: Liên kết đến Bookmark
Để liên kết đến Bookmark trong cùng trang web, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink, chọn Bookmark.
Để liên kết đến Bookmark trong một trang web khác, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink. Chọn trang web đích trong ô liệt kê rồi bấm nút Bookmark. Trong danh sách Bookmark có trong trang web đích, chọn một Bookmark đích.
Chú ý: Liên kết bookmark có dạng là “#tên bookmark” (thí dụ: weblh/ ctv/ctvlk.htm#lvd) trong mã lệnh và có biểu tượng lá cờ khi đang soạn thảo trong bảng Normal.
Bước 9: Tạo liên kết dạng bản đồ ảnh
Bạn có thể chèn một hình vào trang web, chia hình này ra làm nhiều phần rồi cho mỗi phần liên kết với một trang web nào đó. Đặc điểm này được gọi là bản đồ ảnh (Image map).
Cách làm: Di chuyển dấu nháy đến vị trí cần chèn hình, mở menu Insert/Picture/From file. Trong hộp thoại Picture, chọn file hình rồi chọn OK. Sau khi hình đã được chèn vào trang web, chọn hình để vẽ các điểm nóng (hotspots) tạo thành một bản đồ ảnh. Frontpage sẽ hiển thị thanh công cụ Picture, bấm chuột vào nút Rectangular Hotspot trong thanh công cụ này. Giữ phím trái chuột và kéo con trỏ chuột để vẽ một hình chữ nhật có kích thước tuỳ ý lên hình, sau đó nhả ra. Hộp thoại Insert Hyperlink xuất hiện, bạn chỉ định file liên kết cho vùng ảnh mà bạn đã chọn. Bạn tiếp tục vẽ các vùng khác và chọn liên kết file cho các vùng này cho đến khi kết thúc.
Chú ý: Bấm phím phải chuột lên hình rồi chọn Picture Properties để xác định vị trí của hình, canh lề, tạo đường viền,...
Bước 10: Thêm âm thanh nền cho trang web
Một cách để làm cho trang web của bạn thêm hấp dẫn là thêm nhạc nền vào đó, nhạc nền chỉ phát một thời gian hay phát liên tục chừng nào trang web này còn được mở là tuỳ bạn.
Cách làm: Bấm phím phải chuột vào vùng trống trên trang web rồi chọn lịnh Page Properties. Trong hộp thoại Page Properties, chọn bảng General/Background Sound/Location/Browse, chỉ định file âm thanh (wav, mid, ram, ra, aif, aifc, au, snd). Bạn chỉ định cho phát liên tục (đánh dấu chọn Forever) hay một số lần nhất định (bỏ dấu chọn Forever và nhập số vào Loop).
---------- Post added at 16:15 ---------- Previous post was at 16:15 ----------
Bước 11: Thêm Video vào trang web
Bạn có thể thêm các clip ảnh động vào trang web để chúng tự động thực hiện mỗi khi trang web được mở.
Cách làm: Bấm chuột vào vùng trống trong trang web, mở menu Insert/Picture/Video. Chỉ định file video (avi, asf, ram, ra). Bạn cũng có thể tạo liên kết đến các file video.
Cách làm: Chọn đoạn văn để tạo liên kết, mở menu Insert/Hyperlink. Trong hộp thoại Create Hyperlink, chọn file video đích. Sau khi liên kết được tạo, bạn chuyển qua bảng Preview để xem trang web và bấm chuột vào liên kết. Windows sẽ tự động mở chương trình xem video thích hợp và “chiếu” file video này.
(còn tiếp)
Bạn có thể chèn các file ảnh khác nhau (GIF, JPG, BMP, PNG) vào website, FrontPage có kèm theo một “kho” (Clip Art) với hàng trăm ảnh có sẵn bao gồm các nút ảnh động, ảnh nền, ảnh nghệ thuật, ảnh minh hoạ,... thậm chí còn có các file âm thanh và video. Ngoài ra, FrontPage còn có một khả năng đặc biệt là tự động tạo các thumbnail (ảnh đại diện nhỏ của ảnh gốc) để tăng tốc độ hiển thị khi xem trang web.
* Chèn ảnh: Di chuyển con trỏ đến nơi cần đặt ảnh, mở menu Insert/ Picture/From File, chọn file ảnh rồi bấm OK. Bạn có thể chọn ảnh trong kho của FrontPage bằng cách mở menu Insert/Picture/Clip Art/Clip Organizer hay truy cập vào kho ảnh của Microsoft trên internet (Insert/Picture/Clip Art/Clips Online).
* Tạo Thumbnail: Bấm chuột vào ảnh rồi bấm chuột vào biểu tượng Auto Thumbnail trong thanh công cụ, hay bấm phím phải chuột vào ảnh rồi chọn lệnh Auto Thumbnail trong menu rút gọn. FrontPage sẽ thay ảnh gốc bằng một ảnh đại diện nhỏ hơn liên kết với ảnh gốc. Khi người xem bấm chuột vào ảnh đại diện, trình duyệt sẽ hiển thị ảnh nguyên gốc.
* Tạo liên kết cho file ảnh: Bạn có thể tạo liên kết với bất kỳ ảnh nào trong website, ngoại trừ thumbnail (vì thumbnail đã có liên kết với file ảnh gốc). Bấm phím phải chuột vào ảnh rồi chọn lệnh Hyperlink trong menu rút gọn.
* Thay đổi kích thước ảnh: Bấm chuột vào ảnh để hiện khung chỉnh kích thước bao quanh ảnh, bấm phím chuột vào ô vuông giữa các cạnh, giữ phím và kéo chuột để thay đổi kích thước rộng hay cao tương ứng. Dùng các ô vuông ở bốn góc để thay đổi kích thước nhưng giữ nguyên tỷ lệ dọc/ngang.
Bạn có thể bấm phím phải chuột vào ảnh rồi chọn lệnh Picture Properties để điều chỉnh vị trí, kích thước cũng như tạo khung viền, chỉ định khoảng không gian trống bao quanh ảnh.
Bước 13. Nút Hover
Đây thực chất là một Java applet được tạo bởi FrontPage nhằm làm cho website sinh động hơn. Bạn có thể dùng nút hover để liên kết đến một website hay một file bất kỳ khác, khi người xem di chuyển chuột lên nút hover, nút này sẽ chuyển màu hay chuyển hình thái để tạo cảm giác “nổi.
* Đưa con trỏ đến nơi cần tạo nút hover trong website, mở menu Insert/Web Component, chọn Dynamic Effects/Hover Buton rồi bấm nút Finish. Trong hộp thoại Hover Button Properties, bạn đặt tên cho nút (Button text), tạo liên kết (Link to), chọn màu cho nút (Button color), chọn hiệu ứng động trong danh sách Effect, chọn màu cho hiệu ứng (Effect color), kích thước nút (Width/Height). Bạn bấm nút Custom trong hộp thoại này nếu muốn chỉ định cho “chơi” một bản nhạc khi di chuyển (hoặc bấm) chuột lên nút hay khi muốn chỉ định hai file ảnh làm nút bấm ở trạng thái bình thường và khi có chuột. Chú ý: Bạn chỉ xem được hiệu ứng nút hover trong trình duyệt, không xem được trong FrontPage.
Bước 14. Làm văn bản chuyển động với HTML động
FrontPage cung cấp sẵn một số hiệu ứng văn bản động để tránh đơn điệu như: chữ rơi từng từ, rơi từng câu, bay, nhảy, cuộn sóng,...
* Chọn dòng văn bản muốn cho chuyển động, mở menu Format/Dynamic HTML Effects. Trong thanh công cụ DHTML Effects, bạn chọn sự kiện (On), chọn hiệu ứng (Apply) và chọn hướng chuyển động (Choose Settings). Để tháo bỏ DHTML đã có, bạn chọn Remove Effect.
Bước 15. Hiệu ứng chuyển trang
Bạn có thể tạo các hiệu ứng đặc biệt khi nạp trang hay thoát trang bằng cách vào menu Format/Page Transitions. Trong hộp thoại Page Transitions, bạn chọn sự kiện (Event), thời gian xẩy ra hiệu ứng (Duration) và chọn hiệu ứng trong danh sách, thí dụ: Blend (rõ dần), Box (hình vuông nhỏ/lớn dần), Circle (hình tròn nhỏ/lớn dần), Wipe (cuộn), Random (thay đổi hiệu ứng ngẫu nhiên).
Sau khi thực hiện đủ 14 bước trong bài viết này, xem như website của bạn đã phong phú và có vẻ hấp dẫn rồi đấy. Bạn có thể nâng cao tay nghề, làm các trang web phong phú hơn với phần đồ hoạ “chuyên nghiệp” (Flash, 3D...) hay tương tác với người dùng qua các ứng dụng web, quản lý cơ sở dữ liệu, v.v...
Cần biết khi tạo website
Đối với những người thiết kế website rồi đưa lên internet, điều đầu tiên nên biết là quy ước đặt tên file trên internet như thế nào, để tránh trường hợp các liên kết bị mất hiệu lực khi chuyển file lên server hay chuyển từ server nầy sang server khác.
Lỗi mất liên kết thường xảy ra khi tạo website trên máy Windows hay Macintosh rồi gởi nó đến server Unix vì Windows và Macintos là hai hệ điều hành phổ biến nhất cho máy cá nhân còn Unix lại là hệ điều hành phổ biến nhất cho máy server.
Có vài quy ước cần phải theo để phù hợp với cả Windows, Macintosh và Unix:
* Đặt tên file theo quy ước Dos 8.3: An toàn nhất là dùng tên file theo quy ước 8+3 (tên file 8 ký tự, phần mở rộng 3 ký tự) và không dùng ký tự đặc biệt nào trừ dấu gạch dưới (thí dụ: image_1.htm). Đây là tên file được nhận diện bởi mọi hệ điều hành đang có.
* index.html: Tên file chính hay file đầu tiên của website nên được đặt là index.html vì server Unix đòi hỏi file nầy phải có phần mở rộng là html thay vì htm như các trang khác. Các Server Windows và Macintosh cũng chấp nhận tên file như vậy làm file chính. Khi bạn gõ URL là địa chỉ website không kèm tên file (thí dụ: ktlehoan.com), tất cả các Server sẽ tự động đi tìm trang web chính có tên index.html nạp cho bạn xem.
* Chữ hoa và chữ thường: Windows và Macintosh không quan tâm tới việc phân biệt chữ hoa và chữ thường trong tên file cũng như trong mã liên kết html. Khi bạn sao chép file, những file có tên giống nhau nhưng khác chữ hoa và chữ thường sẽ được coi là cùng một file và sẽ đè chồng (thay thế) lên nhau.
Nhưng Unix lại phân biệt chính xác chữ hoa, chữ thường trong tên file và đòi hỏi các liên kết mã html phải chính xác như vậy. Bạn chỉ cần gõ sai một từ thôi thì cả liên kết coi như hỏng. Khi bạn sao chép file, những file trùng tên nhưng khác các ký tự hoa, thường là những file khác nhau và tồn tại độc lập với nhau.
* Dấu cách (khoảng trắng) trong tên file: Windows và Macintosh cho phép trong tên file có khoảng trắng nhưng Unix thì lại không cho phép nên để tương thích nhiều hệ điều hành, bạn nên đặt tên file không có khoảng trắng (thay bằng các dấu gạch dưới để dể phân biệt). Thí dụ: Nên đặt tên file là “thi_nghiem.htm” thay vì “thi nghiem.htm”.
* Tải file: Khi dùng các chương trình để tải file lên internet, bạn cần chú ý là: Có chương trình cho phép bạn chuyển đổi toàn bộ tên file tải lên thành chữ thường hay thành chữ hoa. Trong quá trình tải file, bạn nên chú ý thông báo tên file trong hộp thoại kết quả, nếu thấy tên file hiển thị khác đi thì cần kiểm tra lại tên file gốc và mã liên kết trên ổ đĩa cục bộ.
* Link: Một thói quen tốt nên có khi tạo link là dùng toàn bộ chữ thường trong mã liên kết nội bộ (tương đối). Thí dụ: /andi/ndc.htm. Và tất cả tên file nên đặt theo kiểu chữ thường để dể kiểm tra sửa chữa khi có sai lạc.
Liên kết tuyệt đối dùng để nối kết sang các website khác, mã liên kết của nó sẽ bao gồm địa chỉ website (URL) và tên file (hay tên file mặc định là index.html). Thí dụ <A HREF = “http://www.yourname.com/index.html”
Liên kết tương đối sử dụng khi nối kết các file trong cùng một website và việc định địa chỉ link tương đối tùy thuộc vào việc theo dõi thư mục và file ở đâu trong mối tương quan với nhau. Nếu dùng liên kết tương đối cho toàn bộ website, bạn có thể khai thác chúng trên đĩa cứng nội bộ, di chuyển website của bạn qua bất kỳ máy nào hay vật trữ tin nào cũng được (các liên kết vẫn có giá trị tiếp tục).
nguyen thi ngoc yen 86- Posts : 19
Join date : 2011-06-18
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|