|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
8. Розміщення елементів на веб-сторінці і навігація по сайту У ті недавні часи, коли технологія WWW тільки з'явилася на світло і стали створюватися перші веб-сторінки, одній з найбільших проблем при їх створенні була неможливість довільного розміщення елементів на сторінці. Іншими словами, весь вміст сторінки par вважався послідовно. Але веб-дізайнерам все частіше і частіше хотілося. розташувати матеріал так, щоб створити подібність композиції і полегшити сприйняття. Найпростіший і поширеніший приклад - розмістити посилання на розділи сайту в лівій частині, а самі розділи - в правій При цьому в нижній частині сторінки можна розмістити, наприклад, яку або статичну інформацію, яка не міняє своє местоположеши залежно від кількості матеріалу на сторінці. Але як це здійснити? Для цього в процесі розвитку WWW раз у раз з'являлися різних рішення (деякі з них по ходу справи вже розглядалися в цій книг вище). На сьогоднішній день можна сказати, що найбільш зручних рішень для довільного розташування елементів на сторінці існую три: • використання фреймів; • використання таблиць; • і позиціонування незалежних шарів. Давайте ж розглянемо ці технології по порядку, і почнемо з тією з них, яка ще не обговорювалася в цій книзі - з використання фреймів. 8.1. Використання структури фреймів Формування набору фреймів Отже, почнемо. Розділимо нашу сторінку на дві частини (два фрейми) - ліву і праву. Взагалі кажучи, кожен фрейм є окремим чтоби-документ. Таким чином, нам треба так визначити набір фреймів, наші в праву частину сторінки завантажувався -HTML-документ, (назвемо цей файл sergtext.html), а в лівий фрейм - файл, що містить “автопортрет” Сергія Сегєєва. Цей файл ми назвемо sergport.html. Спочатку напишемо його текст. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <ТITLEЕ>Домашняя страница Сергея Сергеева.</TITLE> <STYLE TYPE="text/css"> BODY { background-color: #BABAAO; color: rgb(29,29,24); } --> </STYLE> </HEAD> <BODY> <IMG SRC="Images/sergport.gif" WIDTH="257" HEIGHT="305" BORDER="0" ALT="ABTOПOPTPET"> <HR> АВТОПОРТРЕТ СЕРГЕЯ СЕРГЕЕВА </BODY> </HTML> Тут поки що немає нічого нового - це звичайна статична сторінка, що містить малюнок, горизонтальну межу і подрісуночную підпис. Тепер настав час визначити набір фреймів. Треба сказати, що НТМL-файли, що містять набір фреймів, істотно відрізняються від звичайних HTML-файлів. Зокрема, вони не повинні містити тег <BODY> . Їх основна частина визначається тегом <FRAMESET> . Все, що поміщене між ним і що його закриває тегом </FRAMESET>, є набором фреймів. Вміст кожного фрейма задається за допомогою тега <FRAME>. Його основним атрибутом є SRC=, значенням якого є ім'я відповідного .HTML-файла. Крім того, в першому рядку файлу, що містить набір фреймів, необхидімо указувати тип Frameset, наприклад, от так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> Давайте напишемо текст набору фреймів для нашого прикладу, а потім розглянемо його докладніше. Отже, якщо сторінка з портретом називаємо ч sergport.html, а сторінка з текстом - sergtext.html, то текст основного документа буде наступним. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <ТITLЕ>Домашняя страница Сергея CepreeBa</TITLE> </HEAD> <FRAMESET COLS="277,*" FRAMESPACING="0" FRAMEBORDER="0"> <FRAME NAME="portrait" SRC="sergport.html" SCROLLING="no" FRAMEBORDER="0" NORESIZE> <FRAME NAME="text" SRC="sergtext.html" SCROLLING="auto" FRAMEBORDER="0" NORESIZE> </FRAMESET> </HTML> Давайте внесемо деякі пояснення. Щоб фрейми розташовувалися, як стовпці таблиці (а не як ряди, Hanpимер, зверху і знизу), потрібно в теге <FRAMESET> вказати атрибут COLS= Його значенням повинне бути перерахування ширини кожного фрейма (через кому). Наприклад, якщо написати <FRAMESET COLS="25%,25%,50%">,то вікно броузера буде розділено на три фрейми: лівий шириною в чверть вікна броузера, середній такої ж ширини і правий шириною в половину вікна броузера. В даному випадку ширина кожного фрейма вказана в про- центах. Можна також указувати ширину фрейма в пікселах. У приведеному вище коді ми визначаємо ширину лівого фрейма в 277 пікселов щоб туди уміщався малюнок: <FRAMESET COLS="277,*"> У цьому записі зірочка означає, що для іншого фрейма відведено місце, що все залишилося, у вікні броузера. Скільки його буде - залежить тільки отi ширина вікна броузера на комп'ютері користувача. (Якщо у користувача дозвіл 1600х1200 і вікно броузера розгорнене на важ екран, то у нього ширина правого фрейма буде близько 1320 пікселов, а якщо він звузив вікно броузера до 300 пікселов, то на правий фрейм у нього залишиться менше 15 пікселов.) В більшості випадків лівий фрейм шириною 277 пікселов все ж таки займатиме менше половини вікна броузера, а значить, у користувача складеться правильне враження, що основна інформація поміщена в правому фреймі. Далі, щоб між фреймами на було видимої межі, слід встановити значення атрибутів FRAMESPACING= (відстань між фреймами) і FRAMEBORDER= (наявність рамки фреймів) рівними нулю. В принципі, якщо встановити значення атрибуту FRAMEBORDER= рівним 1 (до речі, для Netscape версії 3 було необхідно замість значень 0 і 1 для атрибуту RAMEBORDER= використовувати значення Yes або No), то можна проконтролювати товщину рамки за допомогою атрибуту BORDER=, а також її колір за допомогою атрибуту BORDERCOLOR=. Якщо треба розташувати фрейми, як рядки таблиці, то замість атрибуту COLS= слід використовувати атрибут ROWS=. У остальном все залишається точно так, як і раніше. В принципі, можливо використовувати в одному теге <FRAMESET> обидва атрибути: і COLS=, і ROWS=. Але повернемося до приведеного вище коду. Між тегамі <FRAMESET> і </FRAMESET> в нім знаходяться визначення вмісту кожного з фрей-мов. Кожен фрейм визначається за допомогою тега <FRAME>: <FRAME NAME="portrait" SRC="sergport.html" =SCROLLING"nо" ' FRAMEBORDER="0" NORESIZE> <FRAME NAME="text" SRC="sergtext.html" SCROLLING="auto" FRAMEBORDER="0" NORESIZE> Атрибут NAME= в даному прикладі не несе ніякого навантаження - це простий, назва фрейма. Проте його присутність нам буде потрібно у разі організації міжфреймової навігації (наприклад, якщо при натисненні на гіперпосилання, що знаходиться в одному з фреймів, слід завантажити соответствующи документ в інший фрейм - про це мова піде в наступному розділі У будь-якому випадку установка атрибуту NAME= є хорошою звичкою Атрибут SRC=, як вже мовилося вище, є найголовнішим атрибутом оскільки його значення указує, який, власне кажучи, файл слідує в цей фрейм завантажити. Атрибут SCROLLING= управляє наявністю смуги прокрутки в кожному фреймі. Якщо його значенням є auto, то броузер сам визначає, чи відображати смугу прокрутки. Як правило, це найзручніше значення - якщо весь вміст фрейма поміщається і видиму область, то смуга прокрутки не відображається, а якщо частина вмісту не видно, то смуга прокрутки відображається. І, нарешті, атрибут NORESIZE означає, що користувач не може змінювати ширину (або висоту) даного фрейма. Якщо цей атрибут не встановлений, то за бажання можна пересувати межу між фреймами допомогою миші. Як бачите, все досить просто. Потрібно тільки не забувати визнач потрібну кількість тегов <FRAME>. Втім, якщо їх буде менше, не вказано в теге <FRAMESET>, то на місці “відсутнього” фрейма відобразиться просто білий прямокутник. Вкладені набори фреймів - Добре, - скажете ви, а як бути, якщо ми захочемо, наприклад, oто- бразіть заголовок сторінки у всю ширину вікна броузера, а вже під ним розташувати лівий і правий фрейми? - Це вельми просто. Створимо окремий НТМL-файл заголовка. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <ТITLЕ>Домашняя страница Сергея Сергеева. </TITLE> <STYLE TYPE="text/css"> <!-- BODY { background-color: #BABAAO; color: rgb(29,29,24); . } HI { text-align: center; } --> </STYLE> </HEAD> <BODY> <Н1>Домашняя страница Сергея Сергеева</Н1> </BODY> </HTML> Назвемо цей файл, наприклад, serghdr. html. Далі видалимо заголовок з файлу sergtext.html. І тепер давайте трохи подумаємо. Щоб розташувати наш заголовок у верхньому фреймі, доведеться спочатку визначити набір горизонтальних фреймів за допомогою атрибуту ROWS= в теге <FRAMESET>: < FRAMESET ROWS="80,*" FRAMESPACING="0" FRAMEBORDER="0">Тут ми визначили висоту верхнього фрейма в 80 пікселов - цілком достатньо для заголовка. Тепер визначимо вміст верхнього фрейма (завантажимо туди наш тільки що створений файл serghdr.html): <FRAME SRC="serghdr.html" NAME="header" FRAMEBORDER="0" SCROLLING="no"> Тепер потрібно визначити вміст нижнього фрейма. А що там повинне знаходитися? А там повинен знаходитися той самий набір фреймів, який був визначений в минулому прикладі! На щастя, нам ніщо не заважає як вміст один з фреймів указувати тег <FRAMESET> - адже кожен фрейм має ті ж “має” рацію, що і окреме вікно броузера! Ось що у нас вийде в цілому. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <ТITLE>Домашняя страница Сергея CepreeBa</TITLE> </HEAD> <FRAMESET ROWS="80,*" FRAMES РАСING="0" FRAMEBORDER="0"> <FRAME SRC="serghdr.html" NAME="header" SCROLLING="no"> <FRAMESET COLS="277,*" FRAMESPACING="0" FRAMEBORDER="0"> <FRAME NAME="portrait" SRC="sergport.html" SCROLLING="no" NORESIZE> <FRAME NAME="text" SRC="sergtext2.html" SCROLLING="auto" NORESIZE> </FRAMESET> </FRAMESET> </HTML> Навігація між фреймами А зараз давайте розглянемо трохи складніший приклад. Спробуємо нарешті, організувати повну навігацію по сайту гіпотетичної фірми “Ледар”, окремі частини якого ми створили в попередніх розділах. Тут в правій частині є гиперссилкп на різні розділи сайту, але при створенні прикладу ці гиперссилю i не діяли. Адже принаймні три з них можуть діяти, оскільки три розділи: “Послуги”, “Ціни” і “Книга відгуків” вже створені!Для реалізації повної навігації ми в цьому розділі використовуватимемо фрейми, хоча це не єдине рішення. (Витонченіше рішення на основі позиціонування буде запропоновано в кінці цього розділу.) Перш за все, нам доведеться виділити в окремі файли заголовок і блок гіперпосилань. Крім того, щоб користуватися однаковими стилями г декількох HTML-файлах відразу, ми не дублюватимемо таблицю стилів в кожному з файлів, а теж виділимо її в окремий файл. Назвемо і, його lent.css. Давайте спочатку поглянемо на його вміст: BODY { background-color: #D2FFFF; color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y; } A:link,A:active,A:visited { color: #006A6A; } A:hover { font-weight: bold; text-decoration: none; } .hdr { position: absolute; left: 50px; top: 10px; text-align: center; font-family: OdessaScriptFWF, fantasy; font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadow; border: 10px outset #003163; color: #3163CE; } .rght { font-size: large; } .Ink { border-width: thick; border-style: ridged; margin: 10px; padding: 5px; border-color: #319CFF; background-image: url("Images\backlnkl.jpg"); color: red; text-align: center; } .Ink A:link, .Ink A:visited { text-decoration: none; color: white; } .Ink A:active ( text-decoration: none; color: red; } .1ft { font-size: meduim; } .bigger { font-size: larger; font-family: sans-serif; } .logo { position: absolute; left: 70; top: 120; z-index: -5; } Як бачите, ця таблиця стилів дуже схожа на ту, проте в неї довелося внести деякі зміни. Оскільки всі розділи тепер розташовуватимуться в окремих фреймах, відпадає необхідність в позиціонуванні, тому для класів Ift і rght властивості position, left, top, width і height ми взагалі не опре ділили. Крім того, змінена позиція (властивості left і top) логотипу, тобто класу logo. Для виділення червоним кольором посилання на поточний раз справ (тобто той, який в даний момент переглядає користувач) довелося додати псевдоклас .Ink Aactive. Тепер давайте напишемо головний документ, що визначає набір фреймів. Після вивчення попереднього розділу це не складе ніяких труднощів - він буде в точності таким же, як в попередньому прикладі, тільки імена файлів і назви фреймів зміняться. Крім того, для верхнього фрейма доведеться виділити трохи більше місце (150 пікселов), а для правого ніж- його фрейма (блоку посилань) визначити фіксовану ширину 200 пікселов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <ТIТLЕ>Фирма "Лентяй"</ТIТLЕ> </HEAD> <FRAMESET ROWS="150," FRAMES РАСING="0" FRAMEBORDER="0"> <FRAME SRC="lenthdr.html" NAME="header" FRAMEBORDER="0" SCROLLING="no"> <FRAMESET COLS="*,200" FRAMESPACING="0" FRAMEBORDER="0"> <FRAME NAME="main" SRC=°"main.html" FRAMEBORDER="0" NORESIZE> <FRAME NAME="link" SRC="lentlink.html" FRAMEBORDER="0" NORESIZE> </FRAMESET> </FRAMESET> </HTML> Теперь создадим файл заголовка lenthdr.html. Собственно говоря, он будет очень коротким, поскольку в нем не должно быть ничего, кроме заголовка, написанного классом hdr, уже определенным в файле lent.css. Надо только не забыть подключить файл таблицы стилей с помощью тега <LINK>: <LINK REL="stylesheet" HREF="lent.css"> Взглянем на текст этого файла целиком. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Фиpмa "ЛEHTЯЙ"</TITLE> <LINK REL="stylesheet" HREF="lent.css"> </HEAD> <BODY> <DIV CLASS="hdr">Фиpмa «ЛEHTЯЙ»</DIV> </BODY> </HTML> Отже, подивимося цілком на текст файлу lentlink.html. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>Фирма "ЛEHTЯЙ"</title> <LINK REL="stylesheet" HREF="lent.css"> </HEAD> <BODY> <DIV CLASS="rght"> <DIV CLASS="lnk"> <A HREF="main.html" target="niain">ycnyги</A></DIV> <DIV CLASS="lnk"> <A HREF="prices .html" target="main">цены</A></DI <DIV CLASS="lnk"> <A HREF="forml.html" tаrgеt="main">ФОРМА 3AKA3A</A></DIV> <DIV CLASS="lnk"> <A HREF="history.html" target="main">История <SPAN STYLE="letter-spacing: -3px; ">KOMПAHИЯ</SPAN></A></DIV> <DIV CLASS="lnk"><A HREF="guestbook.html" target="main">KHИГA OT3ЫBOB</A></DIV> </DIV> </BODY> </HTML> Собственно говоря, на этом этапе можно уже открыть основной файл и броузере. Правда, чтобы гиперссылки работали, давайте напишем еще файлы prices.html и guestbook.html. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Фиpмa "ЛEHTЯЙ"</TITLE> <LINK REL="stylesheet" HREF="lent.css"> <STYLE> BODY { background-image: none } </STYLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> var foodlist = new Array(25, 60, 10, 14, 100, 24, 7, 144); var foodingr = new Array<50, 26, 5, 28, 32, 11, 3, 96); function calclamp() { document.forms[0].lamptotal.value= parseint(document.forms[0].lamp.value)*7; calcall(); } function calcchist() { document.forms[0].chisttotal.value= parseint(document.forms[0].chist.selectedlndex)*35; calcall() ; } function calcfood() { document.forms[0].foodtotal.value=0; for (var i=0; i<8; i++) ( if (document.forms[0].food[i].selected) { document.forms[0].foodtotal.value= parseint(document.forms[0].foodtotal.value)+parselnt(foodlist[i]); if (document.forms[0].ingred.checked) document.forms[0].foodtotal.value= parseint(document.forms[0].foodtotal.value)+parselnt(foodingr[i]); } } calcall(); } f unction calccomp() { document.forms[0].comptotal.value= parseint(document.forms[0].comp.selectedlndex)*101; calcall() ; function calcall() { document.forms[0].total.value= parseint(document.forms[0].lamptotal.value)+ parseint(document.forms[0].chisttotal.value)+ parseint(document.forms[0].foodtotal.value)+ parseint(document.forms[0].comptotal.value) ; //--> </SCRIPT> </HEAD> <BODY> <DIV CLASS="lft"> <DIV CLASS="bigger"> Здecь вы можете не только увидеть наши цены, но и рассчитать стоимость будущего заказа !</DIV> <BR> <FORM> <TABLE WIDTH="99%" CELLSPACING="0"> <TR> <TH WIDTH="70%">Услуги</TH> <TH WIDTH="15%" ALIGN="left">ЦЕHA</TH> <TH WIDTH="15%">CTOИMOCTb</TH> </TR> <TR> <TD> Количество вкручиваемых лампочек: <INPUT TYPE="text" NAME="lamp" VALUE="0" SIZE="2" MAXLENGTH="2" onChange="calclamp () "></TD> <TD ALIGN="center"> <INPUT TYPE="text" NAME="lampprice" VALUE="7" SIZE="3" READONLY> p.</TD> <TD ALIGN="right"> <INPUT TYPE="text" NAME="lamptotal" VALUE="0" SIZE="3" READONLY> p.</TD> </TR> <TR> <TD> Количество услуг по наведению чистоты: <SELECT NAME="chist" onChange="calcchist()"> <OPTION VALUE="0">0 <OPTION VALUE="1">1 <OPTION VALUE="2">2 <OPTION VALUE="3">3 </SELECT> </TD> <TD ALIGN="center"> <INPUT TYPE="text" NAME="chistprice" VALUE="35" SIZE="3" READONLY> p.</TD> <TD ALIGN="right"> <INPUT TYPE="text" NAME="chisttotal" VALUE="0" SIZE="3" READONLY> p.</TD> </TR> <ТR><ТD>Приготовление пищи:<ВR> <SELECT NAME="food" SIZE="4" MULTIPLE onChange="calcfood() "> <OPTION VALUE="25">Cyп <OPTION VALUE="60">Kypинные котлеты <OPTION VALUE="10">Maкapoны <OPTION VALUE="14">Koмпoт <OPTION VALUE="100">ПЛOB <OPTION VALUE="24">КАША <OPTION VALUE ="7">Кофе <OPTION VALUE="144">Caлaт </SELECT><BR> <INPUT TYPE="checkbox" NAME="ingred" VALUE="ours" onClick="calcfood()">Привезти ингредиенты с собой </TD> <TD ALIGN="center"> <INPUT TYPE="text" NAME="foodprice" VALUE="OT 10" SIZE="4" READONLY> p.</TD> <TD ALIGN="right"> <INPUT TYPE="text" NAME="foodtotal" VALUE="0" SIZE="3" READONLY> p.</TD> </TR> <TR><TD STYLE="padding-bottom: 15px;"> Количество компьютерных услуг: <SELECT NAME="comp" onChange="calccomp () "> <OPTION VALUE="0">0 <OPTION VALUE="1">1 <OPTION VALUE="2">2 </SELECT></TD> <TD ALIGN="center" STYLE="padding-bottom: 15px;"> < INPUT TYPE="text" NAME="compprice" VALUE="101" SIZE="3" READONLY> p.</TD> <TD STYLE="padding-bottom: 15px;" ALIGN="right"> <lNPUT TYPE="text" NAME="comptotal" VALUE="0" SIZE="3" READONLY> p.</TD> </TR> <TR> <TD COLSPAN”"2" ALIGN="right" STYLE="padding-top: 15px; border-top: double black; "><В>ИТОГО:</В></ТD> <TD ALIGN="right" STYLE="padding-top: 15px; border-top: double black; "> <INPUT TYPE="text" NAME="total" VALUE="0" SI'ZE="3" READONLY> p.</TD> </TR> </TABLE> </FORM> </DIV> <IMG CLASS="logo" SRC="Images/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0"> </BODY> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Baш отзыв</ТITLЕ> <LINK REL="stylesheet" HREF="lent.css"> <STYLE> BODY { background-image: none } </STYLE> </HEAD> <BODY> <DIV CLASS="lft"> <Н1>Ваш отзыв о наших услугах</Н1> <DIV ALIGN="center"> <FORM ACTION="http://cgi.lentyay.corn/guest.cgi" METHOD="post"> <LABEL FOR="Name">Baшe имя:</LABEL> <INPUT TYPE="text" NAME="Name" VALUE="AHOHИM" SIZE="30"><BR> <LABEL FOR="Opinion">Bame мнение:</LABEL> <TEXTAREA COLS="30" ROWS="4" NAME="Opinion " STYLE="vertical-align: middle;"></TEXTAREA> <BR><BR> <INPUT TYPE="submit" VALUE="Отправить"> <INPUT TYPE="reset" VALUE="Очистить форму"> </FORM> </DIV>
Проте останнім часом використання фреймів стає все менш популярним рішенням. У наступних розділах ми розглянемо, як можна довільно розташувати елементи на сторінці і організувати навігацію по сайту без використання фреймів.
https://stol-kirov.ru/ | Потомки Рагнара Лодброка: наследие великого викинга продолжается. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
|