Урок 7. html дизайн.

Естественно, нет смысла использовать только элементы Web Forms для создания Web-страниц. Если нет нужды обрабатывать некие элементы в сценариях ASP.NET, всегда можно воспользоваться обычными элементами HTML, размещенными на одноименной вкладке панели Toolbox (Инструментарий). В этом разделе мы рассмотрим возможности дизайна Web-страниц с использованием чистого HTML.

Следует также помнить, что все элементы оформления Web-страниц, даже не входящие в состав Web Forms, в терминологии Visual Studio .NET являются объектами со своими свойствами и методами. При помощи свойств задаются параметры тегов, реализующих тот или иной элемент Web-страницы и их значения. Конечно, нет нужды рассматривать досконально весь список свойств и методов, на это есть оперативная справка, но вот основные и наиболее часто используемые методы мы рассмотрим.

Все, что в Web-странице находится между тегами <body> и </body> является объектом document. Часть свойств этого объекта отображена в окне Properties (Свойства). В этом окне собраны свойства, управляющие параметрами тега <body>.

aLink. Позволяет устанавливать цвет, которым будут отображаться активные гиперссылки на Web-странице.
aspcompat. Данное свойство имеет всего два допустимых значения — True и False, т. е. это логическое свойство. Если разработчик использовал значение True, то код данного Web-приложения будет выполняться по правилам технологии ASP (а не ASP.NET), что позволит использовать в работе приложения компоненты, разработанные до внедрения ASP.NET, т. е. унаследованные из предыдущих проектов.
background. Значение данного свойства содержит URL графического изображения, которое будет использоваться в качестве фона для Web-страницы. О bgcolor. Свойство задает цвет фона страницы. По умолчанию цвет вводится как комбинация трех двузначных шестнадцатеричных чисел. Впрочем, можно воспользоваться специализированным диалоговым окном установки цвета Color Picker (Указатель цвета), которое активизируется при помощи дополнительной кнопки, размещенной в поле ввода значения свойства. Внешний вид этого диалогового окна показан на рис. 3.5. Легко заметить, что данное диалоговое окно содержит четыре вкладки. Разработчик может выбрать цвет одним из четырех способов. На вкладке Web Palette (Web-палитра) размещены цвета, входящие в стандартную палитру Web. Вкладка Named Colors (Наименования цветов) предлагает разработчику выбрать один из цветов, для которых установлены стандартные символьные наименования. Помимо стандартных шестнадцати поименованных цветов на вкладке находятся еще пятьдесят два цвета, для которых также введены символьные наименования. Следует помнить, что далеко не все браузеры могут использовать дополнительные символьные наименования цветов. Вкладка System Colors (Системные цвета) содержит цвета, определяемые установками операционной системы (например, цвет заголовка активного окна — Activecaption). В том случае, если разработчик не нашел необходимого ему цвета на первых трех вкладках, всегда можно воспользоваться вкладкой Custom Color (Настройка цвета), и при помощи трех ползунков, регулирующих насыщенность трех основных цветов (красный, зеленый, синий), установить нужный цвет.
bgProperties. Свойство задает параметры отображения фонового рисунка, а именно, указывает, будет ли изображение двигаться вместе с содержимым страницы при прокрутке с помощью скроллеров или будет зафиксировано в окне просмотра.
bottomMargin. Свойство устанавливает размеры нижнего поля Web-страницы.
charset. Свойство задает наименование кодировки символов, которая будет использоваться браузером при отображении документа. Учитывая тот факт, что приложение ASP.NET будет выполняться под управлением сервера IIS, и для адекватного отображения наиболее продвинутых возможностей оформления Web-страниц пользователю потребуется использовать браузер Internet Explorer, разработчику для создания русскоязычных Web-страниц имеет смысл использовать кодировку Cyrillic (Windows).
codeBehind. Свойство содержит наименование файла, в котором находится код ASP.NET-приложения, связанного с данной Web-страницей. Разработчик не имеет возможности напрямую изменять значение этого свойства в окне Properties (Свойства).
contentType. Свойство задает тип содержимого Web-страницы, указываемый в заголовке протокола HTTP.
debug. Логическое свойство. Его значение указывает, надлежит ли среде разработки внедрять в разрабатываемую Web-страницу специальные символьные последовательности, позволяющие производить отладку ASP.NET-приложения.
defauitciientscript. Данное свойство указывает, какой именно язык сценариев будет использоваться разработчиком данной страницы для их исполнения на стороне пользователя. Свойство имеет всего два допустимых значения — jscript и VBScript. Смысл этих значений достаточно прозрачен и не требует дополнительного разъяснения.
Description. Свойство содержит строку с кратким описанием разрабатываемой Web-страницы. Значение этого свойства помещается в тег <мета> с соответствующими параметрами и позволяет хранить дополнительную информацию, обрабатываемую поисковыми машинами.
dir. Свойство указывает направление чтения и, соответственно, вывода текста. Для большинства языков, в которых чтение идет слева направо, используется значение itr. В ином случае будет использовано значение rti.
enableSessionstate. Логическое свойство, указывающее, будет ли данная Web-страница поддерживать механизм сеансов работы пользователей. Более подробно об этой технологии сеансов работы (также называемых сессиями) будет рассказано в соответствующем разделе главы.
errorPage. Свойство содержит в качестве своего значения URL-страницу, которая будет посылаться пользователю в случае возникновения каких-либо ошибок или необработанных приложением исключений (что, в сущности, одно и то же).
keywords. Свойство содержит список ключевых слов, характеризующих содержимое разрабатываемой Web-страницы. Значение этого свойства также может использоваться поисковыми машинами.
language. Значение этого свойства указывает компилятору, какой язык использовался программистом при разработке приложения ASP.NET, связанного с данной Web-страницей.
leftMargin. Данное свойство устанавливает размер левого поля Web-страницы.
link. Свойство задает цвет, которым будут отображаться не посещенные еще пользователем гиперссылки.
pageLayout. Свойство задает порядок позиционирования элементов Web-страницы в окне просмотра. По умолчанию используется значение GridLayout, которое создает Web-страницы с использованием абсолютного позиционирования. К сожалению, директивы абсолютного позиционирования внедряются напрямую в HTML-код Web-страницы без использования технологии CSS, поэтому в некоторых браузерах, таких, как старые версии Netscape Communicator, позиционирование может не работать, и страница будет отображена неадекватно. Если же разработчик планирует использовать стандартную "мягкую" верстку Web-страницы, при которой место каждого элемента рассчитывается браузером на основе размеров окна просмотра и внутренней структуры страницы, следует воспользоваться значением FiowLayout.
responseEncoding. Свойство задает кодировку символов, которая будет использована сервером для создания Web-страницы, сгенерированной в ответ на действия пользователя с текущей страницей.
rightMargin. Свойство устанавливает размер правого поля разрабатываемой Web-страницы.
showGrid. Свойство логического типа, которое указывает, будет ли отображаться сетка позиционирования в режиме разработки дизайна страницы. Естественно, данное свойство никак не влияет на внешний вид Web-страницы в браузере пользователя. Свойство может иметь только два значения — True или False. Впрочем, для отображения или сокрытия сетки разметки в режиме дизайна Web-страницы при ее разработке всегда можно использовать кнопку Show Grid (Вывести сетку) на инструментальной панели Formatting (Разметка).
targetschema. Свойство указывает, какой именно вариант стандарта языка HTML будет использован при разработке Web-страниц. Соответственно, можно указать целевой браузер для Web-страниц. Свойство может принимать одно из трех предустановленных значений — internet Explorer 3.02/Navigator 3, Internet Explorer 5.0, Используемое по умолчанию, и Navigator 4.
text. Свойство задает цвет, которым по умолчанию будет отображаться текст на разрабатываемой Web-странице.
title. Свойство содержит в качестве значения текстовую строку, которая будет использована как наименование Web-страницы, отображаемое в строке заголовка программы-браузера.
topMargin. Свойство устанавливает размер верхнего поля разрабатываемой Web-страницы.
transaction. Свойство указывает, будет ли поддерживать создаваемая Web-страница механизм транзакций. Свойство может принимать одно из нескольких предустановленных значений. Значение Notsupported означает, что данная страница не будет поддерживать механизм транзакций вообще. Значение supported указывает, что страница может работать с транзакциями. Если разработчику необходимо, чтобы страница работала только в режиме обработки транзакций, следует использовать значение Required. В том случае, если при отображении страницы необходимо создавать новую транзакцию, стоит обратить внимание на значение RequiresNew. Если Web-страница входит в состав последовательности страниц, обрабатывающих транзакцию, но сама не должна каким-либо образом менять ее состояние, следует установить значение Disabled.
viink. Свойство задает цвет, которым будут отображаться пройденные пользователем гиперссылки.

Впрочем, большую часть свойств, которые связаны со свойствами именно HTML-документа, разработчик может задать при помощи диалогового окна DOCUMENT Property Pages (Свойства документа), которое активизируется после выполнения команды меню View | Property Pages (Вид | Страницы свойств). Внешний вид этого окна показан на рис. 3.6.

Как видно, данное диалоговое окно содержит три вкладки. Вкладка General (Общие) содержит органы управления для задания общих свойств разрабатываемой Web-страницы. Все органы управления для установки различных цветов элементов оформления Web-страницы и полей документа собраны на вкладке Color and Margins (Цвет и границы). А ключевые слова, характеризующие содержимое Web-страницы, размещаются на вкладке Keywords (Ключевые слова).

Теперь перейдем к элементам, расположенным на вкладке HTML панели Toolbox (Инструментарий). Они, естественно, имеют несколько меньше свойств, нежели только что рассмотренный нами объект document, причем некоторые свойства присущи всем элементам, поэтому мы будем рассматривать только уникальные свойства для каждого компонента.

Компонент Label предназначен для размещения текста на разрабатываемой Web-странице. При этом в HTML-код страницы добавляется не тег нового абзаца <р>, как можно было бы ожидать, а новый блок, реализуемый тегом <div>. Следует также помнить, что в самом начале разработки Web-страницы Visual Studio.NET автоматически добавляет в HTML-код еще пустой страницы теги формы, внутри которой и будет располагаться все содержимое страницы. Естественно, разработчик не ограничен одной этой формой, создаваемой по умолчанию, и может вставить дополнительные формы в разрабатываемый документ, но об этом несколько позже.
Итак, компонент Label обладает следующим набором свойств, которые большей частью относятся к отображению данного текста.

Backcolor. Свойство задает цвет фона элемента.
BorderCoior. Свойство устанавливает цвет границы элемента, если она, конечно, имеет ненулевую ширину.
Borderstyie. Свойство задает тип отображаемой границы элемента.
Borderwidth. Свойство устанавливает ширину границы элемента.
cssciass. Свойство содержит в качестве своего значения наименование класса-селектора CSS-таблицы, с которой связана создаваемая страница. Естественно, для того чтобы использовать данное свойство, необходимо создать и подключить CSS-таблицу.
Font. Составное свойство, задающее шрифт, при помощи которого будет отображаться текстовое содержимое элемента. В его состав входят следующие подсвойства.
Bold. Логическое свойство, указывающее, будет ли применено полужирное начертание шрифта.
italic. Логическое свойство, указывающее, будет ли применено курсивное начертание шрифта.
Name. Свойство задает наименование шрифта, которым будет отображаться текстовое содержимое элемента. В выборе значения данного свойства следует проявить разумный консерватизм, так как далеко не факт, что удаленный пользователь, просматривающий Web-страницы, входящие в разрабатываемый проект, будет обладать тем же причудливым набором редких шрифтов, которые долго собирал разработчик. Поэтому следует ориентироваться все-таки на стандартные шрифты, входящие в состав стандартных поставок максимально большого количества операционных систем.
Names. Свойство позволяет задавать наименования шрифтов, которые будут использованы браузером удаленного пользователя в тех случаях, когда шрифт, указанный разработчиком в предыдущем свойстве, все-таки не будет установлен в операционной системе пользователя.
Overiine. Логическое свойство, указывающее, будет ли текстовое содержимое элемента дополнено горизонтальной линией, проходящей поверх символов шрифта.
size. Свойство устанавливает размер применяемого шрифта. При этом используются символьные значения, унаследованные стандартом HTML из CSS.
strikeout. Логическое свойство, указывающее, будет ли текстовое содержимое элемента перечеркнуто горизонтальной линией.
Underline. Логическое свойство, указывающее, будет ли текстовое содержимое элемента подчеркнуто.
ForeCoior. Значение устанавливает цвет символов шрифта, которым будет отображено текстовое содержимое элемента.
Text. Свойство содержит текст, который и составляет содержимое элемента Label.
AccessKey. Свойство устанавливает комбинацию клавиш, по нажатию которой фокус ввода будет перенесен на данный элемент.
Enabieviewstate. Очень интересное свойство логического типа. Дело в том, что многие элементы могут запоминать свое состояние, измененное пользователем. Очень часто это свойство применяется для элементов форм и элементов группы Web Forms (Web-формы). Однако наличествует и в группе свойств элемента Label. В том случае, если свойство установлено в True, то оно будет запоминать свои состояния и при перезагрузке страницы отображать себя именно так, как выглядело последний раз. То же самое относится и ко всем остальным элементам с подобным свойством.
Tabindex. Свойство содержит номер элемента в последовательности элементов оформления Web-страницы, перевод фокуса ввода между которыми может осуществляться при помощи табуляции. В данном случае разработчик получает возможность обеспечить доступ к отдельным элементам, так же как и к органам управления обычных приложений Windows — при помощи клавиши табуляции. Для этого надо каждому подобному элементу установить целочисленное значение свойства Tabindex. Соответственно, смена фокуса ввода будет переходить по элементам с установленным явно этим свойством от наименьшего значения к наибольшему.
ToolTip. Значение данного свойства будет высвечиваться в виде хинта-подсказки в браузере пользователя, когда тот наведет курсор мыши на элемент.
visible. Логическое свойство, которое указывает, будет отображаться данный элемент в браузере удаленного пользователя при просмотре Web-страницы, или нет.
Height. Свойство задает высоту создаваемого элемента.
weight. Свойство устанавливает ширину элемента.
id. Свойство содержит уникальный идентификатор объекта, который является значением одноименного атрибута id в HTML-коде, и служит наименованием объекта для обращения к нему из кода приложения.

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

<input id="Buttonl" type="button" value="Button" name="Buttonl">

Таким образом, используется тег <input> с типом button. Чаще всего данный элемент оформления Web-страниц используется разработчиками для запуска пользователями каких-либо скриптов, выполняющихся на стороне пользователя. Но какими-либо особыми свойствами этот объект не обладает, поэтому его можно не рассматривать детально. Также необходимо осознавать, что данная кнопка не будет обрабатываться сервером I1S, поэтому попытка написать обработчик нажатия на кнопку пользователем приведет лишь к отображению предупреждения, что данный орган управления предназначен для обработки браузером, а не сервером. Для того чтобы перевести данный компонент в разряд элементов, обрабатываемых сервером, можно щелкнуть правой кнопкой мыши на элементе и в появившемся контекстном меню выполнить команду Run As Server Control (Выполнять под управлением сервера).

Также Visual Studio. NET предоставляет возможность использовать кнопки Reset и Submit, которые реализуются при помощи все того же тега <input>, но при этом используются иные значения параметра type: reset и submit, соответственно. Надписи на всех трех видах кнопок задаются при помощи свойства value, а стиль отображения регулируется свойством style, в качестве значения которого используется набор инструкций CSS. Кнопка типа Reset, как мы знаем, обновляет содержимое всех органов управления, входящих в состав той же формы, что и сама кнопка, устанавливая для них те значения, которые были заданы разработчиком по умолчанию. Кнопка типа Submit позволяет пользователю отправить введенные в органы управления формы данные на сервер для их обработки.

Компонент с наименованием Text Field позволяет создавать однострочное поле символьного ввода. В HTML-коде оно реализуется уже знакомым нам тегом <input>, но теперь значение параметра type устанавливается в text. Компонент обладает некоторыми специфическими свойствами.

maxiength. Свойство устанавливает максимальное количество символов, которые пользователь может ввести в поле.
readonly. Свойство логического типа указывает, есть ли у пользователя возможность изменять информацию, находящуюся в этом поле. Если разработчик установил значение True для этого свойства, то текст, находящийся в поле, изменить будет нельзя.
size. Свойство устанавливает видимый размер поля ввода в символах.

Поле текстового ввода имеет и две дополнительные модификации. Так, компонент File Field совмещает в себе поле текстового ввода и кнопку Обзор, при нажатии на которую пользователем активизируется стандартное диалоговое окно операционной системы для выбора файла. Файл, который выбрал пользователь, обычно пересылается на сервер для обработки. А компонент Password Field фактически является функциональным двойником обычного поля текстового ввода, за исключением того, что символы, вводимые пользователем, отображаются в виде звездочек, чтобы никто не смог увидеть вводимых данных. Естественно, подобная модификация поля текстового ввода чаще всего применяется для запроса различных паролей.

Для того чтобы предоставить пользователю возможность вводить достаточно большие объемы текста, разработчик может воспользоваться компонентом Text Area, который позволяет вводить несколько текстовых строк. Внешний вид этого элемента регулируется следующим набором свойств:

cols. Свойство задает ширину поля ввода в символах;
disabled. Свойство логического типа указывает, будет ли доступен данный орган управления пользователю. Проще говоря, сможет ли он получить фокус ввода;
rows. Свойство задает высоту поля ввода в символах, т. е. количество одновременно отображаемых строк в поле;
wrap. Свойство устанавливает способ разбиения строк, не умещающихся в поле ввода полностью.

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

checked. Свойство устанавливает начальное состояние переключателя, будет ли установлен в нем флажок или нет. Свойство логическое, поэтому разработчик может использовать только два значения — True или False.
name. Свойство устанавливает наименование органа управления, которое будет передано на сервер для обработки. Именно по этим именам обрабатывающая программа и будет различать органы управления.
value. Значение этого свойства будет передано на сервер в том случае, если пользователь установит флажок в данном независимом переключателе.

Для того чтобы создать группу зависимых друг от друга переключателей, или, как их еще называют — кнопок выбора, следует воспользоваться соответствующим компонентом с наименованием Radio-Button. Для того чтобы мы могли объединить эти компоненты в одну группу, необходимо установить для всех кнопок переключателей одно и то же значение свойства name. Естественно, встает вопрос, а как программа, обрабатывающая данные, переданные пользователем, будет различать, какая именно кнопка была выбрана пользователем. Для этого используется свойство value. В этом случае обрабатывающей программе будет передано наименование группы кнопок переключателей и значение свойства value той кнопки, которую выбрал пользователь.

Компонент Hidden не отображается на Web-странице, когда ее в браузере просматривает удаленный пользователь. Обычно это поле используется дл* хранения и передачи некоей дополнительной информации, которую пользователь не должен видеть. Раньше это скрытое поле использовали в разветвленных Web-приложениях для хранения значений различных переменных которые должны были быть доступны нескольким формам сразу. Этот аналог глобальных переменных. Конечно, нельзя в подобных полях хранит! секретную информацию, так как Web-страницы могут сохраняться в кэше и при просмотре их кода пользователь сможет увидеть содержимое скрытогс поля. На самом деле в приложениях ASP. NET нет нужды использовать скрытое поле подобным образом, так как поддержка глобальных переменны уже встроена в ASP.NET. Более того, очень часто эти переменные использовались для поддержки механизма сеансов работы удаленных пользователей. А в ASP.NET этот механизм реализован более изящно, и использовать для этой цели глобальные переменные теперь нет нужды.

Еще одним компонентом, часто включаемым в формы, является выпадающий список, реализуемый при помощи элемента Dropdown. Элементы списка задаются при помощи диалогового окна <SELECT> Property Pages (Страницы свойств <Выбор>), которое активизируется при выполнении команды Properties (Свойства) контекстного меню.

Элементы выпадающего списка задаются при помощи органов управления, объединенных в группу Options for SELECT tag (Элементы выпадающего списка). Каждому элементу списка соответствует некое значение, которое будет передано обрабатывающей программе на Web-сервер, когда пользователь завершит ввод данных. Текст элемента списка указывается в поле ввода Text (Текст), а соответствующее ему значение — в поле Value (Значение). Затем введенная пара "имя-значение" вносится в состав списка при помощи кнопки Insert (Вставить). Порядок отображения элементов регулируется при помощи двух кнопок с изображением стрелок, направленных вверх и вниз. Эти кнопки перемещают соответственно вверх и вниз по списку выделенный элемент. Удаление какого-либо элемента из списка осуществляется, как нетрудно догадаться, при помощи кнопки Delete (Удалить). Наименование самого выпадающего списка, которое будет передано в обрабатывающую программу на сервере, задается в поле текстового ввода Name (Имя). Количество строк, отображаемых браузером при нажатии на кнопку, раскрывающую список, указывается в поле Size (Размер). Правда, в этом случае выпадающий список может потерять свою привычную форму и превратиться в обычный список с полосами прокрутки. Подобный список также может создаваться при помощи компонента Listbox. А в том случае, если разработчик готов предоставить пользователю возможность выбора не одного, а нескольких элементов выпадающего списка сразу, следует установить флажок в независимом переключателе Allow multiple selections (Разрешить множественный выбор).

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

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

Вставка таблицы на проектируемую Web-страницу производится либо при помощи компонента Table, либо при помощи команды Table | Insert | Table (Таблица | Вставить | Таблица). По умолчанию создается таблица из трех строк и трех колонок. Однако всегда есть возможность настроить внешний вид настолько тонко, насколько это позволяет технология HTML. Естественно, все параметры отображения таблицы задаются при помощи ее свойств, которые нам предстоит рассмотреть.

align. Свойство устанавливает горизонтальное выравнивание содержимого ячеек таблицы. В качестве значения свойства разработчик может использовать одно из трех ключевых слов: left, center и right, которые прижимают содержимое ячеек к левому краю ячеек, центрируют его или прижимают к правому краю, соответственно.
background. В качестве значения данного свойства используется URL графического файла, который будет использован в качестве фона таблицы.
bgcolor. Свойство задает цвет фона таблицы. Естественно, не имеет смысла использовать это свойство одновременно с предыдущим.
bprdercoior. Свойство задает цвет границ ячеек и таблицы в целом.
bordercoiordark. Свойство используется для создания иллюзии трехмерной границы таблицы. Для этого граница таблицы разделяется на две части. Верхняя левая половина отображается светлым цветом, а нижняя правая — темным. При этом подобное разделение относится и к ячейкам. Но у ячеек темная и нижняя границы меняются местами. Данное свойство устанавливает цвет темной половины границы. Впрочем, разработчик может сделать эту границу светлой. Выбор цвета полностью в его власти.
bordercoioriight. Свойство устанавливает цвет светлой стороны границы.
ceiipadding. Свойство задает отбивку ячейки, т. е. расстояние между содержимым ячейки и ее границами. В качестве значения свойства используется целое число, обозначающее количество пикселов.
cellspacing. Свойство предназначено для установки отступа ячеек, т. е. расстояния между самими ячейками.
height. Свойство задает высоту таблицы. На самом деле, изначально высота таблицы рассчитывается на основе ее содержимого, как сумма высот всех столбцов. А высота каждого столбца есть высота его самой высокой ячейки. Однако разработчик при помощи данного свойства может сам установить высоту таблицы. Если это значение будет больше, чем высота таблицы, рассчитанная браузером на основе ее содержимого, то будет использоваться значение, установленное разработчиком.
width. Свойство задает ширину таблицы. Как и в случае с высотой, это свойство имеет вес только тогда, когда превышает ширину, рассчитанную на основе содержимого ячеек. При этом в отличие от высоты таблицы, которую разработчик может задавать лишь в пикселах, ширина может указываться как в пикселах, так и в процентах.

На самом деле необязательно устанавливать все свойства таблицы в окне Properties (Свойства). Если щелкнуть по выделенной таблице правой кнопкой мыши, и в появившемся контекстном меню выполнить команду Properties (Свойства), то будет активизировано диалоговое окно <TABLE> Property Pages (Свойства Таблицы), показанное на рис. 3.8. В этом окне можно установить все параметры отображения, что называется, в визуальном режиме.

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

Однако только на уровне ячеек таблиц можно задать некоторые дополнительные свойства отображения их содержимого. Для этого следует перевести курсор именно в ту ячейку, свойства которой необходимо установить, и перейти к встроенному окну редактирования свойств объекта Properties (Свойства). Естественно, мы рассмотрим те свойства, которые типичны для ячеек, и доступ к которым на уровне всей таблицы не предусмотрен.

coispan. Свойство используется, если одна ячейка будет объединять в себе несколько ячеек из соседних столбцов, но в пределах одной строки. По сути дела, значение этого свойства указывает, сколько бы ячеек было вместо искомой ячейки, если бы она не объединяла столбцы.
nowrap. Логическое свойство, указывающее, может ли браузер разбивать текстовое содержимое ячейки на несколько строк, если в исходном виде оно превышает горизонтальные размеры ячейки.
rowspan. Свойство весьма похоже на только что рассмотренное свойство coispan. Но при этом указывается, сколько объединяется ячеек по вертикали.
vaiign. Свойство регулирует выравнивание содержимого ячеек по вертикали. В качестве значения данного свойства может быть использовано одно из предустановленных ключевых слов: baseline, bottom, middle и top, которые выравнивают содержимое ячейки по базовой линии шрифта, прижимают содержимое к верхней границе ячейки, центрируют по вертикали и прижимают к нижнему краю ячейки соответственно.

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

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

Для объединения элементов блочного типа используется тег <div> с его закрывающим близнецом </div>. А для iniine-элементов используется пара тегов <span> и </span>. Учитывая вышесказанное, ясно, что блок с тегом <div> не может располагаться внутри блока с тегом <span>, так как блочные элементы не могут входить в состав iniine-элементов.

Visual Studio .NET предоставляет разработчику возможность использовать подобные блочные инструкции. Microsoft, естественно, предпочитает блоки, реализуемые тегом <div>. Элемент Label опирается именно на этот тег. Однако в элементе Label нельзя группировать иные элементы оформления Web-страницы. Поэтому в палитре компонентов HTML находятся еще два элемента, создающие подобные блоки-контейнеры. И называются они практически одинаково — Flow Layout Panel и Grid Layout Panel. Более того, по набору своих свойств они также идентичны. В чем же разница между ними? Дело в том, что элемент Flow Layout Panel применяется в том случае, когда требуется использовать стандартное расположение элементов без применения абсолютной модели позиционирования. В тех случаях, когда разработчик планирует применять подобную модель позиционирования внутри блока-контейнера, следует использовать компонент Grid Layout Panel. А потом уже внутри этих контейнеров разработчик сможет помещать различные элементы оформления Web-страниц.

Компонент с наименованием image позволяет размещать на разрабатываемых Web-страницах графические изображения и видеоклипы. Естественно, основные параметры данного компонента задаются при помощи все тех же свойств.

alt. Свойство задает текст, который будет отображаться в виде хинта-подсказки при наведении пользователем курсора мыши на загруженную и отображенную браузером картинку. В том случае, если по каким-либо причинам искомое графическое изображение не будет загружено, например, из-за неверной ссылки на него или установок браузера, данная текстовая строка будет отображена вместо картинки или видеоклипа.
border. Свойство устанавливает ширину границы, отображаемой вокруг рисунка или области воспроизведения видеоклипа. Значением данного свойства является неотрицательное целое число, указывающее толщину границы в пикселах.
controls. Свойство логического типа, которое применяется разработчиком в тех случаях, когда на Web-страницу внедряется не простое графическое изображение, а видеоклип. Данное свойство указывает, будут ли вместе с видеоклипом отображаться органы управления его воспроизведением, а именно, кнопки запуска воспроизведения и паузы, а также бегунок, устанавливающий текущую позицию воспроизведения.
dynsrc. Свойство применяется для внедрения в состав Web-страницы видеоклипов. Значением свойства является URL воспроизводимого видеофайла. Естественно, разработчикам предоставляется возможность вставлять файлы с расширениями .avi, .asf и .mpeg, т. е. именно те типы, с которыми работает Windows Media Player. Хотя на самом деле браузеры могут воспроизводить видеофайлы и других форматов, если в системе ft удаленного пользователя установлены соответствующие видеопроигрыватели.
loop. Это свойство, как и два предыдущих, используется при работе с видеоклипами. Оно задает количество повторов воспроизведения ви-деоклипа после того, как будет полностью загружен соответствующий видеофайл,
lows гс. Данное свойство применяется при работе с графическими изображениями. Оно указывает на облегченную версию картинки, которая будет использована браузером в тех случаях, когда скорость работы с интернетом достаточно низка, и придется слишком долго загружать основное изображение. В качестве значения свойства, естественно, используется URL, указывающий на то самое "облегченное" изображение.
src. Свойство содержит URL, указывающий на графический файл, в котором хранится искомое изображение, предназначенное для отображения на Web-странице.
usemap. Свойство используется, если данное графическое изображение является одновременно местом для размещения одной или нескольких гиперссылок. В качестве значения свойства используется URL.
vrmi. Свойство применяется для внедрения на Web-страницу не просто изображения, а сцены виртуальной реальности, созданной при помощи языка VRML (Virtual Reality Modeling Language).
hspace. Свойство устанавливает размер отступа от границы графического изображения до окружающих его остальных элементов оформления Web-страницы по вертикали. Значением свойства является целое число, указывающее размер отступа в пикселах.
vspace. Свойство устанавливает размер отступа от границы графического изображения до окружающих его остальных элементов оформления Web-страницы по горизонтали. Значением свойства является целое число, указывающее размер отступа в пикселах.

И последним элементом, который мы еще не рассмотрели на вкладке HTML, является элемент Horizontal Rule, который позволяет размещать на Web-странице горизонтальную линию, являющуюся штатным средством HTML для визуального разделения различных блоков информации. Подобная линия реализуется при помощи тега <hr>. Естественно, этот элемент также обладает некоторыми специфичными свойствами.

align. Указывает горизонтальное позиционирование линии. В качестве значения свойства используется одно из трех ключевых слов — center, left или right, которые центрируют линию, или прижимают ее к левому или правому краю окна просмотра браузера, соответственно.
color. Свойство задает цвет отображаемой горизонтальной линии.
noshade. Логическое значение, указывающее, будет ли горизонтальная линия иметь тень, или нет. Если пользователь использует значение False, то вместе с линией будет отображена и ее тень.
size. Свойство задает толщину отображаемой горизонтальной линии в пикселах.
width. Задает длину горизонтальной линии. Длина может указываться как в процентах, так и в пикселах.

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