ПК |
|
|
Наши друзья: |
|
|
Группы: Администратор: |
||
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ПК » Написание сайтов » Визуальный софт упрощяющий жизнь
Начинающие дизайнеры используют всегда визуальные программы, т.е. никто не знает никаких тегов, а просто делают то на что способна та или иная программа.
Самамя распространенная из них Microsoft Front Page о которой мы и будем говорить в дальнейшем
Из этой программы можно выжать гораздо больше чем она выдает, если знать html теги.
К сожелению программа не расчитана на некоторые скрипты, php, и еще некоторые языки, но для начало обойдемся и этим
Microsoft Front Page
И так, уже видно из названия, что это продукт компании Microsoft
Програмная оболочка построена на принципе Word и если вы работали в ворде, то вам не придется сильно напрягатся,
чтобы разобратся в инрефейсе программы.
В самом низу програрамного окна есть 4 вкладки:
1-конструктор
Переключившись на эту вкладку, вы переходите только в визуальный режим программы, никаких тегов и кодов вы не видите.
Этот режим подходит для новичка.
Прост в исполнении и все что вы делаете видно в реальном времени(другие режимы немного отличаются)
2-С разделением
Этот режим пдходит для более опытных пользователей.
В таком режиме вы не только видите страницу на котрой что нибудь создаете, но и код этой страницы
3-Код
Режим для профессионалов.
Как я уже говорил программа не дружит с php так как она не расчитана на такой движок, и поэтому в режиме "Код" вы только сможете посмотреть начинку, но вы не увидите что она делает
4-Просмотр
Режим просмотра служит для того чтобы увидеть, то что вы натворили.
Например если у вас есть динамические объекты то они будут задействованы только в этом режиме,
В других они будут статистическими или просто невидимыми(так случается когда приходится ставить javascript)
Планирование разработки
Мы познакомились с главным окном программы FrontPage. Прежде чем Приступить к самостоятельной разработке Web-узла, давайте ознакомимся с планированием разработки и с элементами, используемыми в оформлении Web-страниц.
Путешествуя по Интернету, вы просмотрели десятки разнообразных Web-узлов. Многие из них привлекают внимание своим внешним оформлением, удобно размещенной информацией, хорошо продуманными средствами навигации. А сколько порой раздражения вызывает Web-узел, требующий долгой загрузки информации. Если к тому же окажется, что он не информативен, у вас пропадет желание посещать его еще раз. Поэтому, приступая к собственной разработке Web-узла, как следует просмотрите в Интернете понравившиеся вам страницы, подумайте над тем, чем именно они привлекли ваше внимание, какие из элементов оформления вы хотели бы использовать в своем Web-узле.
Планируя свою разработку, тщательно продумайте следующие вопросы:
Информацию какого типа вы хотите разместить в создаваемом Web-узле. Это может быть информация о вашей компании и выпускаемой ею продукции и предлагаемых услугах, реклама того или иного вида товара или просто личная страница, из которой вы хотите переходить на ваши любимые страницы в Интернете.
На кого рассчитан ваш Web-узел. Например, если Web-узел создается с рекламной целью определенного вида товара или услуги, то вы должны четко определить, для какой аудитории и возрастной группы этот товар предназначен. От этого будет зависеть и внешнее оформление, и форма подачи материала, и даже панели навигации, и глубина ссылок.
После того как вы определились с информацией, размещаемой в Web-узле, подобрали весь необходимый материал, необходимо продумать, как эту информацию разместить и оформить. При планировании Web-узла старайтесь придерживаться следующих рекомендаций:
Внешнее оформление Web-узла имеет немаловажное значение для его посещаемости. Если у вас прекрасный вкус и это не вызывает сомнения у окружающих, то вы вполне можете ему довериться и оформлять страницу самостоятельно. В том случае, если вы считаете, что дизайнер из вас не получится, то в оформлении Web-узла положитесь на программу FrontPage, предлагающую такое средство, как Темы, и на профессиональных дизайнеров фирмы Microsoft, их разработавших.
Не размещайте на одной странице слишком большой объем информации, так как это мешает ее восприятию. Создайте несколько связанных страниц, разместив на них информацию, сгруппированную по тематике. Для облегчения чтения информации используйте разнообразные списки, таблицы. Оставьте достаточно свободного пространства между различными смысловыми группами.
Наиболее важная информация, которую вы хотите донести до посетителя и ради которой Web-узел фактически создается, должна быть наиболее доступна и находиться на верхних уровнях вложенности Web-узла. Глубоко должна быть размещена информация, необходимость в которой может и не возникнуть.
Не перегружайте Web-узел большим количеством графической информации, замедляющей его загрузку. Вы, вероятно, сами не раз отказывались от посещения таких Web-узлов, нажимая на панели инструментов кнопку, останавливающую загрузку информации.
Используйте в своих разработках панели ссылок, компактно располагающиеся на страницах и позволяющие пользователям легко перемещаться по различным разделам Web-узла. Не забудьте предусмотреть ссылку, с помощью которой посетитель Web-узла сможет легко вернуться на вашу исходную (домашнюю) страницу.
Замечание
Разработав структуру создаваемого Web-узла, ознакомьтесь с мнением хотя бы нескольких предполагаемых посетителей или коллег по работе. На данном шаге вам будет значительно легче скорректировать свою работу и не потратить время впустую.
Разработка структуры страниц
Прежде чем переходить непосредственно к созданию Web-узла, необходимо разработать структуру основных входящих в него страниц, чтобы пользователю легко было перемешаться между страницами различных уровней, а также, чтобы он в любой момент мог вернуться на домашнюю страницу.
Первая страница, на которой оказывается посетитель, это домашняя страницa. Она, несомненно, должна содержать заголовок, краткое описание разделов Web-узла, ссылки на разделы второго уровня иерархии в структуре, а также информацию об авторских правах и информацию для контактов, которую можно разместить в колонтитуле.
После того как вы определились с домашней страницей и размещаемой на 'ней информацией, необходимо перейти к разработке страниц второго уровня. Их количество должно определяться количеством основных разделов Web-узла. На этих страницах размещается наиболее важная информация, относящаяся к разделам, а также, если в них есть необходимость, ссылки на страницы третьего уровня иерархии.
На страницах третьего уровня размещается уточняющая информация к основным разделам Web-узла
Замечание
Информацию об авторских правах, а также информацию для контактов можно разместить в колонтитулах страниц всех уровней.
Элементы оформления Web-страниц
Просматривая Web-узлы в Интернете, вы, вероятно, обращали внимание на то, что страницы содержат определенные элементы оформления. Это — заголовки, фоновое изображение, информация для контактов, графические изображения, панели ссылок, таблицы, фреймы. Рассмотрим кратко основные элементы, используемые в оформлении Web-страниц.
Текстовая информация
Текстовая информация, размещаемая на Web-странице, призвана знакомить посетителя Web-узла с интересующей его информацией. Программа FrontPage предоставляет в распоряжение разработчика средства по форматированию заголовков, символов, абзацев, включающие в себя установку различных параметров шрифта, интервалов между символами, смещений, отступов, созданию маркированных и нумерованных списков и т. д. С помощью этих средств вы сможете выделить на странице наиболее важные места, сделать информацию легко читаемой. Помимо этих средств форматирования, при работе над документом могут быть использованы специальные символы шрифтов, которые позволяют внести разнообразие в оформление страницы.
Программа FrontPage, как и все программные продукты Microsoft Office, содержит средства, призванные облегчить работу по размещению текста. Это команды проверки орфографии, поиска и замены, тезаурус.
Фон страницы
По умолчанию FrontPage предлагает для создаваемых Web-страниц белый фон. Вы можете изменить цвет фона, используя предлагаемые программой цвета, что не скажется на времени загрузки Web-узла. Для страниц, содержащих много текста, лучше использовать светлый однотонный фон. В этом случае текст будет легче читаться.
Чтобы сделать страницу более привлекательной, в качестве фона страницы может выступать графическое изображение. Но, выбирая рисунок для фона, помните, использование графического изображения приводит к увеличению размера файла, а соответственно, увеличивается и время загрузки страницы. К тому же рисунок фона не должен быть ярким, чтобы на нем была видна размещенная на Web-странице текстовая информация.
Горизонтальные линии
Для выделения заголовков, разделов текста, для разделения разной по тематике информации и просто для оформления Web-страниц используют горизонтальные линии. Размещение горизонтальной линии на Web-странице осуществляется командой Горизонтальная линия (Horizontal Line) ( ) из меню Вставка (Insert). Кроме того, страницы можно украсить графическими линиями. Образцы графических линий можете поискать в библиотеке графических изображений Clip Art.
Таблицы
При форматировании символов и абзацев Web-страницы используются .средства, которые могут игнорироваться некоторыми обозревателями, например, пустые строки. Учитывая это, для представления информации, содержащей текст и графические изображения, а также для выравнивания текста на Web-страницах можно использовать таблицы.
FrontPage предоставляет в распоряжение разработчика широкий набор средств для работы с таблицами, упрощающих выполнение большинства практических задач. Команды, предназначенные для работы с таблицами, позволяют вам легко создавать и редактировать таблицы, а также упорядочивать и форматировать содержащиеся в ней данные.
С помощью средств, предоставляемых программой FrontPage, разработчик может задавать цвет разделительных линий таблицы, цвет фона или разрешить использовать вместо фона изображение. Если таблица служит для разбиения Web-страницы на отдельные зоны, ее можно сделать невидимой. Кроме того, в качестве мощного средства форматирования Web-страниц, когда необходимо должным образом разместить элементы внутри таблицы, можно использовать вложенные таблицы.
Общие области
Страницы Web-узла могут содержать повторяющуюся информацию о названии компании, контактных адресах, дате последней модификации, авторских правах, логотип компании. Для размещения информации, которая должна отображаться на всех страницах, нет необходимости открывать каждую страницу Web-узла и вводить данные. Вам достаточно создать на всех страницах общую область и ввести информацию в эту область один раз.
Общую область, располагаемую в верхней части страницы, можно использовать для размещения логотипа компании, заголовков страниц, панелей ссылок. Общую область, располагаемую в нижней части страницы, иногда называют нижним колонтитулом. В эту область обычно помещают информацию об авторских правах, дату обновления информации на Web-узле, адреса для контактов. Общую область по левому краю страницы удобно использовать для размещения панелей ссылок.
Предупреждение
Правую часть страниц желательно не использовать в качестве общей области. Это вызвано тем, что в зависимости от разрешения экрана монитора или размера окна обозревателя она не всегда помещается на экране и в этом случае для ее просмотра необходимо использовать полосу прокрутки, что не очень удобно.
Графические изображения
Графические изображения, находящиеся на Web-страницах, улучшают восприятие информации, делают страницы более яркими и запоминающимися. Графические изображения вы можете подготовить сами или использовать библиотеки графических файлов программных продуктов, таких как FrontPage, CorelDraw, PhotoShop и т.д.
При создании Web-узлов чаще всего применяют графические форматы JPEG (Joint Photographic Experts Group) и GIF (Graphics Interchange Format), являющиеся форматами со сжатием. Выбор формата определяется стоящими при разработке задачами. Так, например, GIF формат применяется для изображений, содержащих меньше 256 цветов, и используется, как правило, для создания анимационных эффектов. Если изображение содержит более 256 цветов, то применяется формат JPEG. Кроме того, программа FrontPage позволяет импортировать файлы, имеющие другие форматы, преобразовывая их в форматы JPEG и GIF.
После того как графическое изображение размещено на странице, с помощью кнопок панели инструментов Рисунки (Pictures)
(рис. 10.5) можно изменить его яркость и контрастность, повернуть по горизонтали или по вертикали, преобразовать цветное изображение в полутоновое и т. д. Эта панель автоматически появляется в окне программы FrontPage при щелчке на изображении.
Гиперссылки
Гиперссылки предназначены для перемещения между страницами текущего Web-узла, а также на другие узлы в поисках нужной информации. Они могут указывать на текст, графические изображения, страницы других Web-узлов в сети Интернет, документы Microsoft Office, закладки, размещенные на этой же странице, на других страницах Web-узла или внутри документов, локальные файлы вашего компьютера, адреса электронной почты для доставки корреспонденции и т.д. При ссылке на файлы Microsoft Office автоматически запускается соответствующая программа и открывается файл, на который указывает ссылка. Если страница, на которой создается ссылка, является фреймом (т.е. разбита с помощью рамок на несколько областей), можно указать, в какую область фрейма загружать страницу, на которую указывает ссылка.
В качестве гиперссылки можно использовать не только текстовую информацию, но и графическое изображение или отдельные его части, называемые активными областями. Для создания на изображении активных областей используются кнопки панели инструментов Рисунки (Pictures).
Эффекты динамического HTML
Разработчику Web-узла, работающему с программой FrontPage, предоставляются разнообразные средства, позволяющие сделать Web-страницы интересными. К таким средствам, прежде всего, относятся динамические эффекты (Dynamic HTML).
Для размещения на Web-странице динамических HTML-объектов служит диалоговое окно Вставка компонента веб-узла (Insert Web Component), предлагающее три компонента данного типа. Это Быстрая строка (Marquee), Меняющаяся кнопка (Hover Button) и Диспетчер объявлений (Banner Ad Manager).
Кроме того, FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint. При создании эффектов анимации используется панель инструментов Эффекты DHTML (DHTML Effects). Комбинируя значения всех трех списков данной панели инструментов, можно формировать самые разнообразные эффекты. Например, при загрузке Web-страницы текст будет влетать по спирали или волнообразно, въезжать сверху, снизу, справа, слева или по диагонали из разных углов страницы. Размер размещаемого текста можно увеличивать или уменьшать. Отдельные слова текста могут падать в формируемую фразу сверху или вплывать, двигаясь волнообразно.
Замечание
Есть одно существенное ограничение, препятствующее широкому использованию при создании Web-узлов динамических HTML. Оно заключается в том, что не все обозреватели, с помощью которых пользователи просматривают Web-страницы, данные эффекты поддерживают.
Фреймы
Существует два основных средства, позволяющих разбивать Web-страницу на области. Об одном из них мы уже говорили. Это таблицы. Вторым средством, управляющим размещением информации на Web-странице, являются фреймы . Они позволяют разбивать Web-страницы на прямоугольные области, в каждой из которых отображаются отдельные страницы.
FrontPage-компоненты
Компоненты, предоставляемые в распоряжение разработчика программой FrontPage, представляют собой готовые к применению программные модули, для использования которых достаточно разместить компоненты на Web-странице и настроить их свойства. Использование компонентов расширяет функциональные возможности Web-узла, ускоряет разработку и избавляет от необходимости программирования. Перечислим наиболее часто применяемые компоненты:
Подстановка (Substitution) — размещает на Web-странице информацию, задаваемую с помощью переменной. При изменении значения переменной происходит автоматическое обновление данных во всех местах, где эта переменная используется
Страница (include Page) — вставляет содержимое отдельной страницы с периодически обновляемой информацией в другие страницы Web-узла
Страница с расписанием (Scheduled Include Page) — вставляет СОДСр-жимое отдельной страницы в другие страницы Web-узла на определенный интервал времени
Рисунок с расписанием (Scheduled Picture) — вставляет графическое изображение на страницу Web-узла на определенный интервал времени
Счетчик посещений (Hit Counte r) — размещает на Web-странице компонент, позволяющий получить сведения о том, сколько пользователей открывало Web-узел
Форма поиска (Search Form) — позволяет посетителям Web-узла проводить поиск необходимой информации
Оглавление (Table of Contents) — размещает на домашней странице оглавление со ссылками на все страницы Web-узла
Электронная таблица Office (Office Spreadsheet) — добавляет на страницу электронную таблицу, являющуюся объектом Microsoft Office
Диаграмма Office (Office Chart) — добавляет на страницу диаграмму, являющуюся объектом Microsoft Office
Сводндя таблица Office (Office PilotTable) — Добавляет на страницу объект Microsoft Office, позволяющий подключиться к базе данных с помощью OLE DB, просмотреть заданный объект и изменить его содержимое
Для размещения на Web-странице компонентов используется диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 10.8), открываемое командой Веб-компонент (Web Component) из меню Вставка (Insert), а также кнопкой
Веб-компонент на стандартной панели инструментов.
Наш первый HTML-документ
Как устроен HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.html-файл может быть одновременно открыт
и в Блокноте, и в браузере.
Сохранив изменения в Блокноте, просто нажмите кнопку
F5 ('перезагрузить') в IE, чтобы увидеть
эти изменения реализованными в HTML-документе.
</P>
</body>
</html>
Если хотите, можно посмотреть этот пример прямо сейчас.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.html-файл может быть одновременно открыт
и в Блокноте, и в браузере.
Сохранив изменения в Блокноте, просто нажмите кнопку
F5 ('перезагрузить') в IE, чтобы увидеть
эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки <html> ... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<title> ... </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> ... </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> ... </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка
по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием
по правому краю</P>
Подытожим все, что мы знаем, с помощью примера 2 :
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример
HTML-документа</H2>
<P>Теперь мы знаем, что абзац можно выравнивать
не только влево, </P>
<P ALIGN=CENTER>но и по центру</P>
<P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
Цветовая гамма HTML-документа
Если Вы читаете это Руководство на Интернет, Вы уже могли заметить, что главы Руководства и примеры несколько отличаются по цветовой гамме. Главы Руководства написаны черным по белому, а гипертекстовые ссылки выделены красным цветом. Я не знаю, как Вы видите примеры, но у меня они написаны черным по серому с выделением ссылок синим цветом.
Дело в том, что главы Руководства содержат HTML-метки, определяющие их цветовую гамму. Примеры таких меток не содержат, поэтому их цветовая гамма устанавливается браузером самостоятельно. Именно поэтому я не знаю, какие цвета Вы видите в примерах — это определяется настройкой Вашего браузера.
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:
bgcolor
Определяет цвет фона документа.
text
Определяет цвет текста документа.
link
Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.
vlink
Определяет цвет ссылки на документ, который уже был просмотрен ранее.
alink
Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Разберем несколько примеров.
bgcolor=#FFFFFF
Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.
text=#000000
Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.
link=#FF0000
Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.
Кроме того, метка <BODY> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.
Заголовок HTML-документа: что в нем может быть интересного?
Заголовок HTML-документа, вообще говоря, не виден пользователю при просмотре. Однако в нем есть некоторые интересные особенности, которые стоит знать.
Заголовок HTML-документа может включать неограниченное количество так называемых META-инструкций. META-инструкция — это просто способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные META-инструкции:
<META NAME="description" CONTENT="Это руководство -
учебник для тех, кто хочет публиковать документацию
любого рода на глобальной компьютерной сети
Интернет">
Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.
<META NAME="keywords" CONTENT="Интернет, HTML, WWW,
руководство, публикация, гипертекст">
Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера (со стороны очень похоже, что именно такой подход был использован, например, при создании сервера технической поддержки фирмы Novell, ведущего производителя операционных систем для локальных компьютерных сетей).
Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов. (Не переживайте, это не так страшно, как кажется на первый взгляд!) Разберем несколько примеров:
<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=windows-1251">
Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251.
<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=koi8-r">
Эта META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8.
<META HTTP-EQUIV="Refresh" CONTENT="[время];
URL=[документ]">
Такая META-инструкция дает браузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так:
<META HTTP-EQUIV="Refresh"
CONTENT="10; URL=http://www.yi.com/home/
ChuvakhinNikolai/">
Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки документа, содержащего такую инструкцию, автоматически будет загружен документ http://www.yi.com/home/ChuvakhinNikolai/.
META-инструкцию Refresh можно использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере.
Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки HTML-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей. Пример В отличие от всех примеров, которые мы рассматривали ранее, пример 9 состоит не из одного, а из трех файлов. Используя META-инструкцию Refresh, мы создадим небольшой слайд-фильм из трех кадров (файлов e0009.html, e0009a.html и e0009b.html), которые будут циклически повторяться. Для остановки демонстрации нужно будет воспользоваться любой из гипертекстовых ссылок.
<!--файл e0009.html -->
<html>
<head>
<title>Пример 9</title>
<meta http-equiv="Refresh" content="2; URL=/books/html/e0009a.html">
</head>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000">
<h1>Слайд-демонстрация цветовых гамм <br>
с помощью META-инструкции Refresh </h1>
<p>Черный текст на белом фоне </p>
<p>[ <a href="/html">Возврат к оглавлению</a> | <a href="/html/6">Возврат к главе 6</a> ]</p>
</body>
</html>
<!--конец файла e0009.html -->
<!--файл e0009a.html -->
<html>
<head>
<title>Пример 9a</title>
<meta http-equiv="Refresh" content="2; URL=/books/html/e0009b.html">
</head>
<BODY bgcolor="#000000" text="#FFFFFF" link="#FF0000">
<h1>Слайд-демонстрация цветовых гамм <br>
с помощью META-инструкции Refresh </h1>
<p>Белый текст на черном фоне </p>
<p>[ <a href="/html">Возврат к оглавлению</a> | <a href="/html/6">Возврат к главе 6</a> ]</p>
</body>
</html>
<!--конец файла e0009a.html -->
<!--файл e0009b.html -->
<html>
<head>
<title>Пример 9b</title>
<meta http-equiv="Refresh" content="2; URL=/books/html/e0009.html">
</head>
<BODY bgcolor="#C0C0C0" text="#0000FF" link="#FF0000">
<h1>Слайд-демонстрация цветовых гамм <br>
с помощью META-инструкции Refresh </h1>
<p>Синий текст на сером фоне </p>
<p>[ <a href="/html">Возврат к оглавлению</a> | <a href="/html/6">Возврат к главе 6</a> ]</p>
</body>
</html>
<!--конец файла e0009b.html -->
Для чего нужны таблицы?
На этот вопрос есть очевидный ответ: таблицы нужны для представления информации в табличном виде. Есть, однако, и менее очевидные ответы.
До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь.
Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.
Как устроена таблица
В устройстве таблицы легче всего разобраться на простом примере .
<HTML>
<HEAD>
<TITLE>Пример 10</TITLE>
</HEAD>
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION> <!--Это заголовок таблицы-->
У таблицы может быть заголовок
</CAPTION>
<TR> <!--Это начало первой строки-->
<TD> <!--Это начало первой ячейки-->
Первая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Первая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец первой строки-->
<TR> <!--Это начало второй строки-->
<TD> <!--Это начало первой ячейки-->
Вторая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Вторая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец второй строки-->
</TABLE> <!--Это конец таблицы-->
</BODY>
</HTML>
Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:
ALIGN
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH
Ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).
BORDER
Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING
Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
CELLPADDING
Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:
ALIGN
Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
NOWRAP
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN
Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH
Устанавливает ширину ячейки в пикселах (например, WIDTH=200).
HEIGHT
Устанавливает высоту ячейки в пикселах (например, HEIGHT=40).
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.
Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу.
Для чего нужны формы?
Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Рассказать о формах в книге, посвященной HTML, достаточно трудно. Причина очень простая: создать форму гораздо проще, чем ту "точку внешнего мира", в которую форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.
В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).
Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Как устроена форма
Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений.
Метка <FORM> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:
ACTION
Обязательный атрибут. Определяет, где находится обработчик формы.
METHOD
Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
ENCTYPE
Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.
Простейшая форма
Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. Создать такой орган управления очень просто:
<INPUT TYPE=submit>
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается "сабмит" с ударением на втором слоге, от английского "подавать"), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.
Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:
<INPUT TYPE=submit VALUE="Поехали!">
Теперь мы знаем достаточно для того, чтобы написать простейшую форму (пример 11). Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.
<HTML>
<HEAD>
<TITLE>Пример 11</TITLE>
</HEAD>
<H1>Простейшая форма </H1>
<FORM ACTION="pr0008.html"> <!--Это начало формы-->
<INPUT TYPE=submit VALUE="Назад, к главе 8...">
</FORM> <!--Это конец формы-->
</BODY>
</HTML>
Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:
<INPUT TYPE=submit NAME=button VALUE="Поехали!">
При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!.
В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.
Как форма собирает данные
Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.
Основные типы элементов <INPUT>:
TYPE=text
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:
<INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван">
Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user.
TYPE=password
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:
<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>
Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.
TYPE=radio
Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с
Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.
TYPE=checkbox
Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример:
<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет
Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.
TYPE=hidden
Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете придумать сами. Пример:
<INPUT TYPE=hidden NAME=version VALUE="1.1">
Определяет скрытую переменную version, которая передается обработчику со значением 1.1.
TYPE=reset
Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name. Пример:
<INPUT TYPE=reset VALUE="Очистить поля формы">
Определяет кнопку Очистить поля формы, при нажатии на которую форма возвращается в исходное состояние.
Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.
Меню <SELECT> из n элементов выглядит примерно так:
<SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
...
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
Как Вы видите, меню начинается с метки <SELECT> и заканчивается меткой </SELECT>. Метка <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню.
Метка <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню.
Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.
Разберем небольшой пример.
<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
<OPTION VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3.
После всего, что мы уже узнали, элемент <TEXTAREA> может показаться совсем простым. Например:
<TEXTAREA NAME=address ROWS=5 COLS=50>
А здесь - Ваш адрес...
</TEXTAREA>
Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере — address). Атрибут ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50).
Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.
Пример
Для демонстрации использования форм я написал небольшую программу на PHP, которая находится по адресу:
http://206.31.82.215/hp/nc/fd-win.pht
Исходные данные в эту программу передаст форма, описанная в примере 12 :
<HTML>
<HEAD>
<TITLE>Пример 12</TITLE>
</HEAD>
<H1>Несколько более сложная форма </H1>
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht"
METHOD=post>
<H2>Расскажите немного о себе...</H2>
<P>Указывать подлинные данные совсем не обязательно.
Для целей демонстрации вполне подойдут и вымышленные.
</P>
<P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR>
Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>
Пол: <INPUT TYPE=radio NAME=gender VALUE="male"
checked>мужской
<INPUT TYPE=radio NAME=gender
VALUE="female">женский<BR>
Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>
<INPUT TYPE=submit VALUE="Запустить обработчик"></P>
</FORM>
</BODY>
</HTML>
Заполняйте форму, жмите на кнопку и смотрите, что будет...
Маленькая хитрость,
или Как отправить форму почтой
Все это прекрасно, скажут скептики, но на кой ляд нужны формы людям, которым их нечем обработать? Отчасти это верно, но только отчасти.
HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике.
Допустим, что мы слегка изменили Пример 12. Вместо строки
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht"
METHOD=post>
мы ввели строку
<FORM ACTION="mailto:user@mail.box"
ENCTYPE=text/plain>
Обратите внимание, что мы изменили алгоритм кодирования на text/plain, то есть фактически выключили кодирование вообще.
Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик?
Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:
fn=Иван
ln=Петров
gender=male
age=22
К сожалению, не все пользователи смогут воспользоваться такой формой. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке
Вы здесь » ПК » Написание сайтов » Визуальный софт упрощяющий жизнь
Участник