Nếu bạn chưa quen với thiết kế web và phát triển front-end (HTML, CSS, Javascript), thì bạn có thể chọn để bắt đầu với trình soạn thảo WYSIWYG. Từ viết tắt này là viết tắt của "những gì bạn thấy là những gì bạn nhận được" và về cơ bản đề cập đến phần mềm cho phép bạn tạo một trang web bằng cách sử dụng các công cụ trực quan trong khi phần mềm viết một số mã đằng sau hậu trường dựa trên những gì bạn đang tạo. Công cụ WYSIWYG phổ biến nhất có thể được cho là Dreamweaver của Adobe .
Dreamweaver là một lựa chọn tốt cho những người mới bắt đầu
Mặc dù nhiều chuyên gia web dày dạn kinh nghiệm với Dreamweaver và xu hướng tạo ra các đánh dấu HTML và CSS phong phú, sự thật đơn giản là nền tảng vẫn là một lựa chọn tốt cho những người mới bắt đầu với thiết kế trang web. Khi bạn bắt đầu sử dụng tùy chọn "thiết kế chế độ xem" của Dreamweaver để xây dựng trang web, một trong những câu hỏi bạn có thể có là cách tạo một ngắt dòng cho nội dung trong chế độ xem đó.
Khi bạn thêm văn bản HTML vào một trang web, trình duyệt web sẽ hiển thị văn bản đó dưới dạng đường dài cho đến khi nó đạt đến cạnh của cửa sổ trình duyệt hoặc phần tử vùng chứa của nó. Tại thời điểm đó, văn bản sẽ được bọc vào dòng tiếp theo. Điều này tương tự như những gì xảy ra trong bất kỳ phần mềm xử lý văn bản nào, như Microsoft Word hoặc Google Documents. Khi một dòng văn bản không còn chỗ trên một đường ngang, nó sẽ bao bọc để bắt đầu một dòng khác. Vì vậy, những gì sẽ xảy ra nếu bạn muốn ra lệnh nơi một dòng phá vỡ?
Khi bạn nhấn phím [ENTER] trong giao diện thiết kế của Dreamweaver, đoạn hiện tại sẽ bị đóng và một đoạn mới sẽ bắt đầu. Trực quan, điều này có nghĩa là hai dòng này được phân tách bằng một khoảng cách dọc. Điều này là do, theo mặc định, các đoạn HTML có đệm hoặc lề (tùy thuộc vào chính trình duyệt) được áp dụng cho phần cuối của đoạn văn có thêm khoảng trống đó.
Điều này có thể được điều chỉnh bằng CSS, nhưng sự thật là bạn muốn có khoảng cách giữa các đoạn văn để cho phép khả năng đọc trang web . Nếu bạn muốn một dòng đơn và không có khoảng cách dọc rộng giữa các dòng, bạn không muốn sử dụng [ENTER] vì bạn không muốn những dòng đó là các đoạn riêng lẻ.
Đối với những thời điểm này khi bạn không muốn đoạn mới bắt đầu, bạn sẽ thêm thẻ
vào HTML. Điều này đôi khi được viết là
. đặc biệt cho các phiên bản XHTML yêu cầu tất cả các phần tử phải đóng. Đường dẫn / trong cú pháp đó tự đóng phần tử vì thẻ
không có thẻ đóng riêng của nó. Đây là tất cả tốt và tốt, nhưng bạn đang làm việc trong Design View trong Dreamweaver. Bạn có thể không muốn nhảy vào mã và thêm các ngắt này. Điều đó là tốt, bởi vì bạn có thể, thực sự, thêm một ngắt dòng trong Dreamweaver mà không cần đến chế độ xem mã.
Thêm một ngắt dòng trong dạng xem thiết kế của Dreamweaver:
- Đặt con trỏ của bạn vào nơi bạn muốn dòng mới bắt đầu.
- Giữ phím shift và nhấn [ENTER].
Đó là nó! Việc bổ sung đơn giản của phím "shift" cùng với [ENTER] sẽ thêm một
thay vì một đoạn mới. Vì vậy, bây giờ bạn biết làm thế nào là này, bạn nên xem xét nơi để sử dụng nó và nơi để tránh nó. Hãy nhớ rằng, HTML có nghĩa là tạo cấu trúc của trang web chứ không phải hình thức trực quan. Bạn không nên sử dụng nhiều thẻ
để tạo khoảng cách dọc bên dưới các phần tử trong thiết kế của bạn.
Đó là những gì các thuộc tính CSS cho padding và lề là cho. Nơi bạn sẽ sử dụng thẻ
là khi bạn chỉ cần ngắt dòng đơn. Ví dụ: nếu bạn đang mã hóa địa chỉ nhận thư và bạn đã quyết định sử dụng một đoạn, bạn có thể thêm các thẻ
như sau:
Tên Công ty
Dòng địa chỉ
Thành phố, Tiểu bang, ZIP
Mã này cho địa chỉ là một đoạn văn, nhưng trực quan nó sẽ hiển thị ba dòng trên các dòng riêng lẻ với một khoảng cách nhỏ giữa chúng.