Пример верстки сайта на HTML и CSS

Учебный сайт №1

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

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

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

Также на странице учебных кодов имеется возможность загрузить и сверстать версию данного сайта на PHP. И хотя php-кода как такового совсем немного и сверстать сайт можно и без знаний языка, вы наверняка сможете оценить преимущества верстки страниц с использованием PHP и, скорее всего, пожелаете хотя бы бегло ознакомиться с его основами.

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

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

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

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

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

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

Используем для верстки PHP

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

1. Сайт будет правильно работать только на сервере. Если вы используете локальную сборку XAMPP и сайт находится в папке xampp/htdocs/test/, то общий для всех страниц (включая индексную) элемент base должен использовать значение базового пути http://localhost/test/. Соответственно, на реальном хостинге нужно указать доменное имя сайта, например, http://belarusweb.net/ (с последней косой чертой).

2. К страницам подключен небольшой js-скрипт, содержащий функции для прокрутки страницы вверх и вниз. Соответственно, обратите внимание на код стрелок прокрутки и порядок подключения скрипта после тела документа.

3. Обратите внимание на порядок подключения php-скриптов в начале и в конце страниц. Теперь редактировать код макета сайта нужно только в двух подключенных php-файлах, а не на каждой странице.

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

27.10.19. На страницу загрузок добавлена версия сайта на PHP.

23.10.19. Макет сайта стал адаптивным, также были добавлены новые примеры верстки.

15.05.19. На страницы 'Примеры анимации' и 'Многоколоночная верстка' были добавлены новые примеры верстки.

19.04.19. Добавлена страница 'Калькуляторы', также добавлены новые примеры на страницы 'Оформление списков' и 'Создание html-форм'.

15.04.19. Добавлена страница 'Меню сайта', изменена главная страница сайта.

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