Docstoc

IzCode.Net - Free Ebooks - 5Web-Mau-CSS

Document Sample
IzCode.Net - Free Ebooks - 5Web-Mau-CSS Powered By Docstoc
					                                BÀI 25 NGÀY 17.09.2007 JACKIE
                                ĐÔ HƯỚNG DẪN

BÀI NẦY HƯỚNG DẪN CÁC BẠN TẠO 1 TRANG WEB HOÀN CHỈNH THEO
MẪU CSS MÀ TRONG CHƯƠNG TRÌNH DREAMWEARVER 8 GIỚI THIỆU .
TRONG CỘT GIỮA CỦA TRANG KHỞI ĐỘNG CREATE NEW CHO PHÉP CÁC
BẠN TẠO NHIỀU TRANG WEB BẰNG CHƯONG TRÌNH HTML , COLD
FUSION HAY PHP . NHẤP VÀO CSS TẠO RA BẢNG KỂU CSS MỚI . CÁC
LỰA CHỌN KHÁC CÒN LẠI TẠO WEB BẰNG NGÔN NGỮ LẬP TRÌNH
THƯỜNG DÙNG TRONG CHẾ ĐỘ CODE. WEB CÓ NHIỀU LIÊN KẾT TỪ
TRANG NẦY ĐẾN TRANG KHÁC , TỪ TRONG MÁY CỤC BỘ CỦA BẠN RA
PHẠM VI CÁC TRANG WEB VIỆT NAM VÀ CẢ TRÊN KHẮP THẾ GIỚI LIÊN
KẾT TỪ TRANG CHA ĐẾN TRANG CON , TRANG CHÁU , LIÊN KẾT NHIỀU
CÁCH . CHÈN HÌNH ẢNH , ÂM THANH , VIDEO CLIP VÀO CHO THÊM SINH
ĐỘNG NẾU BẠN HOÀN CHỈNH TRANG WEB CSS THEO MẪU NẦY THÌ TẠM
ĐẦY ĐỦ YÊU CẦU THIẾT KẾ TRANG WEB . CÒN RẤT NHIỀU KIỂU BẢNG
CSS KHÁC .

  I.ĐĂNG KÝ TẠO TRANG CHỦ : WEB

  1. Vô Host mua của bạn > Nhấp Folder : public_html > Tạo 1 Folder
     tên : web . Đây là thư Mục Chủ chứa toàn bộ nội dung của Trang
     Web mà bạn sắp tạo . Thư mục gốc là : public_html có sẵn trong
     Host mua của bạn.
  2. Nhấp Shorcut của Chương Trình > Cột giữa Craete New , chọn :
     Dreamweaver Site > Ra bảng Editing Files , nhập : web và nhập ô
     dưới : http://utbinh.com > Next .
  3. Ra Bảng Editing Files , Part 2 > Next.
  4. Ra Bảng Editing Files , Part 2 > Next.
  5. Ra Bảng Sharing Files :
       • How do you connect to your remote server > Chọn : FTP .
       • What is the hostname or FTP address of your Web Server?
           Nhập : ftp.utbinh.com ( Nếu xài Hostfree nhập :
           ftp.freewebtown.com ).Tên máy chủ hoặc địa chỉ FTP của
           máy chủ Web là gì ? Tên máy chủ có thể giống như
           :www.domain.com hoặc ftp.domain.com .Nhập tên đó vào
           một trình duyệt web mà không có http:// . Nó phải bắt đầu
           với www hoặc ftp và không đơn giản chỉ là tên miền , chẳng
           hạn như domain.com . tên nầy nên chứa đường dẫn hoặc
           dấu gạch chéo , ví dụ : www.negrino.com/books/.Các bạn

                                                                   1
    cũng có thể nhập địa chỉ IP bằng số vào trường nầy , ví dụ :
    66.39.104.128.
•   What folder on the server do you want to store your files
    in ? .Câu hỏi nầy rất quan trọng , nếu các bạn không chú ý
    và thực hiện nhập không đúng sẽ không connect với Server
    được khi Test.Các bạn phải tạo trước 1 Filder trên Server
    ( Ví dụ : Trước đó utbinh đã tạo 1 Folder trong HostServer
    utbinh.com có tên : Site_1 và trong HostFree freewebtown
    có 1 Folder tên : Site_2 ).
    Do đó utbinh đã nhập trong trường nầy : public_html/Site_1
    .
    Trước khi nhập các giá trị vào bảng tạo Site Cục Bộ ( BASIC )
    Bạn đã tạo 1 Folder trên Host mà bạn sắp sử dụng .Folder
    nầy được gọi là Folder Chủ và thường là đường dẫn từ
    Folder FTP đến Folder Gốc trong Ổ cứng của bạn .
    Tùy thuộc vào Công Ty ký gởi Web , đường dẩn nầy có thể
    được đặt tên theo nhiều phần khác nhau . ( Khi bạn mở Host
    sẽ thấy có sẵn 1 số Folder và Files đã được tạo sẵn trong
    Host nầy ).
    Những Folder đường dẫn đăng ký điển hình là : htdocs ,
    public_html hoặc www/public/docs/. Nếu không chắc chắn
    tên Folder chủ , hãy kiểm tra với Hostserver mà bạn đã
    đăng ký..Đôi khi máy chủ FTP sẽ tự động kết nối đúng
    đường dẫn và chúng ta có thể giữ nguyên trướng nầy.
•   What is your FTP login ? : utbinhco ( username của
    utbinh.com ).
       ( Freewebtown là utbinh61 ).
•   What is your FTP Password ? : 00000000.
•   Nhấp Ô Save .Nên nhấp Hộp kiểm nầy .
•   Nhấp Thẻ TEST CONNECTION > Dreamweaver thông báo kết
    nối đầy                                               đủ   >
    Ok     >                                              Next >
    Next >                                                Done .
    (H1).




                                                               2
II.TẠO TRANG WEB THEO MẪU VÀ TẠO FILE : index.html

  1. Nhấp Shortcut Chương Trình > Trong BĐK Files , nhấp Phải Site-
     web > New File > Nhập : index.html > Enter .
  2. Ctrl+N > Cột category , chọn : Page Designs(CSS) > Cột Page
     Designs (CSS) , chọn : Halo Right NAV > Ô Preview đã hiện ra
     mẫu nầy > Create.
  3. Ra bảng Save As , mặc định sẽ nằm trong Folder Thư mục chủ :
     web mà bạn đã tạo > File name nhập : index.html > Save > Yes.
  4. Ra Bảng Copy Dependent Files liệt kê các Files có trong Mẫu ,
     được lưu theo đường dẫn : C/Documents and Settings/utbinh/web/
     > Copy . (H2).




     Các Files đã                                      hiện      ra
  Trong Khu Vực                                        hiển     thị
  Files của BĐK                                        Files.
  5. Nhấp Phím                                         F12 để xem
     giao    diện                                      mẫu    trên
     Internet.                                         (H3).




                                                                 3
III.HIỆU CHỈNH TRANG WEB MẪU THEO Ý CỦA BẠN :

  1. Nên tập Save thường xuyên để đề phòng cúp điện hay bị máy
     treo . File > Save As > File Name : indext.html > Save . Khi mở lại
     Trang nầy , nhấp : index.html ở BĐK Files.
  2. Nếu nhập sai , trở lại bước trước đó : Nhấp Ctrl+Z nhiều lần .
  3. Title nhập : Hieu Chinh Trang Web Mau ( Khong co dau ).
  4. Site name : Bôi đen chữ nầy , nhập : Hiệu Chỉnh Trang Web Mẫu .
  5. Góc Phải trên là 3 Liên Kết Utility Link dùng nhấp lên ra Trang
     Web Quảng Cáo .Tạm thời giới thiệu Link đến Trang Web 1 – Web
     2 – Web 3 của utbinh vừa tạo .
        • Bôi đen Utility Link > Nhấp Phải lên > Chọn Change Link >
           Ra Bảng Select File > Hàng URL nhập Link cần liên kết > Ok
           . (H4).




       •   Tiếp tục nhập 2 Link còn lại , thao tác giống trên.


                                                                      4
     •  Phím F12 > Yes > Hiện ra Trang Web trên Mạng > Nhấp lên
        3 Links vừa tạo để kiểm tra xem có liên kết đến các Trang
        Web khác không
     • Nhấp Thẻ Code trên Thanh Công Cụ để xem Code – Nhấp
        Thẻ Split xem 2 dạng : Code và Design – Nhấp Thẻ Design
        để xem Trang Design.
6. Các Global Link là nơi liên kết các Trang Web mà sau đó bạn sẽ
   tạo ra . Ví Dụ : Page 1 – Page 2 – Page 3 . Khi nhấp vào Page 1 để
   xem liên kết Trang Web nầy đồng thời hiện ra 3 Liên kết con ở
   hàng Breadcrumd dưới . Web là 1 hình thức liên kết từ Trang Web
   Cha ra con , ra cháu , kết nối nhau nhiều tầng . Không có Liên kết




  thì không phải là Trang Web nửa (H5).




     •  Trước mắt bạn chưa tạo các Pages , tạm thời giới thiệu các
        Trang Web theo ý bạn thích . Bôi đen Global Link > Nhập :
        Link 9.2007 > Nhấp Phải lên > Change Link > Dán Link vào
        URL > Ok . Tạo Links cho 5 Global Link còn lại .
      • Sử dụng nút Anchor : Trước các Link có nút Anchor ( Mỏ
        Neo ) , mục đích tránh xê dịch khi xem bằng nhiều Trình
        Duyệt khác nhau . Tạo các Anchor : Nhấp tại Vị Trí muốn đặt
        Anchor > Nhấp Mỏ Neo
        ( Named Anchor ) > Ok.
7. Các Liên Kết Breadcrumb : Là Link con của Link Global .
8. Page name : Đây là nơi sẽ liên kết nhanh với các Công Cụ Tìm
   kiếm trên Web . Bạn cần nhập Code để được nhận ra . Rename
   đặt tên : utbinhdesign > Nhần Nút Insert DIV Tag > Insert chọn :
   Wrap around Selection > Class chọn : Style 1 vì chữ utbinhdesign
   đang chọn Style 1 > ID nhập : Breadcrumb > Ok (H6) .




                                                                   5
   Ra Bảng Macromedia Dreamweaver hỏi xác nhận > Ok . (H6a) .
9. Selection Link : Đây là nơi chứa các Links có liên quan đến Trang
   Web nầy Tạm thời bạn có thể Copy 1 Cột Trái của ( Quản Trị mạng
   chẳng hạn ) và dán vào đây .
10.Logo : Góc Phải trên là nơi đặt Hình Logo : Nút Images > Tìm Ảnh
   dán vào > Rê chỉnh vừa vị trí .
11.Nhập Hình vào Khung Xám 280X200 : Nhấp lên Khung nầy > Nút
Images > Tìm đến Hình cần thiết > Ok .
12.Tựa Đen và văn bản ở dưới : Chứa nội dung giới thiệu Trang Web
nầy . Tạm thời bạn chèn văn bản khác vào > Copy 1 văn bản > Edite
> Paste Special > Chọn : Text with structure plus full formatting
( Để giữ nguyên định dạng ) .
13.Tựa xanh và văn bản ở dưới : Giới thiệu 1 đoạn văn bản ngắn >
Muốn xem đầy đủ nhấp lên Link tựa đề màu xanh . Copy > Paste >
Ra bảng Image Description , bạn nhập : text > Ok.

ĐÁY TRANG

  1. About US ( Mở Email của utbinh ) : Nhấp Phải lên > Change
     Link     >    Chọn    Index.html     >    URL      gỏ   :
     mailto:utbinhdesign@gmail.com> Ok.



                                                                  6
   2. Site Map : ( Biểu đề Trang Web ) : Dùng chương Trình Snaig It
      hay nhấp Phím Print Screen chụp Hình Khu Vực Hiển Thị Files
      > Nhấp Phải lên Site Map > Change link > Tìm đến nơi chứa
      Hình vừa chụp > Ok.
   3. Privacy Policy ( Các Điều Khoản Pháp Lý ) :
      • Vô Yahoo.com > Đáy Trang nhấp Privacy > Hiện ra Trang
         Yahoo Privacy Policy > Copy Trang nầy > Bào chế thành của
         bạn > Save ở Desktop .
      • Nhấp Phải vô Privacy Policy > Change Link > Tìm đến File
         vừa Copy > Paste > Ok Yes > Sve .
   4. CONTACT US ( Liên hệ với chúng tôi ) : Nhấp Phải lên Contact
      US > Change Link > Tìm đến File Tự giới thiệu bạn đã tạo sẵn
      > Chọn Ok > Yes > Save .
   5. © 2003 Company Name ( Bản Quyền ) : Sửa lại © 2007
      utbinhdesign .

V.GIAI ĐOẠN UPLOAD FOLDER WEB LÊN SERVER Ở XA :

 1. LOG IN : Menu Site > Manage Site > Chọn Site_web > Edit > Next
    > Next > Next > Nhập User Name và Password vào > Test
    Connection > Thông báo kết nối đầy đủ > Ok > Next > Next >
    Done > Close.
 2. UPLOAD : Nhấp Nút Put Files để Upload các Files lên Server ở xa .
    Khi upload xong : Nhấp Remote View > Hiện ra đầy đủ các Files
    của Khu Vực hiển thị Files . Đây là bản sao của Local View .
    Dreamweaver 8 có sẵn công cụ Upload bằng giao thức FTP .
 3. Kết Quả thực tập : http://utbinh.com/web/index.html

   Thiết Kế Web DREAMWEAVER 8
   utbinh 1.11.2006
   Giáo Trình DREAMWEAVER 8
   Giáo Trình DREAMWEAVER 8 Utbinh biên soạn dựa theo sách của KS Trần
   Việt An Bắt đầu từ ngày 19.7.2006 đến 20.8.2006 được 17 Bài . Còn Tiếp.
   Trong thời gian qua Utbinh sử dụng Host Free là FREEWEBTOWN.COM có
   1 Gigabites BandWidth được bạn đọc vào xem quá nhiều nên có 1 số bài
   bị DIE . Nay có Host mới mua 50 GIG utbinh Post lại thân tặng các bạn
   xem lại toàn bộ 17 bài nầy tính đến 20.8.2006.
   LINK DOWN 17 Bài nầy :
   http://utbinh.com/AUGUST/DREAMWEAVER8.rar
   Dung Lượng 9.67 MB. Giải nén bạn sẽ có nội dung các bài dưới đây
   1.StartPage.doc
   2.CuaSoTaiLieu.doc
   3.Document.doc
   4.Statu bar,property Inspector- Panel.doc
   5.LAYOUT.doc
   6.Sit cucbo.doc


                                                                         7
7.Sitetuxa.doc
8.FTP-SFTP-WEB DAVlagi.doc
9.FTP-SFTP-WEBDA lagi2.doc
10.HieuchinhSite.doc
11.PanelFiles.doc
12.PanelFile 2.doc
13.SynchronizeDon BoHoa.doc
14.TaotrangDauTien.doc
15.Hyperlin SieuLienKet.doc
16.InsertAnh.doc
17.PageProperties 1.doc
18.Thuộc Tính TRANG Page Properties.doc
19.Tim hieu META TAG.doc
20.Text 1.doc
LINK 20 bài DREAMWEAVER 8
Utbinh upload lần thứ 2 lên Host Server 20 bài soạn DREAMWEAVER 8 có tách từng URL
của từng bài soạn để giúp cho các bạn tiện Download về để tham khảo . Sau đây là Link
của từng bài :

http://utbinh.com/SEPTEMBER/DREAMWEAVER8/1.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/2.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/3.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/4.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/5.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/6.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/7.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/8.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/9.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/10.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/11.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/12.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/13.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/14.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/15.doc
Bài 16 , link mới , Sure 100% :
http://utbinh.com/DECEMBER/16bis.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/17.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/18.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/19.doc
http://utbinh.com/SEPTEMBER/DREAMWEAVER8/20.doc
NGÀY 10.9.2007 :
21.TẠO SITE CỤC BỘ TRONG DREAWEAVER 8
http://utbinh.com/SEPTEMBER07/100907/sitecucbo.doc
NGÀY 13.9.2007 :
22.DREAMWEAVER 8 : THIẾT KẾ TRANG WEB 1
http://utbinh.com/SEPTEMBER07/130907/webDREAMWEAVER1.do
c
DOC 1946 KB – JPG 1448 KB
NGÀY 14.9.2007 ;
23.SITE Ở XA – BẢNG ĐIỀU KHIỂN FILES
http://utbinh.com/SEPTEMBER07/140907/remotesite.doc
DOC 710 KB – JPG 2067 KB.
Ngày 14.9.2007 :
24.DREAMWEAVER 8 : TẠO TRANG WEB 2 PAGE2

                                                                                    8
http://utbinh.com/SEPTEMBER07/140907B/page2.doc
DOC 573 KB – JPG 1151 KB
Kết quả thực tập :
http://utbinh.com/Site_1/index.
http://utbinh.com/Site_1/page2.html
Ngày 17.9.2007 :
25.DREAMWEAVER 8 : Thiết kế web mẫu CSS
[img]http://utbinh.com/SEPTEMBER07/170907/web.jpg[/img]
http://utbinh.com/SEPTEMBER07/170907/web.jpg
http://utbinh.com/SEPTEMBER07/170907/web.doc
DOC 747 KB – JPG 847 KB.
Kết Quả Thực Tập :
http://utbinh.com/web/index.html




                                                          9

				
DOCUMENT INFO
Shared By:
Stats:
views:21
posted:8/17/2010
language:Vietnamese
pages:9
Description: IzCode.Net - Ebooks Developer - Webdesign - Template - Source Script - PHP - C# - .Net - Sliverlight