Создание web-страниц с использованием Macromedia           Dreamweaver

Краткий обзор урока

Здесь вы научитесь:

• основам дизайна веб-страниц;• созданию каркасных моделей и эскизов;• добавлению и форматированию новых компонентоввсуществующий CSS-макет; • использованию панели CSS Designer (КонструкторCSS) для определения примененного CSSформатирования;• проверке сайта совместимости с браузерами._ Выполнение данного урока займет около полутора часов.Прежде чем приступить к работе, убедитесь, что выскопировали папку Lesson04 на жесткий диск, как указанов начале книги.

Используете ли вы каркасные модели и эскизы или одно воображение,Dreamweaver поможет быстро превратить концепции дизайна в готовыеCSS-макеты.

Создание макета страницы

Основы веб-дизайна

Перед тем как начать разрабатывать проект для себя или клиента, необходимо ответить на три важных вопроса:

• какова цель создания сайта?

• кто представляет вашу потенциальную аудиторию?

• как посетители попадут на сайт?

Какова цель создания сайта?

Будет ли сайт продавать или поддерживать продукт или услугу? Создается ли сайт для развлечения или игр? Собираетесь ли вы предоставлять

информацию и/или новости? Необходима ли вам корзина для покупокили база данных? Нужно ли вам принимать оплату кредитными картамиили электронные переводы? Знание целей, ради которых создается сайт,

даст представление о контенте, с которым вам предстоит работать, а так-

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

Кем будут посетители сайта?

Будут ли вашей потенциальной аудиторией взрослые, дети, пожилые люди,профессионалы, любители, мужчины или женщины? Знание аудитории

жизненно важно для разработки дизайна и создания функциональногосайта. Сайт, предназначенный для детей, скорее всего, потребует большего

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

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

щие аналогичный продукт? Успешны ли они? Однако не нужно копировать дизайн других сайтов только потому, что предназначены для тогоже самого, что и ваш. Пример: сервисы Google и Yahoo. Основная услуга,

которую они предоставляют, — одна и та же, но трудно представить сайты, более различные по дизайну.

Как посетители попадут на сайт?

Такой вопрос может прозвучать странно, когда речь идет об Интернете.Но, как и в обычном бизнесе, веб-клиенты способны попасть к вам самыми разными путями. Заходят они к вам со стационарного компьютера,

ноутбука, планшета или смартфона? Используют ли при этом высоко-скоростное подключение к Интернету, беспроводное соединение или

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

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

плоских экранов и высокоскоростной связи захотят, чтобы визуальныхэлементов было как можно больше.

Так откуда же взять всю эту информацию? Что-то вам придется добыватьтщательными исследованиями и анализом аудитории. Что-то можно будетпредположить, основываясь на собственных вкусах и знании рынка. Но

бо́льшую часть информации вам даст сам Интернет. Например, Консорци-ум Всемирной паутины регулярно собирает статистику о пользователях:

• www.w3schools.com/browsers/browsers_stats.asp: статистика побраузерам; www.w3schools.com/browsers/browsers_os.asp: статистика по операционным системам;

• www.w3schools.com/browsers/browsers_display.asp: статистика поразрешениям экранов.

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

жете воспользоваться практически бесплатными программными инструментами сторонних фирм, например Google Analytics и Adobe Omniture, которые встраиваются в код и отслеживают данные.

Отзывчивый веб-дизайн

Каждый день вс е больше людей подключаются к Интернету со смартфонов и прочих мобильных

устройств. Некоторые люди используют их для доступа к Интернету чаще, чем настольные компьютеры/

ноутбуки. Это постоянная головная боль веб-дизайнеров. С одной стороны, экраны смартфонов мень-

ше самого маленького монитора. Как втиснуть двух- или трехколоночную страницу в 200–300 пиксе-

лов? Другая проблема состоит в том, что большинство производителей устройств решили последовать

примеру компании Apple и отказаться от поддержки Flash-контента на мобильных устройствах.

До недавнего времени разработка веб-дизайна, как правило, требовала, чтобы вы ориентировались

на оптимальный размер (ширину и высоту в пикселах) веб-страниц, а затем создавали весь сайт, взяв

за основу эти спецификации. Сегодня этот сценарий встречается все реже. Итак, вы решили создать

сайт, который может адаптироваться к экранам различных размеров, или создать два или более от-

дельных веб-сайтов для поддержки экранов мониторов и мобильных устройств одновременно.

Ваше решение будет основываться на контенте, который вы хотите предоставить и возможностях

устройств, которые будут иметь доступ к вашей странице. Создание привлекательного сайта, под-

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

различных размеров и возможностей устройств — довольно сложная работа. Термин «отзывчивый

веб-дизайн» был придуман Итаном Маркоттом — разработчиком из Бостона, в книге с одноименным

названием (вышедшей в 2012 году), в которой описывается понятие проектирование страниц, кото-

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

уроками, вы узнаете множество методов отзывчивого веб-дизайна. К тому времени, как вы перейде-

те к уроку 14, вы будете полностью готовы к решению этого сложного вопроса.

Подавляющее большинство браузеров открывают страницы с разрешением выше 1024×768 пикселов. Если бы не быстрый рост использования

планшетов и смартфонов, такая статистика была бы отличной новостьюдля большинства веб-дизайнеров и разработчиков. Но истина заключается в том, что неизвестно, как часто для доступа в Интернет используются

мобильные устройства — и какие.

 

Сценарий

С целью усвоения материала этой книги вы будете работать над сайтомдля Meridien GreenStart, вымышленной общественной организации, за-нимающейся инвестированием в экологически чистые технологии. Этот

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

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

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

Ваши маркетинговые исследования показывают, что большинствоваших клиентов используют настольные ПК или ноутбуки, высокоскоростной Интернет, но можно предположить, что от 10 до 20% посетителей сайта пользуются смартфонами и другими мобильнымиустройствами. Чтобы упростить процесс обучения работе в программеDreamweaver, мы сосредоточились на создании дизайна сайта с фиксированной шириной. В уроке 14 вы узнаете как адаптировать дизайнвашей страницы с фиксированной шириной для работы на смартфонах

и планшетах.

Каркасные модели и эскизы

После того как вы ответили на три вопроса — о целях создания сайта,о его посетителях и способах доступа, — пришла пора выяснить, сколькостраниц вам потребуется, для чего они будут служить и, наконец, как они

должны выглядеть.

Создание эскизов

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

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

Создание дизайна страницы

Решив, какие страницы, продукты и услуги нужны для сайта, вы можете заняться разработкой его внешнего вида. Составьте список компонентов, кото-

рые должны присутствовать на каждой странице, — туда могут быть включены верхний и нижний колонтитулы, навигация, области для основного

контента, боковые панели. Пока отложите элементы, которые нужны не накаждой странице. Какие еще факторы необходимо принять во внимание?

У вас есть логотип компании, элементы фирменного стиля или наборпредпочтительных цветов? Существуют ли книги, брошюры или реклам-

ные буклеты, которым необходимо соответствовать? Следует собрать всеэти данные в одном месте. Если повезет, дизайн возникнет из такого набора естественным образом.

Создав список компонентов, необходимых на каждой странице, на сайте несколько черновых макетов, которые содержали бы их все. Боль-Лист эскизов содержитстраницы, которые необходимо создать, и отображает связи междуними.

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

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

но это ключ к созданию профессионального сайта. По той же причинепредставители некоторых профессий, например пилоты, носят унифор-

му. Использование единого стиля для страниц создает у посетителя ощущение профессионализма и уверенности.

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

К сожалению, в веб-дизайне эта теория работает не настолько хорошо поодной простой причине: вы никогда не можете быть уверены в том, как имен-

но пользователи увидят ваш дизайн. Вы же не знаете, используют ли они 20-дюймовый экран монитора или 2-дюймовый экран сотового телефона!

Единственное, в чем вы можете быть уверены, — это в том, что пользователь увидит верхний левый угол страницы. Хотите ли вы занять это местологотипом компании? Или сделаете сайт удобнее, поместив туда меню

навигации? Это одна из ключевых дилемм веб-дизайнера. Предпочтетели вы эстетичность, удобство работы или компромисс между ними? Создание каркасных моделейКогда окончательный вариант дизайна выбран, каркасное моделирование позволяет быстро проработать структуру каждой страницы сайта.Каркасная модель — это почти то же самое, что и эскиз, только большегоразмера; он представляет собой набросок каждой страницы с более де-тальной проработкой таких компонентов, как названия ссылок и основ-ные заголовки. Этот шаг помогает выявить и предугадать проблемы дотого, как вы обнаружите их, работая с кодом.

Каркасные моделипозволяют экспериментировать с дизайномстраницы быстро и легко, не тратя время напрограммный код

 

Выберите команду меню New Site (Новый сайт).

Для создания стандартного сайта в программе Dreamweaver CC нужновсего лишь присвоить ему название и выбрать локальную папку. Название сайта обычно относится к конкретному проекту или клиенту и ото-

бражается в панели Files (Файлы). Это название предназначено сугубодля вашего пользования, поэтому вы можете назвать сайт как угодно. Используйте название, которое четко описывает цели сайта.

4В поле Site Name (Имя сайта) введите текст DW-CC.

5 Рядом с полем ввода Local Site Folder (Локальная папка сайта) щелкните мышью по значку с изображением папки (). Когда откроетсядиалоговое окно Choose Root Folder (Выберите корневую папку),

перейдите к папке с файлами, которые вы скопировали с компактдиска «Официальный учебный курс Adobe Dreamweaver CC», и нажмите кнопку Select (Выбрать) /Choose (Выбрать).Вы уже можете щелкнуть по кнопке Save (Сохранить) и начать работу надновым сайтом, но давайте добавим еще немного полезной инфор мации.

6 Щелкните мышью по стрелке () рядом с категорией Advanced Setting. (Дополнительные настройки), чтобы открыть список категорий. Выберите пункт Local Info (Локальная информация).

Грамотная политика управления сайтами состоит в том, чтобы хранитьфайлы различного типа в разных папках. Например, на многих сайтахесть собственные папки для изображений, PDF-файлов, видеоконтентаи т. д. Программа Dreamweaver помогает в этом, позволяя указать папкудля изображений по умолчанию. Позже, когда вы станете вставлять изображения из других источников, Dreamweaver будет использовать этуустановку, автоматически перемещая изображения в структуру сайта.

7 Рядом с полем ввода Default Images Folder (Папка изображений поумолчанию), щелкните мышью по значку (). Когда откроется диалоговое окно, перейдите к папке DW-CC\images с файлами, которые вы ско-

пировали с компакт-диска «Официальный учебный курс Adobe DreamweaverCC», и нажмите кнопку Select (Выбрать)/ Choose (Выбрать).Итак, вы указали всю информацию, необходимую для того, чтобы начать

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

8В диалоговом окне Site Setup (Настройка сайта) нажмите кнопку

Save (Сохранить).Сайт с названием «DW-CC» теперь доступен в списке сайтов на панели Files (Файлы).

Настройка сайта — важный шаг в начале любого проекта Dreamweaver.Указание расположения корневой папки сайта позволяет программеDreamweaver определить пути ссылок и обеспечивает работоспособность

таких функций, как Find and Replace (Найти и заменить).

Использование окна Welcome screen

Окно Welcome screen (Экран приветствия) программы Dreamweaverобеспечивает быстрый доступ к страницам, с которыми вы недавно работали, помогает создавать разные типы страниц и предоставляет прямойдоступ к избранным ключевым темам справочной службы.

Данное окно появляется при запуске программы, а также при отсутствииоткрытых документов. Давайте используем окно Welcome screen (Экранприветствия), чтобы изучить способы открытия документа.

1ЧтобысоздатьпустуюHTML-страницу, щелкнитемышьюпопункту HTML всписке CreateNew (Создать) окна Welcomescreen (Экранприветствия).

2Выполните команду меню File ⇒ Close (Файл ⇒ Закрыть).

Снова появится окно Welcome screen (Экран приветствия).

3В списке Open A Recent Item (Недавно измененные) данного окнащелкните мышью по строке Open (Открыть).

Эта функция позволит вам быстро найти файлы, которые требуется открыть в программе Dreamweaver.

Создание макета страницы

4Нажмите кнопку Cancel (Отмена).

Окно Welcome screen (Экран приветствия) показывает список из девятипоследних файлов, с которыми вы работали. Они показаны на рисунке,

приведенном выше; однако ваш вариант программы на данном этапе может не отображать какие-то из файлов. Выбор файла из списка — болеебыстрая альтернатива выполнению команды File ⇒ Open (Файл⇒ От-

крыть), если вы хотите продолжить редактировать страницу, которую не-

давно открывали или создали.

В процессе работы над уроками вы будете использовать окно Welcomescreen (Экран приветствия) несколько раз. Выполнив все упражнения, вы

можете отказаться от его использования. В этом случае деактивируйте его, установив флажок Don’t show again (Больше не показывать) в нижнем ле-

вом углу окна. Вы можете снова активировать окно Welcome screen (Экранприветствия), установив соответствующий флажок в группе элементовуправления General (Общие) диалогового окна Preferences (Настройки).

Начало работы

Чтобы понять, как выглядит макет, над которым вы будете работатьв ходе этого урока, откройте итоговую страницу в браузере.

1В приложении Dreamweaver нажмите клавишу F8, чтобы выбратьпункт DW-CC или название сайта по методу быстрого старта из спи-ска сайтов.

2На панели Files (Файлы) раскройте содержимое папки Lesson04.

3Дважды щелкните мышью по файлу layout_finished.html, чтобы от-

крыть его.

Данная страница представляет собой макет, который вы будете создаватьв ходе этого урока. Она основана на набросках каркасной модели, сделанном ранее, и использует один из новых CSS-макетов HTML5, предусмо-

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

хождения урока вы поймете различия.

4Выполните команду меню File ⇒ Close (Файл ⇒ Закрыть).

Изменение существующего CSS-макета

Готовые CSS-макеты, предоставленные программой Dreamweaver, всегдахороши для начала работы над проектом. Их можно легко изменить и адаптировать для большинства проектов. Используя CSS-макеты Dreamweaver,

вы создадите пробную страницу, которая будет соответствовать дизайну окончательной каркасной модели. Эту страницу вы затем используете

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

1Выполните команду меню File ⇒ New (Файл ⇒ Создать).

2На вкладке Blank Page (Пустая страница) выберите пункт HTML в списке диалогового окна New Document (Создать документ).

•

Давайте выберем один из HTML5-макетов, который наилучшимобразом отвечает потребностям нового сайта.

HTML-макет 2 columnfixed, rightsidebar, headerandfooter (2 колонкификсированной ширины, боковое поле справа, верхний и нижний колон-

титулы) наилучшим образом соответствует задуманному дизайну. Разницалишь в том, что боковое поле выровнено по правой стороне макета, а не полевой. Далее в ходе урока вы выровняете этот элемент по левой стороне.

3Выберитепункт 2 columnfixed, rightsidebar, headerandfooter (2 колонки фиксированной ширины, боковое поле справа, верхний и ниж-

ний колонтитулы) из списка макетов. Нажмите кнопку Create (Создать)/ Open (Открыть).

4При необходимости переключитесь на режим представления Design

(Дизайн).

5Щелкните мышью по каждому полю содержимого страницы и, используя селектор тегов внизу окна, изучите структуру компонентов.

Порядок отображения элементов в селекторе тегов соответствует структуре кода страницы. Элементы слева — родители (контейнеры) для всех

элементов справа. Крайний левый элемент — самый главный в структурестраницы. Как вы можете видеть, тег <body>является элементом высше-

го уровня, за которым следует элемент div.container.

Щелкая по разделам веб-страницы, вы можете определить структуруHTML, не переключаясь в окно представления Code (Код). Во многих

отношениях интерфейс селектора тегов делает работу по определениюструктуры HTML гораздо проще, особенно в случае со сложными дизайнами страниц.Вся семантика заключается в названииВ HTML5 вы увидите несколько элементов, с которыми можете быть ещене знакомы, например, section, article, aside и nav. Раньше вы бы

обнаружили элементы div с атрибутами class или id, например, div

class="header" или div id="nav", обеспечивающие возможность применения стилей CSS. Язык HTML5 упростил данную конструкцию до элементовheader и nav. С помощью элементов, чьи названия соответствуют конкретным задачам или типам контента, вы можете рационализировать процесс

создания кода и получить дополнительные преимущества. Например, по мереоптимизации поисковых систем (типа Google и Yahoo) под HTML5 они смогутбыстрее находить и определять конкретные типы контента на каждой страни-

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

ся новыми элементами HTML5, в том числе header, footer, nav, aside, article и section. Элементы div в этом макете содержат контент боковой панели, а также используются для того, чтобы держать все остальныеэлементы вместе.

Использование этих новых элементов позволяет применять сложныестили CSS, одновременно упрощая код. Вы по-прежнему можете использовать атрибуты class и id, однако новые семантические элементы

уменьшают потребность в этой технике.

Чтобы понять, насколько тот или иной дизайн зависит от CSS, иногдаполезно отключить стили.

6 Выполните команду меню View ⇒ Style Rendering ⇒ Display Styles (Просмотр ⇒ Обработка стиля ⇒ Отображать стили) в представлении Design (Дизайн).Отображение стилей обычно включено по умолчанию (в меню установлен флажок), и сбрасывая его, вы временно отключаете стили CSS. 7Обратите внимание на особенности и порядок каждого компонентастраницы.

Без CSS вы видите чистый HTML-каркас. Полезно знать, как будет выглядеть страница, если по какой-либо причине каскадные таблицы стилей отключатся или не будут поддерживаться определенным браузером.

Теперь легче определить компоненты страницы и их структуру. Хотя этои не является строгим требованием, элементы, расположенные на странице выше, например, header, обычно помещаются перед элементами,

которые отображаются ниже, например, footer.Другой важный аспект, на который стоит обратить внимание, — этоменю навигации. Без стилей CSS оно превращается в простой неупорядоченный список с гиперссылками. Еще недавно такие меню состоялииз таблиц, изображений и сложной замещающей анимации. Если они покакой-либо причине выходили из строя, то превращались в нечто непонятное. Хотя гиперссылки продолжали работать, в них не было слов, что-бы подсказать пользователю, куда он переходит. А меню навигации, соз-

данное на основе текстовых списков, всегда работает, даже без стилей.

Рабочий процесс в среде HTML 5

Стандарт HTML5 повсеместно распространяется по всей Всемирной паутине и с большинством приложений он будет работать отлично. Но стандарт HTML5 не завершен и отдельные страницы или ком-

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

заменить HTML5-элементы компонентами из языка HTML.

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

<header>...</header>

<footer>...</footer>

<section>...</section>

<article>...</article>

<nav>...</nav>

Для макета, совместимого со стандартом HTML, вы могли бы добавить универсальный элемент div

и использовать класс, который идентифицирует компонент следующим образом:

<div class="header" >...</div>

<div class="footer" >...</div>

<div class="section" >...</div>

<div class="article" >...</div>

<div class="nav" >...</div>

Вы также должны адаптировать таблицы каскадных стилей к новым элементам HTML4, изменив илиперестроив имена селекторов, основанных на HTML5 (header, footer, nav и т. д.).

Таким образом, CSS-правило заголовка {color:#090} будет выглядеть следующим образом:

.header { color:#090 }.

Со всеми оговорками, негативный момент заключается в том, что даже если вы используете стандартный код и компоненты стандарта HTML4, старые браузеры и некоторые устройства все-равно не

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

Они говорят, что мы должны отказаться от старых стандартов и заставить пользователей выполнитьобновление как можно скорее.

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

Чтобы узнать разницу между стандартами HTML и HTML5 подробнее, воспользуйтесь следующими

ссылками:

• tinyurl.com/html-differences

• tinyurl.com/html-differences-1

• tinyurl.com/html-differences-2

134 УРОК 4 Создание макета страницы

8Выполнитекомандуменю View ⇒ StyleRendering ⇒ DisplayStyles (Просмотр ⇒ Обработка стиля ⇒ Отображать стили), чтобы сновавключить стили CSS.Полезно ввести в привычку сохранять файлы, прежде чем изменять любые настройки или добавлять новый контент. В программе Dreamweaver

нет функции сохранения и восстановления резервной копии файлов; если программа аварийно завершит работу до того, как вы сохранитефайлы, то все, что вы успели сделать в любом открытом несохраненном

файле, будет потеряно.

9Выполните команду меню File ⇒ Save (Файл ⇒ Сохранить). В диалоговом окне Save As (Сохранить как) при необходимости выберитекорневую папку сайта. Присвойте файлу имя mylayout.html и нажмите кнопку Save (Сохранить).

Dreamweaver обычно сохраняет HTML-файлы в папку, указанную в настройках сайта, но полезно перепроверять ее расположение, чтобы убе-

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

В настоящее время стили каскадные таблицы стилей являются стандартом для всех веб-стилей и макетов. В следующих упражнениях вы бу-

дете применять к разделу страницы цвета фона и фоновое изображение,настраивать выравнивание элементов и ширину страницы, а также из-менять некоторые параметры текста. Все эти действия осуществляютсяс помощью панел и CSS Designer (Конструктор CSS) программы Dreamweaver(впервые появившейся в версии Dreamweaver CC).

•

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

1Если необходимо, перейдите к представлению Design (Дизайн). Выделите заполнитель изображения «Insert_logo (180×90)» в верхнем

колонтитуле. Нажмите клавишу Delete.

Пустой колонтитул уменьшится после удаления заполнителя изображения, потому что в CSS для него не указано значение высоты. С помощьюновой панели CSS Designer (Конструктор CSS) вы можете определитьвсе форматирование, назначенное компонентам макета.

2При необходимости выполните команду меню Window ⇒ CSS Designer

(Окно ⇒ Конструктор CSS), чтобы отобразить панель CSS

Designer (Конструктор CSS).

Чтобы получить максимальный эффект от работы, можно использоватьодно из предустановленных рабочих пространств.

3В раскрывающемся списке Workspace (Рабочее пространство) выберите пункт Expanded (Развернутый).

Рабочее пространство программы Dreamweaver изменится, отобразивпанель CSS Designer (Конструктор CSS) в двухколончатом режиме. Такое размещение предоставит дополнительное пространство для работы

с CSS-стилями. Если вы хотите увеличить ширину панели CSS Designer (Конструктор CSS), перетащите край окна документа влево.

Из селектора тегов видно, что элемент содержит изображение в качествезаполнителя. Изучите панель CSS Designer (Конструктор CSS). Можете

ли вы назвать любые правила CSS, которые могут использоваться дляформатирования элемента header?

4На панели CSS Designer (Конструктор CSS) выделите правило header в области Selectors (Селекторы). Изучите свойства CSS, при-мененные к элементу.

Область Properties (Свойства) панели CSS Designer (Конструктор CSS)отображает все существующие свойства. Для элемента header она ото-

бражает только цвет фона, назначенный ему. Область Properties (Свойства) также позволяет создавать новые свойства. Это возможно в двух

основных режимах. Если вы знакомы с синтаксисом языка CSS, то можете вручную создавать свойства. В противном случае, на панели CSS

Designer (Конструктор CSS) вы можете отобразить полный список CSS-свойств и выбрать нужные. Позже в этом уроке вы поэкспериментируете

с обоими способами.

Сначала вы добавите фоновое изображение к элементу header, а затемнастроите его размер. Чтобы увидеть полный список свойств CSS, убеди-

тесь, что флажок Show Set (Набор) сброшен.

137

5Если необходимо, сбросьте флажок Show Set (Набор) в области Properties (Свойства) панели CSS Designer (Конструктор CSS).

При сброшенном флажке Show Set (Набор), область Properties (Свойства) панели CSS Designer (Конструктор CSS) отображает список уста-

новленных свойств. Список сгруппирован по пяти категориям: Layout (Макет), Text (Текст), Border (Граница), Background (Фон) и Others (Другие).

Чтобы сфокусироваться на отображении определенной категории, выможете использовать кнопки в верхней части области Properties (Свойства) на панели CSS Designer (Конструктор CSS).

6 Нажмите кнопку Background (Фон) (). В группе background-image щелкните мышью по тексту «Enter file path» в поле URL. Нажмите кнопку Browse (Обзор) рядом с полем URL.

7В диалоговом окне Select Image Source (Выбрать исходный файлизображения) перейдите к папке, использующейся по умолчаниюдля хранения изображений. Выберите файл banner.jpg и обратитевнимание на размер изображения.

Он составляет 950×130 пикселов.8Нажмите кнопку OK / Open (Открыть), чтобы выбрать фоновое изображение.

Фоновые изображения по умолчанию повторяются как вертикально, таки горизонтально. Чтобы убедиться, что эта настройка не вызовет неже-

лательных эффектов, необходимо изменить свойство повтора изображения.

9 Нажмитекнопку no - repeat встроке background - repeat.

138 УРОК 4 Создание макета страницы

В элементе header появится фоновое изображение. Элемент достаточноширок, но недостаточно высок, чтобы показать фоновое изображение целиком. Поскольку фоновые изображения не вставляются в элемент, онине влияют на размер контейнера. Чтобы убедиться, что элемент header

достаточно велик, чтобы вместить все изображение, необходимо добавить соответствующее свойство к правилу header.

10Если необходимо, выделите правило header в области Selectors (Селекторы). Нажмите кнопку Layout (Макет) () в области Properties

(Свойства).

Область Properties (Свойства) содержит список свойств CSS-макета, которые вы можете настроить.

11В категории Layout (Макет) введите 130 в поле height и выберитепункт px в раскрывающемся списке единиц измерения.

Высота элемента header немедленно изменится, отображая баннер в полном размере. Обратите внимание на то, что изображение несколько у́же,

чем контейнер. Вы настроите ширину макета позже. Вам не нужно устанавливать ширину элемента header. В уроке 3 вы узнали, что ширина

блочных элементов (к которым относится и header) по умолчанию соответствует ширине родительского элемента. Перед тем как щелкнуть покнопке OK, давайте добавим в верхний колонтитул финальный штрих.

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

В области Properties (Свойства) панели CSS Designer (КонструкторCSS) нажмите кнопку Background (Фон). Замените значение свойства background-color на #090 и нажмите клавишу Enter / Return,

чтобы подтвердить изменения.

Небольшая область с фоновым цветом видна с правого края баннера,но как только вы измените ширину макета, она исчезнет. Фоновый цветпосетитель увидит, если не загрузится фоновое изображение. Добавле-

ние цвета фона — это обычная мера предосторожности, поскольку в некоторых устройствах или браузерах заблокирована загрузка изображе-

ний и/или фоновой графики.

13Выполните команду меню File ⇒ Save (Файл ⇒ Сохранить).

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

крывает и верхний колонтитул, и горизонтальное меню? Достигнуть такого эффекта можно несколькими способами. В данном случае нужный, резу льтат был достигнут абсолютным позиционированием элемента div.

1При необходимости установите текстовый курсор в верхний колонтитул, выберите в селекторе тегов элемент header и один раз нажми-те клавишу ←.Эта процедура должна установить текстовый курсор в HTML-коде перед

открывающим тегом <header>в верхнем колонтитуле. Запомните этотприем — вы будете часто им пользоваться, когда захотите поместить текстовый курсор в определенную позицию в коде до или после какого-либоэлемента, не переключаясь в представление Code (Код). Всегда помните,

что ваша веб-страница состоит из HTML и CSS-кода. Зная, как создавать, редактировать и вставлять элементы в надлежащем порядке позволит создавать чистый код без ошибок.

Абсолютное позиционирование элемента div часто применялось в предыду щих версиях программы Dreamweaver, но в последней версии этот•

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

сайте элемент абсолютное позиционирование элемента div все еще приемлемо. Позже мы исследуем пути использования этого элемента приподготовке сайтов для мобильных устройств.

2Выберите команду меню Insert ⇒ Div (Вставка ⇒ Div).

Откроется диалоговое окно Insert Div (Вставить Div). Элемент div будет единственным на этой странице. Его положение и форматированиебудет уникальным. Давайте используем идентификатор id, чтобы назвать элемент.

3Введите значение apDiv1 в поле ID.

Диалоговое окно Insert Div (Вставить Div) позволяет создать правилоCSS для абсолютного позиционирования элемента div.

4Нажмите кнопку New CSS Rule (Создать правило CSS).

Откроется диалоговое окно New CSS rule (Создать правило CSS). Имяидентификатора apDiv1 появится автоматически в поле ввода Selector

Name (Имя селектора). Селекторы идентификатора максимально специ фичны, поэ