{"id":14252,"date":"2011-01-06T11:00:00","date_gmt":"2011-01-06T10:00:00","guid":{"rendered":"http:\/\/www.numlock.edu.pl\/blog\/2011\/01\/06\/witryny-google-tworzymy-nawigacje\/"},"modified":"2011-01-06T11:00:00","modified_gmt":"2011-01-06T10:00:00","slug":"witryny-google-tworzymy-nawigacje","status":"publish","type":"post","link":"http:\/\/www.numlock.edu.pl\/blog\/2011\/01\/06\/witryny-google-tworzymy-nawigacje\/","title":{"rendered":"Witryny Google &#8211; tworzymy nawigacj\u0119"},"content":{"rendered":"<p>Ods\u0142ony: 31<\/p><p>We wpisie <a href=\"http:\/\/komputipsy.blogspot.com\/2010\/12\/witryny-google-jak-utworzyc-witryne.html\">Witryny Google &#8211; jak utworzy\u0107 witryn\u0119<\/a> powiedzieli\u015bmy, jak za\u0142o\u017cy\u0107 witryn\u0119 w systemie Witryny Google. Kluczowym problemem jest oczywi\u015bcie nawigacja w takiej witrynie, zatem w tym miejscu poka\u017cemy krok po kroku, jak zorganizowa\u0107 spis tre\u015bci. Przyjmiemy tu najbardziej popularn\u0105 metod\u0119, jak\u0105 jest panel nawigacyjny po lewej stronie witryny.<\/p>\n<p>Jak powiedzieli\u015bmy poprzednio, serwis automatycznie wstawia system nawigacyjny, umieszczony w lewym panelu.<\/p>\n<p>Zastan\u00f3w si\u0119 teraz nad struktur\u0105 swoich stron. W naszym przyk\u0142adzie przyjmiemy hierarchiczny uk\u0142ad, kt\u00f3ry mo\u017ce mie\u0107 przyk\u0142adow\u0105 posta\u0107:<\/p>\n<hr \/>\n<ul>\n<li>Rodzina i przyjaciele\n<ul>\n<li>O mnie <\/li>\n<li>Moi bliscy <\/li>\n<li>Przyjaciele <\/li>\n<\/ul>\n<\/li>\n<li>Zaj\u0119cia\n<ul>\n<li>Praca zawodowa <\/li>\n<li>Hobby i sport <\/li>\n<\/ul>\n<\/li>\n<li>Sie\u0107 <\/li>\n<li>Podr\u00f3\u017ce <\/li>\n<\/ul>\n<hr \/>\n<p>Taki uk\u0142ad jest najbardziej przejrzysty.<\/p>\n<ul>\n<li>Aby utworzy\u0107 pierwsz\u0105 stron\u0119, kliknij przycisk <strong>Utw\u00f3rz stron\u0119<\/strong>. <\/li>\n<\/ul>\n<p><a href=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF1my9SgI\/AAAAAAAAJOM\/T2RMlzyMx8U\/s1600-h\/image%5B2%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh6.ggpht.com\/_2COsbOM02Pw\/TSQF2QwomaI\/AAAAAAAAJOU\/1KdaDkGbLkk\/image_thumb.png?imgmax=800\" width=\"364\" height=\"95\" \/><\/a><\/p>\n<ul>\n<li>Na nast\u0119pnej stronie zostaw zaznaczony szablon <strong>Strona internetowa<\/strong>. <\/li>\n<li>W polu <strong>Nazwa<\/strong> wpisz nazw\u0119 strony &#8211; Google automatycznie utworzy cz\u0142on adresowy. Tutaj ju\u017c jeste\u015b we w\u0142asnej przestrzeni, zatem Google nie musi ju\u017c por\u00f3wnywa\u0107 takiego adresu z adresami stron w innych witrynach. <\/li>\n<li>Zaznacz opcj\u0119 <strong>Umie\u015b\u0107 stron\u0119 pod Strona g\u0142\u00f3wna<\/strong>. <\/li>\n<li>Kliknij przycisk <strong>Utw\u00f3rz stron\u0119<\/strong>. <\/li>\n<\/ul>\n<p><a href=\"http:\/\/lh3.ggpht.com\/_2COsbOM02Pw\/TSQF3NweD3I\/AAAAAAAAJOc\/hnGx7KIm5MI\/s1600-h\/image%5B5%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF3zJY5tI\/AAAAAAAAJOk\/pCRa2yR7vUs\/image_thumb%5B1%5D.png?imgmax=800\" width=\"364\" height=\"249\" \/><\/a><\/p>\n<ul>\n<li>System powr\u00f3ci do edycji strony &#8211; wpisz kilka s\u0142\u00f3w obja\u015bnienia i kliknij przycisk <strong>Zapisz<\/strong>. <\/li>\n<\/ul>\n<p><a href=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF4W_elzI\/AAAAAAAAJOs\/gKDIBwWQyDU\/s1600-h\/image%5B8%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh3.ggpht.com\/_2COsbOM02Pw\/TSQF5ENChDI\/AAAAAAAAJO0\/3b11HamxMZs\/image_thumb%5B2%5D.png?imgmax=800\" width=\"364\" height=\"237\" \/><\/a><\/p>\n<ul>\n<li>B\u0119d\u0105c na tej stronie kliknij znowu <strong>Utw\u00f3rz stron\u0119<\/strong>, po czym utw\u00f3rz podstron\u0119 (np. <em>O mnie<\/em>), umieszczaj\u0105c j\u0105 pod stron\u0105 <em>Rodzina i przyjaciele<\/em>. <\/li>\n<li>Po powrocie do edycji strony na razie nie wpisuj jeszcze tre\u015bci (zrobisz to p\u00f3\u017aniej) &#8211; kliknij <strong>Zapisz<\/strong>. <\/li>\n<li>Kliknij stron\u0119 <em>Rodzina i przyjaciele<\/em> i w analogiczny spos\u00f3b utw\u00f3rz inne podstrony, czyli <em>Moi bliscy<\/em> i <em>Przyjaciele<\/em> &#8211; nie przejmuj si\u0119 jednak, \u017ce nie widzisz tych podstron w nawigacji, zaraz o tym powiemy. <\/li>\n<li>Wr\u00f3\u0107 do strony g\u0142\u00f3wnej i w taki sam spos\u00f3b utw\u00f3rz kolejne strony, a w ich ramach podstrony, zgodnie z przyj\u0119t\u0105 hierarchi\u0105. Pami\u0119taj zawsze, aby przy wyborze szablonu i podawaniu nazwy umieszcza\u0107 je pod w\u0142a\u015bciwymi stronami &#8211; dzia\u0142y pod stron\u0105 g\u0142\u00f3wn\u0105, podstrony w obr\u0119bie dzia\u0142\u00f3w. Je\u015bli si\u0119 pomylisz, mo\u017cesz skorzysta\u0107 z ko\u0142a ratunkowego &#8211; po prawej stronie masz przycisk <strong>Wi\u0119cej czynno\u015bci<\/strong>, a w nim polecenie <strong>Przenie\u015b stron\u0119<\/strong>. <\/li>\n<\/ul>\n<p>Zobaczysz taki widok.<\/p>\n<p><a href=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF5ldhQOI\/AAAAAAAAJO8\/aBJzrdUJoPU\/s1600-h\/image%5B11%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF6YWW3zI\/AAAAAAAAJPE\/XRZQRxMbZfM\/image_thumb%5B3%5D.png?imgmax=800\" width=\"364\" height=\"278\" \/><\/a><\/p>\n<p>Na razie nie wida\u0107 podstron na najni\u017cszym poziomie, a jedynie dzia\u0142y b\u0119d\u0105ce w hierarchii pod stron\u0105 g\u0142\u00f3wn\u0105. Poprawmy to zatem.<\/p>\n<ul>\n<li>Kliknij <strong>Edytuj pasek boczny<\/strong>. <\/li>\n<li>W polu <strong>Nawigacja<\/strong> kliknij <strong>Edytuj<\/strong> (tu, gdzie na ilustracji wskazuje kursor). <\/li>\n<\/ul>\n<p><a href=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF7WeitTI\/AAAAAAAAJPM\/6uSFbFSRbPk\/s1600-h\/image%5B14%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh6.ggpht.com\/_2COsbOM02Pw\/TSQF8bGEgrI\/AAAAAAAAJPU\/maXDCgfukmE\/image_thumb%5B4%5D.png?imgmax=800\" width=\"364\" height=\"334\" \/><\/a><\/p>\n<ul>\n<li>W okienku <strong>Konfiguruj nawigacj\u0119<\/strong> wybierz <strong>Poziomy stron do pokazania: <em>wszystkie<\/em><\/strong> i kliknij <strong>OK<\/strong>. <\/li>\n<\/ul>\n<p><a href=\"http:\/\/lh3.ggpht.com\/_2COsbOM02Pw\/TSQF9IQiNiI\/AAAAAAAAJPc\/Mpdzj5t3Rh8\/s1600-h\/image%5B17%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh6.ggpht.com\/_2COsbOM02Pw\/TSQF9gy_rzI\/AAAAAAAAJPk\/kCl22FLGZb0\/image_thumb%5B5%5D.png?imgmax=800\" width=\"326\" height=\"306\" \/><\/a><\/p>\n<ul>\n<li>Po powrocie do strony zarz\u0105dzania kliknij przycisk <strong>Zapisz zmiany<\/strong>. <\/li>\n<li>Kliknij <strong>Powr\u00f3t do witryny<\/strong>, aby wr\u00f3ci\u0107 do edycji witryny. <\/li>\n<\/ul>\n<p>Zobaczysz tym razem wszystkie swoje podstrony &#8211; wystarczy rozwin\u0105\u0107 hierarchi\u0119 przyciskami strza\u0142ek.<\/p>\n<p><a href=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF-aGW1iI\/AAAAAAAAJPs\/EnCmO-4Hl28\/s1600-h\/image%5B20%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQF-6twXcI\/AAAAAAAAJP0\/PSb4y4G3YHc\/image_thumb%5B6%5D.png?imgmax=800\" width=\"364\" height=\"357\" \/><\/a><\/p>\n<p>No ale znowu mamy ma\u0142y problem &#8211; Google uk\u0142ada to wszystko alfabetycznie, a nie wed\u0142ug wa\u017cno\u015bci &#8211; jest jasne, \u017ce <em>Rodzina i przyjaciele<\/em> powinno by\u0107 na pocz\u0105tku, a <em>Podr\u00f3\u017ce<\/em> raczej pod koniec, a nie odwrotnie. Mamy jednak na to spos\u00f3b.<\/p>\n<ul>\n<li>Ponownie kliknij <strong>Edytuj pasek boczny<\/strong>. <\/li>\n<li>W polu <strong>Nawigacja<\/strong> kliknij <strong>Edytuj<\/strong>. <\/li>\n<li>Usu\u0144 zaznaczenie pola <strong>Automatycznie zorganizuj nawigacj\u0119<\/strong>. <\/li>\n<\/ul>\n<p>Zobaczysz zmienione okno <strong>Konfiguruj nawigacj\u0119<\/strong>.<\/p>\n<ul>\n<li>Ustaw kursor na <em>Rodzina i przyjaciele<\/em>, po czym klikaj\u0105c strza\u0142eczk\u0119 po prawej stronie przenie\u015b ca\u0142y blok w g\u00f3r\u0119. <\/li>\n<li>W analogiczny spos\u00f3b przenie\u015b na w\u0142a\u015bciwe miejsce inne strony &#8211; zauwa\u017c, \u017ce w g\u00f3r\u0119 czy w d\u00f3\u0142 jedzie dana strona i wszystkie jej podstrony; dlatego tak wa\u017cne jest poprawne ustawianie hierarchii, gdy\u017c w ten spos\u00f3b operujemy ca\u0142ymi blokami stron. <\/li>\n<li>Po dokonaniu zmian kliknij <strong>OK<\/strong>. <\/li>\n<\/ul>\n<p><a href=\"http:\/\/lh6.ggpht.com\/_2COsbOM02Pw\/TSQF_tinkxI\/AAAAAAAAJP8\/7JqyziJwG6E\/s1600-h\/image%5B103%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh4.ggpht.com\/_2COsbOM02Pw\/TSQGAQaeOuI\/AAAAAAAAJQE\/SjF8Eqp4db4\/image_thumb%5B81%5D.png?imgmax=800\" width=\"364\" height=\"409\" \/><\/a><\/p>\n<ul>\n<li>Po powrocie do zarz\u0105dzania kliknij <strong>Zapisz zmiany<\/strong> i wr\u00f3\u0107 do witryny. <\/li>\n<\/ul>\n<p>Jak wida\u0107, teraz mamy po\u017c\u0105dan\u0105 kolejno\u015b\u0107 blok\u00f3w. Ale <strong>uwaga<\/strong>! Po przej\u015bciu na r\u0119czn\u0105 organizacj\u0119 stron b\u0119dziesz musia\u0142 wprowadza\u0107 kolejne strony do nawigacji r\u0119cznie (polecenie <strong>Dodaj stron\u0119<\/strong> w okienku <strong>Konfiguruj nawigacj\u0119<\/strong>). Strza\u0142kami w g\u00f3r\u0119 i w d\u00f3\u0142 zmieniasz wtedy pozycj\u0119 stron w pionie, a strza\u0142kami w lewo i w prawo mo\u017cesz tworzy\u0107 zagnie\u017cd\u017cenia stron w hierarchii spisu tre\u015bci.<\/p>\n<p><a href=\"http:\/\/lh5.ggpht.com\/_2COsbOM02Pw\/TSQGBBVI8yI\/AAAAAAAAJQM\/ucg7YzA6E5k\/s1600-h\/image%5B26%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh5.ggpht.com\/_2COsbOM02Pw\/TSQGBuB-YqI\/AAAAAAAAJQU\/Zxjdpr4OTZU\/image_thumb%5B8%5D.png?imgmax=800\" width=\"364\" height=\"336\" \/><\/a><\/p>\n<p>Szeroko\u015b\u0107 paska nawigacji zmienisz na stronie zarz\u0105dzania &#8211; <strong>Edytuj pasek boczny &#8211;<\/strong>&#160;<strong>Zmie\u0144 uk\u0142ad witryny<\/strong> &#8211; <strong>Pasek boczny<\/strong> &#8211;<strong>Szeroko\u015b\u0107 xx pikseli<\/strong>. Na przyk\u0142ad domy\u015blne 150 pikseli mo\u017cesz zmieni\u0107 na 200 czy 250. Mo\u017cesz jeszcze doda\u0107 stopk\u0119.<\/p>\n<p><a href=\"http:\/\/lh3.ggpht.com\/_2COsbOM02Pw\/TSQGCG-i38I\/AAAAAAAAJQc\/6XfLKh72fAs\/s1600-h\/image%5B116%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh3.ggpht.com\/_2COsbOM02Pw\/TSQGDZ05HHI\/AAAAAAAAJQk\/LXAmVkk6OgI\/image_thumb%5B94%5D.png?imgmax=800\" width=\"364\" height=\"467\" \/><\/a><\/p>\n<p>Po klikni\u0119ciu OK zapisz zmiany i powr\u00f3\u0107 do witryny. Tym razem panel nawigacyjny jest ju\u017c szerszy.<\/p>\n<p><a href=\"http:\/\/lh3.ggpht.com\/_2COsbOM02Pw\/TSQGDyb3TqI\/AAAAAAAAJQs\/9O4s0KhdjCk\/s1600-h\/image%5B33%5D.png\"><img decoding=\"async\" loading=\"lazy\" style=\"background-image: none; border-right-width: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/lh6.ggpht.com\/_2COsbOM02Pw\/TSQGEi_nVnI\/AAAAAAAAJQ0\/0loAZyX84b4\/image_thumb%5B11%5D.png?imgmax=800\" width=\"364\" height=\"287\" \/><\/a><\/p>\n<p>Jak wida\u0107, nie jest to specjalnie trudne &#8211; w zasadzie wiesz ju\u017c, jak zapanowa\u0107 nad struktur\u0105 swojej witryny. Teraz wystarczy wprowadza\u0107 tre\u015b\u0107.<\/p>\n<hr \/>\n<p>A U T O P R O M O C J A:<\/p>\n<p>Platform\u0119 Witryny Google opisuje szeroko m\u00f3j ebook <a href=\"http:\/\/virtualo.pl\/twoja_strona_sieci_witryny\/pawel_wimmer\/a2226i7026\/\">Twoja strona w Sieci. Witryny Google<\/a><\/p>\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>Ods\u0142ony: 31We wpisie Witryny Google &#8211; jak utworzy\u0107 witryn\u0119 powiedzieli\u015bmy, jak za\u0142o\u017cy\u0107 witryn\u0119 w systemie Witryny Google. Kluczowym problemem jest oczywi\u015bcie nawigacja w takiej witrynie, zatem w tym miejscu poka\u017cemy krok po kroku, jak zorganizowa\u0107 spis tre\u015bci. Przyjmiemy tu najbardziej popularn\u0105 metod\u0119, jak\u0105 jest panel nawigacyjny po lewej stronie witryny. &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[95,54,96],"tags":[],"_links":{"self":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14252"}],"collection":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/comments?post=14252"}],"version-history":[{"count":0,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14252\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/media?parent=14252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/categories?post=14252"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/tags?post=14252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}