SP w Piotrowicach Strona Główna SP w Piotrowicach
Forum Szkoły Podstawowej nr 3 w Piotrowicach

FAQFAQ  SzukajSzukaj  UżytkownicyUżytkownicy  GrupyGrupy
RejestracjaRejestracja  ZalogujZaloguj  AlbumAlbum

Poprzedni temat «» Następny temat
Wstawianie grafiki
Autor Wiadomość
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-03, 23:53   Wstawianie grafiki

Zagadnienia:
  1. poprawne kodowanie "polskich" znaków diakrytycznych;
  2. wybór koloru lub/i tła strony;
  3. korzystanie z nagłówków;
  4. formatowanie koloru i rozmiaru czcionek;
  5. wstawianie i formatowanie grafiki;
  6. hiperłącza do innych stron (tekstowe i graficzne);
  7. wyliczanie i numerowanie;
  8. proste tabele;
  9. podział strony na ramki;
  10. interpretacja kodu strony i jego optymalizacja / poprawienie.

===
Teraz będzie dopiero jazda, bo oprócz wstawienia grafiki, musimy umieć ją przygotować.
Tzn. czasem zdjęcie czy obrazek będzie miało rozmiar np. 2000x1500, a my np. potrzebujemy je w rozmiarze 200x150. Wtedy trzeba użyć jakiegoś programu graficznego do zmniejszenia wymiarów zdjęcia i np. stopnia kompresji.

Proszę napisać mi, czy i jakiego programu do przeglądania grafiki używacie!
Ja mam akurat IrfanView, który jest po polsku i darmowy i radzi sobie nawet z hurtową obróbką zdjęć, np. daję cały folder zdjęć z wycieczki, żeby mi zmniejszył rozmiar dłuższego boku do 800px (zachowując proporcje) i stopień kompresji jpg na 75%. Za kilka sekund mam gotowe zdjęcia.

Do wstawienia grafiki używamy znacznika <img> w składni:
Kod:
<img src="ścieżka do obrazka">

lub
Kod:
<img src="ścieżka do obrazka" alt="krótki opis obrazka" width="x" height="y">

gdzie x i y to szerokość i wysokość obrazka w pikselach. Dobry nawyk to podawanie tych wartości, ale takich jak rzeczywiste rozmiary obrazka. Atrybut alt służy podpisaniu obrazka, które pojawi się, gdy najedziemy na niego myszą.

Podawanie wymiarów np. 200 na 150 pikseli, przy obrazku dużo większym, spowoduje oczywiście to, że zobaczycie na stronie rzeczywiście obrazeczek 200x150 px, ale będzie się ładował CAŁY DUŻY obraz czy zdjęcie, które np. prosto z aparatu ma rozmiar kilku megabajtów. W żadnym wypadku nie należy tak robić!

Podsumowując, najpierw sprawdzenie wymiarów i wielkości zdjęcia, a potem wstawianie.

===
Zadanie nr 4

Proszę stworzyć plik "obrazki.html":
1. Tło ustawione na zielone.
2. Nagłówek o treści "Obrazki"
3. Szukamy w necie dwóch obrazków o rozmiarze nieprzekraczającym 640x480 px i wadze nie większej niż 70 KB.
4. Wstawiamy je pod nazwami "obrazek1.jpg" i "obrazek2.jpg" na stronę "obrazki.html" opatrując podpisami (nagłówkami) "Obrazek 1", "Obrazek 2". Po najechaniu na nie myszą, powinien pojawić się krótki opis obrazka.
5. Na dole, oddzielony linią poziomą, bieżący rok + podpis autora strony, rozmiar czcionki 2, kolor czerwony.
6. Na adres postmaster@zspg-piotrowice.kei.pl przesłać wszystkie 3 pliki.
_________________
Pozdrawiam
----------------------------------
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-05, 01:04   

Daro

Nie widzę nagłówków nad obrazkami, poza tym wstawiłeś większe obrazki niż widać na stronie, one są FIZYCZNIE większe, a Ty podałeś mniejsze wymiary w kodzie. Nie praktykuje się tego, proszę to ujednolicić.

Linka

Może być, tylko pliki miały mieć nazwy "obrazek1.jpg", "obrazek2.jpg". Mam nadzieję, że umiesz zmienić nazwy i tylko przez przeoczenie pozostawiłaś takie jakie są... ;-)
Proszę zmienić nazwy w myśl zadania i przesłać do mnie wraz z poprawionym kodem.

Sylwia

Ładowanie obrazków na imageshack jest jakimś wyjściem, strona pozornie działa, tylko że z czasem te obrazki znikną. Proszę je ściągnąć, zmienić nazwy w myśl zadania i przesłać do mnie wraz z poprawionym kodem.
Do tego przeczytaj uważnie, JAK mają się nazywać pliki, a CO ma widzieć użytkownik na stronie, chodzi o podpisy zdjęć. Nie mam tu na myśli atrybutu <alt>, który jest użyty poprawnie.

Wojtek

Dobrze, do szczęścia brakuje mi tylko podania szer. i wys. obrazków, ale ujdzie. :-)

===
Jak widać, nie ma bezbłędnego kodu (w sumie nie musi być, choć niektórzy napisali prawie idealnie), nie chcę tu nikogo specjalnie wyróżniać, w końcu mamy się czegoś nauczyć, a nie rywalizować.
Życzę wytrwałości w szukaniu własnych błędów, to jest najtrudniejsze.
_________________
Pozdrawiam
----------------------------------
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-06, 17:28   Kinga

Kinia



Strona wygląda ok, ale hotlinkowanie z innych stron może skończyć się "obciachem".

Hotlinkowanie to wklejanie na własną stronę obrazków, które znajdują się na innych serwerach, bezpośrednio wpisując adres URL w kodzie. Jak ktoś wchodzi na Waszą stronę, to generuje ruch na obcych serwerach, bo obrazki stamtąd są pobierane. Administratorzy tych serwerów mogą skasować własne bądź co bądź zdjęcia, wtedy na Waszej stronie będą puste pola, albo co gorsza, mogą na tych obrazkach napisać np. "Jesteś złodziejem!", tak już bywało, choćby na allegro.

Robiąc stronę, kopiujemy grafikę do tego samego folderu (czasem innych, ale nie o to tu chodzi) co plik .html, dlatego ściągnij te obrazki, zmień ich nazwę na taką jak w poleceniu i dostarcz mi wraz z poprawionym kodem.
_________________
Pozdrawiam
----------------------------------
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-06, 19:01   

Piotrek
To samo co do Daro...
"wstawiłeś większe obrazki niż widać na stronie, one są FIZYCZNIE większe, a Ty podałeś mniejsze wymiary w kodzie. Nie praktykuje się tego, proszę to ujednolicić."
_________________
Pozdrawiam
----------------------------------
 
 
Wyświetl posty z ostatnich:   
Odpowiedz do tematu
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Możesz ściągać załączniki na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB modified by Przemo © 2003 phpBB Group