Приемы верстки веб-страниц

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

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

Ïðèåìû âåðñòêè

âåá-ñòðàíèö

www.htmlbook.ru

1

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

ÑÎÄÅÐÆÀÍÈÅ Âñòóïëåíèå ................................................................................................... 3 Áëàãîäàðíîñòè .............................................................................................. 3 Ïîääåðæêà .................................................................................................... 3 1. ÎÑÎÁÅÍÍÎÑÒÈ ÂÅÐÑÒÊÈ ÂÅÁ-ÑÒÐÀÍÈÖ ............................................... 4 2. ÈÑÏÎËÜÇÎÂÀÍÈÅ ÔÎÍÎÂÎÃÎ ÐÈÑÓÍÊÀ .............................................. 6 3. ÑÎÇÄÀÍÈÅ ÐÀÌÎÊ ................................................................................... 9 4. ÂÛÐÀÂÍÈÂÀÍÈÅ ÏÎ ÖÅÍÒÐÓ .................................................................14 5. ÖÅÍÒÐÈÐÎÂÀÍÈÅ ÏÎ ÂÅÐÒÈÊÀËÈ .........................................................16 6. ÂÛÐÀÂÍÈÂÀÍÈÅ ÝËÅÌÅÍÒΠ...............................................................16 7. ÂÅÐÒÈÊÀËÜÍÛÅ ËÈÍÈÈ ........................................................................ 19 8. ÃÎÐÈÇÎÍÒÀËÜÍÛÅ ËÈÍÈÈ ...................................................................21 9. ÑÎÇÄÀÍÈÅ ÊÎËÎÍÎÊ ............................................................................. 24 10. ÊÎËÎÍÊÈ Ñ ÐÀÇÄÅËÈÒÅËÅÌ ...............................................................24 11. ÏÎÄÐÈÑÓÍÎ×ÍÀß ÏÎÄÏÈÑÜ ............................................................... 25 12. ÑÎÇÄÀÍÈÅ ÁÓÊÂÈÖÛ ...........................................................................27 13. ÎÒÑÒÓÏ ÏÅÐÂÎÉ ÑÒÐÎÊÈ ..................................................................... 29 14. ÎÒÑÒÓÏÛ ÍÀ ÂÅÁ-ÑÒÐÀÍÈÖÅ ...............................................................30

www.htmlbook.ru

2

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

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

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

Ïîääåðæêà Âàøè çàìå÷àíèÿ, ïðåäëîæåíèÿ è âîïðîñû ïî êíèãå íàïðàâëÿéòå àâòîðó ïî àäðåñó ýëåêòðîííîé ïî÷òû [email protected]. Âñå îïèñàííûå â êíèãå ìàòåðèàëû è ïðèìåðû ìîæíî ïîñìîòðåòü â Èíòåðíåòå íà ñàéòå àâòîðà ïî àäðåñó: http://www.htmlbook.ru/layout Èñïðàâëåíèÿ è äîïîëíåíèÿ ïî êíèãå, à òàêæå íîâûå âåðñèè äîñòóïíû ïî àäðåñó: http://www.htmlbook.ru/book

www.htmlbook.ru

3

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

1. ÎÑÎÁÅÍÍÎÑÒÈ ÂÅÐÑÒÊÈ ÂÅÁ-ÑÒÐÀÍÈÖ Ïðè âåðñòêå âåá-ñàéòà, íåñìîòðÿ íà íåêîòîðóþ àíàëîãèþ åãî ñ ïå÷àòíûìè èçäàíèÿìè, ñëåäóåò âñå æå ïîìíèòü, ÷òî ìû èìååì äåëî ñ êîìïüþòåðíûì òåêñòîì, êîòîðûé çàâèñèò îò ðÿäà ôàêòîðîâ. Ó÷åò ýòèõ îñîáåííîñòåé íåîáõîäèì äëÿ ñîçäàíèÿ óäîáíûõ äëÿ âîñïðèÿòèÿ è ïîëüçîâàíèÿ ìàòåðèàëîâ, êîòîðûå áóäóò âûãëÿäåòü îäèíàêîâî â ðàçëè÷íûõ áðàóçåðàõ.

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

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

www.htmlbook.ru

4

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

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

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

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

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

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

www.htmlbook.ru

5

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

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

2. ÈÑÏÎËÜÇÎÂÀÍÈÅ ÔÎÍÎÂÎÃÎ ÐÈÑÓÍÊÀ Èñïîëüçóÿ ôîíîâûé ðèñóíîê âåá-ñòðàíèöû èëè òàáëèöû ìîæíî ñîçäàâàòü ðàçëè÷íûå ãðàôè÷åñêèå ýôôåêòû íà ñàéòå, íàïðèìåð, âåðòèêàëüíûå è ãîðèçîíòàëüíûå ëèíèè, òåíè, ïîëîñêè è ìíîãîå äðóãîå.

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

Ðèñ. 2.1. Ôîíîâûé ðèñóíîê äëÿ ðàçëè÷íûõ ðàçðåøåíèé ìîíèòîðà  èòîãå ïîëó÷èì ñòðàíèöó, ó êîòîðîé ïî ëåâîìó êðàþ èäåò äåêîðàòèâíàÿ ïîëîñà (ðèñ. 2.2).

www.htmlbook.ru

6

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

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

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

Ðèñ. 2.4. Ôîíîâûé ðèñóíîê äëÿ ÿ÷åéêè òàáëèöû Êîä äëÿ äàííîãî èñïîëüçîâàíèÿ òàáëèöû ñ ôîíîì ïðèâåäåí â Ïðèìåðå 2.1. Ïðèìåð 2.1. Ñîçäàíèå ôîíà ñ ïîìîùüþ òàáëèöû

Меню

Текст

www.htmlbook.ru

7

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

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

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

При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной.

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

www.htmlbook.ru

8

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

3. ÑÎÇÄÀÍÈÅ ÐÀÌÎÊ Èíôîðìàöèÿ îáâåäåííàÿ ðàìêîé ïîçâîëÿåò îòäåëèòü îäèí ìàòåðèàë íà âåáñòðàíèöå îò äðóãîãî è ïðèâëå÷ü âíèìàíèå ÷èòàòåëÿ. Êðîìå òîãî, ðàìêà âíîñèò ýëåãàíòíîñòü â îôîðìëåíèå ñàéòà. Äëÿ ñîçäàíèÿ ðàìîê ïðèìåíÿåòñÿ íåñêîëüêî ñïîñîáîâ, èõ êîòîðûõ áîëüøàÿ ÷àñòü èñïîëüçóåò ñâîéñòâà òàáëèö. Ñòèëè äîïîëíÿþò âîçìîæíîñòè òàáëèö è ïîçâîëÿþò ñäåëàòü ðàìêè ðàçíûõ âèäîâ ïðîñòûìè ñðåäñòâàìè. Íèæå ïðèâîäÿòñÿ ðàñïðîñòðàíåííûå ïðèåìû ïîëó÷åíèÿ ðàìîê, êîòîðûå ìîæíî âñòðåòèòü ïîâñåìåñòíî íà ðàçíûõ ñàéòàõ.

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

Netscape

Opera

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

Содержимое

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

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

www.htmlbook.ru

9

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

Содержимое

 âåðõíåé òàáëèöå óñòàíàâëèâàåì øèðèíó è âûñîòó òàáëèöû ïî æåëàíèþ, ïàðàìåòðîì bgcolor çàäàåì öâåò ðàìêè, cellspacing ïðèñâàèâàåì íóëþ, à cellpadding óïðàâëÿåò òîëùèíîé ãðàíèöû. ×åì ýòîò ïàðàìåòð áîëüøå, òåì òîëùå áóäåò è ðàìêà. Äëÿ âíóòðåííåé òàáëèöû íàäî îáÿçàòåëüíî çàäàòü åå öâåò, îòëè÷íûé îò öâåòà âíåøíåé, ñîâïàäàþùèé ñ öâåòîì ôîíà âåá-ñòðàíèöû, â ïðèìåðå, íàïðèìåð, çàäàí áåëûé. Ïàðàìåòð cellspacing èëè cellpading (â äàííîì ñëó÷àå áåç ðàçíèöû êàêîé èñïîëüçîâàòü) îïðåäåëÿåò ðàññòîÿíèå îò ãðàíèöû ðàìêè äî ñîäåðæèìîãî òàáëèöû. Øèðèíà è âûñîòà âíóòðåííåé òàáëèöû îáÿçàòåëüíî äîëæíû ñîâïàäàòü ñ øèðèíîé è âûñîòîé âíåøíåé òàáëèöû. Çàìå÷àíèå: Ïåðåíîñ ñòðîêè â òåêñòå êîäà HTML àâòîìàòè÷åñêè äîáàâëÿåò ïðîáåë. Åñëè ðàìêà â íåêîòîðûõ ìåñòàõ ïîëó÷àåòñÿ òîëùå, ÷åì çàäóìàíî, ñëåäóåò óáðàòü ëèøíèå ïðîáåëû ìåæäó òåãàìè è òåì ñàìûì ñîêðàòèòü êîëè÷åñòâî ñòðîê.

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

Ðèñ. 3.2

www.htmlbook.ru

Ðèñ. 3.3

10

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

	Содержимое

 äàííîì ïðèìåðå äåëàåòñÿ êðàñíàÿ ðàìêà òîëùèíîé 2 ïèêñåëà, îíà ñìîòðèòñÿ íàèáîëåå ýëåãàíòíî. Ïàðàìåòðû òàáëèöû cellspacing è cellpadding ïðèðàâíèâàþòñÿ íóëþ, ÷òîáû ðàìêà îñòàâàëàñü íóæíîé òîëùèíû è áåç çàçîðîâ. Åñëè ïîìåñòèòü âíóòðü òàêîé òàáëèöû òåêñò, îí áóäåò ïëîòíî ïðèëåãàòü ê ðàìêå, ÷òî íåêðàñèâî è ïëîõî ÷èòàåòñÿ. ×òîáû äîáàâèòü îòñòóïû ìîæíî ñîçäàòü äëÿ ýòîé öåëè äîïîëíèòåëüíûå ÿ÷åéêè, èñïîëüçîâàòü âëîæåííóþ òàáëèöó èëè âîñïîëüçîâàòüñÿ ñòèëÿìè. Çàìå÷àíèå: Ïðèâåäåííûé ñïîñîá ÷óâñòâèòåëåí ê ðàçíûì ïàðàìåòðàì, ïîýòîìó, â ñëó÷àå íåïðàâèëüíîé îòðèñîâêè ðàìêè ñëåäóåò ïðîâåðèòü ñëåäóþùåå: • åñëè ðàçìåð òàáëèöû çàäàåòñÿ â ïèêñåëàõ, íàäî çàäàòü ôèêñèðîâàííûå ðàçìåðû âñåõ ÿ÷ååê; • êîãäà øèðèíà òàáëèöû óêàçàíà â ïðîöåíòàõ, âíóòðè ðàìêè íóæíî ïîìåñòèòü òåêñò, êîòîðûé «ðàñïèðàåò» âíóòðåííþþ ÿ÷åéêó äî íóæíîé øèðèíû; ïðè îòñóòñòâèè òåêñòà èëè äðóãîãî ñîäåðæèìîãî âíóòðè òàáëèöû ñ ðàìêîé, åå øèðèíà îêàæåòñÿ ãîðàçäî øèðå æåëàåìîé; • â ÿ÷åéêàõ, ãäå ïðîõîäèò ðàìêà, íå äîëæíî áûòü íèêàêèõ ñèìâîëîâ íåðàçäåëÿåìîãî ïðîáåëà ( ), ÷òî òàê ëþáÿò àâòîìàòè÷åñêè äîáàâëÿòü íåêîòîðûå ðåäàêòîðû âåá-ñòðàíèö; • ïåðåíîñ ñòðîêè àâòîìàòè÷åñêè äîáàâëÿåò â òåêñò ïðîáåë, ïîýòîìó ìåæäó îòêðûâàþùèì è çàêðûâàþùèì òåãàìè è òåêñò ñëåäóåò ïèñàòü â îäíó ñòðîêó, ÷òîáû íå áûëî çàçîðîâ ìåæäó ÿ÷åéêàìè.

www.htmlbook.ru

11

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

Äåêîðàòèâíàÿ ðàìêà Äëÿ ñîçäàíèÿ æåëàåìîé ðàìêè åå íåîáõîäèìî ïðåäâàðèòåëüíî íàðèñîâàòü â êàêîì-íèáóäü ãðàôè÷åñêîì ðåäàêòîðå. Íà ðèñ. 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 è â åå ÿ÷åéêàõ ðàçìåùàåì ñîçäàííûå ðèñóíêè.

www.htmlbook.ru

12

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

	Содержимое

 òàáëèöå ïàðàìåòðû border, cellspacing è cellpadding äîëæíû áûòü ðàâíû íóëþ, èíà÷å ëèíèè íå áóäóò ñîñòûêîâûâàòüñÿ ìåæäó ñîáîé. Óãîëêè âñòàâëÿåì êàê îáû÷íûå ðèñóíêè ñ ïîìîùüþ òåãà IMG, à âîò ãîðèçîíòàëüíûå è âåðòèêàëüíûå ëèíèè ñëåäóåò çàäàâàòü ñ ïîìîùüþ ôîíà ÿ÷åéêè òàáëèöû, ïàðàìåòðîì background. Ýòî ïîçâîëèò ñäåëàòü íàøó ðàìêó ìàñøòàáèðóåìîé è ðàçìåð åå áóäåò èçìåíÿòüñÿ â çàâèñèìîñòè îò ñîäåðæèìîãî. ×òîáû ëèíèè ïëîòíî ïðèëåãàëè äðóã ê äðóãó è ìåæäó íèìè íå áûëî ïðîáåëîâ íàäî îáÿçàòåëüíî óêàçûâàòü âñå ðàçìåðû ÿ÷ååê è ðèñóíêîâ.  ÿ÷åéêàõ, ãäå ôîíîì ðàçìåùàþòñÿ ãîðèçîíòàëüíûå è âåðòèêàëüíûå ëèíèè, íåîáõîäèìî ïîìåñòèòü ðàñïîðêó – ýòî ëèáî ïðîáåë, ëèáî ïðîçðà÷íûé ðèñóíîê ôîðìàòà GIF ðàçìåðîì 1 íà 1 ïèêñåë (â ïðèìåðå ôàéë íàçûâàåòñÿ spacer.gif). Äåëàåòñÿ ýòî äëÿ òîãî, ÷òîáû îáìàíóòü áðàóçåð Netscape, êîòîðûé íå ïîêàçûâàåò ñîäåðæèìîå ÿ÷åéêè, åñëè îíà ïóñòà. Ïðèâåäåííûé ñïîñîá ïîçâîëÿåò ñîçäàâàòü ðàìêè ïðàêòè÷åñêè ëþáîãî âèäà.

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

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

www.htmlbook.ru

13

Âëàä Ìåðæåâè÷. Ïðèåìû âåðñòêè âåá-ñòðàíèö Ïåðâûå äâå òèïà ðàìîê – dotted è dashed ïîääåðæèâàþòñÿ áðàóçåðàìè Netscape è Internet Explorer òîëüêî ñî ñòàðøèõ âåðñèé. Ðàìêà çàäàåòñÿ ïðîùå âñåãî ïàðàìåòðîì border, êîòîðûé ñðàçó óêàçûâàåò åå âèä, òîëùèíó è öâåò. Ïðèìåð 3.6. Èñïîëüçîâàíèå ñòèëåé <style type="text/css"> P { border: double 4px #336699; padding: 5px }

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

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

4. ÂÛÐÀÂÍÈÂÀÍÈÅ ÏÎ ÖÅÍÒÐÓ Êàçàëîñü áû, íåò íè÷åãî ñëîæíîãî, ÷òîáû óñòàíîâèòü êàðòèíêó èëè òåêñò â öåíòðå îêíà áðàóçåðà. Èñïîëüçóåì òåã CENTER è âñå ñòàíîâèòñÿ íà òî ìåñòî, êóäà ìû è çàäóìûâàëè. Îäíàêî íå âñå òàê ïðîñòî. Ñóùåñòâóåò òðè ñïîñîáà âûðàâíèâàíèÿ ïî öåíòðó, êàæäûé èç íèõ èìååò ñâîè îñîáåííîñòè è îòëè÷èÿ â ðàçíûõ áðàóçåðàõ. Îäèí èç ñàìûõ ïðîñòûõ è óäîáíûõ òåãîâ – CENTER ïðåäíàçíà÷åí äëÿ âûðàâíèâàíèÿ áëîêà òåêñòà. Ñ ïîìîùüþ ýòîãî òåãà òàêæå ìîæíî öåíòðèðîâàòü ðèñóíêè è òàáëèöû. Èñêëþ÷åíèå ñîñòàâëÿþò ýëåìåíòû èëè äëÿ êîòîðûõ âûðàâíèâàíèå çàäàåòñÿ ñâîéñòâàìè òåãà IMG. Òàê, åñëè ïîìåñòèòü ýëåìåíò âíóòðè òåãà CENTER, ðèñóíîê îêàæåòñÿ âûðîâíåííûì ïî ïðàâîìó êðàþ. Ïðèìåð 4.1. Öåíòðèðîâàíèå ñ ïîìîùüþ òåãà CENTER Данный текст будет выровнен по центру окна браузера, а нижележащий рисунок по правому краю.

www.htmlbook.ru

14

Âëàä Ìåðæåâè÷. Ïðèåìû âåðñòêè âåá-ñòðàíèö Ôîðìàëüíî CENTER äîëæåí èñïîëüçîâàòüñÿ òîëüêî êàê ïàðàìåòð äðóãèõ áëî÷íûõ òåãîâ (P, PRE è äðóãèå). Îäíàêî â áðàóçåðå Netscape Navigator 2.0 CENTER áûë ââåäåí êàê ñàìîñòîÿòåëüíûé òåã. Ýòî äîïîëíåíèå áûëî ïðèçâàíî óáðàòü ëèøíèé âåðòèêàëüíûé îòñòóï, êîòîðûé ïîÿâëÿåòñÿ ïðè èñïîëüçîâàíèè áëî÷íûõ òåãîâ. Åñëè âìåñòî òåãà CENTER òåêñò ïîìåñòèòü âíóòðü ïàðàãðàôà (

), ïîÿâëÿåòñÿ äîïîëíèòåëüíûé âåðòèêàëüíûé îòñòóï ìåæäó ãîðèçîíòàëüíîé ëèíèåé è ýòèì òåêñòîì. CENTER íå âõîäèò â ñïåöèôèêàöèþ HTML.  «îôèöèàëüíîì» HTML ôîðìàòèðîâàíèå, òàêîå êàê âûðàâíèâàíèå òåêñòà äîëæíî ïðîèçâîäèòñÿ ÷åðåç àòðèáóòû òåãîâ (íàïðèìåð,

) èëè ñ èñïîëüçîâàíèåì ñòèëåé. Òåì íå ìåíåå, ýòîò òåã îáðåë ïðàâî íà ñóùåñòâîâàíèå. Îäíàêî ïîñëå îïóáëèêîâàíèÿ ñïåöèôèêàöèè HTML 4 W3 Êîíñîðöèóì ðåêîìåíäîâàë âîçäåðæàòüñÿ îò èñïîëüçîâàíèÿ òåãà CENTER, à âìåñòî íåãî èñïîëüçîâàòü ýëåìåíò

, êàê ïîêàçàíî â ïðèìåðå 4.2. Ïðèìåð 4.2. Öåíòðèðîâàíèå ñ ïîìîùüþ òåãà DIV

---

---

Åùå îäèí ñïîñîá öåíòðèðîâàíèÿ çàêëþ÷àåòñÿ â èñïîëüçîâàíèè ñòèëåé. Ñòèëè ïðåäñòàâëÿþò ñîáîé èíñòðóêöèè, êîòîðûå ïîçâîëÿþò óïðàâëÿòü àòðèáóòàìè ôîðìàòèðîâàíèÿ êàê øðèôò, öâåò, âûðàâíèâàíèå è äð. Ïðèìåð ïåðåîïðåäåëåíèÿ òåãà P äëÿ öåíòðèðîâàíèÿ òåêñòà. Ïðèìåð 4.3. Öåíòðèðîâàíèå ñ ïîìîùüþ ñòèëåé <style type="text/css"> P { text-align: center; }

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

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

www.htmlbook.ru

15

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

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

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

6. ÂÛÐÀÂÍÈÂÀÍÈÅ ÝËÅÌÅÍÒΠÂûðàâíèâàÿ ðàçëè÷íûå ýëåìåíòû âåá-ñòðàíèöû ïî íåâèäèìîé ëèíèè, ìû òåì ñàìûì çðèòåëüíî ñâÿçûâàåì èõ äðóã ñ äðóãîì. Òàêèå ýëåìåíòû, êàê òåêñò è ãðàôè÷åñêèå èçîáðàæåíèÿ ñ ïîìîùüþ âûðàâíèâàíèÿ ìîæíî îáúåäèíèòü â îäíó ãðóïïó, ïîêàçûâàÿ èõ ñâÿçü ìåæäó ñîáîé.

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

www.htmlbook.ru

16

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

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

(2.7)

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

www.htmlbook.ru

17

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

(2.7)

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

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

Ðèñ 6.3. Âûðàâíèâàíèå ýëåìåíòîâ ïî âåðòèêàëè Êîä äëÿ äàííîãî ïðèìåðà ïðèâåäåí íèæå.

www.htmlbook.ru

18

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

Êàê ñèäåòü
	Ïðè ðàáîòå íà âû÷èñëèòåëüíîé òåõíèêå íåîáõîäèìî ñåñòü òàê, ÷òîáû ðóêè ñ ïðåäïëå÷üÿìè îáðàçîâûâàëè ïðÿìîé óãîë, ãëàçà ïîñòàâèòü íà ðàññòîÿíèå 30-40 ñì îò ðàáî÷åé ïîâåðõíîñòè ìîíèòîðà.
Êàê íàáèðàòü
	Íàáèðàòü íà êëàâèàòóðå ñëåäóåò ïîäóøå÷êàìè ïàëüöåâ êîðîòêèìè îòðûâèñòûìè óäàðàìè. Ïðåäåëüíî äîïóñòèìàÿ äëèíà íîãòåé äëÿ æåíùèí ñîñòàâëÿåò 12-15 ìì, äëÿ ìóæ÷èí 3-5 ìì.

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

7. ÂÅÐÒÈÊÀËÜÍÛÅ ËÈÍÈÈ Âåðòèêàëüíûå ëèíèè èëè êàê èõ åùå íàçûâàþò íà òèïîãðàôñêèé ìàíåð, âåðòèêàëüíûå ëèíåéêè, ïðåêðàñíûé äåêîðàòèâíûé ýëåìåíò, êîòîðûé íàõîäèò ïðèìåíåíèå â ìíîæåñòâå ðàçíûõ ñëó÷àåâ. Ïîìåùåííàÿ âîçëå òåêñòà âåðòèêàëüíàÿ ëèíèÿ ïðèâëåêàåò ê íåìó âíèìàíèå ÷èòàòåëÿ, ïîçâîëÿÿ òåì ñàìûì âûäåëÿòü íóæíûå àáçàöû èëè áëîêè òåêñòà. Âåðòèêàëüíûå ëèíèè ìîãóò òàêæå ñëóæèòü äëÿ ðàçäåëåíèÿ êîëîíîê òåêñòà, ÷òîáû âçãëÿä ÷èòàòåëÿ íå ïåðåñêàêèâàë ñ îäíîé êîëîíêè íà äðóãóþ è ÷åòêî îòäåëèòü îäíó êîëîíêó îò äðóãîé. Äëÿ ñîçäàíèÿ âåðòèêàëüíîé ëèíèè ôèêñèðîâàííîé âûñîòû ìîæíî èñïîëüçîâàòü èçîáðàæåíèå íåîáõîäèìîãî öâåòà ðàçìåðîì 1 íà 1 ïèêñåë. Ïî÷åìó èìåííî 1 íà 1? Äà ýòî î÷åíü óäîáíî. Ðàçìåð ôàéëà íè÷òîæíî ìàë, çàòî åãî ìîæíî ìàñøòàáèðîâàòü êàê óãîäíî (Ïðèìåð 7.1).

www.htmlbook.ru

19

Âëàä Ìåðæåâè÷. Ïðèåìû âåðñòêè âåá-ñòðàíèö Ïðèìåð 7.1. Ëèíèÿ ñäåëàííàÿ ñ ïîìîùüþ ðèñóíêà 1 íà 1 ïèêñåë или для указания относительной высоты можно указать ее в процентах

 ïðèìåðå, ôàéë ñ èìåíåì red1x1.gif ïðåäñòàâëÿåò ñîáîé ðèñóíîê, ñîñòîÿùèé èç îäíîãî ïèêñåëà êðàñíîãî öâåòà. Äëÿ èçìåíåíèÿ öâåòà òàêîé ëèíèè ïðèäåòñÿ äåëàòü íîâûé ðèñóíîê â êàêîìíèáóäü ãðàôè÷åñêîì ðåäàêòîðå. Êðîìå òîãî, âûñîòà ëèíèè ôèêñèðîâàíà è åå ñëîæíî ïðèâÿçàòü ê òåêñòó, ÷òîáû îíà èçìåíÿëàñü âìåñòå ñ íèì.  ýòîì ñëó÷àå, íà ïîìîùü íàì ïðèäåò òàáëèöà. Ñîçäàåì òàáëèöó, îäíà èç ÿ÷ååê êîòîðîé èìååò øèðèíó 1-2 ïèêñåëà. Ïàðàìåòðû cellpadding è border äîëæíû áûòü ðàâíû íóëþ, à cellspacing îïðåäåëÿåò ðàññòîÿíèå îò òåêñòà äî ëèíèè. À çàòåì â ýòîé ÿ÷åéêå óêàçûâàåì ôîí íóæíîãî öâåòà: ×òîáû òàêàÿ ëèíèÿ áûëà âèäíà â áðàóçåðå Netscape, â ÿ÷åéêó íóæíî ÷òî-íèáóäü ïîìåñòèòü. Íåðàçäåëÿåìûé ïðîáåë   äëÿ ýòîé öåëè íå î÷åíü ãîäèòñÿ, îí ìîæåò ñäåëàòü ëèíèþ ñëèøêîì òîëñòîé, ÷òî íàì íå íóæíî. Ñàìîå èäåàëüíîå – ïðîçðà÷íûé ðèñóíîê ðàçìåðîì 1 íà 1 ïèêñåë (â ïðèìåðå 7.2 îí èìåíóåòñÿ spacer.gif). Ïðèìåð 7.2. Ëèíèÿ ñîçäàííàÿ ñ ïîìîùüþ òàáëèöû

Каждый из рефлексирующих субъектов виртуального мира может находиться в двух основных состояниях: стационарном и мобильном, при котором они или сводят передвижение в трехмерном Евклидовом пространстве с декартовой системой координат к абстрактному минимуму, или ограничиваются формальными перемещениями массы в некоторой части пространственного континуума.

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

www.htmlbook.ru

20

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

Ðèñ. 7.2.

Ðèñ. 7.3.

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

Каждый рефлексирующий субъект обладает набором знаний и имеет позитивные возможности оказания влияния на информационное поле для взаимодействия с субъектами виртуального мира, но в то же время наделен плюралистическим мировоззрением, позволяющим ему при необходимости достижения или сохранения собственных материальных благ пренебрегать законами логики и здравого смысла.

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

8. ÃÎÐÈÇÎÍÒÀËÜÍÛÅ ËÈÍÈÈ Ãîðèçîíòàëüíûå ëèíèè, èëè, íà òèïîãðàôñêèé ìàíåð, ãîðèçîíòàëüíûå ëèíåéêè õîðîøî èñïîëüçîâàòü äëÿ îòäåëåíèÿ îäíîãî áëîêà òåêñòà îò äðóãîãî. Íåáîëüøîé ïî ðàçìåðó òåêñò, ñâåðõó è ñíèçó êîòîðîãî ðàñïîëàãàþòñÿ ãîðèçîíòàëüíûå ëèíèè ïðèâëåêàåò áîëüøå, ÷åì îáû÷íî, âíèìàíèå ÷èòàòåëÿ. Åñëè íóæíà ïðîñòàÿ, áåç çàòåé ëèíèÿ, ïðîùå âîñïîëüçîâàòüñÿ òåãîì HR. Ïðèìåð ñîçäàíèÿ ãîðèçîíòàëüíûõ ëèíèé ñ ïîìîùüþ òåãà HR Òàêàÿ ëèíèÿ, îäíàêî, ìîæåò èìåòü îòëè÷èÿ â ðàçíûõ áðàóçåðàõ.

www.htmlbook.ru

21

Âëàä Ìåðæåâè÷. Ïðèåìû âåðñòêè âåá-ñòðàíèö Ïðèìåð 8.1. Ñîçäàíèå îáû÷íûõ ëèíèé ñ ïîìîùüþ òåãà HR

---

Пример текста с обычными линиями

---

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

---

Пример создания сплошных линий

---

Ïàðàìåòð size îïðåäåëÿåò òîëùèíó ëèíèè, à width åå äëèíó â ïèêñåëàõ èëè ïðîöåíòàõ. Òàêàÿ ëèíèÿ âñåãäà ðàçìåùàåòñÿ ïî öåíòðó ýêðàíà, åñëè åå âûðàâíèâàíèå ñïåöèàëüíî íå çàäàåòñÿ.  êà÷åñòâå ãîðèçîíòàëüíûõ ëèíèé òàêæå ìîæíî èñïîëüçîâàòü ëþáîå ïîäõîäÿùåå èçîáðàæåíèå, íàäî ëèøü ðàñòÿíóòü åãî äî íóæíîé øèðèíû. Íèæå, â êà÷åñòâå ðèñóíêà, èñïîëüçîâàëàñü íàðèñîâàííàÿ áóêâà Í. Ðèñ. 8.1. Ãîðèçîíòàëüíàÿ ëèíèÿ èç ðèñóíêà Ïðèìåð 8.3. Ñîçäàíèå ãîðèçîíòàëüíûõ ëèíèé èç ðèñóíêà
Пример линии сделанной из рисунка 100% ширины или
Пример линии сделанной из рисунка фиксированной ширины 400 пикселей.

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

www.htmlbook.ru

22

Âëàä Ìåðæåâè÷. Ïðèåìû âåðñòêè âåá-ñòðàíèö Ïðèìåð 8.4. Ñîçäàíèå ãîðèçîíòàëüíûõ ëèíèé ñ ïîìîùüþ òàáëèö

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