Siteua.info - створи собі сайт безкоштовно!

:: Меню ::

Головна

1. Як створюють веб-сторінки
1.1 Як створюють веб-сторінки
1.2. Як розмістити веб-сервер-сторіночку на сервері
1.3. Як написати веб-сторінку
1.4. Огляд програм для проглядання веб-сторінок
1.5. Огляд програм для створення веб-сторінок
1.6.(Частина-I) Створення веб-сторінок за допомогою програми Allaire Homesite/Cold Fusion
1.6.(Частина-II)Автоматизація введення

2. Основні засоби мови htmL
2.1. Просте форматування тексту
2.2. Найголовніше на будь-якій веб-сторінці - гіперпосилання
2.3. Як створити списки на веб-сторінці
2.4. Створення таблиць
3. Графіка на веб-сторінці
3.1.(Частина-I) Основні способи застосування графіки
3.1.(Частина-II)Зображення-карта
3.2. Графічні формати Інтернету
3.3. Графічні елементи оформлення веб-сторінок
3.4. Графічні маркери
3.5. Підготовка малюнків в програмі Xara Webstyle
3.6.(Частина-I)Підготовка малюнків в програмі Adobe Photoshop
3.6.(Частина-II)Прикраса зображення дрібними деталями
4. Оформлення веб-сторінки з використанням стилів
4.1. Оформлення за допомогою атрибуту STYLE
4.2. Визначення стилів в спеціальній таблиці
4.3. Огляд інших можливостей стильових таблиць
5. Використання звуку на веб-сторінці
5.1. Додавання звукового оформлення
5.2. Програми для стиснення звукових фрагментів
5.3. Маленькі хитрощі
6. Динамічні веб-сторінки на основі JavaScript
6.1. Прості приклади
6.2. Як писати власні функції
6.3. Динамічна зміна зовнішнього вигляду сторінки
6.4. Інші можливості мови JavaScript
7. Веб-сторінки, що реагують на дії користувача
7.1. Введення даних користувачем у форми htmL
7.2.(Частина-I)Сторінка, керована за допомогою миші
7.2.(Частина-II)Динамічне управління позиціонуванням елементів
7.3. Сторінка, керована з клавіатури
7.4.(Частина-I)Динамічне відображення тексту веб-сторінки
7.4.(Частина-II)Використання інших властивостей при роботі з текстом
7.5. Динамічна зміна графічних елементів веб-сторінки
8. Розміщення елементів на веб-сторінці і навігація по сайту
8.1. Використання структури фреймів
8.2. Управління розташуванням елементів веб-сторінки за допомогою таблиць
9. Додаткові можливості формування веб-сторінок
9.1. Приклад використання елементу управління Tabular Data
9.2. Приклад простого серверного сценарію
Цікаві сайти!
+

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Контакти
Додати у вибране

:: Друзі:

Biz-nes.info самовчитель по веденню бізнесу в інеті
Каталог
Цікаві статті інтернету

:: Статистика ::

каталог сайтів

 

 

 

 

 

8.2. Управління розташуванням елементів веб-сторінки за допомогою таблиць

У World Wide Web досить часто зустрічаються сторінки, на яких довільне розташування елементів досягається за допомогою таблиць. Зокрема, такий підхід часто застосовують, якщо необхідно залишити на сторінці відносно великі “порожнечі”.

Як можна цього досягти? Напевно, найбільш витонченим і ефективні? рішенням було б застосування абсолютного позиціонування елемен тов, проте багато хто звик вирішувати подібного роду завдання за допомогою звичайних таблиць. Оскільки межі між елементами таблиці можуть не відображатися, а осередки можуть бути як би порожніми, такий спосіб когось рої час (до появи CSS) представлявся кращим рішенням подоб них завдань. Давайте розглянемо, як це робиться.

Спочатку визначимо стилі майбутньої сторінки - колір фону і центрування тексту:

<STYLE> BODY { background-color: #FOE7F1;

} H2 { text-align: center;

} TD { font-family: MS Comic Sans, sans-serif;

text-align: center; } </STYLE>

Тепер можна задати параметри самої таблиці. При цьому відступ від внутраннего краю осередку (CELLPADDING=) і відстань між осередками (CELLSPACING=) краще задати рівними нулю, щоб ніщо не відволікало нас від завдання мінімальних розмірів осередків:

<TABLE WIDTH="99%" CELLSPACING="0" CELLPADDING="0">

Створення елементів таблиці

Тепер потрібно визначити самі осередки. Якщо подивитися на мал. 8.4, то може здатися, що їх менше, ніж насправді. В процесі опреде-ленія осередків буває зручно тимчасово встановити в теге <TABLE> атрибут BORDER=. В цьому випадку всі межі між осередками будуть видимі.

Кичок видно з малюнка, четвертий рядок цієї таблиці - єдина, де визначено всі п'ять стовпців, але це вже достатньо. Проте, для вірності краще помістити прозорий малюнок у всіх “порожніх” елементах таблиці. У третьому і п'ятому рядках таблиці об'єднані в стовпців. Ці рядки використовуються як вертикальний відступи між графічними гіперпосиланнями. Тут поміщений прозорий рису нок, “розтягнутий” у висоту:

<TR><TD COLSPAN="5">

<IMG SRC="Images/diafanol. gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>

Як бачите, висота цього рядка рівна 20 пікселам. Порожні осередки в осталь них рядках використовуються для завдання ширини стовпців, наприклад, так.

<TD><IMG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"

BORDER="0" ALT=""></TD>

Тут поміщений прозорий малюнок, “розтягнутий” по горизонталі. Решта “порожніх” осередків також заповнена прозорими малюнками. розміри яких проставлені, виходячи з того, що ширина кожного малюнка гіперпосилання рівна 120 пікселам, а ширина всіх відступів - 20 пікселе і

Давайте окинемо поглядом важ текст цієї сторінки.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.О Transitional//EN">

<HTML>

<HEAD>

<ТITLЕ>Электронная библиотека</ТIТLЕ>

<STYLE> BODY { background-color: #FOE7F1;

} H2 { text-align: center;

} TD { font-family: MS Comic Sans, sans-serif;

text-align: center; }

</STYLE>

</HEAD>

<BODY>

<TABLE WIDTH="99%" BORDER="0" CELLSPACING="0" CELLPADDING="0">

<TR><TD СOLSPAN="5">

<Н2>Электронная библиотека</Н1>

</ТD>

</ТR>

<TR>

<TD><IMG SRC="Images/hudlit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT="Xyдoжecтвeннaя">

<BR>Xyдoжecтвeннaя литература </TD>

<TD COLSPAN="4"><IMG SRC="Images/diafanol.gif" WIDTH="280" HEIGHT="3" BORDER="0" ALT=""></TD>

</TR>

<TR><TD COLSPAN="5">

<IMG SRC="Images/diafanol.gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>

<TR><TD>

<IMG SRC="Images/diafanol.gif" WIDTH="120" HEIGHT="3"

BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3" BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/naulit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT="Hayчнaя"><BR>Hayчнaя литература</ТD><ТD>

<IМG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/diafanol.gif" WIDTH="120" HEIGHT="3" BORDER="0" ALT=""></TD></TR>

<TR><TD COLSPAN="5">

<IMG SRC="Images/diafanol.gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>

<TR><TD COLSPAN="4">

<IMG SRC="Images/diafanol.gif" WIDTH="280" HEIGHT="3" BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/detlit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT=""><BR>Детская литература</ТD></ТR>

</TABLE>

</HTML>

В даному прикладі не поставлені самі гіперпосилання, тобто теги <А>, оскільки ні самої бібліотеки, ні її розділів поки що не існує. Додати їх не складе труднощів.

Якщо ви застосовуватимете таку технологію при створенні сторіночок, то перед написанням коду таблиці накидайте її схему (з межами) хоч би просто олівцем на папері. Після цього написати код стає дуже просто, оскільки в голові виникає ясна і наочна картина майбутньої таблиці.

Проте, на наш погляд, для вирішення подібних завдань зручніше використовувати абсолютне (і відносне) позиціонування елементів. При такому підході, до речі, легко організувати і внутрішньосторінкову навігацію. Про це піде мова в наступному розділі.


 


:: Наша кнопка ::

Отримати код:


:: Реклама ::

разработка сайтов в одессе в студии Утро даст вам множество преимуществ

+setl

:: Ссилки ::

+


:: Баннери ::

 

 

 


Copyright © Siteua.info, 2008