pytanie o ocenę strony
wiem, że za dużo tu do oceniania nie ma, ale jest to moja pierwsza strona.
co jeszcze mogłoby się w niej znalesć,
brak strony zagraniczne, ale będzie taka sama jak polske.
http://tucznik.lua.pl/index.php
Pełna wersja: [www, design]moja pierwsza strona
1. Zmien hosting - strasznie muli,
2. Poszukaj sobie na internecie darmowe szablon css i zobacz jak sie robi strony oparte o CSS,
pozdro
2. Poszukaj sobie na internecie darmowe szablon css i zobacz jak sie robi strony oparte o CSS,
pozdro
Jedna z stron nie działa i dostaje http://www.luahosting.pl/informacja.html Czarne na białym może kiedyś przodowało. Pomyśl coś o designu.
ale szablon tej strony jest ściągnięty ze strony http://www.kurshtml.boo.pl/
@grzes22
Brak kolorów i grafiki. Warto najpierw porobić kilka stron, porównać z innymi w necie i dopiero dawać coś do oceny.
Brak kolorów i grafiki. Warto najpierw porobić kilka stron, porównać z innymi w necie i dopiero dawać coś do oceny.
A ja wypiszę co trzeba w kodzie zmienić 
1. Masz 2x znacznik <body>. Wywal ten w <div id="menu">
2. Dlaczego raz id podajesz małymi raz duzymi? Wybierz jedna opcję. Wiekszość programistów pisze małymi.
3. Menu tworzymy za pomocą listy -> <ul> <li>Opcja</li> <li>Opcja</li> <li>Opcja</li> <li>Opcja</li> </ul>
4. Zamiast
Możesz dać:
Tabelki służą do rysowania tabelek a nie jako kontener na tekst.
Reszta kodu ok(nie sprawdzałem css)
ps: nie podawaj w ten sposób adresu e-mail bo boty go wyczają i bedziesz dostawał spam extra na skrzynke.
Pozdrawiam
1. Masz 2x znacznik <body>. Wywal ten w <div id="menu">
2. Dlaczego raz id podajesz małymi raz duzymi? Wybierz jedna opcję. Wiekszość programistów pisze małymi.
3. Menu tworzymy za pomocą listy -> <ul> <li>Opcja</li> <li>Opcja</li> <li>Opcja</li> <li>Opcja</li> </ul>
4. Zamiast
Możesz dać:
Tabelki służą do rysowania tabelek a nie jako kontener na tekst.
Reszta kodu ok(nie sprawdzałem css)
ps: nie podawaj w ten sposób adresu e-mail bo boty go wyczają i bedziesz dostawał spam extra na skrzynke
.Pozdrawiam
1. Dobrym zwyczajem jest sprawdzić poprawność składni nim się odda stronę do oceny. Przynajmniej być sobaczył to podwujne <body>
2. Po co deklarować dokument jako XHTML 1.0 skoro nie wykorzystuje się nic poza HTML?
3. Są poważne różnice w wyświetlaniu strony przez FF i IE
4. Obrzydliwe konstrukcje <br /><br /> jak by nie można było tekstów wstawić w znaczniki <p></p> i ostylować.
5. Podstrony nie mają nagłówka i deklaracji typu.
6. Niektóre linki prowadzą donikąd.
7. W tabelce z etykietami obrzydliwe konstrukcje w stylu , jak by nie można było użyć margin albo padding.
8. Niezamknięty znacznik <hr/>
9. Jeden z lepszych kwiatów. Lista numerowana zrobiona za pomobą <br/> zamiast <ol>
10. Na tej stronie nic nie ma czarny tekst na białej stronie, linki w standardowym kolorze. Co tu oceniać? Kod do kitu.
No właśnie widać, że ściągnięty i to nieudolnie, bez zrozumienia tematu...
2. Po co deklarować dokument jako XHTML 1.0 skoro nie wykorzystuje się nic poza HTML?
3. Są poważne różnice w wyświetlaniu strony przez FF i IE
4. Obrzydliwe konstrukcje <br /><br /> jak by nie można było tekstów wstawić w znaczniki <p></p> i ostylować.
5. Podstrony nie mają nagłówka i deklaracji typu.
6. Niektóre linki prowadzą donikąd.
7. W tabelce z etykietami obrzydliwe konstrukcje w stylu , jak by nie można było użyć margin albo padding.
8. Niezamknięty znacznik <hr/>
9. Jeden z lepszych kwiatów. Lista numerowana zrobiona za pomobą <br/> zamiast <ol>
10. Na tej stronie nic nie ma czarny tekst na białej stronie, linki w standardowym kolorze. Co tu oceniać? Kod do kitu.
Cytat(grzes22 @ 9.09.2008, 14:24:30 ) 
No właśnie widać, że ściągnięty i to nieudolnie, bez zrozumienia tematu...
Ale zrozumiałeś jak się tworzy łącza ot plus tego co zrobiłeś, a teraz czytaj, czytaj i jeszcze raz CZYTAJ.
Powodzenia!
Powodzenia!
Mnie wkurza ta reklama u góry 
ta reklama na gorze to nie moja tylko hostingu,
chce żebyście wiedzieli że ta strona nigdy na poważnie w necie nie zaistnieje,
poprostu ją zrobiłem jaką pierwszą w swoim życiu i chciałem poznać waszą opinię.
dziękuję wszystkim za porady, będę zmieniał i starał się czytać więcej.
//poprawiłem trochę błędów, jakby teraz ktoś mógł rzucić okiem na stronę
i podsunąć jakieś trafne uwagi.
chce żebyście wiedzieli że ta strona nigdy na poważnie w necie nie zaistnieje,
poprostu ją zrobiłem jaką pierwszą w swoim życiu i chciałem poznać waszą opinię.
dziękuję wszystkim za porady, będę zmieniał i starał się czytać więcej.
//poprawiłem trochę błędów, jakby teraz ktoś mógł rzucić okiem na stronę
i podsunąć jakieś trafne uwagi.
1. Wkradl ci się znacznik </style> niepotrzbnie.
2. Nie poprawiłeś listy numerycznej np. w kawałach. Użyj: <ol> <li> opzycja</li> <li> opzycja</li> <li> opzycja</li> <li> opzycja</li> </ol>
Tym razem pokusiłem się także o css.
Jest ładnie ale można to zoptymalizować. Zamiast pisać:
Można
Zamiast background-color możesz użyć po prostu background. itp.
2. Nie poprawiłeś listy numerycznej np. w kawałach. Użyj: <ol> <li> opzycja</li> <li> opzycja</li> <li> opzycja</li> <li> opzycja</li> </ol>
Tym razem pokusiłem się także o css
.Jest ładnie ale można to zoptymalizować. Zamiast pisać:
Kod
margin-top: 24px;
margin-right: auto;
margin-left: auto;
margin-bottom: 24px;
margin-right: auto;
margin-left: auto;
margin-bottom: 24px;
Można
Kod
/* top left bottom right */
margin: 24px auto 24px auto;
margin: 24px auto 24px auto;
Zamiast background-color możesz użyć po prostu background. itp.
a tu mam takie małe pytanie.
wiecie może dlaczego na stronie kontakt zamiast litery Ś pojawia się jakiś dziwny znak.
wiecie może dlaczego na stronie kontakt zamiast litery Ś pojawia się jakiś dziwny znak.
Bo masz złe kodowanie pliku. Zapisz plik w rofmacie utf-8 tak jak masz zadeklarowane w dokumencie.
PS: w tabelce w której masz formularz kontaktowy brakuje Ci jednej komórki w ostatnim wierszu
PS: w tabelce w której masz formularz kontaktowy brakuje Ci jednej komórki w ostatnim wierszu
Ok, właśnie o to mi chodziło.
Wielkie dzięki
//EDIT
znacie jakąś dobrą stronę na której są opisane różnice między stylami css w IE i Firefoxie??
Wielkie dzięki
//EDIT
znacie jakąś dobrą stronę na której są opisane różnice między stylami css w IE i Firefoxie??
Różne ciekawe artykuły są tu: perfection or vanity
Cytat(grzes22 @ 11.09.2008, 14:18:48 )
znacie jakąś dobrą stronę na której są opisane różnice między stylami css w IE i Firefoxie??
Może to Ci pomoże:
http://kurs.browsehappy.pl/Bugi/HomePage
tu są bugi ie, firefoksa, i reszty przeglądarek.
zapisałem wszystkie pliki w formacie UTF-8.
wszystko było dobrze, ale teraz znowu się zaczęło krzaczyć zupełnie nie wiem dlaczego
edit:
już sobie z tym poradziłem
edit 2
mógłby ktoś teraz zerknąć na stronkę, i wytknąć błędy i niedopatrzenia??
wszystko było dobrze, ale teraz znowu się zaczęło krzaczyć zupełnie nie wiem dlaczego
edit:
już sobie z tym poradziłem
edit 2
mógłby ktoś teraz zerknąć na stronkę, i wytknąć błędy i niedopatrzenia??
przede wszystkim design. zainwestuj troche w dobry layout.
wiem, że design jest bardzo kiepski, ale ja nie jestem grafikiem, i w pierwszej kolejności chciałem jakoś nauczyć się pisać strony.
I bardziej zależy mi na sprawdzaniu kodu i trochę zawartości niż oceny wizualnej
I bardziej zależy mi na sprawdzaniu kodu i trochę zawartości niż oceny wizualnej
Hej,
Moim zdaniem ten img top to nie najlepszy pomysł. Dałbym go jako background w CSS np. dla div id="ALL".
Nie denerwuje Cię, że reklama lua przesłania Ci header:)? Łatwo to zmienić albo przez position:relative dla tego diva, albo przez padding dla niego, a potem background w css przesunięty o ten padding.
Coś w tym stylu:
To bardzo dobrze, że stosujesz title, jak również alt dla img, ale trzeba wiedzieć po co to jest. Alty w img stosuje się tylko wtedy, kiedy obrazek można zastąpić treścią tekstową. Alt="top" jest bez sensu, nie niesie żadnej konkretnej informacji. W takich sytuacjach dajemy alt="". Jak już dajesz title dla anchora, w którym się zawiera img, to nie dawaj już dla img title. Wystarczy alt, albo pusty alt Tak jest np. w galerii. Tam są prawidłowe alt. Tabelkę w galerii wywal na zbity, zamiast tego lista <ul>. Moim zdaniem jest tu o jeden div za dużo. Po co div id="menu"? Daj <ul id="menu" i stylizuj listę, zamiast ul.
Zamiast pisać:
można dać:
To chyba nie powinno tak być:
A być powinno:
Nie ustawiaj fontów w PT, ani w PX. Pt jest do druku. Px nie jest dobre dla fontów. Procenty jak najbardziej. Dla body np:
a potem już w %, np.
Procenty się oczywiście zagnieżdżają, czyli jak dasz dla h1 150%, a dla elementu w h1 130%, to element zawarty w h1 będzie miał fonty wielkości 130% ze 150% oryginalnej wielkości.
Niestety chyba mało ludzi wie, że to ważne, dopóki jest ie6. On nie powiększa fontów w px.
Moim zdaniem ten img top to nie najlepszy pomysł. Dałbym go jako background w CSS np. dla div id="ALL".
Nie denerwuje Cię, że reklama lua przesłania Ci header:)? Łatwo to zmienić albo przez position:relative dla tego diva, albo przez padding dla niego, a potem background w css przesunięty o ten padding.
Coś w tym stylu:
Kod
div#all{
padding-top:ileś_tampx;
background: #000 url('twoja/ścieżka/plik.xxx') no-repeat 0 ileś_tampx;
}
padding-top:ileś_tampx;
background: #000 url('twoja/ścieżka/plik.xxx') no-repeat 0 ileś_tampx;
}
To bardzo dobrze, że stosujesz title, jak również alt dla img, ale trzeba wiedzieć po co to jest. Alty w img stosuje się tylko wtedy, kiedy obrazek można zastąpić treścią tekstową. Alt="top" jest bez sensu, nie niesie żadnej konkretnej informacji. W takich sytuacjach dajemy alt="". Jak już dajesz title dla anchora, w którym się zawiera img, to nie dawaj już dla img title. Wystarczy alt, albo pusty alt
Tak jest np. w galerii. Tam są prawidłowe alt. Tabelkę w galerii wywal na zbity, zamiast tego lista <ul>. Moim zdaniem jest tu o jeden div za dużo. Po co div id="menu"? Daj <ul id="menu" i stylizuj listę, zamiast ul.Zamiast pisać:
Kod
margin-right: auto;
margin-left: auto;
margin-left: auto;
można dać:
Kod
margin:0 auto;
To chyba nie powinno tak być
:Kod
font-family:'Times New Roman', Times New Roman;
A być powinno:
Kod
font-family:'Times New Roman', serif;
Nie ustawiaj fontów w PT, ani w PX. Pt jest do druku. Px nie jest dobre dla fontów. Procenty jak najbardziej. Dla body np:
Kod
font-size:small;
a potem już w %, np.
Kod
h1{font-size:190%;}
Procenty się oczywiście zagnieżdżają, czyli jak dasz dla h1 150%, a dla elementu w h1 130%, to element zawarty w h1 będzie miał fonty wielkości 130% ze 150% oryginalnej wielkości.
Niestety chyba mało ludzi wie, że to ważne, dopóki jest ie6. On nie powiększa fontów w px.
Cytat(AjaxSrajax @ 17.09.2008, 16:32:12 )
To bardzo dobrze, że stosujesz title, jak również alt dla img, ale trzeba wiedzieć po co to jest. Alty w img stosuje się tylko wtedy, kiedy obrazek można zastąpić treścią tekstową. Alt="top" jest bez sensu, nie niesie żadnej konkretnej informacji. W takich sytuacjach dajemy alt="".
No cóż. Moim zdaniem alt stosujemy zawsze a robimy to po to, żeby poinformować usera, który ma wyłączoną grafikę lub używa tekstowej przeglądarki, co by zobaczył, gdyby widział grafikę. Dlatego alt="" jest bardziej bez sensu niż alt="top".
Cytat(AjaxSrajax @ 17.09.2008, 16:32:12 )
Niestety chyba mało ludzi wie, że to ważne, dopóki jest ie6. On nie powiększa fontów w px.
Co to znaczy nie powiększa?
No to tutaj grubo się Pani myli. Właśnie po to wielkie W dało nam puste alty, żeby je stosować. Gdyby były bez sensu, nie byłyby dozwolone. Albo racjonalniej: Co obchodzi niewidomego usera fakt, że obrazek którego nie widzi to jakiś tam top? To mąci w głowie jemu, screen readerom, a userów tekstowych przeglądarek denerwuje. Wiem coś o tym, bo b. często korzystam z Lynx-a. Taki alt jest po prostu bez sensu, niczemu nie służy.
Co do powiększania tekstu, zadeklaruj sobie czcionkę w px, a potem spróbuj w ie6 wybrać zmianę wielkości tekstu.
pzdr;)
Co do powiększania tekstu, zadeklaruj sobie czcionkę w px, a potem spróbuj w ie6 wybrać zmianę wielkości tekstu.
pzdr;)
Cytat(AjaxSrajax @ 17.09.2008, 19:06:25 )
No to tutaj grubo się Pani myli. Właśnie po to wielkie W dało nam puste alty, żeby je stosować. Gdyby były bez sensu, nie byłyby dozwolone. Albo racjonalniej: Co obchodzi niewidomego usera fakt, że obrazek którego nie widzi to jakiś tam top? To mąci w głowie jemu, screen readerom, a userów tekstowych przeglądarek denerwuje. Wiem coś o tym, bo b. często korzystam z Lynx-a. Taki alt jest po prostu bez sensu, niczemu nie służy.
No cóż. Nie będę polemizować. Poznałam po prostu ludzi z innym podejściem
Cytat(AjaxSrajax @ 17.09.2008, 19:06:25 )
Co do powiększania tekstu, zadeklaruj sobie czcionkę w px, a potem spróbuj w ie6 wybrać zmianę wielkości tekstu.
Domyślałam się, że to masz na myśli. Obawiam się, że nie będę w stanie wypróbować
No chyba, że gdzieś jeszcze znajdę IE6
do rad dotyczących kodu dostosuje się później, narazie zacząłem bawić się trochę z grafiką i jak skończę to zabiorę się za poprawę kodu.
jak wam się teraz podoba wygląd??
jak wam się teraz podoba wygląd??
na stronach poza główna logo ma brzydki biały border
Może wy wiecie Jak wykonać menu poziome z dopasowującą się grafiką? żeby tło elementu zawsze było dopasowywane do rozmiaru
Ja znam tylko 3 sposoby na menu poziome. Oczywiście rozmawiamy o strukturze typu:
1) Display:inline dla li.
2) float-y.
3) position-y. Dajesz dla ul position:relative;. Teraz możesz rozmieścić przyciski względem ul. Czyli dla li: position absolute. Dla pierwszego li:left:0; dla drugiego left:szeokość_pierwszego_elementu+margin, dla drugiego:left: szerokość_pierwszego+szerokość_drugiego+2*margin; itp.itd;
Jeżeli chodzi o grafikę to zależy co masz na myśli. Czy masz gotowy przycisk, czyli obrazek, który ma szerokość i wysokość, czy masz pattern, którym chcesz wypełnić button.
W pierwszym przypadku nie da się zastosować pierwszego sposobu. Zostają jedynie sposoby 2 i 3, bo tylko tam możesz dać dla elementu <a> display:block;.
Natomiast jeżeli masz pattern, który ciągniesz w osi x (można by ciągnąć (że tak powiem) w osi y, ale to raczej nie ma sensu, bo to szerokość gra tutaj pierwsze skrzypce) sprawa wygląda raczej prosto.
Dajesz po prostu dla elementu <a> background CSS.
Dość ważne jest 50%. Jeżeli masz pattern dla buttona, to masz też żywy tekst jako menu ( nie grafikę). Jeżeli tak to można go powiększać. Chodzi o to, żeby wraz z powiększaniem tekstu menu zachowało 'dobrą formę'. 50% sprawi, że Twój pattern będzie zawsze wyświetlany 'w połowie buttona'. Oczywiście pattern musi być 'wyższy' niż wysokość defaultowa buttona, żeby wraz z powiększaniem tekstu odsłaniała się jego coraz większa część (patternu). To ma sens wtedy gdy, parttern jest symetryczny w połowie. Jeżeli tak nie jest, 50% nie ma sensu.Wtedy dajemy 0% i o ile z powiększaniem tekstu pattern może się 'skończyć', czyli odsłonić całkowicie- musimy go uzupełnić kolorem, aby zatrzeć urwanie grafiki. Po to to #xxx w kodzie, ale nie tylko, przyda się gdy user nie wyświetla obrazków.
Patterny są dużo lepsze moim zdaniem. Pozwalają łączyć elastyczność menu tekstowego i urodę menu graficznego. Sam musisz pokombinować. Podstawa to zdawać sobie sprawę z blokowości i liniowości w sensie HTML i CSS ( bo to nie to samo). Bez tego się nie da
pzdr;
Kod
<ul><li><a>blabla1</a></li><li><a>blabla2</a></li>......<li><a>blablaN</a></li></ul>
1) Display:inline dla li.
Kod
li{display:inline;}
. 2) float-y.
Kod
li{float:left (albo right :D);}
3) position-y. Dajesz dla ul position:relative;. Teraz możesz rozmieścić przyciski względem ul. Czyli dla li: position absolute. Dla pierwszego li:left:0; dla drugiego left:szeokość_pierwszego_elementu+margin, dla drugiego:left: szerokość_pierwszego+szerokość_drugiego+2*margin; itp.itd;
Jeżeli chodzi o grafikę to zależy co masz na myśli. Czy masz gotowy przycisk, czyli obrazek, który ma szerokość i wysokość, czy masz pattern, którym chcesz wypełnić button.
W pierwszym przypadku nie da się zastosować pierwszego sposobu. Zostają jedynie sposoby 2 i 3, bo tylko tam możesz dać dla elementu <a> display:block;.
Natomiast jeżeli masz pattern, który ciągniesz w osi x (można by ciągnąć (że tak powiem) w osi y, ale to raczej nie ma sensu, bo to szerokość gra tutaj pierwsze skrzypce) sprawa wygląda raczej prosto.
Dajesz po prostu dla elementu <a> background CSS.
Kod
a{background #xxx urrl('sciecha/pliczek.graf') repeat-x 0 50%);
Dość ważne jest 50%. Jeżeli masz pattern dla buttona, to masz też żywy tekst jako menu ( nie grafikę). Jeżeli tak to można go powiększać. Chodzi o to, żeby wraz z powiększaniem tekstu menu zachowało 'dobrą formę'. 50% sprawi, że Twój pattern będzie zawsze wyświetlany 'w połowie buttona'. Oczywiście pattern musi być 'wyższy' niż wysokość defaultowa buttona, żeby wraz z powiększaniem tekstu odsłaniała się jego coraz większa część (patternu
). To ma sens wtedy gdy, parttern jest symetryczny w połowie. Jeżeli tak nie jest, 50% nie ma sensu.Wtedy dajemy 0% i o ile z powiększaniem tekstu pattern może się 'skończyć', czyli odsłonić całkowicie- musimy go uzupełnić kolorem, aby zatrzeć urwanie grafiki. Po to to #xxx w kodzie, ale nie tylko, przyda się gdy user nie wyświetla obrazków.Patterny są dużo lepsze moim zdaniem. Pozwalają łączyć elastyczność menu tekstowego i urodę menu graficznego. Sam musisz pokombinować. Podstawa to zdawać sobie sprawę z blokowości i liniowości w sensie HTML i CSS ( bo to nie to samo). Bez tego się nie da
pzdr;
Nooo, jak na pierwszą stronę to super, tylko ta reklama strasznie denerwuje.
Jakby nie o pifku to by nic mi się nie podobało :/
Ani kolory, ani dobrane czcionki, ani rozmiejcowienie elementów strony
Powodzenia w pisaniu następnych stronek
Ani kolory, ani dobrane czcionki, ani rozmiejcowienie elementów strony
Powodzenia w pisaniu następnych stronek
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.