|
Вы здесь: Главная → Сборник статей → Верстка |
Перечень статей раздела Верстка:
Определяем способ верстки
- Какие существуют виды верстки
- Табличная или блочная
- Фиксированная или резиновая
- Зачем нужна адаптивная верстка
- Семантическая верстка
- Выводы
Здравствуйте уважаемый посетитель!
Сегодня рассмотрим существующие виды верстки и определим способы, которые будем использовать при разработке сайта.
Верстки по способу построения и особенностям работы сайта можно разделит на следующие основные виды, такие как:
- Табличная
- Блочная
- Фиксированная
- Резиновая
- Адаптивная
- Семантическая
Первые два вида (1,2) определяют способы построения веб-страниц, где, при табличном способе страницы строятся с помощью контейнеров, определяющих содержимое в виде таблиц (парный элемент языка HTML <table>), а при блочном варианте, конструкцией страниц обычно являются блочные элементы, например, универсальный элемент<div>.
Следующие три вида (3÷5) определяют особенность отображения веб-страниц на экранах пользовательских устройств в зависимости от их разрешения, что сказывается на удобство пользования сайтами.
6-ой вид - семантическая, также можно отнести к одному из видов верстки, так как такой вид, используя смысловое значение элементов языка HTML, позволяет делать веб-страницы лучше структурированными и более удобными и понятными.
Этому виду стало уделяться еще большее внимание после появления последней, 5-ой версии языка HTML, в которой появилось большое количество дополнительных элементов, описывающих смысловое значение заключенного в них содержимого.
Здесь, для общего понимание основных видов верстки приведены лишь их общие характеристики. Далее, перейдем к более детальному их рассмотрению...
Создаем веб-страницу и размещаем ее на локальном веб-сервере
- Создание виртуального хоста на локальном веб-сервере
- Создание файла веб-страницы с проверкой работы локального веб-сервера
- Составление каркаса HTML-страницы
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Эта статья о том, как создать веб-страницу и разместить ее на виртуальном хосте локального веб-сервера.
А, понадобится нам для этого, как показано на картинке: локальный веб-сервер, текстовый редактор, язык описания структуры веб-страниц HTML и язык стилей CSS.
Обычная веб-страница представляет собой текстовый файл в формате HTML поэтому такую страницу также часто называют HTML-страницей. И прежде, чем к ней приступить, в первую очередь создадим виртуальный хост на установленном ранее локальном веб-сервере, где в дальнейшем, и будем тестировать наш будущий сайт.
Здесь, будет рассматриваться работа с локальным веб-сервером на примере сборки программ Denwer (Денвер). Но, это не принципиально, так как все это можно делать и на других аналогичных программных продуктах.
О том, какие существуют варианты веб-сервера, а также, для чего он нужен и как его установить на компьютер, довольно подробно рассказано в статье Устанавливаем локальный веб-сервер Denwer .
После установки Денвера в директории "WebServers/home/" уже имеются сконфигурированные виртуальные хосты, такие как, "localhost", "test1.ru", "custom". Создадим для нашего сайта новый хост и назовем его, к примеру, "newsite.local", подразумевая под этим именем то, что это новый сайт и размещен он на локальном сервере (не стоит из-за возможной путаницы в дальнейшем, присваивать именам хоста реальные доменной зоны, такие как "ru", "com" и т.п...
Делаем разметку шапки и футера HTML-страницы
- Разметка шапки
- Разметка меню шапки
- Разметка футера
- Что такое фавикон и для чего он нужен
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
В этой статье сделаем разметку в части, касающейся шапки и футера HTML-страницы. К разметке остальной части, которая в основном относится к контенту сайта, мы вернемся после того, как с помощью назначения стилей CSS наша страница приобретет общие очертания в соответствии с разработанным дизайн-макетом.
Такое поэтапное разбиение разметки не связано с какой-либо технологической необходимостью, а сделано только для упрощения предоставляемого материала, чтобы исключить загромождения статей слишком большим его объемом.
Верстку нашего сайта будем делать в соответствии с ранее созданным дизайн-макетом.
Кроме того, при выполнении разметки будет удобно использовать прототип сайта, в котором наглядно видны поблочно все элементы, которые потребуется описать на языке HTML.
Для удобства, здесь в начале статьи эти картинки размещены повторно, так как в дальнейшей работе понадобится периодически к ним обращаться...
Подключаем таблицу стилей CSS и назначаем общие стили для HTML-страницы
- Способы добавления стилей на HTML-страницу
- Подключаем внешнюю каскадную таблицу стилей CSS
- Для чего нужен сброс настроек стилей CSS по-умолчанию
- Делаем сброс свойств стилей по-умолчанию и устанавливаем базовые настройки файла CSS
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня мы перейдем к назначению стилей CSS для HTML-кода веб-страницы, созданной в предыдущих статьях. Но, для того, чтобы при оформлении внешнего вида страницы в дальнейшем у нас возникало как можно меньше проблем с кроссообразностью, то в первую очередь, сделаем сброс всех свойств стилей, установленных по умолчанию, и назначим базовые настройки файла CSS.
Добавлять стили на HTML-страницу можно разными способами, такими как:
- встроенные стили;
- внутренние таблицы стилей;
- внешние таблицы стилей.
Для применения встроенных стилей необходимо использовать атрибут "style" непосредственно в том элементе, в который необходимо назначить свойство CSS. По существу, встроенный стиль является расширением одиночного тега языка HTML, используемого на веб-странице.
Ниже приведен такой пример для тега <div>...
Начинаем оформлять сайт с помощью стилей CSS
- Установка параметров резиновой верстки
- Создания файла фонового изображения для шапки сайта
- Формирование области шапки
- Формирование областей контента и футера
- Временное размещение сайта в сети интернет
- Исходные файлы сайта
Сегодня приступим к оформлению сайта с помощью стилей CSS и выполним следующие действия по формированию веб-страницы: установку параметры резиновой верстки, назначение основного фона страницы, формирования шапки сайта и размещения в ней фонового изображения, формирования областей контента и футера в соответствии с размерами разработанного дизайн-макета.
Назначение стилей CSS подразумевает постоянную работу с дизайн-макетом с целью получения от него данных для присваивания свойствам CSS необходимых значений. Поэтому, при оформлении сайта стилями CSS часть материала будет уделена работе с графическим редактором, что потребует, при подробном рассмотрении, дополнительного объема показа и изложения необходимых действий. В связи с чем, оформление веб-страницы будет рассматриваться в нескольких статьях.
Оформляем элементы шапки сайта стилями CSS
- Размещение элементов по вертикали
- Формирование отступов элементов по горизонтали
- Назначение свойств шрифта элементов
- Создание теней для текстовых элементов
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня, используя стили CSS оформим имеющиеся элементы шапки: фавикон, заголовок названия сайта, ключевую фразу, и таким образом, приведем внешний вид шапки сайта в соответствие с дизайн макетом.
С учетом того, что назначение стилей CSS должно основываться на дизайн-макете, то здесь достаточно большое внимание будет уделено получению необходимых данных с помощью графического редактора.
В соответствии с разметкой веб-страницы, шапка разделена на две основные части. Первая - это область, где располагаются фавикон, заголовок названия сайта и ключевая фраза, которые объединены элементом <div> с классом "hdr-title". Вторая часть - меню, образованое элементом <nav> с классом "menu".
Меню мы оставим для следующей статьи, а сейчас рассмотрим элементы: фавикон, заголовок названия сайта и ключевую фразу...
Создаем меню сайта с помощью стилей CSS
- Преобразование списка в ячейки таблицы
- Установка ширины меню
- Формирование кнопок меню
- Формирование ссылок меню
- Формирование активной кнопки
- Создание меню футера
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня, используя стили CSS создадим резиновое меню сайта, которое в пределах параметров резиновой верстки будет растягиваться и сжиматься в зависимости от разрешения экрана.
Как отмечалось в предыдущей статье, в соответствии с разметкой веб-страницы, меню размещается в шапке сайта. Ниже, приведен фрагмент HTML-кода, взятый из файла "index.html", в той части, которая относится к меню...
Делаем разметку области контента с использованием резиновой верстки
- Выбор способа резиновой верстки для блока ротатора
- Разметка блока ротатора
- Выбор способа резиновой верстки блока основного содержания и сайдбара
- Разметка блока основного содержания
- Разметка блока сайдбара
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня рассмотрим как с использованием техники резиновой верстки сделать разметку области контента HTML-страницы нашего сайта, включающее ротатор, основное содержание и сайдбар.
Прежде чем начать делать разметку, нужно определиться, какой вариант резиновой верстки следует использовать при создании HTML-страницы, так как от этого в большой степени зависит какие элементы и какая структура будут использованы.
При этом, надо понимать, что у каждой техники резиновой верстки имеются различные варианты применения в зависимости от конкретных задач.
Поэтому, сейчас мы остановимся на выборе способов, которые наиболее оптимально подойдут для нашего конкретного случая построения веб-страницы.
В нашем случае, для выбора способа верстки блока ротатора рассмотрим режимы его работы при растягивании, сжатии веб-страницы на экране монитора, и таким образом, попытаемся выяснить те особенности, которые нужно будет учесть при определении варианта техники резиновой верстки...
Оформляем блок ротатора с помощью стилей CSS
- Назначение размеров и размещение блока ротатора
- Размещение внутренних элементов
- Оформление текстового рекламного блока
- Оформление общего внешнего вида ротатора
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня оформим блок ротатора с помощью стилей CSS. Назначение стилей CSS будет проводиться с использованием техники резиновой верстки для возможности отображения веб-страницы на полную ширину экрана в установленных пределах.
Ранее анонсировалось, что в этой статье будут рассмотрены вопросы оформления элементов всей области контента. Однако, описание блока ротатора получилось слишком объемным, поэтому рассмотрение остальных элементов контента перенесено на следующий раз.
В предыдущей статье мы определились со способом верстки, который будет применяться для блока ротатора. Это построение блочной структуры с использованием для его внутренних элементов свойств display со значением table-cell. Ниже приведен HTML-код этой части веб-страницы...
Оформляем область контента с помощью стилей CSS
- Размещение блоков основного содержания и сайдбара
- Формирование внутренних элементов блока основного содержания
- Оформление текста блока основного содержания
- Оформление элементов сайдбара
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня с помощью стилей CSS выполним оформление остальных элементов области контента, таких как блок основного содержания и сайдбар. Делать это будем, как и в предыдущих случаях, с использованием техники резиновой верстки.
Ранее мы определились со способом верстки, который будем применять для блоков основного содержания и сайдбара. Это построение блочной структуры с использованием техники позиционирования.
Ниже приведен HTML-код этой части HTML-страницы, где видно, что для размещения данных блоков предусмотрен контейнер <div> с классом content-block...
Оживляем кнопки и проверяем сайт на валидность кода HTML и CSS
- Как сделать объемные кнопки
- Как сделать интерактивные кнопки
- Нужна ли валидация
- Как проверять на валидность HTML-код
- Как проверять на валидность CSS-код
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня рассмотрим на примере созданной веб-страницы как можно проверить сайт на валидность, а именно, на соответствие установленным спецификациям языков HTML и CSS.
Кроме этого, перед тем, как проводить проверку, сделаем некоторую доработку таблицы стилей CSS в части, касающейся "оживления" кнопок сайдбара, где из статических кнопок сделаем интерактивные, меняющие свой внешний вид в зависимости от своего состояния - пассивного, активного и нажатого...
Делаем выпадающее меню на CSS
- Создаем HTML-структуру выпадающего меню
- Трансформируем вложенный список в выпадающее меню
- Оформляем элементы созданной системы навигации
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня коснемся вопроса, который был задан одним из пользователей, а именно: как на сайте сделать выпадающего меню.
Действительно, многоуровневая система навигации довольно часто применяется для упорядочения поиска нужных разделов. Поэтому будет нелишним и в нашем сайте рассмотреть возможность использования такого решения.
При этом посмотрим, как можно создать выпадающее меню без использования JavaScript, применив только CSS. Так как зачем лишний раз использовать какие-либо скрипты, когда это достаточно просто можно сделать общедоступными свойствами CSS.