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

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

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

Как работать с примерами

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

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

Как верстать данный макет

Что касается верстки макета сайта, то вначале очень тщательно изучите код с комментариями, посмотрите видеоурок. Далее, верстайте индексную страничку, а также таблицу стилей. Классы расположены максимально по порядку: общие классы для тела документа, шапка сайта, боковое меню, класс для блока содержания, подвал сайта. Далее будут добавляться классы для новых страниц. Также не забудьте скопировать изображения в папку images.

Когда сверстаете индексную страничку, вместе с данным содержимым, скопируйте ее в папку категорий. В папке переименуйте копию индексной странички в empty_page.html и добавьте в нее тег base, чтобы обеспечить правильную относительную адресацию для страниц в папке категорий (обратите внимание, как строится относительный путь, используемый в кнопке 'Наверх', для каждой страницы). Далее замените содержимое полученной пустой странички, вставив рисунок капусты.

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

После того, как макет сайта будет готов, создайте все необходимые служебные файлы: favicon.ico (иконка сайта), sitemap.xml (карта сайта), robots.txt (служебный файл для поисковых роботов) и .htaccess (конфигурационный файл).

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