59
1 I. Làm quen vi Dreamweaver 1. Tng quan giao din Dreamweaver a. Menu Ch a các l ệnh để sdng Dreamweaver b. Thanh công cCh 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

Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

Embed Size (px)

DESCRIPTION

Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

Citation preview

Page 1: 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

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

Page 2: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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

Page 3: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

3

e. Bảng chức năng

Page 4: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 5: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 6: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bả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

Page 7: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

7

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

Page 8: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bả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.

Page 9: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 10: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

10

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

Nhập tên trang web:

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

Page 11: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

11

5. Quay lại phiên bản được lưu trước đó của trang

Menu File – Chọn Revert

Page 12: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 13: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

13

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

Page 14: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bả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 :

Page 15: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 16: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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

Page 17: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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

Page 18: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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

Page 19: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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

Page 20: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 21: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bả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:

Page 22: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

22

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

Page 23: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 24: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 25: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 26: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

26

IV. Làm việc với XHTML

1. Tổng quan về XHTML

Tính năng tự động sinh ra XHTML của Dreamweaver giúp bạn đáng kể trong việc tiết kiệm thời gian và

tránh mắc phải những lỗi phức tạp. Tuy nhiên, nếu có được những kiến thức cơ bản về XHTML thì bạ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ẻ:

Page 27: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

27 Bạn có thể định dạng văn bản và các thành phần khác có trên trang web bằng cách đặt chúng

trong các thẻ XHTML.

Khi sử dụng các công cụ định dạng của Dreamweaver, chương trình sẽ tự chèn thẻ vào mã

cho bạn.

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ã nguồn Thể hiệ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:

Page 28: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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.

Page 29: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 30: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bả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:

Page 31: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 32: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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>

Page 33: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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…

a. Thẻ div

Thẻ div được sử dụng để chia nội dung và thường được kết hợp với các style CSS

b. Thẻ h1 đến h6

Những thẻ này được sử dụng để định dạng các tiêu đề, thẻ h1 sẽ có style lớn nhất và h6 sẽ

cho style nhỏ nhất

Page 34: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

34

c. Thẻ img

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

Page 35: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ 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.

Page 36: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

36

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

Page 37: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 38: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 39: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 40: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 41: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ 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:

Page 42: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

42

Nhắp phải vào thẻ bạn muốn chỉnh sửa trong thanh trạng thái, khi menu ngữ cảnh xuất hiện,

bạn chọn Quick Tag Editor. Ví dụ, tôi muốn chỉnh sửa thẻ h3 thành thẻ h2:

Lúc này sẽ xuất hiện một bảng như sau:

Page 43: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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ế:

Page 44: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

44 b. Sử dụng Remove Tag

Chọn vùng trang mà bạn muốn chỉnh sửa, ví dụ, tôi muốn hủy thẻ h3 bao quanh tiêu đề bài

thơ trên:

Nhắp phải vào thẻ bạn muốn chỉnh sửa trong thanh trạng thái, khi menu ngữ cảnh xuất hiện,

bạn chọn Remove Tag:

Page 45: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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ế:

Page 46: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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:

Page 47: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bả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:

Page 48: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

48

V. Định dạng và trang trí văn bản

1. Tạo đầu mục

Đánh dấu dòng bạn muốn sử dụng làm đầu mục chính:

Page 49: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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.

Page 50: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

50 2. Sử dụng phim Enter trong vùng thiết kế

Khi gõ Enter trong vùng thiết kế có nghĩa là bạn đã thêm một thẻ p vào mã nguồn trang. Nó

sẽ tạo ra một thẻ ngắt hàng và phân cách giữa các đoạn.

Ngay khi gõ Enter, vùng Code sẽ tự động được chèn thẻ p:

Page 51: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

51 3. Tạo phân đoạn

Đặt trỏ chuột tại vị trí muốn phân đoạn và gõ Enter:

Một hàng trắng sẽ xuất hiện giữa các phân đoạn để tạo sự tách biệt:

4. Căn hàng cho phân đoạn

Chọn phân đoạn muốn căn hàng:

Page 52: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

52

Từ menu Format – Align – chọn hình thức căn hàng muốn thực hiện, ví dụ, tôi chọn căn

giữa:

Khi này, phân đoạn sẽ được cập nhật định dạng:

Page 53: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

53 Lưu ý: Trong HTML, các phân đoạn được bao quanh bởi thẻ mở <p> và thẻ đóng </p>. Trong

chế độ Code bạn sẽ dễ dàng thấy được điều này:

5. Ngắt hàng

Nhắp vào vị trí muốn tạo ngắt hàng và nhấn

Thẻ ngắt hàng <br/> sẽ được tự thêm vào vùng Code:

Page 54: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

54

6. Lùi dòng phân đoạn với thẻ Blockquote

Trong HTML, thẻ <blockquote> thường được sử dụng cho những đoạn trích dẫn dài, tuy nhiên, chúng

ta cũng có thể sử dụng nó để lùi dòng cho phân đoạn.

Chọn phân đoạn muốn lùi dòng:

Page 55: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

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

Phân đoạn được chọn sẽ lùi vào:

Nếu muốn lùi thêm vào nữa, bạn vẫn có thể nhắp nút đến khi nào thỏa mãn thì thôi, ở đây

tôi sẽ nhắp thêm một lần nữa, và kết quả sẽ là:

Ngược lại với tính năng lùi dòng này, bạn có thể “tiến” dòng bằng cách nhắp vào nút để

có kết quả ngược lại.

Page 56: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

56 7. Tạo danh sách

Nếu muốn liệt kê một danh sách gì đó bạn sẽ thường muốn sắp xếp chúng theo trật tự và đánh dấu hoa

thị đầu dòng trước khi liệt tên của chúng ra. Và trong phần này, tôi sẽ hướng dẫn bạn tạo danh sách

trong Dreamweaver.CS5.5.

a. Tạo danh sách điểm mục đầu dòng

Ở đây, tôi có một trang với nội dung như sau:

Tôi muốn tạo một danh bao gồm Mục 1 đến Mục 5. Để vậy, đầu tiên tôi sẽ chọn tất cả chúng:

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

Page 57: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

57

Kết quả thao tác này sẽ cho chúng ta danh sách mong muốn:

b. Tạo danh sách đánh số đầu dòng

Thay vì nhắp nút để điểm mục đầu dòng thì ta nhắp nút để tạo danh sách đánh số đầu

dòng.

Quay lại ví dụ trên, tương tự, ta chọn tất cả các dòng muốn tạo danh sách:

Page 58: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

58 Trong bảng thuộc tính, nhắp nút

Ta sẽ được kết quả như sau:

c. Thay đổi kiểu điểm mục và dạng số khi tạo danh sách

Ở phần a và b, tôi đã hướng dẫn các bạn tạo danh sách điểm mục và đánh số. Nếu để ý kỹ

bạn sẽ thấy ở phần điểm mục là những dấu tròn đen xuất hiện đầu dòng và ở phần đánh số là

những ký tự số trong hệ thập phân.

Bây giờ, nếu muốn thay đổi các dấu chấm tròn bằng dấu chấm vuông và các số thập phân

bằng các số La Mã thì phải làm như thế nào?

Bây giờ tôi sẽ hướng dẫn các bạn làm việc này.

Từ menu Format – List – chọn Properties:

Page 59: Hướng dẫn sử dụng Adobe Dreamweaver CS5.5 cơ bản

59 Hộp thoại List Properties xuất hiện:

Nhấn nút kế nhãn List type để chọn kiểu tạo danh sách cần thiết lập:

Trong danh sách thả xuống, có 2 phần tương ứng với hai kiểu danh sách mà tôi đã trình bày:

o Bulleted List: Danh sách điểm mục

o Numbered List: Danh sách đánh số

Tiếp đó, bạn lại nhắp nút kế nhãn Style để chọn kiểu:

o Với kiểu điểm mục bạn sẽ có các kiểu sau:

o Tương tự, với kiểu đánh số bạn cũng có các dạng: