Bạn không cần phải sử dụng chỉ WYSIWYG
Dreamweaver là một trình soạn thảo WYSIWYG tuyệt vời, nhưng nếu bạn không thích viết các trang web trong môi trường "bạn thấy là những gì bạn nhận được", bạn vẫn có thể sử dụng Dreamweaver vì nó cũng là một trình soạn thảo văn bản tuyệt vời. Nhưng có rất nhiều tính năng trượt theo bên trong trình chỉnh sửa mã Dreamweaver vì trọng tâm chính là trên phần "thiết kế xem" hoặc phần trình soạn thảo WYSIWYG của sản phẩm.
Làm thế nào để có được vào xem mã Dreamweaver
Nếu bạn chưa bao giờ sử dụng Dreamweaver như một trình soạn thảo HTML trước khi bạn có thể chưa bao giờ nhận thấy ba nút ở đầu trang: "Code", "Split" và "Design". Dreamweaver khởi động theo mặc định trong chế độ "Design view" hoặc WYSIWYG. Nhưng thật dễ dàng để chuyển sang xem và chỉnh sửa mã HTML. Chỉ cần nhấp vào nút "Mã". Hoặc, vào menu Xem và chọn "Mã".
Nếu bạn chỉ học cách viết HTML hoặc bạn muốn hiểu được các thay đổi của bạn sẽ tác động như thế nào đến tài liệu của bạn, bạn có thể mở chế độ xem mã và chế độ xem thiết kế cùng một lúc. Vẻ đẹp của phương pháp này là bạn có thể chỉnh sửa trong cả hai cửa sổ. Vì vậy, bạn có thể viết mã cho thẻ hình ảnh của bạn trong HTML và sau đó sử dụng chế độ xem thiết kế để di chuyển nó đến vị trí khác trên trang bằng cách kéo và thả.
Để xem cả hai cùng một lúc, hãy:
- Nhấp vào nút "Chia" (giữa "Mã" và "Thiết kế")
- Trong menu Xem, chọn "Mã và Thiết kế"
Khi bạn cảm thấy thoải mái khi sử dụng Dreamweaver để chỉnh sửa mã HTML của mình, bạn có thể thay đổi tùy chọn của mình để mở Dreamweaver trong chế độ xem mã theo mặc định. Cách dễ nhất là lưu chế độ xem mã dưới dạng không gian làm việc. Dreamweaver sẽ mở trong không gian làm việc cuối cùng mà bạn đang sử dụng. Nếu không, chỉ cần vào menu Window và chọn không gian làm việc bạn muốn.
Tùy chọn Chế độ xem Mã
Dreamweaver là rất linh hoạt bởi vì nó có rất nhiều cách để tùy chỉnh nó và làm cho nó hoạt động theo cách bạn muốn. Trong cửa sổ tùy chọn, có mã màu, định dạng mã, gợi ý mã và các tùy chọn viết lại mã bạn có thể điều chỉnh. Nhưng bạn cũng có thể thay đổi một số tùy chọn đặc biệt trong chính chế độ xem mã.
Khi bạn đang ở chế độ xem mã, có một nút "Tùy chọn Chế độ xem" trong thanh công cụ. Bạn cũng có thể xem các tùy chọn bằng cách vào menu Xem và chọn "Tùy chọn Chế độ xem Mã". Các tùy chọn là:
- Word Wrap - bao bọc mã HTML để bạn có thể xem nó mà không cần cuộn theo chiều ngang. Lưu ý rằng tùy chọn này không chèn bất kỳ trở về vận chuyển nào trong mã của bạn, nó chỉ hiển thị mã để dễ đọc hơn.
- Số dòng - hiển thị số dòng dọc theo bên của mã. Nó cho thấy một biểu tượng bọc đường cho các đường bao bọc dài hơn cửa sổ xem.
- Ký tự ẩn - hiển thị các ký tự đặc biệt thay vì khoảng trắng sẽ hiển thị trên trang web. Chẳng hạn như dấu chấm thay thế một khoảng trắng, một chữ V kép thay thế mỗi tab và một điểm đánh dấu hoặc đoạn văn sẽ thay thế cho mỗi ngắt dòng.
- Đánh dấu Mã không hợp lệ - làm nổi bật HTML không chính xác màu vàng. Nếu bạn chọn thẻ màu vàng, Trình kiểm tra thuộc tính sẽ cung cấp cho bạn các gợi ý về cách khắc phục.
- Cú pháp tô màu - bật hoặc tắt mã màu của mã của bạn. Bạn thay đổi màu sắc của mã hóa màu của bạn trong phần màu mã của các sở thích.
- Tự động thụt lề - làm cho mã của bạn được thụt lề tự động sau khi trở về vận chuyển nếu mã ở trên nó được thụt vào. Bạn có thể thay đổi kích thước của thụt lề bằng cách thay đổi kích thước tab trong phần định dạng mã của các tùy chọn.
Chỉnh sửa mã HTML trong chế độ xem mã Dreamweaver
Thật dễ dàng để chỉnh sửa mã HTML trong chế độ xem mã của Dreamweaver. Chỉ cần bắt đầu nhập HTML của bạn. Nhưng Dreamweaver cung cấp cho bạn một số tính năng mở rộng vượt ra ngoài một trình soạn thảo HTML cơ bản. Khi bạn bắt đầu viết một thẻ HTML, bạn gõ <. Nếu bạn tạm dừng ngay sau ký tự đó, Dreamweaver sẽ hiển thị cho bạn một danh sách các thẻ HTML . Đây được gọi là gợi ý mã. Để thu hẹp lựa chọn, hãy bắt đầu nhập các chữ cái - Dreamweaver sẽ thu hẹp danh sách thả xuống vào thẻ phù hợp với những gì bạn đang nhập.
Nếu bạn mới sử dụng HTML, bạn có thể cuộn qua danh sách các thẻ HTML và chọn các thẻ khác nhau để xem chúng làm gì. Dreamweaver sẽ tiếp tục nhắc bạn về các thuộc tính khi bạn đã nhập một thẻ. Ví dụ: nếu bạn nhập ".
Nhưng các gợi ý mã không kết thúc ở các thẻ. Bạn có thể sử dụng các gợi ý mã để chèn:
Nếu các gợi ý mã không xuất hiện, bạn có thể nhấn Ctrl-spacebar (Windows) hoặc Cmd-spacebar (Macintosh) để hiển thị chúng. Lý do phổ biến nhất tại sao một gợi ý mã có thể không xuất hiện là nếu bạn chuyển sang một cửa sổ khác trước khi hoàn thành thẻ của bạn. Bởi vì Dreamweaver là keying off đánh máy của nhân vật <, nếu bạn rời khỏi cửa sổ và trở về, bạn sẽ phải khởi động lại các gợi ý mã.
Bạn có thể tắt menu gợi ý mã bằng cách nhấn phím thoát.
Khi bạn đã nhập thẻ HTML mở, bạn sẽ cần phải đóng nó. Dreamweaver thực hiện điều này một cách tự nhiên. Nếu bạn nhập tùy chọn "Đóng thẻ phù hợp nhất với nhu cầu của bạn.
Nếu bạn chưa sẵn sàng chuyển sang chỉnh sửa các trang của mình bằng HTML nhưng bạn muốn xem mã như được viết, bạn nên thử trình kiểm tra mã. Thao tác này sẽ mở mã HTML trong một cửa sổ riêng. Nó hoạt động giống như mã xem, và, trên thực tế, về cơ bản là một cửa sổ xem mã có thể tháo rời cho tài liệu hiện tại. Để mở thanh tra mã, hãy chuyển đến trình đơn Cửa sổ và chọn "Trình kiểm tra mã" hoặc nhấn phím F10 trên bàn phím của bạn.
Dreamweaver sẽ định dạng mã HTML tuy nhiên bạn muốn nó được hiển thị. Ví dụ: nếu bạn sử dụng 3 dấu cách để thụt lề, nhưng không bao giờ thụt lề các thẻ IMG, bạn có thể chỉ định thông tin định dạng đó trong các tùy chọn viết lại mã. Sau đó, bạn vào menu Lệnh và chọn "Áp dụng Định dạng Nguồn." Đây là một cách tuyệt vời để có được mã được viết bởi người khác vào một định dạng quen thuộc với bạn.
Một tính năng mà nhiều lập trình viên HTML không biết hoặc không sử dụng là khả năng thu gọn mã HTML. Thao tác này không xóa các thẻ khỏi tài liệu nhưng chỉ xóa chúng khỏi chế độ xem sao cho chúng không làm mất tập trung vào những gì bạn đang làm. Để thu gọn mã của bạn:
- Chọn phần mã bạn muốn ẩn
- Trong menu Edit, chọn "Collapse Selection" từ menu phụ "Code Collapse"
Một cách dễ dàng hơn là chọn mã và sau đó nhấp vào các biểu tượng thu gọn mã xuất hiện trong máng xối. Bạn cũng có thể nhấp chuột phải vào mã đã chọn và chọn "Thu gọn lựa chọn".
Nếu bạn muốn ẩn mọi thứ ngoại trừ những gì được đánh dấu, hãy chọn "Thu gọn lựa chọn bên ngoài" trong bất kỳ phương pháp nào ở trên.
Để mở rộng mã thu gọn, chỉ cần nhấp đúp vào mã đó. Điều này sẽ mở mã và chọn nó. Sau đó, bạn có thể di chuyển lựa chọn đó hoặc xóa hoặc thêm các thẻ khác xung quanh lựa chọn đó.
Bạn có thể sử dụng tính năng thu gọn và mở rộng mọi lúc trên các trang mà bạn không muốn chỉnh sửa mẫu bên ngoài. Bạn chỉ cần chọn vùng nội dung bạn muốn chỉnh sửa và thu gọn bên ngoài. Sau đó viết HTML của bạn. Bạn vẫn có thể xem trang trong dạng xem thiết kế hoặc xem trước nó trong trình duyệt. Mã thu gọn không bị xóa khỏi tài liệu, chỉ cần ẩn khỏi chế độ xem. Bạn cũng có thể sử dụng nó khi bạn đang làm việc trên một loạt các mục. Khi bạn đã hoàn thành một, thu gọn nó. Bạn biết bạn đã hoàn tất khi không có mã hiển thị.