PDF - Xakep Online

Cñîâûõ ïåðåãðóçîê, òåì õóæå òâîÿ ïîòåíöèÿ. Íó, êîðî÷å, òûïîíÿë :).- Ïðè êîìïîíîâêå ñ ïîìîùüþ ôðåéìîâ âîçíèêàåò ïðîáëåìà ñðàçäåëåíèåì îòäåëüíûõ áëîêîâ è ãðàôèêè. Ñäåëàòü ýòî áåçâàçåëèíà ïðàêòè÷åñêè íåâîçìîæíî :). Íóæíî ëèáî äîáàâëÿòüïðîìåæóòî÷íûé ôðåéì, â êîòîðîì áóäåò ðàçäåëèòåëü, ëèáîïîìåùàòü åãî â îäèí èç ãðàíè÷àùèõ êàäðîâ. Íî ïðè óäàëåíèèýòîãî ôðåéìà âûäàâè èç òþáèêà åùå íåìíîãî âàçåëèíà è ïåðåíåñèâñå â äðóãîé ãðàíè÷àùèé :).ëàñòè äëÿ ññûëîê. À â-òðåòüèõ, òû ñìîæåøü âûäåëèòü îäíîöâåòíûåîáëàñòè, óìåíüøèâ çà ñ÷åò ýòîãî îáùèé ðàçìåð ôàéëîâ. Ïðèíåîáõîäèìîñòè ìîæíî ñäåëàòü ïðîçðà÷íûé èëè ÷åðåññòðî÷íûé*.gif. Çàêîí÷èâ ðåçêó, ñîáèðàåøü ïîëó÷åííûå ïðÿìîóãîëüíè÷êè âòàáëèöó, ïîñòàâèâ îáðàìëåíèå border=0. Òàì, ãäå äîëæíî áûòü íàïîëíåíèå,âûðåçàííûé ïðÿìîóãîëüíè÷åê ñòàâèøü â background, àíàïîëíåíèå - íåïîñðåäñòâåííî â ÿ÷åéêó.×àñòü III.Äâèãàåìñÿ åùå äàëüøå...È íàïîñëåäîê î âêóñíîñòÿõ - áîëåå ïðîäâèíóòûå òåõíîëîãèèïàãîñòðîåíèÿ. Âñå îíè óæå äàâíî è óñïåøíî èñïîëüçóþòñÿ áîëåå-ìåíååãðàìîòíûìè âåá-ìàñòåðàìè, íî âîò óëîæèòü ïîëíûéêóðñ â æóðíàë ÿ íå ñìîãó. Âïðî÷åì, íà ýòîé îñíîâå òû ñìîæåøüíà÷àòü (äåëàòü ýòî), à óæ êîí÷èòü ïîñòàðàéñÿ ñàìîñòîÿòåëüíî:-).- Ñîçäàâ ëþáîé ñàéò, äëÿ ðàñêðóòêè òåáå íóæíî áóäåò ïîñòàâèòüáàííåðû è ñ÷åò÷èêè. Ïîñòàâèòü ñ÷åò÷èê â index.html òûíå ñìîæåøü, â íåì îïðåäåëåíà ôðåéìîâàÿ ñòðóêòóðà. Îñòàíåòñÿñóíóòü åãî òîëüêî â îäèí èç ôðåéìîâ. Íî òîãäà ïðè èíäåêñàöèèâ ïîèñêîâèêå ãðóçèòüñÿ òîæå áóäåò íå index.html, àýòîò ôðåéì.Ýòî äàëåêî íå âñå ìèíóñû, èç-çà êîòîðûõ îòêàçàëèñü îò èñïîëüçîâàíèÿôðåéìîâ. Íî èõ âïîëíå äîñòàòî÷íî, ÷òîáû íå òðàòèòüñâîå äðàãîöåííîå âðåìÿ íà ïðîñìîòð òâîåãî ïîëóôàáðèêàòà :).Àëüòåðíàòèâà - èñïîëüçîâàíèå òàáëèö. Òàáëèöû êîìïåíñèðóþò âñåîïèñàííûå ìèíóñû.  îòëè÷èå îò îáû÷íîãî ôðåéìà ÿ÷åéêà òàáëèöûèìååò áîëüøå èçìåíÿåìûõ àòðèáóòîâ (âûðàâíèâàíèå, îòñòóïû,ðàçìåð, ôîí, îáðàìëåíèå). Íî ñàìîå ãëàâíîå - ïðè ëþáîì (ðàçóìíîì)êîëè÷åñòâå ÿ÷ååê òàáëèöû áðàóçåð ÷óâñòâóåò ñåáÿ ñóõî èêîìôîðòíî :).Âåðñòêà ñ ïîìîùüþ òàáëèöû äåëàåòñÿ ñëåäóþùèì îáðàçîì. Ñíà-÷àëà òû ðèñóåøü ýñêèç âñåé ñòðàíèöû, çàäàâ òðåáóåìûé ðàçìåðõîëñòà.  ðåçóëüòàòå ðèñóíîê ïîëó÷àåòñÿ êàê åäèíîå öåëîå. Íåêîòîðûåïåðåä ýòèì íà áóìàãå ñíà÷àëà ïðèêèäûâàþò, êàê ýòîáóäåò âûãëÿäåòü. Ïîäáèðàåøü øðèôòû, öâåòà, âçàèìíîåðàñïîëîæåíèå âñåõ ýëåìåíòîâ. Êîãäà ýñêèç áóäåò ãîòîâ,ðåæåøü åãî íàïðàâëÿþùèìè, íàïðèìåð, â Photoshop.Ïîëó÷àåòñÿ ñåòêà, êîòîðàÿ äåëèò òâîå õîçÿéñòâîíà n-îå êîëè÷åñòâî ïðÿìîóãîëüíè÷êîâ. Âûäåëÿÿïî î÷åðåäè ýòè ïðÿìîóãîëüíûå îáëàñòèïî íàïðàâëÿþùèì, âûðåçàåøü èõ èñîõðàíÿåøü êàê îòäåëüíûå ðèñóíêè(îáû÷íî *.gif). Êàêîé ñìûñë ðåçàòü?Âî-ïåðâûõ, ñòðàíèöàáóäåò áûñòðåå ïðîãðóæàòüñÿ.Âî-âòîðûõ,Àíàëîãè÷íî ôðåéìàì ðàçìåð òàáëèöû ìîæíî çàäàòü àáñîëþòíûìèëè îòíîñèòåëüíûì. Ïðè ýòîì òåáå íèêòî íå ìåøàåò èñïîëüçîâàòüíåñêîëüêî òàáëèö íà îäíîé ñòðàíèöå. ×òî äàñòòåáå èõ èñïîëüçîâàíèå? Êàæäàÿ îòäåëüíàÿ ñòðàíèöà ñòàíîâèòñÿïîëíîñòüþ àâòîíîìíîé. Åå óäîáíî èíäåêñèðîâàòüâ ïîèñêîâèêàõ, ñòàâèòü ñ÷åò÷èêè, èçìåíÿòü åå ñîäåðæèìîå.Ìîæíî ïîìåíÿòü ìåíþ íà ëþáîé ñòðàíè÷êå, íå çàòðàãèâàÿìåíþ äëÿ âñåõ îñòàëüíûõ. Âîçíèêàåò âîïðîñ - à êàê ñäåëàòü,åñëè ìåíþ îäíî è òî æå è ïîâòîðÿåòñÿ íà ìíîãèõñòðàíèöàõ? Ïåðâûé âàðèàíò: â ëîá êîïèðîâàòü è âñòàâëÿòüâ êàæäûé õòìë-ôàéë, ïîäîéäåò äëÿ íåáîëüøèõ ñàéòîâ. Âòîðîéâàðèàíò: îáçàâåäèñü ïðîãðàììîé òèïà Dreamweaver,êîòîðàÿ ïîçâîëÿåò ïîìå÷àòü îäèíàêîâûå áëîêè ïî âñåìñòðàíèöàì è ìåíÿòü èõ ñèíõðîííî ñðàçó âåçäå. À âåá-ìàñòåðàäåëàþò åùå ïðîùå: ïîìåùàþò èçìåíÿåìóþ ÷àñòü îòäåëüíî,à ñòðàíèöû ñîáèðàþò íà ëåòó, âñòàâëÿÿ èçìåíÿåìóþ÷àñòü â îáùèé êîä. Íî òóò óæå ïðèäåòñÿ ïîó÷èòü õîñòèíãñ ïîääåðæêîé ssi, cgi-ñêðèïòèíã èëè ÷òî-òî ïîäîáíîå.Åñòü è äðóãîé âûõîä. Åñëè òû âëàäååøü êàêèì-íèáóäü ïðîäâèíóòûìÿçûêîì ïðîãðàììèðîâàíèÿ :), ñäåëàé ïðîãðàììóëèíó,êîòîðàÿ áóäåò âñòàâëÿòü ââåäåííûé ôðàãìåíò êîäàìåæäó îïðåäåëåííûìè äâóìÿ óêàçàòåëÿìè, êîòîðûìè çàðàíååîáîçíà÷ü èçìåíÿåìóþ ÷àñòü â õòìë-êàõ. Ñàìè óêàçàòåëèñäåëàé â êà÷åñòâå êîììåíòàðèåâ.Ïîëåçíûå ñîâåòûïðè èñïîëüçîâàíèèòàáëèö- åñëè òû õî÷åøü, ÷òîáû øèðèíà ÿ÷ååê òàáëèöû íå ìåíÿëàñüäàæå ïðè àòîìíîì âçðûâå, ïðîñòî ïîìåñòè â íåå êàðòèíêóâûñîòîé â 1 ïèêñåë è øèðèíîé ÿ÷åéêè, à öâåò ñäåëàé òàêîéæå, êàê è öâåò ôîíà;- ÷òîáû ïîëó÷èòü ïðèâëåêàòåëüíîå îáðàìëåíèå òàáëèöû,íå èñïîëüçóé ñòàíäàðòíîå îáðàìëåíèå (border=0), à äîáàâüÿ÷åéêè ïî ïåðèìåòðó òàáëèöû, ïîìåñòèâ â íèõ ãðàôèêó;- åñëè îáðàìëåíèå äîëæíî áûòü íåèçâåñòíîé âûñîòû èëè ïîâòîðÿþùèìñÿ,ðàçìåñòè òîëüêî êóñîê îáðàìëåíèÿ, à îñòàëüíóþîáëàñòü çàïîëíè ÷åðåç àòðèáóòû bgcolor (åñëè îäíîöâåòíàÿçàëèâêà) èëè background (åñëè ðèñóíîê);- ïî âîçìîæíîñòè íå ñîâìåùàé â îäíîé òàáëèöå îïðåäåëåíèåðàçìåðîâ ÿ÷ååê â ïèêñåëàõ è â ïðîöåíòàõ îäíîâðåìåííî,íåêîòîðûå ñòàðûå âåðñèè áðàóçåðîâ íà ýòîì ñïîòûêàþòñÿ;×òî òàêîåCSS?Ïðè ñîçäàíèè ñâîåé ñòðàíè÷êè òû óòêíåøüñÿ â íåêîòîðûå îãðàíè÷åíèÿ:íå ñìîæåøü äåëàòü ñëîæíîå ôîðìàòèðîâàíèå (íàïðèìåð,íå ñìîæåøü èçìåíèòü èíòåðâàë ìåæäó ñèìâîëàìè, íå ñìîæåøüäàæå ïîñòàâèòü äâà ïðîáåëà ïîäðÿä - îíè àâòîìàòè÷åñêèïðåîáðàçóþòñÿ â îäèí), íå ñìîæåøü ñäåëàòü ñòðàíè÷êó òàê,÷òîáû îíà îäèíàêîâî îòîáðàæàëàñü â ðàçíûõ áðàóçåðàõ èëè âîäèíàêîâûõ áðàóçåðàõ, íî íà ìàøèíàõ ñ ðàçíîé êîíôèãóðàöèåé.Ïî÷åìó? Ïîòîìó ÷òî html èçíà÷àëüíî íå ïðåäíàçíà÷åí äëÿýòîãî, îí òîëüêî îïðåäåëÿåò ñòðóêòóðó ñòðàíè÷êè. Óìíûå ÷åëûïðèäóìàëè CSS (Cascade Style Sheet) - êàñêàäíàÿ òàáëèöà ñòèëåé,êîòîðàÿ ïîçâîëÿåò óïðàâëÿòü ñòèëÿìè è âíåøíèì âèäîì ïàãè.Ïðè ýòîì òâîå òâîðåíèå áóäåò îäèíàêîâî âûãëÿäåòü â ëþáîìáðàóçåðå è ñ ëþáîé êîíôèãóðàöèåé íà òà÷êå.Îïðåäåëåíèå ñòèëåé ïîìåùàåòñÿ ìåæäó òýãàìè è â çàãîëîâêå äîêóìåíòà (ìåæäó òýãàìè è ) èëè íåïîñðåäñòâåííî â ëþáîì òýãå.Äëÿ óäîáñòâà îïðåäåëåíèå òàáëèöû ñòèëåé èíîãäà âûíîñÿò âîòäåëüíûé ôàéë, òîãäà â çàãîëîâîê íóæíî äîáàâèòü ññûëêóíà ýòîò ôàéë â âèäå (â ýòîì ïðèìåðå ïîäêëþ÷àåòñÿ ôàéë òàáëèöûñòèëåé style.css). Âñå äëÿ ÷åãî? À äëÿ òîãî, ÷òîáû îäèíðàç ïðîïèñàòü íóæíûé òåáå âèä è äàëüøå çàáûòü îá ýòîì -âñå áóäåò ïîäñòàâëÿòüñÿ àâòîìàòè÷åñêè. Ïðèâåäó íåñêîëüêîïðèìåðîâ îïðåäåëåíèÿ òàáëèöû ñòèëåé â çàãîëîâêå è íåïîñðåäñòâåííîâ òýãå:Ïîëó÷èòñÿ ñèíèé çàãîëîâîê (îïðåäåëåíèå íåïîñðåäñòâåííîâ òýãå)À âîò òî æå ñàìîå, íî óæå â «ãîëîâå» ñòðàíèöû:h1 {color: blue}Ðàçðåæü è ñîáåðè â òàáëèöóÁîëåå ñëîæíûé ïðèìåð, îïðåäåëÿþùèé âñåì çàãîëîâêàì íà ñòðàíèöåñèíèé øðèôò, êóðñèâíîå íà÷åðòàíèå è âûðàâíèâàíèå ïî öåíòðó:h1, h2, h3, h4, h5, h6 {color: blue; font-style:italic; text-align: center}Ïðèâëåêàòåëüíûì ñàéò äåëàþòïðîäóìàííàÿ êîìïîíîâêà,êîíòåêñò è ãðàôè÷åñêîåîôîðìëåíèå. Êîìïîíîâêàðåàëèçóåòñÿ èìåííîñ ïîìîùüþ òýãîâ. Óçíàâîñíîâíûå òýãè è íàó÷èâøèñüèõ ïðàâèëüíî èñïîëüçîâàòü, òû,ñ÷èòàé, óæå íàïîëîâèíó ñäåëàëñâîþ ñòðàíè÷êó.Hòû ñìîæåøü îïðåäåëèòüîáïîëüçîâàòü,÷òîáûîïðåäåëèòü ðàçëè÷íûåïàðàìåòðû òåêñòà,ôîíà, øðèôòîâ, ãðàíèöè ïîëåé.Âûðàâíèâàíèåòåêñòàletter-spacing - îïðåäåëÿåò ðàññòîÿíèå ìåæäó ñèìâîëàìè(ïîääåðæèâàåò òîëüêî Internet Explorer);text-decoration - ïîçâîëÿåò ñîçäàâàòü ëèíèè íàä, ïîä è ïîâåðõ òåêñòàè ñîçäàâàòü ìåðöàþùèé òåêñò;vertical-align - ïîçâîëÿåò ïåðåìåùàòü ýëåìåíò ââåðõ è âíèç,âûðàâíèâàíèÿ åãî îòíîñèòåëüíî äðóãèõ ýëåìåíòîâ ïî âåðòèêàëè;text-align - îïðåäåëÿåò âûðàâíèâàíèå òåêñòà ïî ïðàâîìó êðàþ, ïîëåâîìó êðàþ, ïî öåíòðó èëè ïî øèðèíå;text-transform - èçìåíÿåò ðåãèñòð ñèìâîëîâ (ïðîïèñíûå èëè ñòðî÷íûå);text-indent - îïðåäåëÿåò îòñòóï àáçàöåâ è äðóãèõ ýëåìåíòîâ;line-heigth - îïðåäåëÿåò ðàññòîÿíèå ìåæäó ñòðîêàìè òåêñòà.Èçìåíåíèå öâåòàè ðèñóíêà ôîíàcolor - îïðåäåëÿåò öâåò òåêñòà ýëåìåíòà;background-color - îïðåäåëÿåò ôîíîâûé öâåò ýëåìåíòà;background-image - ïîçâîëÿåò èñïîëüçîâàòü ðèñóíîê â ôîðìàòå*.gif â êà÷åñòâå ôîíîâîãî èçîáðàæåíèÿ ýëåìåíòà;- ÷òîáû ñäåëàòü îòñòóï äî òåêñòà â òàáëèöå îò åå ãðàíèö,ëó÷øå íå èñïîëüçóé àòðèáóò cellpadding, à ïðîñòî íàðèñóéîòñòóï ãðàôèêîé.Êàê âèäíî èç ïðèìåðîâ, âñå äîñòàòî÷íî ïðîñòî. À òåïåðü ÿ ïåðå-÷èñëþ ñâîéñòâà êàñêàäíûõ òàáëèö ñòèëåé, êîòîðûå òû ìîæåøü èñ-background-repeat - îïðåäåëÿåò òèï çàïîëíåíèÿ ýëåìåíòà ðèñóíêîìôîíà: ïîâòîðåíèå ïî âåðòèêàëè èëè ãîðèçîíòàëè (ïîääåðæèâàåòòîëüêî Internet Explorer);BXakep Special Issue #2(15): World Wild Web 2 - february 2002 Page 39