Отправляет email-рассылки с помощью сервиса Sendsay

Разработка web-страниц, CSS и HTML в Dreamweaver

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

823 подписчиков
-1 за неделю
←   Все выпуски   →

Разработка web-страниц, CSS и HTML в Dreamweaver ВЫПУСК 6


  Разработка Web-страниц. CSS и HTML в Dreamweaver  

  ТЕМА ВЫПУСКА:  

Панель Document

Панель Document содержит кнопки, с помощью которых можно выбрать вариант представления окна рабочего документа.

  • Code, Split, Design  — кнопки выбора режима представления окна рабочего документа:
    • Режим Code — режим просмотра кода,
    • Режим Split — одновременно отображаются визуальное представление (окно Design) и соответствующий код (окно Code).
    • Режим Design — отображается визуальное представление (окно Design)
      Для начального этапа работы наиболее удобен режим Split. Нажмите на кнопку Split для выбора удобного режима.
  • Title — название web-страницы.
  • File Management (Управление файлами) – отображает выпадающее меню управления файлами.
  • Preview/Debug in Browser (Просмотр/отладка в браузере) — можно проверить документ в браузере, выбранном из выпадающее списка.
  • Refresh Design View (Обновление вида в окне Design) — обновление вида документа в окне Design после того, как были внесены изменения в окне Code.
  • View Options (Посмотреть опции) (View | Code View Options)  — позволяет установить опции для режимов Code и Design.
  • Head Contents (Содержание раздела Head) — создает отдельную строку в окне документа для работы с элементами раздела Head (см. раздел Заголовок HTML-документа).
  • Rulers — линейки.
  • Grid — сетка.
  • Guides — направляющие.
  • Описание работы остальных опций просмотра рассмотрено далее в разделе «Установка настроек просмотра».
  • Design View on Top (окно Design сверху) — размещает окно Design в верхней части окна документа.
  • Visual Aids (Визуальные подсказки) — позволяет использовать различные визуальные подсказки отображения элементов в окне Design..
  • Validate Markup (Проверить разметку) — проверка правильности (валидность) текущего документа (документов) или сайта.
  • Check page (Проверить страницу) — проверка кроссбраузерной совместимости.

Установка настроек просмотра

В коде Web-страницы есть визуальные элементы (те, которые отображает браузер в окне просмотра) и невизуальные (невидимые) элементы, которые содержат служебную информацию. Добавление любого невизуального элемента, т.е. не отображаемого браузером (и окном Design), лучше выполнять в окне Code.

Отображение элементов в окне Code формируется с учетом установок, определенных опциями просмотра кода. Некоторые опции просмотра были упомянуты в разделе «Панель Document» — Rulers (Линейки), Grid (Сетка), Guides (Направляющие).

Теперь рассмотрим оставшиеся опции.

Одним из способов вызовите меню установок опций просмотра кода:

  • выполните команду View | Code View Options (Просмотр | Опции просмотра кода).
  • или нажмите кнопку «Параметры просмотра», расположенную на панели Insert в верхней части окна Code.

View Options (Опции просмотра кода):

  • Word Wrap Wrap (Переносить по словам) — размещает код таким образом, что его можно просматривать без горизонтальной прокрутки.
  • Line Numbers (Номера строк) — отображает номера строк рядом с кодом.
  • Hidden Characters (Скрытые символы) — отображает скрытые символы вместо белого места: пробел заменяется точкой, символ табуляции — двойной угловой скобкой, символ разрыва строки — знаком абзаца.
  • Highlight Invalid Code (Выделение кода с ошибками) — желтым цветом выделяются все фрагменты кода HTML, которые содержат ошибки. При выделении недопустимого тега в Панели Инспектора свойств отображается информация об ошибке.
  • Syntax Coloring Enables (Выделение цветом элементов синтаксиса) — включает или отключает функцию цветового оформления кода. Выбрать цветовую схему можно в установках Edit | Preferences (Редактирование | Установки), категория Code Coloring.
  • Auto Indent (Автоотступ) — если в процессе создания кода нажать кнопку «Enter», отступ для кода создастся автоматически. Новая строка кода имеет тот же уровень отступа, что и предыдущая строка.

Задание 1.

  1. Откройте файл test4.html, подготовленный в Задании 2 раздела Редактирование HTML-документа.
  2. Отключите опцию Word Wrap Wrap (Переносить по словам), оцените результат, включите снова.
  3. Оцените результат включения/отключения остальных опций.
  4. Включите опции, установленные по умолчанию.
Информацию о Dreamweaver, книгах по web-дизайну, примеры практических работ по верстке веб-страниц с иллюстрациями смотрите на сайте.

 

 
В избранное