Ðîìàíîâñêèé È.Â., Ìîéñåþê Â.Ã.

Ðîìàíîâñêèé Èîñèô Âëàäèìèðîâè÷, Ìîéñåþê Âëàäèìèð Ãðèãîðüåâè÷

ÀËÜÁÎÌ «ÑÀÍÊÒ-ÏÅÒÅÐÁÓÐû  ÔÎÐÌÀÒÅ HTML: ÌÀÐØÐÓÒÍÛÅ ÎÃÍÈ ÒÐÀÌÂÀß Ýòà ñòàòüÿ îïèñûâàåò ðàáîòó, â êîòîðîé ìíå ïîìîãàëà ñòóäåíòêà ìàòåìàòèêîìåõàíè÷åñêîãî ôàêóëüòåòà ÑÏáÃÓ Í. Ëåïåñêèíà. È. Ðîìàíîâñêèé

1. ÑÈÃÍÀËÜÍÛÅ ÎÃÍÈ ÒÐÀÌÂÀÅÂ

2. ÏÐÎÅÊÒÈÐÎÂÀÍÈÅ ÑÒÐÀÍÈÖÛ

Êîãäà â Ïåòåðáóðãå, à çàòåì Ëåíèíãðàäå, ðàçâèâàëîñü òðàìâàéíîå äâèæåíèå, áûëà ïðèäóìàíà î÷åíü óäîáíàÿ è êðàñèâàÿ ñèñòåìà ìàðêèðîâêè ìàðøðóòîâ: íà êàæäîì òðàìâàéíîì ïîåçäå ñïåðåäè è ñçàäè ãîðåëè öâåòíûå îãîíüêè. Ýòè îãíè íàçûâàþòñÿ ìàðøðóòíûìè. Îíè î÷åíü óäîáíû â îñåííèå è çèìíèå ñóìåðêè, êîãäà è æäàòü-òî íà óëèöå íåïðèÿòíî, à ïðè òóìàíå è ìîðîñÿùåì äîæäå íîìåðà òðàìâàÿ íå ðàñïîçíàòü... – ÿðêèå îãîíüêè øåñòåðêè, èëè ñîðîêîâîãî, èëè òðîéêè âåñåëî ñèãíàëÿò èçäàëåêà. Èñïîëüçóþòñÿ ôîíàðè ïÿòè öâåòî⠖ ñèíèé, êðàñíûé, çåëåíûé, áåëûé, æåëòûé. Ëåãêî ïîäñ÷èòàòü, ÷òî ýòî äàåò íàì 25 âîçìîæíîñòåé. Òàê êàê ìàðøðóòîâ â ãîðîäå ìíîãî áîëüøå, òî íåêîòîðûå èìåþò îäèíàêîâûå êîìáèíàöèè öâåòîâ. Êîìáèíàöèè ñòàðàþòñÿ ñîõðàíÿòü, íî, ïî-ìîåìó, îíè âñå-òàêè èçðåäêà èçìåíÿþòñÿ. Ðàñöâåòêè äëÿ íàøåé ñòðàíèöû âçÿòû èç Èíòåðíåòà. Õîòåëîñü äàòü âîçìîæíîñòü ïîñìîòðåòü, êàê âûãëÿäèò òðàìâàé ëþáîãî ìàðøðóòà ñî ñâîèìè îãíÿìè, ïðîñòî âûáðàâ â òàáëèöå íóæíûé íîìåð.

Ìû ðåøèëè âçÿòü êàêîé-íèáóäü òèïè÷íûé ãîðîäñêîé ïåéçàæ, ñôîòîãðàôèðîâàòü èäóùèé òðàìâàé, âçÿòü ýòîò ñíèìîê çà îñíîâó, à ïðè âûáîðå êîíêðåòíîãî ìàðøðóòà âêëåèâàòü â ñíèìîê íåáîëüøóþ çàïëàòêó. Âñå íåîáõîäèìûå çàïëàòêè ïðèãîòîâèëà Í. Ëåïåñêèíà. Êàðòèíêè áûëè âñå îäíîãî ðàçìåðà 17 × 76 ïèêñåëåé. Âíà÷àëå ýòî áûëè 65 ìàëåíüêèõ ãðàôè÷åñêèõ ôàéëîâ, çàòåì ìû ñîåäèíèëè èõ â îäíó ïîëîñêó âûñîòîé â 1105 ïèêñåëåé. Íà ðèñ. 1 âû ìîæåòå óâèäåòü ïîëó÷èâøóþñÿ ñòðàíèöó. Ñôîòîãðàôèðîâàí òðàìâàé 20-ãî ìàðøðóòà, íî â íóæíîå ìåñòî óæå âñòàâëåíà çàïëàòêà, ñîîòâåòñòâóþùàÿ ìàðøðóòó 1. Ñïðàâà âíèçó, ïîñëå óæå çíàêîìîãî íàì òåêñòà, ðàñïîëîæåíà òàáëèöà âûáðàííûõ äëÿ ïîêàçà 65 íîìåðîâ (ìàðøðóòîì 90 ìû ïîæåðòâîâàëè).

36

3. ÏÐÈÍÖÈÏÈÀËÜÍÀß ÑÕÅÌÀ ÑÒÐÀÍÈÖÛ

Ïîñìîòðèì, èç êàêèõ ÷àñòåé ñîñòàâëåí html-òåêñò íàøåé ñòðàíèöû (ñì. ëèñòèíã 1).

© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ØÊÎËÅ. ¹ 3, 2008 ã.

Àëüáîì «Ñàíêò-Ïåòåðáóðã» â ôîðìàòå HTML: Ìàðøðóòíûå îãíè òðàìâàÿ

Ìàðøðóòíûå îãíè òðàìâàÿ

Ðèñ. 1

Ëèñòèíã 1.

îáû÷íûé çàãîëîâîê <script language="javascript"> òåêñò ïðîöåäóðû

Ìàðøðóòíûå îãíè òðàìâàÿ Ó ïåòåðáóðãñêîãî òðàìâàÿ ... òåêñòîâîå çàïîëíåíèå ñòðàíèöû Âû ìîæåòå ïîñìîòðåòü, êàê âûãëÿäèò òðàìâàé íà ýòîé ñóìåðå÷íîé êàðòèíêå, êëèêíóâ â òàáëèöå òîò íîìåð ìàðøðóòà, êîòîðûé âàñ çàèíòåðåñîâàë. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . <span id="1" onClick="change(1)" style="cursor: pointer;">1 <span id="1" onClick="change(13)" style="cursor: pointer;">13 <span id="1" onClick="change(53)" style="cursor: pointer;">53 <span id="1" onClick="change(65)" style="cursor: pointer;">65  ðàçðàáîòêå ýòîé ñòðàíèöû àêòèâíîå ó÷àñòèå ïðèíèìàëà ñòóäåíòêà ìàòåìàòèêî-ìåõàíè÷åñêîãî ôàêóëüòåòà ÑÏáÃÓ Í. Ëåïåñêèíà (2007).

Ó×ÅÁÍÀß ÌÀÑÒÅÐÑÊÀß

37

Ðîìàíîâñêèé È.Â., Ìîéñåþê Â.Ã. Îáðàòèòå âíèìàíèå íà ñîâåðøåííî îäèíàêîâûå çàïîëíåíèÿ êëåòî÷åê òàáëèöû: ñ êàæäîé êëåòêîé ñâÿçàí åå íîìåð, è â îòâåò íà êëèêàíèå ýòîãî íîìåðà âûçûâàåòñÿ ïðîöåäóðà change(1) ñ íîìåðîì êëåòêè (è ìàðøðóòà) â êà÷åñòâå ïàðàìåòðà. Ýòà ïðîöåäóðà íàïèñàíà íà ÿçûêå javascript. Îíà èçìåíÿåò ïàðàìåòðû èçîáðàæåíèÿ zapl, êîòîðîå ó íàñ îïèñàíî íå ïîëíîñòüþ.

êàÿ êàðòèíêà çàïëàòîê âûëåçàåò çà ïðåäåëû ôîòîãðàôèè ñ òðàìâàåì (ìû áåðåì èç ôàéëà çàïëàòîê òîëüêî ìàëåíüêèé êóñî÷åê è ñòàâèì åãî ïðàâèëüíî, íî ðàçìåðû êàðòèíîê áóäóò ñðàâíèâàòüñÿ ïîëíîñòüþ, åñëè ìû íå èçìåíèì ïðàâèë ñðàâíåíèÿ). Âñå ýòè ïàðàìåòðû ïîìåùåíû â ñòðîêîâîì ïàðàìåòðå style, êîòîðûé è áóäåò èçìåíÿòüñÿ â ïðîöåäóðå change. 5. ÏÐÎÖÅÄÓÐÀ

4. ÇÀÏËÀÒÊÀ

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

Ýòèì îïèñàíèåì îïðåäåëÿåòñÿ èìÿ èçîáðàæåíèÿ äëÿ çàïëàòêè, åå íà÷àëüíîå èçãîòîâëåíèå è ðàçìåùåíèå â îñíîâíîé êàðòèíêå. Ïàðàìåòðû position:absolute; top:290px; left:225px; çàäàþò ïîëîæåíèå çàïëàòêè, ïàðàìåòð clip: rect(0, 76, 17, 0); îïðåäåëÿåò åå ðàñïîëîæåíèå â ñâîäíîì ôàéëå çàïëàòîê, ïàðàìåòð overflow: hidden; çàùèùàåò íàñ îò íåïðèÿòíîñòåé, âîçíèêàþùèõ èç-çà òîãî, ÷òî î÷åíü âûñî-

Ïîðà îáðàòèòüñÿ ê îïèñàíèþ ïðîöåäóðû function change (v) { var top_z = (v-1)*17; var bottom_z = v*17; var s = "rect(" + String(top_z) + ",76," + String(bottom_z) + ",0)" zapl.style.clip = s; zapl.style.top = 290 – top_z; }

Âñå î÷åíü ïðîñòî: âû÷èñëÿåì âåðõíþþ è íèæíþþ ãðàíèöû òðåáóåìîé çàïëàòêè. Ïî íèì ôîðìèðóåì îïèñàíèå ïàðàìåòðîâ ïðÿìîóãîëüíèêà (ñèñòåìíàÿ ôóíêöèÿ String ïåðåâîäèò ÷èñëîâîé ïàðàìåòð â ñòðîêó) è ïðàâèëüíîå ïîëîæåíèå ñâîäíîãî ôàéëà çàïëàòîê îòíîñèòåëüíî ñíèìêà, ïðè êîòîðîì âûáðàííàÿ çàïëàòêà ïîïàäàåò íà íóæíîå ìåñòî. Çàòåì (êàê èçÿùíî!) â îáúåêòå ïî èìåíè zapl âíóòðè ïàðàìåòðà style ïðîñòûì ïðèñâàèâàíèåì èçìåíÿþòñÿ íóæíûå àòðèáóòû. 6. ÒÅà <SPAN>

...ìû áåðåì èç ôàéëà çàïëàòîê òîëüêî ìàëåíüêèé êóñî÷åê è ñòàâèì åãî ïðàâèëüíî...

38

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

© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ØÊÎËÅ. ¹ 3, 2008 ã.

Àëüáîì «Ñàíêò-Ïåòåðáóðã» â ôîðìàòå HTML: Ìàðøðóòíûå îãíè òðàìâàÿ ñÿ, äåëàÿ ðàçáèåíèå íà ñëîè î÷åâèäíûì. Êàê âû ìîãëè äîãàäàòüñÿ, ýòî è ïðîèñõîäèò, êîãäà âû íàæèìàåòå íà ññûëêó ñ íîìåðîì ìàðøðóòà. Íà ñòàòè÷åñêîé êàðòèíêå ïîÿâëÿåòñÿ åù¸ îäèí ñëîé, â êîòîðîì ñîäåðæèòñÿ íàøà çàïëàòêà. Âîçíèêàåò âîïðîñ: «Íåóæåëè íàì êàæäûé ðàç íåîáõîäèìî ïåðåîïðåäåëÿòü çàíîâî êàæäûé ïîñëåäóþùèé ñëîé?» Íåò. Èìååòñÿ òåã <span>, êîòîðûé ïîçâîëÿåò âûäåëèòü ÷àñòü èíôîðìàöèè âíóòðè äðóãèõ òåãîâ è óñòàíîâèòü äëÿ íåå ñâîé ñòèëü. Òî åñòü íàì äîñòàòî÷íî îäèí ðàç óñòàíîâèòü ìåñòî äëÿ çàïëàòêè, è âñå ïîñëåäóþùèå çàïëàòêè áóäóò ïîÿâëÿòüñÿ â òîì æå ìåñòå è â òîì æå ñëîå. Ïðè ýòîì, áëàãîäàðÿ

âñòðîåííûì ñîáûòèÿì, ìû ìîæåì ïðîèçâîäèòü èçìåíåíèÿ ñòèëÿ óæå ñîçäàííîé ñòàòè÷åñêîé ñòðàíèöû, íå çàãðóæàÿ åå çàíîâî. Çäåñü òåã <span> èñïîëüçóåòñÿ ñ àòðèáóòàìè id="1" – óíèêàëüíûé íîìåð ñòèëÿ; onClick="change(1)" âñòðîåííûé îáðàáîò÷èê ñîáûòèÿ, êîòîðûé ïðè íàæàòèè âûçûâàåò ôóíêöèþ change; style="cursor: pointer;" îïèñûâàåò ñòèëü êóðñîðà (óêàçàòåëü). Ñòîèò òàêæå îòìåòèòü, ÷òî â ïîñëåäíåì àòðèáóòå style ìîæíî îïèñûâàòü ñòèëü âñåãî, ÷òî ìû îáû÷íî îïèñûâàåì â CSS. Ìîæíî áûëî áû äëÿ ñîêðàùåíèÿ òåêñòà îòäåëüíî çàäàòü ïàðàìåòðû <span>, ñîêðàòèâ â 65 ìåñòàõ äëèíó âûçîâà.

Ðîìàíîâñêèé Èîñèô Âëàäèìèðîâè÷, äîêòîð ôèçèêî-ìàòåìàòè÷åñêèõ íàóê, ïðîôåññîð ÑÏáÃÓ, Ìîéñåþê Âëàäèìèð Ãðèãîðüåâè÷, ñòóäåíò 4 êóðñà ìàòåìàòèêîìåõàíè÷åñêîãî ôàêóëüòåòà ÑÏáÃÓ. Ó×ÅÁÍÀß ÌÀÑÒÅÐÑÊÀß

39