BÀI TÓM TẮT CÁC BÀI HỌC TRƯỚC THIẾT KẾ WEB DREAMWEAVER 8

2.BÀI TÓM TẮT CÁC BÀI HỌC TRƯỚC

THIẾT KẾ WEB DREAMWEAVER 8

NGÀY 22.10.2013

Xem Video hướng dẫn: http://goo.gl/OeJ58Q

Download Sách Free thứ 34: DREAMWEAVER 8, thiết kế Web

http://goo.gl/MievS1

Út Bỉnh viết Bài Tóm Tắt này nhằm rút gọn những điều cần thiết cần phải làm trong lúc tạo một Website. Riêng giáo trình thì dài hơn để bạn đọc tham khảo. Nó rất có ích vì bạn sẽ thấy ngắn gọn, hiệu quả và dễ thực  hiện. Bạn mua một quyển sách giỏi lắm là bạn chỉ thu hoạc được 20% của nội dung của nó là cao lắm, nội dung còn lại không giúp ích gì cụ thể cho bạn. Riêng Bài Tóm Tắt này thì bạn đọc sẽ tận dụng 100 % nội dung của nó.

I.CÁCH ĐÓNG MỞ CÁC THANH CÔNG CỤ, CÁC BẢNG ĐIỀU KHIỂN

1.Đóng mở các thanh

Nhấp phải lên chổ trống > Xuất hiện danh sách các thanh > Đánh dấu chọn các thanh để hiển thị  > Hoặc bấm lên Custom Favorites để  lựa chọn ưa thích.

2.Đóng mở các Bảng Điều Khiển

Bấm Menu Window > Xuất hiện danh sách các Bảng Điều Khiển > Bấm chọn một hoặc nhiều Bảng Điều Khiển > Khi không cần dùng nửa bấm lên Window > Bấm tên BĐK không cần dùng.

3.Các thanh chèn công cụ

Bạn bấm lên xổ xuống của một thanh chèn.

Xuất hiện danh sách các thanh chèn cho từng lo công cụ. Muốn sử dụng hoặc thôi sử dụng bấm chọn tên thanh chèn chần thiết.

4.Nới rộng hoặc thu hẹp Khung Thiết Kế:

Bạn rê thanh đứng giữa Khung Thiết Kề và Panel Files để nới rộng hoặc thu hẹp không gian thiết kế hoặc bấm lên nút tam giác đen nhỏ ở giau74 thanh.

5.Cách xem Tab của từng Ô:

Khi bạn bấm lên một Ô bạn thấy Tab dưới đó bôi đen thông báo Tab đang chọn > Bám Tab <tr> trước nó > Bạn thấy Ô bôi đen có nghĩa đang chọn Ô đó > Bấm phải lên > Xuất hiện danh sách menu để bạn chọn. Bấm Tab trước đó > Bạn đã chọn cả Table Layout. Và bấm Tab Body > Toàn bộ đã được bôi đen.

6.Cách xem Preview:

Nhập tiêu đề > Bấm nút Save hoặc Save All > Bấm

7.Sau khi Ghost: Phải cài lại AppServ.

·         Bạn phải tạo Site mới: Có tên giống tên Source cũ (là utbinh), bấm Manage Sites > Remove  các tên site khác > Bấm New > Nhập thông tin qua các Cửa sổ> Khi đến đoạn chèn tên Site mà không hiệu quả bạn bấm chọn notes > Sau khi tạo xong qua các cửa sổ xuất hiện bảng Manage Site > Bấm Done.

·         Khi cài AppServ trong Ổ D, nó tạo một file cấu hình tại Ổ C\Windows\php.ini.

8.Bạn có thể cài 2 AppServ tạo Localhost:  Bạn rename AppServ đã cài trước đó và cài thêm AppServ mới để 2 tên không trùng. Sau đó bạn tạo thoải mái các Site trên 2 AppServ này.

9.Các Tools trả về mặc định: Vào View > ToolBars > Standard

10.Trả Designer về mặc định: Window > WorkSpace Layout > Designer.

11.Thông báo lỗi Unicode: Modify > Page Properties > Title/Encoding > Unicode (UTF-8).

12.Upload lên Host mua : Tạo file nén Zip cho Source > Trong Permission chọn hết > Sau khi Upload xong nhớ giải nén.

13.Upload bẳng FileZilla : Tạo File nén Zip  Upload > Upload xong vào Host Mua bung nén.

14.Tạo Banner :  Các file hình càng nhỏ càng tốt, kích cở khoảng 1.000 X 250 pixels > Có thể tạo bằng GIF sau đó dùng ACD See convert thành JPEG.

15.Bấm Ctr+Z nhiều lần : Trả về tình trạng trước đó.

II.THIẾT KẾ WEBSITE

1.Download và cài đặt Dreamweaver 8 (58,48 MB):

Vào: http://goo.gl/ZysL98. Sau khi download thành công, giải nén. Bấm lên file cài đặt (66,567 MB). Cài đặt qua vài bước rất đơn giản. Bấm file keygen lấy serial dán vào Ô Serial. Như vậy là bạn đã có bản Full sử dụng lâu dài.

2.Download và cài đặt AppServ tạo Localhost (16,80 MB):

Bạn có thể cài nhiều lần. Mỗi lần cài chương trình này nhớ Rename tên chương trình đã cài. Nên cài trong Ổ C để không bị mất dữ liệu khi Ghost.

• Cài đặt: Bấm lên file cài đặt > Next > I Agree > Chọn Ổ D > Ok > Next > Next > Ô Server name nhập: localhost – Ô Administrator nhập: admin@yahoo.com > Next > Ô Enter root password nhập: 123456 – Ô Re enter root password nhập: 123456 – Đánh dấu Enable InnoDB > Install > Finish.
• Tạo Database: Vào trình duyệt > Nhập localhost > Enter. Xuất hiện trang The AppServ Open, bấm hàng đầu tiên: phpMyAdmin database Manger Version 2.10.3 > User name nhập: root – Password nhập: 123456 > Ok. Ra trang Localhost, Ô Collation chọn: utf8-unicode_ci – Ô Create new database nhập: new_2 (đây là tên của database cũng là tên Site) > Nhấp nút Create. Bạn đã thấy tên Database new_2 vừa tạo kèm số 0 có nghĩa là chưa có dữ liệu nào trong Tab Database.

3.Tạo tên Site (cũng là tên trang Web) :

Bấm shortcut chương trình Dreamweaver tại Desktop > Xuất hiện giao diện > Vào menu Site > New Site > Dòng what would you like…nhập tên Site là : new_2 – Dòng What is the http… nhập: http://localhost/new_2  > Next. Chọn Yes I want to use…- Bấm xổ xuống chọn PHP MyAdmin > Next. Chọn Edit and test - Bấm nút Browse > Trong folder www tạo một folder mới tên new_2 > Nếu ra ngoài không thấy đường dẫn có new_2 bạn phải nhập lại new_2 giống như đường dẫn này: D:\AppServ\www\new_2 > Next. Nhập new_2 và bấm nút Test URL > Xuất hiện thông báo: The UL Prefix test was  successful > Ok > Next > Chọn No và bấm Next > Xuất hiện CS Summary, bấm Done. Bạn đã thấy tên Site vừa tạo là new_2 trong Panel files.

4.Tạo file index.php:

Bấm phải Site new_2 > Chọn New file > Nhập: index.php > Enter.  Bạn vừa tạo xong Trang index.php. Nhấp đúp lên. Bên phải thấy Tab index.php đang mở và đồng thời dưới đó là Khung Thiết Kế trống. Bạn thấy có 3 Tab: Code: Chỉ hiển thị Code các đoạn mã – Tab Split hiển thị vừa Code vừa Design – Tab Design hiển thị khung trắng cho bạn thiết kế lên đó. Khung Title để bạn nhập tiêu đề cho từng trang khi mở ra trên trình duyệt nó hiển thị trên cùng.

5.Tạo Bố Cục cho trang Web (Tạo Layout):

Thông thường mỗi Website thường có bố cục như sau: Gồm 4 hàng: Hàng trên cùng chứa Banner quảng cáo – Hàng thứ 2: Chứa Menu ngang – Hàng thứ 3: Chứa Ô Menu đứng và bên phải là Ô Contents thay đổi nội dung – Hàng cuối: Chứa thông tin trang Web.

• Tạo Table:  Trong hàng thanh chèn, bấm xổ xuống chọn Common > Bấm nút Table > Xuất hiện CS Table, bạn nhập giá trị theo hình > Ok.

• Tạo từng hàng:
• Hàng Banner có Height 250 pixels: Rê chọn 2 Ô trên cùng> Bấm nút Merges (góc đáy trái) > Ô H nhập 250 > Enter. Đổ màu: Bấm Ô Background Color > Chọn một màu > Enter.

o   Hàng Menu ngang: Merge 2 Ô lại > H nhập 50 > Đổ màu.(có thể chọn nhiều màu bằng cách bấm lên hình quả cầu nhiều màu) rồi chọn một màu.

o   Hàng thứ 3: Nhấp ô bên trái là Ô Menu đứng > W nhập 150 > H nhập 800 > Chọn màu > Enter. Nhấp ô bên phải là Ô Contents chứa nội dung thay đổi > Chọn màu > Enter.

• Xem kết quả: Bấm Ctrl và dấu - để thu nhỏ Trang Bố cục vừa tạo > Ô Align chọn Center để dời vào giữa.
• Cách xem Tab của từng Ô: Khi bạn bấm lên một Ô bạn thấy Tab dưới đó bôi đen thông báo Tab đang chọn > Bám Tab <tr> trước nó > Bạn thấy Ô bôi đen có nghĩa đang chọn Ô đó > Bấm phải lên > Xuất hiện danh sách menu để bạn chọn. Bấm Tab trước đó > Bạn đã chọn cả Table Layout. Và bấm Tab Body > Toàn bộ đã được bôi đen.

6.Cách xem Preview:

Nhập tiêu đề > Bấm nút Save hoặc Save All > Bấm nút Trình duyệt

Bấm Ctrl và dấu - để thu nhỏ Bố cục dể quan sát.

7.Tạo 5 tên Menu trong thanh Menu ngang

• Tạo 5 Ô: Bấm trỏ vào thanh menu ngang > Chọn nút table > Nhập giá trị theo hình > Ok. Vào ô H nhập 50 > Ok. Bấm Tab <tr> để chọn 5 ô > Đổ màu cho 5 Ô.

o   Tạo tên cho từng Ô: Bạn nhập TRANG CHỦ - GIỚI THIỆU – TIN TỨC - SẢN PHẨM – LIÊN HỆ CHO TỪNG Ô.

o   Canh chỉnh:  Bấm Tab <tr> chọn hết các Ô > Bấm Center canh giữa > Bấm B chữ đậm > Ô Size chọn một kích cở > Preview.

• Tạo thêm Thanh menu ngang dưới đó:  Bấm chọn Tab <table> để chọn thanh Menu ngang trước đó > Bấm nút Table > Nhập giá trị giống trước đó và H=50 > Enter.Bạn đã có thanh Menu ngang đồng kích cở.

8.Tạo Folder Templates

• Chọn vùng thay đổi: Thường là Ô Contents nơi thường xuất hiện nội dung của từng menu hoặc của một Link liên kết nào đó. Bấm lên Ô Contentes > Khi bạn bấm vào thấy con trỏ đang nằm bên trái giữa, vào Ô Vert chọn Top > Con trỏ đã ở góc trái trên cùng.
• Tạo Folder Templates: Menu Insert > Template Objects > Editable Religion (Ctrl+Alt+V) > Bấm Ok. Xuất hiện tên EditRegion1.

• Tạo file index.dwt.php: Insert > Template Objects > Make Template > Xuất hiện của sổ Save As Template, chọn tên mặc định index > Save > Ok. Trong panel  files bạn đã thấy folder Tempaltes > Bấm lên > Xuất hiện file index.dwt.php > Bấm lên file này > Bên trái đả có tên index.dwt.php và nội dung bạn đã thiết kế trước đó.

9.Tạo các Trang có tên tương ứng với các tên Menu

• Vào menu File > New > CS New from Tempalte xuất hiện, chọn Tab Templates > Chọn Site new_2 > Bấm lên index > Bấm nút Create.

• Bấm nút Save All > Xuất hiện CS Save As, Nhập Trangchu > Save. Bạn đã thấy file Trangchu.php trong panle files.

• Bạn tạo lần lượt các Trang còn lại: Gioithieu – Tintuc – Sanpham – Lienhe và bạn thấy tên các Trang này xuất hiện trong panel files.

10.Tạo liên kết từng tên Menu với trang tương ứng

• Bấm file index.dwt.php > Bôi đen TRANG CHỦ > Bấm folder Browse for file.

• Xuất hiện CS Select File, Bấm lên Trangchu.php > Ok. Tên menu TRANG CHỦ có gạch dưới (đã có liên kết với trang Trangchu.php).

• Tạo các liên kết còn lại: Tạo liên kết tên Menu GIỚI THIỆU với trang Gioithieu.php cũng thực hiện giống các bước trên. Tạo các liên kết còn lại cho Menu TIN TỨC - SẢN PHẨM – LIÊN HỆ. Sau khi tạo xong các liên kết cho từng Menu, bấm Save All > Bấm Update > Close > Preview. Bạn thấy các tên menu đều có gạch dưới (đã liên kết với trang tuong ứng).

11.Tạo nội dung cho từng Menu

Sau khi bạn đã tạo xong liên kết cho từng Menu và Trang tương ứng, khi bạn bấm lên từng menu bạn không thấy kết quả hiển thị. Có nghĩa là không thấy nội dung của từng menu vì bạn chưa chèn nội dung cho từng Menu.

• Bấm Trangchu.php > Xuất hiện Tab Trangchu.php và nội dung bên dưới, bạn nhập: ĐÂY LÀ NỘI DUNG TRANG CHỦ. Sau đó bạn có thể nhập nội dung khác . Sau đó bạn bấm Save All > Preview > Bấm lên liên kết để xem nội dung của nó.

• Bạn tiếp tục tạo nội dung cho từng Trang Web bằng cách bấm lên từng trang và nhập nội dung vào. Sau cùng bấm save All > Preview. Bấm lên từng liên kết sẽ thấy nội dung của từng trang. Như vậy là bạn đã tạo menu thành công.