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 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: [...]... 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ẻ:  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... phải: b Định dạng văn bản  Chọn phần văn bản muốn định dạng 19  Nhắp vào dụ, tôi chọn Heading 2: và chọn định dạng mong muốn từ danh sách thả xuống Ví 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: 20 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... 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 kế bên nhãn Browser: 14 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... 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 33 34 c Thẻ img  Thẻ này được sử dụng để chèn ảnh vào trang web của bạn 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... 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 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... 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 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... cửa sổ Code ở bên nửa trái của vùng làm việc: 15  Nhắp nút  Khi cần, bạn có thể nhắp vào nút để thu gọn các bảng chức năng: để mở rộng các bảng chức năng trở lại 16  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...11 5 Quay lại phiên bản được lưu trước đó của trang  Menu File – Chọn Revert  Đ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... 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... tiêu đề của Dreamweaver: để lưu lại: 24 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: 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 . 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. 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. 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