intTypePromotion=1

Thiết kế Web ONE PAGE

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

0
98
lượt xem
20
download

Thiết kế Web ONE PAGE

Mô tả tài liệu
  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ủ đề:
Lưu

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

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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.1­nope  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
  13. 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
  14. 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 : WFDWY­XQXJF­RHRYG­BG7RQ­BBDHM 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
  15. Dowload Frontpage 2003 part 04 Pass giải nén : vietsitecom.net CDKey : WFDWY­XQXJF­RHRYG­BG7RQ­BBDHM 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://ash­v695.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
  16. http://ash­v242.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://mia­v144.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://mia­v83.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
ADSENSE
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2