Визуальный редактор Dreamweaver CS5: настройка и работа, часть 2

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

Интерфейс программы

Для вставки рисунка в позицию курсора выбираем в меню пункт Insert->Image или в правой группе окон нажимаем Insert->Common->Images или нажимаем комбинацию клавиш Ctrl+Alt+I , возникает окно выбора файла изображений. Выбираем, кликаем ОК, пишем альтернативный текст, снова ОК и рисунок вставлен. Если нужно изменить его размеры , выравнивание и другие параметры, пользуемся окном свойств выделенного рисунка в нижней части экрана. Если рисунок нужно сделать гиперссылкой, то вводим ее адрес в поле Link там же; если нужна гиперссылка на файл из папки сайта, то тащим значок прицела с перекрестием около линка направо в окно Files на данный файл.

Панель выбора файлов

Если нужно вставить таблицу, кликаем справа или в меню Insert->Table, задаем число столбцов и строк, ширину таблицы в пикселях или процентах, толщину границ, отступы и другие параметры. Таблица будет заполняться данными по мере ввода текста. Ширину столбцов и их высоту можно менять перетаскиванием границ ячеек. Короче, далее практически все как в MS Word.

Панель вставки

Рассмотрим вопрос стилей. Простейшие операции по форматированию текста возможно делать из нижнего окна свойств HTML (это жирный и наклонный шрифт, оформление списков и отступов) и CSS (шрифт, его размер, выравнивание). Можно также присвоить выделенному тексту различные стили заголовков.

Для более сложного и многообразного стилевого оформления лучше пользоваться отдельно создаваемым файлом каскадных таблиц стилей (CSS). Его нужно подключить к редактируемому файлу (Format->CSS Styles->Attach Style Sheet). Синтаксис CSS файла здесь рассматривать не будем. Этому посвящено много литературы, о некоторых справочниках я упоминал в статье "Изучайте языки для создания Web-сайтов".

Окно свойств элемента

После подключения стили для выделенной части документа можно видеть, выбирать и изменять в окне свойств (HTML->Class и CSS->Targeted Rule) или справа в окне CSS Styles. Изменять свойства имеющихся стиле или вводить новые можно в правом окне CSS Styles, либо непосредственно в центральном окне редактирования файла стилей, которое возникает при попытке изменения этого файла.

Окно CSS стилей

Выше мы с вами рассмотрели пример создания простой текстовой веб-странички, состоящей из текста со вставками рисунков и таблиц. Однако в большинстве случаев нам нужно разработать более сложный вид страницы, где должен быть, например, заголовок вверху, меню слева для переходов между страницами сайта, содержание статей в блоке справа и подвал внизу.

Для этого Dreamweaver предоставляет богатейшие возможности даже для человека, практически не владеющего искусством верстки веб-страниц. Я имею в виду набор шаблонов страницы, который включен в пакет программы. Он открывается при выборе в меню File->New. На рисунке показан как раз случай выбора описанной выше схемы страницы.

Окно выбора шаблона страницы

При создании страницы по выбранному шаблону она возникает на экране с заполненным образцом текста и выбранными стилями оформления. Меняем то и другое в соответствии с нашими требованиями. В примерах шаблонов очень подробно объяснены в комментариях кода все примененные стили, что дает возможность их легкого изменения.

Образец двухколоночного шаблона

После или в процессе создания файлов можно посмотреть их отображение в различных установленных на компьютер браузерах. Для этого используется команда меню File->Preview in Browser-> выбранный браузер.

На сегодня все. В следующий раз я расскажу, как перенести созданные файлы на хостинг с помощью той же программы Dreamweaver CS5.

Вы можете подписаться на ленту новостей на моем сайте. И тогда вы ничего не пропустите.


Поделитесь ссылкой

Буду признателен, если добавите ссылку на эту страницу в социальные сети:

Поиск по сайту
Поиск от Яндекса
Рассылка

Информационный портал Subscribe.ru

Дорогие друзья!
Вы можете подписаться на рассылку материалов сайта GeoDum.ru через сервис рассылок информационного портала Subscribe.ru. Она называется, как и сайт, "Сказки старого юзера". В рассылке представляются анонсы наиболее интересных материалов из различных разделов. Обычная периодичность рассылки - раз в неделю (по вторникам).

ПОДРОБНЕЕ...

Заработок

Хотите заработать на своем сайте? Тогда зарегистрируйтесь на этих ресурсах по моим реферальским ссылкам:

  • Kwork - магазин услуг фрилансеров.
  • MegaIndex - бесплатный анализ сайта.
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
  • Webartex - заработок на написании и размещении статей.
gototop