Выделяют две основные группы методов и соответствующих инструментов разработки веб-сайтов: визуальные и ручные. Ручные (программные) методы веб-конструирования требуют знания языка разметки HTML. Визуальные же методы позволяют производить все работы по созданию веб-страниц с высокой степенью автоматизации и не требуют знания языка разметки HTML.Они уменьшают трудоёмкость и сроки разработки сайта.
При создании веб-сайтов могут использоваться специальные инструменты – редакторы визуального конструирования. Например: Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor и др. С помощью таких редакторов веб-страницы создаются в интерактивном режиме, при этом автоматически генерируется соответствующий HTML-код, который представляет собой набор команд языка разметки HTML.
Статические страницы отображаются браузером пользователя в том виде, в каком были созданы и размещены на веб-сервере. Динамические страницы генерируются по запросу пользователя – информация на них загружается серверными программами из баз данных.
Проектирование сайта
Выделяют следующие основные этапы разработки веб-сайтов:
определение тематики сайта, его целей и задач;
проектирование структуры сайта, определение разделов и связей между страницами;
разработка дизайна сайта, т.е. стиля оформления страниц;
подготовка материалов (текстов и графики) для размещения на веб-страницах;
конструирование страниц сайта (создание HTML-кода);
размещение в сети (публикация) и тестирование сайта.
Под стилем оформления веб-страницы понимают сочетание свойств элементов веб-страницы: стиля текста (совокупности параметров формата символов и абзацев) и стиля графических элементов (совокупности параметров формы).
Создание HTML-документа в редакторе Блокнот
Коротко о главном:
Абзац задаётся тегом
. При просмотре в браузере абзацы отделяются друг от друга пустой строкой. Для принудительного перехода на новую строку без создания абзаца используется непарноый тег
.
Полужирное начертание символов задаётся тегом , курсивное начертание символов задаётся тегом i.
Цвет фона всей страницы задаётся атрибутом bgcolor, цвет текста – атрибутом text.
Для задания шрифта, цвета и размера символов используется тег . Шрифт задаётся арибутом face, значением которого является название шрифта, например Arial. Размер символов задаётся атрибутом size и может выражаться в условных единицах, которые могут принимать значения от 1 до 6. Цвет символов задаётся атрибутом color.
Важную роль в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения («обои»), разделительные линии. Они не только делают страницы более привлекательными и наглядными, но во многих случаях являются основными источниками информации. Предназначенные для веб-страниц изображения можно создавать и редактировать в различных графических редакторах. Они могут быть получены с помощью цифрового фотоаппарата, сканера или взяты из сети Интернет. Наиболее предпочтительны графические форматы GIF, JPG и PNG, файлы которых имеют небольшие размеры, что позволяет ускорить процесс загрузки. В формате JPG сохраняют полутоновые изображения, например, фотографии. Формат GIF поддерживает анимацию и прозрачный цвет. Важно подчеркнуть, что все изображения, которые мы видим на вебстранице, хранятся в отдельных файлах, а в HTML-коде имеются лишь ссылки на них. Для отображения рисунков предназначен непарный тег . Его неотъемлемым атрибутом является имя графического файла . Веб-страницы и файлы с изображениями могут хранится в разных папках, тогда в атрибуте src тега необходимо указать путь. Указание путей обязательно для ссылок на все объекты, например, на другие страницы, аудио и видео фрагменты. Тег может содержать и другие атрибуты, которые определяют способ отображения рисунка. Высоту и ширину отображаемого на экране рисунка в пикселях можно задать значениями атрибутов height и width, соответственно, а толщину рамки вокруг изображения - значением атрибута border. По умолчанию рамки нет, т.е. border=”0”. Указание размеров позволяет увеличить или уменьшить видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не заданы, то по мере загрузки рисунка может измениться расположение текста и других объектов на экране. Чтобы этого не происходило, полезно всегда указывать эти атрибуты, даже если изображение не масштабируется. Значения атрибута align задают выравнивание текста относительно рисунка (top по верхнему краю; middle по середине; bottom по нижнему краю) или способ обтекания текстом (рисунок слева left или справа right от текста). С помощью атрибута alt можно задать текст сообщения, которое будет выводиться вместо рисунка, если он не найден или показ отключен в браузере. Кроме того, этот текст появляется в виде подсказки при полдведении курсора мыши к рисунку.
Переходы со страницы на страницу веб-сайта выполняются с помощью гиперссылок. За организацию ссылок на языке HTML отвечает тег с обязательным атрибутом href, значением которого является адрес (URL) ресурса. Например, HTML-код текстовой гиперссылки на страницу “Графика”, которая сохранена в файле graf.htm в той же папке, что и исходная, имеет вид: Графика , т.е. адресом является имя файла. Обычно близкие по тематике страницы сайта сохраняют в соответствующих папках