Як додати та відформатувати текст у Dreamweaver

Багато людей приємно здивовані тим, як легко вони можуть створити базову веб-сторінку з текстом і зображеннями в Dreamweaver. Ви можете виконати базове форматування тексту, використовуючи параметри форматування HTML Dreamweaver, включаючи теги заголовка та абзацу. Почніть з цих базових тегів HTML, щоб спочатку було просто.

Як додати текст на веб-сторінку в Dreamweaver

Щоб додати текст на сторінку, ви можете просто клацнути, щоб вставити курсор у верхній частині сторінки та ввести. Якщо ви хочете додати текст, який у вас є в іншому місці, наприклад, у файлі, створеному в Microsoft Word, ви можете скопіювати та вставити текст у Dreamweaver замість того, щоб повторно вводити його.

Dreamweaver пропонує багато способів підтримувати форматування під час копіювання та вставлення тексту з іншої програми. Ця функція особливо важлива під час копіювання тексту з Microsoft Word, оскільки якщо ви просто вставите текст як є, ви ризикуєте включити багато додаткового коду, який є унікальним для Microsoft Word і може спричинити проблеми на вашій веб-сторінці.

Ви можете змінити за замовчуванням те, як Dreamweaver обробляє форматування, коли ви вибираєте «Редагувати→Вставити», змінивши Параметри в категорії Копіювати/Вставити. Ви також можете вибрати Редагувати→ Спеціальна вставка, щоб відображати ці параметри щоразу, коли ви вставляєте новий вміст.

Нижче наведено чотири основні варіанти вставки тексту, коли ви вибираєте Редагувати→ Спеціальна вставка, а також три способи уточнити свій вибір:

• Лише текст: Dreamweaver видаляє будь-яке форматування та вставляє звичайний текст.

• Текст зі структурою: Dreamweaver включає абзаци, списки, таблиці та інші параметри структурного форматування.

• Текст із базовим форматуванням Structure Plus: Dreamweaver включає структурне форматування, а також основне форматування, наприклад напівжирний та курсив.

• Текст із повним форматуванням Structure Plus: на додаток до попередніх параметрів Dreamweaver включає форматування, створене за допомогою таблиць стилів у таких програмах, як Microsoft Word.

• Зберігати розриви рядків : розриви рядків зберігаються, навіть якщо ви не зберігаєте інші параметри форматування. Ця опція недоступна, якщо ви вибрали Лише текст.

• Очищення інтервалу між абзацами Word: цей параметр видаляє спеціальний код форматування, унікальний для Microsoft Word, і є непотрібним (і не рекомендованим) для тексту в Інтернеті.

• Перетворення розумних цитат у прямі цитати. Розумні цитати — загальна назва тих химерних фігурних цитат, які дизайнери люблять використовувати в друкованих документах — вимагають спеціального символу, щоб правильно відображатися в Інтернеті, і цей спеціальний символ не працює у всіх веб-браузерах. . Щоб уникнути цієї потенційної проблеми, установіть цей прапорець і конвертуйте всі свої розумні лапки в прямі.

Як відформатувати текст з тегами заголовків у Dreamweaver

Одним з найкращих варіантів форматування заголовків є набір тегів заголовків. У HTML, використовуючи теги заголовків (

,

і так далі) форматування тексту, який служить заголовком або заголовком, має багато переваг. Теги заголовків призначені для відображення у відносних розмірах з

Найбільший,

менший,

ще менше, і так далі

.

Тож незалежно від розміру тексту веб-сторінки за замовчуванням (а розміри тексту можуть відрізнятися залежно від налаштувань браузера та платформи комп’ютера), будь-який текст, відформатований за допомогою

тег завжди більший за текст, відформатований за допомогою

.

Поширена думка полягає в тому, що багато пошукових систем надають пріоритет ключовим словам у тексті, відформатованому за допомогою

тег, оскільки найважливіший текст на сторінці зазвичай включається в заголовок найбільшого розміру. Аналогічно, експерти пошукових систем скажуть вам, що ви повинні використовувати

тег лише один раз на сторінку.

Щоб відформатувати текст із тегом заголовка, виконайте такі дії:

Виділіть текст, який потрібно відформатувати.

У інспекторі властивостей у нижній частині робочого простору переконайтеся, що вибрано кнопку HTML зліва від інспектора.

Використовуйте спадний список Формат, щоб вибрати параметр заголовка.

Коли використовуються теги заголовків, текст автоматично змінюється на великий і напівжирний у режимі перегляду дизайну.

Авторство: Фото Кейсі Столла

Загалом, інспектор властивостей — це найпростіший спосіб застосувати основне форматування, але ви також можете знайти ці параметри форматування HTML, вибравши Формат→ Формат абзацу, а потім вибравши параметр заголовка з підменю, що з’явиться.

Як додати абзаци та розриви рядків у Dreamweaver

Коли ви створюєте дизайн сторінок для Інтернету, ви повинні працювати з багатьма обмеженнями, які спочатку можуть здатися заплутаними. Веб-дизайн і поліграфічний дизайн кардинально відрізняються, і це може зробити навіть прості, здавалося б, завдання складнішими, ніж ви могли очікувати. Як ви створюєте розриви абзаців і рядків є хорошим прикладом.

Якщо ви працюєте в режимі конструктора в Dreamweaver і натискаєте клавішу Enter (Windows) або клавішу Return (Mac), Dreamweaver вставляє тег абзацу або

, у коді, який створює розрив рядка, за яким слідує порожній рядок.

Якщо ви хочете розбити рядок без зайвого порожнього рядка, утримуйте клавішу Shift, натискаючи клавішу Enter (або Return), щоб сказати Dreamweaver вставити
тег у код, створивши один розрив рядка.

Найкраща практика — уникати використання кількох тегів абзацу або розриву для створення додаткового простору на веб-сторінці (і не всі браузери збережуть порожній простір, якщо ви створите його таким чином). Якщо ви хочете додати багато простору між абзацами або іншими елементами на сторінці, найкращим варіантом є використання CSS.

Якщо ви працюєте в режимі перегляду коду та додаєте пробіл за допомогою клавіші Enter або Return, ви додаєте пробіл у коді. Додатковий простір у коді HTML може бути корисним, оскільки додатковий простір може полегшити читання коду, але загалом це не впливає на те, як сторінка відображається в режимі конструктора або у веб-браузері.