Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

922

HTML базовый курс

БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

В этом видеокурсе в доступной форме даются основы языка HTML, являющегося незаменимым при составлении веб-страниц.

Бесплатные видеокурсы!

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

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

Вы здесь: Главная → Сборник статей → Верстка


Текущее состояние создаваемого сайта

Свернуть

Все статьи рубрики "Как сделать сайт"


Статья 1 сборника
2016-11-17

Определяем способ верстки

  • Какие существуют виды верстки
  • Табличная или блочная
  • Фиксированная или резиновая
  • Зачем нужна адаптивная верстка
  • Семантическая верстка
  • Выводы

Здравствуйте уважаемый посетитель!

Сегодня рассмотрим существующие виды верстки и определим способы, которые будем использовать при разработке сайта.

Верстки по способу построения и особенностям работы сайта можно разделит на следующие основные виды, такие как:

  • Табличная
  • Блочная
  • Фиксированная
  • Резиновая
  • Адаптивная
  • Семантическая

Первые два вида (1,2) определяют способы построения веб-страниц, где, при табличном способе страницы строятся с помощью контейнеров, определяющих содержимое в виде таблиц (парный элемент языка HTML <table>), а при блочном варианте, конструкцией страниц обычно являются блочные элементы, например, универсальный элемент<div>.

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

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

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

Здесь, для общего понимание основных видов верстки приведены лишь их общие характеристики. Далее, перейдем к более детальному их рассмотрению...


Статья 2 сборника
2016-11-06

Создаем веб-страницу и размещаем ее на локальном веб-сервере

  • Создание виртуального хоста на локальном веб-сервере
  • Создание файла веб-страницы с проверкой работы локального веб-сервера
  • Составление каркаса HTML-страницы
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Эта статья о том, как создать веб-страницу и разместить ее на виртуальном хосте локального веб-сервера.

А, понадобится нам для этого, как показано на картинке: локальный веб-сервер, текстовый редактор, язык описания структуры веб-страниц HTML и язык стилей CSS.

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

Здесь, будет рассматриваться работа с локальным веб-сервером на примере сборки программ Denwer (Денвер). Но, это не принципиально, так как все это можно делать и на других аналогичных программных продуктах.

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

После установки Денвера в директории "WebServers/home/" уже имеются сконфигурированные виртуальные хосты, такие как, "localhost", "test1.ru", "custom". Создадим для нашего сайта новый хост и назовем его, к примеру, "newsite.local", подразумевая под этим именем то, что это новый сайт и размещен он на локальном сервере (не стоит из-за возможной путаницы в дальнейшем, присваивать именам хоста реальные доменной зоны, такие как "ru", "com" и т.п...


Статья 3 сборника
2016-11-23

Делаем разметку шапки и футера HTML-страницы

  • Разметка шапки
  • Разметка меню шапки
  • Разметка футера
  • Что такое фавикон и для чего он нужен
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

Верстку нашего сайта будем делать в соответствии с ранее созданным дизайн-макетом.

Кроме того, при выполнении разметки будет удобно использовать прототип сайта, в котором наглядно видны поблочно все элементы, которые потребуется описать на языке HTML.

Для удобства, здесь в начале статьи эти картинки размещены повторно, так как в дальнейшей работе понадобится периодически к ним обращаться...


Статья 4 сборника
2016-11-27

Подключаем таблицу стилей CSS и назначаем общие стили для HTML-страницы

  • Способы добавления стилей на HTML-страницу
  • Подключаем внешнюю каскадную таблицу стилей CSS
  • Для чего нужен сброс настроек стилей CSS по-умолчанию
  • Делаем сброс свойств стилей по-умолчанию и устанавливаем базовые настройки файла CSS
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

Добавлять стили на HTML-страницу можно разными способами, такими как:

  • встроенные стили;
  • внутренние таблицы стилей;
  • внешние таблицы стилей.

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

Ниже приведен такой пример для тега <div>...


Статья 5 сборника
2016-12-03

Начало оформления сайта с помощью стилей CSS

  • Установка параметров резиновой верстки
  • Создания файла фонового изображения для шапки сайта
  • Формирование области шапки
  • Формирование областей контента и футера
  • Временное размещение сайта в сети интернет
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

Назначение стилей CSS подразумевает постоянную работу с дизайн-макетом с целью получения от него данных для присваивания свойствам CSS необходимых значений. Поэтому, при оформлении сайта стилями CSS часть материала будет уделена работе с графическим редактором, что потребует, при подробном рассмотрении, дополнительного объема показа и изложения необходимых действий. В связи с чем, оформление веб-страницы будет рассматриваться в нескольких статьях.

Кроме того, для того, чтобы в дальнейшем можно было отслеживать ход работы по созданию сайта в режиме онлайн, в конце этой статьи он будет размещен в сети интернет с использованием, специально выделенного для этого, поддомена сайта rabota-vinete.ru.

В дальнейшем, при рассмотрении вопроса покупки домена, сайт будет перенесен для постоянной работы на действующий хостинг...


Статья 6 сборника
2016-12-07

Оформляем элементы шапки сайта стилями CSS

  • Размещение элементов по вертикали
  • Формирование отступов элементов по горизонтали
  • Назначение свойств шрифта элементов
  • Создание теней для текстовых элементов
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Сегодня, используя стили CSS оформим имеющиеся элементы шапки: фавикон, заголовок названия сайта, ключевую фразу, и таким образом, приведем внешний вид шапки сайта в соответствие с дизайн макетом.

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

В соответствии с разметкой веб-страницы, шапка разделена на две основные части. Первая - это область, где располагаются фавикон, заголовок названия сайта и ключевая фраза, которые объединены элементом <div> с классом "hdr-title". Вторая часть - меню, образованое элементом <nav> с классом "menu".

Меню мы оставим для следующей статьи, а сейчас рассмотрим элементы: фавикон, заголовок названия сайта и ключевую фразу...


Статья 7 сборника
2016-12-10

Создаем меню сайта с помощью стилей CSS

  • Преобразование списка в ячейки таблицы
  • Установка ширины меню
  • Формирование кнопок меню
  • Формирование ссылок меню
  • Формирование активной кнопки
  • Создание меню футера
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Сегодня, используя стили CSS создадим резиновое меню сайта, которое в пределах параметров резиновой верстки будет растягиваться и сжиматься в зависимости от разрешения экрана.

Как отмечалось в предыдущей статье, в соответствии с разметкой веб-страницы, меню размещается в шапке сайта. Ниже, приведен фрагмент HTML-кода, взятый из файла "index.html", в той части, которая относится к меню...


Статья 8 сборника
2016-12-16

Делаем разметку области контента с использованием резиновой верстки

  • Выбор способа резиновой верстки для блока ротатора
  • Разметка блока ротатора
  • Выбор способа резиновой верстки блока основного содержания и сайдбара
  • Разметка блока основного содержания
  • Разметка блока сайдбара
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

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

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

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


Статья 9 сборника
2016-12-21

Оформляем блок ротатора с помощью стилей CSS

  • Назначение размеров и размещение блока ротатора
  • Размещение внутренних элементов
  • Оформление текстового рекламного блока
  • Оформление общего внешнего вида ротатора
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

Ранее анонсировалось, что в этой статье будут рассмотрены вопросы оформления элементов всей области контента. Однако, описание блока ротатора получилось слишком объемным, поэтому рассмотрение остальных элементов контента перенесено на следующий раз.

В предыдущей статье мы определились со способом верстки, который будет применяться для блока ротатора. Это построение блочной структуры с использованием для его внутренних элементов свойств display со значением table-cell. Ниже приведен HTML-код этой части веб-страницы...


Статья 10 сборника
2016-12-25

Оформляем область контента с помощью стилей CSS

  • Размещение блоков основного содержания и сайдбара
  • Формирование внутренних элементов блока основного содержания
  • Оформление текста блока основного содержания
  • Оформление элементов сайдбара
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

Ниже приведен HTML-код этой части HTML-страницы, где видно, что для размещения данных блоков предусмотрен контейнер <div> с классом content-block...


Статья 11 сборника
2016-12-29

Оживляем кнопки и проверяем сайт на валидность кода HTML и CSS

  • Как сделать объемные кнопки
  • Как сделать интерактивные кнопки
  • Нужна ли валидация
  • Как проверять на валидность HTML-код
  • Как проверять на валидность CSS-код
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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


Статья 12 сборника
2017-02-28

Устанавливаем слайдер изображений

  • Скачивание слайдера
  • Создание и скачивание сопутствующих файлов
  • Подключение файлов к HTML-страницам
  • Размещение слайдера на сайте
  • Настройка работы слайдера
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Сегодня установим на сайт слайдер изображений, который в какой-то степени его оживит и добавит некоторую информативность и функциональность.

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

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

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