«Приемы верстки Web-страниц» В. Мержевич

Âëàä Ìåðæåâè÷. Ïðèåìû âåðñòêè âåá-ñòðàíèö

1www.htmlbook.ru

Âëàä Ìåðæåâè÷

Ïðèåìû âåðñòêèâåá-ñòðàíèö


2www.htmlbook.ru

Âñòóïëåíèå ................................................................................................... 3Áëàãîäàðíîñòè .............................................................................................. 3Ïîääåðæêà .................................................................................................... 31. ÎÑÎÁÅÍÍÎÑÒÈ ÂÅÐÑÒÊÈ ÂÅÁ-ÑÒÐÀÍÈÖ ............................................... 42. ÈÑÏÎËÜÇÎÂÀÍÈÅ ÔÎÍÎÂÎÃÎ ÐÈÑÓÍÊÀ .............................................. 63. ÑÎÇÄÀÍÈÅ ÐÀÌÎÊ ................................................................................... 94. ÂÛÐÀÂÍÈÂÀÍÈÅ ÏÎ ÖÅÍÒÐÓ .................................................................145. ÖÅÍÒÐÈÐÎÂÀÍÈÅ ÏÎ ÂÅÐÒÈÊÀËÈ .........................................................166. ÂÛÐÀÂÍÈÂÀÍÈÅ ÝËÅÌÅÍÒÎÂ ...............................................................167. ÂÅÐÒÈÊÀËÜÍÛÅ ËÈÍÈÈ ........................................................................198. ÃÎÐÈÇÎÍÒÀËÜÍÛÅ ËÈÍÈÈ ...................................................................219. ÑÎÇÄÀÍÈÅ ÊÎËÎÍÎÊ .............................................................................2410. ÊÎËÎÍÊÈ Ñ ÐÀÇÄÅËÈÒÅËÅÌ ...............................................................2411. ÏÎÄÐÈÑÓÍÎ×ÍÀß ÏÎÄÏÈÑÜ ...............................................................2512. ÑÎÇÄÀÍÈÅ ÁÓÊÂÈÖÛ...........................................................................2713. ÎÒÑÒÓÏ ÏÅÐÂÎÉ ÑÒÐÎÊÈ .....................................................................2914. ÎÒÑÒÓÏÛ ÍÀ ÂÅÁ-ÑÒÐÀÍÈÖÅ ...............................................................30

ÑÎÄÅÐÆÀÍÈÅ


3www.htmlbook.ru

ÂñòóïëåíèåÂ ýòîé êíèãå âû íå íàéäåòå îïèñàíèÿ òåãîâ, çäåñü íå äàåòñÿ ñòðóêòóðà HTML-

äîêóìåíòà è íè÷åãî íå ãîâîðèòñÿ î âñòàâêå èçîáðàæåíèé è èõ ñîçäàíèè. Âû íåóçíàåòå íè ïðî ïàðàìåòðû ñòèëåé, íè ïðî ñêðèïòû, íè ïðî ôîðìû, íè ïðîôðåéìû. Íè÷åãî ýòîãî çäåñü íåò. Íî çàòî åñòü äðóãîå, áîëåå öåííîå, òî, ñ ÷åìñòàëêèâàëñÿ êàæäûé íà÷èíàþùèé âåá-ìàñòåð, êîòîðûé èçó÷èë HTML èïðèñòóïèë ê ñîçäàíèþ ñàéòîâ - ðåøåíèå òåõ çàäà÷, íàä êîòîðûìè ìíîãèå ëîìàþòãîëîâó è çàäàþò ñåáå âîïðîñ: «êàê æå ýòî ñäåëàíî?». Îòâåòû íà ýòè âîïðîñûñîáðàíû çäåñü, â ýòîé êíèãå, â ïðîñòîé è óäîáíîé ôîðìå ñ ïðèìåðàìè è ïîäðîáíûìîïèñàíèåì.

Âåðñòêà âåá-ñòðàíèö – íå ïðîñòî çíàíèå ïðèåìîâ è õèòðîñòåé ñîçäàíèÿðàçëè÷íûõ ýôôåêòîâ. Ýòî óìåíèå ïðåäóãàäûâàòü ðåçóëüòàò äåéñòâèé ñýëåìåíòàìè âåá-ñòðàíèö è ïîíèìàíèå îñîáåííîñòåé ðàçëè÷íûõ áðàóçåðîâ,êîòîðûå ìîãóò ïî-ðàçíîìó ïîêàçûâàòü ñàéò. Ðàáîòà âåðñòàëüùèêà ñðîäíè ðàáîòåøåô-ïîâàðà, êîòîðûé òî÷íî çíàåò, êàêèå èíãðåäèåíòû è â êàêîì êîëè÷åñòâåíóæíî äîáàâèòü, ÷òîáû óëó÷øèòü âêóñ êîíå÷íîãî áëþäà. Âîîðóæèâøèñüïðîñòûìè, íî äåéñòâåííûìè ðåöåïòàìè âåðñòêè, êîòîðûå äàþòñÿ â ýòîé êíèãå,âû ñìîæåòå ñîçäàâàòü âïå÷àòëÿþùèå ñàéòû. Äîáðî ïîæàëîâàòü íà êóõíþ âåðñòêèâåá-ñòðàíèö!

ÁëàãîäàðíîñòèÂûðàæàþ ïðèçíàòåëüíîñòü ñâîåìó ó÷èòåëþ è íàñòàâíèêó Ïåòðó

Íèêèôîðîâè÷ó Ñèëü÷åíêî çà åãî íåîöåíèìûå ñîâåòû ïî íàïèñàíèþ íàó÷íûõðàáîò. Áëàãîäàðÿ åìó, ñòèëü è óäîáî÷èòàåìîñòü òåêñòîâ óëó÷øèëèñü.

Òàêæå õî÷ó ñêàçàòü ñïàñèáî Åãîðó Ìîñêâè÷åâó çà ìíîæåñòâî ïîëåçíûõðåêîìåíäàöèé ïî ñîäåðæàíèþ ñàéòà, êîòîðûå îí ìíå äàë.

ÏîääåðæêàÂàøè çàìå÷àíèÿ, ïðåäëîæåíèÿ è âîïðîñû ïî êíèãå íàïðàâëÿéòå àâòîðó ïî

àäðåñó ýëåêòðîííîé ïî÷òû [email protected].

Âñå îïèñàííûå â êíèãå ìàòåðèàëû è ïðèìåðû ìîæíî ïîñìîòðåòü â Èíòåðíåòåíà ñàéòå àâòîðà ïî àäðåñó:http://www.htmlbook.ru/layout

Èñïðàâëåíèÿ è äîïîëíåíèÿ ïî êíèãå, à òàêæå íîâûå âåðñèè äîñòóïíû ïî àäðåñó:http://www.htmlbook.ru/book


4www.htmlbook.ru

Ïðè âåðñòêå âåá-ñàéòà, íåñìîòðÿ íà íåêîòîðóþ àíàëîãèþ åãî ñ ïå÷àòíûìèèçäàíèÿìè, ñëåäóåò âñå æå ïîìíèòü, ÷òî ìû èìååì äåëî ñ êîìïüþòåðíûì òåêñòîì,êîòîðûé çàâèñèò îò ðÿäà ôàêòîðîâ. Ó÷åò ýòèõ îñîáåííîñòåé íåîáõîäèì äëÿñîçäàíèÿ óäîáíûõ äëÿ âîñïðèÿòèÿ è ïîëüçîâàíèÿ ìàòåðèàëîâ, êîòîðûå áóäóòâûãëÿäåòü îäèíàêîâî â ðàçëè÷íûõ áðàóçåðàõ.

Øèðèíà ñòðàíèöû çàâèñèò îò ðàçìåðà è ðàçðåøåíèÿ ìîíèòîðàÄàííàÿ îñîáåííîñòü ïîðîäèëà ìåòîä âåðñòêè âåá-ñòðàíèö, îñíîâàííûé íà

èñïîëüçîâàíèè òàáëèö ñ íåâèäèìîé ãðàíèöåé. Èäåîëîãèÿ HTML ðåêîìåíäóåòèñïîëüçîâàòü òàáëèöû òîëüêî ïî èõ ïðÿìîìó íàçíà÷åíèþ, ò.å. äëÿ ñîçäàíèÿèìåííî òàáëèö. Íî ÷òî äåëàòü, ðàñïîëàãàÿ ñòîëü ñëàáûìè ñðåäñòâàìè âåðñòêè,ïðèõîäèòñÿ èñïîëüçîâàòü ðàçíûå óõèùðåíèÿ.

Âñå ìíîãîîáðàçèå äèçàéíà ìîæíî ñâåñòè ê äâóì òèïàì: «ôèêñèðîâàííûé» è«ðåçèíîâûé» äèçàéí.

Ïðè «ôèêñèðîâàííîì» äèçàéíå ìàêåò ñòðàíèöû ñîçäàåòñÿ íà îñíîâå òàáëèöèëè ñëîåâ îïðåäåëåííîé øèðèíû. Âûáîð øèðèíû çàâèñèò îò îðèåíòàöèè íàîïðåäåëåííîå ðàçðåøåíèå ìîíèòîðà ïîëüçîâàòåëåé. Òàê, äëÿ ðàçðåøåíèÿ640×480 ïèêñåëåé ðàçìåð òàáëèöû ñëåäóåò áðàòü íå áîëåå 619 ïèêñåëåé. Äëÿ âñåõïîëüçîâàòåëåé ñàéò, ïîñòðîåííûé íà òàêîì ìàêåòå, áóäåò îòîáðàæàòüñÿêîððåêòíî, íî ïðè áîëüøèõ ðàçðåøåíèÿõ îêàçûâàåòñÿ ñëèøêîì ìíîãî ïóñòîãîìåñòà. Ïîñêîëüêó íàèáîëåå ïîïóëÿðíûì ñðåäè ïîëüçîâàòåëåé Èíòåðíåòà ÿâëÿåòñÿðàçðåøåíèå 800×600, ðàçðàáîò÷èêè ñàéòîâ îðèåíòèðóþòñÿ èìåííî íà íåãî èäåëàþò òàáëèöû øèðèíîé 700-770 ïèêñåëåé.

Äëÿ «ðåçèíîâîãî äèçàéíà» õàðàêòåðíî èñïîëüçîâàíèå òàáëèö ñ øèðèíîé,çàäàííîé â ïðîöåíòíîì îòíîøåíèè îò øèðèíû áðàóçåðà. Äîñòîèíñòâà –èñïîëüçóåòñÿ âñå äîñòóïíîå ïðîñòðàíñòâî âåá-ñòðàíèöû, íåäîñòàòîê – ïðèáîëüøîì ðàçðåøåíèè ìîíèòîðà òåêñò ñëîæíî ÷èòàòü. Ïîïðîáóéòå, ïî÷èòàéòåñòðàíèöó ñî ñòðî÷êàìè äëèíîé ñèìâîëîâ 200, ãëàçà óñòàíóò ïî íåé áåãàòü.

Õîòÿ è «ðåçèíîâûé» è «ôèêñèðîâàííûé» äèçàéí ìîæíî óâèäåòü íà ðàçëè÷íûõñàéòàõ ïîâñåìåñòíî, â ïîñëåäíåå âðåìÿ ïðåäïî÷òåíèå âñå áîëüøå îòäàåòñÿ ãèáêîéñòðóêòóðå.

Ðàçìåð øðèôòà çàâèñèò îò íàñòðîåê îïåðàöèîííîé ñèñòåìû èáðàóçåðàÍå ëþáÿò ðàçðàáîò÷èêè ñàéòîâ, êîãäà èõ ïîëüçîâàòåëè èçìåíÿþò ðàçìåð

øðèôòà. Ïîòîìó ÷òî â ýòîò ìîìåíò ìîãóò ïðîÿâëÿòüñÿ âñÿêèå ðàçíûå íåäî÷åòûâåðñòêè. È ÷òîáû ïîëüçîâàòåëü íå ìîã ìåíÿòü ðàçìåð øðèôòà, ýòà âåëè÷èíàæåñòêî ïðîïèñûâàåòñÿ â ñòèëÿõ. Äàæå åñëè òåêñò ìåëêèé-ìåëêèé, èçìåíèòü åãîïðîñòûìè ñðåäñòâàìè íå ïðåäñòàâëÿåòñÿ âîçìîæíûì. Ïîýòîìó ëó÷øå çàäàâàòüðàçìåð øðèôòà â ïðîöåíòàõ, íàïðèìåð: font-size: 150%. Òîãäà â îïöèÿõ áðàóçåðàðàçìåð øðèôòà ìîæíî äåëàòü áîëüøèì èëè ìåíüøèì, ÷òî íåâîçìîæíî ïðèàáñîëþòíîì çàäàíèè ðàçìåðà øðèôòà â ïóíêòàõ. Ýòî ïîçâîëèò óñòàíîâèòüðàçìåð øðèôòà ïîäõîäÿùèì äëÿ êîìôîðòíîãî ÷òåíèÿ. Òîëüêî íàäî ïðîâåðèòüâíà÷àëå, ÷òî âñå íà ñàéòå êîððåêòíî ðàáîòàåò ïðè ëþáîì ðàçìåðå øðèôòà.

1. ÎÑÎÁÅÍÍÎÑÒÈ ÂÅÐÑÒÊÈ ÂÅÁ-ÑÒÐÀÍÈÖ


5www.htmlbook.ru

Íåñêîëüêî èäóùèõ ïîäðÿä ïðîáåëîâ ïîêàçûâàþòñÿ êàê îäèíÑêîëüêî áû ïðîáåëîâ íå ñòîÿëî ìåæäó ñëîâàìè, âñå ðàâíî íà âåá-ñòðàíèöå ìû

óâèäèì ëèøü îäèí. Â îáùåì, ïðàâèëüíîå ðåøåíèå, ÷åãî ëèøíèé ðàç ïðîáåëûïëîäèòü. Íî êàê æå òîãäà áûòü ñ êðàñíûìè ñòðîêàìè è äðóãèìè îòñòóïàìè,êîòîðûå òàê èíîãäà íåîáõîäèìî èñïîëüçîâàòü. Âîò òóò è ïîëþáèëñÿ ìíîãèìñèìâîë íåðàçðûâíîãî ïðîáåëà ( ) çà òî, ÷òî ïîçâîëÿåò äåëàòü ñòîëüêî ïîäðÿäèäóùèõ ïðîáåëîâ, ñêîëüêî õî÷åòñÿ.

Íåò ïåðåíîñîâ ñëîâ â òåêñòåÊ ñîæàëåíèþ, HTML íå ïîääåðæèâàåò ïåðåíîñ ñëîâ, òàê êàê ýòî äåëàþò

òåêñòîâûå ðåäàêòîðû. Ýòî óñëîâèå ñîâåðøåííî íåñóùåñòâåííî, ïîêà íåèñïîëüçóåòñÿ âûðàâíèâàíèå òåêñòà ïî øèðèíå. Â ýòîì ñëó÷àå, áëîê òåêñòàâûðàâíèâàåòñÿ ïî ëåâîìó è ïðàâîìó êðàþ. Êîðîòêèå ñòðîêè ïðè ýòîìðàñòÿãèâàþòñÿ çà ñ÷åò àâòîìàòè÷åñêîãî äîáàâëåíèÿ ïðîáåëîâ ìåæäó ñëîâàìè.Èíîãäà ïóñòûå áëîêè ìåæäó ñëîâàìè íàñòîëüêî âåëèêè, ÷òî ïîðòÿò âíåøíèé âèäñòðàíèöû è óõóäøàþò ÷èòàáåëüíîñòü òåêñòà.

Êîëè÷åñòâî èñïîëüçóåìûõ äëÿ òåêñòà øðèôòîâ îãðàíè÷åíîÐàçóìååòñÿ, ìîæíî óêàçàòü ëþáîé øðèôò, óñòàíîâëåííûé ó âàñ â îïåðàöèîííîé

ñèñòåìå è îí áóäåò êîððåêòíî ïîêàçûâàòüñÿ íà äàííîì êîìïüþòåðå. Íî íèêòîïðè ýòîì íå ãàðàíòèðóåò, ÷òî òî÷íî òàêîé æå øðèôò áóäåò íàõîäèòüñÿ íàóäàëåííîì êîìïüþòåðå ïîëüçîâàòåëÿ. Ïîýòîìó äëÿ ñîâìåñòèìîñòè èñïîëüçóåòñÿâñåãî íåñêîëüêî øðèôòîâ, êîòîðûå âñòðå÷àþòñÿ ïîâñåìåñòíî: Arial, Times,Verdana, Courier, Comic Sans MS. Â ñëó÷àå åñëè õî÷åòñÿ âîñïîëüçîâàòüñÿïîíðàâèâøèìñÿ øðèôòîì, ñëåäóåò ñîçäàòü êàðòèíêó â ãðàôè÷åñêîì ðåäàêòîðå,ñîäåðæàùóþ íàäïèñü.

Èñïîëüçîâàíèå èçîáðàæåíèé âìåñòî òåêñòàÎñîáåííîñòü íåïîñðåäñòâåííî ñâÿçàíà ñ ïðåäûäóùèì ïóíêòîì. Êîëè÷åñòâî

øðèôòîâ, êîòîðûå ìîæíî ïðèìåíÿòü íà âåá-ñòðàíèöå îãðàíè÷åíî, à ñòèëèíåóäîáíî èëè íåâîçìîæíî ïðèìåíÿòü äëÿ óïðàâëåíèÿ íåêîòîðûìè ïàðàìåòðàìèòåêñòà, êàê ýòî ïîçâîëÿþò äåëàòü òåêñòîâûå èëè ãðàôè÷åñêèå ðåäàêòîðû. Ïîýòîìóíåêîòîðûå áëîêè òåêñòà, íàïðèìåð, çàãîëîâêè è ìåíþ âñòàâëÿþò â âèäåèçîáðàæåíèÿ.

Âûñîòà ñîäåðæèìîãî ñòðàíèöû íå îãðàíè÷åíà ðàìêàìè îêíàáðàóçåðàÍåñìîòðÿ íà î÷åâèäíîñòü äàííîãî âîççðåíèÿ, èç íåãî ñëåäóþò íåêîòîðûå

âûâîäû:• ïîñêîëüêó âûñîòà òåêñòà íà ñòðàíèöû íå îãðàíè÷åíà îïðåäåëåííûìè

ðàìêàìè, êàê íà ëèñòå áóìàãè è íàïðÿìóþ çàâèñèò îò ðàçðåøåíèÿ ìîíèòîðà,ðàçìåðà è òèïà øðèôòà è åùå îò êó÷è äðóãèõ ïàðàìåòðîâ, âû÷èñëèòü åå íåïðåäñòàâëÿåòñÿ âîçìîæíûì;

• âåðòèêàëüíûå ëèíèè ïðèâÿçàííûå ê âûñîòå òåêñòà ìîæíî ñòðîèòü òîëüêî ñèñïîëüçîâàíèåì òàáëèö.

Èñïîëüçîâàíèå ðàñïîðîêÐàñïîðêîé íàçûâàåòñÿ ïðîçðà÷íûé ðèñóíîê, êàê ïðàâèëî, ðàçìåðîì 1 íà 1

ïèêñåë, ïðåäíàçíà÷åííûé äëÿ êîíòðîëÿ ïóñòîãî ïðîñòðàíñòâà. Ðàñïîðêè


6www.htmlbook.ru

âñòàâëÿþòñÿ â ÿ÷åéêè òàáëèö, ÷òîáû îíè íå ìåíÿëè ñâîé ðàçìåð ïðè èçìåíåíèèîêíà áðàóçåðà èëè ðàçðåøåíèÿ ìîíèòîðà.

Íàïèñàíèå ïðîãðàììíûõ ñêðèïòîâ âìåñòî êîäà HTMLHTML íå ÿâëÿåòñÿ ÿçûêîì ïðîãðàììèðîâàíèÿ è èìååò ìàññó îãðàíè÷åíèé.

×òîáû èçìåíèòü åãî ñòàòè÷åñêóþ ïðèðîäó, äëÿ ñîçäàíèÿ ðàçëè÷íûõ ýôôåêòîâèñïîëüçóþòñÿ ñêðèïòû – ïðîãðàììû, êîòîðûå âñòðàèâàþòñÿ â òåëî âåá-ñòðàíèöûè èñïîëíÿþòñÿ íà ñòîðîíå êëèåíòà. Ñ ïîìîùüþ ñêðèïòîâ ìîæíî ñîçäàâàòü íàñàéòå èãðû, ðàçëè÷íûå ìåíþ, äèíàìè÷åñêè óïðàâëÿòü ñòèëÿìè è ìíîãîå äðóãîå.

2. ÈÑÏÎËÜÇÎÂÀÍÈÅ ÔÎÍÎÂÎÃÎ ÐÈÑÓÍÊÀ

Èñïîëüçóÿ ôîíîâûé ðèñóíîê âåá-ñòðàíèöû èëè òàáëèöû ìîæíî ñîçäàâàòüðàçëè÷íûå ãðàôè÷åñêèå ýôôåêòû íà ñàéòå, íàïðèìåð, âåðòèêàëüíûå èãîðèçîíòàëüíûå ëèíèè, òåíè, ïîëîñêè è ìíîãîå äðóãîå.

Ôîí âåá-ñòðàíèöû×òîáû íà âåá-ñòðàíèöå ñ ëåâîãî êðàÿ øëà âåðòèêàëüíàÿ ôîíîâàÿ ïîëîñà,

èñïîëüçóåòñÿ ñëåäóþùèé ïðèåì. Ñîçäàåì ðèñóíîê øèðèíîé ïðèìåðíî 2000ïèêñåëîâ. Òàêàÿ áîëüøàÿ øèðèíà íóæíà äëÿ òîãî, ÷òîáû íà âñåõ ìîíèòîðàõíåçàâèñèìî îò èõ ðàçðåøåíèÿ ñòðàíèöà âûãëÿäåëà áû îäèíàêîâî (ðèñ. 2.1). Ñëåâîé ÷àñòè ðèñóíîê çàðèñîâûâàåòñÿ íóæíûì öâåòîì æåëàåìîé øèðèíû. Ìîæíîñîçäàâàòü íå òîëüêî ïðÿìîóãîëüíèê, íî è ëþáûå äåêîðàòèâíûå èçîáðàæåíèÿ,ãëàâíîå, ÷òîáû îíè ñîñòûêîâûâàëèñü ïî âåðòèêàëè. Ïîëó÷åííûé ðèñóíîêâñòàâëÿåì íà âåá-ñòðàíèöó êàê îáû÷íûé ôîí ïàðàìåòðîì background òåãà BODY.Ïîñêîëüêó ðèñóíîê øèðîê è íå ïîìåùàåòñÿ íà âñþ øèðèíó ýêðàíà ìîíèòîðà, íàñòðàíèöå îí áóäåò ïîâòîðÿòüñÿ òîëüêî âíèç.

Â èòîãå ïîëó÷èì ñòðàíèöó, ó êîòîðîé ïî ëåâîìó êðàþ èäåò äåêîðàòèâíàÿ ïîëîñà(ðèñ. 2.2).

Ðèñ. 2.1. Ôîíîâûé ðèñóíîê äëÿ ðàçëè÷íûõ ðàçðåøåíèé ìîíèòîðà


7www.htmlbook.ru

Ïðèâåäåííûé ïðèåì ìîæíî èñïîëüçîâàòü äëÿ ñîçäàíèÿ è ãîðèçîíòàëüíûõïîëîñ. Â ýòîì ñëó÷àå, ôîíîâîå èçîáðàæåíèå äîëæíî ðàñïîëàãàòüñÿ âåðòèêàëüíî.

Äëÿ ðàçìåùåíèÿ ñîäåðæèìîãî ñòðàíèöû ñòðîãî â îïðåäåëåííûõ îáëàñòÿõ,ìîæíî èñïîëüçîâàòü òàáëèöó ñ íóëåâîé ãðàíèöåé êàê êàðêàñ (ðèñ. 2.3). Ñàìîéòàáëèöû âèäíî íå áóäåò, íî îíà ïîçâîëÿåò îòäåëèòü îäíó ÷àñòü âåá-ñòðàíèöû îòäðóãîé, íàïðèìåð, ññûëêè îò ñîäåðæàíèÿ.

Ðèñ. 2.3. Èñïîëüçîâàíèÿ òàáëèöû äëÿ ðàçäåëåíèÿ ìàòåðèàëà

Àíàëîãè÷íûé ïîäõîä ìîæíî èñïîëüçîâàòü è ñ òàáëèöàìè. Òîëüêî âíà÷àëåñîçäàåòñÿ òàáëèöà, à óæå â îäíîé èç åå ÿ÷ååê ðàçìåùàåòñÿ ôîíîâûé ðèñóíîê.Øèðèíà ÿ÷ååê çàäàåòñÿ ôèêñèðîâàííîé è çàâèñèò îò ôîíîâîãî ðèñóíêà, à ÷òîáûîíà íå ìåíÿëàñü, âíóòðè ÿ÷åéêè ðåêîìåíäóåòñÿ ïîìåñòèòü ðàñïîðêó –ïðîçðà÷íûé ðèñóíîê çàäàííûõ ðàçìåðîâ (ðèñ. 2.4).

Êîä äëÿ äàííîãî èñïîëüçîâàíèÿ òàáëèöû ñ ôîíîì ïðèâåäåí â Ïðèìåðå 2.1.

Ðèñ. 2.4. Ôîíîâûé ðèñóíîê äëÿ ÿ÷åéêè òàáëèöû

Ïðèìåð 2.1. Ñîçäàíèå ôîíà ñ ïîìîùüþ òàáëèöû<table width="300" cellspacing="0" cellpadding="0"><tr> <td width="82" background="bg.gif"><img src="spacer.gif" width="82"height="1">Меню</td> <td width="200" bgcolor="#CCCCCC">Текст</td></tr></table>

Ðèñ. 2.2. Ðåçóëüòàò èñïîëüçîâàíèÿ øèðîêîãî ôîíà


8www.htmlbook.ru

Ðèñ. 2.5. Çàãîòîâêà äëÿ ñîçäàíèÿ ëèíèè

Ñëåäóþùèé ýòàï – ñîçäàíèå òàáëèöû. Øèðèíà îäíîé èç ÿ÷ååê äîëæíàñîâïàäàòü ñ òîëùèíîé ëèíèè, îáû÷íî ýòî 1-2 ïèêñåëà. Âíóòðè íåå è ðàçìåùàåìôîíîì èçîáðàæåíèå.

Ïðèìåð 2.2. Ñîçäàíèå âåðòèêàëüíîé ëèíèè<table width="300" border="0" cellspacing="0" cellpadding="0"><tr> <td width="2" background="line.gif"><img src="spacer.gif" width="2"height="1"></td> <td width="10"><img src="spacer.gif" width="10" height="1"></td> <td width="288"><i>При истечении возможности пониманиявышеизложенной информации вы имеете объективную возможность податьофициальный запрос главному субординатору локальной виртуальнойвселенной.</i> </td></tr></table>

Åñëè øèðèíà òàáëèöû ôèêñèðîâàíà, ëó÷øå çàäàâàòü òî÷íûå ðàçìåðû âñåõÿ÷ååê. Ïðè øèðèíå çàäàííîé â ïðîöåíòàõ, âîçìîæíû íåáîëüøèå èçìåíåíèÿðàçìåðîâ ÿ÷ååê. Âîò äëÿ òàêîãî ñëó÷àÿ è äåëàåòñÿ èçîáðàæåíèå ëèíèè (ðèñ. 2.5)ñ ïóñòûì ïîëåì ñïðàâà. Åñëè ýòîãî íå ñäåëàòü, ëèíèÿ ìîæåò ïîëó÷èòüñÿ íåñêîëüêîòîëùå, ÷åì îæèäàëîñü. À òàê, åñëè øèðèíà ÿ÷åéêè è áóäåò óâåëè÷èâàòüñÿ,íåñìîòðÿ íà ïðîïèñàííûå ðàçìåðû, âèä ëèíèè îñòàíåòñÿ íåèçìåííûì. Âäîáàâîê,òàêîé «çàïàñ» ïîçâîëÿåò èçìåíÿòü çíà÷åíèå ïàðàìåòðà cellpadding, êîòîðûéóïðàâëÿåò îòñòóïîì îò êðàÿ òàáëèöû äî åå ñîäåðæèìîãî, áåç îòðèöàòåëüíûõïîñëåäñòâèé.

Ðèñóíîê äîñòàòî÷íî äåëàòü øèðèíîé 20-30 ïèêñåëîâ, à öâåò ôîíà ðèñóíêàäîëæåí áûòü òàêèì æå, êàê ó âåá-ñòðàíèöû.

Ðèñóíîê bg.gif ÿâëÿåòñÿ ôîíîì, à spacer.gif ñëóæèò ðàñïîðêîé. Â ïðàâîé ÿ÷åéêåôîí çàëèò ñåðûì öâåòîì, ÷òî ìîæíî äåëàòü ïî æåëàíèþ.

Ñîçäàíèå âåðòèêàëüíîé ëèíèèÎ÷åíü óäîáíî è ïðîñòî äåëàòü âåðòèêàëüíûå ëèíèè ñ ïîìîùüþ òàáëèöû è

ôîíîâîãî ðèñóíêà. Âíà÷àëå ãîòîâèì èçîáðàæåíèå â ãðàôè÷åñêîì ðåäàêòîðå, ýòîìîæåò áûòü ñïëîøíàÿ, ïóíêòèðíàÿ èëè ëþáàÿ äåêîðàòèâíàÿ ëèíèÿ (ðèñ. 2.5).

Ïî÷åìó ðèñóíîê èìåííî òàêîãî ðàçìåðà è ôîðìû îïèñàíî ÷óòü íèæå.


9www.htmlbook.ru

OperaNetscapeInternet Explorer

Ðèñ. 3.1. Ðàìêà ïîëó÷åííàÿ ñ ïîìîùüþ ïàðàìåòðà border

Netscape èìèòèðóåò òðåõìåðíîñòü ðàìêè, áðàóçåð Opera âîîáùå îñòàâëÿåò ååöâåò áåç èçìåíåíèÿ, à Internet Explorer äåëàåò ðàìêó ñïëîøíîé.

Ïðèìåð 3.1. Èñïîëüçîâàíèå ïàðàìåòðà border<table border="2" bordercolor="#FF0000" width="100" height="100"cellpadding="6" cellspacing="0" bgcolor="#E0E0E0"><tr><td>Содержимое</td></tr></table>

Ïàðàìåòð border îïðåäåëÿåò òîëùèíó ðàìêè, bordercolor – åå öâåò, cellpaddingçàäàåò ðàññòîÿíèå îò ðàìêè äî ñîäåðæèìîãî òàáëèöû.

Âëîæåííûå òàáëèöûÅùå îäèí ïðîñòîé è óíèâåðñàëüíûé ñïîñîá ïîñòðîåíèÿ ðàìêè, ðàáîòàþùèé

îäèíàêîâî â ðàçíûõ áðàóçåðàõ, îñíîâàí íà íàëîæåíèè äâóõ òàáëèö äðóã íà äðóãà.Åñëè ìû âîçüìåì ïðÿìîóãîëüíèê èç, íàïðèìåð, êðàñíîé áóìàãè è ñâåðõó íà íåãî

3. ÑÎÇÄÀÍÈÅ ÐÀÌÎÊ

Èíôîðìàöèÿ îáâåäåííàÿ ðàìêîé ïîçâîëÿåò îòäåëèòü îäèí ìàòåðèàë íà âåá-ñòðàíèöå îò äðóãîãî è ïðèâëå÷ü âíèìàíèå ÷èòàòåëÿ. Êðîìå òîãî, ðàìêà âíîñèòýëåãàíòíîñòü â îôîðìëåíèå ñàéòà.

Äëÿ ñîçäàíèÿ ðàìîê ïðèìåíÿåòñÿ íåñêîëüêî ñïîñîáîâ, èõ êîòîðûõ áîëüøàÿ÷àñòü èñïîëüçóåò ñâîéñòâà òàáëèö. Ñòèëè äîïîëíÿþò âîçìîæíîñòè òàáëèö èïîçâîëÿþò ñäåëàòü ðàìêè ðàçíûõ âèäîâ ïðîñòûìè ñðåäñòâàìè. Íèæå ïðèâîäÿòñÿðàñïðîñòðàíåííûå ïðèåìû ïîëó÷åíèÿ ðàìîê, êîòîðûå ìîæíî âñòðåòèòüïîâñåìåñòíî íà ðàçíûõ ñàéòàõ.

Èñïîëüçîâàíèå ïàðàìåòðà òàáëèöû borderÑàìûé ïðîñòîé ñïîñîá ñîçäàíèÿ ðàìêè çàêëþ÷àåòñÿ â èñïîëüçîâàíèè

ïàðàìåòðîâ òàáëèöû border, îïðåäåëÿþùåãî òîëùèíó ðàìêè è bordercolor,êîòîðûé çàäàåò åå öâåò. Ðàìêè ñîçäàííûå òàêèì îáðàçîì îòëè÷àþòñÿ ïî ñâîåìóâèäó â ðàçíûõ áðàóçåðàõ (ðèñ. 3.1).


10www.htmlbook.ru

íàëîæèì åùå îäèí ïðÿìîóãîëüíèê áåëîãî öâåòà, ÷óòü ìåíüøåãî ðàçìåðà, òîóâèäèì êðàñíóþ ðàìêó. Òîëüêî âìåñòî ëèñòà áóìàãè èñïîëüçóåì òåã TABLE, à öâåòòàáëèöû çàäàåì ïàðàìåòðîì bgcolor.

Ïðèìåð 3.2. Èñïîëüçîâàíèå âëîæåííûõ òàáëèö<table width="300" height="300" border="0" cellspacing="0"cellpadding="1" bgcolor="#FF0000"><tr><td><table border="0" cellspacing="0" cellpadding="10" bgcolor="#FFFFFF"width="300" height="300"><tr><td align="center">Содержимое</td></tr></table></td></tr></table>

Â âåðõíåé òàáëèöå óñòàíàâëèâàåì øèðèíó è âûñîòó òàáëèöû ïî æåëàíèþ,ïàðàìåòðîì bgcolor çàäàåì öâåò ðàìêè, cellspacing ïðèñâàèâàåì íóëþ, àcellpadding óïðàâëÿåò òîëùèíîé ãðàíèöû. ×åì ýòîò ïàðàìåòð áîëüøå, òåì òîëùåáóäåò è ðàìêà.

Äëÿ âíóòðåííåé òàáëèöû íàäî îáÿçàòåëüíî çàäàòü åå öâåò, îòëè÷íûé îò öâåòàâíåøíåé, ñîâïàäàþùèé ñ öâåòîì ôîíà âåá-ñòðàíèöû, â ïðèìåðå, íàïðèìåð,çàäàí áåëûé. Ïàðàìåòð cellspacing èëè cellpading (â äàííîì ñëó÷àå áåç ðàçíèöûêàêîé èñïîëüçîâàòü) îïðåäåëÿåò ðàññòîÿíèå îò ãðàíèöû ðàìêè äî ñîäåðæèìîãîòàáëèöû.

Øèðèíà è âûñîòà âíóòðåííåé òàáëèöû îáÿçàòåëüíî äîëæíû ñîâïàäàòü ñøèðèíîé è âûñîòîé âíåøíåé òàáëèöû.

Çàìå÷àíèå: Ïåðåíîñ ñòðîêè â òåêñòå êîäà HTML àâòîìàòè÷åñêè äîáàâëÿåòïðîáåë. Åñëè ðàìêà â íåêîòîðûõ ìåñòàõ ïîëó÷àåòñÿ òîëùå, ÷åì çàäóìàíî, ñëåäóåòóáðàòü ëèøíèå ïðîáåëû ìåæäó òåãàìè è òåì ñàìûì ñîêðàòèòü êîëè÷åñòâî ñòðîê.

Çàëèâêà ÿ÷ååê òàáëèöû öâåòîìÈñïîëüçîâàíèå öâåòà ôîíà ÿ÷ååê òàáëèöû – îäèí èç óíèâåðñàëüíûõ è

ðàñïðîñòðàíåííûõ ñïîñîáîâ ñîçäàíèÿ ðàìêè. Ñîçäàåì òàáëèöó (ðèñ. 3.2) èçàëèâàåì êðàéíèå ÿ÷åéêè íóæíûì öâåòîì (ðèñ. 3.3).

Ðèñ. 3.2 Ðèñ. 3.3


11www.htmlbook.ru

Ïðèìåð 3.3. Ñîçäàíèå ðàìêè çàëèâêîé öâåòîì ÿ÷ååê òàáëèöû<table width="200" border="0" height="200" cellspacing="0"cellpadding="0"><tr bgcolor="#FF6633"><td width="2" height="2"><img src="spacer.gif" width="2" height="2"></td><td height="2"><img src="spacer.gif" width="2" height="2"></td><td width="2" height="2"><img src="spacer.gif" width="2"height="2"></td></tr><tr><td width="2" bgcolor="#FF6633"><img src="spacer.gif" width="2"height="2"></td><td align="center">Содержимое</td><td width="2" bgcolor="#FF6633"><img src="spacer.gif" width="2"height="2"></td></tr><tr bgcolor="#FF6633"><td width="2" height="2"><img src="spacer.gif" width="2"height="2"></td><td height="2"><img src="spacer.gif" width="2" height="2"></td><td width="2" height="2"><img src="spacer.gif" width="2"height="2"></td></tr></table>

Â äàííîì ïðèìåðå äåëàåòñÿ êðàñíàÿ ðàìêà òîëùèíîé 2 ïèêñåëà, îíà ñìîòðèòñÿíàèáîëåå ýëåãàíòíî. Ïàðàìåòðû òàáëèöû cellspacing è cellpaddingïðèðàâíèâàþòñÿ íóëþ, ÷òîáû ðàìêà îñòàâàëàñü íóæíîé òîëùèíû è áåç çàçîðîâ.Åñëè ïîìåñòèòü âíóòðü òàêîé òàáëèöû òåêñò, îí áóäåò ïëîòíî ïðèëåãàòü ê ðàìêå,÷òî íåêðàñèâî è ïëîõî ÷èòàåòñÿ. ×òîáû äîáàâèòü îòñòóïû ìîæíî ñîçäàòü äëÿ ýòîéöåëè äîïîëíèòåëüíûå ÿ÷åéêè, èñïîëüçîâàòü âëîæåííóþ òàáëèöó èëèâîñïîëüçîâàòüñÿ ñòèëÿìè.

Çàìå÷àíèå: Ïðèâåäåííûé ñïîñîá ÷óâñòâèòåëåí ê ðàçíûì ïàðàìåòðàì,ïîýòîìó, â ñëó÷àå íåïðàâèëüíîé îòðèñîâêè ðàìêè ñëåäóåò ïðîâåðèòü ñëåäóþùåå:

• åñëè ðàçìåð òàáëèöû çàäàåòñÿ â ïèêñåëàõ, íàäî çàäàòü ôèêñèðîâàííûåðàçìåðû âñåõ ÿ÷ååê;

• êîãäà øèðèíà òàáëèöû óêàçàíà â ïðîöåíòàõ, âíóòðè ðàìêè íóæíî ïîìåñòèòüòåêñò, êîòîðûé «ðàñïèðàåò» âíóòðåííþþ ÿ÷åéêó äî íóæíîé øèðèíû; ïðèîòñóòñòâèè òåêñòà èëè äðóãîãî ñîäåðæèìîãî âíóòðè òàáëèöû ñ ðàìêîé, åå øèðèíàîêàæåòñÿ ãîðàçäî øèðå æåëàåìîé;

• â ÿ÷åéêàõ, ãäå ïðîõîäèò ðàìêà, íå äîëæíî áûòü íèêàêèõ ñèìâîëîâíåðàçäåëÿåìîãî ïðîáåëà ( ), ÷òî òàê ëþáÿò àâòîìàòè÷åñêè äîáàâëÿòüíåêîòîðûå ðåäàêòîðû âåá-ñòðàíèö;

• ïåðåíîñ ñòðîêè àâòîìàòè÷åñêè äîáàâëÿåò â òåêñò ïðîáåë, ïîýòîìó ìåæäóîòêðûâàþùèì è çàêðûâàþùèì òåãàìè <TD> è </TD> òåêñò ñëåäóåò ïèñàòü â îäíóñòðîêó, ÷òîáû íå áûëî çàçîðîâ ìåæäó ÿ÷åéêàìè.

Òîëùèíà ðàìêè îïðåäåëÿåòñÿ øèðèíîé è âûñîòîé ÿ÷ååê. Îáÿçàòåëüíî ñëåäóåòïîìåñòèòü âíóòðè ýòèõ ÿ÷ååê òàáëèöû ðàñïîðêó – ïðîçðà÷íûé ðèñóíîê ðàçìåðîì1 íà 1 ïèêñåë (â ïðèìåðå îí íàçûâàåòñÿ spacer.gif), èíà÷å â áðàóçåðå Netscape ýòîòñïîñîá ðàáîòàòü íå áóäåò.


12www.htmlbook.ru

Äåêîðàòèâíàÿ ðàìêàÄëÿ ñîçäàíèÿ æåëàåìîé ðàìêè åå íåîáõîäèìî ïðåäâàðèòåëüíî íàðèñîâàòü â

êàêîì-íèáóäü ãðàôè÷åñêîì ðåäàêòîðå. Íà ðèñ. 3.4, íàïðèìåð, ïîêàçàíà ðàìêàñî ñêðóãëåííûìè óãëàìè. Çàòåì ýòî èçîáðàæåíèå ðàçðåçàåì íà 9 ÷àñòåé,ïîìå÷åííûå íà ðèñóíêå 3.5 îðàíæåâûìè ëèíèÿìè è íîìåðàìè. Ðàçðåçàòüèçîáðàæåíèå ìîæíî, íàïðèìåð, â ïðîãðàììå ImageReady èëè äðóãîé ïîäîáíîé.

Ðèñ. 3.4 Ðèñ. 3.5

Ïîñëå ðàçðåçàíèÿ ðèñóíêà íà ÷àñòè ïîëó÷èì 8 ôðàãìåíòîâ:

Рисунок Положение Имя файла

Левый верний угол 1.gifВерхняя горизонтальная линия 2.gifПравый верхний угол 3.gifЛевая вертикальная линия 4.gif

Правая вертикальная линия 6.gifЛевый нижний угол 7.gifНижняя горизонтальная линия 8.gifПравый нижний угол 9.gif

Ïÿòîãî ôðàãìåíòà ðàìêè íå áóäåò (5.gif), ïîñêîëüêó ó íàñ åãî çàìåíèòñîäåðæèìîå. Òåïåðü ñîçäàåì òàáëèöó ðàçìåðîì 3õ3, êàê ïîêàçàíî íà ðèñ. 3.2 è âåå ÿ÷åéêàõ ðàçìåùàåì ñîçäàííûå ðèñóíêè.


13www.htmlbook.ru

Ïðèìåð 3.4. Ñîçäàíèå äåêîðàòèâíîé ðàìêè<table width="400" border="0" cellspacing="0" cellpadding="0"><tr><td height="13"><img src="1.gif" width="12" height="13"></td><td background="2.gif" height="13"><img src="spacer.gif" height="13"width="1"></td><td height="13"><img src="3.gif" width="14" height="13"></td></tr><tr><td background="4.gif" width="12"> </td><td align="center">Содержимое</td><td background="6.gif" width="12"> </td></tr><tr><td height="13"><img src="7.gif" width="12" height="13"></td><td background="8.gif"><img src="spacer.gif" height="13"width="1"></td><td height="13"><img src="9.gif" width="14" height="13"></td></tr></table>

Â òàáëèöå ïàðàìåòðû border, cellspacing è cellpadding äîëæíû áûòü ðàâíû íóëþ,èíà÷å ëèíèè íå áóäóò ñîñòûêîâûâàòüñÿ ìåæäó ñîáîé.

Óãîëêè âñòàâëÿåì êàê îáû÷íûå ðèñóíêè ñ ïîìîùüþ òåãà IMG, à âîòãîðèçîíòàëüíûå è âåðòèêàëüíûå ëèíèè ñëåäóåò çàäàâàòü ñ ïîìîùüþ ôîíà ÿ÷åéêèòàáëèöû, ïàðàìåòðîì background. Ýòî ïîçâîëèò ñäåëàòü íàøó ðàìêóìàñøòàáèðóåìîé è ðàçìåð åå áóäåò èçìåíÿòüñÿ â çàâèñèìîñòè îò ñîäåðæèìîãî.

×òîáû ëèíèè ïëîòíî ïðèëåãàëè äðóã ê äðóãó è ìåæäó íèìè íå áûëî ïðîáåëîâíàäî îáÿçàòåëüíî óêàçûâàòü âñå ðàçìåðû ÿ÷ååê è ðèñóíêîâ.

Â ÿ÷åéêàõ, ãäå ôîíîì ðàçìåùàþòñÿ ãîðèçîíòàëüíûå è âåðòèêàëüíûå ëèíèè,íåîáõîäèìî ïîìåñòèòü ðàñïîðêó – ýòî ëèáî ïðîáåë, ëèáî ïðîçðà÷íûé ðèñóíîêôîðìàòà GIF ðàçìåðîì 1 íà 1 ïèêñåë (â ïðèìåðå ôàéë íàçûâàåòñÿ spacer.gif).Äåëàåòñÿ ýòî äëÿ òîãî, ÷òîáû îáìàíóòü áðàóçåð Netscape, êîòîðûé íå ïîêàçûâàåòñîäåðæèìîå ÿ÷åéêè, åñëè îíà ïóñòà.

Ïðèâåäåííûé ñïîñîá ïîçâîëÿåò ñîçäàâàòü ðàìêè ïðàêòè÷åñêè ëþáîãî âèäà.

Èñïîëüçîâàíèå ñòèëåéÑ ïîìîùüþ ñòèëåé ðàìêó ìîæíî ïðèìåíèòü ê ëþáîìó áëî÷íîìó òåãó, íàïðèìåð,

ïàðàãðàôó (òåã P), òàáëèöå è òåãó DIV. Ñòèëè ïîçâîëÿþò ñîçäàòü ðàìêó ïðîùå èóäîáíåé, ÷åì ñ èñïîëüçîâàíèåì òàáëèö è ïðåäîñòàâëÿþò ðàçíûå âèäû ðàìîê,êîòîðûå ïîêàçàíû íà ðèñ. 3.6.

Ðèñ. 3.6 Âèä ðàìîê çàäàâàåìûõ ñ ïîìîùüþ ñòèëåé


14www.htmlbook.ru

Ïåðâûå äâå òèïà ðàìîê – dotted è dashed ïîääåðæèâàþòñÿ áðàóçåðàìè Netscapeè Internet Explorer òîëüêî ñî ñòàðøèõ âåðñèé.

Ðàìêà çàäàåòñÿ ïðîùå âñåãî ïàðàìåòðîì border, êîòîðûé ñðàçó óêàçûâàåò ååâèä, òîëùèíó è öâåò.

Ïðèìåð 3.6. Èñïîëüçîâàíèå ñòèëåé<html><head><style type="text/css">P { border: double 4px #336699; padding: 5px }</style></head>

<body><p>При работе на вычислительной технике необходимо сесть так, чтобыруки с предплечьями образовывали прямой угол, глаза поставить нарасстояние 30-40 см от рабочей поверхности монитора.</p></body></html>

Â ïðèìåðå èñïîëüçóåòñÿ äâîéíàÿ ðàìêà, òîëùèíà êîòîðîé ñêëàäûâàåòñÿ èçòîëùèíû ëèíèé è ðàññòîÿíèÿ ìåæäó íèìè. ×òîáû ðàìêà íå ñîïðèêàñàëàñü ñòåêñòîì, çàäàí îòñòóï îò ðàìêè äî ñîäåðæèìîãî ïàðàìåòðîì padding.

Çàìå÷àíèå: Áðàóçåð Netscape 4.x íå äîáàâëÿåò ðàìêó äëÿ òàáëèö èîãðàíè÷èâàåò øèðèíó ðàìêè åå ñîäåðæèìûì.

4. ÂÛÐÀÂÍÈÂÀÍÈÅ ÏÎ ÖÅÍÒÐÓ

Êàçàëîñü áû, íåò íè÷åãî ñëîæíîãî, ÷òîáû óñòàíîâèòü êàðòèíêó èëè òåêñò âöåíòðå îêíà áðàóçåðà. Èñïîëüçóåì òåã CENTER è âñå ñòàíîâèòñÿ íà òî ìåñòî, êóäàìû è çàäóìûâàëè. Îäíàêî íå âñå òàê ïðîñòî. Ñóùåñòâóåò òðè ñïîñîáàâûðàâíèâàíèÿ ïî öåíòðó, êàæäûé èç íèõ èìååò ñâîè îñîáåííîñòè è îòëè÷èÿ âðàçíûõ áðàóçåðàõ.

Îäèí èç ñàìûõ ïðîñòûõ è óäîáíûõ òåãîâ – CENTER ïðåäíàçíà÷åí äëÿâûðàâíèâàíèÿ áëîêà òåêñòà. Ñ ïîìîùüþ ýòîãî òåãà òàêæå ìîæíî öåíòðèðîâàòüðèñóíêè è òàáëèöû. Èñêëþ÷åíèå ñîñòàâëÿþò ýëåìåíòû <img align=left ...> èëè <imgalign=right... > äëÿ êîòîðûõ âûðàâíèâàíèå çàäàåòñÿ ñâîéñòâàìè òåãà IMG. Òàê,åñëè ïîìåñòèòü ýëåìåíò <img align=right... > âíóòðè òåãà CENTER, ðèñóíîêîêàæåòñÿ âûðîâíåííûì ïî ïðàâîìó êðàþ.

Ïðèìåð 4.1. Öåíòðèðîâàíèå ñ ïîìîùüþ òåãà CENTER<center>Данный текст будет выровнен по центру окна браузера, а нижележащийрисунок по правому краю.<img src=no.gif width=100 height=100 align=right></center>


15www.htmlbook.ru

Ôîðìàëüíî CENTER äîëæåí èñïîëüçîâàòüñÿ òîëüêî êàê ïàðàìåòð äðóãèõáëî÷íûõ òåãîâ (P, PRE è äðóãèå). Îäíàêî â áðàóçåðå Netscape Navigator 2.0 CENTERáûë ââåäåí êàê ñàìîñòîÿòåëüíûé òåã. Ýòî äîïîëíåíèå áûëî ïðèçâàíî óáðàòüëèøíèé âåðòèêàëüíûé îòñòóï, êîòîðûé ïîÿâëÿåòñÿ ïðè èñïîëüçîâàíèè áëî÷íûõòåãîâ. Åñëè âìåñòî òåãà CENTER òåêñò ïîìåñòèòü âíóòðü ïàðàãðàôà(<p align="center">), ïîÿâëÿåòñÿ äîïîëíèòåëüíûé âåðòèêàëüíûé îòñòóï ìåæäóãîðèçîíòàëüíîé ëèíèåé è ýòèì òåêñòîì.

CENTER íå âõîäèò â ñïåöèôèêàöèþ HTML. Â «îôèöèàëüíîì» HTMLôîðìàòèðîâàíèå, òàêîå êàê âûðàâíèâàíèå òåêñòà äîëæíî ïðîèçâîäèòñÿ ÷åðåçàòðèáóòû òåãîâ (íàïðèìåð, <p align="center">) èëè ñ èñïîëüçîâàíèåì ñòèëåé. Òåìíå ìåíåå, ýòîò òåã îáðåë ïðàâî íà ñóùåñòâîâàíèå. Îäíàêî ïîñëå îïóáëèêîâàíèÿñïåöèôèêàöèè HTML 4 W3 Êîíñîðöèóì ðåêîìåíäîâàë âîçäåðæàòüñÿ îòèñïîëüçîâàíèÿ òåãà CENTER, à âìåñòî íåãî èñïîëüçîâàòü ýëåìåíò <divalign="center">... </div>, êàê ïîêàçàíî â ïðèìåðå 4.2.

Ïðèìåð 4.2. Öåíòðèðîâàíèå ñ ïîìîùüþ òåãà DIV<hr><div align="center">Выравнивание текста по центру с помощью тега DIV</div><hr>

Åùå îäèí ñïîñîá öåíòðèðîâàíèÿ çàêëþ÷àåòñÿ â èñïîëüçîâàíèè ñòèëåé. Ñòèëèïðåäñòàâëÿþò ñîáîé èíñòðóêöèè, êîòîðûå ïîçâîëÿþò óïðàâëÿòü àòðèáóòàìèôîðìàòèðîâàíèÿ êàê øðèôò, öâåò, âûðàâíèâàíèå è äð. Ïðèìåð ïåðåîïðåäåëåíèÿòåãà P äëÿ öåíòðèðîâàíèÿ òåêñòà.

Ïðèìåð 4.3. Öåíòðèðîâàíèå ñ ïîìîùüþ ñòèëåé<html><head><style type="text/css">P { text-align: center; }</style></head>

<body><p>Теперь, когда вы будете использовать тег P с вышеуказаннымстилем, текст параграфа будет выровнен по центру окна браузера </p></body></html>

Äëÿ óñòàíîâêè òåêñòà ïî öåíòðó èñïîëüçóåòñÿ ïàðàìåòð text-align: center.


16www.htmlbook.ru

5. ÖÅÍÒÐÈÐÎÂÀÍÈÅ ÏÎ ÂÅÐÒÈÊÀËÈ

Îäíèì èç ñïîñîáîâ ïîêàçàòü ïîñåòèòåëþ íàïðàâëåííîñòü è íàçâàíèå ñàéòàÿâëÿåòñÿ èñïîëüçîâàíèå ñïëýø-ñòðàíèöû. Ýòî ïåðâàÿ ñòðàíèöà, íà êîòîðîé, êàêïðàâèëî, ðàñïîëîæåí ðèñóíîê èëè flash-çàñòàâêà, âûðàæàþùèå ãëàâíóþ èäåþñàéòà. Ýòî èçîáðàæåíèå òàêæå ÿâëÿåòñÿ è ññûëêîé íà îñòàëüíûå ðàçäåëû ñàéòà.Çàäà÷à – ðàçìåñòèòü òàêîé ðèñóíîê ñòðîãî ïî öåíòðó îêíà áðàóçåðà âíåçàâèñèìîñòè îò ðàçðåøåíèÿ ìîíèòîðà. Äîáàâëåíèå íåñêîëüêèõ òåãîâ BR ïåðåäðèñóíêîì ÿâëÿåòñÿ íåâåðíûì, ïîñêîëüêó ïðè èçìåíåíèè ðàçðåøåíèÿ èëèðàçìåðà øðèôòà èçìåíèòñÿ è ïîëîæåíèå èçîáðàæåíèÿ. Ïðàâèëüíîå ðåøåíèåñëåäóþùåå. Íåîáõîäèìî ïîìåñòèòü ðèñóíîê, öåíòðèðîâàííûé ïî ãîðèçîíòàëè,âíóòðü òàáëèöû ñî 100% øèðèíîé è âûñîòîé, êàê ïîêàçàíî â Ïðèìåðå 5.1.

Ïðèìåð 5.1. Öåíòðèðîâàíèå ðèñóíêà ïî âåðòèêàëè<table width="100%" height="100%"><tr><td align="center"><img src="images/title.gif" width="400" height="300"></td></tr></table>

Ïî âåðòèêàëè ÿ÷åéêó ìîæíî íå öåíòðèðîâàòü, ýòî ïîëîæåíèå çàäàåòñÿ ïîóìîë÷àíèþ, à ïî ãîðèçîíòàëè èñïîëüçóåòñÿ ïàðàìåòð align="center" òåãà TD.

6. ÂÛÐÀÂÍÈÂÀÍÈÅ ÝËÅÌÅÍÒÎÂ

Âûðàâíèâàÿ ðàçëè÷íûå ýëåìåíòû âåá-ñòðàíèöû ïî íåâèäèìîé ëèíèè, ìû òåìñàìûì çðèòåëüíî ñâÿçûâàåì èõ äðóã ñ äðóãîì. Òàêèå ýëåìåíòû, êàê òåêñò èãðàôè÷åñêèå èçîáðàæåíèÿ ñ ïîìîùüþ âûðàâíèâàíèÿ ìîæíî îáúåäèíèòü â îäíóãðóïïó, ïîêàçûâàÿ èõ ñâÿçü ìåæäó ñîáîé.

Âûðàâíèâàíèå ïî ãîðèçîíòàëèÇàäà÷à ñëåäóþùàÿ, íóæíî âûðîâíÿòü äâà èçîáðàæåíèÿ, íàõîäÿùèõñÿ íà îäíîé

ãîðèçîíòàëüíîé ëèíèè îäèí ïî ëåâîìó, à äðóãîé ïî ïðàâîìó êðàþ. ×åì è õîðîøèðèñóíêè, ÷òî ó íèõ åñòü ïàðàìåòð align, êîòîðûé âûðàâíèâàåò èçîáðàæåíèå ïîòîìó êðàþ, êîòîðîìó íàäî. Îäíîâðåìåííî çàäàâàÿ ó äâóõ ðèñóíêîâ îòáèâêó ïîëåâîìó è ïðàâîìó êðàþ, ïîëó÷èì íóæíûé ðåçóëüòàò (Ïðèìåð 6.1).

Ïðèìåð 6.1. Âûðàâíèâàíèå äâóõ ðèñóíêîâ ïî ñòîðîíàì<img src="sample1.gif" width="50" height="50" align="left"><img src="sample2.gif" width="50" height="50" align="right">


17www.htmlbook.ru

Îäíàêî, ýòîò ñïîñîá íå ëèøåí íåäîñòàòêîâ. Âî-ïåðâûõ, ÷òîáû äîáàâèòü ïîñëåðèñóíêîâ òåêñò, ïðèäåòñÿ âñòàâëÿòü ïåðåíîñû ñòðîê. È âî-âòîðûõ, âûðàâíèâàíèåïî âåðòèêàëè âñåãäà ïðîèñõîäèò òîëüêî ïî âåðõíåìó êðàþ. Áîëåå øèðîêèåâîçìîæíîñòè ïðåäîñòàâëÿþò â ýòîì ñìûñëå òàáëèöû, ïîçâîëÿÿ óñòàíàâëèâàòüèçîáðàæåíèÿ îòíîñèòåëüíî äðóã äðóãà â ëþáîì ïîðÿäêå.

Ïðèìåð 6.2. Èñïîëüçîâàíèå òàáëèöû äëÿ âûðàâíèâàíèÿ<table width="100%" border="0" cellspacing="0" cellpadding="4"><tr><td valign="bottom"><img src="sample1.gif" width="50" height="50"></td><td align="right" valign="bottom"><img src="sample2.gif" width="50"height="86"></td></tr></table>

Ïîëîæåíèå ïî âåðòèêàëè èçìåíÿåòñÿ ïàðàìåòðîì valign òåãà TD. Áëàãîäàðÿåìó, îáúåêòû ìîæíî âûðàâíèâàòü ïî âåðõíåìó, íèæíåìó êðàþ ëèáî ïîöåíòðàëüíîé îñè. Àòðèáóò align="left" ïèñàòü íåîáÿçàòåëüíî, îí çàäàåòñÿ ïîóìîë÷àíèþ. Ðàìêà òàáëèöû, åñòåñòâåííî, äåëàåòñÿ íåâèäèìîé òîëùèíîé íîëüïèêñåëîâ.

Òðåáóåòñÿ âûðîâíÿòü îäèí îáúåêò ïî öåíòðó âåá-ñòðàíèöû è îäíîâðåìåííîäðóãîé ïî ëåâîìó (èëè ïðàâîìó) êðàþ. Òàêîå ðàçìåùåíèå ÷àñòî èñïîëüçóåòñÿ ïðèïóáëèêàöèè ôîðìóë ñ íóìåðàöèåé (ðèñ. 6.2).

Ðèñ. 6.1. Âûðàâíèâàíèå ýëåìåíòîâ ñ ïîìîùüþ òàáëèöû

Ðèñ. 6.2. Âûðàâíèâàíèå ôîðìóëû è åå íîìåðà

(2.7)


18www.htmlbook.ru

Äëÿ òàêîãî ðàçìåùåíèÿ ýëåìåíòîâ, òðåáóåòñÿ ñîçäàòü òàáëèöó ñ òðåìÿÿ÷åéêàìè. Êðàéíèå èç íèõ äîëæíû èìåòü îäèíàêîâûå ðàçìåðû, â ñðåäíåé ÿ÷åéêåâûðàâíèâàíèå äåëàåòñÿ ïî öåíòðó, à â ïðàâîé, ïîíÿòíîå äåëî, ïî ïðàâîìó êðàþ(ïðèìåð. 6.3).

Ïðèìåð 6.3. Âûðàâíèâàíèå ïî öåíòðó è êðàþ<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="10%"> </td><td align="center"><img src="formula.gif" width="289"height="158"></td><td align=right width="10%">(2.7)</td></tr></table>

Òî÷íî òàêæå ïðè íåîáõîäèìîñòè ïîìåùàåòñÿ òåêñò è â ëåâóþ ÿ÷åéêó.

Âûðàâíèâàíèå ïî âåðòèêàëèÈ íà ýòîò ðàç òàáëèöû ïðèõîäÿò íàì íà ïîìîùü, ñîçäàâàÿ íåâèäèìóþ

ìîäóëüíóþ ñåòêó, â ÿ÷åéêàõ êîòîðîé ìîæíî ðàçìåùàòü ëþáûå ýëåìåíòû.Ðàñïîëàãàòü, ïðè÷åì, ìîæíî ïî ðàçíîìó, íàïðèìåð, êàê ïîêàçàíî íèæå. Â äàííîìñëó÷àå, çàãîëîâêè ðàñïîëàãàþòñÿ íà îäíîì óðîâíå, à òåêñò íà äðóãîì, êàêïîêàçàíî íà ðèñ. 6.3.

Ðèñ 6.3. Âûðàâíèâàíèå ýëåìåíòîâ ïî âåðòèêàëè

Êîä äëÿ äàííîãî ïðèìåðà ïðèâåäåí íèæå.


19www.htmlbook.ru

Ïðèìåð 6.4. Âûðàâíèâàíèå ïî âåðòèêàëè<table width="100%" cellspacing="0" cellpadding="0"><tr><td colspan="2"><b>Êàê ñèäåòü</b></td></tr><tr bgcolor="#000000"><td colspan="2"><img src="spacer.gif" width="1" height="1"></td></tr><tr><td width="20%"> </td><td><i>Ïðè ðàáîòå íà âû÷èñëèòåëüíîé òåõíèêå íåîáõîäèìî ñåñòüòàê, ÷òîáû ðóêè ñ ïðåäïëå÷üÿìè îáðàçîâûâàëè ïðÿìîé óãîë,ãëàçà ïîñòàâèòü íà ðàññòîÿíèå 30-40 ñì îò ðàáî÷åé ïîâåðõíîñòèìîíèòîðà.<br></i></td></tr><tr><td colspan="2"><b>Êàê íàáèðàòü</b></td></tr><tr bgcolor="#000000"><td colspan="2"><img src="spacer.gif" width="1" height="1"></td></tr><tr><td width="20%"> </td><td><i>Íàáèðàòü íà êëàâèàòóðå ñëåäóåò ïîäóøå÷êàìè ïàëüöåâêîðîòêèìè îòðûâèñòûìè óäàðàìè. Ïðåäåëüíî äîïóñòèìàÿ äëèíàíîãòåé äëÿ æåíùèí ñîñòàâëÿåò 12-15 ìì, äëÿ ìóæ÷èí 3-5ìì.</i></td></tr></table>

Òî÷íî òàêæå ìîæíî ðàçìåùàòü íå òîëüêî òåêñò, íî è ðèñóíêè è äðóãèå îáúåêòû.

7. ÂÅÐÒÈÊÀËÜÍÛÅ ËÈÍÈÈ

Âåðòèêàëüíûå ëèíèè èëè êàê èõ åùå íàçûâàþò íà òèïîãðàôñêèé ìàíåð,âåðòèêàëüíûå ëèíåéêè, ïðåêðàñíûé äåêîðàòèâíûé ýëåìåíò, êîòîðûé íàõîäèòïðèìåíåíèå â ìíîæåñòâå ðàçíûõ ñëó÷àåâ. Ïîìåùåííàÿ âîçëå òåêñòàâåðòèêàëüíàÿ ëèíèÿ ïðèâëåêàåò ê íåìó âíèìàíèå ÷èòàòåëÿ, ïîçâîëÿÿ òåì ñàìûìâûäåëÿòü íóæíûå àáçàöû èëè áëîêè òåêñòà. Âåðòèêàëüíûå ëèíèè ìîãóò òàêæåñëóæèòü äëÿ ðàçäåëåíèÿ êîëîíîê òåêñòà, ÷òîáû âçãëÿä ÷èòàòåëÿ íå ïåðåñêàêèâàëñ îäíîé êîëîíêè íà äðóãóþ è ÷åòêî îòäåëèòü îäíó êîëîíêó îò äðóãîé.

Äëÿ ñîçäàíèÿ âåðòèêàëüíîé ëèíèè ôèêñèðîâàííîé âûñîòû ìîæíîèñïîëüçîâàòü èçîáðàæåíèå íåîáõîäèìîãî öâåòà ðàçìåðîì 1 íà 1 ïèêñåë. Ïî÷åìóèìåííî 1 íà 1? Äà ýòî î÷åíü óäîáíî. Ðàçìåð ôàéëà íè÷òîæíî ìàë, çàòî åãî ìîæíîìàñøòàáèðîâàòü êàê óãîäíî (Ïðèìåð 7.1).


20www.htmlbook.ru

Ïðèìåð 7.1. Ëèíèÿ ñäåëàííàÿ ñ ïîìîùüþ ðèñóíêà 1 íà 1 ïèêñåë<img src="red1x1.gif" width="1" height="100" hspace="10"align="left">или для указания относительной высоты можно указать ее в процентах

<img src="red1x1.gif" width="1" height="50%" hspace="10"align="left">

Â ïðèìåðå, ôàéë ñ èìåíåì red1x1.gif ïðåäñòàâëÿåò ñîáîé ðèñóíîê, ñîñòîÿùèéèç îäíîãî ïèêñåëà êðàñíîãî öâåòà.

Äëÿ èçìåíåíèÿ öâåòà òàêîé ëèíèè ïðèäåòñÿ äåëàòü íîâûé ðèñóíîê â êàêîì-íèáóäü ãðàôè÷åñêîì ðåäàêòîðå. Êðîìå òîãî, âûñîòà ëèíèè ôèêñèðîâàíà è ååñëîæíî ïðèâÿçàòü ê òåêñòó, ÷òîáû îíà èçìåíÿëàñü âìåñòå ñ íèì. Â ýòîì ñëó÷àå,íà ïîìîùü íàì ïðèäåò òàáëèöà. Ñîçäàåì òàáëèöó, îäíà èç ÿ÷ååê êîòîðîé èìååòøèðèíó 1-2 ïèêñåëà. Ïàðàìåòðû cellpadding è border äîëæíû áûòü ðàâíû íóëþ,à cellspacing îïðåäåëÿåò ðàññòîÿíèå îò òåêñòà äî ëèíèè. À çàòåì â ýòîé ÿ÷åéêåóêàçûâàåì ôîí íóæíîãî öâåòà: <td width="1" bgcolor="#ff0000">

×òîáû òàêàÿ ëèíèÿ áûëà âèäíà â áðàóçåðå Netscape, â ÿ÷åéêó íóæíî ÷òî-íèáóäüïîìåñòèòü. Íåðàçäåëÿåìûé ïðîáåë äëÿ ýòîé öåëè íå î÷åíü ãîäèòñÿ, îíìîæåò ñäåëàòü ëèíèþ ñëèøêîì òîëñòîé, ÷òî íàì íå íóæíî. Ñàìîå èäåàëüíîå –ïðîçðà÷íûé ðèñóíîê ðàçìåðîì 1 íà 1 ïèêñåë (â ïðèìåðå 7.2 îí èìåíóåòñÿspacer.gif).

Ïðèìåð 7.2. Ëèíèÿ ñîçäàííàÿ ñ ïîìîùüþ òàáëèöû<table width="600" cellpadding="0" cellspacing="12" border="0"align="center"><tr><td width="4" bgcolor="#990000"><img src="spacer.gif" width="4"height="1"></td><td>Каждый из рефлексирующих субъектов виртуального мира можетнаходиться в двух основных состояниях: стационарном и мобильном, прикотором они или сводят передвижение в трехмерном Евклидовомпространстве с декартовой системой координат к абстрактномуминимуму, или ограничиваются формальными перемещениями массы внекоторой части пространственного континуума.</td></tr></table>

Ðèñ. 7.1. Ðåçóëüòàò âûïîëíåíèÿ ïðèìåðà 7.2.


21www.htmlbook.ru

Ýòèì æå ñàìûì ñïîñîáîì ìîæíî âîñïîëüçîâàòüñÿ äëÿ ñîçäàíèÿ äåêîðàòèâíûõëèíèé, íàïðèìåð, êàê íà ðèñóíêå 7.2 èëè 7.3.

Äëÿ ýòîãî â ÿ÷åéêó òàáëèöû ïîìåùàåì ôîíîâûé ðèñóíîê ñ ïîìîùüþ ïàðàìåòðàbackground òåãà TD.

Ïðèìåð 7.3. Äåêîðàòèâíûå âåðòèêàëüíûå ëèíèè ñ ïîìîùüþ òàáëèöû<table width="600" cellpadding="0" cellspacing="12" border="0"align="center"><tr><td width="4" background="line.gif"><img src="spacer.gif" width="4"height="1"></td><td>Каждый рефлексирующий субъект обладает набором знаний и имеетпозитивные возможности оказания влияния на информационное поле длявзаимодействия с субъектами виртуального мира, но в то же времянаделен плюралистическим мировоззрением, позволяющим ему принеобходимости достижения или сохранения собственных материальныхблаг пренебрегать законами логики и здравого смысла.</td></tr></table>

Ôàéë line.gif ïðåäñòàâëÿåò ñîáîé èçîáðàæåíèå ëèíèè, êàê, íàïðèìåð,ïîêàçàííîå íà ðèñ. 2.5.

Ðèñ. 7.2. Ðèñ. 7.3.

8. ÃÎÐÈÇÎÍÒÀËÜÍÛÅ ËÈÍÈÈ

Ãîðèçîíòàëüíûå ëèíèè, èëè, íà òèïîãðàôñêèé ìàíåð, ãîðèçîíòàëüíûåëèíåéêè õîðîøî èñïîëüçîâàòü äëÿ îòäåëåíèÿ îäíîãî áëîêà òåêñòà îò äðóãîãî.Íåáîëüøîé ïî ðàçìåðó òåêñò, ñâåðõó è ñíèçó êîòîðîãî ðàñïîëàãàþòñÿãîðèçîíòàëüíûå ëèíèè ïðèâëåêàåò áîëüøå, ÷åì îáû÷íî, âíèìàíèå ÷èòàòåëÿ.

Åñëè íóæíà ïðîñòàÿ, áåç çàòåé ëèíèÿ, ïðîùå âîñïîëüçîâàòüñÿ òåãîì HR.

Ïðèìåð ñîçäàíèÿ ãîðèçîíòàëüíûõ ëèíèé ñ ïîìîùüþ òåãà HR

Òàêàÿ ëèíèÿ, îäíàêî, ìîæåò èìåòü îòëè÷èÿ â ðàçíûõ áðàóçåðàõ.


22www.htmlbook.ru

Ïðèìåð 8.1. Ñîçäàíèå îáû÷íûõ ëèíèé ñ ïîìîùüþ òåãà HR<hr>Пример текста с обычными линиями<hr>

Ïî óìîë÷àíèþ ëèíèÿ îòðèñîâûâàåòñÿ òðåõìåðíàÿ, ÷òî íå âñåãäà âÿæåòñÿ ñäèçàéíîì ñàéòà. Ïîýòîìó, åñëè òðåáóåòñÿ ñäåëàòü ñïëîøíóþ ëèíèþ, ñëåäóåòäîáàâèòü ïàðàìåòð noshade òåãà HR.

Ïðèìåð 8.2. Ñîçäàíèå ñïëîøíîé ëèíèé<hr noshade size="2" width="300">Пример создания сплошных линий<hr noshade size="400">

Ïàðàìåòð size îïðåäåëÿåò òîëùèíó ëèíèè, à width åå äëèíó â ïèêñåëàõ èëèïðîöåíòàõ. Òàêàÿ ëèíèÿ âñåãäà ðàçìåùàåòñÿ ïî öåíòðó ýêðàíà, åñëè ååâûðàâíèâàíèå ñïåöèàëüíî íå çàäàåòñÿ.

Â êà÷åñòâå ãîðèçîíòàëüíûõ ëèíèé òàêæå ìîæíî èñïîëüçîâàòü ëþáîåïîäõîäÿùåå èçîáðàæåíèå, íàäî ëèøü ðàñòÿíóòü åãî äî íóæíîé øèðèíû. Íèæå, âêà÷åñòâå ðèñóíêà, èñïîëüçîâàëàñü íàðèñîâàííàÿ áóêâà Í.

Ðèñ. 8.1. Ãîðèçîíòàëüíàÿ ëèíèÿ èç ðèñóíêà

Ïðèìåð 8.3. Ñîçäàíèå ãîðèçîíòàëüíûõ ëèíèé èç ðèñóíêà<img src=line.gif width=100% height=10><br>Пример линии сделанной из рисунка 100% ширины

или

<img src=line.gif width=400 height=10><br>Пример линии сделанной из рисунка фиксированной ширины 400 пикселей.

Ïðè òàêîì ðàñòÿãèâàíèè ðèñóíêà â íåì îäíîçíà÷íî ïîÿâëÿþòñÿ èñêàæåíèÿ.Ñëåäîâàòåëüíî, ÷åì àáñòðàêòíåé ðèñóíîê, òåì ëó÷øå; ÷òîáû íèêòî íè÷åãî íåïîíÿë, ÷òî íà íåì èçîáðàæåíî.

×òî äåëàòü, åñëè íóæíà íå ñïëîøíàÿ ëèíèÿ, à, íàïðèìåð, ïóíêòèðíàÿ? Äëÿýòîãî ñëåäóåò âîñïîëüçîâàòüñÿ òàáëèöåé. Ñîçäàåì òàáëèöó ñîñòîÿùóþ èç îäíîéÿ÷åéêè è âñòàâëÿåì â íåå ôîíîâûé ðèñóíîê â âèäå ïóíêòèðíîé ëèíèè. Õèòðîñòüñîñòîèò â òîì, ÷òîáû â ÿ÷åéêå êðîìå ôîíà áûë åùå îäèí ðèñóíîê, èíà÷å âáðàóçåðåðå Netscape ìû ïðîñòî íè÷åãî íå óâèäèì. Â êà÷åñòâå òàêîãî ðèñóíêàòðàäèöèîííî èñïîëüçóåòñÿ ïðîçðà÷íûé GIF ðàçìåðîì 1 íà 1 ïèêñåë.


23www.htmlbook.ru

Ïðèìåð 8.4. Ñîçäàíèå ãîðèçîíòàëüíûõ ëèíèé ñ ïîìîùüþ òàáëèö<table border="0" background="dot.gif" width="100%" height="2"cellspacing="0" cellpadding="0"><tr><td><img src="spacer.gif" width="1" height="2"></td></tr></table>

Ôàéë dot.gif çàðàíåå ãîòîâèòñÿ â ãðàôè÷åñêîì ðåäàêòîðå è ìîæåò ïðåäñòàâëÿòü,íàïðèìåð, âîò òàêîé âîò ðèñóíîê

Åùå îäèí ïðèåì ñîçäàíèÿ ëèíèé îñíîâàí íà èñïîëüçîâàíèè ñòèëåé. Âìåñòîòàáëèöû, îïèñàííîé â ïðåäûäóùåì ïðèìåðå, èñïîëüçóåòñÿ òåã DIV:

<div class="dot"> </dot>

Ñàì êëàññ dot îïèñàí â òàáëèöå ñòèëåé ñëåäóþùèì îáðàçîì:.dot { width: 100%; background: URL(dot.gif) repeat-x; }

ãäå URL îïðåäåëÿåò èìÿ ðèñóíêà, à width – øèðèíó ëèíèè.

Ìîæíî â îïèñàíèå êëàññà çàëîæèòü åùå è âåðòèêàëüíûå îòñòóïû, ÷òî òîæåî÷åíü óäîáíî: margin-top: 10px; margin-bottom: 10px;

Ïðèìåð 8.5. Ñîçäàíèå ãîðèçîíòàëüíûõ ëèíèé ñ ïîìîùüþ ñòèëåé<html><head><style type="text/css">.dot { width: 100%; background: URL(dot.gif) repeat-x; }</style></head><body><div class="dot"> </div></body></html>

Äëÿ ñîçäàíèÿ ëèíèè ñ ïîìîùüþ ñòèëåé ìîæíî òàêæå âîñïîëüçîâàòüñÿïàðàìåòðîì border-bottom. Âîçìîæíûå âèäû ëèíèé ïîêàçàíû íà ðèñ. 3.6.

Ïðèìåð 8.6. Ñîçäàíèå ãîðèçîíòàëüíûõ ëèíèé ñ ïîìîùüþ ñòèëåé<html><head><style type="text/css">.dot { width: 100%; border-bottom: 1px dashed red }</style></head><body><div class="dot"> </div></body></html>

Â ïðèìåðå ñîçäàåòñÿ ïóíêòèðíàÿ ëèíèÿ êðàñíîãî öâåòà òîëùèíîé îäèí ïèêñåë.


24www.htmlbook.ru

9. ÑÎÇÄÀÍÈÅ ÊÎËÎÍÎÊ

Äâå è áîëåå êîëîíêè ïîçâîëÿþò ðàçáèòü äëèííûé òåêñò èëè äðóãîå ñîäåðæèìîåíà áëîêè. Â áóìàæíûõ èçäàíèÿ ðàçáèåíèå òåêñòà íà êîëîíêè ïðîäèêòîâàíîñîêðàùåíèåì øèðèíû òåêñòà, ïîñêîëüêó äëÿ ÷åëîâåêà ÷èòàòü ñòðîêó äëèíîéáîëåå 60 ñèìâîëîâ óòîìèòåëüíî. Ïðè ÷òåíèè íà áóìàãå ÷èòàòåëü ìîæåò îõâàòèòüñðàçó âåñü òåêñò è ëåãêî ïåðåéòè ñ êîíöà ïåðâîé êîëîíêè íà íà÷àëî âòîðîé. Íàâåá-ñòðàíèöå òàêîé ïîäõîä íå ïðèìåíÿåòñÿ, âåäü ïðèäåòñÿ ìîòàòü ñêðîëëáàðââåðõ-âíèç, ÷òî íåñêîëüêî íåóäîáíî. Âîò ïîýòîìó ñîçäàíèå êîëîíîê íà ñàéòåíóæíî äëÿ ðàçìåùåíèÿ ðàçíûõ íåçàâèñèìûõ áëîêîâ. Â ëåâîé, íàïðèìåð,ðóáðèêàòîð, â ïðàâîé –-íîâîñòè.

Êîëîíêè ëåãêî äåëàþòñÿ ñ ïîìîùüþ òàáëèöû ñ äâóìÿ ÿ÷åéêàìè. Íàäî òîëüêîçàäàòü ïàðàìåòð òàáëèöû cellpadding èëè cellspacing îòëè÷íûì îò íóëÿ, ÷òîáûñîõðàíèòü ðàññòîÿíèå ìåæäó êîëîíêàìè.

Ïðèìåð 9.1. Ñîçäàíèå äâóõ êîëîíîê ñ ïîìîùüþ òàáëèöû<table border="0" cellpadding="10" cellspacing="0"><tr> <td valign="top">1 колонка</td> <td valign="top">2 колонка</td></tr></table>

Ïî óìîë÷àíèþ ñîäåðæèìîå ÿ÷åéêè âûðàâíèâàåòñÿ ïî öåíòðó âåðòèêàëè,ïîýòîìó ÷òîáû â êîëîíêàõ âñå áûëî âûðîâíåíî ïî âåðõíåìó êðàþ, ñëåäóåòèñïîëüçîâàòü ïàðàìåòð ÿ÷åéêè valign="top",

Êàêîé ïàðàìåòð âûáðàòü – cellpadding èëè cellspacing çàâèñèò îò âêóñà èæåëàíèÿ. Â äàííîì ñëó÷àå àáñîëþòíî íèêàêîé ðàçíèöû íåò.

10. ÊÎËÎÍÊÈ Ñ ÐÀÇÄÅËÈÒÅËÅÌ

Äâå è áîëåå êîëîíêè ïîçâîëÿþò ðàçáèòü äëèííûé òåêñò èëè äðóãîå ñîäåðæèìîåíà áëîêè. Òàêèå áëîêè ðàçäåëÿþò ìåæäó ñîáîé âåðòèêàëüíîé ëèíèåé, ÷òîáûâçãëÿä ÷èòàòåëÿ íå ïåðåñêàêèâàë ñ îäíîé êîëîíêè íà äðóãóþ.

Êîëîíêè ñ ðàçäåëèòåëåì ñîçäàþòñÿ ñ ïîìîùüþ òàáëèöû ñ òðåìÿ ÿ÷åéêàìè.Ñðåäíþþ ÿ÷åéêó äåëàåì øèðèíîé 1-2 ïèêñåëà è çàëèâàåì êàêèì-íèáóäü öâåòîìñ ïîìîùüþ ïàðàìåòðà bgcolor – âîò è ïîëó÷èòñÿ ëèíèÿ. À ïàðàìåòð cellspacingîïðåäåëÿåò ðàññòîÿíèå ìåæäó ëèíèåé è òåêñòîì. Èñïîëüçîâàòü cellpadding âäàííîì ñëó÷àå íåëüçÿ, èíà÷å ëèíèÿ îêàæåòñÿ òîëùå, ÷åì íåîáõîäèìî.


25www.htmlbook.ru

Ïðèìåð 10.1. Ñîçäàíèå äâóõ êîëîíîê ñ ëèíèåé ìåæäó íèìè<table border="0" cellpadding="0" cellspacing="10"><tr> <td valign="top">1 колонка</td> <td width="1" bgcolor="#000000"><img src="spacer.gif" width="1"height="1"></td> <td valign="top">2 колонка</td></tr></table>

×òîáû ðàçäåëèòåëüíàÿ ëèíèÿ áûëà âèäíà â áðàóçåðå Netscape, â ÿ÷åéêó íóæíî÷òî-íèáóäü ïîìåñòèòü. Íåðàçäåëÿåìûé ïðîáåë äëÿ ýòîé öåëè íå ãîäèòñÿ,îí ìîæåò ñäåëàòü ëèíèþ áîëåå òîëñòîé, ÷òî íàì íå íóæíî. Ñàìîå èäåàëüíîå -ïðîçðà÷íûé ðèñóíîê ðàçìåðîì 1 íà 1 ïèêñåë (â ïðèìåðå îí íàçûâàåòñÿ spacer.gif).

11. ÏÎÄÐÈÑÓÍÎ×ÍÀß ÏÎÄÏÈÑÜ

Ïîäðèñóíî÷íàÿ íàäïèñü – òåêñò, ÿâëÿþùèéñÿ êîììåíòàðèåì ê ðèñóíêó è åãîîïèñûâàþùèé. Òàêàÿ ïîäïèñü âàæíà, ïîñêîëüêó ïðèâëåêàåò âíèìàíèå ÷èòàòåëÿê ðèñóíêó è äàåò áîëüøå èíôîðìàöèè îá èçîáðàæåíèè. Ó òåãà IMG ñóùåñòâóåò,êîíå÷íî, ïàðàìåòð alt, êîòîðûé çàäàåò òåêñò ïîäñêàçêè, íî ÷òîáû åå ïîëó÷èòüïðèõîäèòñÿ íàâîäèòü êóðñîð ìûøè íà êàæäûé ðèñóíîê, ÷òî äîâîëüíî íåóäîáíî.Áîëåå íàãëÿäíûé ñïîñîá è, ñîîòâåòñòâåííî, áîëåå ïðåäïî÷òèòåëüíûéçàêëþ÷àåòñÿ â ðàçìåùåíèè ïîäðèñóíî÷íîé íàäïèñè âîçëå ñàìîãî èçîáðàæåíèÿ.Ïîäïèñü õîòü è íàçûâàåòñÿ ïîäðèñóíî÷íîé, íî ìîæåò ðàñïîëàãàòüñÿ è ñáîêó îòðèñóíêà, åñëè ýòî ïðîäèêòîâàíî ñîîáðàæåíèÿìè âåðñòêè è äèçàéíà.

Äëÿ ðàçìåùåíèÿ íà âåá-ñòðàíèöå è ðèñóíêà è ïîäïèñè ê íåìó óäîáíåé âñåãîâîñïîëüçîâàòüñÿ òàáëèöåé. Â ýòîì ñëó÷àå ìîæíî çàäàòü öâåò êàåìêè âîêðóãðèñóíêà, åå öâåò, øèðèíó, à òàêæå ìåñòîïîëîæåíèå òåêñòà (ðèñ. 11.1).

Ðèñ. 11.1. Âàðèàíòû ðàçìåùåíèÿ ïîäðèñóíî÷íîé íàäïèñè


26www.htmlbook.ru

Ïðèìåð 11.1. Ñîçäàíèå ïîäðèñóíî÷íîé íàäïèñè ñ ïîìîùüþ òàáëèöû<table width="100" border="0" cellspacing="0" cellpadding="4"bgcolor="#CC9900" align="center"><tr> <td><img src="figure.jpg" width="100" height="111"></td></tr><tr> <td>Пример подрисуночной подписи</td></tr></table>

Øèðèíà òàáëèöû îïðåäåëÿåòñÿ èñõîäÿ èç ðàçìåðîâ ðèñóíêà è æåëàíèé àâòîðà.Â äàííîì ïðèìåðå øèðèíà òàáëèöû ñîâïàäàåò ñ øèðèíîé ðèñóíêà; øèðèíàöâåòíîé ðàìêè âîêðóã èçîáðàæåíèÿ çàäàåòñÿ ñ ïîìîùüþ ïàðàìåòðà cellpaddingèëè cellspacing. Â äàííîì ñëó÷àå àáñîëþòíî âñå ðàâíî, ÷òî ïðåäïî÷åñòü, ðåçóëüòàòáóäåò îäèí. Öâåò òàáëèöû, óêàçàííûé ïàðàìåòðîì bgcolor, îïðåäåëÿåò öâåòïîäëîæêè âîêðóã èçîáðàæåíèÿ è ïîäïèñè ê íåìó.

Âûøå ïðåäñòàâëåí ïðîñòîé âàðèàíò, êîãäà ðèñóíîê ñ ïîäïèñüþ ðàçìåùåí ïîöåíòðó ñòðàíèöû. Åñëè æå íåîáõîäèìî ïîìåñòèòü íàøó êîíñòðóêöèþ â òåêñò÷òîáû îí åå îáòåêàë, â ýòîì ñëó÷àå ìîæíî âîñïîëüçîâàòüñÿ ñâîéñòâîì òàáëèöûalign=left | right. Ýòî ñâîéñòâî âûðàâíèâàåò òàáëèöó ïî ëåâîìó èëè ïðàâîìó êðàþñòðàíèöû. Âñå áû íè÷åãî, äà âîò îòñòóïû îò êðàÿ òàáëèöû äî òåêñòà, êàê â òåãåIMG, íå ïðåäóñìîòðåíû. Ïîëó÷àåòñÿ î÷åíü íåêðàñèâî, êîãäà òåêñò ñëîâíîíàåçæàåò íà íàø ðèñóíîê. Ñòðàäàþò ïðèíöèïû äèçàéíà è ïðîñòîé çäðàâûéñìûñë ïîäñêàçûâàåò, ÷òî ÷èòàòü òàêîé òåêñò îé êàê íåëåãêî. Íàì íàäî ïîëó÷èòüîòñòóïû âîêðóã òàáëèöû, è äëÿ ýòîãî ñëåäóåò âîñïîëüçîâàòüñÿ âëîæåííûìèòàáëèöàìè. Ñîçäàåì òàáëèöó, âûðîâíåííóþ ïî ëåâîìó èëè ïðàâîìó êðàþ, òîé æåøèðèíû, ÷òî è ðèñóíîê, à ïàðàìåòð cellpadding áóäåò îïðåäåëÿòü ðàññòîÿíèå îòòåêñòà äî òàáëèöû.

Ïðèìåð 11.2. Ñîçäàíèå îòñòóïîâ âëîæåííûìè òàáëèöàìè<table width="100" border="0" cellspacing="0" cellpadding="6"align="left"><tr> <td> <table width="100" border="0" cellspacing="0" cellpadding="4"bgcolor="#CC9900"> <tr> <td><img src="figure.jpg" width="100" height="111"></td> </tr> <tr> <td>Пример подрисуночной надписи</td> </tr> </table> </td></tr></table>


27www.htmlbook.ru

12. ÑÎÇÄÀÍÈÅ ÁÓÊÂÈÖÛ

Áóêâèöà ÿâëÿåòñÿ õóäîæåñòâåííûì ïðèåìîì îôîðìëåíèÿ òåêñòà èïðåäñòàâëÿåò ñîáîé óâåëè÷åííóþ ïåðâóþ áóêâó, áàçîâàÿ ëèíèÿ êîòîðîéíèæå íà îäíó èëè íåñêîëüêî ñòðîê áàçîâîé ñòðîêè îñíîâíîãî òåêñòà.

Áóêâèöà ïðèâëåêàåò âíèìàíèå ÷èòàòåëÿ ê íà÷àëó òåêñòà, îñîáåííî åñëè ñòðàíèöàëèøåíà äðóãèõ ÿðêèõ äåòàëåé. Îáû÷íî êðîìå ñàìîãî ñèìâîëà èñïîëüçóþòñÿèçîáðàæåíèÿ ðàñòåíèé, æèâîòíûõ è äðóãèõ îáúåêòîâ. Ýòî êîíå÷íî íåîáÿçàòåëüíî, íî ìîæåò ïðèäàòü îïðåäåëåííûé íàñòðîé ñîäåðæàíèþ. Åñëèõî÷åòñÿ èìåííî òàê ñäåëàòü íà ñàéòå, ëó÷øå âñåãî äëÿ ýòîãî ïîäîéäåò ðèñóíîêâûðîâíåííûé ïî ëåâîìó êðàþ.

Ïðèìåð 12.1. Ñîçäàíèå áóêâèöû ñ ïîìîùüþ ðèñóíêà<img src="n.gif" width="50" height="50" align="left" vspace="2"hspace="2">еобходимо, манипулируя полученными предметамиматериального мира и фрагментами информационного поля, эмпирическимпутем достигнуть логического завершения конкурса.

Îòñòóï îò áóêâèöû äî òåêñòà çàäàåòñÿ ïàðàìåòðàìè vspace – ïî âåðòèêàëè èhspace – ïî ãîðèçîíòàëè.

Äîñòîèíñòâà èñïîëüçîâàíèÿ ðèñóíêîâ â êà÷åñòâå áóêâèöû ñëåäóþùèå:ïðèìåíåíèå ëþáîãî øðèôòà è ðàçíûõ ýôôåêòîâ, ïðîñòîòà ìåòîäà, à òàêæåâîçìîæíîñòü èñïîëüçîâàíèÿ â êà÷åñòâå ôîðìàòà àíèìèðîâàííûé GIF, ÷òî äàåòäîïîëíèòåëüíûå âîçìîæíîñòè îôîðìëåíèÿ. Íåäîñòàòêè: åñëè áóêâèöà íà ñàéòåïðèìåíÿåòñÿ äîâîëüíî ÷àñòî, ïðèäåòñÿ ïîäãîòîâèòü ìíîæåñòâî ðèñóíêîâ ðàçíûõáóêâ; óñëîæíÿåòñÿ âîçìîæíîñòü ðåäàêòèðîâàíèÿ òåêñòà, òàê êàê ïðèäåòñÿ âìåñòîïðîñòîãî èçìåíåíèÿ áóêâû âñòàâëÿòü äðóãîé ðèñóíîê. Íèæå îïèñàíî, êàê äåëàòüáóêâèöó òåêñòîì.

Äëÿ òîãî, ÷òîáû òåêñò îãèáàë ïåðâóþ áóêâó, êàê ïîêàçàíî íà ðèñ. 12.1, ååíåîáõîäèìî ïîìåñòèòü â ÿ÷åéêó òàáëèöû, âûðîâíåííóþ ïî ëåâîìó êðàþ.

Ðèñ. 12. 1. Áóêâèöà â òåêñòå

Ïðèìåð 12.2. Áóêâèöà â âèäå òåêñòà<table align="left" border="0" cellspacing="0" celpadding="0"><tr><td><font size="7">"Д</font></td></tr></table>имон, у тебя есть что-нибудь похожее на транплюкатор?". "Чтозначит похожее?!" - восклицает в ответ Дима - "У меня есть самыйнастоящий транплюкатор!". С этими словами лезет на балкон и достаетоттуда такую штуку, при виде которой сразу понимаешь - Он.

Ïðè æåëàíèè ìîæíî èçìåíèòü öâåò ôîíà è ðàìêè ïàðàìåòðàìè bgcolor èbordercolor. Îòñòóïû îò áóêâèöû äî òåêñòà óïðàâëÿþòñÿ çíà÷åíèåì cellpadding


28www.htmlbook.ru

èëè cellspacing. Äëÿ èçìåíåíèÿ ðàçìåðà è øðèôòà ñèìâîëà òàêæå èñïîëüçóþòñÿñòèëè. Â ýòîì ñëó÷àå êîä HTML áóäåò íåçíà÷èòåëüíî îòëè÷àòüñÿ.

Ïðèìåð 12.3. Èñïîëüçîâàíèå ñòèëåé<html><head><style type="text/css">.letter { font-family: Arial; font-size: 24pt; color: navy }</style></head>

<body><table align="left" border="0" cellspacing="0" celpadding="0"><tr><td><span class="letter">"Д</span></td></tr></table>имон, у тебя есть что-нибудь похожее на транплюкатор?". "Чтозначит похожее?!" - восклицает в ответ Дима - "У меня есть самыйнастоящий транплюкатор!". С этими словами лезет на балкон и достаетоттуда такую штуку, при виде которой сразу понимаешь - Он.</body></html>

Íè÷òî íå ìåøàåò ðàñïîëîæèòü áóêâèöó ñëåâà, ÷åòêî îòäåëèâ åå îò îñíîâíîãîòåêñòà. Òàêèì îáðàçîì ìîæíî äîáèòüñÿ ïðîñòîãî âûðàçèòåëüíîãî ýôôåêòà (ðèñ.12.2).

Ðèñ. 12.2. Áóêâèöà íà ïîëå

Äëÿ ðàçìåùåíèÿ áóêâèöû ýòèì ñïîñîáîì íåîáõîäèìî ñîçäàòü òàáëèöó ñ äâóìÿÿ÷åéêàìè, â ëåâîé ðàñïîëîæèòü ïåðâûé ñèìâîë, à â ïðàâîé îñòàëüíîé òåêñò.

Ïðèìåð 12.4. Áóêâèöà íà ïîëå<table width="100%" border="0"><tr><td valign="top"><font size="7">В</font>или<span class="letter">В</span>или<img src="v.gif" width="50" height="50"></td><td valign="top">ыдалась у меня свободная минутка, открыл я любимыйLINES , сижу, строю пятерки и тихо наслаждаюсь. Заходит девочка иначинает меня строить: дескать, LINES - это игра детсадовская, ит.п. "А ты во что играешь?", - спрашиваю очаровательную девочку."Конечно, в Quake", - говорит она, - "там такое мясо"!</td></tr></table>

Îáðàòèòå âíèìàíèå, ñîäåðæèìîå îáîèõ ÿ÷ååê âûðàâíèâàåòñÿ ïî âåðõíåìóêðàþ ïàðàìåòðîì valign="top".


29www.htmlbook.ru

13. ÎÒÑÒÓÏ ÏÅÐÂÎÉ ÑÒÐÎÊÈ

Èñïîëüçîâàíèå êðàñíîé ñòðîêè ñ îòñòóïîì â 2-5 ïðîáåëà ïîâûøàåò ÷èòàåìîñòüòåêñòà, ïîçâîëÿÿ ëåãêî îòûñêèâàòü âçãëÿäîì íà÷àëî ñëåäóþùåãî àáçàöà. Â HTMLëþáîå êîëè÷åñòâî ïðîáåëîâ çàìåíÿåòñÿ îäíèì, â ýòîì ñëó÷àå ñòîèò èñïîëüçîâàòüäðóãîé ñèìâîë – .

Ïðèìåð 13.1. Ñîçäàíèå îòñòóïà íåðàçäåëèìûì ïðîáåëîì Сварить на медленном огне воду. Положить в неенебольшого червяка, лучше живого, но сойдет и так, мелко покрошенноеяблоко, крылышко мотылька и жабу. Соль и сахар по вкусу. Поготовности перелить в бутылки. Хранить в прохладном месте.

Ñëåäóþùèé ñïîñîá òàêæå èìååò ïðàâî íà ñóùåñòâîâàíèå. Âìåñòî ñèìâîëîâïðîáåëà íàäî ïîñòàâèòü íåâèäèìûé ðèñóíîê íóæíîé øèðèíû.

Ïðèìåð 13.2. Ñîçäàíèå îòñòóïà ïðîçðà÷íûì ðèñóíêîì<img src="empty.gif" width="20" height="1">Сварить на медленном огневоду. Добавить в нее хлива и хрольва. Довести до кипения.

Â êà÷åñòâå ðèñóíêà ìîæíî èñïîëüçîâàòü ïðîçðà÷íûé ðèñóíîê â ôîðìàòå GIFðàçìåðîì 1 íà 1 ïèêñåë.

È, íàêîíåö, âñåãäà ìîæíî âîñïîëüçîâàòüñÿ ñòèëÿìè. Ïàðàìåòð text-indentçàäàåò îòñòóï ïåðâîé ñòðîêè òåêñòà. Îòñòóï ìîæíî óêàçûâàòü â ïóíêòàõ (pt),ïèêñåëàõ (px), äþéìàõ (in), ìèëëèìåòðàõ (mm) è äð.

Ïðèìåð 13.3. Ñîçäàíèå îòñòóïà ñ ïîìîùüþ ñòèëåé<html><head><style type="text/css">p { text-indent: 20 px }</style></head><body><p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слитьохлажденную смесь в фужер. Пить залпом.</p></body></html>

Êîíå÷íî, èñïîëüçîâàíèå ñòèëåé áîëåå óíèâåðñàëüíî, âäîáàâîê ìåíååîáðåìåíèòåëüíî. Îäíàêî ïðèìåíåíèå ñèìâîëîâ ÿâëÿåòñÿ áîëåå ïðîñòûì,íàäåæíûì è íåçàâèñèìûì îò áðàóçåðà ñïîñîáîì. Ïðè èñïîëüçîâàíèè æå âêà÷åñòâå îòñòóïà íåâèäèìîãî ðèñóíêà åñòü îïàñíîñòü, ÷òî ïîëüçîâàòåëü îòêëþ÷èëçàãðóçêó èçîáðàæåíèé, òîãäà âìåñòî îòñòóïà áóäåò ïîêàçûâàòüñÿ íåêðàñèâàÿïîëîñà. Â êîíå÷íîì èòîãå, êàêîé ìåòîä ïðåäïî÷åñòü – ðåøàòü âàì.


30www.htmlbook.ru

14. ÎÒÑÒÓÏÛ ÍÀ ÂÅÁ-ÑÒÐÀÍÈÖÅ

Ãîðèçîíòàëüíûå è âåðòèêàëüíûå îòñòóïû îò êðàÿ áðàóçåðà äî ñîäåðæèìîãî âåá-ñòðàíèöå âñòðîåíû â áðàóçåð ïî óìîë÷àíèþ. Òåì íå ìåíåå ìîæíî èçìåíÿòüçíà÷åíèå ýòèõ ïàðàìåòðîâ, äåëàÿ îòñòóïû ïî æåëàíèþ áîëüøå èëè ìåíüøå.Õèòðîñòü çàêëþ÷àåòñÿ â òîì, ÷òî Internet Explorer è Netscape èìåþò ðàçíûåïàðàìåòðû äëÿ óêàçàíèÿ çíà÷åíèÿ îòñòóïîâ. Ó Internet Explorer â òåãå BODYñëåäóåò óêàçûâàòü ïàðàìåòð leftmargin äëÿ ãîðèçîíòàëüíîãî îòñòóïà è topmarginäëÿ âåðòèêàëüíîãî, à â Netscape òå æå ôóíêöèè âûïîëíÿþò ïàðàìåòðûmarginwidth è marginheight. Îáúåäèíÿÿ âñå ïàðàìåòðû âîåäèíî, ïîëó÷èìóíèâåðñàëüíûé êîä, êîòîðûé áóäåò ðàáîòàòü âî âñåõ áðàóçåðàõ îäèíàêîâî.

Ïðèìåð 14.1. Èçìåíåíèå âåëè÷èíû îòñòóïîâ<body bgcolor="#FFFFFF" text="#000000" leftmargin="20"topmargin="20" marginwidth="20" marginheight="20">

×àñòåíüêî îòñòóïû âîîáùå óáèðàþò, äåëàÿ èõ ðàâíûìè íóëþ. Òîãäà ðàáî÷ååïîëå ñòàíîâèòñÿ áîëüøå ðàçìåðîì, à èñïîëüçóåìûå ðèñóíêè è òàáëèöû,âûðàâíåííûå ïî êðàþ, ðàñïîëàãàþòñÿ «ïîä îáðåç». Íèæå ïðèâåäåí ïðèìåðñîçäàíèÿ òàáëèöû 100% øèðèíû áåç ïóñòîãî ïðîñòðàíñòâà ìåæäó êðàåì áðàóçåðàè òàáëèöîé.

Ïðèìåð 14.2. Îòñóòñòâèå îòñòóïîâ íà âåá-ñòðàíèöå<html><body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"marginwidth="0" marginheight="0">

<table width="100%" border="0" cellspacing="0" cellpadding="0"height="100"><tr><td bgcolor="#CC6600"> </td></tr></table></body></html>

Documents

«Приемы верстки Web-страниц» В. Мержевич