Tải bản đầy đủ (.pdf) (59 trang)

Hướng dẫn sử dụng adobe dreamweaver CS5 5 cơ bản

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.37 MB, 59 trang )



1
I. Làm quen với Dreamweaver
1. Tổng quan giao diện Dreamweaver

a. Menu

Chứa các lệnh để sử dụng Dreamweaver
b. Thanh công cụ

Chứa các lệnh để xem trước cũng như hiển thị các tính năng và đặt tiêu đề cho trang


2
c. Bảng component

Có nhiều bảng component khác nhau để bạn chọn lựa theo như cầu để đưa component vào trang thiết kế:

d. Vùng làm việc chính


3

e. Bảng chức năng



4
f. Bảng thuộc tính


2. Làm hiện hoặc ẩn đi một cửa sổ hoặc bảng điều khiển
Sử dụng menu Window để hiện/ẩn cửa sổ làm việc hoặc bảng điều khiển:

Ví dụ:
Để mở bảng thuộc tính, từ thanh Menu: Chọn Window – Properties:



5
II. Thiết kế website với Dreamweaver
Trước khi bắt tay vào thiết kế các trang web, bạn cần thiết lập một số các thuộc tính trong Dreamweaver
1. Thiết lập một website mới
 Menu Site – Chọn New Site

 Hộp thoại Site Setup xuất hiện:



6
 Nhập tên cho website:

 Chỉ định vị trí lưu website bằng cách nhắp vào nút
 Hộp thoại Choose Root Folder xuất hiện:

 Chọn vị trí mà bạn muốn lưu các trang web của mình
o Bạn có thể tạo một thư mục mới cho site bằng cách nhắp vào , nhập vào tên thư mục và gõ
Enter.
 Nhắp nút
 Lúc này, bạn sẽ quay về hộp thoại Site Setup. Tiếp theo bạn nhắp nút
Lưu ý: Tất cả các tập tin của website cần được lưu trong cùng một thư mục gốc trên máy tính! Điều này

giúp bạn nhẹ nhàng hơn khi chuyển dữ liệu của website đã được thiết kế hoàn chỉnh lên web server mà
không cần thay đổi cấu trúc các tập tin và đường dẫn.
2. Tạo một trang web mới
 Từ menu File – Chọn New


7

 Hộp thoại New Document xuất hiện:



8
 Nhắp vào Tab
 Nhắp vào để chỉ định chủng loại của trang muốn tạo mới
 Nhắp vào để tạo một trang trắng
Lưu ý: Bạn cũng có thể tạo trang dựa trên những định dạng có sẵn trong vùng Layout của hộp
thoại này:

 Nhắp nút

3. Thêm tiêu đề cho trang web
 Tiêu đề của trang web sẽ xuất hiện trên thanh tiêu đề khi trang được mở ra từ trình duyệt web. Tiêu
đề này sẽ giúp các máy tìm kiếm (như Google, Bing…) có thể đánh chỉ mục cho trang chính xác
hơn.
 Khi tạo ra một trang mới, Dreamweaver sẽ mặc định cho tên trang và tên tập tin là “Untitled” cho
đến khi bạn thực sự lưu chúng.




9
 Để đặt tiêu đề cho trang, bạn hãy nhập vào vùng textbox cạnh nhãn Title và gõ Enter khi hoàn tất.

 Khi đó, tiêu đề sẽ xuất hiện trên thanh tiêu đề của trình duyệt:

4. Lưu trang web
Bạn nên lưu trang web của mình lại ngay khi tạo, cũng như trước khi đóng Dreamweaver hoặc chuyển trang lên
web server. Đồng thời tôi cũng khuyên bạn hãy xuyên thực hiện thao tác này trong suốt quá trình thiết kế để
tránh mất dữ liệu do các yếu tố bất ngờ như cắt điện hoặc lỗi hệ thống.
 Menu File – Chọn Save:

o Chọn Save As… để tạo một bản lưu khác cho tập tin đang tồn tại
o Nếu là lần đầu thực hiện lưu trang, hộp thoại Save As sẽ xuất hiện:


10

 Chọn thư mục để lưu trang:

 Nhập tên trang web:

 Nhắp nút để lưu lại:


11

5. Quay lại phiên bản được lưu trước đó của trang
 Menu File – Chọn Revert




12
 Điều này sẽ đưa trang về phiên bản được lưu trước đó. Tất cả những thay đổi thực hiện từ lần lưu
mới nhất sẽ mất toàn bộ.
Lưu ý: Nếu bạn thoát Dreamweaver sau khi lưu trang, Dreamweaver sẽ không thể quay lại phiên
bản trước.
6. Xem trước trang web trong trình duyệt
Nếu muốn xem trang web của mình sẽ xuất hiện như thế nào trên trình duyệt, bạn có thể sử dụng chức năng
Preview in Browser.
 Trên thanh công cụ, nhắp vào nút

 Danh sách các trình duyệt được cài trên máy bạn xuất hiện:

o Bạn cũng có thể xem trước trang bằng trình duyệt mặc định trên máy bạn bằng cách nhấn
phím F12
7. Thêm một trình duyệt vào danh sách các trình duyệt
Vì cách các trình duyệt hiển thị trang web là khác nhau nên bạn cần kiểm tra xem trang của mình sẽ hiển
thị như thế nào trên các trình duyệt đó và đảm bảo rằng khách ghé thăm sẽ thấy được bố cục và nội dung
trang mà bạn mong muốn. Theo mặc định, Dreamweaver sẽ tự tìm và nhận diện những trình duyệt được
cài trên máy tính của bạn. Tuy nhiên, vì một lý do nào đó mà một trình duyệt không xuất hiện trong
danh sách đã nói ở phần trên; và phần này tôi sẽ hướng dẫn bạn them một trình duyệt vào danh sách đó.
 Menu File - Preview in Browser – Edit Browser List:


13

 Hộp thoại Preferences xuất hiện:




14
 Nhắp vào nút kế bên nhãn Browser:

 Hộp thoại Add Browser xuất hiện:

 Nhập tên của trình duyệt:

 Nhắp nút và chọn đường dẫn đến trình duyệt bạn cần them
 Nhắp nút để lưu thiết lập và đóng hộp thoại Add Browser
 Khi quay lại hộp thoại Preferences, bạn lại nhắp nút để lưu và đóng hộp thoại này lại
 Lúc này, trình duyệt vừa them sẽ xuất hiện trong danh sách trình duyệt.

III. Tìm hiểu giao diện của Dreamweaver CS5.5
1. Chọn bố cục vùng làm việc
Với Dreamweaver CS5.5, bạn có thể chọn bố cục vùng làm việc phù hợp với nhu cầu của mình. Ví dụ,
bạn chọn bố cục Designer để tập trung vào các chức năng thiết kế sẵn có của Dreamweaver, còn bố cục
Coder thì để bạn tập trung vào việc lập trình, hoặc nếu bạn đã quen thuộc với bố cục của Dreamweaver
CS3 thì bạn chọn Classic.
 Để chọn bố cục vùng làm việc, bạn nhắp vào nút :



15
 Điều này sẽ là mở ra một menu:

 Lúc này bạn có thể chọn bố cùng vùng làm việc phù hợp với nhu cầu của mình.

2. Tùy chỉnh vùng làm việc
 Trên thanh công cụ, nhắp vào nút


o Điều này sẽ mở ra cửa sổ Code ở bên nửa trái của vùng làm việc:



16
 Nhắp nút để thu gọn các bảng chức năng:

 Khi cần, bạn có thể nhắp vào nút để mở rộng các bảng chức năng trở lại



17
 Nhắp kép bất cứ đâu trong thanh màu xám nằm trên bảng thuộc tính để thu gọn nó:

 Để mở rộng lại bảng thuộc tính, bạn nhắp kép vào thanh màu xám này lại lần nữa.

3. Định dạng nội dung bằng bảng thuộc tính
a. Định dạng hình ảnh
 Nhắp vào để chọn ảnh muốn định dạng


18

 Lúc này, các thuộc tính ảnh sẽ xuất hiện trong cửa sổ thuộc tính:

 Thông qua cửa sổ này, bạn có thể thay đổi nhiều thuộc tính ảnh chẳng hạn như kích thước
biên hoặc gióng hàng cho ảnh.
Ví dụ:
o Để các dòng chữ trong bài viết bao quanh ảnh, bạn nhắp nút kế nhãn Align:


o Từ danh sách thả xuống, bạn nhắp một tùy chọn gióng hang, chẳng hạn tôi chọn Left



19
o Các dòng chữ sẽ tự động bao quanh ảnh khi bạn căn hàng cho ảnh theo phía trái hàng
phía phải:

b. Định dạng văn bản
 Chọn phần văn bản muốn định dạng



20
 Nhắp vào và chọn định dạng mong muốn từ danh sách thả xuống. Ví
dụ, tôi chọn Heading 2:

4. Mở một bảng chức năng
 Từ menu Window, chọn bảng chức năng muốn mở, ví dụ, tôi muốn mở bảng chức năng
Files:

 Bảng chức năng vừa chọn sẽ xuất hiện:


21

5. Mở và tùy chọn bảng chức năng Insert
 Từ menu Window – Chọn Insert:

 Bảng chức năng Insert xuất hiện:



22

 Để thu gọn bảng chức năng Insert, bạn nhắp vào và chọn Hide Labels:



23
 Khi đó, bảng chức năng Insert sẽ trông giống như sau:

 Nhắp vào thanh xám ở trên bất cứ bảng chức năng nào sẽ khiến nó thu gọn lại hoặc mở rộng
ra.

 Các bảng chức năng sẽ tự điều chỉnh kích thước chính nó để phù hợp với khoảng trống của
nơi bạn rê nó vào:



24
6. Lưu bố cục làm việc riêng của bạn
Đôi khi vì nhu cầu cá nhân, những bố cục có sẵn của Dreamweaver không đem lại sự thuận tiện nhất
cho bạn, và bạn cần sắp xếp lại nó. Sau khi thiết lập và sắp xếp ưng ý, bạn muốn lưu lại bố cục này
để sử dụng cho lần sau. Bạn làm điều đó như sau:
 Nhắp vào nút trên thanh tiêu đề của Dreamweaver:

 Trong danh sách thả xuống, bạn chọn New Workspace:

 Hộp thoại New Workspace xuất hiện:


 Nhập tên mà bạn muốn đặt cho bố cục này và nhấn nút để lưu lại:


25

7. Thiết lập sở thích
Bạn có thể dễ dàng sửa đổi giao diện và nhiều tùy chọn mặc định của Dreamweaver để phù hợp với
nhu cầu làm việc của bạn thông qua hộp thoại Preferences.
 Từ menu Edit – chọn Preferences

 Hộp thoại Preferences xuất hiện:

×