Реферат Тема: "Создание 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.

Табличка, которая создается при помощи этого кода, показана на рис. 6.2.

Рис. 6.2. Пример таблицы из одной ячейки

Заголовок и рисунок рядом

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

стить рядом текст и рисунок. Так можно поступить с заголовком и иллюстрацией

названием фирмы и логотипом, подсказкой и рисунком-гиперссылкой. Естествен-

Мозаичные рисунки 135

но, что рамку таблицы в этом случае уместно скрыть, обнулив атрибут border. Код

можно использовать такой:

A03T <1>Две пирамиды

src="images/treug1.gif">

В результате текст, отформатированный в виде заголовка, и рисунок расположат-

ся так, как показано на рис. 6.3. Таким способом можно выполнить и более слож-

ное форматирование поверхности Web-страницы.

АОЗТ Две пирамиды

Рис. 6.3. Размещение текста и рисунка рядом

Мозаичные рисунки

Иногда возникает необходимость разбить рисунок на несколько частей. В этом слу-

чае при помощи таблицы можно обеспечить точную подгонку фрагментов друг к

другу. В этом примере рисунок размером 250x250 пикселов разбит на четыре части:







Чтобы между частями рисунка не было зазоров и смещения, необходимо выпол-

нить ряд условий. Во-первых, значения атрибутов border, cellspacing ncellpadding

должны быть равны нулю. В результате рамка таблицы будет невидимой, а пусто-

го пространства между фрагментами не будет. Во-вторых, надо использовать ко-

нечные теги ячеек таблицы и проследить, чтобы в ячейках не осталось про-

белов: должны присутствовать только элементы IMG. Рис. 6.4 дает представление

об этом приеме. В данном случае для наглядности оставлена рамка таблицы

(border=3). Это несколько противоречит изложенному выше, но может служить

еще одним способом представления мозаичного рисунка.

Выгоды от использования мозаики следующие. Элементы таблицы загружаются

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

имеет формат GIF, то одну часть мозаики можно сделать с анимацией, а осталь-

ные —нет, что позволит уменьшить объем файлов. Наконец, отдельные фрагмен-

ты рисунка могут служить гиперссылками.

136 Глава 6. Приемы разметки гипертекст

Рис. 6.4. Мозаичный рисунок

Объединение ячеек таблицы

Многие пользовательские задачи требуют создания таблиц со сложной структу

рой. Элемент TABLE оказывается в таких случаях как нельзя более кстати, так ка;

позволяет создавать всевозможные формы таблиц. Самое сложное в разработк

рамки таблицы —объединение нескольких ячеек в одну. Разберемся, как это делаете*

На рис. 6.5 показан пример таблицы, в которой объединены несколько ячеек одноп

столбца и несколько ячеек строки. Ниже приведен код этого фрагмента страницы



<ТВ><ТО><В>Заголовок 1

<ТО><В>Заголовок 2

Ячейка 1 <ТО>Ячейка 2 <ТРхТО>Ячейка 3 <ТН><ТО>Ячейка 4
	Ячейка 5

ipl

Ячейка 2

Ячейка 3

лейка 4

Рис. 6.5. Таблица с объединенными ячейками

Чтобы объединить ячейки столбца, необходимо использовать атрибут rowspai

для элемента ТО, соответствующего верхней из объединяемых ячеек. Значени<

Вложенные таблицы 137

атрибута определяет количество объединяемых ячеек. Теперь начинается самое

сложное. При создании элементов, отвечающих за нижние строки таблицы, необ-

ходимо пропускать элементы ячеек, расположенных на месте объединения. В на-

шем примере эти строки содержат по одной ячейке, несмотря на то, что в таблице

две колонки.

Аналогичным образом объединяются ячейки в строке. Для этого используется

атрибут colspan. В данной строке также оказалось достаточно одного элемента TD.

Атрибуты rowspan и colspan могут использоваться совместно в элементе TD. В этом

случае в одну ячейку объединяются ячейки из нескольких столбцов и нескольких

строк. Пример такой таблицы показан на рис. 6.6. Она создана при помощи следу-

ющего кода:



<ТВхТОхВ>Заголовок 1

<ТО><В>Заголовок 2

<ТОхВ>Заголовок 3

Ячейка 1 <ТНхТО>Ячейка 2 <ТВхТО>Ячейка 3 <ТРхТО>Ячейка 4 $4eiiKa 5

Обратите внимание: несмотря на то, что объединяются ячейки трех строк (как в

предыдущем примере), значение атрибута rowspan увеличено на 1.

[За

Ячейка 2

Ячейка 3

Ячейка 4

'Я-ш

Рис. 6.6. Одновременное объединение ячеек нескольких строк и столбцов

Вложенные таблицы

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

вложение таблиц. В этом случае одна из таблиц размещается вместо данных одной

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

отдельности, а затем переносить вкладываемые таблицы через буфер обмена. Пример

вложенной таблицы показан на рис. 6.7. Она создана при помощи следующего кода:

Таблица 1 138 Глава 6. Приемы разметки гипертекст	<ТВ><ТО> Таблица 2 <ТО>Ячейка 2-2 <ТВ><ТО>Ячейка 3-2 <ТО>Ячейка 4-2
Ячейка 3-1	Ячeйкa 4-1

Таблица 2 |Ячейка, 2-2

чешса 3-2 Ячейка 4-21

Рис. 6.7. Пример вложенной таблицы

Форматирование ____________линии

При помощи атрибутов элемента HR можно превратить горизонтальную линии

в ту или иную деталь Web-страницы. По сути, этот элемент создает прямоуголь

ник, и только параметры по умолчанию делают его похожим на горизонтальнув

линию. На рис. 6.8 показаны различные форматы линии. Вертикальную линии

получить несложно, надо лишь задать большую высоту и маленькую ширину

например: size=100 width=2. Задав равные значения для высоты и ширины, полу

чим квадрат, который можно использовать для разделения частей страницы ка]

маркер при создании списков и даже как элемент гиперссылки, на котором над(

щелкать мышью. Задав атрибут ширины в процентном отношении (width=25%)

получим черту, которую иногда ставят в конце текста. Преимущество такого под

хода —быстрота создания элемента.

Эксперименты с лютей

Заданы высота, длина и цвет

[Линия внутри

таблицы

Горизонтальная линия в качестве цветного

прямоугольника

Рис. 6.8. Различные варианты форматирования линии

Стихотворный текст 139

Стихотворный текст

В стихотворном тексте строфы должны располагаться по центру страницы, а

строки выравниваться влево. Чтобы добиться этого эффекта при любом размере

окна броузера, удобно использовать элементы CENTER и TABLE, как показано ниже:



ОРАНЖЕВЫЙ ЛИСТ

<Р>

<ТАВ1Е border=0>



Прозрачные осени дали<ВН>

Пронизаны солнцем насквозь.


Но нет, недостойно печали<ВР>

Все то, что еще не сбылось,







Ветер шумит над кленом<ВВ>

И кувыркается вниз<ВР>

На травы еще зеленые<ВН>

Яркий оранжевый лист.<ВН>






Я подниму его бережно,


Возьму из леса с собой.


Влажный, душистый и свежий -


Будет теперь со мной.<ВВ>






В белую стужу зимнюю,


С думами о своем<ВР>

Свяжутся нитью незримою<ВВ>

Я, этот лист и клен.<ВН>