Создание сайта своими руками

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

Сложные сценарии обработки JS

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

Циклический алгоритм. Сценарий «Падающий снег»

Рассмотрим использование циклических структур на примере популярного в зимнее время года сценария «Падающий снег». Сначала подготовим снежинку. Желательно использовать изображение в формате GIF, поскольку он позволяет выполнить рисунок на прозрачном фоне, что в нашем случае критично.

Понятие CSS класса

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

Динамический HTML. Модель DOM

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

Селектор CLASS

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

Селектор ID

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

Применение CSS таблиц стилей

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

Знакомство с FTP-клиентом

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

Установка и настройка FileZilla

Выбрав версию, скачайте и установите программу стандартным для вашей операционной системы способом. После установки запустите ее на выполнение, и откроется примерно такое окно: