Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Składanie szablonu
DarkAbso
post
Post #1





Grupa: Zarejestrowani
Postów: 60
Pomógł: 10
Dołączył: 17.11.2011

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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ś.


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
DarkAbso
post
Post #3





Grupa: Zarejestrowani
Postów: 60
Pomógł: 10
Dołączył: 17.11.2011

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Sephirus
post
Post #4





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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



--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
DarkAbso
post
Post #5





Grupa: Zarejestrowani
Postów: 60
Pomógł: 10
Dołączył: 17.11.2011

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Micchaleq
post
Post #6





Grupa: Zarejestrowani
Postów: 186
Pomógł: 4
Dołączył: 13.10.2009

Ostrzeżenie: (0%)
-----

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.

Ten post edytował Micchaleq 18.11.2011, 10:44:33


--------------------
Strony internetowe Częstochowa
Szablony allegro
Go to the top of the page
+Quote Post
DarkAbso
post
Post #7





Grupa: Zarejestrowani
Postów: 60
Pomógł: 10
Dołączył: 17.11.2011

Ostrzeżenie: (0%)
-----

Zgadza się, są to podstawy, ale czy nie na tym polega nauka?
Go to the top of the page
+Quote Post
Micchaleq
post
Post #8





Grupa: Zarejestrowani
Postów: 186
Pomógł: 4
Dołączył: 13.10.2009

Ostrzeżenie: (0%)
-----

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.


--------------------
Strony internetowe Częstochowa
Szablony allegro
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 03:19
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn