Создание сайта на CSS и HTML: структура тестового сайта

Development | Amber | Комментировать запись

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

Разработка начальной структуры сайта

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

В этом мануале мы рассмотрим структуру нашего будущего сайта и составим план, согласно которому будем работать над сайтом дальше.

Обзор тестового веб-сайта

У сайта будут такие разделы:

1. Заголовок. Этому элементу сайта посвящен следующий мануал серии.
2. About Me. О том, как добавить такой раздел, вы можете узнать здесь.
3. Projects. О создании этого раздела сайта мы поговорим здесь.
4. Experience. О создании этого раздела речь пойдет в этом мануале.
5. Education и Skills. Сразу два раздела сайта мы рассмотрим в этом мануале.
6. Цитата. Об этом разделе поговорим здесь.
7. Статический футер. Добавить его вы сможете с помощью этого мануала.

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

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

Заключение

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