HTML a Grafika na stronę?

[Ramiro]

Witam.
Mam pewien problem umiem HTML' a ale strony, które pisze nie są ładne wizualnie. Wiele czytałem na temat robienia grafiki do strony internetowej:
- wycinanie ze zdjęcia poszczególnych części i wstawianie ich na stronę - ale jak do kodu czy do części wizualnej np w front page?

Chciałbym was użytkownicy forum i moderatorów jeżeli będą chcieli prosić o pomoc albo raczej o wskazówki w robieniu strony. Mam przykładowy obrazek z którego np chciałbym zrobić stronę oto i on.

Teraz następujące pytania co do zrobienia wizualnej części strony. Podobna (tak jak czytałem) wycina się kawałkami ze zdjęcia i wstawia na stronę (tak jak pisałem nie wiem czy w kodzie czy w wizualne - front page). Załóżmy, że baner ma mieć szerokość 800 na wysokość 222 pikseli.
1 Jak mam wyciąć taki kawałek ze strony (chyba nie jestem pewien z górnej jego części) żeby był idealnie w tych wymiarach? (mam program do grafiki Photo Filtre ale także picasa i XnView).
2 Załużmy dalej że z jednej strony (z jednego boku mam wymiary ok 150 pikseli szerokości (wysokość mniejsza z tym na razie bo chce po prostu spróbować na sucho) i pytanie j.w. jak idealnie wyciąć taki kawałek?
3 Co z resztą zdjęcia mam ją wkleić do środka strony?
4 Jak na bocznej części strony pytanie 2 zrobić hiperłącza lub przyciski żeby były widoczne?
5 Jak zrobić tekst żeby był widoczny do pytania nr 3 na głównej - środkowej części strony?

na przykładzie takiej strony

http://www.zspglebowice.iap.pl/

Wszelkie tutoriale bardzo mile widziane. Bardzo proszę o pomoc ponieważ umiem HTML' a a moje strony nadal nie są ładne graficznie. Proszę jeszcze raz o parę rad.

 

[widmo17]

Jak chcesz użyć tego obrazka u góry, to wystarczy, że dasz go jako tło ;] Nie musisz się martwić o wycinanie itd, a potem jeśli chodzi o banner, menu itd możesz dać diva z tłem przezroczystym, jakieś delikatne obramowanie i masz fajną stronkę

 

[Ramiro]

<div class='quotetop'>CYTAT(widmo17 @ 12.02.2009, 13:20) <{POST_SNAPBACK}></div>

Jak chcesz użyć tego obrazka u góry, to wystarczy, że dasz go jako tło ;] Nie musisz się martwić o wycinanie itd, a potem jeśli chodzi o banner, menu itd możesz dać diva z tłem przezroczystym, jakieś delikatne obramowanie i masz fajną stronkę

[/b]

A jak bym chciał wycinać? To jest przykładowy obrazek znaleziony na necie.

 

[widmo17]

Zależy, bo najczęściej wycinając coś musisz mieć obrazek dopasowany, czyli miejsce na menu itd, ale po prostu wklejasz np do painta, wycinasz miejsce, które chcesz żeby było bannerem. Potem sprawdzasz jaki ten obrazek ma wymiary, tworzysz sobie diva o takich samych wymiarach i dajesz mu tło tego obrazka, który wyciąłeś (nie dawaj img src, bo jak będziesz chciał wstawić tekst do bannera będziesz musiał bawić się w php ;]). Potem wycinasz miejsca na menu, i powtarzasz itd, aż masz stronkę zrobioną ;]
Aha, divy muszą mieć nadane szerokości i wysokości takie jak Twoje wycięte obrazki bo stronka dzięki temu będzie bardziej statyczna, nie będzie jej się tak spieszyło do rozsypywania

A tak wogóle, to najlepiej wziąść sobie kartkę, ołówek i narysować styl ;]

 

[fr0zon]

Chlopakowi radzicie div-y

I dobrze. Ale lepiejodrazu mowic by się zabrał za HTML w polaczeniu z CSS. Ładne stronki idzie zrobić, a w razie przerubek w pliku css dodasz nowe class-y i zmiany istniejacych i stronka zmienia barwy a nie trzeba sie babrac w plikach html-a

Świetna sprawa

 

[widmo17]

---

 

[Ramiro]

<div class='quotetop'>CYTAT(widmo17 @ 12.02.2009, 23:41) <{POST_SNAPBACK}></div>

fr0zon, myślałem, że to oczywiste

ja mam stronę totalnie niezgodną ze standardami w3c, to prawda, ale jeszcze nie updłem na ryj żeby teraz wszystko pisać od nowa

ale większość osób teraz tworzy strony zgodnie ze standardami i dobrze, bo rzeczywiście pomaga ;]
i nie mów `radzicie` bo to ja radziłem xD[/b]

Wszystko fajnie ale jak zacząłem wycinać i dopasowywać sobie np baner to wyszło mi jak jedno zdjęcie przyklejone do drugiego. Jak ładnie zrobić grafikę? Zobaczcie np w moim pierwszym poście jest link tam jest połączone 2 zdjęcia no ja też chciałbym 2 połączyć ale jak tak robię tak jak syf jakiś to wygląda a tam jest taka mgiełka tak fajnie to wygląda. Może jakiś programik albo tutoria do grafiki mi podacie? Bardzo proszę.

 

[widmo17]

Do grafy trzeba mieć talent, tak samo jak do rysowania ;] www.gimpuj.info <-- to pod gimpa, kilka fajnych tutoriali jest

 

[LPU]

Można tez w Photoshopie coś "narysowac" / stworzyć

i użyć narzędzia "cięcia"

i na koniec zlozyc wszystko

.. malo jest na necie poradników do stworzenia grafiki w Photoshopie a nastepnie polaczeniu tego w Dreamweaver`ku ?

) szukaj Kolego a znajdziesz

..

Dosc fajny (bo filmik w PL wersji jezykowej) zawierał:
* Przygotowanie projektu graficznego w Photoshopie
* Cięcie grafiki na potrzeby WWW
* Metody kompresji obrazków
* Pierwsze kroki w Dreamweaverze
* Wstęp do stylów kaskadowych (CSS)
* Budowa layoutu w kodzie HTML
* Rozszerzone właściwości strony WWW..

nO warunek ;P ze musisz choc troche znac Photoshopa

 

[Ramiro]

<div class='quotetop'>CYTAT(LPU @ 14.02.2009, 22:07) <{POST_SNAPBACK}></div>

Można tez w Photoshopie coś "narysowac" / stworzyć

i użyć narzędzia "cięcia"

i na koniec zlozyc wszystko

.. malo jest na necie poradników do stworzenia grafiki w Photoshopie a nastepnie polaczeniu tego w Dreamweaver`ku ?

) szukaj Kolego a znajdziesz

..

Dosc fajny (bo filmik w PL wersji jezykowej) zawierał:
* Przygotowanie projektu graficznego w Photoshopie
* Cięcie grafiki na potrzeby WWW
* Metody kompresji obrazków
* Pierwsze kroki w Dreamweaverze
* Wstęp do stylów kaskadowych (CSS)
* Budowa layoutu w kodzie HTML
* Rozszerzone właściwości strony WWW..

nO warunek ;P ze musisz choc troche znac Photoshopa

[/b]

Jeszcze kolego jak byś dał linka to byłbym bardzo wdzięczny

I mam jeszcze taki mały problemik nie związany z grafiką. Chodzi o to że na mojej stronie nie wiem czemu data i czas jest czwartek, 12.02. chodzi o to że spóźnia się i nie wiem dlaczego.

A o to wpis z kodu strony

Czy coś zrobiłem nie tak?
Proszę o pomoc i jeśli to możliwe kolego LPU o linka.
Pozdr.

 

[LPU]

Np tu.. (nie wiem czy dzialaja linki).. http://nedds.pl/index.php?showtopic=29695

a ja mam stąd.. http://torrenty.org/torrent/251655

Nie podaje bezposrednich linkow wiec chyba nie lamie regulaminu

 

[widmo17]

ramiro, data i czas to se zrób
<?php echo date("d/m/Y H:i:s"); ?>

 

[Ramiro]

LPU[/b]

Wszystko fajnie tylko to są takie podstawy podstaw. Teoretycznie fajne jest zrobienie przycisków i parę innych sztuczek ale np baneru nie robi a on ściąga dużą uwagę użytkowników, itp.
Bardziej by mnie interesowało jak zrobić poszczególne części grafiki wycinanka np bocznego menu, jak zrobić ładny (nie jakiś kosmiczny tylko prosty ale ładny) baner, itp. Jeśli masz coś o tym to bardzo proszę.
Ale i tak dzięki nie mi to może komuś innemu się to przyda.

<div class='quotetop'>CYTAT( @ 15.02.2009, 22:01) <{POST_SNAPBACK}></div>

ramiro, data i czas to se zrób
<?php echo date("d/m/Y H:i:s"); ?>[/b]

PHP? Ja tu html używam.

 

[loganek]

no to http://www.kess.snug.pl/?sid=10&pid=12

 

[pixtr]

Ale te zdjecie sie nie nadaje na background. No bez przesady ale strony z taka grafika jak prezentuje kolega z pierwszego postu to sie robi w flashu zeby byly bardzo dynamiczne... czyli bez reload'u
No ale tu wszyscy dobrze mowia naucz sie CSS'a i wtedy możesz robić spoko strony. I jeszcze jedna uwaga jak masz zamiar robic strone to tzw. czescia graficzna ma byc tylko logo i ewentualnie menu a wszystkie tresci i takie pierdołki to obrabiaj w CSS.

A i jeszcze jedno jak chcesz wycinac bez zadnych efektow dodatkowych to w paincie i jeszcze "powycinaj" strone w CSS

 

[Ramiro]

<div class='quotetop'>CYTAT(loganek @ 17.02.2009, 16:53) <{POST_SNAPBACK}></div>

no to http://www.kess.snug.pl/?sid=10&pid=12[/b]

Dzięki super stronka

Panowie mam jeszcze kilka pytań.
Zacząłem pracować nad nową stronką tzn. szata graficzna w photoshopie tylko wg tamtego wzoru ale mój pomysł

Pytania moje dotyczą właśnie robienia tej szaty graficznej. Mam takie pytania między:
1 Jak zrobić tam na filmiku w takim małym kwadracie jest pokazane (jak na pani co nagrywa ten filmik) zrobić tło (ona tam wybiera szaro-białe i biały pasek na skos przez środek ja chce natomiast żeby jako tło był (tam bo bokach strony jeżeli nie będzie ona na całą szerokość przeglądarki) adres mojej strony np virus-virus? (tak nie będzie to tylko przykład).
2 Czy do tej szaty graficznej (i jak) będę mógł wstawiać galerię itp (czy to normalnie przez html'a dalej się robi w kodzie a to wszystko tylko wygląd łapie przy przeglądarce? (może trochę zamieszałem jeśli nie bardzo mnie rozumiecie to mogę spróbować inaczej wytłumaczyć czy to potrzebne?).
3 Proszę was o jakiś link do tutoriala czy coś w tym stylu jak do tej szaty graficznej (w photoshopie) zrobić baner w tym (może) może samym jeśli to możliwe programiku. Ba jeśli to możliwe chciałbym to (baner) zrobić ze zdjęcia a problemem jest właśnie to zdjęcie ponieważ ma 640 x 480 a likwidacja lub zmniejszenie tych proporcji nie robi nic pięknego z tego zdjęcia (a nie wiem jak zrobić np żeby je trochę pomniejszyć i dołożyć do jakiegoś innego obrazka ale tak żeby się zlewały ładnie jakby były całością a nie jak wycięte jedno z kąt indziej i drugie też.).

Sorry że wam truję du*ę ale proszę was jeszcze raz o pomoc.

 

[Kazim]

<div class='quotetop'>CYTAT(Ramiro @ 24.02.2009, 22:35) <{POST_SNAPBACK}></div>

2 Czy do tej szaty graficznej (i jak) będę mógł wstawiać galerię itp[/b]

Do szaty graficznej czy na stronę??
<div class='quotetop'>CYTAT(Ramiro @ 24.02.2009, 22:35) <{POST_SNAPBACK}></div>

3 Proszę was o jakiś link do tutoriala czy coś w tym stylu jak do tej szaty graficznej (w photoshopie) zrobić baner w tym (może) może samym jeśli to możliwe programiku. Ba jeśli to możliwe chciałbym to (baner) zrobić ze zdjęcia a problemem jest właśnie to zdjęcie ponieważ ma 640 x 480 a likwidacja lub zmniejszenie tych proporcji nie robi nic pięknego z tego zdjęcia (a nie wiem jak zrobić np żeby je trochę pomniejszyć i dołożyć do jakiegoś innego obrazka ale tak żeby się zlewały ładnie jakby były całością a nie jak wycięte jedno z kąt indziej i drugie też.).[/b]

Jeśli nie potrafisz obsługiwać photoshopa sciagnij gimpa. Po pierwsze darmowy, po drugie posiada warstwy(czyli to co PS, a ta opcja przydaje się bardzo), intuicyjny interfejs. Możesz uzyskać w nim efekty podobne do PS. Podobne, bo wiadomo PS jest bardziej zaawansowany. Ale dla Ciebie powinien wystarczyć.

Co do tej wielkości zdjęcia to jest fajny programik:Irfan View. Możesz pomniejszać zdjęcia przez procenty(czyli np. 95%) co gwarantuje ci że obraz nie będzie zniekształcony

 

[Ramiro]

<div class='quotetop'>CYTAT(Kazim @ 27.02.2009, 15:58) <{POST_SNAPBACK}></div>

Do szaty graficznej czy na stronę??[/b]

Kolego na stronę to można chyba np total commander i przerzucasz to co Ci potrzeba index.html itp czyż nie? A do szaty graficznej czyli np do zrobionej przeze mnie całej strony w photoshopie wrzucić zdjęcia jako galerię zdjęć a nie tekst (bo tekst przecież się wkleja) a tutaj trzeba mieć zdjęcia malutkie a po kliknięciu w nie większe (powiększają się). Czy w takim razie mam każde zdjęcie przekształcać na malutkie nie da się użyć jakiegoś programu do tego (nie mówie tutaj o front page bo tam się tak da). Rozwinąłem trochę temat ale w końcu chodzi mi o wrzucenie zdjęć do szaty graficznej. Czyli jak to można zrobić?

<div class='quotetop'>CYTAT(Kazim @ 27.02.2009, 15:58) <{POST_SNAPBACK}></div>

Jeśli nie potrafisz obsługiwać photoshopa sciagnij gimpa. Po pierwsze darmowy, po drugie posiada warstwy(czyli to co PS, a ta opcja przydaje się bardzo), intuicyjny interfejs. Możesz uzyskać w nim efekty podobne do PS. Podobne, bo wiadomo PS jest bardziej zaawansowany. Ale dla Ciebie powinien wystarczyć.[/b]

Nie doceniasz mnie chłopcze w dodatku nawet nie sądzisz ile mogę mieć lat (nie licząc praktyki w różnych programach

)

<div class='quotetop'>CYTAT(Kazim @ 27.02.2009, 15:58) <{POST_SNAPBACK}></div>

Co do tej wielkości zdjęcia to jest fajny programik:Irfan View. Możesz pomniejszać zdjęcia przez procenty(czyli np. 95%) co gwarantuje ci że obraz nie będzie zniekształcony[/b]

Zerknę na to dzięki.

 

[Kazim]

<div class='quotetop'>CYTAT(Ramiro @ 27.02.2009, 18:32) <{POST_SNAPBACK}></div>

Kolego na stronę to można chyba np total commander i przerzucasz to co Ci potrzeba index.html itp czyż nie?[/b]

Pliki na stronę wrzucasz poprzez ftp.
<div class='quotetop'>CYTAT(Ramiro @ 27.02.2009, 18:32) <{POST_SNAPBACK}></div>

A do szaty graficznej czyli np do zrobionej przeze mnie całej strony w photoshopie wrzucić zdjęcia jako galerię zdjęć a nie tekst (bo tekst przecież się wkleja)[/b]

Powiedz o co Ci konkretnie chodzi, bo Cię nadal nie rozumiem. Chcesz zrobic galerie zdjęc do strony np. masz stronę o jakimś filmie i chcesz dodac zdjęcia głównych aktorów do galerii?(to tylko przykład)
<div class='quotetop'>CYTAT(Ramiro @ 27.02.2009, 18:32) <{POST_SNAPBACK}></div>

a tutaj trzeba mieć zdjęcia malutkie a po kliknięciu w nie większe (powiększają się). Czy w takim razie mam każde zdjęcie przekształcać na malutkie nie da się użyć jakiegoś programu do tego (nie mówie tutaj o front page bo tam się tak da).[/b]

No penie że się da. Tylko teraz czy chcesz żeby to było w php(tak jak np. na nasza-klasa)czy w javascript czyli jak klikniesz zdjęcie tło się robi czarne i zdjęcie się ładuje?
<div class='quotetop'>CYTAT(Ramiro @ 27.02.2009, 18:32) <{POST_SNAPBACK}></div>

[...]chłopcze[...][/b]

<div class='quotetop'>CYTAT(Ramiro @ 27.02.2009, 18:32) <{POST_SNAPBACK}></div>

w dodatku nawet nie sądzisz ile mogę mieć lat (nie licząc praktyki w różnych programach

)[/b]

Przecież prosiłeś o link do tutka o Ps

<div class='quotetop'>CYTAT(Ramiro @ 27.02.2009, 18:32) <{POST_SNAPBACK}></div>

3 Proszę was o jakiś link do tutoriala czy coś w tym stylu jak do tej szaty graficznej (w photoshopie) zrobić baner w tym (może) może samym jeśli to możliwe programiku.[/b]

 

[Jestem Michał]

Ja polecam to tło w PhotoShop rozjaśnić oraz za pomocą Background dodać na stronkę. Oczywiście, o ile ma to być w HTML.