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

Да

Нет

  • Способы создания сайта

    1. Какими способами разрабатываются сайты
    2. Как можно сравнить самописные сайты с основанными на CMS
    3. Быстродействие
    4. Безопасность
    5. Функциональность
    6. Простота создания
    7. Как выбрать способ создания сайта

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

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

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

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

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

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

    1. Подготовка локального веб-сервера
    2. Скачивание и распаковка исходных материалов
    3. Перенос файлов на локальный веб-сервер
    4. Импорт таблиц MySQL в базу данных текущего хоста

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

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

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

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

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

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

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

    Что же касается загрузки на хостинг файлов сайта, то по этому вопросу имеется отдельная статья Переносим сайт на хостинг, где показано, как это можно сделать с использованием FTP клиента FileZilla.

Самописный сайт своими руками!

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

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

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

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



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

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

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

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

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

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

  1. Табличная
  2. Блочная
  3. Фиксированная
  4. Резиновая
  5. Адаптивная
  6. Семантическая

Первые два вида (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-страницу можно разными способами, такими как:

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

Для применения встроенных стилей необходимо использовать атрибут "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, который, на мой взгляд, является очень удобным в установке и настройке и имеет довольно хороший функционал. К тому же, этот плагин предоставляется бесплатно и, что также немаловажно, к нему имеется довольно подробная инструкция по применению. Его еще часто называют ротатором контента, так как помимо изображений с его помощью можно отображать различные элементы...