HTML ôðåéìû
Èñïîëüëüçóÿ ôðýéìû, ïîçâîëÿþùèå ðàçáèâàòü Web-ñòðàíèöû íà ìíîæåñòâåííûå ñêðîëëèðóåìûå ïîäîêíà, âû ìîæåòå çíà÷èòåëüíî óëó÷øèòü âíåøíèé âèä è ôóíêöèîíàëüíîñòü èíôîðìàöèîííûõ ñèñòåì è Web-ïðèëîæåíèé. Êàæäîå ïîäîêíî, èëè ôðýéì, ìîæåò èìåòü ñëåäóþùèå ñâîéñòâà:
Êàæäûé ôðýéì èìååò ñâîé URL, ÷òî ïîçâîëÿåò çàãðóæàòü åãî íåçàâèñèìî îò äðóãèõ ôðýéìîâ
Êàæäûé ôðýéì èìååò ñîáñòâåíîå èìÿ (ïàðàìåòð NAME), ïîçâîëÿþùåå ïåðåõîäèòü ê íåìó èç äðóãîãî ôðýéìà
Ðàçìåð ôðýéìà ìîæåò áûòü èçìåíåí ïîëüçîâàòåëåì ïðÿìî íà ýêðàíå ïðè ïîìîùè ìûøè (åñëè ýòî íå çàïðåøåíî óêàçàíèåì ñïåöèàëüíîãî ïàðàìåòðà)
Äàííûå ñâîéñòâà ôðýéìîâ ïîçâîëÿþò ñîçäàâàòü ïðîäâèíóòûå èíòåðôåéñíûå ðåøåíèÿ, òàêèå êàê:
Ðàçìåùåíèå ñòàòè÷åñêîé èíôîðìàöèè, êîòîðóþ àâòîð ñ÷èòàåò íåîáõîäèìûì ïîñòîÿííî ïîêàçûâàòü ïîëüçîâàòåëþ, â îäíîì ñòàòè÷åñêîì ôðýéìå. Ýòî ìîæåò áûòü ãðàôè÷åñêèé ëîãîòèï ôèðìû, copyright, íàáîð óïðàâëÿþùèõ êíîïîê
Ïîìåùåíèå â ñòàòè÷åñêîì ôðýéìå îãëàâëåíèÿ âñåõ èëè ÷àñòè WEB-äîêóìåíòîâ, ñîäåðæàùèõñÿ íà WEB-ñåðâåðå, ÷òî ïîçâîëÿåò ïîëüçîâàòåëþ áûñòðî íàõîäèòü èíòåðåñóþùóþ åãî èíôîðìàöèþ
Ñîçäàâàòü îêíà ðåçóëüòàòîâ çàïðîñîâ, êîãäà â îäíîì ôðýéìå íàõîäèòñÿ ñîáñòâåííî çàïðîñ, à â äðóãîì ðåçóëüòàòû çàïðîñà
Ñîçäàâàòü ôîðìû òèïà "ìàñòåð-äåòàëü" äëÿ WEB-ïðèëîæåíèé, îáñëóæèâàþùèõ áàçû äàííûõ
--------------------------------------------------------------------------------
Ñèíòàêñèñ ôðýéìîâ
Ôîðìàò äîêóìåíòà, èñïîëüçóþùåãî ôðýéìû, âíåøíå î÷åíü íàïîìèíàåò ôîðìàò îáû÷íîãî äîêóìåíòà, òîëüêî âìåñòî òýãà BODY èñïîëüçóåòñÿ êîíòåéíåð FRAMESET, ñîäåðæàùèé îïèñàíèå âíóòðåííèõ HTML-äîêóìåíòîâ, ñîäåðæàùèé ñîáñòâåííî èíôîðìàöèþ, ðàçìåùàåìóþ âî ôðýéìàõ.
...
...
Îäíàêî, ôðýéì-äîêóìåíò ÿâëÿåòñÿ ñïåöèôè÷íûì âèäîì HTML-äîêóìåíòà, ïîñêîëüêó íå ñîäåðæèò ýëåìåíòà BODY è êàêîé-ëèáî èíôîðìàöèîííîé íàãðóçêè ñîîòâåòñòâåííî. Îí îïèñûâàåò òîëüêî ôðýéìû, êîòîðûå áóäóò ñîäåðæàòü èíôîðìàöèþ (êðîìå ñëó÷àÿ äâîéíîãî äîêóìåíòà, êîòîðûé ìû ðàññìîòðèì ïîçæå).
+Ïðåäñòàâèì îáùèé ñèíòàêñèñ ôðýéìîâ:
...
Îáùèé êîíòýéíåð FRAMESET îïèñûâàåò âñå ôðýéìû, íà êîòîðûå äåëèòñÿ ýêðàí. Âû ìîæåòå ðàçäåëèòü ýêðàí íà íåñêîëüêî âåðòèêàëüíûõ èëè íåñêîëüêî ãîðèçîíòàëüíûõ ôðýéìîâ. Òýã FRAME îïèñûâàåò êàæäûé ôðýéì â îòäåëüíîñòè. Ðàññìîòðèì áîëåå äåòàëüíî êàæäûé êîìïîíåíò.
--------------------------------------------------------------------------------
FRAMESET
Òýã èìååò çàâåðøàþùèé òýã . Âñå, ÷òî ìîæåò íàõîäèòüñÿ ìåæäó ýòèìè äâóìÿ òýãàìè, ýòî òýã , âëîæåííûå òýãè è , à òàêæå êîíòåéíåð èç òýãîâ
è , êîòîðûé ïîçâîëÿåò ñòðîèòü äâîéíûå äîêóìåíòû äëÿ áðîóçåðîâ, ïîääåðæèâàþùèõ ôðýéìû è íå ïîääåðæèâàþùèõ ôðýéìû.
Äàííûé òýã èìååò äâà âçàèìîèñêëþ÷àþùèõ ïàðàìåòðà: ROWS è COLS.
ROWS="ñïèñîê-îïðåäåëåíèé-ãîðèçîíòàëüíûõ-ïîäîêîí"
Äàííûé òýã ñîäåðæèò îïèñàíèÿ íåêîòîðîãî êîëè÷åñòâà ïîäîêîí, ðàçäåëåííûå çàïÿòûìè. Êàæäîå îïèñàíèå ïðåäñòàâëÿåò ñîáîé ÷èñëîâîå çíà÷åíèå ðàçìåðà ïîäîêíà â ïèêñåëàõ, ïðîöåíòàõ îò âñåãî ðàçìåðà îêíà èëè ñâÿçàííîå ìàñøòàáíîå çíà÷åíèå. Êîëè÷åñòâî ïîäîêîí îïðåäåëÿåòñÿ êîëè÷åñòâîì çíà÷åíèé â ñïèñêå. Îáùàÿ ñóììà âûñîò ïîäîêîí äîëæíà ñîñòàâëÿòü âûñîòó âñåãî îêíà (â ëþáûõ èçìåðÿåìûõ âåëè÷èíàõ). Îòñóòñòâèå àòðèáóòà ROWS îïðåäåëÿåò îäèí ôðýéì, âåëè÷èíîé âî âñå îêíî áðîóçåðà.
Ñèíòàêñèñ èñïîëüçóåìûõ âèäîâ îïèñàíèÿ âåëè÷èí ïîäîêîí:
value
Ïðîñòîå ÷èñëîâîå çíà÷åíèå îïðåäåëÿåò ôèêñèðîâàííóþ âûñîòó ïîäîêíà â ïèêñåëàõ. Ýòî äàëåêî íå ñàìûé ëó÷øèé ñïîñîá îïèñàíèÿ âûñîòû ïîäîêíà, ïîñêîëüêó ðàçëè÷íûå áðîóçåðû èìåþò ðàçëè÷íûé ðàçìåð ðàáî÷åãî ïîëÿ, íå ãîâîðÿ óæå î ðàçëè÷íûõ ýêðàííûõ ðàçðåøåíèÿõ ó ïîëüçîâàòåëÿ. Åñëè âû, âñå æå, èñïîëüçóåòå äàííûé ñïîñîá îïèñàíèÿ ðàçìåðà, òî íàñòîÿòåëüíî ðåêîìåíäóåòñÿ ñî÷åòàòü åãî ñ êàêèì-ëèáî äðóãèì, ÷òîáû â ðåçóëüòàòå âû òî÷íî ïîëó÷èëè 100%-íîå çàïîëíåíèå îêíà áðîóçåðà âàøåãî ïîëüçîâàòåëÿ.
value%
Çíà÷åíèå âåëè÷èíû ïîäîêíà â ïðîöåíòàõ îò 1 äî 100. Åñëè îáùàÿ ñóììà ïðîöåíòîâ îïèñûâàåìûõ ïîäîêîí ïðåâûøàåò 100, òî ðàçìåðû âñåõ ôðýéìîâ ïðîïîðöèîíàëüíî óìåíüøàþòñÿ äî ñóììû 100%. Åñëè, ñîîòâåòñòâåííî, ñóììà ìåíüøå 100, òî ðàçìåðû ïðîïîðöèîíàëüíî ó÷åëè÷èâàþòñÿ.
value*
Âîîáùå ãîâîðÿ, çíà÷åíèå value â äàííîì îïèñàíèè ÿâëÿåòñÿ íåîáÿçàòåëüíûì. Ñèìâîë "*" óêàçûâàåò íà òî, ÷òî âñå îñòàâøååñÿ ìåñòî áóäåò ïðèíàäëåæàòü äàííîìó ôðýéìó. Åñëè óêàçûâàåòñÿ äâà èëè áîëåå ôðýéìà ñ îïèñàíèåì "*" (íàïðèìåð "*,*"), òî îñòàâøååñÿ ïðîñòðàíñòâî äåëèòñÿ ïîðîâíó ìåæäó ýòèìè ôðýéìàìè. Åñëè ïåðåä çâåçäî÷êîé ñòîèò öèôðà, òî îíà óêàçûâàåò ïðîïîðöèþ äëÿ äàííîãî ôðýéìà (âî ñêîëüêî ðàç îä áóäåò áîëüøå àíàëîãè÷íî îïèñàííîãî ÷èñòîé çâåçäî÷êîé). Íàïðèìåð, îïèñàíèå "3*,*,*", ãîâîðèò, ÷òî áóäåò ñîçäàíî òðè ôðýéìà ñ ðàçìåðàìè 3/5 ñâîáîäíîãî ïðîñòðàíñòâà äëÿ ïåðâîãî ôðýéìà è ïî 1/5 äëÿ äâóõ äðóãèõ.
COLS="ñïèñîê-îïðåäåëåíèé-ãîðèçîíòàëüíûõ-ïîäîêîí"
Òî æå ñàìîå, ÷òî è ROWS, íî äåëèò îêíî ïî âåðòèêàëè, à íå ïî ãîðèçîíòàëè.
--------------------------------------------------------------------------------
Âíèìàíèå! Ñîâìåñòíîå èñïîëüçîâàíèå äàííûõ ïàðàìåòðîâ ìîæåò ïðèâåñòè ê íåïðåäñòâàçóåìûì ðåçóëüòàòàì. Íàïðèìåð, ñòðîêà: ìîæåò ïðèâåñòè ê îøèáî÷íîé ñèòóàöèè.
--------------------------------------------------------------------------------
Ïðèìåðû:
- îïèñûâàåò òðè ôðýéìà, äâà ïî 50 òî÷åê ñïðàâà è ñëåâà, è îäèí âíóòðè ýòèõ ïîëîñîê.
- îïèñûâàåò òðè ôðýéìà, ïåðâûé èç êîòîðûõ çàíèìàåò 20% ïëîùàäè ñâåðõó ýêðàíà, âòîðîé 3/4 îñòàâøåãîñÿ îò ïåðâîãî ôðýéìà ìåñòà (ò.å. 60% âñåé ïëîùàäè îêíà), à ïîñëåäíèé 1/4 (ò.å. 20% âñåé ïëîùàäè îêíà.
- àíàëîãè÷íî ïðåäûäóùåìó ïðèìåðó.
Òýãè ìîãóò áûòü âëîæåííûìè, ò.å. íàïðèìåð:
FRAMESET>
Ðåçóëüòàò äàííîãî ïðèìåðà ìû ðàññìîòðèì ïîçæå.
--------------------------------------------------------------------------------
FRAME
Äàííûé òýã îïðåäåëÿåò ôðýéì âíóòðè êîíòåéíåðà FRAMESET.
SRC="url"
Îïèñûâàåò URL äîêóìåíòà, êîòîðûé áóäåò îòîáðàæåí âíóòðè ëàííîãî ôðýéìà. Åñëè îí îòñóòñòâóåò, òî áóäåò îòîáðàæåí ïóñòîé ôðýéì.
NAME="frame_name"
Äàííûé ïàðàìåòð îïèñûâàåò èìÿ ôðýéìà. Èìÿ ôðýéìà ìîæåò áûòü èñïîëüçîâàíî äëÿ îïðåäåëåíèÿ äåéñòâèÿ ñ äàííûì ôðýéìîì èç äðóãîãî HTML-äîêóìåíòà èëè ôðýéìà (êàê ïðàâèëî, èç ñîñåäíåãî ôðýéìà ýòîãî æå äîêóìåíòà). Èìÿ îáÿçàòåëüíî äîëæíî íà÷èíàòüñÿ ñ ñèìâîëà. Ñîäåðæèìîå ïîèìåíîâàííûõ ôðýéìîâ ìîæåò áûòü çàäåéñòâîâàíî èç äðóãèõ äîêóìåíòîâ ïðè ïîìîùè ñïåöèàëüíîãî àòðèáóòà TARGET, îïèñûâàåìîãî íèæå.
MARGINWIDTH="value"
Ýòî àòðèáóò ìîæåò áûòü èñïîëüçîâàí, åñëè àâòîð äîêóìåíòà õî÷åò óêàçàòü âåëè÷èíó ðàçäåëèòåëüíûõ ïîëîñ ìåæäó ôðýéìàìè ñáîêó. Çíà÷åíèå value óêàçûâàåòñÿ â ïèêñåëàõ è íå ìîæåò áûòü ìåíüøå åäèíèöû. Ïî óìîë÷àíèþ äàííîå çíà÷åíèå çàâèñèò îò ðåàëèçàöèè ïîääåðæêè ôðýéìîâ èñïîëüçóåìûì êëèåíòîì áðîóçåðîì.
MARGINHEIGHT="value"
Òî æå ñàìîå, ÷òî è MARGINWIDTH, íî äëÿ âåðõíèõ è íèæíèõ âåëè÷èí ðàçäåëèòåëüíûõ ïîëîñ.
SCROLLING="yes | no | auto"
Ýòîò àòðèáóò ïîçâîëÿåò çàäàâàòü íàëè÷èå ïîëîñ ïðîêðóòêè ó ôðýéìà. Ïàðàìåòð yes óêàçûâàåò, ÷òî ïîëîñû ïðîêðóòêè áóäóò â ëþáîì ñëó÷àå ïðèñóòñòâîâàòü ó ôðýéìà, ïàðàìåòð no íàîáîðîò, ÷òî ïîëîñ ïðîêðóòêè íå áóäåò. Auto îïðåäåëÿåò íàëè÷èå ïîëîñ ïðîêðóòêè òîëüêî ïðè èõ íåîáõîäèìîñòè (çíà÷åíèå ïî óìîë÷àíèþ).
NORESIZE
Äàííûé àòðèáóò ïîçâîëÿåò ñîçäàâàòü ôðýéìû áåç âîçìîæíîñòè èçìåíåíèÿ ðàçìåðîâ. Ïî óìîë÷àíèþ, ðàçìåð ôðýéìà ìîæíî èçìåíèòü ïðè ïîìîùè ìûøè òàê æå ïðîñòî, êàê è ðàçìåð îêíà Windows. NORESIZE îòìåíÿåò äàííóþ âîçìîæíîñòü. Åñëè ó îäíîãî ôðýéìà óñòàíîâëåí àòðèáóò NORESIZE, òî ó ñîñåäíèõ ôðýéìîâ òîæå íå ìîæåò áûòü èçìåíåí ðàçìåð ñî ñòîðîíû äàííîãî.
--------------------------------------------------------------------------------
NOFRAMES
Äàííûé òýã èñïîëüçóåòñÿ â ñëó÷àå, åñëè âû ñîçäàåòå äîêóìåíò, êîòîðûé ìîæåò ïðîñìàòðèâàòüñÿ êàê áðîóçåðàìè, ïîääåðæèâàþùèìè ôðýéìû, òàê è áðîóçåðàìè, èõ íå ïîääåðæèâàþùèìè. Äàííûé òýã ïîìåùÿåòñÿ âíóòðè êîíòåéíåðà FRAMESET, à âñå, ÷òî íàõîäèòñÿ âíóòðè òýãîâ
è èãíîðèðóåòñÿ áðîóçåðàìè, ïîääåðæèâàþùèìè ôðýéìû.
--------------------------------------------------------------------------------
Ïðèìåðû
Ðàññìîòðèì ðåàëèçàöèþ ôðýéìîâ äëÿ ïîäîáíîãî ðàçáèåíèÿ îêíà:
+---------------------------+
| | |
| | |
| Link1 | Link2 |
| | |
| | |
+---------------------------+
| | | |
| | | |
| Link3 | Link4 | Link5 |
| | | |
| | | |
+---------------------------+
Âàøà âåðñèÿ WEB-áðîóçåðà íå ïîääåðæèâàåò ôðýéìû!
--------------------------------------------------------------------------------
Ïëàíèðîâàíèå ôðýéìîâ è âçàèìîäåéñòâèÿ ìåæäó ôðýéìàìè
Ñ ïîÿâëåíèåì ôðýéìîâ ñðàçó âîçíèêàåò âîïðîñ: "À êàê ñäåëàòü òàê, ÷òîáû íàæèìàÿ íà ññûëêó â îäíîì ôðýéìå èíèöèèðîâàòü ïîÿâëåíèå èíôîðìàöèè â äðóãîì?"
Îòâåòîì íà äàííûé âîïðîñ ÿâëÿåòñÿ ïëàíèðîâàíèå âçàèìîäåéñòâèÿ ôðýéìîâ (äàëåå - ïëàíèðîâàíèå). Êàæäûé ôðýéì ìîæåò èìåòü ñîáñòâåííîå èìÿ, îïðåäåëÿåìîå ïàðàìåòðîì NAME ïðè îïèñàíèè äàííîãî ôðýéìà. Ñóùåñòâóåò, òàêæå, ñïåöèàëüíûé àòðèáóò - TARGET, ïîçâîëÿþùèé îïðåäåëÿòü, ê êàêîìó ôðýéìó îòíîñèòñÿ òà èëè èíàÿ îïåðàöèÿ. Ôîðìàò äàííîãî àòðèáóòà ñëåäóþùèé:
TARGET="windows_name"
Äàííûé àòðèáóò ìîæåò âñòðå÷àòüñÿ âíóòðè ðàçëè÷íûõ òýãîâ:
TARGET â òýãå A
Ýòî ñàìîå ïðÿìîå èñïîëüçîâàíèå TARGET. Îáû÷íî, ïðè àêòèâèçàöèè ïîëüçîâàòåëåì ññûëêè ñîîòâåòñòâóþùèé äîêóìåíò ïîÿâëÿåòñÿ â òîì æå îêíå (èëè ôðýéìå), ÷òî è èñõîäíûé, â êîòîðîì áûëà ññûëêà. Äîáàâëåíèå àòðèáóòà TARGET ïîçâîëÿåò ïðîèçâåñòè âûâîä äîêóìåíòà â äðóãîé ôðýéì. Íàïðèìåð:
Ïåðåõîä â ôðýéì ¹ 1
TARGET â òýãå BASE
Ðàçìåùåíèå TARGET â òýãå BASE ïîçâîëèò âàì íå óêàçûâàòü ïðè îïèñàíèè êàæäîé ññûëêè ôðýéì-ïðèåìíèê äîêóìåíòîâ, âûçûâàåìûõ ïî ññûëêàì. Ýòî î÷åíü óäîáíî, åñëè â îäíîì ôðýéìå ó âàñ íàõîäèòñÿ ìåíþ, à â äðóãîé - âûâîäèòñÿ èíôîðìàöèÿ. Íàïðèìåð:
Äîêóìåíò ¹ 1.
Äîêóìåíò ¹ 2 (doc2.htm).
Ïåðâàÿ ÷àñòü |
Âòîðàÿ ÷àñòü
TARGET â òýãå AREA
Òàæå ìîæíî âêëþ÷àòü òýã TARGET â îïèñàíèå ññûëêè ïðè ñîçäàíèè êàðòû èçîáðàæåíèÿ. Íàïðèìåð:
TARGET â òýãå FORM
Òî æå îòíîñèòñÿ è ê îïðåäåëåíèþ ôîðìû.  äàííîì ñëó÷àå, ïîñëå îáðàáîòêè ïåðåäàííûõ ïàðàìåòðîâ ôîðìû ðåçóëüòèðóþùèé äîêóìåíò ïîÿâèòñÿ â óêàçàííîì ôðýéìå.