Шаг 3 – Верстка
Для выполнения потребуется: браузер и текстовый редактор.
В качестве текстового редактора можно использовать Блокнот, но мне удобнее пользоваться Notepad.
На этом этапе из макета необходимо получить html код странички.
3.1 – Разметка блоков
Сайт будет состоять из блоков. На рисунке сайта необходимо выполнить разметку этих блоков.
Основные блоки:
Красным обозначен главный блок.
Синим – шапка сайта (хэдэр).
Зеленым – блок меню.
Желтым – блок с содержимым сайта.
Голубым – анонсы постов.
Розовым – список рубрик.
Фиолетовым – подвал (футэр)
3.2 – Основной файл сайта####
Создайте для будущего сайта отдельную папку.
Создайте файл index.html и напишите в нем следующие строки кода:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Основы фрактальной графики</title>
</head>
<body>
</body>
</html>
Если у вас есть желание лучше понять смысл этих строчек, очень рекомендую пост @qqc.
Подключим файл стилей:
За подробностями стилей css я опять-таки рекомендую обратиться в замечательные посты @qqc. Например, вот этот.
3.3 – Строим из блоков
Начнем с главного блока сайта. На рисунке он обозначен красным цветом.
Блок на языке разметки html обозначают тегом div.
Второй блок – шапка сайта (хэдэр):
Цвет фона для своего сайта я пока оставлю черным. Если это будет слишком мрачно, его легко можно будет заменить.
Фон задаем в файле стилей следующим образом:
Сайт уже можно увидеть. Для этого просто откройте файл index.html в браузере.
Но это будет лишь ссылка на черном фоне.
Собирать наш сайт и продолжим в следующих постах.
...никогда за это не брался...может освоить ???..хотя, понятия не имею зачем мне это..)))
Можете и освоить :) А потом скажете зачем ))
Я понятия не имела, что программирование может быть таким интересным, пока не устроилась на работу (программистом) принудительно :))) Просто других мест не было. А через полгода так затянуло, что по ночам вскакивала и записывала строчки кода. Мама стихи, а я код )))))
...я занимался в свое время программированием...по работе было необходимо...но все остановилось на уровне бейсика, паскаля и немного ассемблера..)))
ассемблера?!!! Тогда, буду вас называть "Ваше Величество Смотритель" :)))
А что в будущем?
..все в прошлом..все в прошлом..)))
Привет!
Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.
Спасибо за полезный контент (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
О! Спасибо! Не ожидала... :))