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