Цифровой дизайн: основы веб-проектирования с помощью инструментов Adobe

Объёмное учебное пособие по работе с программными продуктами компании Adobe, при создании WEB ресурсов.

 

 

 

 


Изначально электронное "Цифровой дизайн: основы веб-проектирования с помощью инструментов Adobe", Рид Групп, 2012 год, 1357 стр.

Учебный курс «Цифровой дизайн», построенный в виде отдельных занятий и направлен на развитие навыков веб-дизайна с использованием инструментов компании Adobe: создание дизайна веб-сайта, веб-технологии CSS и HTML ,а также юзабилити и управление веб-проектами.Сложность материала возрастает по мере прохождения курса обучения. В книге изучаются такие программы, как: Adobe Photoshop CS6, Adobe Illustrator CS6 и Adobe Fireworks CS6 для создания статичной и интерактивной графики. Для дизайна и разработки веб-сайтов используется программа Adobe Dreamweaver CS6.

Глава из книги:

МАКЕТЫ ВЕБ-СТРАНИЦ С ПОМОЩЬЮ CSS

Для организации контента на веб-странице в макете страницы CSS используется формат каскадных таблиц стилей (CSS) вместо традиционных HTML-таблиц или фреймов. Основной строительный элемент макета CSS - div — HTML-тег, который в большинстве случаев выступает в роли контейнера для текста, изображений и других элементов страницы. При создании макета CSS вы размещаете на странице теги div, добавляете к ним контент, а затем позиционируете теги в различных местах страницы.

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

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

Использование заранее разработанных макетов — это самый простой способ создания страницы с макетом CSS, но вы также можете создавать CSS макеты элементов с абсолютным позиционированием элементов (элементов АР). Элементы АР в Adobe Dreamweaver — это элементы HTML-страницы (в частности теги div или любые другие), которым назначена неизменная позиция. Тем не менее, применение элементов АР в программе Adobe Dreamweaver ограничивается тем обстоятельством, что, поскольку они обладают абсолютным позиционированием, их позиция не изменяется при изменении размеров окна браузера. Со временем вы научитесь создавать макеты страниц, вставляя теги div вручную,и применяя к ним стили позиционирования.

Скачать