Thiết kế web bằng frontpage

7 841 3
Thiết kế web bằng frontpage

Đang tải... (xem toàn văn)

Thông tin tài liệu

1. Thiết kế website đơn giản bằng frontpage 2003. bài viết này ko đầy đủ như sách dc nhưng chứa những điều cơ bản để có một website hoàn chỉnh vì mình cũng thiết kế website của mình bằng frontpage và chỉ sử dụng có từng này chiêu thôi ^^. tiếc là host mình mua đã hết hạn sự dụng rồi. khi nào mua host khác sẽ mời các bạn vào tham quan website vủa mình! BEGIN Frontpage 2003 là một công cụ thiết kế (design) website đơn giản và dễ sử dụng, chỉ cần bạn có 1 chút kĩ năng về định dạng văn bản từ word là bạn đã có thể trình bày website của bạn theo đúng ý tưởng thiết kế của bạn. Còn điều mà các bạn cũng như tớ khi lần đầu thiết kế website thắc mắc là : “làm thế nào để đưa nó lên mạng cho bạn bè cùng xem ?”. Điều này tớ sẽ nói ỏ bài sau nhé! Vì nó hoàn toàn tách biệt với khâu thiết kế website (là khâu cần thiết nhất của bạn và bạn có thể làm nó ở nhà với cái máy tình và phần mềm microsoft frontpage 2003 hoặc XP đều đc). Đầu tiên chúng ta cần có frontpage 2003 trong máy (điều này bạn phải tự lo cho mình thui! Mua một đĩa office 2003 – trong đĩa này có đủ bộ frontpage 2003 rùi – chúc các bạn cài đặt thành công frontpage 2003 nhé!). Khởi động frontpage 2003, chúng ta sẽ từng bước làm quen với giao diện và các thành phần (hay dùng) của nó. - Thẻ Design : cửa sổ chính để bạn sử dụng kĩ năng word để thể hiện ý tương design của mình. - Thẻ Split : thẻ hiển thị một nửa là các đoạn mã html và một nửa là cửa sổ chính (thẻ design). - Thẻ Code : thẻ hiển thị các đoạn mã html. Thẻ này cũng quan trọng lắm, vì có những ý tường mà bạn không thể thiết kế ở thẻ design thì bạn có thể vô thẻ này để chỉnh sửa hoặc thêm các hiệu ứng java scrip để làm đẹp thêm cho website của bạn. (điều kiện là bạn phải biết về ngôn ngữ html và java scrip). - thẻ Priview : thẻ này cho phép bạn xem trước những gì mà bạn vừa thiết kế ở thẻ design. 2. Bây giờ bắt tay vào design nhé : Vào File / New , lúc này sẽ hiển thị ra một cửa sổ New Chọn One page Web site trong cửa sổ New, lúc này sẽ xuất hiện cửa sổ Web site template : Ở thẻ General đã có sẵn các mẫu chuẩn (templates) do nhà sản xuất thiết kế. Theo tớ bạn nên chọn mẫu One page Web site – một trang web trống trơn – để bạn có thể thiết kế theo ý mình. Frontpage 2003 sẽ tạo cho bạn một cấu trúc thư mục web ban đầu để bạn có thể thêm hoặc bớt các thành phần trên vào website của mình sau này. Cấu trúc thư mục như hình dưới đây : Thư mục _private, images chỉ là những thư mục trong cấu trúc ban đầu của website, bạn có thể xoá đi và tạo lại các thư mục khác (tuỳ bạn) sao cho thuận tiện với việc quản lý các file ảnh, nhạc, … còn file index.htm là trang chủ (bạn vào trang này và bắt đầu việc thiết kế). Bạn kick đúp file index.htm, cửa sổ design hiện ra. Click chuột phải chọn Page Properties… Để xuất hiện cửa sổ Page Properties. Chọn thẻ Language, trong hộp Save the documents as, chọn Unicode (UTF- 8) : tên bảng mã kí tự chuẩn quốc tế - bạn phải làm vậy vì với font chuẩn quốc tế thì mọi trình duyệt sẽ hiển thị đúng tiếng việt có dấu. còn nếu như bạn dùng các font vni, vntime … thì trình duyệt sẽ không đọc được tiếng việt trên các máy không cài font này. (chú ý : mỗi trang mới bạn đều phải thực hiện thao tác này). 3. Lúc này bạn có thể nhập nội dung cho website của mình rùi đó. Còn định dạng website có được đẹp mắt hay không là tùy vào óc sáng tạo và kĩ năng word của bạn. Tiếp tục với cửa sổ Page Properties – cửa sổ định dạng chung cho toàn trang web 1. với thẻ General chúng ta sẽ có những thao tác sau : - Location : vị trí đặt website của bạn (không cần thiết vì bạn có thể lưu lại website của mình ở bất cứ vị trí nào chỉ với vài thao tác coppy va paste). - Title : tiêu đề của trang web hiện tại và nó sẽ hiển thị trên thanh tiêu đề. - Page description : miêu tả trang web hiện tại của bạn. (không càn thiết). - Keywords : từ khoá (để đăng kí với các website tìm kiếm). (không càn thiết). Để cho nhanh, những điều không cần thiết tớ sẽ bỏ qua (thông cảm nhé! ) - Background sound : ở hộp này bạn có thể lấy bất kì bài hát nào cho trang web hiện tại của mình để mỗi khi open web, bạn hoặc những người bạn yêu quý của bạn đều có thể nghe được bài hát đó. + Location trong hộp background là nơi để bạn chọn đường link tới một bài hát trên mạng hoặc địa chỉ đến một bài hát mà bạn cất giữ trong máy (với điều kiện là bài hát trong máy của bạn cũng phải được upload lên host cùng với website của bạn). + Loop : là số lần bài hát được lập lại khi open web đó.(tốt nhất bạn cứ giữ nguyên dấu tích đánh ơ hộp Forever – để bài hát được lập lại mãi). 2. Thẻ Formatting : - Background : nếu bạn muốn chọn hình nền của bạn là hình ảnh thì bạn đánh dấu tích vào hộp background picture. Lúc đó hộp brownse sẽ sáng lên để bạn chọn đường dẫn hình ảnh bạn định để làm hình nền. - Colors : còn nếu bạn không muốn có hình nền thì vào hộp color để chọn màu nền. + Background : màu cho nền trang web của bạn. + Text : định dạng màu font chữ của bạn. + Hyperlink : định dạng màu cho các liên kết. + Visited Hyperlink : định dạng màu cho các liên kết đã được kích hoạt. + Active Hyperlink : đinh dạng màu cho liên kết đang được kích hoạt. 3. Để cho việc thiết kế được đơn giản, chúng ta sẽ vận dụng các chiêu thức từ word : Định dạng bảng : Vào insert / table hoặc ấn biểu tượng trên thanh công cụ, rồi dùng chuột kéo tuỳ ý số hàng số cột (không nên nhiều qua nhé, để thưa thưa khoảng 10 hàng, 10 cột là được). công việc này sẽ tạo cho bạn một bảng để đặt nội dung vào từng vị trí khác nhau. Lúc này vào thẻ Preview thì vẫn còn nguyên các đường kẻ của bảng vừa tạo, để những dòng kẻ đó chỉ hiện ra ở thẻ design (thuận tiện cho việc trình bày của bạn) mà không có ở thẻ priview ta ấn chuột phải chọn table properties trong phần Borders vào hộp size giảm chỉ số từ 1 xuống 0. rùi bạn xem kết quả nhé. (bằng cách so sánh thẻ preview và thẻ design) Các cách chỉnh sửa bảng : + Merge Cells : nhập một nhóm ô được chỉ định bằng cách bôi đen (rùi kích chuột phải chọn Merge Cells) thành một ô lớn. Vậy là bạn có một ô lớn để đề tên trang chủ của bạn rùi đó. + Vẽ thêm bảng : vào menu Table chọn Draw Table, lúc này sẽ xuất hiện thêm bảng Table với các nút tác vụ mang các chức năng giúp chỉnh sửa bảng. Các nút với hình ảnh dễ hiểu. nếu ko biết các bạn cứ sài thử nhé trước sau gì cũng làm dc thôi vì tớ ngại post hình lên diễn đàn lắm hihi thông cảm nha khi nào mua dc hos tớ sẽ send cho các bạn đng link bài hướng dãn này bằng hình ảnh ^^ chờ nhé 4. - Chèn ảnh : chọn vị trí cần chèn ảnh vào menu Insert / picture / from file rùi chỏ đường dẫn tới ảnh bạn cần chèn và ấn ok. - Tạo các hyperlink : chọn ảnh hoặc dòng chữ muốn tạo hyperlink nhấn chuột phải chọn hyperlink, xuất hiện cửa sổ Insert Hyperlink. Bạn vào hộp adress nhập địa chỉ site hoặc các link đến các site khác trên Internet. Rùi nhấn ok. - Tạo hiệu ứng dòng chữ chạy : vào Insert / Web component xuất hiện cửa sổ Insert Web Component. Ở cửa sổ này bạn chọn thẻ Marquee từ thẻ Dynamic Effects thuộc danh sách Component type. cửa sổ Marquee properties xuất hiện, ở đây bạn nhập dòng chữ muốn tạo hiệu ứng chạy vào hộp Text. Sau đó hiệu chỉnh Delay - độ trễ - theo tớ để 60, còn Amuont – tổng số khung hình trên 1s – theo tớ để là 1 (Như vậy dòng chữ chạy sẽ rất êm). Còn muốn dòng chữ chạy từ trái qua phải thì nhấn chọn Right, còn chạy từ phải qua trái thì chọn Left. Còn muốn chạy từ dưới lên trên hoặc ngược lại thì lúc này chắc chắn bạn phải biết 1 tý về HTML. Mẹo nhỏ này tớ sẽ bảo luôn : Trước tiên Bạn cần biết đoạn mã chứa dòng chữ cần chỉnh sửa nằm ở vị trí nào trong thẻ Code, bạn chỉ việc bôi đen dòng chữ mà bạn đã tạo hiệu ứng chạy từ trái qua phải (hoặc từ phải qua trái) nằm ở thẻ Design. Rùi bạn chuyển qua thẻ Code và bạn sẽ thấy luôn đoạn code cần tìm. Khi tìm được đoạn mã rùi, bạn phải thực hiện chèn thêm đoạn mã chỉ định cho dòng chữ chạy từ dưới lên trên : direction= “up” ; còn chạy từ trên xuống dưới thì là : direction= “down”. Bây giờ bạn thử kiểm tra lại xem, chắc chắn dòng chữ sẽ không chạy ngang nữa đâu, hi` . - Tạo bảng điều khiển Windown Media Player (nhằm trang trí thêm cho web thui !) : bạn lại vào cửa sổ Insert Web component, lần này bạn chọn thẻ Advanced Controls trong list Component. Lúc này ở list choose a control bạn chọn ActiveX control xong rùi ấn next. Sẽ xuất hiện một list choose a control, bạn vào Customize, lúc này sẽ xuất hiện thêm một cửa sổ Customize ActiveX Control List. Ở cửa sổ này bạn tích vào Window Merdia Player như hình minh hoạ rùi ấn ok và lúc này ở cửa sổ Insert Web Component đã xuất hiện thêm một lựa chọn cho công việc insert của bạn đó là Window Merdia Player, bây giờ bạn chỉ việc nhấp vào biểu tượng này là ok rùi. Vậy là lúc này bạn đã có hộp điều khiển của Window Merdia Player rùi, công đoạn tiếp theo là chèn bài nhạc yêu thích vào bảng điều khiển này nữa là ok. - Nhấp đúp vào bảng điều khiển sẽ xuất hiện cửa sổ Window Merdia Player Properties. Ở cửa sổ này bạn chỉ đường link tới bài hát hoặc copy địa chỉ bài hát sẵn có trên mạng vào hộp File Name or URL trong phần Source. + Ở hộp Play count (số lần bài hát lập lại). Cái này tuỳ bạn chọn nhé (theo mình thì 10 lần là đủ vì chẳng ai muốn nghe bài hát của bạn day đi day lại 10 lần đâu hi` ) + còn Volume thì bạn kéo lên Max nhé. Nếu bạn muốn có thêm đường viền vào bảng điều khiển Windown Merdia Player thì vào thẻ Object Tag vào hộp Border Thickness tăng lên 1,2, hoặc 3 là tuỳ vào độ dầy của viền mà bạn nghĩ là hợp với bảng điều khiển Windown Merdia Player của mình. 5. Cách tạo liên kết bookmark (còn gọi là liên kết nội bộ) Khi bạn tạo một trang web có nội dung dài, lúc dó bạn cần phải tạo một bảng mục lục liên kết để liên kết đến một đoạn nào đó trong cùng một trang web thì bạn dùng bookmark. Cách làm như sau: Ví dụ Trong phần mục lục của bạn có Chương1, chương 2, Chương 3… và nội dung chương 3 nằm ở đâu đó trong trang web, bạn muốn nhấn vào chữ Chương 3 trong mục lục thì nó nhảy xuống ngay phần nội dung chương 3. bạn làm như sau : * Tạo Bookmark: Chọn (bôi đen) từ hoặc cụm từ tiêu đề (đây chính là tạo điểm dừng cho liên kết bookmark.Vào menu Insert, chọn Bookmark, một cửa sổ hiện ra: Trong hộp Bookmark, đặt tên cho đối tượng vừa chọn trong khung Bookmark name Click OK để tạo bookmark. * Tạo liên kết đến Bookmark: Sau khi tạo được điểm dừng rùi thì vào phần mục lục, bôi đến cụm từ cần tạo liên kết để nhảy đến điểm dừng đó. Ví dụ từ Chương 3, nhấn phím phải chuột chọn Hyperlink, hộp thoại Hyperlink hiện ra, bạn nhấn tiếp vào nút Bookmark, sẽ xuất hiên hộp thoại Select Place in Document. Click vào noi_dung_chuong_3 để chọn mục này. Nhấn OK để chấp nhận và đóng hộp thoại này. Sau đó nhấn OK trong hộp thoại Hyperlink để kết thúc. Thế là trong trang web của bạn, khi nhấn chuột vào dòng Chương 3 trong mục lục thì nó sẽ nhảy ngay đến phần nội dung chương 3, rất nhanh rùi đó! Những gì mình viết ở bài này chỉ là cơ bản và là những gì mình đã làm cho website của mình thôi, mình mong là sau khi đọc xong bài này các bạn sẽ thấy dễ hiểu và có thể tự tạo cho mình một website hoàn chỉnh. 6. Cách tạo liên kết bookmark (còn gọi là liên kết nội bộ) Khi bạn tạo một trang web có nội dung dài, lúc dó bạn cần phải tạo một bảng mục lục liên kết để liên kết đến một đoạn nào đó trong cùng một trang web thì bạn dùng bookmark. Cách làm như sau: Ví dụ Trong phần mục lục của bạn có Chương1, chương 2, Chương 3… và nội dung chương 3 nằm ở đâu đó trong trang web, bạn muốn nhấn vào chữ Chương 3 trong mục lục thì nó nhảy xuống ngay phần nội dung chương 3. bạn làm như sau : * Tạo Bookmark: Chọn (bôi đen) từ hoặc cụm từ tiêu đề (đây chính là tạo điểm dừng cho liên kết bookmark.Vào menu Insert, chọn Bookmark, một cửa sổ hiện ra: Trong hộp Bookmark, đặt tên cho đối tượng vừa chọn trong khung Bookmark name Click OK để tạo bookmark. * Tạo liên kết đến Bookmark: Sau khi tạo được điểm dừng rùi thì vào phần mục lục, bôi đến cụm từ cần tạo liên kết để nhảy đến điểm dừng đó. Ví dụ từ Chương 3, nhấn phím phải chuột chọn Hyperlink, hộp thoại Hyperlink hiện ra, bạn nhấn tiếp vào nút Bookmark, sẽ xuất hiên hộp thoại Select Place in Document. Click vào noi_dung_chuong_3 để chọn mục này. Nhấn OK để chấp nhận và đóng hộp thoại này. Sau đó nhấn OK trong hộp thoại Hyperlink để kết thúc. Thế là trong trang web của bạn, khi nhấn chuột vào dòng Chương 3 trong mục lục thì nó sẽ nhảy ngay đến phần nội dung chương 3, rất nhanh rùi đó! Những gì mình viết ở bài này chỉ là cơ bản và là những gì mình đã làm cho website của mình thôi, mình mong là sau khi đọc xong bài này các bạn sẽ thấy dễ hiểu và có thể tự tạo cho mình một website hoàn chỉnh. 7. vấn đề này dành cho những người mới bắt đầu học thiết kế ,còn nếu ai muốn chắc thể có thể học cao hơn thì nên học ngôn ngữ html từ những ngày đầu tiên hihi bài vêt này tớ dành cho tất cả các bạn chưa biết chút gì về HTML luôn đó . 8. Chúc các bạn thành công! . 1. Thiết kế website đơn giản bằng frontpage 2003. bài viết này ko đầy đủ như sách dc nhưng chứa những điều cơ bản để có một website hoàn chỉnh vì mình cũng thiết kế website của mình bằng frontpage. nhà sản xuất thiết kế. Theo tớ bạn nên chọn mẫu One page Web site – một trang web trống trơn – để bạn có thể thiết kế theo ý mình. Frontpage 2003 sẽ tạo cho bạn một cấu trúc thư mục web ban đầu. với khâu thiết kế website (là khâu cần thiết nhất của bạn và bạn có thể làm nó ở nhà với cái máy tình và phần mềm microsoft frontpage 2003 hoặc XP đều đc). Đầu tiên chúng ta cần có frontpage

Ngày đăng: 03/07/2014, 18:00

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan