Отправляет 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 ВЫПУСК №1


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

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

Создаем первую web-страницу в Adobe Dreamweaver

Базовые установки  Adobe Dreamweaver.

Перед тем, как создать ваш первый HTML-файл в программе Adobe Dreamweaver, следует изменить базовые установки. Для того чтобы символы русскоязычного документа корректно отображались в браузере, их необходимо указывать в определенной кодировке.

Запустите Adobe Dreamweaver CS3. Из главного меню программы выполните команду Edit | Preferences (Редактирование | Установки). В левой части окна Preferences отображаются категории настроек, а в правой — параметры выбранной категории.
В окне Preferences установите следующие параметры:

  • в категории Fonts (Шрифты):
    в меню Font settings (Установки шрифтов) выбираем Кириллица.
  • в категории New document (Новый документ):
    в меню Default Encoding (Кодировка по умолчанию) выберите кодировку для сайта: Кириллица (Windows) (будет установлена кодировка Windows-1251).

Определение базовых настроек необходимо выполнить при первом сеансе работы с программой. Установленные настройки сохраняются при следующих сеансах.

После того как были установлены необходимые базовые настройки, можно создать HTML-документ.
Из главного меню программы выполните команду File | New (Файл | Новый).
В окне создания нового документа в колонке Create New (Создать новый) выберите пункт HTML.
Нажмите расположенную в нижнем правом углу окна кнопку Create (Создать).
В результате откроется окно нового HTML-документа.

Теперь можно начать знакомство с основными элементами рабочей среды Dreamweaver.  Рабочая среда состоит из главного окна, в котором отображается текущая страница, группы панелей и окон, в которых расположены средства дизайна и разработки.

Панели, инструменты 

Панель Insert.

Панель Insert (Вставить) содержит кнопки вызова диалоговых окон вставки различных типов объектов (изображения, таблицы и т.д.) в документ. Например, можно вызвать диалоговое окно вставки таблицы, щелкнув на кнопке Table (Таблица).

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

Категория Common (Общее) включает в себя наиболее часто используемые объекты при верстке web-страниц.

Можно вставить объекты, используя команды пункта Insert (Вставить) главного меню программы.

Панель Document.

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

  • Code, Split, Design  — кнопки выбора режима представления окна рабочего документа:
    • Режим Code — режим просмотра кода,
    • Режим Split — одновременно отображаются визуальное представление (окно Design) и соответствующий код (окно Code).
    • Режим Design — отображается визуальное представление (окно Design).
      Для начального этапа работы наиболее удобен режим Split.
      Нажмите на кнопку Split для выбора соответствующего режима.
  • Title — название web-страницы.
  • File Management   (Управление файлами) – отображает выпадающее меню управления файлами.
  • Preview/Debug in Browser   (Просмотр/отладка в браузере)  — можно проверить документ в браузере, выбрав его из выпадающего списка.

Краткое отступление. Браузеры бывают всякие : ).
К сожалению, «самый распространенный», не значит «самый лучший». Существуют дружественные пользователям (и полезные разработчикам!) бесплатные браузеры, один из которых Mozilla Firefox (или просто: лиса) можно скачать. После несложного процесса установки на компьютер, браузер необходимо указать в Dreamweaver с помощью команды Edit Browser List, доступной из выпадающего списка меню Preview/Debug in Browser. Возможности «лисы» рассмотрим в следующих выпусках.

  • Refresh Design View  (Обновление вида в окне Design)  — обновление вида документа в окне Design после того, как были внесены изменения в окне Code.
  • View Options  (Посмотреть опции) (View | Code View Options)  — позволяет установить опции для режимов Code и Design.
    • Head Contents (Содержание раздела Head)  — создает отдельную строку в окне документа для работы с элементами раздела Head.
    • Rulers — линейки.
    • Grid — сетка.
    • Guides — направляющие.
    • Design View on Top (окно Design сверху) — размещает окно Design в верхней части окна документа.
      Описание работы остальных опций просмотра будет рассмотрено в следующих выпусках рассылки.
  • Visual Aids   (Визуальные подсказки) — позволяет использовать различные визуальные подсказки отображения элементов в окне Design. Опции будем рассматривать по мере необходимости.
  • Validate Markup   (Проверить разметку) — проверка правильности (валидности) текущего документа (документов) или сайта на соответствие определенным стандартам (более подробно о стандартах в области web-разработок  — во втором выпуске).
  • Check page   (Проверить страницу) — проверка страницы на кроссбраузерную совместимость (тоже тема для неспешной беседы J).

Окно документа.

Окно документа показывает открытый документ в режиме, выбранном на Панели Document. Можно открыть несколько документов для редактирования одновременно. Переход между открытыми документами возможен при нажатии на вкладки с названиями файлов. Если у названия файла присутствует слева звездочка, это знак несохраненных изменений в редактируемом файле. Перед просмотром в браузере файл необходимо сохранить. Если вы этого не сделали, Dreamweaver предложит вам сохранить файл в диалоговом окне.

Выбрать вариант просмотра нескольких документов одновременно можно, выполнив команду из меню Window:

  • Cascade (Каскад),
  • Tile Horizontally (Горизонтальная мозаика),
  • Tile Vertically (Вертикальная мозаика).

Если на Панели Insert нажата кнопка Split (т.е. для просмотра документа выбран режим Split), то вставка объектов и редактирование возможны в обоих окнах (Code и Design).

Возможность параллельного просмотра визуального представления элемента (окно Design) и соответствующего кода HTML (окно Code) предоставляет начинающего web-дизайнеру замечательную возможность изучения HTML непосредственно в процессе создания web-страницы.

Надеюсь, подробные рекомендации этой рассылки помогут вам в изучении технологий HTML и CSS. Выполнив пошаговые инструкции первого выпуска, вы создали свою первую HTML-страницу в редакторе Adobe Dreamweaver.

В последующих выпусках объяснение основных приемов работы с редактором будет сочетаться с практическими примерами, которые можно (и нужно!) выполнять самостоятельно. Последовательное изучение материалов еженедельной рассылки позволит приобрести начинающим разработчикам необходимый практический опыт разработки web-страниц с применением технологии CSS.

Любитель живет надеждами; профессионал работает.
Гарсон Кейнин

 

 
В избранное