Немного о сайте

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

Верстаем сайт на HTML и CSS

Прежде всего в разделе загрузок скачайте и распакуйте архив с кодом сайта. Затем при помощи комментариев внимательно изучите его, посмотрите вводный видеоурок (если он есть) и только затем приступайте к непосредственной верстке самого сайта.

1. Для начала создайте файловую структуру сайта. Папки по-возможности создавайте самостоятельно, в точности сохранив их оригинальные названия. Далее скопируйте в них изображения и другие вспомогательные файлы, например, иконку сайта. После приступайте к созданию пустых файлов наших будущих html-страниц, таблиц стилей, карты сайта и т.д. (опять же, сохраняйте их оригинальные названия).

2. Когда файловая структура сайта будет готова, приступайте к верстке индексной страницы. Вначале откройте в редакторе пустой индексный файл index.html и общую таблицу стилей site_styles.css (тоже пока пустую). Далее начинайте верстать общий для всех страниц макет сайта периодически подсматривая в образец. Однако копировать код не стоит, все необходимо набирать самостоятельно. В конце заполните домашнюю страницу содержимым, не забыв подключить к странице дополнительную таблицу стилей main_page_styles.css. При этом текст можете копировать, но не в коде вместе с тегами, а на странице в браузере, т.к. всю разметку нужно набирать самостоятельно.

3. После завершения верстки домашней страницы можете начинать верстать остальные страницы. При этом макет сайта верстать заново не нужно, копируйте его с индексной странички, удалив основное содержимое, подключив нужную дополнительную таблицу стилей, изменив в случае необходимости относительную адресацию и сделав активным соответствующий пункт бокового меню. Также следует иметь в виду, что для всех страниц, кроме домашней, необходимо использовать элемент base, что позволит обеспечить правильную относительную адресацию для страниц в папке категорий (кстати, обратите внимание, как строится относительный путь, используемый в кнопке 'Наверх', для каждой страницы).

После верстки всех страниц у вас должен получится минисайт, который будет построен на относительной адресации и доступен для просмотра в браузере даже при отсутствии локального сервера.

Последние обновления

5.08.18. Изменена структура и оформление учебного сайта. Добавлены новые страницы и элементы.