Верстка

Модели проектирования сайта

1. Таблицы и слои

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

Табличная верстка

1. Макет из двух колонок

2. Макет из трех колонок

3. Разрезание и склейка изображений

Блочная верстка

Блочная модель

1. Поток документа

2. Блочные элементы

3. Эффекты схлопывания и выпадения

4. Плавающие элементы

5. Строчно-блочные элементы

6. Строчные элементы

Позиционирование

1. Выравнивание

2. Центрирование

Хаки

Фиксированный дизайн

1. Фиксированный дизайн: float

2. Фиксированный дизайн: Позиционирование

3. Фиксированный дизайн: Наложение слоев

4. Фиксированный дизайн: Макет из трех колонок

5. Фиксированный дизайн: Размещение трех колонок

Флекс

Grid

Верстка CSS-сетками

Адаптивная верстка

Основная часть

1. Внутренняя страница

Блочная верстка. Типовые макеты

1. Макет из трех колонок

2. Фиксированный макет с одной колонкой

3. Фиксированный двухколоночный макет

4. Фиксированный двухколоночный макет. Использование float

5. Фиксированный двухколоночный макет. Использование float + margin

6. Фиксированная ширина. Позиционирование

7. Фиксированный трехколоночный макет

8. Резиновый двухколоночный макет

9. Резиновая ширина. Навигация слева

10. Резиновый трехколоночный макет

11. Колонки одинаковой высоты

12. Фиктивные колонки

13. Фиксированный подвал

14. 2 колонки + хедер + футер

15. Двухколоночный макет

16. Раскладка Чикуенка: 2 float-колонки одинаковой высоты

17. Раскладка ЧикуенкаЖ Вёрстка растягивающихся сайтов

Бесколоночная верстка

1. Макет без колонок

2. Макет без колонок на флекс

PSD

1. Как сделать дизайн сайта в GIMP

2. Делаем простой сайт средствами GIMP

3. Создание своей страницы для сайта

Progressive Enhancement и Graceful Degradation