Как сделать шаблон сайта html
Совсем недавно я на блоге рассказывал как в Photoshop сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.
Так же по теме
Друзья, для того, чтобы было понятнее обязательно скачайте файлы уже готового шаблона. Так же в архив входит и PSD макет сайта. И конечно же Вы сможете посмотреть демо шаблона в действии.
Подготовка
Для начала нам необходимо создать простую папку, желательно на рабочем столе, чтобы не потерять её. Там будут лежать все наши файлы, которые входят в шаблон сайта.
Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index.
Всё. В принципе мы первый шаг уже сделали. :) Переходим к добавлению кода HTML.
Добавляем разметку HTML
Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.
Открываем наш текстовый документ index и вставляем в него следующий код:
Теперь давайте подробнее остановимся на коде.
Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.
Шапка сайта
За верх сайта у нас отвечает вот этот код:
Середина сайта
За средний участок отвечает вот этот код:
Низ сайта
С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.
Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.
Вёрстка HTML и CSS
Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет :( Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.
CSS
Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом ставим теги , а между ними, соответственно будет располагаться код CSS.
Добавляем вот этот код CSS
Для списков мы отключили точки, а для ссылок отменили подчеркивание.
Это так сказать стандартные стили, их можно изменять по собственному желанию.
Главные блоки (верх, середина и низ)
Теперь вставляем вот этот код стилей CSS, которые отвечают за расположение главных трёх блоков на странице браузера.
Верхнее меню
В коде HTML между тегами
Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:
А вот теперь мы можем смело добавить стили для нашего меню, вот они:
Вот, что должно получиться:
Иконки социальных закладок
Теперь под HTML кодом меню добавляем вот этот код:
А в стили CSS нужно добавить вот это:
Логотип
Главное, выпадающее меню
Под кодом логотипа добавляем код главного меню:
Но не будем спешить добавлять стили, сначала нужно вырезать фон из макета PSD.
Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):
Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:
Теперь по выделенной области нажимаем левой кнопкой мыши два раза. После этого тот фон, что нам нужен для меню автоматически обрежется. Вам только нужно сохранить его для web в папку images под именем bgmenu.
Ну а сейчас можно смело добавлять CSS:
Сразу после тега нужно добавить HTML код, который будет отображать серый блок:
Левый блок с последними записями
Теперь будем добавлять блоки с последними записями. После тега
Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.
Самая последняя строчка в коде
И конечно же не забываем про CSS для постов:
Чтобы лучше было видно как будет смотреться макет, просто скопируйте HTML код блока постов и поставьте один под одним. В итоге вот что получится:
Правая часть (Сайдбар)
Добавляем поиск. После тега вставляем следующее:
И стили для поиска:
Виджет
После кода поиска вставляем:
Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h2img и сохранить в папке images нашего шаблона.
CSS код виджетов:
Футер
В конечном итоге получаем вот такой шаблон:
Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится :)
В общем если у Вас будут вопросы спрашивайте в комментариях.
HTML-сайты пользовались широкой популярностью в 90-х и 2000-х годах. Просто потому, что особых альтернатив не было. Их создание – основа основ, азбука веб-разработчика. Сейчас их, в основном, используют для обучения основам вёрстки веб-страниц, изучения HTML и CSS, что пригодится при работе вообще с любым движком.
HTML-сайты не обязательно имеют примитивный дизайн. Существует множество бесплатных HTML шаблонов, ничем не уступающих по привлекательности тем, что используются в конструкторах сайтов или CMS. Но большие проекты на них неудобно делать. Много страниц – много мороки, поскольку редактирование каждой требует копания в коде. У них нет панели управления, также все страницы будут статическими – никаких блогов, форумов и т. д.
HTML-сайты чаще всего имеют формат лендингов и сайтов-визиток. В этих сценариях они себя более-менее оправдывают – работают быстро, не грузят сервер, не требуют подключения базы данных. Весь контент содержится в самих страницах. HTML отвечает за вёрстку, структуру блоков, а при помощи каскадных таблиц стилей (CSS) этим элементам можно придать необходимый внешний вид и формат (шрифт, цвет, фон, форма, отступы и т д.).
Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют). Язык использует обширный набор тегов, почти все из которых используются парой – открывающий и закрывающий теги (например,
- тег абзаца), внутри которых содержится контент. В CSS используются атрибуты, свойства и их значения, подключаемые к отдельным элементам HTML-каркаса страницы. То есть можно выборочно придавать желаемый вид каждому элементу на сайте по отдельности.
Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой сайт на HTML в блокноте, создать своими руками веб-страницу по тем же стандартам, что используют все посещаемые вами сайты. На примере вы сможете уловить суть процесса, оценить для себя, интересна ли вообще эта тема.
Шаг 1 – создание страницы формата HTML
Шаг 2 – добавляем разметку веб-страницы
Теперь приступаем к редактированию файла. Первым делом необходимо добавить -веб-разметку – стандартный кусок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:
В прошлых 6 уроках я немного рассказал теории по HTML. С сегодняшнего урока я начинаю рассказывать о верстке собственного шаблона. Сегодняшний урок состоит из двух частей: первой и второй. Итак, читаем дальше!
Я буду вести уроки про создание блочного шаблона шаблона, состоящего из трех колонок. Итак, как выглядит обычный шаблон на любом сайте, а точнее из каких частей он состоит? Обычно HTML шаблон состоит из шапки, двух или трех колонок в середине и подвала. Так как урок про шаблон трехколоночный, то, конечно наш шаблон включает три колонки)). Подробное разделение я показал на схеме:
Обратите внимание, что на схеме шапка и колонки помещены в ещё один блок. Этот блок содержит в себе шапку и колонки. Кстати, колонки у нашего шаблона также будут помещены в отдельный обволакивающий блок. Итак, я рассказал немного теории, пора приступать к самому коду шаблона.
Для начала нужно создать пустую HTML страницу с помощью блокнота, notepad++ или же bluefish. Назовем её index.html. Открываем её и вписываем туда основные теги и doctype:
Тут ничего в принципе нового нет. Я указал кодировку UTF-8, кстати файл желательно, чтобы имел такую же кодировку, в notepad++ и bluefish её легко сменить. Также я указал ключевые слова, описание и название сайта, а также вынес стили оформления css в отдельный файл, который расположен в корне сайта. Если он у Вас лежит в другой директории сайта, то необходимо прописать соответствующий путь.
Далее будем прописывать блоки, оговоренные ранее:
Блок wrapper - обволакивающий блок, в котором находятся шапка сайта - блок header, а также три наших колонки - блоки left, center и right. Блоки left, center и right помещены в блок container. Под блоком wrapper расположен блок footer - подвал сайта. Про ещё один безымянный блок расскажу далее.
Каждому блоку, как вы уже заметили я присвоил свой селектор ID. Это нам поможет позиционировать их далее через стили оформления.
Для того, чтобы позиционировать блоки через стили оформления, необходимо для начала создать файл,l в котором они будут находится. Итак, создаем файл style.css и открываем его.
Прописываем туда следующие стили:
Итак, мы задали стили телу сайта, их я просто скопировал из урока №5, где я подробно про них рассказал. Далее блоку с селектором header я присвоил высоту 100 пикселей, задал минимальную ширину контейнеру , а также позиционировал центральный и крайние блоки, задав им размер.
Подробнее о стилях:
height - задает высоту блока
width - задает ширину блока
min-width - задает минимальную ширину блока, также существует max-width, который задает максимальную ширину
margin - отвечает за отступы, в данный момент они все равны нулю
float - позволяет позиционировать блок по левому или правому краю (left и right соответственно)
clear - устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон. В данный момент установлен параметр both, то есть он снимает обтекание и с правой и с левой стороны.
Пустой блок нам нужен для того, чтобы правая и левая колонка не растягивались, если в них добавлять, например, текст. Если добавить пустой блок со свойством clear:both в контейнер, то эта проблема будет решена.
Далее нам необходимо блоку wrapper придать высоту 100% окна браузера, а затем сдвинуть его вверх вместе с блоком footer на его высоту, которую нам необходимо знать. Делается это с помощью следующих строк:
А также добавив в body это и поставив перед body html:
В итоге у нас в файле стилей получилось следующее:
К сожалению, ограничение движка на количество слов в одном посте мне не позволяют поместить весь урок в одну часть, поэтому продолжение урока читаем здесь.
Узнайте, как создать отзывчивый веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.
Создание веб-сайта с нуля
"проект макета"
Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:
Navigation bar
Side Content
Some text some text..
Main Content
Some text some text..
Some text some text..
Some text some text..
Footer
Первый шаг-базовая HTML страница
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы.
Примечание: Если вы не знаете, HTML и CSS, мы предлагаем вам прочитать HTML учебник.
Читайте также: