Создать сайт html5: Как создать сайт HTML — верстка пошагово, курс основ HTML5 и CSS3 на itProger

Курс Создание сайтов в Adobe Muse в Екатеринбурге

Код: ITCloud_AdM

Курс Создание сайтов в Adobe Muse позволит вам научиться  создавать современные адаптивные к различным типам устройств (десктоп, планшет или телефон) HTML5 CSS3 сайты не прибегая к написанию кода. Это могут быть как сайты — визитки, так и сайты - каталоги или не сложные интернет магазины.  Сайты, созданные в этой программе, в дальнейшем, можно будет редактировать прямо в браузере.

Стоимость курса

13 800 руб

Заказать

Аудитория:

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

Требования к предварительной подготовке слушателя:

• Уверенный пользователь компьютера.
• Знание программы Adobe Photoshop в объёме курса — Adobe Photoshop для Web.

Содержание курса

Модуль 1. Введение.

• Общие сведения о возможностях программы.

• Способ приобретения программы в компании Adobe.

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

Модуль 2. Планирование веб-сайта.

• Изучение инструментария программы на примере создания учебного сайта

• Быстрое планирование структуры веб-сайта.

• Добавление и настройка элементов навигации по сайту.

• Каркасное моделирование макета веб-сайта в Muse.

• Работа с палитрой «Слои» в приложении Muse.

Модуль 3. Макет страницы.

• Работа с шаблонами страниц.

• Настройка фона.

• Добавление элементов на несколько страниц одновременно с помощью страниц-шаблонов.

• Использование направляющих для определения верхнего и нижнего колонтитулов на странице.

• Создание веб — страницы с постоянной шириной, для десктопа, планшета и смартфона.

• Создание адаптивной веб — страницы. Точки остановки.

• Использование таблицы размеров мониторов в адаптивном веб — дизайне.

Модуль 4. Работа с виджетами.

• Понятие виджета, их классификация.

• Платные и бесплатные виджеты.

• Скачивание и установка виджетов.

• Применение виджетов в проектах сайтов.

• Создание страницы с видео фоном.

Модуль 5. Работа с текстом.

• Работа со шрифтами Typekit.

• Сравнение шрифтов, соответствующих соответствующих и не соответствующих веб-палитре.

• Добавление и оформление текстового содержимого.

• Создание и применение стилей абзацев.

• Использование системных шрифтов как веб шрифтов. Способы их конвертации и применения в проекте сайта.

Модуль 6. Работа с изображениями.

• Общие сведения о механизмах оптимизации изображений приложением Muse при публикации или экспорте сайта.

• Оптимизация изображений.

• Добавление фонового изображения в текстовый фрейм, созданный с помощью инструмента «Текст».

• Копирование нескольких элементов и их вставка на другие страницы.

• Настройка фона.

Модуль 7. Интерактивные функции.

• Создание ссылок и кнопок для сайта Adobe Muse.

• Добавление ссылки к изображению кнопки.

• Импорт кнопки Photoshop.

• Создание кнопок «Ролловеров»

• Создание параллакс эффектов прокрутки — перемещение, прозрачность, слайд-шоу, анимации из Edge Animate для страниц с постоянной шириной.

• Добавление в проект анимаций и анимированных баннеров. созданных в Adobe Edge Animate

Модуль 8. Слайд-шоу и мини-приложения.

• Добавление настраиваемого слайд-шоу.

• Создание слайд-шоу для лайтбокса.

• Добавление и настройка мини-приложения «Раздвижная панель».

• Добавление и настройка мини-приложения с вкладками.

• Конфигурирование и настройка мини-приложений.

• Создание мини-приложения «Слайд-шоу с миниатюрами».

Модуль 9. Встраивание HTML-элемента.

• Добавление видео, размещённого на You Tube и на других подобных онлайн сервисах.

• Способы создания лэндинга в программе Adobe Muse.

• Добавление кнопок социальных сетей с отметкой «нравится»

• Добавление счётчика обратного отсчёта или сервиса прогноза погоды в проект сайта.

• Встраивание кода HTML для добавления Карт Google и других элементов.

Модуль 10. Экспорт и публикация.

• Публикация временного сайта на Business Catalyst, для доступа к нему клиентов на стадии разработки.

• Администрирование  сайтов на хостинге Adobe Business Catalyst.

• Как приобрести доменное имя для сайта.

• Регистрация сайта в поисковых системах Google, Яндекс.

• Прописывание необходимых мета тегов и встраивание счетчика посещений в сайт Muse.

• Краткое описание сайта для поисковиков.

• Назначение  значка — фавикона для сайта.

• Экспорт веб-сайтов на постоянный хостинг при помощи внутреннего или внешнего FTP клиента.

• Администрирование заказчиком, созданного сайта.

Другие курсы данной тематики

• Интеграция дизайна в Bitrix Framework
• HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3
• Основы PHP и MySQL: Создание интернет-магазина с нуля
• PHP. Уровень 1. Основы создания сайтов
• 1С Битрикс. Управление сайтом – администрирование
• Adobe Photoshop для WEB

Урок 1.

Начало работы с Visual Studio Code. Создание дизайна страниц

Скачать Notepad++ Portable

Скачать материалы к курсу – папка work_files.zip (6.5 Мб)

Авторы учебного курса:
Боголепов Михаил Михайлович,
студент гр. ЗКТ-617 ФГАОУ ВО «РГППУ.
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ

---

Введение

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

Структура веб-страниц представлена на рисунке 1.

1 — Структура итогового веб-сайта

Цель: ознакомиться с Visual Studio Code, а так же создать страницу с дизайном для всего сайта.

Задачи:

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

В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 1.1):

Рисунок 1.1 — Предварительный просмотр веб-страницы

Подготовка к созданию проекта, изучение редактора Visual Studio Code. (Установка Visual Studio Code)

Для создания проекта «Юридическая контора «Советник»» нам понадобится рабочая папка под проект.
Создайте папку на локальном диске посредствам проводника или другого файлового менеджера. 

Для реализации проекта в качестве редактора вы будете использовать современный инструмент — Visual Studio Code.
Visual Studio предлагает общедоступные инструменты и гибкость, необходимые для создания и развертывания современных веб-приложений.

– HTML5, CSS3, LESS/SASS, JavaScript
– ASP.NET, Node.js, Python, JavaScript
– NuGet, Grunt, Gulp, Bower, npm.
– Платформа и среда выполнения с открытым кодом.
– Развертывание в Windows, Azure, Mac или Linux.
– Бесплатно для небольших групп и разработчиков открытого кода.

– Запустите Visual Studio Code. В боковой панели навигации кликните по иконке страниц.(рисунок 1.2).

 

1.2 — Боковая панель

– В появившемся меню, кликните на кнопку Открыть папку и в открывшемся окне выберите созданную заранее папку Sovetnik. Кликните кнопку Выбор папки.

1.3 — Боковая панель. Выбранная папка

– Для создания первой страницы сайта design.html наведите мышку на область названия папки(проекта) SOVETNIK и кликните значок . В появившейся форме введите design.html

1.4 — Создан файл design.html

Наполнение папки

Sovetnik

Для создания проекта, нам понадобятся дополнительные файлы: CSS, JS, мультимедиа.

– Для этого скачайте в созданную вами папку, папки и файлы из папки work_files.

1.5 — Папка Sovetnik

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

1.6 — Название страницы

Создание дизайна сайта.

Для создания дизайна сайта нами будет подключен файл CSS, в котором указаны свойства для элементов HTML5. Изучение CSS в данном электронном учебном пособии не предусмотрен.

– Заполните файл design.html согласно стандартной структуре HTML5 документа, как на рисунке 1.7:

1.7 — Стандартная структура

– Между тегами title введите название страницы ЮК Советник (рисунок 1.8).

1.8 — Название страницы

– Следующим шагом будут meta и link данные. Между тегами head добавьте следующие строки (рисунок 1.9):

1.9 — Добавлены meta и link данные

Данным кодом вы к файлу design.html подключили css файл со свойствами для элементов HTML5, а так же meta name=»viewport» для того ,что бы сообщить браузеру, что ваша страница предназначена для правильного поведения области просмотра как на персональных компьютерах ,так и на мобильных устройствах.

– Для отображения страницы как на примере, нужно прописать id для тэгов и разделительную полосу при помощи тега hr.

1.10 — Выделеные области нужно добавить на свою страницу.

– Добавим логотип на страницу. Логотип у вас используется в формате SVG, если же у пользователя поддерка SVG не предусмотрена браузером выводиться будет альтернативное изображения в формате PNG.
Вся область логотипа и подпись снизу будет обернута DIV с именем center для того, что бы все объекты внутри распологались по центру. Клик по картинке будет переводить вас на главную страницу сайта (рисунок 1.11).

1.11 — Код добавления логотипа на страницу.

1.12 — Логотип технологии SVG и формата PNG.

– Следующим шагом будет создание навигации на сайте. Стиль навигации уже прописан в CSS файле. Вам осталось добавить ссылки между тегоми nav. В конце добавим div clearfix. Clearfix — метод отмены действия float без изменения структуры HTML-документа (рисунок 1. 13).

1.13 — Код ссылок для вставки навигации

– Добавьте копирайт в подвал сайта между тегами footer (рисунок 1.14).

1.14 — Добавлены meta и link данные

– Дизайн готов. Добавим обзац с текстом Контент, для визуального восприятия области для контента.

1.15 — Выделеные области нужно добавить на свою страницу.

Поздравляем! Вы создали свою первую веб-страницу на HTML5 (рисунок 1.16): добавили текст и цвета, добавили изображения и подключили CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере (рисунок 1.16).

1.16 — Предварительный просмотр веб-страницы

Контрольные вопросы

1. Какой редактор используется в уроках для редактирования страниц HTML5?
2. Между какими тегами размещается пара тегов

?
3. Какой метатег сообщает браузеру, что сайт предназначен для просмотра как на персональных компьютерах, так и на мобильных устройствах?
4. При добавлении логотипа была использована технология SVG, что будет отображаться браузером, если браузер не поддерживает SVG?
5. Между какими тегами распологаются ссылки навигационного меню сайта?

Как сделать веб-сайт, часть 3, добавить элементы html5

ПРОДВИНУТЫЕ · 60 МИН

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

Что вам понадобится

Получить библиотеки

Образцы библиотек Creative Cloud для практики

Получить файлы

Примеры файлов для практики (676 КБ)

Загрузка включает полный набор библиотек Creative Cloud и файлы проектов для этой серии руководств. Вы можете продолжить работу с исходным файлом в части 1 или перейти к соответствующей папке, чтобы использовать исходный файл для каждого раздела.

Введение

Добро пожаловать в четвертую часть этой серии руководств по созданию простого адаптивного веб-сайта в Dreamweaver 2015. Первые три части были посвящены определению сайта в Dreamweaver, а затем созданию двух страниц с использованием логической структуры HTML. На рис. 1 показано, как выглядит домашняя страница, если вы загрузите index.html в браузер.

Рисунок 1. Домашняя страница веб-сайта Bayside Beat функциональна, но непривлекательна.

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

Создайте фрагмент для упрощения вычислений ширины и высоты

В CSS каждый элемент рассматривается как блок. В блочной модели CSS по умолчанию ширина элемента и высота обычно применяются только к самому элементу. Если вы добавите пробел ( padding ) вокруг содержимого элемента, он не будет включен в расчет. Границы также исключены. В результате, если вы объявите ширину элемента как 250px , а его высоту как 100px , затем добавьте отступы 20px с каждой стороны, плюс границу 5px , общая ширина станет 300px , а общая высота 150px (см. рис. 2).

Рис. 2. Блочная модель CSS считает отступы и границы дополнительными к ширине и высоте.

Это может затруднить расчеты, особенно если вы хотите смешать размеры в пикселях и процентах. Более естественно думать об отступах и границах как о неотъемлемой части размера элемента. Чтобы упростить управление макетом страницы, большинство профессиональных веб-дизайнеров добавляют два кратких правила стиля в начале своей таблицы стилей, чтобы включить отступы и границы в общую ширину и высоту элемента. Эти правила настолько полезны, что вы можете сохранить их на панели «Фрагменты» Dreamweaver, готовые к вставке в стили для других веб-сайтов.

1. Открыв index.html в окне документа, нажмите responsive.css на панели инструментов «Связанные файлы» (см. рис. 3), чтобы открыть внешнюю таблицу стилей в режиме разделенного просмотра.

Рис. 3. Используйте панель инструментов «Связанные файлы», чтобы просмотреть код в файле, прикрепленном к текущей странице.

2. Щелкните внутри кода, создайте пустую строку в строке 2 и введите /* Упрощение вычислений ширины и высоты */ . В CSS все, что находится между /* и */, рассматривается как комментарий, так что это просто напоминание о том, что делает код.
3. Создайте новую строку и введите html , а затем открывающую фигурную скобку ({). Правила стиля состоят из селектора, за которым следуют пары свойство/значение в фигурных скобках. Самый простой тип селектора состоит из тега HTML без угловых скобок. Элемент верхнего уровня каждой веб-страницы — , поэтому html — это селектор CSS, который влияет на все на странице.
4. Нажмите Enter/Return сразу после фигурной скобки. Dreamweaver делает отступ для следующей строки и сразу же отображает всплывающие подсказки кода для свойств CSS. Начните вводить коробка . По мере ввода Dreamweaver фильтрует подсказки кода, ища соответствующий текст во всех допустимых свойствах, даже в середине имени свойства (см. рис. 4).

Рис. 4. Подсказки по коду ускоряют редактирование в представлении кода.

5. Требуемое свойство: box-sizing . Используйте клавиши со стрелками или мышь, чтобы выбрать его из подсказок кода, и нажмите Enter/Return. Dreamweaver завершает имя свойства и ставит после него двоеточие (:). Подсказки по коду снова появляются. Чтобы код было легче читать, добавьте пробел и выберите 9.0035 border-box из списка и завершите строку точкой с запятой (;).

В следующей строке введите закрывающую фигурную скобку (}), чтобы завершить определение правила стиля.

6. В следующей строке создайте следующее правило стиля:

 *, *:до,
*:после {
    box-sizing: наследовать;
}
 

Здесь используется так называемый групповой селектор. Он состоит из трех селекторов, разделенных запятыми, и ко всем им применяется один и тот же стиль. Звездочка (*) сама по себе является универсальным селектором, поэтому она применяется ко всем элементам. Два других селектора используют так называемые псевдоэлементы.

Смысл этого правила стиля довольно расширен. На этом этапе изучения веб-дизайна все, что вам нужно знать, это то, что он выполняет намеченную работу. Важным моментом является убедиться, что вы вводите его правильно. Хотя после свойства box-sizing после двоеточия может быть пробел, в *:before и *:after пробела вокруг двоеточия быть не должно.

7. Откройте панель «Фрагменты» (в рабочей области «Дизайн» она прикреплена к панели «Файлы») и выберите Папка CSS_Snippets (см. рис. 5).

Рис. 5. Панель «Фрагменты» уже содержит набор повторно используемых фрагментов кода.

8. В представлении кода выберите комментарий и два правила стиля, которые вы только что создали, щелкните правой кнопкой мыши и выберите Создать новый фрагмент в контекстном меню (см. рис. 6).

Рис. 6. Сохранение правил стиля на панели «Фрагменты».

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

9. В поле Имя введите Box-sizing: border-box . В поле Описание введите Включает отступы и границы по ширине и высоте . Для типа фрагмента выберите переключатель Вставить блок . Оставьте Preview type по умолчанию Code . Панель должна выглядеть как на рисунке 7.

Рис. 7. Сохранение кода для определения размера коробки в виде фрагмента.

10. Нажмите OK , чтобы сохранить фрагмент. Потому что вы выбрали CSS_Snippets на панели «Фрагменты», новый фрагмент автоматически сохраняется в той же папке.

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

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

Установка веб-шрифта Adobe Edge

По умолчанию браузеры отображают текст с использованием шрифта с засечками Times или Times New Roman (засечки — это маленькие декоративные выступы в конце штрихов). CSS 9Свойство 0035 font-family позволяет вам выбирать шрифты, но обычно ваш выбор ограничен диапазоном шрифтов, доступных на устройстве, используемом для просмотра сайта. Использование веб-шрифта, загруженного со страницей, снимает это ограничение. Dreamweaver имеет встроенный доступ ко многим бесплатным веб-шрифтам, размещенным Adobe. Во-первых, вам нужно включить их в Dreamweaver.

1. Выберите Modify > Manage Fonts , чтобы открыть панель, показанную на рисунке 8.

Рис. 8. Панель «Управление шрифтами» предоставляет доступ к широкому спектру шрифтов.

2. Шрифт, который вы ищете, называется Source Sans Pro. Начните вводить имя в поле поиска, и вам будут предложены три варианта. Нажмите на средний, Source Sans Pro . Флажок указывает на то, что шрифт был выбран (см. рис. 9).

Рисунок 9. Source Sans Pro является частью семейства родственных шрифтов.

Source Sans Pro — это шрифт без засечек. Другими словами, у него нет декоративных крючков в конце штрихов. Вы можете четко увидеть разницу между образцами Source Sans Pro и Source Serif Pro.

3. Использование веб-шрифта Adobe Edge является бесплатным, но на него распространяется лицензионное соглашение. Вы можете ознакомиться с Условиями использования, нажав на ссылку в нижней части панели.
4. Если вас устраивают Условия использования, нажмите Готово .

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

Используйте конструктор CSS для добавления основных стилей на страницу

Ранее вы видели, как подсказки кода могут ускорить создание правил стиля в представлении кода. В Dreamweaver также есть CSS Designer — панель, которая позволяет вам стилизовать страницу, наблюдая за происходящими изменениями в интерактивном просмотре. В этом разделе вы будете использовать конструктор CSS, чтобы начать добавлять базовые стили в responsive.css и смотреть, как они влияют на index.html.

1. Открыв index.html в окне документа, нажмите кнопку Live , чтобы интерактивный просмотр заполнил все окно.
2. Откройте конструктор CSS, щелкнув его вкладку в группе панелей в правой части экрана (она прикреплена к панели «Фрагменты», которую вы использовали в предыдущем разделе). Конструктор CSS состоит из четырех панелей: Источники , @Media , Селекторы и Свойства (см. рис. 10).

Рисунок 10. Конструктор CSS позволяет создавать стили и управлять ими из одного места.

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

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

Роль каждой панели следующая:

• Источники : здесь перечислены источники всех стилей на текущей странице. Они могут быть во внешних таблицах стилей, таких как responsive.css, в блоке, встроенном в страницу, или динамически связаны.
• @Media : список мультимедийных запросов, используемых в различных источниках. Вы узнаете больше об этой панели в части 7.
• Селекторы : здесь перечислены все селекторы CSS в выбранном источнике. Вверху есть поле поиска, с помощью которого можно найти селекторы в большой таблице стилей.
• Свойства : здесь вы определяете свойства и значения для селектора. Если установлен флажок Показать набор, на панели отображаются только заданные свойства. Когда флажок снят, на панели отображается около 50 наиболее часто используемых свойств макета, текста, границы и фона.

3. Убедитесь, что в верхней части конструктора CSS выбрана кнопка All .

   Выберите responsive.css на панели Источники .

   Вам не нужна панель @Media до части 7, поэтому закройте ее, перетащив верхний край панели селекторов вверх.

   На панели «Селекторы» перечислены уже созданные селекторы. У последнего (#wrapper) пока нет стилей. Когда вы создаете новый селектор, Dreamweaver всегда вставляет его внизу таблицы стилей, если только другой селектор уже не выделен. Рекомендуется хранить стили в логическом порядке, поэтому выберите * , *:до , *:после и снимите флажок Показать набор в правом верхнем углу панели свойств.

4. Нажмите кнопку «плюс» в левом верхнем углу панели «Селекторы», чтобы создать новый селектор. Dreamweaver предлагает имя для селектора на основе того, что в данный момент выбрано в интерактивном просмотре. Проигнорируйте это предложение и введите body . Дважды нажмите Enter/Return, чтобы подтвердить изменение. Выделив новый селектор (см. рис. 11), теперь вы можете создать правило стиля, влияющее на все на странице, установив значения свойств на панели свойств.

Рис. 11. Подготовка к установке свойств для оформления тела страницы.

5. В верхней части раздела «Макет» есть визуальный инструмент для установки свойства поля. Вместо того, чтобы использовать его в этом случае, просто нажмите Set Shorthand , чтобы открыть редактируемое поле, и введите 0 . Нажмите Enter/Return, чтобы подтвердить редактирование.

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

   Свойство margin на панели свойств теперь выделено жирным шрифтом, что указывает на то, что оно установлено. Также для каждой стороны в визуальном инструменте установлено значение 0 (см. рис. 12).

Рисунок 12. Свойство margin установлено равным 0 со всех сторон.

6. Щелкните значок «Текст» в верхней части панели «Свойства», чтобы перейти к разделу свойств текста. Первое указанное свойство, color , задает цвет текста. Все цвета для этого проекта находятся в библиотеке CC, которую вы установили в части 1.

Панель CC Libraries прикреплена к конструктору CSS, поэтому перетащите вкладку CC Libraries, чтобы отсоединить ее от группы панелей, чтобы она располагалась над окном документа.

7. Щелкните область цвета для свойства color , чтобы открыть палитру цветов.

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

Выберите инструмент «Пипетка» в правом нижнем углу палитры цветов и выберите цвет из образца светло-серого цвета на панели CC Libraries (см. рис. 13). Это устанавливает цвет на #4B4B4B , который приятнее для глаз, чем чистый черный на белом.

Рис. 13. Использование инструмента «Пипетка» для выбора цвета.

Щелкните за пределами палитры цветов, чтобы закрыть ее.

8. Щелкните справа от font-family , чтобы открыть меню часто используемых наборов шрифтов. Выберите веб-шрифт Adobe Edge, который вы установили ранее. Он указан внизу как source-sans-pro (см. рис. 14).

Рис. 14. Веб-шрифты перечислены под общими стеками шрифтов.

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

Выбор шрифта Edge Web автоматически устанавливает значения для свойств font-style и font-weight в дополнение к font-family . Также есть новый файл (source-sans-pro:n2,n4:default.js) на панели инструментов «Связанные файлы» и источник, доступный только для чтения, на панели «Источники» (иногда вы увидите более одного). Новый файл и источник (и) только для чтения загружают шрифт динамически с сервера Adobe. Вы не можете редактировать их.

9. Значение для font-style (обычный) подходит, но значение font-weight (200) эквивалентно экстра-легкому.

   Нажмите 200 , чтобы открыть меню с доступными весами шрифта, и выберите 400 , что эквивалентно обычному (см. рис. 15).

Рис. 15. Веб-шрифты Adobe Edge используют числа для указания толщины шрифта.

Свойство font-weight может быть установлено с использованием числа в диапазоне от 100 (легкий) до 900 (тяжелый), увеличивая с шагом 100 или используя одно из ключевых слов нормальный (эквивалентно 400), жирный (700), жирнее или светлее. Edge Web Fonts всегда используют числовые значения. Доступные значения различаются для каждого шрифта. Как показано на рис. 15, source-sans-pro не поддерживает 100, 500 или 800.

10. Нажмите рядом с размер шрифта , чтобы открыть меню единиц измерения и ключевых слов, которые можно применить к шрифтам, и выберите em (см. рис. 16).

Рис. 16. При выборе em в качестве единицы измерения для свойства размера шрифта

Live View станет пустым. Процитируем обнадеживающие слова на обложке «Автостопом по Галактике»: Не паникуйте!

При выборе единицы измерения Dreamweaver устанавливает значение 0 . em — пропорциональная мера, основанная на высоте текущего шрифта, но с установкой для нее значения 0 заставляет текст исчезнуть.

Просто введите 1 , и текст появится снова. Установка значения 1em в правиле стиля body указывает использование браузера по умолчанию для абзацев и элементов списка, который обычно равен 16px .

11. Щелкните значок Background в верхней части панели свойств, чтобы перейти к свойствам фона.
12. Вместо использования палитры цветов для установки цвета фона , на этот раз просто щелкните образец бледно-голубого цвета на панели CC Libraries (см. рис. 17). Это копирует цвет в шестнадцатеричном представлении в буфер обмена.

Рис. 17. Щелкните образец цвета на панели CC Libraries, чтобы скопировать его шестнадцатеричное значение.

Щелкните справа от области цвета для background-color , чтобы открыть редактируемое поле, вставьте значение и нажмите Enter/Return, чтобы подтвердить изменение. Фон страницы теперь бледно-голубой.

13. Установите флажок Показать набор в правом верхнем углу панели свойств, чтобы увидеть все свойства CSS, заданные для основной части страницы (см. рис. 18).

Рис. 18. Установите флажок «Показать набор», чтобы просмотреть определения стиля для селектора.

Установка свойств непосредственно в конструкторе CSS

Выбор общих свойств из различных разделов Конструктора CSS — отличный способ изучить CSS. Но допустим, вы уже знакомы с CSS и просто хотите приступить к настройке свойств и значений. Вы можете сделать это в Дополнительно в нижней части панели свойств. Dreamweaver ускоряет процесс с помощью подсказок по коду. Давай попробуем. Даже если вы новичок, вы сможете следовать этим инструкциям:

1. Убедитесь, что кнопка All в верхней части конструктора CSS выбрана, а responsive.css выбран в Панель источников. При необходимости установите флажок Show Set в правом верхнем углу панели свойств.
2. На панели «Селекторы» выберите #wrapper . Хэш указывает, что это селектор ID, поэтому он применит правила стиля к оболочке ID . Если его нет в списке, вы можете создать его, нажав кнопку «плюс» в левом верхнем углу панели «Селекторы» и введя #wrapper в редактируемом поле.

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

3. Щелкните внутри поля добавить свойство и начните вводить ширина . При этом подсказки по коду отображают соответствующие свойства. Когда ширина выделена, нажмите Tab или Enter/Return, чтобы выбрать ее.

Фокус перемещается на второе поле. Введите 100% и нажмите Enter/Return. Это заставляет обертку заполнять всю ширину экрана.

4. Чтобы обертка не становилась слишком широкой на больших экранах, добавьте еще одно свойство max-width и установите для него значение 9.0041 1000px .
5. Центрируйте оболочку, добавив свойство margin и установив для него значение 0 auto. Это сокращение для отсутствия полей сверху и снизу, но автоматических полей слева и справа. Пока окно документа шире 1000 пикселей (значение max-width ), содержимое страницы перемещается в центр интерактивного просмотра.
6. Добавьте свойство background-color и установите для него значение white . Это ключевое слово цвета, которое распознается всеми браузерами. На панели «Свойства» теперь должно быть указано четыре определения стилей для #wrapper селектор (см. рисунок 19).

Рисунок 19. Вы можете создавать правила стиля непосредственно в разделе «Дополнительно» панели «Свойства».

7. Сохраните свою работу, выбрав Файл > Сохранить все связанные файлы . Заведите привычку делать это регулярно при оформлении страницы.

Текстовое содержимое теперь располагается по центру на белом фоне. Если окно документа шире 1000 пикселей, бледно-голубой фон тела виден с обеих сторон. В верхней части страницы также есть загадочный пробел, а текст находится на одном уровне с левой стороной обертки <дел> . Вы решите эти проблемы в части 5. Но сначала несколько слов об измерениях пикселей на веб-страницах.

Пиксели и дисплеи высокой плотности

Пиксель — это одна из крошечных точек, из которых состоит дисплей компьютера. На заре Интернета 1px означало тот же размер, что и одна из этих точек. С годами технологии совершенствовались, а точки становились все меньше и меньше. К счастью, CSS предвидел эту ситуацию. Пиксели, используемые в качестве единицы измерения, не зависят от размера физических пикселей, используемых на экране устройства. В результате 1000 пикселей установлены как максимальная ширина для обертки