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