Thiết kế Web ONE PAGE

Chia sẻ: Nguyen Van Chung | Ngày: | Loại File: DOC | Số trang:16

Thêm vào BST

Báo xấu

132
lượt xem 22
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Hướng dẫn các bạn tạo web cho một trang, trang này có hiện diện vài hình vài link để khi nhấp lên nó sẽ siêu liên kết đên trang web khác. Tài liệu tham khảo cho các bạn muốn học thiết kế web

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Thiết kế Web ONE PAGE

BÀI 1 NGÀY 12.11.2008 UTBINH SOẠN THEO KS NGUYỄNTRƯỜNGSINH Utbinh đã viết Giáo Trình FRONT PAGE 2003 nầy 2 lần rồi . Lần đầu trong lúc học Photoshop với Nguyên Nhã tháng 6 năm 2005 . Lần 2 , utbinh tự biên soạn Giáo Trình 45 bài Front Pages kể từ tháng 3.2006 . Từ đó đến nay đã hơn 2,5 năm utbinh đã tự tìm tòi , nghiên cứu rộng các bộ môn của Tin Học và đã viết được nhiều Bài Hướng dẫn Thiết Kế Web EXPRESSION WEB trong bộ Office 2007 . Tuy nhiên utbinh đã nhận được trên 100 thư của đọc giả xin Links của các bài viết Front Page 2003 . Có lẻ những bài viết nầy đọc dễ hiểu và dễ thực hành nên có nhiều bạn cùng tìm hiểu như utbinh vậy ? . Nhưng khi utbinh đọc lại thì thấy các bài viết còn thiếu sót rất nhiều , rất ngây ngô , không có bố cục mạch lạc , viết chưa đầy đủ hết các chức năng của Bộ Thiết Kế Web Front Page 2003 . Bài viết còn thiếu nhiều chi tiết chưa đề cập đến ( Do utbinh ít thời gian và do kiến thức còn hạn hẹp ) . Do đó utbinh đã bắt đầu tiến hành biên soạn Giáo Trình nầy lần thứ 3 ( Tháng 11.2008 ) không ngoài mục đích : Tự ôn lại , tự tìm hiểu thêm vì bắt gặp sách hay để tham khảo viết bài : THỰC HÀNH THIẾT KẾ TRANG WEB VỚI MICROSOFT FRONTPAGE của KS Nguyễn Trường Sinh . Cộng với quá trình tự học hỏi Tin Học trong 2,5 rưởi vừa qua có đôi chút tiến bộ , utbinh hy vọng rằng sẽ làm vừa lòng các bạn trẻ ham học hỏi , có chí cầu tiến sẽ lãnh hội được những gì utbinh muốn truyền đạt lại cho giới trẻ Việt Nam thân yêu của utbinh . utbinh vốn không tốt nghiệp bài bản trường lớp nào cả nhưng với lòng đam mê tin học , cái nào cũng muốn ôm vào lòng vì thấy cái nào cũng hay hết , tự học , cho nên chắc chắn các bài viết nầy sẽ có nhiều thiếu sót trầm trọng mong các bạn bổ sung cho . utbinh chỉ có 1 tấm lòng là muốn phục vụ cho các bạn trẻ có cơ hội học hỏi của người “ ÍT DỞ HƠN MÌNH “ mà thôi . Nói rõ nghĩa : Người DỞ viết cho người DỞ HƠN MÌNH đọc .( Thư cho utbinh : utbinhdesign@gmail.com ) Trong Giào Trình biên soạn kỳ nầy mỗi bài có 2 phần : Phần Lý Thuyết và Phần Thực Hành . Các bạn có thể bắt chước Phần Thực Hành để tự Thiết Kế Trang Web cho mình . 1
Bạn phải tạo 1 Folder Web , trong đó chứa các Folder và Files cần thiết của nội dung Trang Web . Điều quan trọng là bạn phải có 1 Host Server để chứa Folder Web nầy khi bạn Upload nó lên . Host Server có thể do bạn mua hoặc sử dụng Host Free . Trước đây utbinh dùng : www.freewebtown.com rất tốt , nay nó không cho IP Việt Nam xài free nửa . I.PHẦN LÝ THUYẾT Bài nầy hướng dẫn các bạn tạo Trang Web có duy nhất 1 Trang . Trong Trang nầy có hiện diện vài Hình – Vài Links để khi nhấp lên nó sẽ Siêu Liên Kết đến Trang Web khác Bạn tự gỏ nhập Text và Format chúng giống như sử dụng Word – Copy và Paste văn bản . Bạn tạo 1 Folder Web đặt tại Desktop . Trong Folder nầy có : 1 Folder ( Chứa Hình Ảnh ) và 1 Folder private ( Chứa các vấn đề riêng tư , ở đây là các văn bản cần phổ biến ) và 1 File : index.html . Bạn cần tìm 1 Host Free để Upload Folder Web nầy lên Host Server hoặc mua 1 Host . Sau khi Upload hoàn tất bạn lấy Link của File : index.html dán lên Thanh Địa Chỉ của Trình duyệt để hiện ra Trang Web Trang Chủ ( Home Page ) . 1. Mở Microsoft FrontPage 2003 > Nếu Ô Tác Vụ New không mở , bạn chọn File > New > Ô Tác Vụ New sẽ mở ra . 2. Nhấp Mục : More Web Site Templates > Hiện ra Bảng Web Site Templates , chọn biểu tượng : One Page Web site . (H1). 2
FrontPage (FP) cung cấp cho bạn 1 Folder chứa các Websites của bạn , có tên là My Web Sites . Folder nầy nằm trong Folder My Documents . Website của bạn tạo ra cần phải đặt tên cho nó và chọn vị trí cho nó . 3. Trong vùng Options , nhấp nút Browse > Bảng New Web Site Location xuất hiện > Trên thanh Places , nhấp Folder My Documents > Trong danh sách Files nhấp đúp Folder My Web Sites . (H2) . 4. Trên thanh công cụ của Bảng New Web Site Location , nhấp Nút Create New Folder > Bảng New Folder hiện ra , nhập : One Page trong hộp name > Ok . (H3). 5. Trong Bảng New Web Site Location , nhấp Open . 6. Trong Bảng Web Site Templates , nhấp Ok . (H4). 3
7. FP hiện ra cấu trúc của Website MỘT TRANG ( ONE PAGE ) mới được tạo ra . 8. Website One Page bao gòm : 1 File có tên : index.htm. • 1 Folder trống ( chưa có chứa dữ liệu ) có tên : _private. • 1 Folder trống ( chưa có chứa dữ liệu ) có tên : images.(H5). • 4
Tuy nhiên nếu quan sát Folder của Site trong Microsoft Windows Explorer , bạn sẽ thấy nhiều Files và Folders ( Một số bị ẩn ) hổ trợ cho trang nầy . Trong Folder List ( Cột Trái ) , nhấp đúp File : index.htm > Đã mở Chế độ hiển thị Page là 1 Khung nền trống , bạn sẽ tạo ra nội dung trên đó . II.PHẦN THỰC HÀNH I.CHUẨN BỊ : 1. ÌNH ẢNH : H Bạn chọn vài Hình Ảnh cần Insert vào Trang Web để minh họa cho đoạn văn bản hoặc bố trí tạo mỹ thuật cho Trang Web nầy . Những hình nầy nên có kích cở từ 200 X 300 pixels do đó dung lượng khoảng 40 – 60 KB mà thôi vì nếu quá lớn khi Upload và Download sẽ mất nhiều thời gian . Sau đó bạn Copy > Paste vào Folder images . Cách lấy Hình Quảng cáo FrontPage 2003 : Vào www.google.com.vn > Nhấp Hình ảnh > Nhập : FrontPage 2003 > Ra kết quả nhiều Hình , nhấp chọn 1 Hình > Nhấp Xem hình cở đầy đủ > Nhấp Phải lên Hình > Save As Images > Chọn lưu tại Desktop . 2. ĂN BẢN : V Bạn cần chọn vài văn bản tâm đắc > Copy > Paste vào Foldre _privates . Đúng ra thì Folder nầy chỉ chứa những tâm sự riêng tư của bạn , rồi insert vào Trang Web để Public cho bạn đọc nhưng bài viết nầy nêu nội dung Tin Học để làm ví dụ trong bài Thiết kế Web One Page ( Một Trang ) 3. LINKS LIÊN KẾT : Bạn tạo 1 File .doc tại Desktop chứa các Links liên kết tâm đắc muốn giới thiệu cho đọc giả thưởng thức . Khi đọc giả nhấp lên Links Siêu Liên Kết ( Hyperlink ) sẽ dẫn đến Trang Web cần đọc . Nội dung có thể là : Vài File Videos – Vài Files Nhạc MP3 – Vài Files Flash . II.THIẾT KẾ TRANG WEB ONE PAGE : Nhấp Đúp lên File : index.htm trong Cột Folder List > Hiện ra Trang trống là Vùng Làm Việc nơi bạn sẽ nhập nội dung thiết kế Trang Web One Page . 1. INSERT HÌNH : 5
Nhấp con trỏ nơi bạn chỉ định sẽ hiện ra Hình > Nhấp Nút : Insert Picture • From File > Hiện ra Bảng Picture > Chọn 1 Hình ( Những Hình nầy đã nằm trong Folder images mà bạn đã đưa vào ) > Insert > Đã hiện ra Hình vừa chọn trong Vùng Làm Việc . Bạn có thể Rê nút để bung lớn hay thu nhỏ Hình lại . (H6) . Nhấp Phải lên Hình nầy > Chọn Picture Properties > Ra Bảng Picture • Properties , chọn Left > Hình đã được đưa vào vị trí Left .(H7). 6
Bạn cũng có thể Rê Hình nầy đặt vào bất cứ vị trí nào bạn muốn bằng cách : • Nhấp Phải lên Hình > Chọn Show Picture ToolBar > Chọn Công Cụ Position Asolutely . Đây là Thanh Công cụ cho bạn Format lại Hình nầy . 2. INSERT TEXT : Bạn có thể tự nhập văn bản trong Vùng Làm Việc và Format lại chúng giống • như trong Word vậy .(H8) . Nhấp Folder _privates trong cột Folder List > • Hiện ra các bài Text mà bạn đã dán vào . (H9) . 7
Chọn 1 File .doc nầy ( Ghost ) > Ctrl+A chọn hết văn bản nầy > Ctrl+C để • Copy > Ctrl+V để Paste vào Vùng Làm Việc > Hiện ra văn bản với định dạng gốc > Bạn có thể Foramt lại văn bản nầy theo ý muốn , thao tác giống như trong Word vậy . (H10). 8
Chọn 1 File .doc nầy (TẠO DỈA CD và MP3) > Ctrl+A chọn hết văn bản nầy > • Ctrl+C để Copy > Ctrl+V để Paste vào Vùng Làm Việc > Hiện ra văn bản với định dạng gốc > Bạn có thể Foramt lại văn bản nầy theo ý muốn , thao tác giống như trong Word vậy . (H11). Chọn 1 File .doc nầy (FAVORITE WEBS) > Ctrl+A chọn hết văn bản nầy > • Ctrl+C để Copy > Ctrl+V để Paste vào Vùng Làm Việc > Hiện ra văn bản với định dạng gốc > Bạn có thể Foramt lại văn bản nầy theo ý muốn , thao tác giống như trong Word vậy . (H12). 9
3. SAVE : Mỗi khi thiết kế xong 1 phần , bạn nhớ Save lại để đề phòng cúp điện hay Delete nhầm bằng cách nhấp Nút Save trên thanh Công Cụ hay Phím Ctrl+S . 4. ỰC HIỆN HÌNH VÀ TEXT TIẾP THEO : TH 10
Bạn áp dụng các bước giống trên khi Insert Hình và Text tiếp theo và nhớ Save lại khi xong 1 phần . 5. ÁCH LẤY LINKS VIDEO CLIPS CHO TUTORIALS FRONTPAGE 2003 : C Vào : www.google.com.vn > Nhập : you tube > Nhấp lên Trang Web đầu tiên • > Ra Trang YOU TUBE , nhập : FrontPage 2003 > Enter > Hiện ra các Video Clips với chủ đề nầy > Nhấp lên 1 Video Clips > Hiện ra Khung Preview đang Play . Nhấp Phải bên ngoài Khung Preview > Chọn Download FLV video with • requested FLV video > Ra bảng Download File Info > Bạn lấy Link trong hàng URL và dán vào : www.tinyurl.com đề lấy Link rýt ngắn . (H13). 11
Như vậy là bạn đã thiết kế xong Trang Web One Page ( Một Trang ) với các nội dung đơn giàn .  Tất cả Hình Ảnh cần Insert vào bạn nên đặt trong Folder images.  Tất cả Văn bản cần Insert vào bạn nên đặt trong Folder _privates. Trong bài viết nầy đã hướng dẫn các bạn cách :  Copy > Paste các đoạn Văn Bản vào Vùng Làm Việc và Format lại .  Insert Hình vào và chỉ định vị trí chèn hình .  Insert Văn Bản và Format lại theo ý mình .  Nhập các đoạn Văn Bản bằng cách gỏ phím .  Trong Văn Bản có sẵn Links Siêu Liên Kết ( Hyperlinks ) để đọc giả nhấp lên sẽ đến Trang Web khác thể hiện nội dung muốn đọc .  Cách lấy Links Các Tutorials FP trong YOU TUBE .  Save : Mỗi khi xong 1 Phần bạn nhớ save lại đề phòng cúp điện hay nhấp lầm Phím Delete bằng cách nhấp Nút Save hay dùng Ctrl+S . III.XUẤT BẢN TRANG WEB LÊN HOST SERVER Khi bạn đã thiết kế xong Trang Web ONE PAGE , bạn cần Upload nó lên Host Server để lấy Links của Trang Web nầy . Bạn dán nó lên Thanh Asddress của Trình Duyệt ( Browse ) để nó hiện ra nội dung hoặc gởi Link nầy đến bạn hữu xem . Muốn làm được điều nầy bạn phải trải qua 2 công đoạn : 1. Bạn phải đăng ký tạo 1 Account Free hay mua . utbinh sẽ giới thiệu cho các bạn và hướng dẫn Download , cài đặt và sử dụng 1 Host Server Free để bạn thực tập tạo Trang Web One Page nầy . Đó là : www.110mb.com .(Xem bài sau ) . 2. Upload Trang Web lên Host bằng giao thức FTP . Bạn Download phần mềm : cuteftp.pro.v8.3.2.build.09.02.2008.1nope về cài đặt và sử dụng để upload. Utbinh sẽ hướng dẫn Download , cài đặt và sử dụng Software nầy .(Xem bài sau ) . 12
3. ị trí đã lưu Folder One Page : Theo mặc định của FrontPage , bạn đã lưu theo V đường dẫn sau đây : My Documents\My Web Sites \ One Page . Trong Folder One Page , b ạn có : 1 File index.htm. 1 Folder images. 1 Folder _privates.(H14). 4. Khi bạn nhấp lên File : index.htm sẽ hiện ra nội dung Trang Web One Page nầy Các nội dung nầy hiện nằm trong Ổ Cứng của Bạn ( Local Site ) 5. Theo ý kiến của utbinh , để tiện việc trực quan theo dỏi bạn nên Copy > Paste Folder One Page ( Folder Web ) đặt tại Desktop > Rename nó đặt tên : site121108 ( Ngày thiết kế trang Web nầy ) . PHƯƠNG PHÁP TỰ HỌC : VÔ : WWW.GOOGLE.COM.VN , NHẬP : FRONTPAGE 2003 > CHỌN NHỮNG TRANG WEB TIẾNG VIỆT > ENTER . RA KẾT QUẢ : khoang 107.000 Tiếng Việt trang cho FRONTPAGE 2003. (0,14 ̉ giây) . BẠN VÀO NHỮNG TRANG WEB NẦY ĐỌC VÀ DOWNLOAD VỀ TỰ HỌC . Microsoft Frontpage 2003 13
Tuesday, 9. September 2008, 08:33:33 Download FrontPages 2003 Link Direct http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part1.rar http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part2.rar http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part3.rar http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part4.rar Dowload Frontpage 2003 part 04 Pass giải nén : vietsitecom.net CDKey : WFDWYXQXJFRHRYGBG7RQBBDHM NGÀY 12.11.2008 : 1.THIẾT KẾ WEB FRONTPAGE 2003 : ONE PAGE . [img]http://utbinh.com/ANOV08/121108/FP111108.jpg[/img] http://utbinh.com/ANOV08/121108/FP111108.jpg Mời các bạn xem kết quả thực tập Trang Web One Page : http://utbinh.com/ANOV08/121108/site121108/index.htm http://kimtrang.110mb.com/site121108/index.htm Download SOFTWARE : FrontPages 2003 Link Direct http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part1.rar http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part2.rar http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part3.rar http://data.vietsitecom.net/files/Soft/Office/FRONTPAGE2K3/FrontPage2k3.part4.rar 14
Dowload Frontpage 2003 part 04 Pass giải nén : vietsitecom.net CDKey : WFDWYXQXJFRHRYGBG7RQBBDHM http://utbinh.com/ANOV08/121108/FP111108.doc http://utbinh.com/ANOV08/121108/FP111108.pdf DOC 1.27 MB – PDF 1.22 MB – JPG 1.44 MB . 10 Bài Thiết kế Web FRONTPAGE 2003 utbinh soạn năm 2006 : http://utbinh.com/ANOV08/121108/Bai1FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai2FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai3FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai4FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai5FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai6FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai7FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai8FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai9FRONTPAGE2003.doc http://utbinh.com/ANOV08/121108/Bai10FRONTPAGE2003.doc Files DOC thực tập tạo Web One Page : Tạo Ghost 102 KB : http://utbinh.com/ANOV08/121108/GHOST.doc Ghi Dỉa CD và MP3 , 91 KB : http://utbinh.com/ANOV08/121108/GHI_DIA_CD.doc Favorite Webs 55 KB : http://utbinh.com/ANOV08/121108/FAVORITE_WEBS.doc Files JPG thực tập : http://utbinh.com/ANOV08/121108/1.jpg http://utbinh.com/ANOV08/121108/2.jpg http://utbinh.com/ANOV08/121108/3.jpg Tài liệu đọc thêm Thiết Kế Web FrontPage 2003 , 262 KB : http://utbinh.com/ANOV08/121108/DOCTHEM_FP.doc Softwares mới nhất ngày 11.11.2008 , 13.95 MB : http://utbinh.com/ANOV08/121108/SOFTWARES111108.doc Links Video Tutorials FrontPage 2003 : How To Use Frontpage 2003 : http://tinyurl.com/6z9o3n http://ashv695.ash.youtube.com/get_video? video_id=Vp5jhtW49qE&ip=58.186.196.172&signature=215674DFB72FD6A8AB6325F2 EAF78B498A63C6B2.921B294388601782B6600D54A18DCCF967BD6150&sver=2&expi re=1226488058&key=yt4&ipbits=2 Ms FrontPage 2003 Tutorial : http://tinyurl.com/5w23fq 15
http://ashv242.ash.youtube.com/get_video? video_id=9ROVWyexN5g&ip=58.186.196.172&signature=30840BCF4E231EA9352E9CB 137C4A1C76D556C12.79AED8F6BE609EA3238EA6D75F3AE1E2C5BE77C1&sver=2&e xpire=1226488103&key=yt4&ipbits=2 How to create your own web site Pt.1 : http://tinyurl.com/6gz9ek http://208.117.253.99/get_video?origin=mia v94.mia.youtube.com&video_id=fu8Prjh2j3A&ip=58.186.196.172&signature=0A8F0D63 7E0D6CC1573F54B47305345460DDE5E6.9A1F985D1FE9D3E9021891AE3AA7632FD14 68941&sver=2&expire=1226488708&key=yt4&ipbits=2&redirect_counter=1 How to create your own web site Pt.2 : http://tinyurl.com/63bee3 http://miav144.mia.youtube.com/get_video?video_id=v 8eMBuL0A8&ip=58.186.196.172&signature=E046DE51C95B4E17395728C219782C139B B98B7C.5C2700177C344C92A001332D29F8A8D5B6459C&sver=2&expire=1226488183 &key=yt4&ipbits=2 How to Upload Your Website to a Web Host : http://tinyurl.com/5mtrlb http://miav83.mia.youtube.com/get_video? video_id=t_qVIxVCAsY&ip=58.186.196.172&signature=98A159F1FE9522F48912F91E57A7 CD50386798BE.95328B9ED34F653A712A63EC32544147880DE9D4&sver=2&expire=12264 88217&key=yt4&ipbits=2 16