Магазин
Давайте разберемся, зачем создавать сайт на практически голом html, если есть десятки CMS плюс к тому же бесплатных. Объясняю - если вам нужно создать ресурс, содержащий 10-15 страниц, и в будущем вы не замышляете его значительное расширение, то устанавливать joomla, WordPress, DLE и т.п. просто нет смысла. Каждая из этих систем достаточно тяжелая, использует базы данных, множество скриптов работает ради загрузки каждой из страниц. Все это замедляет работу сайта. Кроме того, создать простенький шаблон для сайта на html не составит труда, когда под CMS нужны серьезные знания в верстке.
В качестве примера я выбрал абсолютно бредовую тему - «Сайт для привлечения авторов», можно конечно было написать про сайт продающий курс или сайт об онлайн игре.. Но суть от этого не изменится. Действия везде будут аналогичными) Кстати, не нужно ругаться, что я выкладываю не код, а картинки, реально было удобнее
Все файлы прикладываю!Итак, ближе к
1. Структура будущего сайта;
2. Создание html каркаса;
3. Верстка шаблона;
4. Создание лого за 5 минут;
5. Добавляем чуть чуть динамики;
6. Домен и хостинг;
7. Заключение.
Итак, слишком долгое вступление закончилось, начнем практиковать создание великолепного, но в тоже время простого сайта в стиле минимализмJ
2. Структура сайта
Для моего сайта понадобятся следующие элементы - хидер, боковая колонка под меню, часть выводящая контент и, конечно же, подвал. На рисунке изображена подробная схема того, что в итоге должно получиться.
Позиционировать я буду себя как компания «TxtMaster», логично, что мне нужно лого. Кроме того, мне нужно вывести контакты, чтобы потенциальные сотрудники могли со мной связаться. Все это будет размещаться в хидере.
В меню будут выводиться ссылки на имеющиеся статьи.
Футер и часть для вывода текста думаю понятноJ
Двигаемся дальше!
3. Создание html
А дальше начинается практика! Для написания подобных сайтов я использую Notepad++, вы можете делать в специальных редакторах или в обычном блокноте, но я рекомендую именно этот редактор. И все шаги буду расписывать опираясь на его функционал.
Шаг 1. Создаем файл index.html. Для этого нажимаем комбинацию клавиш Ctrl+N или идем в файл и нажимаем на пункт «Новый». После этого, нам потребуется сменить кодировку, лично мне по душе UTF-8 (без BOM). Для этого находим в меню пункт «Кодировки» и выбираем там UTF-8 (без BOM). После этого сохраняем полученный файл с именем index и расширением html. Теперь редактор сможет определиться с синтаксисом и будет его выделять, что очень удобно.
Шаг 2. Обязательные теги.
После этого опишем основные теги на странице.
Между тегами <head></head> располагаются метатеги, подключаемые скрипты и стили.
А уже весь контент идет после тега <body>, после чего он закрывается</body>.
По остальным тегам я думаю все понятно.
Шаг 3. Собственно наш каркас
Теперь будем создавать каркас шаблона - все это делается между тегами <body></body>.
Давайте взглянем на то, что у нас получилось! Я добавил еще немного контента, для наглядности)
Что-то получилось, но ничего примечательного. Теперь давайте будем верстать и наблюдать за изменениями!
4. Верстка шаблона
Для начала нужно создать файл style.css, если вы заметили, то он уже подключается в метатегах. Но его еще нет, и поэтому ничего не происходит. Опять лезем в меню, создаем новый документ, делаем кодировку UTF-8(без BOM) и сохраняем его с именем style.css. Все, можно начинать верстать!
Я написал несколько строк в стилях
Тем самым я задал размеры области сайта и расположил блоки хидера в пространстве! Если немного разобраться в стилях, то сразу все понятно, смотрим, что получилось.
Уже что-то вырисовывается! Вы наверно обратили внимание, что уже есть лого! О его создании я напишу позже. Хотя это несколько выходит за рамки статьи.
Продолжим!
Я выложил файл стилей, потому что сюда добавлять слишком громоздко! Разобраться в нем не составит труда даже начинающему, при наличии желания!
Вот, что получилось в итоге!
5. Создание Лого для сайта
Лого я создавал на сайте - http://creatr.cc/creatr/, для этого сайта сервис подошел идеально.
6. Добавляем малец динамики
Перед тем как наполнять сайт, нужно задуматься о его будущем. Представьте, что вам нужно дописать еще 1 статью. Так как все страницы вашего сайта абсолютно статичны, то вам придется пройтись по всем и проставить на них ссылки на новый материал. Именно для этого мы и сделаем его совсем чуть чуть динамичным.
Пилим сайт на составляющие.
Нам нужно сделать динамичное меню и футер, так как в меню буду добавляться ссылки, футер так же иногда изменяется (добавляются счетчики, различные считалки ТИЦ и ПР и прочее).
Для этого создаем 2 файла - menu.php и footer.php, кодировку выставляем UTF-8 без БУМ, конечно же.
Вырезаем из них код меню и код футера. Вот что должно получится.
Файл menu.php
Файл footer.php
Наш файл index.html меняем на index.php, так как вставки будут осуществляться при помощи php кода. Что у нас получается в результате:
Теперь, для просмотра нужно использовать джентельменский набор - Денвер. Или же выкладывать на хостинг. После этих манипуляций мы можем изменить меню или футер и изменения коснутся всех страниц нашего замечательно сайта!
Заключение:
Возможно, статья получилась все-таки немного общая, потому что я не рассказал для чего нужен каждый тег, что такое блочная верстка и т.д., но я считаю, что лучше поразбирать пример, проникнуться каждым тегом и самому сделать первый сайт. Я вас уверяю, уже после первых пары часов в голове возникнет кое какая ясность!
P.S. Если статья пригодится хотя бы 1 человеку, то я уже буду безмерно счастлив!
Спасибо всем за внимание
Прикрепленные файлы
-
Конкурсная статья.rar 37.43К
Количество загрузок: 225
