Trudne początki webmaster'a

[RPRT07]

Adres stronki: http://rprt07.xn.pl

 

Link do pobrania strony w paczce RAR: http://rprt07.xn.pl/XTML%201.1.rar

 

Przeznaczenie strony: Strona o mojej skromnej osobie, o moich zainteresowaniach, chciałbym umiescić kilka artykułów, poradników, plików i utworzyć później forum

 

Treść strony: Proszę sobie nie zawracać głowy treścią strony, ponieważ napisałem byle co, aby tylko zapełnić blok treść jakimiś bzdurami

 

Z czego korzystam: Jestem w połowie książki Roberta Hoekman'a jr "Magia Interfejsu, po kursie HTML, CSS ze strony Kurs HTML - strona WWW za darmo , z pomocy pewnego kolegi Adriana z Kępna Wlkp. i kilku bardziej anonimowych użytkowników forum PCLab

 

Wątek z PCLab: http://forum.pclab.p...1

 

 

I PROBLEM: Mój pierwszy problem dotyczy menu poziomego i pionowego. Pozwoliłem sobie zapożyczyć do eksperymentowania gotowe menu z kurshtml.pl

 

 

MENU PIONOWE

 

ul, ul li {	display: block;	list-style: none;	margin: 0;	padding: 0;}ul {	width: 200px;	padding: 2px 2px 1px 2px;	background-color: #9ce;	border: 3px double #28e;}ul li {	border-bottom: 1px solid #9ce;}ul a:link, ul a:visited {	display: block;	width: 176px;	text-decoration: none;	padding: 7px;	font-weight: bold;	background-color: #27c;	color: #def;	border-left: 10px solid #25b;}ul a:hover {	width: 166px;	background-color: #28e;	color: #fff;	border-left: 20px solid #26d;}

Mój problem polega na tym, iż na mojej stronie są dwa menu; poziome i pionowe. Lecz oba te menu korzystają z tego samego kodu CSS widocznego powyżej, a bardzo mi zależało aby były niezależne od siebie, gdyż chciałbym ustawić potem więcej linków/zakładek co wpłynie na zmienienie szerokości przycisków menu poziomego.

 

MENU POZIOME:

 

ul, ul li {	display: block;	list-style: none;	margin: 0;	padding: 0;}ul {	position: absolute;}ul li {	float: left;	border-width: 0 1px 1px 1px;	border-style: solid;	border-color: transparent #25b #25b #9ce;}ul a:link, ul a:visited {	text-decoration: none;	display: block;	width: 95px;	text-align: center;	padding: 5px 0;	font-weight: bold;	background-color: #27c;	color: #def;	border-top: 10px solid #25b;}ul a:hover {	background-color: #28e;	color: #fff;	border-top: 20px solid #26d;}

I teraz moje pytanie nasuwa się następujące jak tego dokonać? Mój kolega Adrian podpowiedział, żeby użyć znaczników <p> po każdej zakładce, co rzeczywiście przyniosło widoczne rezultaty, lecz nie o to mi chodziło. Bardzo zależy mi na niezależności tych menu od siebie, żeby jak wspomniałem powyżej móc kontrolować szerokość oraz kilka innych rzeczy.

Edytowane 10 Października 2011 przez RPRT07

[m4r]

Bullshit, a nie <p>

 

Widzę, że ogarniasz, do czego są atrybuty id i class, więc pokrótce:

• do górnego menu piszesz coś w stylu

  <ul id="menu_top">

• do bocznego coś jak

  <ul id="menu_bok">

• rozdzielasz sobie css obu menu tak, że css do menu górnego dostaje:

  ul#menu_top li {        display: block;        list-style: none;        margin: 0;        padding: 0;        border-bottom: 1px solid #9ce;}ul#menu_top {        width: 200px;        padding: 2px 2px 1px 2px;        background-color: #9ce;        border: 3px double #28e;}ul#menu_top a:link, ul a:visited {        display: block;        width: 176px;        text-decoration: none;        padding: 7px;        font-weight: bold;        background-color: #27c;        color: #def;        border-left: 10px solid #25b;}ul#menu_top a:hover {        width: 166px;        background-color: #28e;        color: #fff;        border-left: 20px solid #26d;}

• a css menu bocznego:

  ul#menu_bok li {        display: block;        list-style: none;        margin: 0;        padding: 0;        border-bottom: 1px solid #9ce;}ul#menu_bok {        width: 200px;        padding: 2px 2px 1px 2px;        background-color: #9ce;        border: 3px double #28e;}ul#menu_bok a:link, ul a:visited {        display: block;        width: 176px;        text-decoration: none;        padding: 7px;        font-weight: bold;        background-color: #27c;        color: #def;        border-left: 10px solid #25b;}ul#menu_bok a:hover {        width: 166px;        background-color: #28e;        color: #fff;        border-left: 20px solid #26d;}

  Po czymś takim oba menu powinny być już rozdzielone i jedno powinno działać niezależnie od drugiego.

Pomijam już fakt takiego tworzenia strony - nawaliłeś niepotrzebnych skryptów (jakieś animacje, zegarki, muzyka z wrzuty), dorzuciłeś comic sans ms jako główną czcionkę, etc. Ogólnie burdel, jak u Zdziśka po imprezie. Najpierw myślisz nad layoutem, potem go projektujesz, potem wycinasz stronę, a na końcu wrzucasz treść.

 

Krótko (albo i nie, bo akurat mam wenę), nad czym by można było pomyśleć:

• Kod powinien mieć wcięcia - zyskuje na czytelności, a Ty nie będziesz tracił pół dnia na znalezieniu czegokolwiek do zmiany
• tagi trzeba odpowiednio domykać, a warto też pamiętać, których z nich nie wolno zagnieżdżać jeden w drugim, które są blokowe, które nie, itd, itp.
• position: absolute; to ostateczna ostateczność. Jeżeli czegoś się nie da zrobić inaczej, albo sama struktura strony wymaga takiego stylowania, jest to dopuszczalne. W każdym innym przypadku relatywne pozycjonowanie jest lepsze. U Ciebie absolute jest zbędne, bo da się bez niego spokojnie obejść.
• trzymaj się nazewnictwa klas i id - jeżeli z dużej, to z dużej, jeżeli z małej, to z małej. Element z danym ID może być tylko jeden (może o tym wiesz, jeżeli nie - przypominam).
• nie duplikuj styli dla konkretnych elementów. Jeżeli robisz "ul, ul.jakaś {", to nie pisz kawałek dalej znowu "ul {", o ile to nie jest konieczne, albo od razu sobie odpowiednio rozdziel.

  Jak mawiają starożytni Amerykanie - Keep it simple, stupid.

• atrybut "alt" służy do wyświetlenia zanim obrazek się pobierze. Masz do wyboru albo wstawić pusty tekst ( alt=""), albo uzupełnić ten atrybut opisem, co jest na obrazku. Np. jeżeli umieszczasz logo, to albo piszesz "logo", albo tekst który na tym logo jest. Czasem ten atrybut przydaje się w pozycjonowaniu strony, więc radzę go pilnować
• charset - był czas, że wśród początkujących królował windows 1250 (czasy frontpage). Teraz widzę, że po kilku latach w końcu się nauczyli korzystać z latin2 (iso-8859-2). Fajnie, tylko że od jakiegoś czasu wszyscy siedzą na utf-8, a i html5 + css3 zaczyna królować (vide przezroczystość, której używasz - to właśnie css3).
• statystyki to ostatnia rzecz, jaką się dodaje - najpierw robisz stronę, potem ją publikujesz, dopiero potem dodajesz staty, facebooki i inne takie. A dodaje się je na końcu tylko dlatego, że korzystają z zasobów obcych serwerów, co wydłuża ładowanie strony i po kilkunastu (kilkusetset) odświeżeniach strony w czasie developerki szlag by mnie trafił, gdybym miał czekać za każdym razem kilka sekund na obce skrypty zanim się załadują i wykonają.
• jeszcze coś by się znalazło, ale czuję, że za chwilę się zacznę powtarzać, albo będę pisał rzeczy oczywiste

[RPRT07]

Dziękuje za wyczerpanie tematu drogi użytkowniku forum PurePC. I na pewno gdy strona zacznie funkcjonować jak na nią przystało będziesz wymieniony w zakładce podziękowania;)

 

Menu, super działa jak na marzenie, bardzo ci dziękuje.

 

Ta strona jeszcze nie funkcjonuje. Skrypty i treść została tylko umieszczona w celu przetestowania jak dane bloki się zachowują pod "obciążeniem" treści, w ogóle co do skryptów to będę miał jeszcze pewne pytanie ale to potem.

 

Wcięcia ok, zastosuje dzięki za radę.

 

Teraz jak mi pokazałeś przykład z tym menu to już będę prawidłowo klasyfikował style, jeszcze raz dzięki.

 

O parametrze alt było mi wiadomo, celowo zostawiłem te pole puste, aby w niedalekiej przyszłości wykorzystać.

 

Utf-8 specjalnie nie korzystałem z niego, gdyż nie wyświetlały się mi polskie znaki w Google chrome jak go zastosowałem, więc pozostałem przy iso-8859-2, nie wiem dlaczego tak jest.

 

Statystyki, ok na koniec masz racje, po prostu chciałem przetestować.

 

Wracając do skryptów, logo na pewno zmienię, jak już w końcu ogarnę GIMP'a, zegar i kalendarz chciałbym zostawić. Mam pewien problem ze skryptami. Jak uzewnętrznić skrypty Java, bo aktualnie wszystkie masz w index.htm, a chciałbym je uzewnętrznić do plików js.

 

Znalazłem coś takiego w internecie:

 

jQuery w prostych przykładach

 

Lecz po wykonaniu instrukcji, skrypty nie działają, mógłbyś mi proszę pokazać na jednym skrypcie, jak należało by go uzewnętrznić? co należało by wpisać?

 

 

Dziękuje jeszcze raz za poświęcony mi czas. Pozdrawiam

 

PSWrzuciłem zaktualizowaną wersje strony na serwer http://rprt07.xn.pl/XTML%201.1.rar

Zobacz proszę jeszcze dlaczego to UTF-8 nie działa

 

Trzeba było pogrzebać w ustawieniach mojego edytora html

Edytowane 11 Października 2011 przez RPRT07

[m4r]

Ze skryptami jest różnie - albo wstawiasz je w osobny plik .js i potem wywołujesz tylko odpowiednie funkcje, albo zostawiasz inline - wszystko zależy od konkretnego skryptu i jego zastosowania.

 

Odnośnie jQuery - trzeba zacząć od wrzucenia sobie w header odpowiedniego pliku. Aktualny jest tutaj (zapisz element docelowy jako).

Po jego dodaniu skrypty JQuery powinny działać.

A najprościej je sprawdzić pierwszym skryptem z podanego przez Ciebie linku. Jeżeli wszystko będzie ok, zobaczysz okienko z alertem. A potem można się już bawić do woli.