Thiết kế web bằng frontpage 2003

Hướng dẫn thiết kế website bằng frontpage 2003 cho những ai chưa biết về lập trình ngôn ngữ

1

THIẾT KẾ WEB

one page frontpage 2003

BÀI 44 NGÀY 9.10.2010 ÚT BỈNH SOẠN

1 Download Chương Trình FRONTPAGE 2003: Download Chương Trình FrontPage 2003, cài

đặt dễ dàng, đã chèn thuốc vào sẵn, dung lượng 175,32 MB tại:http://goo.gl/pgFO

2 Download File thực tập: File.doc có tên GHOST, dung lượng 588 KB, download tại:

http://goo.gl/AOpm Sau khi Download xong File thực tập này bạn đặt tại Desktop

3 Chọn Thiết Kế Web MỘT TRANG: Nhấp Shortcut FrontPage 2003 tại Desktop > Hiện ra giao

diện chương trình, nhấp Menu File > Nhấp New > Qua Phải trong cột New, trong Mục New Web site nhấp chọn One page Web site (Thiết Kế Web có 1 Trang) > Hiện ra Bảng Web Site Templates, nhấp One page Web Site > Nhấp OK > Hiện ra giao diện của One Page Web Site

4 Folder List – Index.htm và Nút Design: Nếu chưa hiện ra Cột Folder List, bạn vào menu View,

chọn Folder List hoặc nhấp phím Alt+F1, cột Folder List sẽ hiện ra để bạn tiện quản lý Files > Nhấp Index.htm > Khung Thiết Kế hiện ra bên Phải trống hoàn toàn đồng thời phía trên có Tab Index.htm và ở dười đang có nút Design màu vàng để bạn sẵn sàng thiết kế

2

5 Tab Web Site: Bạn nhấp Tab Web Site, hiện ra nội dung của nó gồm: 2 Folder _private – Images

và Trang Chính là: index.htm Khi bạn vào bất cứ một trang Web nào Trang đầu tiên sẽ mở là Trang này Trang này còn gọi là Trang Chủ (Home Page) Vì bạn chọn Thiết kế Web có 1 Trang thôi nên chì có 2 Folder này và 1 Trang Chính Sau này bạn cò thể bổ sung thêm nhiều Trang vào Trang Web này > Nhấp Tab index.htm để mở lại Trang Chủ

6 Tắt chức năng tự động kiểm tra chính tả và kiểm tra ngữ pháp của các chương trình trong bộ Office: Bạn thấy có những vạch đỏ dưới các ký tự làm bạn khó chịu, bạn

có thể tắt các vạch đỏ đó bằng cách vào: Menu Tools > Pages Options > Tab General >

Bỏ Hide Spelling errors và bỏ Check spelling as you type.(Xem: http://goo.gl/A4AC )

7 Tạo Bố Cục Trang: Nhấp Nút Insert Table > Chọn 2 by 2 Table > Trong Khung Thiết kế hiện ra 2

Ô trên và 2 Ô dưới > Rê nới rộng 2 Ô dưới và Merge 2 Ô trên lại để tạo Banner dán ở đây > Thu hẹp Ô trên để làm Tựa Trang Web và thu hẹp Ô bên Trái để làm Cột chứa các Links Liên kết

8 Table AutoFormat: Để định dạng nhanh 1 Bảng từ các Bảng có sẵn với nhiều định dạng khác

nhau gọi là Auto Format Tính năng này giúp các bạn thiết kế Trang Web nhanh chóng hơn và

3

đẹp mắt hơn Bạn thực hiện như sau: Đặt con trỏ vào 1 bảng cần Auto Table > Vào Menu Table > cHJỌN Table AutoFormat > Hiện ra HT Table AutoFormat, tùy theo chủ đề thiết kế bạn chọn 1 Kiểu trong Khung Formats > Hiện ra nội dung tương ứng trong Khung Prview > Nhấp Nút OK

9 Copy-Paste và xem văn bản: Copy File GHOST tại Desktop và Paste vào Khung Thiết kế >

Nhấp Phải Tab index.htm > Chọn Save > Nhấp Phím F12 để xem bằng Trình Duyệt Bạn xem như thế nào sau này đưa lên Trình Duyệt Internet Explorer sẽ hiện ra như vậy > Close

CHÚ Ý: Nếu bạn xem trong Trình Duyệt FireFox có thể bị sai lệch văn bản và Hình Minh Họa nhưng nếu xem bằng IE thì sẽ hoàn toàn không sai lệch vị trí

10 Tạo Trang thứ 2: Nhấp Nút New Page trong Cột Folder List để tạo Trang Thứ 2 > Hiện ra File

new_page_1.htm trong Folder List > Nhấp đúp lên File này > Hiện ra Trang trống và Tab new_page_1.htm để bạn bắt đầu nhập liệu Để định dạng nhanh và cho các Trang sắp tạo đều

có cấu hình đồng bộ với Trang index,htm, bạn thực hiện như sau:

Copy Trang index.htm > Dán vào Trang thứ 2 là new_page_1.htm > Xóa nội dung Dán nội dung mới vào Trang này > Chỉnh lại văn bản và Hình Minh Họa vào đúng vị trí nếu có lệch vị trí

Nhấp Phải Tab new_page_1.htm > Chọn Save > Nhấp Phím F12.> Close > Đóng Chương Trình lại

Mở lại Chương trình > Menu File > Open Site > Nhấp đúp lên mysite1 để nó hiện ra trong Look in > Nhấp Nút Open

4

10.Tạo Trang thứ 2: Nhấp Nút New Page trong Cột Folder List để tạo Trang Thứ 3 > Hiện ra

File new_page_2.htm trong Folder List > Nhấp đúp lên File này > Hiện ra Trang trống và Tab new_page_2.htm để bạn bắt đầu nhập liệu Để định dạng nhanh và cho các Trang sắp tạo đều có cấu hình đồng bộ với Trang index,htm, bạn thực hiện như sau:

Copy Trang index.htm > Dán vào Trang thứ 2 là new_page_2.htm > Xóa nội dung Dán nội dung mới vào Trang này > Chỉnh lại văn bản và Hình Minh Họa vào đúng

vị trí nếu có lệch vị trí

Nhấp Phải Tab new_page_2.htm > Chọn Save > Nhấp Phím F12.> Close > Đóng Chương Trình lại

11 My Web Sites: FrontPage 2003 tạo Folder Web lưu mặc định tại My Documents\ My Web

Sites và tự động đặt tên là mysite1, nhấp lên Folder này > Hiện ra 3 Trang mà bạn vừa thiết

kế xong, đó là : index.htm – new_page_1.htm và new_pasge_2.htm cùng 3 Folder khác chứa Hình ảnh cho từng Trang và 1 Folder _private > Bạn có thể nhấp lên từng File để xem nội dung Nội dung Trang Web hiển thị đúng nhất là xem trong Trình Duyệt Ievì cùng một Hảng Microsoft

12 THIẾT KẾ BANNER: Banner là mặt tiền của Trang Web nên rất quan trọng Nó thu hút

Người Xem vào đây để xem hết Trang web của bạn Nếu không đẹp khiến họ nản và bỏ

đi Bạn có thể xem các hướng dẫn rất chi tiết gồm nhiều bài viết của Út Bỉnh về chủ đề Thiết Kế Banner tại: http://goo.gl/ZztT

Xem kích thước Banner hiện có: Nhấp Phải lên Khung Banner > Chọn Tab Properties, bạn đã thấy kích cở là 100X522 pixels Bạn mở Photoshop > Ctrl+N, chọn 522 X 100

Sau khi thiết kế xong và lưu tại Desktop, bạn mở Trang index.htm > Nhấp con trỏ tại Khung Banner > Chọn Menu Insert > Chọn Picture > From File > Đến Desktop và nhấp lên Banner > Nhấp Nút Insert > Banner đã hiện ra trong Khung > Bạn rê chỉnh lại > Nhấp Phím F12 > Hiện ra Bảng Save Embedded Files để xác nhận lưu trong Folder imges > Nhấp OK

5

Bạn chèn banner cho các Trang Web còn lại theo các bước hướng dẫn trên

13 THIẾT KẾ CỘT LINKS LIÊN KẾT ;

Bạn chỉ cần thiết kế Cột Links Liên Kết này tại Trang index.htm, sau đó tạo liên kết cho từng Link

> Sau khi hoàn tất bạn Copy Cột này dán vào 2 Trang còn lại > Nhấp thử từng liên kết của từng Trang để kiềm tra tính Liên kết Siêu văn bản Hyperlink

Tạo Table để nhập văn bản Links liên kết: Khi bạn nhấp con trỏ vào Cột Trái, nó chỉ

nằm lưng chừng ở giữa mà không nằm được trên đỉnh cột mặc dù bạn nhấp Phím Mủi Tên chỉ Lên Muốn tạo Table tại đỉnh cột này bạn phỉa tạo 1 Lớp LAYER trước, sau đó tạo Table nằm trong Lớp Layer này Nhấp Nút Insert Layer tạo 1 Lớp Layer tại Đỉnh Cột Liên Kết > Nhấp Nút Table tạo 3 Hàng và nhập văn bản vào sau đó định dạng lại chúng

Tạo Liên Kết cho TRANG CHỦ: Bôi đen TRANG CHỦ > Nhấp Phải lên > Chọn

Hyperlink

Ra Bảng Insert Hyperlink, nhấp index > Nhấp nút Ok

6

Tạo Liên Kết cho TRANG1: Bôi đen TRANG 1 > Nhấp Phải > Chọn Hyperlink > Ra

Bảng Insert Hyperlink > Nhấp new_page_1.htm > Nhấp Nút OK

Tạo Liên Kết cho TRANG 2: Bôi đen TRANG 2 > Nhấp Phải > Chọn Hyperlink > Ra

Bảng Insert Hyperlink > Nhấp new_page_1.htm > Nhấp Nút OK

Copy Liên kết vừa tạo dán lên 2 Trang Web còn lại > Nhấp lên liên kết của từng Trang

để kiểm tra tính Liên kết

7

14 TẠO CÁC LIÊN KẾT:

Bạn có thể tạo các liên kết đến với những Trang Web khác ở ngoài Website của bạn Khi bạn nhấp lên liên kết này nó sẽ hiển thị trên trang Web của người khác Bạn tạo vùng chứa liên kết dưới Banner

Cách tạo như sau:

Rê di chuyển Trang index xuống để tạo khoảng trống, sau đó dùng công cụ Insert Layer tạo vùng chọn và dùng Insert Table tạo các Ô chứa liên kết

Nhập văn bản vào > Tạo liên kết: Bôi đen văn bản vừa nhập > Nhấp Phải > Chọn Hyperlink > Ra Bảng Insert Hyperlink, hàng Address nhập Link liên kết vào > Nhấp nút OK

Nhấp Phím F12 để xem kết quả trên Trình Duyệt Nhấp lên liên kết vừa tạo, hiện ra nội dung Trang Web

15 ĐỊNH DẠNG LẠI TRANG WEB:

Bạn có thể định dạng lại Trang Web bằng cách: Ctrl+A để chọn cả Trang Web > Chọn cở chữ 2 (10pt) và các Tiêu Đề chọn cở chữ to hơn Nếu có vài hình minh họa nằm không đúng vị trí bạn

có thể chỉnh lại Cách xem tốt nhất và chính xác nhất là trên Trình Duytệ IE

8

16 XUẤT BẢN TRANG WEB

Sau khi thiết kế hoàn tất 1 Website, bạn có thể xuất bản nó và giới thiệu Link cho người xem hoặc họ có thể thấy được Trang Web của bạn trên các Trình Duyệt Search Cách tốt nhất để mọi người thấy được các tác phẩm của bạn là Post các bài viết – các Trang Web của bạn lên các Forums Bộ máy tìm kiếm nhất là Google sẽ kiệt kê trong danh sách kết quả tìm được khi họ nhập từ khóa vào

Hosting mà bạn sử dụng đưa Trang Web vào có thể là Host Free hoặc Host mua Bạn nào tập tành thiết kế Web nên bắt đầu bằng Ngôn ngữ Thiết Kế Web HTML sau đó đến FrontPage 2003

và Dreamweaver 8 Đó là kinh nghiệm của Út Bỉnh thu lượm được trong lúc tự học thiết kế Web Host Free otố nhất hiện nay có đủ điều kiện theo đòi hỏi của bạn đó là: BYETHOST ( Xem:http://goo.gl/qfzL) và Chương trình dùng Upload Trang Web lên HOST là CUTE FTP ( Xem:http://goo.gl/3X6J)

Như vậy, muốn cho Trang Web của bạn hiện diện trên Mạng bạn phải qua 2 giai đoạn: Dúng Chương Trình Tải Trang Web lên Mạng là Cute FTP (Xem chi tiết hướng dẫn thực hành tại http://goo.gl/3X6J) và dùng Host Free là BYETHOST(Xem chi tiết hướng dẫn thực hành tại http://goo.gl/qfzL)

Bạn copy Folder Website tên mysite1 trong My Documents\ My Web Sites đặt lên Desktop, đặt lại tên là: site04092010 sau đó vào Cute FTP để rê Folder này qua Phải là khu vực của Host Free ByetHost

Sau khi upload thành công bạn có Link của Trang Web là:

http://utbinh.byethost4.com/site04092010/index.htm

17 ĐỒNG BỘ TRANG WEB (SYNCHRONIZE WEBSITE):

Khi bạn sửa đổi bổ sung nội dung của mỗi Trang hay tạo một Trang mới, sau khi Save xong Trang Web khi upload lên Hosting bạn mở Chương trình Cute FTP > Nhấp site trong Desktop cho hiện ra các chi tiết trong Folder Website này và bên khu vực Hosting bạn cũng mở Folder Website để hiện ra các chi tiết > Rê toàn bộ các Files bên Khung Trái qua Khung Phải > Chờ Uploading hoàn tất và sẽ nhận các dấu hiệu hoàn tất 100% như lần trước

Và khi hoàn tất sẽ có dạng như sau:

9

LINKS THÁNG 8 NĂM 2010 (12.8.2010 )

http://www.mediafire.com/?n8idv3bqdbocu2f

ÚT BỈNH cái gì cũng có trong này: http://goo.gl/zRmk

CÁC BÀI VIẾT CỦA UTBINH TỪ FEBRUARY 2008 ĐẾN AUGUST 2010 TRONG

http://utbinh1947.spaces.live.com/

FRONTPAGE2003.rar (175.23 MB):

http://www.mediafire.com/?53gyngsn4ih14tv

Trang Web hướng dẫn Thiết Kế Web One Page trong FrontPage 2003:

http://utbinh.byethost4.com/site04092010/index.htm

Trang Web hướng dẫn Thiết Kế Web Đường Biên Dùng Chung trong FrontPage 2003:

http://utbinhdesign.byethost16.com/site05102010/index.htm

Trang Lượm Lặt: http://goo.gl/Au9I , http://www.chanphuocliem.com/ Xem Phin Online miễn phí:

http://music.vietfun.com/view.php?cat=4&ID=3778

Hướng dẫn học Thiết kế WEB: http://www.w3schools.com/default.asp

Phim Truyện: http://dalanphim.com/phimtruyen.html

Thiết Kế WEB FrontPage 2003 Kiểu Đường Biên Dùng Chung (4,19 MB):

http://goo.gl/H7We

hƯỚNG DẪN TẠO FORM VÀ THIẾT KẾ WEB ĐƯỜNG BIÊN DÙNG CHUNG TRONG FRONTPAGE 2003

http://utbinhdesign.byethost16.com/site09102010/index.htm

Video Clips hướng dẫn UPLOAD TRANG WEB LÊN HOSTING FREE:

http://www.youtube.com/watch?v=otQTT_qe4Uo