Рассылка сайта
RSS ленты

feed-iconПодпишитесь на любую из RSS-лент и всегда будете в курсе новостей:

Все новости сайта
Сказки Старого Юзера
Мир Андроида

Хотите получать обновления по почте?
Введите ваш e-mail:

Визуальный редактор 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.

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


Комментарии:

Поиск
Сайт в соцсетях
vk_logofacebook_logotwitter_logogoogle_plus
 
Переводчик
Комментарии
  • GeoD 01.07.2014 20:57
    А пользоваться поиском Google или помощью по Facebook умеете? Если нет, то вот вам ссылка, как ...

    Подробнее...

  • Павел 01.07.2014 20:41
    Но как мне удалить свой аккаунт, если я не помню пароль от него, помню только номер, к которому ...

    Подробнее...

  • Amazonka 25.06.2014 16:01
    а если поставить счетчик Яндекс.Метрики на http://www.home-engineer.ru ? проблем не будет? а то ...

    Подробнее...

  • GeoD 30.05.2014 19:23
    Мурат, а вы обратили внимание на дату создания этой статьи? Поэтому здесь приведены возможно уже ...

    Подробнее...

  • Мурат Токонович 30.05.2014 18:21
    Мне больше понравился http://colorschemedesigner.com/

    Подробнее...

  • Мурат Токонович 30.05.2014 18:07
    Комментарий к фаейрволлу Agnitum... Я, как старый инженер, а ныне юрист, рекомендую. Если Вы чайник и ...

    Подробнее...

  • Роман 12.05.2014 09:52
    А если при прошлом удалении рута не работают гугл сервисы.

    Подробнее...

  • TED 11.05.2014 09:52
    вот тут все подробно описано как получить рут при KNOX http://youtu.be/2G9zwTBrFIE

    Подробнее...

Рассылка новостей

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

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

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

Связаться с автором? Просто

Если вам нужно связаться с автором сайта по вопросам, не вмещающимся в рамки комментариев, пожалуйста, пишите на email, пользуясь Формой письма на странице Контактов >> Форма обратной связи.

Введена также форма живого чата для общения с автором, когда он находится в режиме онлайн. Смотрите раскрывающееся окно справа внизу каждой страницы. Если же автор перешел в режим оффлайн, это окно превращается в форму обратной связи по email.

Заработок на сайте

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

  • Profit-Partner - хороший заработок на контекстной рекламе от Яндекса;
  • TrustLink - биржа ссылок, дает неплохой доход для вебмастеров;
  • Sape - еще одна биржа покупных ссылок;
  • MegaIndex - бесплатный анализ сайта;
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
Cloudim - онлайн консультант для сайта бесплатно.
Показатели сайта. Счетчики

тИЦ и PR сайта

Проверка PR и ТИЦ

Яндекс.Метрика

Яндекс.Метрика
Траст geodum.ru   Настоящий ПР geodum.ru   Alexa/PR сайта geodum.ru
gototop