Co w stronie piszczy?

Index » Kategoria: CSS, Tutoriale » Tagi: , , .


W??a??ciwie tytu?? powinien brzmie? "Jak dzia??a strona?". Poni??ej opisz? kilka lub kilkana??cie sposob??w na upi?kszenie, "wypasienie", usprawnienie czy te?? zwi?kszenie u??yteczno??ci strony. Przedstawi? proste sposoby na wykorzystanie jQuery i css, kt??re nie wymagaj? szczeg??lnej wiedzy nt. programowania czy te?? szerokopoj?tego webmasterstwa. Zaczynamy.
Aby korzysta? z biblioteki jQuery w wordpressie wystarczy doda? do nag????wka strony, przed

  1. <?php wp_head(); ?>
odwo??anie do skryptu, kt??ry standardowo zaimplementowany jest do Wordpressa czyli
  1. <?php wp_enqueue_script('jquery'); ?>
. W przypadku samodzielnie przygotowanej strony czy innego skryptu wpisujemy ??cie??k? dost?pu do ??ci?gni?tej wcze??niej ze strony jquery.com skrytpu czyli
  1. <script type="text/javascript" src="sciezka_dostepu_do_pliku/jquery.js"></script>
. Poni??ej (lub powy??ej) wstawimy r??wnie?? ??cie??k? dost?pu do zewn?trznego pliku css, kt??ra powinna wygl?da? mniej wi?cej tak:
  1. <link rel="stylesheet" href="sciezka_dostepu_do_pliku/style.css" type="text/css" media="screen" title="style" />
Oczywi??cie zawarto??? pliku css mo??na umie??ci? bezpo??rednio w nag????wku strony pomi?dzy znacznikami
  1. <style type="text/css">… zapisy css ….</style>
b?d?? te?? importowa? inne pliki css (np. reset.css - resetuj?cego domy??lne warto??ci element??w blokowych do zera) do wcze??niej sporz?dzonego pliku, przez wpisanie w arkuszu styl??w
  1. @import url("reset.css");
  2.  
Wi?cej jak zwykle w Google. W ten spos??b przygotowali??my si? do wprowadzenia na stronie kilku pomys????w.

Oznaczenie link??w

Czasami zamieszczamy na stronie wiele odno??nik??w do r????nych plik??w, r????nych strony. Ca??kiem dobrym i praktycznym pomys??em by??oby oznaczenie r????nego typu link??w (czyt. prowadz?cych do r????nych plik??w) ikonkami, kt??re okre??la??yby zawarto??? tych odno??nik??w jeszcze przed najechaniem na nie kursorem myszy. W ten spos??b u??ytkownik nie tylko widzia??by ??adnie oznaczone linki, ale r??wnie?? nie musia??by d??ugo szuka? tych, kt??rymi jest zainteresowany. Linki mo??na opisa? zar??wno za pomoc? jQuery jaki i CSS.
Aby wykorzysta? w??a??ciwo??ci css w arkuszu styl??w wystarczy doda?:

  1. a[href$=".zip"] {background:#fff url(images/zip.gif) 0 50% no-repeat; padding-left:20px}
  2. a[href$=".pdf"] {background:#fff url(images/pdf.gif) 0 50% no-repeat; padding-left:20px}

aby ozdobi? linki wcze??niej przygotowanymi ikonkami. W podobny spos??b mo??na opisa? odno??niki do stron www.

  1. [href^="http://webmark.shost.pl"] {background:url(web.gif) no-repeat;}

Wad? takiego potraktowania sprawy jest fakt, ??e tylko w miar? nowoczesne przegl?darki akceptuj? i odpowiednio interpretuj? taki zapis, a np. ci?gle u??ywany w do??? du??ym stopniu IE6 do takich nie nale??y… C???? pozostaje zatem jQuery. Aby skorzysta? z dobrodziejstw tej biblioteki nale??y pami?ta? o odpowiednim sposobie wstawiania odpowiednich funkcji skryptu, zatem kod wstawiamy pomi?dzy

  1. <script type="text/javascript">
  2.         $(document).ready(function(){      
  3. tutaj zawarto??? skryptu
  4.                 });
  5. </script>

Tutaj mo??na znale??? o wiele wi?cej i podanych w b. przyst?pny spos??b informacji o wykorzystaniu javascript. W opisanym powy??ej pliku css opisujemy odpowiednio linki czyli np:

  1. a.zip{background:#fff url(images/zip.gif) 0 50% no repeat; padding-left:20px;}
  2. a.pdf{background:#fff url(images/pdf.gif) 0 50% no repeat; padding-left:20px;}
  3. a.rar{background:#fff url(images/rar.gif) 0 50% no repeat; padding-left:20px;}

… itd dalej. Klasy mo??emy nadawa? wszystkim rodzajom umieszczanych na stronie linkom. A teraz wystarczy wykorzysta? do pracy jQuery aby niejako w locie dopisywa??a do link??w z wybranym rozszerzeniem odpowiedni?, wcze??niej sporz?dzon? klas?.

  1. <script type="text/javascript">
  2.         $(document).ready(function(){      
  3. jQuery("a[@href$=pdf]").addClass("pdf");
  4. jQuery("a[@href$=zip]").addClass("zip");
  5. jQuery("a[@href$=rar]").addClass("rar");
  6.                 });
  7. </script>

Czyli do odno??nika

  1. <a href="http://webmark.shost.pl/plik.zip">Plik zip</a>
dodana zostanie klasa ".zip" i odno??nik w wygl?dzie wirtualnym mia??by sk??adni? nieco inn? czyli
  1. <a class="zip" href="http://webmark.shost.pl/pli.zip">Plik zip</a>
za?? do odno??nika
  1. <a href="http://webmark.shost.pl/plik.pdf">Plik PDF</a>
dodana zostanie klasa ".pdf" itd. W ten spos??b oznaczy??em linki do archiw??w zip i rar, kt??re zamieszczam na stronie.
Oba sposoby maj? wi?cej zalet ni?? wad. W przypadku wykorzystania css nale??y liczy? si? z faktem, ??e nie wszystkie przegl?darki prawid??owo interpretuj? w/opisany zapis. W przypadku wykorzystania jQuery g????wn? wad? jest… wykorzystanie jQuery, ale o tym troch? p????niej. Zar??wno w przypadku wy???czenia w przegl?darce obs??ugi js czy te?? korzystania ze starszej (czyt: nie obs??uguj?cej opisanej metody css) przegl?darki, linki nie trac? na swojej funkcjonalno??ci lub u??yteczno??ci. Nadal b?d? dost?pnymi linkami tekstowymi, obok kt??rych nie b?dzie po prostu wy??wietlana ikonka. I to tyle na temat link??w. Ju?? nied??ugo kolejny artyku?? o wykorzystaniu CSS i jQuery.
A tak wygl?da przyk??ad wykorzystania opisanego sposobu: A to jest plik zip, kt??rego nie ma na serwerze


* * *

Brak komentarzy

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP