Контрольная работа по предмету Системное и прикладное программирование на тему: Верстка веб-страницы с использованием технологии CSS

4 Верстка веб-страницы
Попробуем создать главную веб-страницу для сайта вымышленной компании, пусть она занимается консалтингом в области информационных технологий. Для начала мысленно представим какой бы мы хотели видеть нашу страницу, что она будет содержать и как это будет расположено. Приблизительный макет представлен на рисунке 3.

Рисунок 3

Теперь напишем HTML-код для этой страницы, и самое главное полностью забудем о любых оформительских аспектах, ведь все это будет сделано с использованием CSS. Единственное, следует указать идентификаторы или классы для отдельных элементов, чтобы затем легче было писать для них CSS-правила. В нашем случае выбраны идентификаторы для блока названия компании – title, для основной информации – content, для перечня разделов – sections, для поиска – search, для мета-информации – meta и для блока контактной информации – contacts. Кроме этого определен еще и один класс элементов – text, в него входят абзацы из блоков основной информации и контактной информации. Исходный код HTML-документа и внешний вид веб-страницы представлены в приложении 1.
Далее создадим файл style.css и будем описывать правила, чтобы преобразить нашу веб-страницу. На этом и остановимся подробнее. Для наглядности и удобства дальнейшего редактирования разделим все CSS-правила на те, которые будут отвечать за расположение элементов и те, которые будут определять шрифт и цвета.