Альбом ''Санкт-Петербург'' в формате HTML: опыт разработки

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

Ðîìàíîâñêèé Èîñèô Âëàäèìèðîâè÷

ÀËÜÁÎÌ «ÑÀÍÊÒ-ÏÅÒÅÐÁÓÐû  ÔÎÐÌÀÒÅ HTML: ÎÏÛÒ ÐÀÇÐÀÁÎÒÊÈ Ïîñëåäíèå òðè ãîäà àâòîð çàíèìàåòñÿ ñîçäàíèåì àëüáîìà «Ñàíêò-Ïåòåðáóðã. Ëþáèìûå ìåñòà».  àëüáîìå óæå áîëüøå 3500 ñíèìêîâ (òî÷íåå, ãðàôè÷åñêèõ ôàéëîâ). Òàì íå òîëüêî ñíèìêè, è íàçâàíèå óæå íå âïîëíå îòâå÷àåò ñîäåðæàíèþ.1 Èäåÿ àëüáîìà ðîäèëàñü âïîëíå åñòåñòâåííî. Àâòîð êóïèë öèôðîâîé ôîòîàïïàðàò, ñòàë ôîòîãðàôèðîâàòü ãîðîä è ïîêàçûâàòü ñíèìêè äðóçüÿì è ðîäíûì. Íî íàõîäèòü çàèíòåðåñîâàííîãî çðèòåëÿ ñòàíîâèëîñü âñå òðóäíåå – íèêòî íå âûäåðæèâàë òàêèõ îáúåìîâ. Òðóäíî áûëî è ïîâòîðÿòü ìíîãîêðàòíî îäíî è òî æå, à ñíèìîê ÷àñòî âûèãðûâàåò îò äîïîëíèòåëüíîé èíôîðìàöèè. Âîò ÿ è ðåøèë ñîáèðàòü ýòè ñíèìêè âî ÷òî-òî âðîäå èíòåðíåòîâñêîãî ñàéòà, òîëüêî â Èíòåðíåò íå âûêëàäûâàòü: ïîëüçîâàòåëþ áóäåò òðóäíî ðàáîòàòü ñ áîëüøèì ÷èñëîì áîëüøèõ ôàéëîâ, à ìàëåíüêèå èëëþñòðàöèè íå òàê ýôôåêòíû. Ñêîðî àëüáîì âûðîñ äî òàêîãî ðàçìåðà, ÷òî åãî ñòàëî èíòåðåñíî ñìîòðåòü è ïîêàçûâàòü – ïîÿâèëèñü äîáðîæåëàòåëüíûå êðèòèêè, êîòîðûå äàëè ìíîãî öåííûõ ñîâåòîâ: êàê âûáèðàòü áàçîâûå öâåòà è øðèôòû, êàê óíèôèöèðîâàòü ñòðàíèöû àëüáîìà, èñïîëüçóÿ êàñêàäíóþ òàáëèöó ñòèëåé (css), êàê îðãàíèçîâûâàòü ìåíþ, è ìíîãîå äðóãîå. Îíè æå èñïðàâëÿëè ìîè îïå÷àòêè, õîòÿ ïîòîê íîâûõ îïå÷àòîê áûë ìîùíåå ñóììàðíîãî ïîòîêà èñïðàâëåíèé.

Îáî âñåì ñðàçó íå ðàññêàæåøü. Ìû ðåøèëè ñ ðåäàêöèåé ñäåëàòü ñåðèþ ñòàòåé, è ÿ âûáðàë äëÿ ïåðâîãî ñâîåãî ðàññêàçà îá àëüáîìå îäíó òåìó, êîòîðàÿ ìíå êàæåòñÿ íàèáîëåå ïðîãðàììèñòñêîé, – ñèñòåìó ìåíþ. Âòîðîé ñòàòüåé, êîòîðàÿ èäåò â ýòîì æå íîìåðå, áóäåò ñòàòüÿ Âëàäèìèðà Ìîéñåþêà î ïðåäñòàâëåíèè â àëüáîìå èçâåñòíîé ïàíîðàìû À. Òîçåëëè (Âèä Ñàíêò-Ïåòåðáóðãà ñ áàøíè Êóíñòêàìåðû, 1820 ã.). Èòàê, ìåíþ. Îíè âûïîëíåíû â àëüáîìå ÷åòûðüìÿ ðàçëè÷íûìè ñïîñîáàìè: 1. Ìåíþ ãëàâíîé ñòðàíèöû. 2. Âûáîð ôèãóðû íà êàðòèíêå. 3. Ñïèñêîâûå ìåíþ. 4. Ìåíþ ñ êàðòèíêàìè. Ðàññìîòðèì èõ ïî îòäåëüíîñòè.

...íàõîäèòü çàèíòåðåñîâàííîãî çðèòåëÿ ñòàíîâèëîñü âñå òðóäíåå...

1

Àâòîðû ÷àñòî óïðÿìÿòñÿ. Ïîìíèòå, ó Ïóøêèíà: «Ïåðåñìîòðåë âñå ýòî ñòðîãî:/Ïðîòèâîðå÷èé î÷åíü ìíîãî,/Íî èõ óáðàòü ÿ íå õî÷ó...». È ÿ íå õî÷ó.

ÌÓÇÅÉ ÇÀÍÈÌÀÒÅËÜÍÎÉ ÍÀÓÊÈ

69

Ðîìàíîâñêèé È.Â. Ëèñòèíã 1.

Êëàññè÷åñêèå âèäû

Õðàìû

Íåêîòîðûå çíàìåíèòûå çäàíèÿ

Ìîñòû

About

1. ÌÅÍÞ ÃËÀÂÍÎÉ ÑÒÐÀÍÈÖÛ.

Ýòî ñàìîå ïðîñòîå ìåíþ: ïî÷òè âñÿ ñòðàíèöà çàíÿòà êðàñèâîé êàðòèíêîé: âèä íà Ñòðåëêó è Àäìèðàëòåéñòâî ñ Ìûòíèíñêîé íàáåðåæíîé â áåëóþ íî÷ü1. Óìåíüøàòü êàðòèíêó æàëêî. Íà ìåíþ îñòàåòñÿ óçêàÿ ïîëîñêà ñ òàáëè÷êîé, â êëåòêàõ êîòîðîé íàïèñàíû îòäåëüíûå òåìû. Ïðèìåðíî òàê (ëèñòèíã 1). Òåã îïðåäåëÿåò òàáëèöó (à ïàðàìåòð frame îïðåäåëÿåò òèï ðàìêè åå êëåòîê). Îòäåëüíûå ñòðîêè îïðåäåëÿþòñÿ òåãîì , à îòäåëüíûå ñòîëáöû – òåãîì '; document.write(HtmlStr); }

îáúåêò äëÿ âûçîâà. Ýòè ñòðîêè ôîðìèðóþòñÿ ñïåöèàëüíûìè ïðîöåäóðàìè, íàïèñàííûìè íà ÿçûêå JavaScript: ðàçäåëèòåëè – ïðîöåäóðîé MakeSeparator, åäèíñòâåííûé ïàðàìåòð êîòîðîé – ýòî òåêñò ðàçäåëèòåëÿ, à îáúåêòû – îäíîé èç ïðîöåäóð MakeItem è MakeSimpleItem. Èõ ïàðàìåòðû ìû îïèøåì ïîçæå. Ïðîöåäóðà MakeSeparator î÷åíü ïðîñòà, îíà ôîðìèðóåò â òàáëèöå îäíó ñòðîêó, â êîòîðîé â íóæíîì ôîðìàòå çàïèñàí òåêñò ðàçäåëèòåëÿ, äëÿ ýòîãî (âíèìàíèå!) îíà ôîðìèðóåò HTML-òåêñò, îïèñûâàþùèé ýòó ñòðîêó, è ïåðåäàåò ýòîò òåêñò èíòåðïðåòàòîðó áðàóçåðà (ëèñòèíã 5). Âèäèòå: îáû÷íîå îïèñàíèå ñòðîêè òàáëèöû, ïðè÷åì ñîñòîÿùåé èç îäíîé ÿ÷åéêè, à â ýòîé ÿ÷åéêå íåìíîãî óâåëè÷èâàåòñÿ øðèôò è ïðîñòî âñòàâëÿåòñÿ ïàðàìåòð Text. Ïîëó÷èâøàÿñÿ òàê ñòðîêà ïåðåäàåòñÿ îáúåêòó document, êîòîðûé ïðèìåíÿåò ê íåé ìåòîä write (ýòî è åñòü ïåðåäà÷à ñòðîêè èíòåðïðåòàòîðó áðàóçåðà).

Ïðîöåäóðà MakeSimpleItem èñïîëüçóåòñÿ â òåõ ñëó÷àÿõ, êîãäà â îòâåò íà çàïðîñ ïîëüçîâàòåëÿ íóæíî âûçâàòü ñóùåñòâóþùóþ ñòðàíèöó. Åå èìÿ çàäàåòñÿ ïàðàìåòðîì URLName, à ïàðàìåòð WinTitle îïðåäåëÿåò çàïèñü â ñòðîêå ìåíþ (ëèñòèíã 6). Ïðîöåäóðà MakeItem õèòðåå – îíà ñîçäàåò è ñòðîêó â ìåíþ, òàêóþ æå, êàê ïðåäûäóùàÿ ïðîöåäóðà, è ñòðàíèöó, êîòîðóþ ìîæåò âûçâàòü ïîëüçîâàòåëü. Ñòðîêó â ìåíþ îíà ñîçäàåò ïðèìåðíî òàê æå, èñïîëüçóÿ òàêîé æå ïàðàìåòð WinTitle, à ñòðàíèöó îíà äåëàåò íå ñàìà, à âûçûâàåò äëÿ ýòîãî âñïîìîãàòåëüíóþ ïðîöåäóðó LoadPic (ëèñòèíã 7). Ôîðìèðîâàíèå ñòðîêè äîñòàòî÷íî ïîíÿòíî, à âîò ôîðìèðîâàíèå ïàðàìåòðîâ òåãà ÿâíî òðåáóåò êîììåíòàðèåâ.  êà÷åñòâå ïàðàìåòðà href ýòîãî òåãà ôîðìèðóåòñÿ ñòðîêà, ñîäåðæàùàÿ âûçîâ óïîìÿíóòîé ïðîöåäóðû LoadPic è ïåðåäà÷ó åé íåîáõîäèìûõ ïàðàìåòðîâ: ãîðèçîíòàëüíîãî ðàçìåðà êàðòèíêè size, èìåíè ôàéëà ñ êàðòèíêîé

Ëèñòèíã 6. function MakeSimpleItem(URLName,WinTitle) { HtmlStr = '\n'; document.write(HtmlStr); }

Ëèñòèíã 7. function MakeItem(size,URLName,WinTitle,Legend) { HtmlStr = '\n'; document.write(HtmlStr); }

72

© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ÎÁÐÀÇÎÂÀÍÈÈ. ¹ 1, 2006 ã.

Àëüáîì «Ñàíêò-Ïåòåðáóðã» â ôîðìàòå HTML: îïûò ðàçðàáîòêè Ëèñòèíã 8. var NW = 0; function LoadPic(size,URLName,WinTitle,Legend) { HtmlStr = ''; HtmlStr += ''+ WinTitle + ' \n'; HtmlStr += '<META HTTP-EQUIV="Content-Type" '; HtmlStr += ' CONTENT="text/html"> \n'; HtmlStr += ' \n'; HtmlStr += '' + WinTitle + '\n'; HtmlStr += '

. Âíóòðü êëåòî÷êè ïîìåùàåòñÿ íàçâàíèå òåìû è íàâèãàöèîííûé òåã , çàäàþùèé ïàðàìåòðîì href àäðåñ âûçûâàåìîé ñòðàíèöû, â äàííîì ñëó÷àå èìÿ âûçûâàåìîãî ôàéëà. Ïåðâîå ìåíþ – ñàìîå ïðîñòîå. Î÷åíü áëèçîê ê íåìó âûáîð íóæíîé âîçìîæíîñòè ïî êàðòå èëè äðóãîìó èçîáðàæåíèþ. Åãî ìû ñåé÷àñ è ðàññìîòðèì. 2. ÂÛÁÎÐ ÔÈÃÓÐÛ ÍÀ ÊÀÐÒÈÍÊÅ. Õàðàêòåðíûé ïðèìåð òàêîãî ìåíþ – àíñàìáëü Äâîðöîâîé ïëîùàäè. Îòñêàíèðóåì ïëàí Äâîðöîâîé ïëîùàäè èç êíèãè [1] è ñðåäñòâàìè ãðàôè÷åñêîãî ðåäàêòîðà äîâåäåì ýòó ñõåìó äî àêêóðàòíîãî ôàéëà.  ýòîì ïëàíå âû÷èñëèì â äîñòàòî÷íî ãðóáîì âèäå ãåîìåòðè÷åñêèå êîíòóðû, îêàéìëÿþùèå èíòåðåñóþùèå íàñ îáúåêòû: Çèìíèé äâîðåö, Ãëàâíûé øòàá, Àëåêñàíäðîâñêóþ êîëîííó, Ìàëûé Ýðìèòàæ, Øòàá Êîííîãâàðäåéñêîãî êîðïóñà, Àäìèðàëòåéñòâî (òîò, êòî çíàåò Ïåòåðáóðã, ëåãêî îïîçíàåò âñå ýòè îáúåêòû). Òåïåðü íóæíî ñ ïîìîùüþ òåãà <map> îïèñàòü ñàì ïëàí è âûäåëåííûå íà íåì îáëàñòè (ðèñóíîê 1). Ïîëó÷àåì òàêîé òåêñò (ñ íåêîòîðûìè óïðîùåíèÿìè) (ëèñòèíã 2). Êàæäîé îáëàñòè ñîïîñòàâëÿåòñÿ ïàðàìåòðîì href ñòðàíèöà ìåíþ, à ïàðàìåòðîì alt – òåêñò ïîäñêàçêè, ïîÿâëÿþùåéñÿ ïðè ïîïàäàíèè êóðñîðà â ýòó îáëàñòü. Ïàðàìåòð name îïðåäåëÿåò èìÿ êàðòû, îíî ïîÿâèòñÿ ïðè çàäàíèè êàðòû ñòàíäàðòíûì ãðàôè÷åñêèì òåãîì â êà÷åñòâå ïàðàìåòðà usemap (íà ýòîì èñïîëüçîâàíèå ýòîãî èìåíè çàêàí÷èâàåòñÿ, òàê ÷òî ñäåëàííûé íàìè âûáîð äàæå ñëèøêîì ñëîæåí) (ëèñòèíã 3). Ýòèì ñîçäàíèå ìåíþ òàêîãî òèïà è çàâåðøàåòñÿ. Ðèñóíîê 1. 1 Ñåé÷àñ ýòîò áëàãîðîäíûé âèä «óëó÷øåí» íîâîäåëàìè — «ôèòíåñ-ôðåãàòîì» ó Ìûòíèíñêîé íàáåðåæíîé è ïëàâó÷èì ôîíòàíîì ó ñàìîé Ñòðåëêè. 70 © ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ÎÁÐÀÇÎÂÀÍÈÈ. ¹ 1, 2006 ã. Àëüáîì «Ñàíêò-Ïåòåðáóðã» â ôîðìàòå HTML: îïûò ðàçðàáîòêè Ëèñòèíã 2. <map name="dvsq"> <area shape="rect" coords="130,52,280,180" href="ds_WP.html" alt="Çèìíèé äâîðåö"> <area shape="rect" coords="195,230,215,250" href="ds_AC.html" alt="Àëåêñàíäðîâñêàÿ êîëîííà"> <area shape="rect" coords="281,54,309,162" href="ds_mill.html" alt="Ìàëûé Ýðìèòàæ"> <area shape="poly" coords="0,143,20,143,16,72,58,70,60,188,0,188" href="ds_Admir.html" alt="Àäìèðàëòåéñòâî"> <area shape="poly" coords="288,172,300,172,300,220,350,220,350,235,288,235" href="ds_guard.html" alt="Øòàá Ãâàðäåéñêîãî êîðïóñà"> <area shape="poly" coords="30,290,35,280,138,278,180,325, 234,325,274,270,320,270,292,310,240,420,120,360,50,310" href="ds_HQ.html" alt="Ãëàâíûé øòàá"> <area shape="rect" coords="0,0,468,420" href="ds_default.html"> 3. ÑÏÈÑÊÎÂÎÅ ÌÅÍÞ Ðàññìîòðèì ìàëåíüêèé ôðàãìåíò ìåíþ «äðóãèõ ìîñòîâ»: íà ñòðàíèöå «Ìîñòû» ñàìûå âàæíûå âîäíûå ìàãèñòðàëè èìåþò îòäåëüíûå ïóíêòû, à îäèí ïóíêò âûäåëåí äëÿ âñåãî îñòàëüíîãî. Òàêèõ ìîñòîâ ìíîãî, ïðè- âåäåì òîëüêî ÷àñòü ìåíþ (ïàðàìåòð class â íåêîòîðûõ ñòèëÿõ ïîêàçûâàåò èñïîëüçîâàíèå êàñêàäíîé òàáëèöû ñòèëåé, îá ýòîì ëó÷øå ãîâîðèòü â äðóãîé ðàç) (ëèñòèíã 4). Ýòî ìåíþ ïðåäñòàâëÿåò ñîáîé, êàê è ïåðâîå, òàáëèöó, ñòðîêè êîòîðîé îòíîñÿòñÿ ê îäíîìó èç äâóõ òèïî⠖ ðàçäåëèòåëü èëè Ëèñòèíã 3. Ëèñòèíã 4. <SCRIPT language=JavaScript> ÌÓÇÅÉ ÇÀÍÈÌÀÒÅËÜÍÎÉ ÍÀÓÊÈ 71 Ðîìàíîâñêèé È.Â. Ëèñòèíã 5. function MakeSeparator(Text) { HtmlStr = '

'; HtmlStr += '      '; HtmlStr += Text + '

'; HtmlStr += ''; HtmlStr += WinTitle + '

'; HtmlStr += '' + WinTitle + '

'; HtmlStr += ' \n'; if (NW && !NW.closed) NW.close(); NW = window.open( "about:blank","Picture", "menubar=no,top=0,left=240,scrollbars=yes, status=yes,resizable=yes,location=no, width=760,height=640"); NW.document.write(HtmlStr); } URLName, òîãî æå WinTitle, èñïîëüçóåìî-

ãî òåïåðü â êà÷åñòâå çàãîëîâêà, è ïîÿñíèòåëüíîãî òåêñòà Legend. Îòìåòèì, ÷òî èíîãäà ñîïðîâîæäàþùèé òåêñò îêàçûâàëñÿ ñëèøêîì äëèííûì, è ïðèõîäèëîñü ëèáî ñîêðàùàòü åãî, ëèáî îòêàçûâàòüñÿ îò äèíàìè÷åñêîãî ôîðìèðîâàíèÿ ñòðàíèöû. Îñòàëîñü îïèñàòü ïðîöåäóðó ôîðìèðîâàíèÿ ñòðàíèöû (ëèñòèíã 8). Ýòà ïðîöåäóðà ãîòîâèò âñþ ñòðàíèöó ïîëíîñòüþ, ôîðìèðóÿ âåñü íóæíûé ôàéë êàê ñòðîêó HtmlStr. Ýòà ñòðîêà ïåðåäàåòñÿ âî âíîâü ñîçäàâàåìîå îêíî NW, êîòîðîå ïåðåä ýòèì îòêðûâàåòñÿ ìåòîäîì îêíà window.open. Ïî÷òè âñå åãî ïàðàìåòðû ÿ ñïèñàë ñ ÷üåãî-òî îáðàçöà (âïðî÷åì, îíè äîñòàòî÷íî ïîíÿòíû). Ñàìîìó ìíå ïðèøëîñü äîáàâèòü òîëüêî ïàðàìåòðû top=0, left=240, óñòàíàâëèâàþùèå ïîëîæåíèå âåðõíåãî ëåâîãî óãëà îêíà.

ëåã, ðàçìåð êàðòèíîê áûë ñòàíäàðòèçîâàí; ïî÷òè âñåãäà ýòî êâàäðàò ñî ñòîðîíîé â 200 ïèêñåëåé. Òàêèå êàðòèíêè õîðîøî êîìïîíóþòñÿ â ðÿäû, îáû÷íî ïî ÷åòûðå â ðÿä, ïîä íèìè ìîæíî ÷òî-íèáóäü íàïèñàòü, à âûçâàòü íóæíûé ðàçäåë ìîæíî êëèêíóâ ëèáî ïîäïèñü, ëèáî êàðòèíêó. Óäîáíî òàêîå ìåíþ çàïèñûâàòü ñëåäóþùèì îáðàçîì (ëèñòèíã 9). Çäåñü ìû âèäèì äâå ãðóïïû îïåðàòîðîâ.  êàæäîé èç íèõ ÷åòûðå îïåðàòîðà

4. ÌÅÍÞ Ñ ÊÀÐÒÈÍÊÀÌÈ

Òàêîé ôîðìàò îêàçàëñÿ î÷åíü óäîáíûì äëÿ âåðõíèõ óðîâíåé ìåíþ. Ïî ñîâåòó êîëÌÓÇÅÉ ÇÀÍÈÌÀÒÅËÜÍÎÉ ÍÀÓÊÈ

Òàêèå êàðòèíêè õîðîøî êîìïîíóþòñÿ â ðÿäû, îáû÷íî ïî ÷åòûðå â ðÿä...

73

Ðîìàíîâñêèé È.Â. Ëèñòèíã 9. <SCRIPT language=JavaScript> MenuIcon1 ñîçäàþò ïî îäíîé êëåòêå ñòðî-

êè íàøåé òàáëèöû, è îäèí îïåðàòîð

MenuIconRow, êîòîðûé ñîçäàåò èç ýòèõ êëå-

òîê ñòðîêó òàáëèöû. Âòîðàÿ ïðîöåäóðà çàïèñûâàåòñÿ ñîâñåì ïðîñòî: êîíêàòåíàöèÿ ñòðîê s1+s2+s3+s4 îêàéìëÿåòñÿ òåãîì è åãî çàêðûâàþùåé ïàðîé (ëèñòèíã 10). Èòàê, îñòàëîñü ðàññìîòðåòü ôóíêöèþ MenuIcon1 (ýòî äåéñòâèòåëüíî ôóíêöèÿ, åå ðåçóëüòàòîì ÿâëÿåòñÿ ñòðîêà, îïèñûâàþùàÿ îäíó êëåòêó òàáëèöû). Èìååì ëèñòèíã 11.

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

Ëèñòèíã 10. function MenuIconRow(s1,s2,s3,s4) { HtmlStr = '' + s1 + s2 + s3 + s4 + '\n'; document.write(HtmlStr); }

Ëèñòèíã 11. function MenuIcon1(Icon,Text,URLName) { Str = '; Str += '\n'; Str += '
'; Str += Text + '\n'; return Str; }

Ðîìàíîâñêèé Èîñèô Âëàäèìèðîâè÷, äîêòîð ôèçèêî-ìàòåìàòè÷åñêèõ íàóê, ïðîôåññîð ÑÏáÃÓ.

74

© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ÎÁÐÀÇÎÂÀÍÈÈ. ¹ 1, 2006 ã.