Доброго Вам здоровья, уважаемые читатели!
Наши сегодняшние темы:
РАБОТА С Visual HTML Workshop
ТЕЛО ДОКУМЕНТА HTML
Напоминаю, что полные версии статей с иллюстрациями лежат на сайте.
РАБОТА С Visual HTML Workshop
Работа с редактором Visual HTML Workshop очень проста и напоминает работу со многими текстовыми редакторами.
Главное окно имеет меню в верхней части и комбинированную панель кнопок, дублирующих большинство пунктов меню. Если поднести указатель мышки к интересующей вас кнопке, то появится всплывающая подсказка.
На первом этапе нас интересуют четыре кнопки:
Создать новый проект.
Создать страницу проекта.
Сохранить весь проект.
Посмотреть в браузере
При нажатии на кнопку "Создать новый проект" появляется окно "Новый проект - директории".
Выбираем в соответствующих окошках каталог, где будут располагаться файлы проекта, и название проекта. Каталог можно задать, выбрав нужный в левом окошке, или прописав его вручную. Оставляем в силе галочки
"Хранить ссылку на корневой каталог" и "Использовать директорию для графических файлов" (с двоичными файлами пока не связываемся) и нажимаем кнопку "далее".
Появляется следующее окно "Оформление страниц".
Здесь вообще все ясно расписано. Опять же выбирать цвета можно или прописав коды вручную, или нажав на кнопку "определить", выбрать то, что Вам нравится. При изменении кодов в окошках "цвет" в правом
окошке "вид" показывается, как будет выглядеть Ваша будущая страница. Оставляем пока в покое "Использование таблиц стилей" и, после того, как определились с цветами, жмем "далее".
Следующее окно:"информация для поисковых машин".
JavaScript мы пока не используем,
заполняем графы "ключевые слова" и "описание документа". Должен сразу сказать, что все занесенное в эти графы будет автоматически вставляться в теги МЕТА в заголовки всех страниц проекта. Поэтому,
если Вы решили использовать для каждой страницы Вашего сайта отдельное описание и набор ключевых слов, то эти окошки следует оставить пустыми, поставив только флажки. В принципе, особой роли это не играет,
т. к. эти теги можно вставить в документ или исправить, добавить и т. д. вручную в любое время, даже после завершения работы над проектом.
Не забудьте поставить флажок "Указывать Charset в МЕТА". Для чего, я уже говорил.
"Дополнительные вставки в документ"... Если Вы поставите соответствующий флажок и нажмете кнопку "редактировать", откроется окошко, куда Вы сможете ставить HTML-код, который будет повторяться
во всех документах. Например, можно в заголовок вставить тег МЕТА со свойством "Author", а в тело - Ваше лого, или перечисление навигационных сносок, которые в противном случае придется прописывать на каждую
страницу вручную.
Пропускаем скрипты и нажимаем кнопку далее. Появляется последнее окно из серии "Новый проект - фреймы". С фреймами мы пока решили не связываться, поэтому сразу жмем "готово".
Теперь уже появляется главное окно редактора с довольно приличным куском HTML-кода первой страницы Вашего сайта.
Редактор автоматически дает название файлу, в котором будет храниться эта страница - index.html, как того требуют большинство серверов. Если на сервере, куда Вы поместите свой сайт, будут другие требования, Вы всегда сможете изменить это имя.
К этому могу добавить, что в названиях файлов, которые Вы будете давать следующим страницам, стоит употреблять только прописные буквы латинского алфавита. Это объясняется особенностями операционной системы UNIX, под которой работают большинство
серверов.
Теперь Вы можете, нажав на одну из кнопок 4 (в зависимости от того, какой браузер Вы предпочитаете), посмотреть, что у Вас получилось.
Можете считать, что первая Ваша страница создана. В следующей статье мы начнем наполнять ее содержанием.
ТЕЛО ДОКУМЕНТА HTML
Вот мы, наконец, и подошли вплотную к созданию собственно страницы, которую браузер Вашего посетителя покажет своему хозяину. Как я уже говорил, все, что мы
хотим показать гостям нашего сайта, должно располагаться в теле HTML-документа, обозначаемого тегом-контейнером <BODY></BODY>. Кроме того, сам тег <BODY></BODY>
имеет довольно много параметров, которые определяют общий вид документа. Мы рассмотрим только некоторые из них. И хотя спецификация HTML 4.0 советует использовать для оформления
внешнего вида страницы вместо этих параметров таблицы стилей, проще начать с употребления параметров.
Для примера рассмотрим параметры, с которыми употреблен тег в документе, который Вы читаете. В HTML-коде он представляется в таком виде: <BODY BGCOLOR="#F9FCC2" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000"> Разберемся с каждым параметром в отдельности:
ПараметрBGCOLOR=" ". -- Определяет цвет фона страницы. Допускает использование 256 цветов. Цветовая система базируется на трех основных цветах.
Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, эти значения ставятся в порядке: красный, зеленый, синий и со значком # вставляются в качестве значения
параметра. Вместо цифровых значений можно использовать названия цветов. Браузеры последних версий поддерживают 140 названий цветов. То есть для назначения, например, красного цвета
можно написать BGCOLOR="#FF0000" или BGCOLOR="red", зеленого - BGCOLOR="#008000" или BGCOLOR="green". При задании цвета названием нужно быть очень внимательным, т. к. ошибка в одной
букве приведет к тому, что браузер не сможет распознать цвет. Вместо параметра BGCOLOR=" ", или совместно с ним, применяется
ПараметрBACKGROUND=" ". -- Задает фоновое изображение. В качестве значения этого параметра указывается URL-адрес рисунка, который Вы хотите использовать
в качестве фона на своей странице. Например, Вам понравился вот такой рисунок: и Вы хотите,
чтобы Ваши посетители любовались им на Вашей странице. Допустим, файл с этим рисунком называется floggy1.jpg и лежит в каталоге IMG (собственно, где он лежит - это не принципиально, хоть в Америке или наоборот
- в Азии, главное - указать к нему
правильный адрес), тогда Вы должны вставить в тег <BODY> параметр BACKGROUND со значением "img/floggy1.jpg". В окне редактора это будет выглядеть вот так: <BODY BACKGROUND="img/floggy1.jpg">,
а в окне браузера вот так или вот так, в зависимости от Вашего желания. Как подготовить рисунок к использованию, мы обсудим
позже, когда будем рассматривать работу с графикой. А сейчас ограничимся теми объяснениями, которые приведены на примерах. Скажу только, что к выбору рисунка для фонового изображения следует подходить
очень осторожно. Иначе может получиться именно так, как на вышеприведенных примерах: лягушенок симпатичный, но подобрать цвет текста, чтобы текст легко читался - невозможно, т.к. сам рисунок очень пестрый.
ПараметрTEXT=" ". -- Определяет цвет текста на странице.
ПараметрLINK=" ". -- Определяет цвет еще не просмотренной ссылки.
ПараметрVLINK=" ". -- Определяет цвет уже просмотренной ссылки.
ПараметрALINK=" ". -- Определяет цвет активной ссылки, на которую наведен указатель мышки.
Значения этих четырех параметров определяются так же, как для параметра BGCOLOR=" ".
Если Вы работаете с редактором Visual HTML Workshop, то все эти параметры и вообще тег BODY вставляются автоматически. Вам только необходимо выбрать все эти цвета
при открытии нового проекта или при создании файла новой страницы. Для создания нового файла (напомню, что для каждой страницы Вашего сайта должен
быть отдельный файл) при работе с Visual HTML Workshop нужно нажать на кнопочку в левом верхнем углу с изображением листа бумаги со знаком +.
При этом появляется окно "новый документ",где Вы даете название файлу, определяете его тип и нажимаете кнопку "далее". Следующее окно оформления внешнего вида страницы
нам уже знакомо: "окно оформления внешнего вида страницы". Теперь здесь уже стоят значения, общие для всего проекта, но если Вы хотите выделить данную страницу из общего ряда, делать это надо здесь.
Вот собственно и все о теле. В следующей статье рассмотрим, какие теги употребляются для форматирования текста на странице.
Напоминаю, что вопросы задавать сюда, а все, что уже было написано раньше, и будет еще написано позже, вы найдете здесь.
Всего Вам доброго. Сергей Червонящий.