I. ВЕРСТКА САЙТА VIACOM
- УРОК 1. Введение. Определяем разметку страницы
В уроке мы познакомимся и исследуем PSD макет сайта. Определимся с разметкой всего сайта. Вырежем и вставим основные фоновые изображения шапки сайта.
- УРОК 2. Делаем header сайта
Детально определяем разметку шапки сайта. Вырежем из макета необходимые изображения. Создадим HTML разметку для шапки сайта, опишем для нее все стили CSS. Полностью завершим создание header-а.
- УРОК 3. Делаем область основного контента, левая колонка
Определимся с разметкой области основного содержимого страницы. Вырежем необходимые фоновые изображения. Начнем наполнять область контента. Поработаем с тонкостями фоновых изображений при резиновой верстке.
- УРОК 4. Делаем область основного контента, правая колонка
В этом уроке мы будем работать с правой колонкой области контента. Детально определим разметку ее внутренних элементов. Создадим разметку HTML, назначим и опишем все необходимые стили.
- УРОК 5. Дорабатываем правую колонку, блок контактов
В уроке мы дорабатываем правую колонку. Определяемся с разметкой и устанавливаем блок с контактной информацией. Работаем с фоновым изображением для этого блока.
- УРОК 6. Работаем над footer-ом сайта
В этом уроке мы завершим работу над макетом. Определимся с разметкой и установим подвал сайта.
- УРОК 7. Дорабатываем макет с учетом развития сайта
Не все, что может быть на сайте, учтено и показано в макете. И в этом уроке мы доработаем сайт, постараемся учесть все, что только может на нем быть в процессе наполнения. Так же устраним проблемы, которые могут возникнуть при добавлении контента.
II. ВЕРСТКА САЙТА BUKET
- УРОК 1. Введение. Определяем разметку страницы
В первом уроке мы проанализируем макет и определимся с основной разметкой страницы. Установим нестандартный шрифт на свой компьютер. Создадим все необходимые для кроссбраузерной верстки файлы нестандартного шрифта.
- УРОК 2. Делаем header сайта
В данном уроке мы начнем создавать header сайта. Определимся детально с разметкой «хедера». Установим логотип, меню и иконки. Подключим к странице нестандартный шрифт и назначим его для пунктов нашего меню.
- УРОК 3. Дорабатываем header сайта
В этом уроке мы закончим работу над header-ом. Детально рассмотрим в совокупности работу плавающих, позиционированных и центрированных элементов. Разберемся с порядком следования элементов и их перекрытием.
- УРОК 4. Делаем область основного контента
В данном уроке мы полностью сделаем область основного контента сайта. Определимся и опишем блочную разметку двухколоночного резинового сайта. Разместим и опишем стили для всех внутренних элементов контента.
- УРОК 5. Работаем над footer-ом сайта
В уроке мы определим разметку для footer-а сайта. Разместим логотип, нижнюю навигацию.
- УРОК 6. Работаем над footer-ом сайта
В этом уроке мы начнем устанавливать галерею на сайт. Исследуем существующую галерею и полностью установим ее к себе на сайт в первоначальном виде.
- УРОК 7. Дорабатываем галерею
Продолжим установку галереи. В уроке мы из существующей установленной галереи будем делать такую, которая нужна нам. Преобразим галерею до неузнаваемости, переназначив стили.
- УРОК 8. Дорабатываем макет с учетом развития сайта
В этом уроке мы доработаем сайт, постараемся учесть все, что только может на нем быть в процессе наполнения. Также устраним проблемы, которые могут возникнуть при добавлении контента. Рассмотрим проблемы назначения фонового цвета для колонок и методы их решения.
III. ВЕРСТКА САЙТА RUBL
- УРОК 1. Введение. Определяем особенности разметки
В уроке мы исследуем PSD макет сайта. Выявим все особенности и сложности данного макета. Определимся с разметкой всего сайта.
- УРОК 2. Делаем header сайта
В уроке мы начнем делать шапку сайта. Установим верхнее меню, иконки социальных сетей и блок с корзиной товаров. Увидим пример, когда схлопывание границ плавающих элементов может быть полезно.
- УРОК 3. Дорабатываем header сайта
В уроке будем устанавливать среднюю часть шапки сайта. Главным достоинством урока является то, что мы научимся размещать большое количество блоков в один ряд. Заставим их сжиматься в маленькое разрешение и растягиваться на большое разрешение. При этом мы не будем использовать таблицы!
- УРОК 4. Делаем область основного контента
Уроком мы будем завершать работу над шапкой сайта. Установим нижнюю часть header-а, меню и форму поиска.
- УРОК 5. Работаем над footer-ом сайта
В уроке определим и опишем трехколоночную разметку для области основного контента с помощью блоков. Особенностью разметки является то, что левая и центральная колонки резиновые, а фиксированная только правая. Начнем устанавливать навигацию в левой колонке.
- УРОК 6. Работаем над footer-ом сайта
В уроке мы продолжим работу над навигацией каталога. Из дополнительных материалов к уроку перенесем и установим выпадающее меню на jQuery. Доработаем дизайн меню так, как оно должно выглядеть на сайте.
- УРОК 7. Дорабатываем галерею
В данном уроке мы будем наполнять правую колонку фиксированной ширины. Установим блок баннеров. Также сверстаем блоки с рекламными акциями.
- УРОК 8. Дорабатываем макет с учетом развития сайта
Начинаем верстать центральную колонку, в которой находиться основной контент сайта. Сверстаем область отображения популярных товаров. Добавим необходимой интерактивности к элементам. Сделаем необходимые отступы без ущерба для рядом стоящего контента.
- УРОК 9. Дорабатываем центральную область контента
В уроке мы доработаем внешний вид центральной колонки. Перенесем и установим галерею из дополнительных материалов в наш сайт. Сделаем выпадающий блок содержимого корзины товаров. Напишем небольшой скрипт для корзины товаров.
- УРОК 10. Работаем над footer-ом сайта. Заключение
Этим уроком мы завершим верстку главной страницы сайта. Определимся с разметкой и установим footer сайта. Так же сверстаем нижнее навигационное меню. Определим задачи на дальнейшее развитие.
IV. ВЕРСТКА САЙТА SPROSIDOKTORA
- УРОК 1. Введение. Определяем особенности разметки
В уроке мы исследуем PSD макет сайта. Выявим все особенности и сложности данного макета. Поговорим о технологиях, которые мы будем использовать при верстке сайта.
- УРОК 2. Делаем header сайта
В уроке мы исследуем PSD макет сайта. Выявим все особенности и сложности данного макета. Поговорим о технологиях, которые мы будем использовать при верстке сайта.
- УРОК 3. Дорабатываем header сайта
В данном уроке мы начнем верстать шапку сайта. Определим разметку для шапки сайта. Установим логотип, слоган сайта, оформим верхнюю навигацию и кнопки входа на сайт.
- УРОК 4. Делаем область основного контента
В уроке мы закончим верстать шапку сайта. Установим основное меню сайта. Познакомимся с методом наслоения блоков, для назначения сложных тянущихся фонов. Рассмотрим метод задания закругленных углов и градиентов с помощью CSS 3.
- УРОК 5. Работаем над footer-ом сайта
В уроке мы определим и создадим нестандартную разметку трехколоночного сайта. Назначим фоновые цвета, скруглим углы для блоков, добавим тени для блоков, используя новые свойства CSS 3. Для ускорения и небольшой автоматизации процесса воспользуемся сервисом css3pie.
- УРОК 6. Работаем над footer-ом сайта
В уроке мы создадим правую колонку для сайта. Оформим стилями рейтинг специалистов, используя CSS 3. Рассмотрим еще один способ, как избежать схлопывания границ блока.
- УРОК 7. Дорабатываем галерею
В уроке мы начинаем верстать центральную колонку сайта. Рассмотрим проблему, которая возникает при отмене обтекания в верстке многоколоночных сайтов блоками, и научимся исправлять ее. Далее мы заставим появиться данную проблему и используем ее своих интересах.
- УРОК 8. Дорабатываем макет с учетом развития сайта
В данном уроке закончим делать центральную колонку сайта. Рассмотрим тонкости работы с псевдо-классами. Усовершенствуем технику работы с плавающими элементами. Рассмотрим еще один способ назначения закругленных углов.
- УРОК 9. Дорабатываем центральную область контента
В уроке мы завершим работу над макетом. Сделаем постраничную навигацию. Установим и стилизуем "подвал" сайта. Узнаем очень интересный и редкий прием назначения нескольких фонов окну браузера.
- УРОК 10. Работаем над footer-ом сайта. Заключение
Данный урок является заключительным уроком по верстке макета сайта СпросиДоктора. В нем мы рассмотрим методы, спомощью которых можно добиться кроссбраузерного отображения сайта. Поговорим о достоинствах и недостатках данных методов.
