Рефераты. Разработка web сайта на основе HTML с использованием JavaScript

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

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

 Единицы измерения CSS






 

Абсолютные

Относительные

 

in (дюйм ~ 2,5 см)

mm (миллиметр)

cm (сантиметр)

pt (пункт ~ 1/7 дюйма)

рс (пика =12 пунктов)

em (высота шрифта элемента)

ех (высота буквы х)

рх (пиксел)

% (процентное соотношение)

 

В табл. 9.2 приведены наиболее распространенные свойства форматирования текста в CSS.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Свойства форматирования текста в CSS

 

Свойство

font-family

font-size

font-style

font-weight

font-variant

text-decoration text-align text-transform letter-spacing

line-height Color Background-color


Формат записи

font-family: Tahoma, Arial;

font-size: llpx; font-style: italic; font-weight: bold;

font-variant: small-caps;

text-decoration: underline;

text-align: right;

text-transform: uppercase;

letter-spacing: lem;

line-height: 5mm; color: tFFFFFF;

background-color: white;

Функция

Выбор гарнитуры для отображения (допускается перечисление нескольких названий через запятую)

Размер шрифта

Выбор наклона текста (курсив)

Наличие/отсутствие жирного начертания

Преобразование строчных букв в прописные с изменением пропорций

Подчеркивание текста

Определение типа выравнивания текста

Выбор регистра букв Межбуквенный интервал

Межстрочный интервал Цвет текста Цвет фона текста



<FONT CLASS="text">

CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста (<FONT STYLE="text-decoration: underline;">подчеркивание</ГОМТ>, <FONT ID="kursiv">KypCMB</FONT>, '<FONT STYLE="font-weight: bold;">жирное начертание</ГОЫТ>, <FONT STYLE= "font-family: Times New Roman;">выбор гарнитуры</ГОЫТ> и <SPAN CLASS="font">pa3Mep шрифта</ЗРШ>), с помощью средств CSS возможно <FONT С1АЗЗ="со1ог">изменять такие параметры</ГОЫТ>, как <FONT STYLE= "letter-spacing: Зрх;">межбуквенный</РОМТ> и межстрочный интервал, <FONT STYLE="text-transform: uppercase;">тирегистра</ЕОМТ> (строчные и прописные буквы) и многое другое.

</FONT> </BODY> </HTML>

Структурное форматирование


Также каскадные таблицы стилей CSS привнесли много нового и заметно расширили функциональность форматирования структурных элементов электронного документа: р, div и пр.

В табл. 9.3 приведены наиболее распространенные свойства структурного форматирования в CSS.






Таблица 9.3. Свойства структурного форматирования в CSS

 

list-style-image   list-style-image: url(«bullet.gif");


Свойство

margin


border-width border-style border-color list-style-type

Формат записи

border-width: 20px;

border-style: solid;

border-color: gray;

list-style-type: square;

margin:       Ipx      2px 3px   4px;

Функция

Ширина    границы    структурного элемента

Ти декоративного  отображения границы элемента

Цвет границы  структурного элемента

Тинумерованного или маркированного списка

Указание   пути   к   графическому маркеру

Определение размера поля относительно верхнего, правого, ниж-

JavaScript


JavaScript - язык подготовки сценариев, позволяющий сделать Web-страницы более интерактивными и функциональными. После его изучения вы сможете заниматься разработкой Web-приложений на качественно новом уровне. Для написания сценариев JavaScript обязательно требуется знание языка HTML. В этой главе вы получите первое представление о JavaScript еще до того, как начнете создавать свой первый сценарий.

Здесь приводится следующая информация:

Q важность изучения JavaScript; а история JavaScript;

а некоторые различия между языками подготовки сценариев и языками программирования; а инструменты, необходимые для написания сценариев JavaScript.

Использование JavaScript

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

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

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

Прочитав эту книгу, вы не только освоите JavaScript (вместо того, чтобы просто копировать и вставлять в Web-страницу готовые сценарии), но и узнаете множество интересных идей, реализовать которые вы сможете сами - с помощью JavaScript.


Важность изучения JavaScript


Полезно изучить JavaScript хотя бы из-за его широкого распространения в сети. Огромное количество Web-страниц сделано с использованием сценариев (по самым разным причинам), и сайты без них кажутся блеклыми и скучными. Каким бы интересным не было содержание сайта, некоторые посетители сразу захотят уйти. Конечно, нет смысла оспаривать важность текстового содержания для любой Web-страницы, однако использование JavaScript не только улучшит подачу материала, но и сделает вашу страницу более запоминающейся.

Рекомендация Запомните: единственное, что отличает пользующиеся успехом сайты от неудачных, - их внешний вид. Чем интереснее оформлен сайт, тем он популярнее.

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

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

JavaScript в действии


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

а основные понятия JavaScript, такие как синтаксис, разметка, комментарии и др.; а некоторые термины языка JavaScript и причины, по которым он относится

к объектно-ориентированным языкам программирования; Q создание и чтение сценария JavaScript; а использование JavaScript для вывода и ввода информации.


Ввод/вывод информации с помощью JavaScript


В этой главе приводятся образцы сценариев JavaScript. Тщательно проработайте каждый из них, вводя код с клавиатуры. Следует потренироваться на элементарных примерах, прежде чем переходить к более сложным.

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

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

Теперь вы научитесь как вводить информацию с помощью JavaScript, так и выводить ее в виде разнообразных окон сообщений. (Если вам приходилось блуждать по сети дольше нескольких минут, то вам они уже встречались.)

На рис. 3.1, 3.3 и 3.5 показаны окна сообщений трех типов в браузере Internet Explorer, а на рис. 3.2, 3.4 и 3.6 - в браузере Netscape Navigator.

Все эти окна созданы на языке JavaScript:

a Alert (Предупреждение) - служит для вывода информации;

a Confirm (Подтверждение) - предназначено для вывода информации и позволяет пользователю сделать выбор в форме ответа Да/Нет на вопрос;

a Prompt (Запрос) - служит для вывода информации и позволяет пользователю ввести ответ с клавиатуры.


Объекты, методы и свойства

Вы, вероятно, слышали о том, что JavaScript - объектно-ориентированный язык. Но что это означает? Чтобы это понять, вам следует ознакомиться с тремя терминами:

Q объекты;

а методы;

а свойства.

Сначала рассмотрим их в общих чертах. Чем дальше вы продвинетесь в изучении JavaScript, тем чаще вам придется ими пользоваться, так что более близкое знакомство оставим на будущее.

Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18



2012 © Все права защищены
При использовании материалов активная ссылка на источник обязательна.