Здравствуйте, уважаемые случайные посетители и завсегдатаи форума
http://www.masterwebs.ru/! В этой статье я постараюсь раскрыть все, ну или хотя бы основные аспекты в создании html сайта. Сначала я думал рассказать что-то общее, создать основу знаний для начинающих, но в итоге решил, что лучшим вариантом будет подробное руководство для людей, скажем так, пока слабо разбирающихся в html коде, css стилях, кодировках и прочих, присущих созданию сайтов понятиях.
Давайте разберемся, зачем создавать сайт на практически голом html, если есть десятки CMS плюс к тому же бесплатных. Объясняю - если вам нужно создать ресурс, содержащий 10-15 страниц, и в будущем вы не замышляете его значительное расширение, то устанавливать joomla, WordPress, DLE и т.п. просто нет смысла. Каждая из этих систем достаточно тяжелая, использует базы данных, множество скриптов работает ради загрузки каждой из страниц. Все это замедляет работу сайта. Кроме того, создать простенький шаблон для сайта на html не составит труда, когда под CMS нужны серьезные знания в верстке.
В качестве примера я выбрал абсолютно бредовую тему - «Сайт для привлечения авторов», можно конечно было написать про сайт продающий курс или сайт об онлайн игре.. Но суть от этого не изменится. Действия везде будут аналогичными) Кстати, не нужно ругаться, что я выкладываю не код, а картинки, реально было удобнее
Все файлы прикладываю!
Итак, ближе к телу делу - структура статьи будет следующая:1. Структура будущего сайта;
2. Создание html каркаса;
3. Верстка шаблона;
4. Создание лого за 5 минут;
5. Добавляем чуть чуть динамики;
6. Домен и хостинг;
7. Заключение.
Итак, слишком долгое вступление закончилось, начнем практиковать создание великолепного, но в тоже время простого сайта в стиле минимализмJ
2. Структура сайта Для моего сайта понадобятся следующие элементы - хидер, боковая колонка под меню, часть выводящая контент и, конечно же, подвал. На рисунке изображена подробная схема того, что в итоге должно получиться.
[img]http://clip2net.com/clip/m175127/1351257478-clip-6kb.png[/img]
Вы можете использовать и иной вид, различия исключительно в верстке.
Позиционировать я буду себя как компания «TxtMaster», логично, что мне нужно лого. Кроме того, мне нужно вывести контакты, чтобы потенциальные сотрудники могли со мной связаться. Все это будет размещаться в хидере.
В меню будут выводиться ссылки на имеющиеся статьи.
Футер и часть для вывода текста думаю понятноJ
Двигаемся дальше!
3. Создание html А дальше начинается практика! Для написания подобных сайтов я использую Notepad++, вы можете делать в специальных редакторах или в обычном блокноте, но я рекомендую именно этот редактор. И все шаги буду расписывать опираясь на его функционал.
Шаг 1. Создаем файл index.html. Для этого нажимаем комбинацию клавиш Ctrl+N или идем в файл и нажимаем на пункт «Новый». После этого, нам потребуется сменить кодировку, лично мне по душе UTF-8 (без BOM). Для этого находим в меню пункт «Кодировки» и выбираем там UTF-8 (без BOM). После этого сохраняем полученный файл с именем index и расширением html. Теперь редактор сможет определиться с синтаксисом и будет его выделять, что очень удобно.
Шаг 2. Обязательные теги. После этого опишем основные теги на странице.
[img]http://clip2net.com/clip/m175127/1351258173-clip-8kb.png[/img]
Теги <html></html> обязательны, между ними располагается все содержание страницы.
Между тегами <head></head> располагаются метатеги, подключаемые скрипты и стили.
А уже весь контент идет после тега <body>, после чего он закрывается</body>.
По остальным тегам я думаю все понятно.
Шаг 3. Собственно наш каркасТеперь будем создавать каркас шаблона - все это делается между тегами <body></body>.
[img]http://clip2net.com/clip/m175127/1351258448-2-366kb.jpg[/img]
Давайте взглянем на то, что у нас получилось! Я добавил еще немного контента, для наглядности)
[img]http://clip2net.com/clip/m175127/1351255489-clip-12kb.png[/img]
Что-то получилось, но ничего примечательного. Теперь давайте будем верстать и наблюдать за изменениями!
4. Верстка шаблонаДля начала нужно создать файл style.css, если вы заметили, то он уже подключается в метатегах. Но его еще нет, и поэтому ничего не происходит. Опять лезем в меню, создаем новый документ, делаем кодировку UTF-8(без BOM) и сохраняем его с именем style.css. Все, можно начинать верстать!
Я написал несколько строк в стилях
[img]http://clip2net.com/clip/m175127/1351255947-clip-12kb.png[/img]
Тем самым я задал размеры области сайта и расположил блоки хидера в пространстве! Если немного разобраться в стилях, то сразу все понятно, смотрим, что получилось.
[img]http://clip2net.com/clip/m175127/1351256060-clip-28kb.png[/img]
Уже что-то вырисовывается! Вы наверно обратили внимание, что уже есть лого! О его создании я напишу позже. Хотя это несколько выходит за рамки статьи.
Продолжим!
Я выложил файл стилей, потому что сюда добавлять слишком громоздко! Разобраться в нем не составит труда даже начинающему, при наличии желания!
Вот, что получилось в итоге!
[img]http://clip2net.com/clip/m175127/1351256315-clip-58kb.png[/img]
5. Создание Лого для сайтаЛого я создавал на сайте -
http://creatr.cc/creatr/, для этого сайта сервис подошел идеально.
[img]http://clip2net.com/clip/m175127/1351255806-clip-50kb.jpg[/img]
6. Добавляем малец динамикиПеред тем как наполнять сайт, нужно задуматься о его будущем. Представьте, что вам нужно дописать еще 1 статью. Так как все страницы вашего сайта абсолютно статичны, то вам придется пройтись по всем и проставить на них ссылки на новый материал. Именно для этого мы и сделаем его совсем чуть чуть динамичным.
Пилим сайт на составляющие.
Нам нужно сделать динамичное меню и футер, так как в меню буду добавляться ссылки, футер так же иногда изменяется (добавляются счетчики, различные считалки ТИЦ и ПР и прочее).
Для этого создаем 2 файла - menu.php и footer.php, кодировку выставляем UTF-8 без БУМ, конечно же.
Вырезаем из них код меню и код футера. Вот что должно получится.
Файл menu.php
[img]http://clip2net.com/clip/m175127/1351256730-clip-15kb.png[/img]
Файл footer.php
[img]http://clip2net.com/clip/m175127/1351256800-clip-7kb.png[/img]
Наш файл index.html меняем на index.php, так как вставки будут осуществляться при помощи php кода. Что у нас получается в результате:
[img]http://clip2net.com/clip/m175127/1351256908-clip-20kb.png[/img]
Теперь, для просмотра нужно использовать джентельменский набор - Денвер. Или же выкладывать на хостинг. После этих манипуляций мы можем изменить меню или футер и изменения коснутся всех страниц нашего замечательно сайта!
Заключение:Возможно, статья получилась все-таки немного общая, потому что я не рассказал для чего нужен каждый тег, что такое блочная верстка и т.д., но я считаю, что лучше поразбирать пример, проникнуться каждым тегом и самому сделать первый сайт. Я вас уверяю, уже после первых пары часов в голове возникнет кое какая ясность!
P.S. Если статья пригодится хотя бы 1 человеку, то я уже буду безмерно счастлив!
Спасибо всем за внимание
Сообщение сайта
Как создать html сайт
HueJack
11 
29.10.2012, 17:57;
Ответить: Нерукотворная
