Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Jak zamienić zwykłe obrazki na tło
Forum PHP.pl > Forum > Przedszkole
Devik
19.02.2008, 17:48:14
Witam!

Nie wiedziałem jak za bardzo podpisać temat, tak aby był adekwatny do tego z czym mam problem, więc jeżeli z góry nie jest on taki jak powinien to przepraszam. Stworzyłem sobie stronę www w Photoshopie w ImageReady pociąłem grafikę na kawałki i automatycznie utworzyłem kod HTML'a (za pomocą IR). Niestety kod, który jest stworzony nie jest taki jaki chciałbym aby był, głównie chodzi mi o to, by zamiast zwykłych obrazków było stałe tło, którego nie można byłoby zaznaczyć. Nie mam zielonego pojęcia w jaki sposób to zrobić, aby całkowicie nie pisać od podstaw ręcznie tego, gdyż aż tak dobrze nie znam się na pisaniu kodu HTML. Poniżej zamieszczam całe 81 linijek kodu.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>koncowe</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6. </head>
  7. <body bgcolor="#000000">
  8. <!-- ImageReady Slices (koncowe.psd) -->
  9.  
  10. <table id="Table_01" width="970" border="0" cellpadding="0" cellspacing="0" align="center">
  11. 	<tr>
  12. 		<td>
  13. 			<img id="index_01" src="images/index_01.png" width="75" height="101" alt="" /></td>
  14. 		<td>
  15. 			<img id="index_02" src="images/index_02.png" width="176" height="101" alt="" /></td>
  16. 		<td>
  17. 			<img id="index_03" src="images/index_03.png" width="225" height="101" alt="" /></td>
  18. 		<td>
  19. 			<img id="index_04" src="images/index_04.png" width="221" height="101" alt="" /></td>
  20. 		<td>
  21. 			<img id="index_05" src="images/index_05.png" width="200" height="101" alt="" /></td>
  22. 		<td>
  23. 			<img id="index_06" src="images/index_06.png" width="73" height="101" alt="" /></td>
  24. 	</tr>
  25. 	<tr>
  26. 		<td>
  27. 			<img id="index_07" src="images/index_07.png" width="75" height="108" alt="" /></td>
  28. 		<td>
  29. 			<img id="index_08" src="images/index_08.png" width="176" height="108" alt="" /></td>
  30. 		<td>
  31. 			<img id="index_09" src="images/index_09.png" width="225" height="108" alt="" /></td>
  32. 		<td>
  33. 			<img id="index_10" src="images/index_10.png" width="221" height="108" alt="" /></td>
  34. 		<td>
  35. 			<img id="index_11" src="images/index_11.png" width="200" height="108" alt="" /></td>
  36. 		<td>
  37. 			<img id="index_12" src="images/index_12.png" width="73" height="108" alt="" /></td>
  38. 	</tr>
  39. 	<tr>
  40. 		<td>
  41. 			<img id="index_13" src="images/index_13.png" width="75" height="36" alt="" /></td>
  42. 		<td>
  43. 			<img id="index_14" src="images/index_14.png" width="176" height="36" alt="" /></td>
  44. 		<td colspan="2">
  45. 			<img id="index_15" src="images/index_15.png" width="446" height="36" alt="" /></td>
  46. 		<td>
  47. 			<img id="index_16" src="images/index_16.png" width="200" height="36" alt="" /></td>
  48. 		<td>
  49. 			<img id="index_17" src="images/index_17.png" width="73" height="36" alt="" /></td>
  50. 	</tr>
  51. 	<tr>
  52. 		<td>
  53. 			<img id="index_18" src="images/index_18.png" width="75" height="49" alt="" /></td>
  54. 		<td>
  55. 			<img id="index_19" src="images/index_19.png" width="176" height="49" alt="" /></td>
  56. 		<td>
  57. 			<img id="index_20" src="images/index_20.png" width="225" height="49" alt="" /></td>
  58. 		<td>
  59. 			<img id="index_21" src="images/index_21.png" width="221" height="49" alt="" /></td>
  60. 		<td>
  61. 			<img id="index_22" src="images/index_22.png" width="200" height="49" alt="" /></td>
  62. 		<td>
  63. 			<img id="index_23" src="images/index_23.png" width="73" height="49" alt="" /></td>
  64. 	</tr>
  65. 	<tr>
  66. 		<td colspan="6">
  67. 			<img id="index_24" src="images/index_24.png" width="970" height="136" alt="" /></td>
  68. 	</tr>
  69. 	<tr>
  70. 		<td colspan="6">
  71. 			<img id="index_25" src="images/index_25.png" width="970" height="414" alt="" /></td>
  72. 	</tr>
  73. 	<tr>
  74. 		<td colspan="6">
  75. 			<img id="index_26" src="images/index_26.png" width="970" height="92" alt="" /></td>
  76. 	</tr>
  77. </table>
  78.  
  79. <!-- End ImageReady Slices -->
  80. </body>
  81. </html>
[HTML] pobierz, plaintext


Czy ktoś potrafi mi pomóc? Z góry dziękuje.

Pozdrawiam
Cezar708
19.02.2008, 18:26:38
1. usuń wszystko spomiędzy <body> i </body>
2. znacznik body zmień na:
[HTML] pobierz, plaintext 
  1. <body style="background-image: url('index.png');background-color: #000000">
[HTML] pobierz, plaintext


zakładam, że plik, który wcześniej pociąłeś nazywa się index.png i znajduje się w tym samym katalogu co plik html.

jak Ci się wynik spodoba to poczytaj o CSS2 (lub CSS3) i wyrzuć wszystko do zewnętrznego pliku CSS.

Pozdrawiam
Devik
19.02.2008, 18:35:55
Nie po to pociąłem dokładnie cały plik na części, aby mi się jeden dłużej wczytywał smile.gif

CSS2 CSS3 a co dokładniej? Bo nie rozumiem
Cezar708
19.02.2008, 18:51:31
no tak, rozumiem, tylko jeśli chcesz to mieć jako tło to w ten sposób będzie Ci bardzo ciężko efekt taki osiągnąć, ponieważ nie można jako tło podać kilka obrazków.

Chyba, że interesuje Cię takie rozwiązanie, że dla każdej komórki tabeli podasz osobno plik z tłem, coś w stylu:
[HTML] pobierz, plaintext 
  1. (..)
  2. <td style="background-image('images/index_01.png'); width: 225; height: 101px;">
  3.   &nbsp;
  4. </td>
  5. <td style="background-image('images/index_02.png'); width: 225; height: 101px;">
  6.  
  7. </td>
  8. <td style="background-image('images/index_03.png'); width: 225; height: 101px;">
  9.   &nbsp;
  10. </td>(..)
[HTML] pobierz, plaintext


aczkolwiek uważam, że będzie to rozwiązanie kłopotliwe, bo jak wcześniej wspomniałem będziesz musiał osobno każdą komórkę tabeli wypełnić

Cytat
CSS2 CSS3 a co dokładniej? Bo nie rozumiem

chodziło mi o to, żebyś style CSS zapisał w osobnym pliku, a nie w znacznikach style="", jak pokazałem Ci w tych przykładach

Pozdrawiam
Sebastian003
19.02.2008, 19:29:22
Jeszcze lepiej oprzeć ten szablon na elemencie blokowym div smile.gif
Wieviór
19.02.2008, 19:43:19
Czy 100 orazków 10x10 jest rzeczywiście lepsze niż jeden 100x100?
nowotny
19.02.2008, 20:00:30
Cytat(Wieviór @ 19.02.2008, 19:43:19 ) *
Czy 100 orazków 10x10 jest rzeczywiście lepsze niż jeden 100x100?

Tu akurat nie jest... biggrin.gif

Hint: 100 obrazków 10x10 to jeden obrazek 1000x1000... winksmiley.jpg
Wieviór
19.02.2008, 20:17:56
yyy... wytłumacz mi swoją teorię... ;]
Devik
19.02.2008, 21:42:33
Cezar708: Wielkie dzięki, teraz tylko mi powiedz w jaki sposób mam to zapisać jako *.css smile.gif

Napotkałem na pierwsze problemy związane z przekształcaniem kodu w style, oto i one smile.gif


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6. </head>
  7. <body bgcolor="#000000">
  8. <!-- POCZĄTEK -->
  9.  
  10. <table id="Table_01" width="970" border="0" cellpadding="0" cellspacing="0" align="center">
  11. 	<tr>
  12. 			<td style="width: 75px; height: 101px; background: url(images/index_01.png);"></td>
  13. 			<td style="width: 176px; height: 101px; background: url(images/index_02.png);"></td>
  14. 			<td style="width: 225px; height: 101px; background: url(images/index_03.png);"></td>
  15. 			<td style="width: 221px; height: 101px; background: url(images/index_04.png);"></td>
  16. 			<td style="width: 200px; height: 101px; background: url(images/index_05.png);"></td>
  17. 			<td style="width: 73px; height: 101px; background: url(images/index_06.png);"></td>
  18. 	</tr>
  19. 	<tr>
  20. 			<td style="width: 75px; height: 108px; background: url(images/index_07.png);"></td>
  21. 			<td style="width: 176px; height: 108px; background: url(images/index_08.png);"></td>
  22. 			<td style="width: 225px; height: 108px; background: url(images/index_09.png);"></td>
  23. 			<td style="width: 221px; height: 108px; background: url(images/index_10.png);"></td>
  24. 			<td style="width: 200px; height: 108px; background: url(images/index_11.png);"></td>
  25. 			<td style="width: 73px; height: 108px; background: url(images/index_12.png);"></td>
  26. 	</tr>
[HTML] pobierz, plaintext

Do tego momentu jest wszystko spoko, ale dalej już zaczynają się problemy bo mi się rozjeżdża wszystko.

[HTML] pobierz, plaintext 
  1. <tr>
  2. 			<td style="width: 75px; height: 36px; background: url(images/index_13.png);"></td>
  3. 			<td style="width: 176px; height: 36px; background: url(images/index_14.png);" colspan="2"></td>
  4. 			<td style="width: 446px; height: 36px; background: url(images/index_15.png);"></td>
  5. 			<td style="width: 200px; height: 36px; background: url(images/index_16.png);"></td>
  6. 			<td style="width: 73px; height: 36px; background: url(images/index_17.png);"></td>
[HTML] pobierz, plaintext

Tak wygląda teraz, a poniżej jak poprzednio

[HTML] pobierz, plaintext 
  1. <td>
  2. 			<img id="index_13" src="images/index_13.png" width="75" height="36" alt="" /></td>
  3. 		<td>
  4. 			<img id="index_14" src="images/index_14.png" width="176" height="36" alt="" /></td>
  5. 		<td colspan="2">
  6. 			<img id="index_15" src="images/index_15.png" width="446" height="36" alt="" /></td>
  7. 		<td>
  8. 			<img id="index_16" src="images/index_16.png" width="200" height="36" alt="" /></td>
  9. 		<td>
  10. 			<img id="index_17" src="images/index_17.png" width="73" height="36" alt="" /></td>
  11. 	</tr>
[HTML] pobierz, plaintext


No i dalej w sumie też jest źle, ale o tym później smile.gif Co z tym co tu mam zrobić?
Cezar708
20.02.2008, 11:21:42
ja proponuje wszystko od nowa:

1. podziel cały Twój obrazek na RÓWNE części (chodzi o to, aby wszystkie były jednej wielkości)

2. następnie stwórz plik HTML:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6. <link rel="StyleSheet" href="/style.css" type="text/css" media="screen"> <!-- tu import CSS -->
  7. </head>
  8. <body>
  9. <!-- POCZĄTEK -->
  10. <div id="container">
  11.   <div id="content">
  12.   Tu jest treść strony, zauważ, że pod tym jest Twoje tło
  13.   </div>
  14.   <table id="Table_01" width="970" border="0" cellpadding="0" cellspacing="0" align="center">
  15.   <tr>
  16.   <td class="td1x1"></td>
  17.   <td class="td1x2"></td>
  18.   <td class="td1x3"></td>
  19.   <td class="td1x4"></td>
  20.   <td class="td1x5"></td>
  21.   <td class="td1x6"></td>
  22.   </tr>
  23.   <tr>
  24.   <td class="td2x1"></td>
  25.   <td class="td2x2"></td>
  26.   <td class="td2x3"></td>
  27.   <td class="td2x4"></td>
  28.   <td class="td2x5"></td>
  29.   <td class="td2x6"></td>
  30.   </tr> 
  31.   </table>
  32. </div>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext


3. trzeci krok to napisanie CSS:
Kod
body {
background-color: silver;
}
div#content{
  position: absolute;
  top: 100px; /* top i left regulujesz gdzie chcesz miec ulozony kontent */
  left: 100px;
}
table#Table_01 tr td{
  width: 128px;
  height: 105px;
}
td.td1x1{
  background-image: url(images/index_01.png);
}
td.td1x2{
  background-image: url(images/index_02.png);
}
td.td1x3{
  background-image: url(images/index_03.png);
}
td.td1x4{
  background-image: url(images/index_04.png);
}
td.td1x5{
  background-image: url(images/index_05.png);
}
td.td1x6{
  background-image: url(images/index_06.png);
}
td.td2x1{
  background-image: url(images/index_07.png);
}
td.td2x2{
  background-image: url(images/index_08.png);
}
td.td2x3{
  background-image: url(images/index_09.png);
}
td.td2x4{
  background-image: url(images/index_10.png);
}
td.td2x5{
  background-image: url(images/index_11.png);
}
td.td2x6{
  background-image: url(images/index_12.png);
}
/* i tak dalej */


4. w Divie o id = content wrzucasz swoją treść strony, a wszystko co jest ma być będzie tłem..

Mam nadzieję, że idee przestawiłem w sposób dość zrozumiały.

Pozdrawiam
Devik
20.02.2008, 11:33:47
Okej dobra poradziłem sobie sam z problemem nie rozpoczynając nic od nowa, tamten sposób wydawał mi się lepszy dlatego spędziłem przy nim więcej czasu. Dzięki za wszystko i za dobre chęci smile.gif

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