DREAMWEAVER CS3

THIẾT KẾ WEB

6 TRANG

BÀI 5 NGÀY 9.8.2009 UTBINH SOẠN “ KHÔNG ĐỤNG HÀNG “ “ RẤT TỈ MĨ “

UTBINH ĐÃ SOẠN CÁC GIÁO ÁN HƯỚNG DẪN THIẾT KẾ WEB TỈNH LÀ : HTML – FRONT PAGE 2003 – DREAMWEAVER , CÁC BẠN CÓ THỂ DOWNLOAD CÁC LINKS DƯỚI ĐÂY ĐỂ THAM KHẢO CÁC BÀI VIẾT CỦA UTBINH . GIÁO TRÌNH DREAWEAVER CS3 UTBINH ĐANG BIÊN SOẠN ĐƯỢC 4 BÀI , HÔM NAY VIẾT TIẾP BÀI HƯỚNG DẪN THIẾT KẾ WEB 6 TRANG CÓ LẺ ĐI QUÁ NHANH NHƯNG NẾU CÁC BẠN ĐÃ THEO DÕI TỪ ĐẦU TRONG CÁC GIÁO ÁN TRÊN SẼ THẤY KHÔNG BỞ NGỠ VÌ TỰU TRUNG CHƯƠNG TRÌNH THIẾT KẾ WEB NÀO CŨNG TƯƠNG TỰ NHƯ NHAU . UTBINH MUỐN NHẤN MẠNH BẰNG BÀI VIẾT NÀY ĐỂ CÁC BẠN CÓ 1 CÁI NHÌN TỔNG QUÁT HẦU LÃNH HỘI TOÀN VẸN CÁC BÀI SAU MỘT CÁCH DỄ DÀNG . THIẾT KẾ TRONG FRONTPAGE 2003 CŨNG 1 SITE ĐÓ NHƯNG DUNG LƯỢNG CÓ VẺ LỚN HƠN TRONG DREAMWEAVER VÀ THỜI GIAN THIẾT KẾ CŨNG LÂU HƠN . TRONG DREWEAVER CS3 CŨNG CÓ SẴN GIAO THỨC TRUYỀN TẢI SITE LÊN HOST BẰNG FTP CHO NÊN BẠN KHÔNG CẦN THÊM MỘT CHƯƠNG TRÌNH UPLOAD FTP NÀO NỬA . DREAMWEAVER CHO PHÉP BẠN CÀI ĐẶT SONG SONG 2 CHƯƠNG TRÌNH DREAMWEAVER NHƯ CS3 VÀ CS4 ĐỂ BẠN CÓ THỂ TEST CẢ 2 .

BÀI VIẾT HƯỚNG DẪN BẠN THIẾT KẾ 6 TRANG WEB TRONG DREAMWEAVER CS3 NÀY CŨNG GIỐNG NHƯ TRONG FRONTPAGE 2003 VẬY . TRƯỚC NHẤT BẠN PHẢI TẠO 1 BỐ CỤC ( LAYOUT ) BẰNG TEMPLATES TRANG WEB MẪU HAY BLANK PAGE RỒI TẠO TABLE PHÂN CHIA LÀM 4 KHUNG . KHUNG TRÊN CÙNG LÀ BANNER . KHUNG TRÁI LÀ THANH LIÊN KẾT CHỨA CÁC LIÊN KẾT . KHUNG MAIN CONTENTS CHỨA NỘI DUNG CÁC ĐỀ MỤC VÀ KHUNG ĐÁY CHỨA CÁC THÔNG TIN VỀ BẠN – VỀ TRANG WEB .

GIAI ĐOẠN CUỐI LÀ PUT FILES LÊN HOST SERVER ĐƯỢC VIẾT RẤT TỈ MĨ VÌ UTBINH ĐÃ GẶP TRỞ NGẠI LỚN MẤT 1 NGÀY SAU KHI THAM KHẢO HẾT CƯ DÂN TIN HỌC MÀ KHÔNG CÓ AI GIẢI ĐÁP DÙM , CUỐI CÙNG TỰ SUY LUẬN VÀ TÌM RA LÝ DO CŨNG NHƯ TỰ SÁNG CHẾ ĐỂ VƯỢT QUA TRỞ NGẠI LINK URL TRONG DREAMWEAVER NÀY . Ở ĐÂY UTBINH HƯỚNG DẪN CÁC BẠN TẠO ACCOUNT TRONG CÁC HOST FREE ĐỂ THỰC TẬP VÌ CÓ NHIỀU BẠN KHÔNG ĐỦ ĐIỀU KIỆN ĐỂ MUA HOST VẢ LẠI TRONG LÚC HỌC THÌ NÊN TẬP SỬ DỤNG HOST FREE CHO ĐỞ TỐN KÉM . KHI NÀO RÀNH RẺ RỒI THÌ HÃY SẮM HOST MUA ĐỂ GIỚI THIỆU WEB CỦA BẠN CHO MỌI NGƯỜI THƯỞNG LÃM .

I.GIÁO TRÌNH THIẾT KẾ WEB UTBINH SOẠN :

FRONTPAGE 2003 :42 BÀI FRONTPAGE 2003 UTBINH SOẠN ĐỢT 3 FRONTPAGE_2003_42LESSONS.rar (58.34 MB) : http://tinyurl.com/utbinh008
FRONTPAGE 2003 : 45 BÀI FRONTPAGE 2003 UTBINH SOẠN ĐỢT 1 VÀ 2 (35.91MB): http://tinyurl.com/utbinh009
DREAMWEAVER 8 : 34 BÀI DREAMWEAVER 8 UTBINH SOẠN (21.17MB): http://tinyurl.com/utbinh142
HTML : 52 Bài Thiết Kế Web HTML utbinh soạn (46.07MB) :http://tinyurl.com/utbinh0010

II.TẠO BỐ CỤC ( LAYOUT ) CHO TRANG WEB

Tạo 1 Website có bố cục như sau : Khung Banner trên cùng có Width 1024 – Height 50 Pixels . Khung Liên Kết bên Trái chứa các Liên kết có Width 100 Pixels và Khung Main Contents bên Phải chứa nội dung Trang Web 924 Pixels và Khung Đáy chứa các Thông Tin cần thiết cho Trang Web cùng Địa Chỉ liên Lạc của Người Thiết Kế Web . Cách tạo giống như trong Fronpage 2003.

Nhấp Shortcut của Dreamweaver CS3 tại Desktop > Hiện ra giao diện Chương Trình > Menu File > New > Mặc định chọn Blank Page , cột Page Type chọn HTML – Cột Layout chọn : <none> - Nhấp Nút Create > Hiện ra Cửa Sổ Hồ Sơ trống có con trỏ đang nhấp nháy .
Nhấp Tam Giác đen nhỏ của Menu Insert > Hiện ra 8 Phần của Thanh Chèn Insert , chọn Phần Common > Hiện ra các Công Cụ , chọn Table > HT Table xuất hiện , Hàng Rows nhập 3 – Columns nhập 2 – Table Width 1024 pixels ( Bề ngang màn hình máy tính của bạn ) – Border Thickness : 0 – Cell Padding : 3

( Văn bản cách viền ) – Cell Spacing : 0 ( Khoảng cách Hàng ) – Header chọn None > Ok . (H1) .

Ghi chú : Nếu thao tác sai , trở về các bước trước nhấp Ctrl+Z nhiều lần , trở về các bước tới nhấp Ctrl+U nhiều lần .

Nới rộng Cửa Sổ : Nhấp tâm Thanh Đáy , rê xuống đáy Trang để nới rộng Cửa Sổ Hồ Sơ .

Định dạng Thanh Banner :

· Trộn 2 Ô thành 1 : Để con trỏ ở ngoài bên Trái sát Khung > Biến thành Mủi tên đen nhỏ trỏ vô Banner > Nhấp chuột , đã chọn 2 Ô này > Nhấp Phải lên > Chọn Table > Chọn Merge Cells > Đã trộn 2 Ô thành 1 Ô .

· Qui định Width cho Banner : Nhấp chọn Khung Banner > Nhập 50 vào Ô H của Hộp Kiểm Soát ( HKS) Properties > Enter . Đả có chiều Height là 50 Pixels .

Định dạng Thanh Liên Kết và Main Contents : Chọn 2 Ô bên Trái > Nhấp Phải lên > Chọn Table > Chọn Merge Cells thành 1 Ô đứng > Rê vạch đứng qua Phải cho đến khi có 100 và Khung Main Contents bên Phải có 912 Pixels . (H2) .

Khung Thông Tin Trang Web ở Đáy Trang : Bạn cũng trộn 2 Ô thành 1 Ô . (H2) .

III.TẠO SITE CỤC BỘ

Bạn tạo 1 Folder Website ( Site Cục Bộ ) tên site090806 lưu mặc định theo hướng dẫn tại My Documents ( Có thể lưu ại desktop cũng được ) .

Menu Site > New Site > Ra Bảng Editing Files , Trường trên nhập : site090806 – Trường dưới nhập : http://www.byethost.com ( Đây là 1 Host Free ) > Next . (H3) .
Ra Bảng Editing Files , Part 2 , để mặc định > Next . (H4) .

Ra Bảng Editing Files , Part 3 , để mặc định ,> Next ( site090806 được lưu tại My Documents , nếu muốn lưu nơi khác nhấp Nút Browse kế bên và chỉ định nơi lưu) . (H5) .

Ra Bảng Sharing Files , nhấp nút xổ xuống của Trường trên cùng , chọn FTP > Đã bật lên các Trường tương ứng bên dưới > Nhập thông tin vào các Trường , chú ý đối với Host Free www.byethost.com này bạn phải nhập tên Folder trung gian vào Trường “ What Folder on the Server do you want to store files in ? ” là : htdocs > Nhấp nút Test Connection để kết nối với máy Chủ là : www.byethost.com > Ra Bảng thông báo kết nối hoàn thành > Next . (H6) .

Ra Bảng Sharing Files , Part 2 , để mặc định > Next . (H7) .

Ra Bảng Summary tóm tắt các bước vừa qua > Done > Trở lại Cửa Sổ Hồ Sơ . (H8) .

IV.TẠO TÊN CHO TỪNG TRANG WEB

Trong bài hướng dẫn này , bạn phải tạo tất cả 6 Trang web cho 1 Website090806 . Trang đầu tiên là TRANG CHỦ mặc định có tên : index.htm và các trang còn lại được đặt tên : TRANG 1 – TRANG 2 – TRANG 3 – TRANG 4 – TRANG 5 . Ngay lúc ban đầu bạn đã tạo 1 Layout cho 1 Trang Web nhưng chưa đặt tên cho nó , Cửa Sổ Hồ Sơ đang thể hiện Layout của Trang đó .

TẠO TRANG : index.html

Menu File > Save As > Ra Bảng Save As , Hàng Save in đã có : site090806 – Hàng File name nhập : index > Save > Bạn đã có Tab index.html trong Cửa Sổ Hồ Sơ . Cửa Sổ Hồ Sơ mà bạn đã tạo hiện nay trống chưa nhập nội dung vào .Bạn Copy Trang trống với bố cục hiện có .

TẠO TRANG : trang2.html

· Menu File > New > Mặc định chọn Blank Page , cột Page Type chọn HTML – Cột Layout chọn : <none> - Nhấp Nút Create > Hiện ra Cửa Sổ Hồ Sơ trống có con trỏ đang nhấp nháy .

· Menu File > Save As > Ra Bảng Save As , Hàng Save in đã có : site090806 – Hàng File name nhập : trang1 > Save > Bạn đã có Tab trang1.html trong Cửa Sổ Hồ Sơ . Nội dung Trang trống này giống 100% Trang index.html.

TẠO CÁC TRANG 2-3-4-5 :

· Lập lại từng bước giống trên để tạo : trang2.html – trang3.html – trang4.html và trang5.hml .

· Sau khi hoàn tất tạo 6 Trang Web , bạn vào Menu File > Save All > Nhấp Phím F12 hoặc nhấp Nút Preview In Browse để xem thử Trang web trên Trình Duyệt .(H9) .

v.TẠO VÀ DÁN BANNER

Bạn tham khảo 13 bài Viết hướng dẫn tạo Banner tại : http://tinyurl.com/utbinh007

Trong bài này bạn đã tạo Khung Banner có kích cở 1024 X 50 Pixels .

CÁCH TẠO BANNER TRONG PHOTOSHOP :

1. Nhấp Phím Ctrl+N > Bảng New hiện ra , bạn nhập các thông số vào > Enter . (H10) .

2. Phím F7 > Phím Ctrl+J > Foreground chọn màu xanh > Phím Alt + Phím Delete > Đã đổ màu xanh cho nền Banner .

3. Chọn Text > Nhập văn bản vào > Nhấp Nút Add a Layer Style đáy Tab Layers để lập hiệu ứng cho Text và Insert Hình vào .

4. Khi hoàn tất : Ctrl+Shift+ S để Save tại Desktop , định dạng JPEG .

CHÈN BANNER VÀO KHUNG BANNER CỦA TRANG INDEX :

Trở lại Dreamweaver CS3 > Nhấp lên Khung Banner > Nút Images > Image > Look in chọn Desktop > Nhấp lên Banner > Đã hiện trong Image Preview > Ok > Bảng Adobe Dreamweaver CS3 hỏi bạn có muốn Copy ảnh này bây giờ ? > Yes > Bảng Copy As hiện ra > Save > Bảng Image Tag Accessibility Attributes hiện ra > Ok > Đã xuất hiện Banner trong Khung Banner . (H11) .

CHÈN BANNER CHO CÁC TRANG KHÁC :

1. File > Open > trang1 > Open > Nhấp con trỏ trong Khung Banner của trang1.html > Nút Images > Image > Banner > Ok > Yes > Save > Yes > Đã hiện Banner trong Khung Banner của Trang trang1.html .

2. Lặp lại bước trên để chèn Banner cho các Trang 2-3-4-5 .

3. File > Save All > Phím F12 để xem thử trong Trình Duyệt .

Chú Ý : * Nhấp Nút Split để xem Code và Design . (H12) .

* Nhấp Nút View Option để loại bỏ thước và các tùy chọn .

VI.TẠO NỘI DUNG CÁC TRANG

Thông thường , nội dung của 1 Trang trong Khung Main Contents thường được tạo Table chia nhiều Table nhỏ . Mỗi Table có Tiêu Đề ( có liên kết và màu xanh ) và dưới đó là phần tóm tắt vài hàng . Cột Phải thường là các Banner rất nhỏ chạy Flash có liên kết để khi nhấp lên nó sẽ hiển thị ra nội dung chính của Banner đó .

Các bạn xem thử 1 nội dung : http://www.thongtincongnghe.com/

Trong bài viết này , Utbinh chỉ dán các Bài viết trước của chủ đề Thiết Kế Web Dreamweaver CS3 từ Bài số 1 đến 4 để vừa ôn tập vừa ví dụ cụ thể cho Bài Thiết Kế 6 Trang Web Dreamweaver CS3 .

1. NỘI DUNG CHO TRANG INDEX.HTML :

· Mở Trang index.html : File > Open > index > Open > Đã hiện ra Cửa Sổ Hồ Sơ Trang index.html có Banner đã dán .

· Nhấp Con trỏ vào Khung Main Contents ( Khung Chính chứa nội dung ) > Con trỏ đang ở giữa bên Trái nhấp nháy > HKS Properties , nhấp xổ xuống của VERT ( Vertical ) chọn Top > Con trỏ lên sát đỉnh bên Trái .

· Nội dung là Copy /Paste : Mở Trang có Văn bản và Hình Minh Họa xem kẻ cần lấy > Ctrl+A > Chọn Size từ 6 đến 8 pt > Hiệu chỉnh lại vị trí Text và Hình > Sau khi hoàn chỉnh Ctrl+C .

· Trở lại CSHS > Ctrl+V > Bảng Image Description ( All Text ) xuất hiện , nhập : a > Ok > Đã dán văn bản vào > Hiệu chỉnh lại Văn bản và Hình > File > Save > F12 > Bạn xem trong Trình Duyệt . (H13) .

2. NỘI DUNG CHO TRANG 1 : trang1.html và các Trang khác

· File > Open > trang1 > Open .

· Lập lại các bước trên bằng 1 nội dung khác > File > Save .

· Từ trang2.html đến trang5.html đều dán mỗi Trang với nội dung khác nhau . Sau khi hoàn tất nội dung cho 6 Trang Web bạn nhấp File > Save All > Close.

VII.TẠO THANH LIÊN KẾT

Thanh Liên Kết thường ở bên Trái Trang Web , trong đó chứa các liên kết để đến 1 trong những Trang của Website . Khi mở bất cứ Trang nào , bạn cũng đều thấy có 3 Thanh giống nhau , đó là : Thanh Banner – Thanh Liên Kết – Thanh đáy chứa Thông Tin của Người Chủ trang Web .

1. TẠO THANH LIÊN KẾT :

· Tạo Table : Nhấp vô Khung Thanh Liên Kết ( Khung bên Trái ) > Con trỏ nhấp nháy ở giữa sát lề Trái > Hộp Kiểm Soát Properties , hàng Vert chọn Top > Con trỏ đã lên đính sát Trái .

· Nút Table > HT Table xuất hiện , nhập : Rows : 6 – Columns : 1 – Table Width 100 pixels – Border Thickness 2 ( Viền ) – Cell Padding 1 ( sát viền) - Cell Spacing 0 ( Khoảng cách ) - Header chọn None > Ok . (H14) .

· HKS Properties , Bg Color ( màu nền ) chọn màu xanh – Brdr Color ( màu viền ) chọn màu Vàng .

2. NHẬP VĂN BẢN :

· Nhấp Ô 1 , gỏ : INDEX.HTML hay TRANG CHỦ > Chọn Bold – HKS Properties chọn màu Trắng – Chọn Center .

· Nhấp Ô 2 , gỏ : TRANG 1 > Chọn giống trên .

· Nhập văn bản các Ô còn lại . (H15) .

3. TẠO LIÊN KẾT :

· Bôi đen Nút Liên Kết trên cùng : INDEX.HTML > Nút Hyperlink > HT Hyperlink hiện ra > hàng Text đã có : INDEX.HTML > hàng Look in đã có : site090806 . (H16) .

· Nhấp Nút Browse , HT Select File hiện ra > Nhấp index > Ok .(H17) .

· HT Hyperlink hiện ra , Hàng Link đã có : index.html > Nhấp Ok . (H18) .

· Để văn bản này có màu Trắng : Nhấp Nút Text Color trong HKS Properties và chọn màu trắng .

· Tạo Liên Kết cho TRANG 1 : Thực hiện các bước giống trên . Khi HT Select File hiện ra , nhấp trang1 > Ok . ( Tạo cho TRANG 2 thì nhấp trang2 …)

Khi tạo xong Liên kết cho 6 Ô này . tất cả văn bản đều có gạch dưới bào hiệu đã có liên kết đến nội dung khác và văn bản có màu Trắng > File > Save All > Phím F 12 để xem và nhấp lên tứng Liên kết để kiể tra hiệu quả của nó . (H19) .

4. DÁN THANH LIÊN KẾT CHO CÁC TRANG :

· Nhấp góc đáy Phải Thanh Liên Kết > Thanh Liên kết đã được chọn bôi đen > Ctrl+C > File > trang1 > Open > Đã hiện ra nội dung trang1.html .

· Nhấp vô Khung Thanh Liên Kết ( Khung bên Trái ) > Con trỏ nhấp nháy ở giữa sát lề Trái > Hộp Kiểm Soát Properties , hàng Vert chọn Top > Con trỏ đã lên đính sát Trái > Ctrl+V dán Thanh Liên Kết vào > File > Save .

· Mở tuần tự trang2 – 3- 4- 5 và dán Thanh Liên kết vào .

· Sau khi đã dán hoàn tất Thanh Liên Kết cho 6 Trang web , nhấp File > Save All > F12 > Nhấp lên từng liên kết của mỗi Trang để kiểm tra sự liên kết có tốt không .

VII.KIỂM TRA FOLDER WEBSITE

Như vậy là bạn đã tạo hoàn tất 1 Folder Website tên site090806 đặt tại My Documents Trước khi Upload Folder này lên Host Server bằng 1 chương trình có giao thức FTP nếu thiết kế bằng một chương trình khác Dreamweaver ( Trong Dreamweaver gọi là Put Files có sẵn giao thức FTP mà không cần cài đặt thêm 1 chương trình nào khác ) , bạn cần phải kiểm tra lại lần cuối xem có còn thiếu sót nội dung nào chưa Insert vào – nhấp các File.html xem nội dung các Trang – nhấp các nút liên kết xem liên kết có vững không – xem văn bản và hình có bị đè lên không , có bị lệch vị trí không . Dung lượng của Folder này rất ít so thiết kế bằng 1 chương trình khác .

VIII.PUT FILES LÊN HOST SERVER FREE

Theo lý thuyết sau khi bạn thiết kế hoàn tất 1 Folder Website , bạn nhấp lên từng File.html để kiểm tra nội dung của nó trước khi Upload Folder này lên Host Server . Put Files lên Host Server thực hiện các bước như sau :

Theo Lý Thuyết :

· Trong Menu Browse chọn site090806 cần Upload .

· Nhấp Nút Refresh > Nhấp Nút Put Files ( Mủi tên chỉ lên ) .

· Chờ Connect với máy Chủ Ở Xa ( Host Server ) và bắt đầu tải toản bộ Site này lên Host .

· Khi hoàn tất , bạn vào Menu View chọn Remote View > Đã hiện ra Site và các Files của nó trong Vùng Hiển Thị Files của BĐK Files .

· Nhưng Utbinh đã gặp trở ngại là : Chỉ thấy các Files của Site này mà không thấy tên Folder site090806 do đó khi vào Trình Duyệt nhập Link URL theo thứ tự là : tên Host\tên site\ index.html thì không hiển thị nội dung Trang Web .

Tạo 1 Folder Trung Gian :

· Utbinh đã tìm ra được lý do trở ngại này là : Đã Put Files hoàn tất các Files của site090806 nhưng vì thiếu tên site090806 trong Remote View . Như vậy cần phải tạo 1 Folder Trung Gian chứa các Files của site090806 .

· Đến My Documents , bạn đã thấy site090806 > Nhấp lên nó > Hiện ra nội dung gồm 6 Trang html – các Files Ảnh – và 1 Folder _ notes do Dreamweaver tạo ra khi bạn thiết kế >Tạo 1 Folder tên 090806 ( Ngày Thiết kế Website 6.8.2009 ) chứa tất cà các Files trên > Close .

· Mở Dreamweaver CS3 > Trong BĐK Files , Menu Browse chọn site090806 – Menu View chọn Local View - Vùng Hiển Thị Files bạn thấy Folder 090806 mà bạn vừa tạo > Khi nhấp lên nó sẽ hiện ra các Files của Website .(H24) .

Put Files lên Host Server :

· Nhấp Nút Put File(s) để bắt đầu Upload Site này lê Host Server Free là : www.byethost.com > Bảng Background Files Activity-site090806 hiện ra đang connect > Xong hiện ra bảng Adobe Dreamweaver CS3 hỏi bạn có muốn tải toàn bộ Site ? Bạn nhấp Ok .

· Hiện ra Bảng Background Files Activity-site090806 đang tiến hành tải lên các Files hiện có . Nếu nhiều Trang html có nhiều nội dung thì thời lượng lâu hơn 1 Web đơn giản . Động tác Upload của Dreamweaver làm rất ngọt và rất trơn tru khiến bạn thích thú . Sau khi Tải lên hoàn tất Bảng Background Files Activity-site090806 không còn hiện diện nửa . (H25) .

4. Kiểm Tra nội dung trong Remote Site :

· Menu View nhấp chọn Remote View > Đã hiện ra nội dung của Host trong đó có Folder 090806 > Nhấp lên Folder này > Hiện ra tất cả các Files vừa tải lên . (H26) .

· Nhấp Nút Expand to show Local and Remote Sites > Hiện ra Bảng Adobe Dreamweaver CS3 có 2 cột Local Files và Remote Site để so sánh kiểm tra có thiếu Files không đồng bộ giữa 2 Cột > Nhấp Nút Synchronize để chạy đồng bộ chúng và nhấp các nút khác để tìm hiểu thêm công dụng của các công cụ .(H27).

5. LINK URL của site090806 :

Bạn có thể đoán được Link URL của Site này :

http://utbinhdesign.byethost2.com/090806/index.html

Giải thích :

· http://utbinhdesign.byethost2.com : Link URL của Host cấp khi bạn tạo Account .

· 090806 : Tên Folder Trung Gian mà bạn vừa tạo .

· index.html : Trang Chủ . (H28) .

Nhận xét :

Nếu đúng theo lý thuyết thì Link URL phải là :

http://utbinhdesign.byethost2.com/site090806/index.html

( Có tên site sau URL của Host ) . Utbinh không biết tại sao không đúng theo lý thuyết . Các bạn Cao Thủ Võ Lâm Pro Thiết Kế Web cho Utbinh biết lý do xảy ra này xin thư về : utbinhdesign@gmail.com để utbinh học hỏi thêm 1 kinh nghiệm nửa . Giờ này Utbinh mới hiểu ra trong Trang Web Mẫu FrontPage luôn luôn có 1 Folder Trung Gian là GardenCo chứa các Files của Site . Vai trò Folder Trung Gian này để làm gì ? Đó là lý do Utbinh cần học hỏi ở các bạn .

VIII.THỰC TẬP THIẾT KẾ WEB BẰNG CÁCH

DOWNLOAD SITE LÀM SẴN

Bạn có thể Download site090806 đã được thiết kế hoàn chỉnh của Utbinh về đặt tại My Documents , sau đó mở Dreamweaver CS3 vào Manage Site để Edit nó trong Host Free khác . Tiến hành Put Files theo hướng dẫn phần trên và lấy Link URL của Trang Web để giới thiệu Người Xem .

1. Tạo 1 Folder tên site090806 ( hoặc tùy thích ) tại My Documents ( Nơi nào cũng được ) .

2. Download File nén : 090806.rar (1.19MB) tại : http://tinyurl.com/utbinh0011 > Chỉ định nơi lưu trong Folder trên > Giải nén > Delete File nén .

3. Mở Dreamweaver CS3 > File > Open > My Documents > site090806 > Nhấp đúp Folder 090806 > Nhấp File index > Open > Đã hiện ra nội dung trong Cửa Sổ Hồ Sơ.

4. Site > Manage Site > Chọn site090806 > Edit .

5. Ra Bảng Editing Files , Trình trên đã có tên site090806 ( Nếu bạn đã đổi tên khác thì hiện ra tên mới đổi ) – Trường dưới bạn nhập tên Trang Web Host Free khác

( www.110mb.com ) > Next . (H29) .

6. Ra Bảng Editing Files , Part 2 > Next .

7. Ra Bảng Editing Files , Part 3 > Next .

8. Ra Bảng Sharing Files , chọn FTP trong Trường đầu tiên > Đã bật ra các Trường tương ứng > Bạn nhập thông tin theo Hình Minh Họa ( Nếu bạn chưa tạo Account trong 1 Host Free nào đó thì tạm dùng Account của Utbinh tạo sẵn để thực tập . Password là : 13112008 ) > Nhấp Nút Test Connection > Ra Bảng thông báo đã kết nối với Server hoàn toàn > Ok . Next .(H30) .

9. Ra Bảng Sharing Files , Part 2 > Next .

10. Ra bảng Summary > Done .

11. Tiếp tục thực hiện các bước Put Files theo hướng dẫn Phần Put Files lên Host Server .

Link URL của site090806 trên Host Free : www.110mb.com là :

http://kimtrang.110mb.com/090806/index.html

SỬ DỤNG HOST FREE DO UTBINH TẠO SẴN

Trong bài : Host Free BYETHOST.COM (http://utbinh.com/A7/050709/BYETHOST.doc) utbinh đã tạo sẵn Account cho các bạn dủng thực tập thiết kế Web với chi tiết như sau : Username : b15_3722400 – Password : 05072009 – URL : http://thunam.byethost15.com/

KẾT QUẢ THỰC TẬP

· Trên Host mua : www.dot5hosting.com

Sau khi tạo xong Folder Website tên site090806 utbinh Upload bằng Chương Trình Cute FTP lên Host mua của utbinh mà không thông qua Put Files của Dreamweaver :

http://utbinh.com/A8/site090806/index.html

Chính vì thế mà mà vẫn thấy được tên site090806 trung gian .

· Trên Host Free : www.byethost.com

http://utbinhdesign.byethost2.com/090806/index.html

Không thể hiện tên site090806 mà hiện Folder trung gian 090806

· Trên Host Free : www.110mb.com

Không thể hiện tên site090806 mà hiện Folder trung gian 090806

http://kimtrang.110mb.com/090806/index.html

UTBINH BẢO ĐẢM VỚI CÁC BẠN SẼ KHÔNG TÌM THẤY TRÊN BÁO CHÍ – SÁCH - TRÊN MẠNG – TRÊN FORUMS CÓ BÀI VIẾT HƯỚNG DẪN TỈ MĨ – RÕ RÀNG TỪNG CHI TIẾT GIỐNG BÀI VIẾT NÀY . CÁC BẠN SAU KHI ĐỌC XONG SẼ THIẾT KẾ TRƠN TRU TỪ ĐẦU CHÍ CUỐI CHO ĐẾN KHI XUẤT BẢN HOÀN TẤT 1 WEBSITE BẰNG CHƯƠNG TRÌNH DREAMWEAVER CS3 MẶC DÙ THAM KHẢO VÀ TỰ HỌC HỎI MỚI 4 BÀI DO UTBINH SOẠN . NÓI TÓM LẠI NỘI DUNG NÀY KHÔNG ĐỤNG HÀNG – UTBINH ĐÃ BỎ CÔNG SOẠN THẢO 3 NGÀY MỚI XONG VÀ ĐIỀU LÀM UTBINH KHOAN KHOÁI NHẤT LÀ ĐÃ VƯỢT QUA TRỞ NGẠI KHI TẠO 1 FOLDER TRUNG GIAN MỚI CÓ THỂ CHO TRANG WEB HIỂN THỊ TRÊN TRÌNH DUYỆT ( MẶC DÙ KHÔNG ĐÚNG THEO LÝ THUYẾT ) . UTBINH RẤT MONG BẠN NÀO BIẾT CÁCH KHÁC KHÔNG CẦN TẠO FOLDER TRUNG GIAN MÀ VẪN CÓ LINK URL HIỆN RA NỘI DUNG TRANG WEB TRÊN TRÌNH DUYỆT CHỈ LẠI CHO UTBINH . VỚI TINH THẦN CẦU TIẾN VÀ HAM HỌC HỎI ( 62 TUỔI RỒI ) UTBINH MONG ĐÓN NHẬN ĐƯỢC CHỈ GIÁO CỦA CAO THỦ VÕ LÂM TRONG CHỐN CNTT.

ĐA TẠ . THƯ CHO UTBINH : utbinhdesign@gmail.com

NGÀY 10.8.2009 :

5.DREAMWEAVER CS3 : THIẾT KẾ WEB 6 TRANG .

[img]http://utbinh.com/A8/090810/A.png[/img]

[img]http://utbinh.com/A8/090810/B.png[/img]

KẾT QUẢ THỰC TẬP

Trên Host mua : www.dot5hosting.com

Sau khi tạo xong Folder Website tên site090806 utbinh Upload bằng Chương Trình Cute FTP lên Host mua của utbinh mà không thông qua Put Files của Dreamweaver :

http://utbinh.com/A8/site090806/index.html

Chính vì thế mà mà vẫn thấy được tên site090806 trung gian .

Trên Host Free : www.byethost.com

http://utbinhdesign.byethost2.com/090806/index.html

Không thể hiện tên site090806 mà hiện Folder trung gian 090806

Trên Host Free : www.110mb.com

Không thể hiện tên site090806 mà hiện Folder trung gian 090806

http://kimtrang.110mb.com/090806/index.html

GIÁO TRÌNH THIẾT KẾ WEB UTBINH SOẠN :

FRONTPAGE 2003 :42 BÀI FRONTPAGE 2003 UTBINH SOẠN ĐỢT 3 FRONTPAGE_2003_42LESSONS.rar (58.34 MB) : http://tinyurl.com/utbinh008

FRONTPAGE 2003 : 45 BÀI FRONTPAGE 2003 UTBINH SOẠN ĐỢT 1 VÀ 2 (35.91MB): http://tinyurl.com/utbinh009

DREAMWEAVER 8 : 34 BÀI DREAMWEAVER 8 UTBINH SOẠN (21.17MB): http://tinyurl.com/utbinh142