Реферат Тема: "Создание web сайта, Синтаксис html, Объекты и формы, Создание графики."
| Вид материала | Реферат |
- Тема урока: Создание Web страниц с помощью html, 39.83kb.
- План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
- Моу сош №18 г. Новотроицк, моу сош, 95.86kb.
- Создание Web-страниц. Изучение языка html, 186.84kb.
- Создание собственной web-страницы в Internet, 927.61kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 213.14kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 214.3kb.
- Концепция www 5 Создание Web-страницы с помощью языка html 7 1 Язык html 7 Структура, 217.81kb.
- План лабораторных работ Введение в Web-программирование; создание html-страниц, работа, 6.6kb.
- Содержание программы: Web -дизайн Основы Web -дизайна. Дизайн в Internet: задачи, подходы,, 13.59kb.
На этой странице создана форма с именем forma02 и с элементами, выровненны-
ми при помощи таблицы. Элемент TEXTAREA.имеет конечный тег для отделение
текста, находящегося в области прокрутки. Однако, поскольку это элемент фор-
мы, для изменения его содержимого используется свойство value, а не свойстве
innerText, необходимое для элементов, служащих контейнерами текста. При за-
грузке страницы выполняется функция DoFirst(), что позволяет ввести в тексто-
вую область исходную строку.
Для кнопок (элемент INPUT типа button) определены события ≪щелчок мышью≫
ondick. Первая кнопка записывает в текстовую область содержимое переменной
Stroka, определенной в секции SCRIPT. Вторая кнопка удаляет весь текст из эле-
мента. Поскольку кнопки стандартные, нам не надо думать о том, как будет выгля-
деть нажатая и отжатая кнопка: все сделает программа. Но при желании можнс
воспользоваться одним из предыдущих примеров и сделать кнопки на основе ри-
сунков. Но тогда пришлось бы запрограммировать для каждой кнопки несколькс
событий.
ПРИМЕЧАНИЕ
Эта страница находится в файле Buttons.php на прилагаемой дискете.
Сценарий для одного элемента 131
Сценарий для одного элемента
Чтобы использовать сценарии, вовсе не обязательно писать длинные программы.
Текст простого сценария можно поместить внутрь начального тега элемента.
Здесь необходимо указать атрибуты событий, чтобы запрограммировать реакцию
элемента на внешнее воздействие.
Основным средством программирования служит конструкция this —объект,
обозначающий текущий элемент.
Например, чтобы запрограммировать изменение цвета элемента в зависимости от
положения указателя мыши, достаточно одной команды для каждого события:
<Н1 onmouseover="this.style.color='green'
onmouseout="this.style.color='black' ">3аголовок K/h1>
При необходимости для одного атрибута события можно использовать несколь-
ко команд " onclick="return false">
Можно также использовать условные операторы и, соответственно, фигурные
скобки для разграничения необходимых блоков команд.
Если изменение цвета заголовка имеет чисто декоративную функцию, то управ-
ление свойствами гиперссылки требуется для подсказки пользователю. Допустим,
нас не устраивает традиционный вид ссылки с подчеркнутым текстом. Тогда
можно легко изменить вид надписи. В примере, приведенном ниже, для текста
ссылки выбран синий цвет (color: blue), полужирное начертание (font-weight:
bold), но отменено подчеркивание (text-decoration: none). При размещении ука-
зателя мыши над ссылкой цвет текста меняется на красный:
<А
href="№/." onmouseover="this. style. color=' red'
onmouseout="this.style.color='blue' " >Текст ссылки
ПРИМЕЧАНИЕ
Эти примеры записаны в файле Simplest.php на прилагаемой дискете.
Глава 6
Приемы разметки гипертекста
Элементы HTML изучены, гипертекстовые редакторы освоены. Достаточно л]
этого для того, чтобы начать создавать страницы? Увы, нет. Очень важно проник
нуться духом HTML, понять, почему Web-страницы делают именно так, а не ина
че. Кроме того, многие элементы не всегда используются по прямому назначению
Самый очевидный пример —таблицы. Они являются непревзойденным средство!*
организации структуры страницы, когда все детали занимают строго определен
ное место, независимо от размеров окна броузера, разрешения монитора и други:
режимов. Рамку таблицы делают, разумеется, невидимой. Эта глава посвящен;
подходам к конструированию страниц.
Стиль и традиции
При создании достаточно крупных сайтов автор всегда должен стараться выпол-
нить ряд требований: загрузка страниц должна происходить по возможности быс-
тро, любая страница должна выглядеть одинаково при просмотре в различны>
программах, пользователь должен легко разобраться, какая информация есть ш
сайте и как ее найти.
Особенность первых Web-страниц заключалась в том, что они изобиловали под-
черкнутыми фрагментами —гиперссылками. У авторов не было нынешних воз-
можностей по созданию сложных визуальных эффектов, но было желание поде-
литься информацией об интересных местах в Интернете. Такие страницы былк
удобны именно как текстовые документы.
Здесь явно просматриваются тенденции и мода. Точно так же, как в MS-DOS
преобладающим фоном был синий, в WWW вначале преобладали серые страни-
цы. Разумеется, это мало кого устраивало. Одним из экзотических решений былс
использование черного фона. Это поначалу впечатляло, но, как всякая экзотика,
не прижилось. Самым значительным направлением в экспериментах с фоном
было использование рисунков ≪серым по серому≫. Мне приходилось видеть не-
мало подлинных шедевров, построенных только на 2— оттенках серого цвета.
В такой манере воспроизводили все: от логотипов фирм до лирических пейзажей.
Отзвуком этой моды является раскраска панели броузера Internet Explorer 3.0:
разработчики этой программы явно хотели, чтобы цветовая гамма панели соот-
ветствовала виду большинства Web-страниц.
Стиль и традиции 133
Потом HTML и броузеры были усовершенствованы, и начался бум графики. Раз-
работчики считали своим долгом расположить на своих страницах как можно
больше двигающегося, прыгающего и мигающего. Поначалу все это было очень
интересно, но со временем ≪зритель≫ начал уставать. Кроме того, романтические
настроения стали уступать меркантильным соображениям: все больше организа-
ций стали обзаводиться собственными рекламными страницами.
В моду вошли фреймы: левую часть окна отводили для набора ссылок, которые
служили путеводителем по сайту —своеобразным меню (рис. 6.1,а). Одновре-
менно вверху и внизу каждой страницы размещали ≪горизонтальное меню≫ — набор команд в виде ссылок или рисунков. Такая компоновка страницы оказалась
вполне рациональной, но в последнее время от нее отказываются. Возможно, это
связано с тем, что из-за разделения окна броузера по вертикали в пропорции 1:4
сайты стали похожи друг на друга, а хочется получить что-нибудь оригинальное.
Другая причина, на мой взгляд, —экономия места на экране. Дело в том, что про-
странство окна просмотра в броузере является весьма ≪дефицитным≫. Разработ-
чики всегда стремятся создать как можно больше объектов, которые видны одно-
временно. Поэтому вертикальная полоса прокрутки в середине экрана многим
мешала.
britannlca'.com Web Directory
Arts & Entertainment
Movies. TV. Music...
Autos
Classic. Dealers.
Manufacturers...
Business & Finance
Industries. Jobs. Investing
Computers
Software. Hardware,
Graphics...
Recreation & Travel
Food. Outdoors. Humor...
Reference
Maps. Education.
Libraries...
Regional
US. Canada. UK. Europe.,
Science
Biology. Psychology.
Physics...
Рис. 6.1. Разные подходы к оформлению страниц: а —фрагмент вертикального меню сайта
энциклопедии Британника; 5—часть страницы поисковой машины Alta Vista
С точки зрения дизайна многое определяет фон документа. Увлечение рисунками
в виде фона тоже оказалось не вечным. С одной стороны, этот прием стал баналь-
ностью. С другой стороны, существуют чисто технические причины для отказа от
рисунков. Дело в том, что разрешающая способность экрана монитора не может
быть произвольно увеличена: разработчик должен учитывать, что страница будет
просматриваться в режиме 640x480 пикселов. Это очень маленькая величина по
сравнению, например, с журнальной полиграфией. Даже один пиксел легко раз-
личим глазом. Чтобы в таких условиях обеспечить сглаживание шрифтов, надо
134 Глава 6. Приемы разметки гипертекст;
согласовать цвет шрифта≫ тени и фона. То же самое можно сказать об изображе
ниях красивых кнопок и других графических элементов. Если фон представляем
собой рисунок, такое согласование выполнить трудно, поэтому сейчас опять i
моде однотонные страницы.
Разработчики по-разному подходят к выбору фона. Все, что связано с моло
дежной тематикой, располагается на черном фоне: сайты, посвященные музыке
компьютерным играм, авангардной моде и т. д. Респектабельность достигаете;
темно-синим фоном (navy): многие солидные компании выбирают этот цвет
Пользователи, создающие личные странички, предпочитают фон пастельны:
тонов (зеленый, бежевый, голубой). В общем, творческий поиск не прекращает
ся ни на минуту. Результат всех этих исканий оказался вполне закономерным
дизайнеры пришли к выводу, что самым естественным решением будет ис
пользование белого фона. Очень многие титулованные фирмы в настояще*
время оформили свои страницы именно таким образом. Если вы посмотрит!
на рис. 6.1,6, то поймете, почему. На белом фоне четко виден шрифт малоп
размера, что позволяет разместить большое число гиперссылок на небольшое
площади.
В самом низу страницы принято размещать служебную информацию: сведе
ния об авторских правах, адрес электронной почты Web-мастера, полезньк
ссылки и т. д.
Не таблица, а табличка
Простейшая таблица —это таблица из одной ячейки. Если определить для не<
атрибуты border, cellspacing и cellpadding, то получится табличка с рельефно!
рамкой. Код в этом случае может быть таким:
| Петровым 2 звонка |