Äèêîâ À.Â.
Äèêîâ Àíäðåé Âàëåíòèíîâè÷
ÌÍÎÃÎÎÁÐÀÇÈÅ ÃÈÏÅÐÑÑÛËÎÊ ÍÀ ÂÅÁ-ÑÒÐÀÍÈÖÀÕ Ïðîñìàòðèâàÿ âåá-ñòðàíèöû âî Âñåìèðíîé ïàóòèíå, îáÿçàòåëüíî âñòðåòèøü ôðàãìåíòû òåêñòà èëè ãðàôè÷åñêèå èçîáðàæåíèÿ, ïðè íàâåäåíèè íà êîòîðûå êóðñîðà ìûøè, îí ïðåâðàùàåòñÿ â êèñòü ðóêè ñ âûòÿíóòûì óêàçàòåëüíûì ïàëüöåì .  ýòîò ìîìåíò â ñòàòóñíîé ñòðîêå áðàóçåðà ïîÿâëÿåòñÿ àäðåñ (URL) ñòðàíèöû èëè èíîãî ðåñóðñà, êîòîðûé áóäåò çàãðóæåí â òîì ñëó÷àå, åñëè ùåëêíóòü ëåâîé êíîïêîé ìûøè. Òåêñò, êîòîðûé îðãàíèçîâàí íåëèíåéíî çà ñ÷åò ñîäåðæàíèÿ â íåì ññûëîê íà ôðàãìåíòû òîãî æå òåêñòà èëè íà äðóãèå òåêñòû èëè ðåñóðñû Èíòåðíåòà (âèäåî- èëè àóäèîôàéëû, ãðàôè÷åñêèå èçîáðàæåíèÿ, êàêîéëèáî ñëàéä ïðåçåíòàöèè è ò. ä.), íàçûâàåòñÿ ãèïåðòåêñòîì (òåðìèí ââåë Òåä Íåëüñîí). Äîêóìåíòû, íà êîòîðûå óñòàíîâëåíû ññûëêè, ìîãóò íàõîäèòüñÿ êàê íà ðàçíûõ ñåðâåðàõ ñåòè Èíòåðíåò, òàê è íà òîì æå êîìïüþòåðå, ãäå íàõîäèòñÿ ïðîñìàòðè-
Ðèñóíîê 1. Ñâÿçè â ãèïåðòåêñòå (Ñâÿçè ìåæäó àìåðèêàíñêèìè ïîëèòè÷åñêèìè áëîãàìè [1]).
58
âàåìàÿ ñòðàíèöà. Ñàìè óêàçàòåëè íàçûâàþò ãèïåðññûëêàìè. Ãèïåðñâÿçè ìåæäó ðàçëè÷íûìè âåá-äîêóìåíòàìè îäèíàêîâîé òåìàòèêè ìîãóò âûãëÿäåòü êàê ïîêàçàíî íà ðèñóíêå 1. Òî÷êàìè îáîçíà÷åíû äîêóìåíòû, ñîäåðæàùèå ãèïåðññûëêè, ëèíèÿìè îáîçíà÷åíû ãèïåðñâÿçè ìåæäó íèìè. Îãðîìíîå ÷èñëî âåá-ñòðàíèö â Èíòåðíåòå õðàíèòñÿ â ôîðìàòå HTML. Ñîçäàòü ãèïåðòåêñòîâóþ ññûëêó íà HTML ìîæíî òåãîì (îò ñëîâà Anchor ÿêîðü), êîòîðûé óïîòðåáëÿåòñÿ ñ ïàðàìåòðîì HREF, îò ñëîâà HyperREFerence ãèïåðññûëêà. Çíà÷åíèåì ïàðàìåòðà HREF ìîæåò áûòü URL Uniform Resource Locator (óíèâåðñàëüíûé óêàçàòåëü ðåñóðñà). URL ïðåäñòàâëÿåò ñîáîé ñëåäóþùóþ ñõåìó: Ïðîòîêîë://ñåðâåð/ïóòü ê ôàéëó. Èìÿ ãëàâíîé ñòðàíèöû âåá-ñàéòà íå óêàçûâàåòñÿ, òàê êàê áðàóçåðû åãî çíàþò êàê index.html Ïðèìåðû ïðîòîêîëîâ, ïî êîòîðûì ïåðåäàåòñÿ èíôîðìàöèÿ â ðàçëè÷íûõ ñëóæáàõ Èíòåðíåòà: • Http äëÿ âåá-ñòðàíèö, • Ftp äëÿ ôàéëîâ, • News äëÿ ãðóïï íîâîñòåé, • Mailto äëÿ ýëåêòðîííîé ïî÷òû. Ïðèìåðû URL. http://www.sura.ru/dikov/tests.htm http://www.informika.ru/ ftp://ftp.mccme.ru/pub/users/shen/progbook mailto:
[email protected] news:comp.lang.logo mailto:
[email protected]?subject=homepage
© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ÎÁÐÀÇÎÂÀÍÈÈ. ¹ 4, 2006 ã.
Ìíîãîîáðàçèå ãèïåðññûëîê íà âåá-ñòðàíèöàõ Òàáëèöà 1.  ïîñëåäíåì ïðèìåðå ïîêàçàíî, êàê ìîæíî Ïàðàìåòð Çíà÷åíèå ïàðàìåòðà Êîììåíòàðèé â ññûëêå çàðàíåå çàäàâàòü LINK íîìåð èëè íàçâàíèå öâåòà ïðîñìàòðèâàåìàÿ ññûëêà òåìó áóäóùåãî ñîîáùåíèÿ. Ñëåäóþùèé ïðèìåð ALINK íîìåð èëè íàçâàíèå öâåòà àêòèâíàÿ ññûëêà ïîêàçûâàåò êàê ìîæíî VLINK íîìåð èëè íàçâàíèå öâåòà ïîñåùåííàÿ ññûëêà ñîñëàòüñÿ íà 8-îé êàäð ïðåçåíòàöèè PowerPoint. http://www.newseducation.ru/.cmsc/ upload/docs/20061031171222KS.ppt#8 Òåã ÿâëÿåòñÿ êîíòåéíåðîì. Ìåæäó îòêðûâàþùèìñÿ è çàêðûâàþùèìñÿ òåãàìè Çàäàíèå 1. ðàçìåùàåòñÿ òåêñò, êîòîðûé ñòàíîâèòñÿ ïðè Çàãðóçèòå èç Èíòåðíåòà (http:// ïðîñìîòðå â áðàóçåðå ãèïåðòåêñòîì. www.sura.ru/dikov/Mybooks/STUFF.HTM) Ïðîâàéäåð àðõèâ «Áèáëèîòåêà Consilium Medicum.rar». Ñâÿçüèíôîðì Ðàñïàêóéòå åãî. Âû ïîëó÷èëè ÷àñòü âåá-ñàéòà.  äîêóìåíòå «ÏÐÈÍÖÈÏÛ ÐÀÖÈÎÃèïåðòåêñòîâûå ññûëêè â áðàóçåðå ïî ÍÀËÜÍÎÃÎ ËÅ×ÅÍÈß ÑÅÐÄÅ×ÍÎÉ óìîë÷àíèþ âûäåëÿåòñÿ ñèíèì öâåòîì è ïîäÍÅÄÎÑÒÀÒÎ×ÍÎÑÒÈ.htm» óäàëåíû íåêî÷åðêèâàíèåì. Ïðè ùåë÷êå ìûøüþ ññûëêà òîðûå URL ãèïåðññûëîê íà âíóòðåííèå ñòðàñòàíîâèòñÿ àêòèâíîé (Active Link) è ìåíÿíèöû ñàéòà. Âîññòàíîâèòå èõ. åò ñâîé öâåò. Åñëè âåðíóòüñÿ íà ýòó æå ñòðàíèöó ïîñëå ïîñåùåíèÿ ññûëêè (Visited Link), ÂÍÓÒÐÅÍÍÈÅ ÑÑÛËÊÈ È ÓÊÀÇÀÒÅËÈ òî åå öâåò ïîìåíÿåòñÿ íà òðåòèé âàðèàíò. Òàêèì îáðàçîì ðàçëè÷àþò òðè ñîñòîÿíèÿ  òîì ñëó÷àå, åñëè ññûëêà îñóùåñòâëÿññûëêè è êàæäîìó èç íèõ ñîîòâåòñòâóåò ñâîé åòñÿ íà âíóòðåíöâåò, êîòîðûé ìîæåò áûòü óñòàíîâëåí ðàçíþþ ñòðàíèöó ñàéðàáîò÷èêîì ñòðàíèöû â òåãå ñëåäóþòà, òî â êà÷åñòâå ùèìè àòðèáóòàìè (cì. òàáëèöó 1). URL óêàçûâàåòñÿ
Ãðóïïó ññûëîê ìîæíî îôîðìèòü â âèäå ñïèñêà. Íàïðèìåð, â âèäå ñïèñêà ïîèñêîâûõ ñèñòåì Èíòåðíåòà (ñì. ëèñòèíã 1).  âèäå ãèïåðññûëêè ìîæíî îôîðìèòü è ëþáîå ãðàôè÷åñêîå èçîáðàæåíèå. Ëèñòèíã 1.
Íàèáîëåå ïîïóëÿðíûå êàòàëîãè Èíòåðíåòà - Ñâîáîäíûé êàòàëîã
- Æåëòûå ñòðàíèöû INTERNET
- Diamond Team - êàòàëîã ðóññêîÿçû÷íûõ ðåñóðñîâ Internet
- LINKMAKER! - Êàòàëîã INTERNET ðåñóðñîâ
- Êàòàëîã ðåñóðñîâ URL
- Óëèòêà
- Ñîêðîâèùà Èíòåðíåòà. Ðîññèÿ è áëèæíåå çàðóáåæüå
- Êàðòà ðóññêîÿçû÷íûõ ðåñóðñîâ Èíòåðíåòà
Ó×ÅÁÍÀß ÌÀÑÒÅÐÑÊÀß
59
Äèêîâ À.Â. ïðîñòî ïóòü ê ôàéëó, áåç óêàçàíèÿ ïðîòîêîëà ñâÿçè. Ãàëåðåÿ ôîòîãðàôèé Íà ãëàâíóþ
 ñëó÷àå, êîãäà HTML-äîêóìåíò î÷åíü âûòÿíóò â äëèíó, óäîáíî ñîñòàâèòü íåáîëüøîå îãëàâëåíèå â íà÷àëå ñòðàíèöû â âèäå ñïèñêà ññûëîê, êîòîðûå áóäóò ïåðåìåùàòü âûáðàííûå ùåë÷êîì ðàçäåëû äîêóìåíòà ñðàçó íà ýêðàí, ÷òîáû èõ ìîæíî áûëî íå èñêàòü íà ñòðàíèöå.  êîíöå êàæäîãî òàêîãî ðàçäåëà ðàçìåùàåòñÿ ãèïåðññûëêà, íàïðàâëÿþùàÿ îáðàòíî íà íà÷àëî ñòðàíèöû, ãäå íàõîäèòñÿ îãëàâëåíèå. ×òîáû ñîçäàòü òàêîé óêàçàòåëü, íåîáõîäèìî â òåêñòå HTML-äîêóìåíòà ðàññòàâèòü èìåííûå ÿêîðÿ â íà÷àëå êàæäîãî ðàçäåëà, íà êîòîðûé çàòåì áóäåò îñóùåñòâëÿòüñÿ ññûëêà. Äëÿ ýòîãî ïðåäíàçíà÷åí òîò æå òåã , íî ñ àòðèáóòîì NAME, çíà÷åíèå êîòîðîìó äàåòñÿ ðàçðàáîò÷èêîì âåá-äîêóìåíòà. Ýòî çíà÷åíèå ÿâëÿåòñÿ óíèêàëüíûì èìåíåì òåêóùåãî ðàçäåëà (ëèñòèíã 2). Èç ïðèìåðà âèäíî, ÷òî îôîðìëåíî ãèïåðòåêñòîâîå îãëàâëåíèå ðàçäåëîâ ñòðàíèöû â âèäå îäíîé ñòðîêè òàáëèöû ñ âåðòèêàëüíûìè ãðàíèöàìè. Çäåñü íàäî îáðàòèòü âíèìàíèå â êîäå HTML íà òî, ÷òî URL âíóò-
ðåííåé ññûëêè íà÷èíàåòñÿ íå ñ ïðîòîêîëà ñâÿçè, à ñî çíàêà #, ïîñëå êîòîðîãî èäåò èìÿ ðàçäåëà, äàííîå òåãîì . Ñóùåñòâóåò ðåàëüíàÿ âîçìîæíîñòü äå-
ëàòü ññûëêó è íà èìåíîâàííóþ òàêèì æå îáðàçîì ÷àñòü âåá-ñòðàíèöû, ðàñïîëîæåííóþ íà óäàëåííîì êîìïüþòåðå â ñåòè Èíòåðíåò. Òàêàÿ ññûëêà áóäåò âûãëÿäåòü ïðèìåðíî òàê: Ïðîôåññèÿ Ýíäè Øàôðàíà àâòîðà êíèãè "Ñîçäàíèå Web-ñòðàíèö"
Çàäàíèå 2. Çàãðóçèòå èç Èíòåðíåòà (http:// www.sura.ru/dikov/Mybooks/STUFF.HTM) äîêóìåíò «Ïîñòàíîâëåíèå». Ðàçìåñòèòå åãî íà âåá-ñòðàíèöå. Ñîçäàéòå â íà÷àëå htmläîêóìåíòà ãèïåðòåêñòîâîå îãëàâëåíèå íà îñíîâíûå ðàçäåëû äîêóìåíòà. ÈÇÎÁÐÀÆÅÍÈß-ÊÀÐÒÛ
Ðèñóíîê 2.
60
Èçîáðàæåíèÿ-êàðòû ýòî òàêèå ãðàôè÷åñêèå èçîáðàæåíèÿ, îòäåëüíûå ÷àñòè êîòîðûõ ÿâëÿþòñÿ ãèïåðññûëêàìè. Óäîáíû îíè èç-çà òîãî, ÷òî íàãëÿäíî ïîêàçûâàþò ñîäåðæàíèå èìåþùåéñÿ ññûëêè è îáúåäèíÿþò ãðóïïó ññûëîê â åäèíîå öåëîå. Ïðàêòè÷åñêè ëþáîå èçîáðàæåíèå ìîæíî ïðåâðàòèòü â èçîáðàæåíèå-êàðòó. Êàæäîìó ôðàãìåíòó èçîáðàæåíèÿ ñîîòâåòñòâóþò ñîáñòâåííûå êîîðäèíàòû, âûðàæàåìûå â ïèêñåëÿõ. Ëåâûé âåðõíèé óãîë êàðòû èìååò êîîðäèíàòó (0,0) (ðèñóíîê 2).
© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ÎÁÐÀÇÎÂÀÍÈÈ. ¹ 4, 2006 ã.
Ìíîãîîáðàçèå ãèïåðññûëîê íà âåá-ñòðàíèöàõ Â HTML-äîêóìåíòå íåîáõîäèìî îòêðûòü èìåííîé ðàçäåë-êîíòåéíåð äëÿ îïèñàíèÿ èçîáðàæåíèÿ-êàðòû. <MAP NAME="Êàðòà 1">
 ýòîì ðàçäåëå äëÿ êàæäîé îáëàñòè êàðòû, êîòîðàÿ áóäåò ñëóæèòü ññûëêîé, ðàçìåùàåòñÿ òåã ñ ïàðàìåòðàìè. Ñóùåñòâóåò âîçìîæíî îïèñàòü îáëàñòè, èìåþùèå ôîðìó ïðÿìîóãîëüíèêîâ, ìíîãîóãîëüíèêîâ è êðóãîâ.
Ëèñòèíã 2. ÊÎÍÖÅÏÖÈß ÌÀÒÅÌÀÒÈ×ÅÑÊÎÃÎ ÎÁÐÀÇÎÂÀÍÈß
| Ïîäãîòîâêà è ïîâûøåíèå êâàëèôèêàöèè ïåäàãîãè÷åñêèõ êàäðîâ | Çíà÷åíèå ìàòåìàòè÷åñêîãî îáðàçîâàíèÿ | Îáùèå ïðèíöèïû |
Ïîäãîòîâêà è ïîâûøåíèå êâàëèôèêàöèè ïåäàãîãè÷åñêèõ êàäðîâ
Ñëîæèâøàÿñÿ ñèñòåìà âîñïðîèçâîäñòâà ïåäàãîãè÷åñêèõ êàäðîâ ñîõðàíÿåò òðàäèöèîííóþ ïðèâåðæåííîñòü ê «çíàíèåâîé» ïàðàäèãìå ïåäàãîãè÷åñêîãî îáðàçîâàíèÿ. Ìåæäó òåì ïðèðîäà ñîâðåìåííîé ïðîôåññèîíàëüíîé äåÿòåëüíîñòè òðåáóåò ó÷èòåëÿ, öåííîñòíûìè óñòàíîâêàìè êîòîðîãî ÿâëÿþòñÿ ïðèîðèòåò ëè÷íîñòíîãî ðàçâèòèÿ øêîëüíèêîâ, åãî ñïîñîáíîñòü ñâîáîäíî îðèåíòèðîâàòüñÿ â ñëîæíûõ ñîöèîêóëüòóðíûõ îáñòîÿòåëüñòâàõ, ãîòîâíîñòü îáñëóæèâàòü íå òîëüêî èííîâàöèîííûå ïðîöåññû, íî è ïðîöåññû òâîð÷åñòâà â øèðîêîì ñìûñëå.
Âåðíóòüñÿ â íà÷àëî Çíà÷åíèå ìàòåìàòè÷åñêîãî îáðàçîâàíèÿ
 òå÷åíèå ìíîãèõ ñòîëåòèé ìàòåìàòèêà ÿâëÿåòñÿ íåîòúåìëåìûì ýëåìåíòîì ñèñòåìû îáùåãî îáðàçîâàíèÿ âñåõ ñòðàí ìèðà. Îáúÿñíÿåòñÿ ýòî óíèêàëüíîñòüþ ðîëè ó÷åáíîãî ïðåäìåòà «Ìàòåìàòèêà» â ôîðìèðîâàíèè ëè÷íîñòè. Îáðàçîâàòåëüíûé, ðàçâèâàþùèé ïîòåíöèàë ìàòåìàòèêè îãðîìåí.
Óíèâåðñàëüíûé ýëåìåíò ìûøëåíèÿ ëîãèêà. Ïîëíîöåííîå ðàçâèòèå ìûøëåíèÿ ñîâðåìåííîãî ÷åëîâåêà, îñóùåñòâëÿåìîå â õîäå ñàìîïîçíàíèÿ è îáùåíèÿ ñ äðóãèìè ëþäüìè, â õîäå ðàññóæäåíèé è çíàêîìñòâà ñ îáðàçöàìè ìûøëåíèÿ, íåâîçìîæíî áåç ôîðìèðîâàíèÿ èçâåñòíîé ëîãè÷åñêîé êóëüòóðû.
Âåðíóòüñÿ â íà÷àëî Îáùèå ïðèíöèïû
Ãëàâíûé ïðèíöèï êîíöåïöèè ìàòåìàòè÷åñêîãî îáðàçîâàíèÿ â 12-ëåòíåé øêîëå, íàïðàâëåííûé íà îñóùåñòâëåíèå ýòèõ èäåé, ñîñòîèò â ðåàëüíîì îñóùåñòâëåíèè â ìåòîäè÷åñêîé ñèñòåìå îáó÷åíèÿ ìàòåìàòèêå äâóõ ãåíåðàëüíûõ ôóíêöèé øêîëüíîãî ìàòåìàòè÷åñêîãî îáðàçîâàíèÿ, îïðåäåëÿåìûõ ãëîáàëüíûì ñîâïàäåíèåì è ëîêàëüíûìè ðàçëè÷èÿìè îáùåñòâåííûõ è ëè÷íûõ èíòåðåñîâ â ìàòåìàòè÷åñêèõ çíàíèÿõ è ìàòåìàòè÷åñêîé êóëüòóðå:
îáðàçîâàíèå ñ ïîìîùüþ ìàòåìàòèêè, ñîáñòâåííî ìàòåìàòè÷åñêîå îáðàçîâàíèå. Âåðíóòüñÿ â íà÷àëî
Ó×ÅÁÍÀß ÌÀÑÒÅÐÑÊÀß
61
Äèêîâ À.Â. ÏÐßÌÎÓÃÎËÜÍÈÊ (RECTangle) 0, 0
188, 57
ÊÐÓÃ (CIRCLE)
50 200,100
ÌÍÎÃÎÓÃÎËÜÍÈÊ (POLYgon) 255, 22
124, 49 182, 95 80, 99
Îíà îïèñûâàåòñÿ ïîñëåäíåé â êîíòåéíåðå <MAP> è äîëæíà ïåðåêðûâàòü ôîðìîé âñå èçîáðàæåíèå-êàðòó. Ïîñëå òîãî êàê âñå îáëàñòè îïèñàíû è çàäàíà ïðè æåëàíèè ññûëêà ïî óìîë÷àíèþ, â íóæíîå ìåñòî HTML-äîêóìåíòà âñòàâëÿåòñÿ íåïîñðåäñòâåííî ñàìî èçîáðàæåíèåêàðòà òåãîì ñ ïàðàìåòðîì USEMAP, çíà÷åíèåì êîòîðîãî ÿâëÿåòñÿ íàçâàíèå èçîáðàæåíèÿ, äàííîå ïàðàìåòðîì NAME òåãà <MAP>.
Äëÿ îáëåã÷åíèÿ ñîçäàíèÿ èçîáðàæåíèÿêàðòû ñóùåñòâóþò ñïåöèàëüíûå âèçóàëüíûå èíñòðóìåíòû â ðåäàêòîðàõ ñîçäàíèÿ âåá-ñàéòîâ. Ñíà÷àëà Âû çàãðóæàåòå èçîáðàæåíèå â ôîðìàòå GIF èëè JPEG, à çàòåì âèçóàëüíûì îáðàçîì, ñ ïîìîùüþ ñîîòâåòñòâóþùèõ èíñòðóìåíòîâ, ðàçáèâàåòå èçîáðàæåíèå íà îáëàñòè è âíîñèòå â äèàëîãîâîå îêíî àäðåñà ññûëîê. Ðåäàêòîð àâòîìàòè÷åñêè ãåíåðèðóåò ñîîòâåòñòâóþùèé HTML êîä. Çàäàíèå 3. Ïîäáåðèòå èç èìåþùèõñÿ ðèñóíêîâ èçîáðàæåíèå-êàðòó èëè ñîçäàéòå ñîáñòâåííîå. Ðàçìåñòèòå åãî íà âåá-ñòðàíèöå è èñïîëüçóéòå ïî íàçíà÷åíèþ. ÏÑÅÂÄÎÊËÀÑÑÛ ÑÑÛËÎÊ
240, 159
Åñëè ôðàãìåíòû èìåþò îáëàñòü ïåðåêðûòèÿ, òî ñðàáàòûâàåò ññûëêà òîãî ôðàãìåíòà ðèñóíêà, êîòîðûé ñòîèò ïåðâûì â îïèñàíèè îáëàñòåé. ÑÑÛËÊÀ ÏÎ ÓÌÎË×ÀÍÈÞ
Ïðè æåëàíèè ìîæíî óñòàíîâèòü îáùóþ ññûëêó äëÿ âñåõ òåõ ÷àñòåé èçîáðàæåíèÿ-êàðòû, ãäå íå áûëè îïðåäåëåíû ññûëêè. Òàêóþ ññûëêó è íàçûâàþò ññûëêîé ïî óìîë÷àíèþ.
62
Íåðåäêî ó âåá-äèçàéíåðîâ âîçíèêàþò æåëàíèÿ áîëåå «òîíêîãî» ñòèëåâîãî îôîðìëåíèÿ ñîçäàâàåìûõ ñòðàíèö, ÷åì ïîçâîëÿþò ñòàíäàðòíûå òåãè. Äëÿ ðåàëèçàöèè æåëàíèé ïðåäíàçíà÷åíû êàñêàäíûå òàáëèöû ñòèëåé (CSS). Îíè ïîçâîëÿþò èçìåíÿòü ðÿä ñâîéñòâ (îáîçíà÷åííûõ è íå òîëüêî â HTML) êàæäîãî ýëåìåíòà âåá-äîêóìåíòà, â òîì ÷èñëå ãèïåðññûëîê. Êàñêàäíûå òàáëèöû ñòèëåé ïîääåðæèâàþò ñëåäóþùèå ïñåâäîêëàññû ññûëîê: :link (íåïîñåùåííàÿ ññûëêà), :visited (ïîñåùåííàÿ ññûëêà), :hover (íåîïðåäåëåííàÿ ññûëêà, ìûøèíûé êóðñîð íàâèñàåò íàä ññûëêîé), :active (àêòèâíàÿ, òî åñòü âûáðàííàÿ ññûëêà).
© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ÎÁÐÀÇÎÂÀÍÈÈ. ¹ 4, 2006 ã.
Ìíîãîîáðàçèå ãèïåðññûëîê íà âåá-ñòðàíèöàõ Ïðèìåð èñïîëüçîâàíèÿ: <style type="text=css"> A:link { color: red } A:visited { color: blue } A:hover { color: yellow } A:active { color: lime } A:focus:hover { background: gold } ñòðàíèöà 1
ñòðàíèöà 2
ìûì ãèïåðññûëêó, íåîáõîäèìî ïðèáåãíóòü è ê HTML, è ê CSS, è íàïèñàòü íåáîëüøîé ñöåíàðèé íà JavaScript (ëèñòèíã 4). Ñîáûòèÿ onClick, onMouseOver, onMouseOut âîçíèêàþò ïðè ùåë÷êå ìûøêè, íàâèñàíèè êóðñîðà íàä ýëåìåíòîì âåá-ñòðàíèöû è ïðè ïåðåìåùåíèè ìûøêè çà îáëàñòü ýëåìåíòà ñîîòâåòñòâåííî. Îáðàáîò÷èêè ýòèõ ñîáûòèé ÿâëÿþòñÿ ñöåíàðèÿìè JavaScript. Ñöåíàðèé document.location='variant1.htm' èçìåíÿåò àäðåñ html-äîêóìåíòà íà variant1.htm. Ñêðèïò window.status=variant1.htm èçìåíÿåò òåêóùåå ñîîáùåíèå ñòàòóñíîé ñòðîêè òàê, êàê ýòî îáû÷íî ïðîèñõîäèò ïðè èñïîëüçîâàíèè «ðåàëüíîé» ãèïåðññûëêè, ñîçäàííîé òåãîì . ×òîáû àäðåñ ãèïåðññûëêè èñ÷åçàë èç ñòàòóñíîé ñòðîêè áðàóçåðà ïîñëå ïåðåìåùåíèÿ êóðñîðà ìûøêè çà ïðåäåëû ÿ÷åéêè òàáëèöû, èñïîëü-
Âàæíî çàìåòèòü ïîðÿäîê ñëåäîâàíèÿ â îïèñàíèè äàííûõ ñòèëåé. Îí äîëæåí áûòü êàê â ïðèâåäåííîì ïðèìåðå. Äàííûé ñïîñîá îïèñàíèÿ ñòèëåé èçìåíÿåò îôîðìëåíèå âñåõ ãèïåðññûëîê íà âåá-ñòðàíèöå. ×òîáû ïðèìåíèòü ñòèëü ê îòäåëüíûì ýëåìåíòàì html-äîêóìåíòà, íåîáõîäèìî èñïîëüçîâàòü êëàññû.  ïðèâåäåííîì íèæå ïðèìåðå îïèñàíû äâà êëàññà "p1" è "p2" â ðàçäåëå style. Ïðèìåíåíèå êëàññà ê ýëåìåíòó îñóùåñòâëÿåòñÿ ÷åðåç àòðèáóò class òåãà ýëåìåíòà (â íàøåì ñëó÷àå ýòî òåã ) (ëèñòèíã 3). Êðîìå ïñåâäîêëàññîâ ê ãèïåðññûëêàì ìîæíî ïðèìåíÿòü è Ëèñòèíã 3. ìíîãèå äðóãèå ñâîéñòâà ñòèëåé. <style type="text=css"> Òàáëèöó ñòèëåé ìîæíî ñêà÷àòü A:link.p1 { color: silver } èç Èíòåðíåòà ïî àäðåñó http:// A:visited.p1 { color: aquamarine } www.sura.ru/dikov/Mybooks/ A:hover.p1 { color: yellow } html.htm èëè http://www.w3.org/ A:active.p1 { color: lime } TR/REC-CSSÐ ÈÐ2 A:focus:hover.p1 { background: gold } Çàäàíèå 4. Èñïîëüçóÿ ñòèëè, ñîçäàéòå ðàçíîîáðàçíûå ãèïåðññûëêè íà îäíîé âåá-ñòðàíèöå. Îäíàêî íå âñå çàäà÷è âåá-äèçàéíà ìîæíî ðåøèòü ñðåäñòâàìè HTML è CSS. Î÷åíü ïîïóëÿðíîé òåõíîëîãèé äëÿ óëó÷øåíèÿ âåáñòðàíèö ÿâëÿåòñÿ JavaScript. Òàê, íàïðèìåð, ÷òîáû ñäåëàòü èç ÿ÷åéêè òàáëèöû âìåñòå ñ åå ñîäåðæèÓ×ÅÁÍÀß ÌÀÑÒÅÐÑÊÀß
A:link.p2 { color: red } A:visited.p2 { color: DarkViolet } A:hover.p2 { color: pink } A:active.p2 { color: tomato } A:focus:hover.p2 { background: forestGreen } ñòðàíèöà 1
ñòðàíèöà 2
ñòðàíèöà 30
ñòðàíèöà 32
63
Äèêîâ À.Â. Ëèñòèíã 4. <style> td.p {cursor: pointer} Ìíîãîîáðàçèå ãèïåðññûëîê íà âåá-ñòðàíèöàõ <script> window.defaultStatus=Ãîòîâî
çóåì êîìàíäó status=defaultStatus. Ãäå defaultStatus ñîîáùåíèå ñòàòóñíîé ñòðîêè, óñòàíîâëåííîå ïî óìîë÷àíèþ.  ïðèìåðå ìû åãî çàäàåì ñêðèïòîì window.defaultStatus='Ãîòîâî'. (Ïðèìåð îïðîáîâàí â áðàóçåðàõ Internet Explorer è Opera)
Çàäàíèå 5. Èñïîëüçóÿ ñòèëè è JavaScript, ñäåëàéòå íåñêîëüêî ÿ÷ååê òàáëèöû (ôîí ÿ÷åéêè ïëþñ ñîäåðæèìîå) ãèïåðññûëêàìè. Äëÿ êîìïàêòíîñòè êîäà íàïèøèòå ôóíêöèþ íà JavaScript.
Âàðèàíòû
1
2
3
Ëèòåðàòóðà 1. Äåìáèíñêàÿ Í. Ñîöèîëîãè ñîñòàâëÿþò êàðòó êèáåðïðîñòðàíñòâà // Êîìïüþëåíòà. 3 èþëÿ 2006. http://net.compulenta.ru//275403/?phrase_id=4995121 2. Ìàê-Ôåäðèñ Ï. Èñïîëüçîâàíèå JavaScript. Ñïåöèàëüíîå èçäàíèå. Ì.: Âèëüÿìñ, 2002. 3. Ìîðèñ Á. HTML â äåéñòâèè. ÑÏá: Ïèòåð, 1997.
Äèêîâ Àíäðåé Âàëåíòèíîâè÷, êàíäèäàò ïåäàãîãè÷åñêèõ íàóê, äîöåíò êàôåäðû èíôîðìàòèêè è ìåòîäèêè ïðåïîäàâàíèÿ èíôîðìàòèêè ÏÃÏÓ èì. Â.Ã. Áåëèíñêîãî, ã. Ïåíçà.
64
© ÊÎÌÏÜÞÒÅÐÍÛÅ ÈÍÑÒÐÓÌÅÍÒÛ Â ÎÁÐÀÇÎÂÀÍÈÈ. ¹ 4, 2006 ã.
