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

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

1

I Làm quen với Dreamweaver

1 Tổng quan giao diện Dreamweaver

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

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:

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

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:

có thể hiểu tốt hơn về thiết kế web cũng như có thêm một lựa chọn khi làm việc với Dreamweaver là

viết mã thủ công để tối ưu trang web theo cách của mình hay chỉnh sửa lại mã do Dreamweaver sinh ra

a XHTML là gì?

 XHTML là viết tắt của eXtensible HyperText Markup Language

 XHTML là ngôn ngữ định dạng để tạo ra các trang web

 Khi trình duyệt mở ra một trang web thì mã XHTML sẽ cho trình duyệt biết cách thể hiện văn bản, hình ảnh và các nội dung khác có trong trang này

 Dreamweaver CS5.5 sử dụng XHTML Transitional thay cho HTML vì XHTML là phiên bản hoàn thiện hơn của HTML và nó tuân thủ các tiêu chuẩn Web hiện đại

b Thẻ XHTML là gì?

 Đơn vị cơ bản của XHTML được gọi là thẻ:

c Các thẻ XHTML làm việc như thế nào?

 Các thẻ XHTML thường làm việc theo từng cặp: gồm thẻ mở và thẻ đóng bao quanh nội dung muốn định dạng, ví dụ:

 Một số thẻ đứng độc lập, chẳng hạn:

 Mọi thẻ mở XHTML phải có một thẻ đóng Trong trường hợp thẻ độc lập thì nó phải chứa một dấu gạch xiên thuận {/} như trường hợp thẻ <br/>

 XHTML phải được viết bằng các ký tự viết thường

d Tạo trang web có cần kiến thức về XHTML?

 Dreamweaver sắp xếp hợp lý quá trình tạo web bằng cách cung cấp cho bạn một giao diện trực quan và dễ sử dụng; thông quá đó, bạn có thể sinh mã XHTML

 Khi sử dụng Dreamweaver để thiết kế web, bạn có thể thấy trang web của mình xuất hiện như trên trình duyệt thay vì là mã XHTML

e Có thể biên soạn các tài liệu XHTML bằng các bộ soạn thảo văn bản hay không?

 Các tài liệu XHTML là các tập tin thuần văn bản, do đó, bạn có thể mở và biên soạn chúng bằng bất cứ một bộ soạn thảo văn bản nào, chẳng hạn như Notepad, tuy nhiên, nếu sử dụng Dreamweaver, bạn có thể lựa chọn hoặc là tự viết mã XHTML hoặc để Dreamweaver sinh

mã này cho bạn

f Có thể truy xuất trực tiếp mã XHTML?

 Bạn được phép truy xuất và chỉnh sửa trực tiếp mã XHTML ngay trong Dreamweaver thông qua 3 chế độ xem là Code – Design – Split

 Quick Tag Editor để bạn chỉnh sửa mã mà không cần chuyển sang chế độ Code hoặc Design

2 Làm việc trong chế độ Design và Code

 Trên thanh công cụ, nhắp nút để hiển thị mã nguồn của trang trong vùng làm việc:

28

 Nhắp nút để ẩn đi mã nguồn và chuyển sang chế độ thiết kế trực quan cho trang web như thể nó được thể hiện bởi trình duyệt

29

 Nhắp nút để thể hiện đồng thời cả hai chế độ Code và Design trong vùng làm việc:

 Trong vùng Design, nếu bạn chọn một đoạn văn bản bất kỳ thì trong vùng Code, đoạn mã tương ứng với phần văn bản được chọn đó cũng sẽ được chọn:

30

 Tương tự, khi bạn chỉnh sửa trong vùng Code thì nội dung thể hiện trong vùng Design cũng

tự động được cập nhật theo:

Trong chế độ Split, tôi có thể chia ngang vùng làm việc được không?

Mặc định, chế độ Split sẽ chia vùng Code ở phía trái và vùng Design ở phía phải Tuy nhiên, bạn vẫn có thể thấy đổi điều này bằng cách:

 Khi đang ở chế độ Split, từ menu View – tắt tùy chọn Split Vertically:

31

 Lúc này, giao diện của Dreamweaver CS5.5 sẽ như sau:

3 Tìm hiểu thẻ Head và thẻ Body

 Mọi tài liệu XHTML đều chứa thẻ Head và thẻ Body Để xem mã XHTML của trang, bạn nhắp vào nút trên thanh công cụ hoặc từ menu Window – chọn Code Inspector:

32

 Điều này sẽ mở ra một cửa sổ mã nguồn của trang giống như sau:

 Tôi sẽ giải thích một số dòng mã ở đây:

o Dòng DOCTYPE này cho biết tài liệu này được tạo bởi chuẩn XHTML 1.0 Transitional

và đây là chuẩn được khuyến dùng cho hầu hết mọi trang web

o Thẻ mở <html> và thẻ đóng </html> dùng để bắt đầu và kết thúc cho mọi tài liệu HTML

o Thẻ mở <title> và thẻ đóng </title> hiển thị nội dung xuất hiện trên thanh tiêu đề của trình duyệt Web

o Tất cả nội dung được hiển thị trong cửa sổ trình duyệt Web đều chứa bên trong thẻ

mở <body> và thẻ đóng </body>

33

4 Tìm hiểu các thẻ định dạng khối

XHTML được tạo thành từ nhiều loại thẻ khác nhau, mỗi cái được thiết kế để chỉ định một loại định

dạng cụ thể nào đó, chẳng hạn như chia đoạn, định kiểu tiêu đề, hoặc đánh mục đầu dòng…

34

c Thẻ img

 Thẻ này được sử dụng để chèn ảnh vào trang web của bạn

35

d Thẻ p

 Thẻ này được sử dụng để phân đoạn cho nội dung cũng như thêm khoảng cách giữa cách ảnh

và những thành phần khác

5 Vệ sinh cho mã nguồn

Dreamweaver có thể tối ưu mã cho trang web của bạn bằng cách xóa bỏ những thẻ dư thừa hoặc thẻ

không sử dụng, điều thường xuất hiện khi bạn cắt và dán nội dung từ một nguồn khác vào trang web

Điều này giúp giảm dung lượng trang và khiến mã nguồn trang dễ đọc hơn trong chế độ Code

36

 Từ menu Commands – chọn Clean Up XHTML:

37

 Hộp thoại Clean Up HTML/XHTML xuất hiện:

 Nhắp các tùy chọn mà bạn muốn thực hiện “dọn dẹp”:

 Sau đó, nhắp vào nút để thực hiện công việc Dreamweaver sẽ phân tích mã HTML và hiển thị kết quả tóm lược những cái đã được loại bỏ:

 Nhắp vào nút để đóng hộp thoại thông báo này

 Và kết quả sẽ như sau:

38

6 Xem và chỉnh sửa nội dung đầu trang

 Nội dung đầu trang được sử dụng cho các máy tìm kiếm thu thập thông tin về trang web của bạn

a Chèn các từ khóa meta

 Từ menu Insert – HTML – Head Tags – chọn Keywords:

39

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

 Nhập chuỗi từ khóa phân cách bởi dấu phẩy để mô tả nội dung của trang web:

40

 Nhắp nút để lưu thiết lập

b Chèn các mô tả meta

 Từ menu Insert – HTML – Head Tags – chọn Description:

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

 Nhập vào mô tả tóm lược nội dung trang web của bạn:

41

 Nhắp nút để lưu lại thiết lập

 Lúc này, bạn chuyển sang chế độ Code để xem mã nguồn trang, bạn sẽ thấy nó như sau:

7 Chỉnh sửa nhanh các thẻ XHTML

a Sử dụng Quick Tag Editor

 Chọn vùng trang mà bạn muốn chỉnh sửa, ví dụ, tôi chọn tiêu đề của bài thơ:

 Lúc đầu tôi sử dụng thẻ h3 cho tiêu đề bài thơ này:

 Với tiêu đề bài thơ được chọn, nhìn xuống thanh trạng thái, bạn cũng sẽ thấy điều này:

43

 Nhập vào thẻ muốn sửa đổi và gõ Enter, ví dụ ở đây tôi sửa thẻ h3 thành h2:

 Lúc này thẻ sẽ được tự động thay đổi trong mã HTML và cập nhật trực quan trọng vùng thiết kế:

45

 Lúc này thẻ sẽ được tự động thay đổi trong mã HTML và cập nhật trực quan trọng vùng thiết kế:

46

8 Sử dụng Snippets để thêm các định dạng đặc biệt

Bạn có thể chèn những đoạn mã ngắn được viết trước từ bảng chức năng Snippets Đây là một tính năng tiện lợi để thêm định dạng đặc biệt và lưu những tùy chọn định dạng thường sử dụng

 Từ menu Window – chọn Snippets:

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

47

 Nhắp vào vị trí mà bạn muốn snippet xuất hiện Ví dụ tôi muốn xuất hiện cạnh tiêu đề của bài thơ:

 Tìm snippet muốn thêm và nhắp kép vào nó:

 Snippet ngay lập tức được chèn vào nội dung trang:

49

 Trong bảng thuộc tính, nhắp vào nút

 Trong danh sách thả xuống, chọn Heading 1:

 Dòng được chọn sẽ tự động chuyển đổi như sau:

Lưu ý:

o Heading 1, 2 và 3 thường được sử dụng cho tiêu đề và phụ đề

o Heading 4 tương tự dạng in đậm của font chữ mặc định

o Heading 5 và 6 thường dùng cho các dòng văn bản nhỏ hơn chẳng hạn thông tin bản quyền