Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Składanie szablonu
Forum PHP.pl > Forum > Przedszkole
DarkAbso
17.11.2011, 10:11:37
Witam,
jakiś czas temu zacząłem się uczyć PHP. Zdążyłem się "przeszkolić" z programowania strukturalnego i miałem właśnie zacząć naukę obiektowego, ale niestety zauważyłem u siebie duże braki w html i css (ostatni raz ich używałem jeszcze za czasów "tabelek"). Tak więc nie zrażony nauką postanowiłem w ramach ćwiczeń znaleźć jakiś prosty szablon, wziąć od niego tylko grafikę i go poskładać. Niestety ze względu na brak mojej wiedzy nie umiem odpowiedzieć na pytanie czy szablon jest dobrze poskładany. Co prawda przeszło walidator, ale wolę jak specjaliści rzucą na to oko. Proszę o wypisanie wszelkich uwag dotyczące poniższego kodu.
TUTAJ MOŻNA LUKNĄĆ NA STRONĘ CLICK!
Kod pliku html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	<meta name="Description" content="Tu wpisz opis zawartości strony" />
  8. 	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  9. 	<title>Tu wpisz tytuł strony</title>
  10. <link rel="stylesheet" type="text/css" href="styl2.css" />
  11. </head>
  12. <body>
  13. <div id="menu_poziome"><ul>
  14. <li><a href="nowy.html">Start</a></li>
  15. <li><a href="nowy.html">Start</a></li>
  16. <li><a href="nowy.html">Start</a></li>
  17. </ul></div>
  18. <div id="tresc">Lorem ipsum dolor sit amet, Proins</div>
  19. <div id="menu_lewe"><h2>MENU</h2></div>
  20. <div id="menu_lewe2">
  21. <ul>
  22. <li><a href="nowy.html">Start</a></li>
  23. <li><a href="nowy.html">Start</a></li>
  24. </ul>
  25. </div>
  26. </body>
  27. </html>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. body {
  2. background-color: black;
  3. color: white;
  4. background-image: url(logo_tlo.png);
  5. background-repeat: no-repeat;
  6. }
  7. h2 {
  8. margin: 0 0 0 15px;
  9. }
  10. a:link, a:visited, a:hover {
  11. color: white;
  12. }
  13. #menu_poziome {
  14. background-image: url(jt_tlo.png);
  15. background-repeat: repeat-x;
  16. width: 100%;
  17. height: 35px;
  18. left: 284px;
  19. position: absolute;
  20. top: 0;
  21. }
  22. #menu_lewe {
  23. background-image: url(luk_tlo.png);
  24. background-repeat: no-repeat;
  25. background-position: top right;
  26. width: 200px;
  27. height: 73px;
  28. top: 284px;
  29. left: 0;
  30. position: absolute;
  31. }
  32. #menu_lewe2 {
  33. top: 356px;
  34. left: 0;
  35. width: 144px;
  36. height: 300px;
  37. position: absolute;
  38. border: 3px solid;
  39. border-left-color: black;
  40. border-top: 0px;
  41. border-right-color: #001eff;
  42. border-bottom-color: #001eff;
  43. }
  44. #tresc {
  45. position: absolute;
  46. top: 38px;
  47. left: 290px;
  48. }
  49. #menu_poziome ul {
  50. list-style-type: none;
  51. padding: 5px 0 0 5px;
  52. margin: 0;
  53. }
  54. #menu_poziome ul li {
  55. display: inline;
  56. margin: 3px;
  57. }
  58. #menu_lewe2 ul {
  59. padding: 0;
  60. margin: 0 0 0 10px;
  61. list-style-type: none;
  62. }
  63.  
[CSS] pobierz, plaintext
Sephirus
17.11.2011, 10:19:40
Szablon jest prosty ale poprawny. Możesz ewentualnie zastanowić się nad wprowadzeniem w treściach tagów z rodziny <Hx> pod kątem wyszukiwarek - poza tym jest ok.

Dodatkowo możesz się zastanowić nad większym wyodrębnieniem głównych bloków strony dwa divy "menu_lewe" i "menu_lewe2" możesz zamknąć w jakimś divie "sidebar" dla lepszej czytelności.

Oceny wizualnej nie wystawiam - nie o to prosiłeś.
DarkAbso
17.11.2011, 14:42:10
Jeszcze jeden szablon mam do sprawdzenia. Także w miarę łatwy, ale na wszelki wypadek chciałbym, aby luknęło na to fachowe oko.
Także podkreślam, iż grafika szablonów nie jest moja (pobrana ze strony darmowych szablonów), a wykorzystuje ją tylko do ćwiczeń.
LINK DO ZŁOŻONEGO SZABLONU CLICK!
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="Description" content="Tu wpisz opis zawartości strony" />
  8. <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  9. <title>Tu wpisz tytuł strony</title>
  10. <link rel="stylesheet" type="text/css" href="style3.css" />
  11. </head>
  12. <body>
  13. <div id="kont">
  14. <div id="logo">
  15. <div id="menu">
  16. <ul>
  17. <li><a href="#">Strona Glowna</a></li>
  18. <li><a href="#">Inna Podstrona</a></li>
  19. <li><a href="#">Inna Podstrona</a></li>
  20. <li><a href="#">Inna Podstrona</a></li></ul>
  21. </div>
  22. </div>
  23. <div id="tresc_gora">
  24. </div>
  25. <div id="tresc">
  26. <h2>Darmowy Szablon.</h2>
  27. <p>Szablon pobrano ze strony <a href="http://www.flankerds.com/" target="_blank">flankerds.com</a></p>
  28. <h2>Lorem ipsum</h2>
  29. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra elementum enim. Mauris a metus. Donec vulputate, sapien vitae eleifend ullamcorper.</p>
  30. <p>Aenean pretium. Pellentesque a nisi eu diam pretium rhoncus. In hac habitasse platea dictumst. Vestibulum consequat, enim vitae bibendum hendrerit, metus dui vestibulum sapien, a tempor sem nisl a lorem. Vestibulum orci elit, tincidunt ac, convallis in, euismod quis, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vestibulum. Praesent elementum eros at dolor. Sed imperdiet metus vitae metus. Suspendisse vitae dolor sit amet nulla sodales vehicula.</p>
  31. </div>
  32. <div id="tresc_dol"></div>
  33. <div id="stopka"><p>Design by</p></div>
  34. </div>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. body {
  2. background-image: url(images/tlo.jpg);
  3. color: #000000;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. #kont {
  8. background-color: #6a7330;
  9. width: 780px;
  10. margin-left: auto;
  11. margin-right: auto;
  12. position: relative;
  13. border-right: solid #34381d 2px;
  14. border-left: solid #34381d 2px;
  15. }
  16. #logo {
  17. background-image: url(images/logo.jpg);
  18. width: 780px;
  19. height: 253px;
  20. position: relative;
  21. }
  22. #menu{
  23. background-image: url(images/menu.jpg);
  24. width: 780px;
  25. height: 44px;
  26. position: absolute;
  27. bottom: 0;
  28. }
  29. #menu ul {
  30. list-style-type: none;
  31. padding: 0;
  32. margin-top: 10px;
  33. text-align: center;
  34. }
  35. #menu ul li {
  36. display: inline;
  37. list-style: none;
  38. padding-left: 7px;
  39. padding-right: 7px;
  40. }
  41. #menu a:link, #menu a:visited, #menu a:hover {
  42. text-decoration: none;
  43. color: #fff;
  44. font-size: 16px;
  45. font-weight: bold;
  46. }
  47. #tresc_gora {
  48. background-image: url(images/tytul.jpg);
  49. background-repeat: no-repeat;
  50. height: 60px;
  51. width: 641px;
  52. margin-left: auto;
  53. margin-right: auto;
  54. margin-top: 20px;
  55. }
  56. #tresc {
  57. background-image: url(images/tlo_tekst.jpg);
  58. width: 641px;
  59. height: auto;
  60. margin-left: auto;
  61. margin-right: auto;
  62. background-repeat: no-repeat;
  63. margin-top: 0;
  64. margin-bottom: 0;
  65. padding: 0;
  66. }
  67. #tresc p {
  68. margin: 0 8px 0 8px;
  69.  
  70. }
  71. #tresc h2 {
  72. margin: 0 8px 0 8px;
  73. }
  74. #tresc a:link, #tresc a:visited, #tresc a:hover {
  75. text-decoration: none;
  76. color: #34381d;
  77. font-weight: bold;
  78. }
  79. #tresc_dol {
  80. background-image: url(images/podpis.jpg);
  81. background-repeat: no-repeat;
  82. height: 56px;
  83. width: 641px;
  84. margin-left: auto;
  85. margin-right: auto;
  86. }
  87. #stopka {
  88. background-image: url(images/stopka.jpg);
  89. height: 29px;
  90. width: 780px;
  91. margin-top: 20px;
  92. }
  93. #stopka p {
  94. text-align: center;
  95. font-size: 12px;
  96. color: #ffffff;
  97. padding-top: 8px;
  98. }
[CSS] pobierz, plaintext
Sephirus
18.11.2011, 08:49:26
Hmm. podobnie jak w poprzednim layoucie - ogólnie wykonanie jest ok, zgodnie itd.

Komentarze:
- Używasz H2 bez H1 - średni pomysł - zobacz coś o uzywaniu Hx w związku z SEO/pozycjonowaniem
- Jeżeli nawet szablon taki robisz dla Polaków - używaj w nazwach angielskich wyrażeń - wyglądać to będzie bardziej profesjonalnie
- Nie ładuj na siłę wszędzie gdzie to możliwe selektorów po ID (#) - istnieją także klasy, które w niektórych przypadkach sprawdzą się lepiej wink.gif

DarkAbso
18.11.2011, 10:29:18
Trochę poczytałem o tym i w powyższym przykładzie zmienił bym na class takie id:
-#tresc p
-#tresc h2
-#tresc a:link, #tresc a:visited, #tresc a:hover
Reszta jest w miarę unikalna. Mniej więcej o to chodzi?

Dziękuje za pomoc i cenne wskazówki.

Micchaleq
18.11.2011, 10:43:43
Ogólnie może nie konkretnie na temat, jednak szablonów css wydaje mi sie ze nie ma większej potrzeby pisania (bynajmniej w przypadku własnych potrzeb ), pełno jest darmowych na internecie pozostaje więc odpowiednie pokrojenie grafiki.

A to co tutaj nam prezentujesz to są totalne podstawy które mogą być przydatne np do stworzenia szablonu allegro.
DarkAbso
18.11.2011, 11:37:10
Zgadza się, są to podstawy, ale czy nie na tym polega nauka?
Micchaleq
18.11.2011, 12:22:16
Cytat(DarkAbso @ 18.11.2011, 11:37:10 ) *
Zgadza się, są to podstawy, ale czy nie na tym polega nauka?


Ja css-a uczyłem się na większych templach gdzie po prostu analizowałem kod od góry do dołu.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.