Trochę męcząca sprawa. Raczej unikam tematu, ale czasami trzeba zrobić, więc nie ma rady. Poniżej kilka spostrzeżeń, które mogą się przydać:

• im prostsze tym lepsze,
• przeważnie w większości klientów poczty divy oraz atrybut float były dobrze obsługiwane jak również cała reszta. Problemów dostarczyła jedynie rodzina microsoft outlook,
• dobrze jest unikać obrazów tła, można wbić do body, ale pozostałe obrazy lepiej osadzać poprzez tag <img>,
• style, najlepiej umieszczać bezpośrednio w każdym tagu poprzez atrybut style(męczące i szybko syf w kodzie się robi, ale cóż…),
• szkielet wiadomości, kolumny, elementy blokowe najlepiej robić w oparciu o tabelki, outlooki nie obsługują atrybutu width dla elementów div jedynie dla table, więc jak użyjemy divów będziemy mieli wszystko na 100%. Podobnie jest z padding(margin już ok).
• Specyfikacja co można użyć w outlook 2007

Jak zrobić okrągłe ramki? Rzecz wydaje się prosta i taka jest. Sposobów w sieci znalazłem wiele.

• ramki css 3.0 – nie w każdej przeglądarce zadziała,
• ramki tworzone za pomocą java script bez dodatkowych obrazów(ciekawe, ale skomplikowanych się nie dało zrobić),
• ramki tworzone za pomocą java script i obrazów(to wydało mi się ciekawe).

Znalazłem gotowe, działające rozwiązanie, które za pomocą kodu java script obwijało w ramkę żądany element html. Ramka była podzielonym na składowe obrazem. Nie trzeba było dodawać dodatkowego kodu html żeby ją otrzymać bo to było dodawane przez js. Rozwiązanie wydało mi się ciekawe. Ale po tym jak obejrzałem kod java script, nie za bardzo mi się spodobał – był za długi i niechlujnie zrobiony, pewnie by coś przestało działać. Postanowiłem zrobić sam.

Założenie: zrobić jak najprościej.
1. Pierwszy etap to przygotowanie w Photo Shopie  ramki, narożników, cienia itd. Obrazy można pociąć tak że każdy narożnik i krawędź będzie oddzielnie(najprościej) lub łączyć je w celu ograniczenia liczby obrazów i żądań do serwera.
2. Ramkę do dowolnego elementu dodajemy, otaczając go w dodatkowe kontenery, które są wyposażone w tło(background) zawierające odpowiednią krawędź bądź narożnik. To w sumie wystarczy bo już mamy gotową ramkę. Ale jeśli ramek jest kilka, to robi nam się śmietnik w kodzie i jest kupa niepotrzebnych kontenerów(4 dla narożników i 4 dla krawędzi). Można by to było uporządkować.
3. Z pomocą w porządkowaniu przychodzi nam jQuery, a dokładnie metoda: wrap().

Kod do tworzenia ramek:

$(document).ready(function(){
        $('.roundMe').each(function(){
                $(this).wrap(
                '<div class="rounded"><div class="leftBorder"><div class="rightBorder"><div class="bottomBorder"><div class="leftUpperCorner"><div class="rightUpperCorner"><div class="leftLowerCorner"></div></div></div></div></div></div></div>'
                );
        });
});

Powyższy kod do każdego elementu posiadającego klasę roundMe doda ramkę. Poszczególne divy i obrazki w nich zawarte można grupować upraszczając to rozwiązanie.

Jak zaprojektować dobrą stronę internetową? Najprostszą odpowiedzią jest – zlecić zrobienie strony profesjonalistom. Dlaczego? Niestety strony nie robi jeden człowiek. Do tego potrzebne jest co najmniej dwóch ludzi, a często i to za mało i tak na prawdę to potrzeba kilku osób. Minimum to grafik i koder Html i css.
No ale zakładamy że stronę robimy sami.

Jak zaprojektować dobrą stronę internetową?

1. Zawartość merytoryczna.
   To jest najważniejsze. Treści to podstawa, wartościowe treści. Nieważne czy strona będzie dobrze wyglądać, czy kod będzie się sypać, dobre treści zawsze znajdą odbiorcę. Taka jest też idea pozycjonowania. Wartościowy content jest linkowany przez użytkowników w blogach, na forach, na własnych stronach itd.
2. Grafika.
   Zasada im więcej tym lepiej raczej się nie sprawdza. Mając niewielkie umiejętności w tym zakresie, staramy się zrobić coś prostego, nie przesadzać z kolorami. Zrobienie ze strony choinki to nic dobrego. Do zaprojektowania wyglądu strony posłużyć się można programem Adobe Photoshop. 30 dniowy trial jest dostępny na stronie Adobe. Photoshop jest stosunkowo intuicyjny i po poznaniu podstawowych narzędzi oraz styli można zrobić całkiem ładny projekt.
   Zanim przystąpimy do prac trzeba wybrać kolorystykę strony. Dla tych, którzy nie mają wyczucia kolorów z pomocą przychodzi kuler, bardzo fajna aplikacja, firmy Adobe, która pozwala na wybranie schematu kolorów na podstawie fraz i wyszukiwarki. Nowe schematy są dodawane przez innych użytkowników. Proszę się nie przejmować, że kolorów w schemacie jest tylko 5. To wystarczająca ilość. Jak zabierzemy się do pracy i zaczniemy już układać wszystko okaże się że taki schemat jest wystarczający.
   Wielkość projektu. Teoretycznie nie ma ograniczeń. Ale trzeba pamiętać o tym że użytkownicy internetu mają różne monitory i dobrze by było zapewnić większości przyjemne oglądanie strony. Według ranking.pl w Polsce wciąż króluje rozdzielczość 1024x768px. Rozdzielczością w pionie nie musimy się przejmować, robimy strony dowolnie długie. Natomiast przesuwanie suwakiem w poziomie jest niewygodne, więc projekt graficzny musi się zmieścić w szerokości 1024px. Należy też pamiętać że suwak przeglądarki zajmuje 24px, więc do użytku zostaje nam 1000px – jest to więc maksymalny obszar jaki mamy do wykorzystania.
   Layout. Kiedyś bardzo modnym układem strony był: Nagłówek, trzy kolumny i stopka. Unikajmy takiego układu. Po pierwsze przysporzy nam on więcej problemów przy kodowaniu, a chcemy osiągnąć dobry efekt jak najprościej. Po drugie taki układ jest mniej czytelny od dwukolumnowego. Zazwyczaj wystarczają dwie kolumny. Kto chce zobaczyć jak sobie radzą duże portale wystarczy rzucić okiem np. na: onet.pl. Tak więc wybieramy układ: Nagłówek, dwie kolumny i stopka. Jak wykonać w prosty i poprawny sposób dwie kolumny w html i css możecie przeczytać tutaj: Dwie kolumny w css bez używania tabel. Ładne proporcje kolumn, to 1 do 3. Ale tu możemy szerokość dostosować do naszych potrzeb. Podobnie jest z wysokością nagłówka. Węższy gdy mamy ważny content do pokazania jak najszybciej, szerszy jeśli chcemy wrzucić np. ładne i duże zdjęcie.
   Typografia. Jest bardzo ważna. Dobrze dobrane czcionki zwiększą czytelność i również zwiększą urodę naszej strony. Najlepiej było by użyć czcionek komercyjnych, ale te kosztują sporo.
   Wielkość tekstu, który użytkownik będzie czytał to zazwyczaj 11px. Do nagłówków i wyróżnienia możemy użyć większych czcionek. Ale nie przesadzajmy. Starajmy się też unikać krzykliwych kolorów, dużych liter oraz dużej wielkości czcionki. Nie róbmy tego:

   ALA MA KOTA

3. Html i Css.
   Cięcie strony nie jest rzeczą trudną. Sam szkielet możemy wybrać korzystając z takich narzędzi jak Dreamweaver z pakietu Adobe. Mamy do wyboru kilka layoutów, z których na pewno coś wybierzemy dla siebie. Możemy też skorzystać z tego: Dwie kolumny w css bez używania tabel.
   Porządek. Porządek w kodzie jest niezmiernie ważny. Według mnie jest na drugim miejscu po prostocie. Mając burdel w kodzie narażamy się na błędy i na długie godziny straty żeby je potem odszukać. Jak go osiągnąć.
   • Po pierwsze oddzielmy style Css od Html. Style możemy zapisywać w oddzielnym pliku i dołączyć je do dokumentu html za pomocą tagu: <link /> w sekcji <head></head> dokumentu.
   • Nazwy klas i id powinny odzwiercielać rzeczywiste przeznaczenie elementów, którym zostały nadane.
   • Stosujmy jednakową konwencję w nazewnictwie w całym projekcie np. ala_ma_kota lub alaMaKota.
   • W html stosujmy wcięcia w kodzie. To co siędzi w kontenerze dostaje wcięcie 1 znaku Tab i tak dalej w głąb. Oznaczajmy sobie koniec elementów blokowych np. <!–koniec kontenerGlowny –></div>
   • Używajmy i dobrze poznajmy podstawowe elementy html: div, span, table, ul, p, h, a, egzotyczne sobie odpuśćmy, bo są rzadko stosowane i raczej się nie przydadzą.

   Prostota. Jeśli zrobiliśmy coś co ma wiele linijek kodu, to najprawdopodobniej zrobiliśmy to źle. Radzę porzucić wtedy tok myślenia, który doprowadził nas do tak długiego kodu i podejść do problemu z innej strony. W taki sposób unikniemy sporej ilości błędów, które na pierwszy rzut oka są ukryte a wyjdą później. No i oczywiście do prostego kodu łatwiej wrócić po roku czasu.
   Style które warto znać i rozumieć. Często używane i bardzo ważne dla układu strony, oraz dla poprawnego wyświetlania są style odpowiedzialne za pozycję elementu i są to:

   • position oraz top, left, right, clear, z-index
   • display
   • margin
   • padding

   Za ich pomocą ułożymy każdy element strony dokładnie tam gdzie chcemy.
   Do umieszczania obrazów używamy kontenerów np. div oraz stylu: background.
   Na koniec. Pamiętajmy o tym że użytkownicy korzystają z różnych przeglądarek, warto jest więc przetostować naszą stronę w tych najpopularniejszych. Przydatną statystykę znajdziemy na stronie rankging.pl. W dzień pisania tego artykułu warto testować stronę pod IE6, IE7, Firefox 3.0, Firefox 2.0, Opera.
   Warto pisać bezbłędny kod. Mimo że przeglądarka wyświetli treść z błędami, to i tak może być błąd. Żeby tego uniknąć dokument możemy sprawdzić używając validatora Html i Css na stronach W3C(oprócz specyfikacji, jest tam też sporo samouczków, bardzo fajnie napisanych).

Osadzanie obrazu w formacie png na stronie www

Chcac uzyskać wysoką jakość obrazu i jednocześnie jego przezroczystość nie możemy użyć ani gifa ani jpga. Pozostaje nam png. O ile Firefox, Opera i IE 7 radzą sobie bardzo ładnie to IE6 zrobi nam przykrą niespodziankę. Wypełni miejsca przezroczyste pięknym niebieskim kolorkiem.

Obejść ten błąd można porzucając tag img, a osadzając obraz jako podłoże(background) używając styli – dla Firefoxa, Opery i IE7, a dla IE6 filtrów.

Nieprawidłowe osadzenie png

Prawidłowe osadzenie png

Kod do powyższego przykładu

<div id="png">
</div>

#png{
 background:url(images/png.png) top left no-repeat;
 width:120px;
 height:30px;
}
*html #png{
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/png.png",sizingMethod="crop");
}

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/png.png”, sizingMethod=”crop”); – ta linijka odpowiada za umieszczenie png jako tła w IE6. Atrybut src wskazuje na źródło pliku, a atrybut sizingMethod na sposób wyświetlania. Jest ich trzy:

• crop – przytnie obrazek do wymiaru elementu,
• image – dopasuje wymiar elementu do wymiaru obrazu,
• scale – dopasuje wymiar obrazu do wymiaru elementu.

Nie zapominajmy jeszcze o tym aby usunąć obraz który jest nałożony jako background, ale w normalny sposób, dzięki stylom – background-image: none;.

Pozycjonowanie elementu wewnątrz elementu blokowego

#kontener{
    width:200px;
    position:relative;
    background-color:#F2F2F2;
    border:solid 1px #CCCCCC;
}
#kontener .element{
    position:absolute;
    bottom:0;
    right:0;
}
<div id="kontener">
    <img src="images/dot.gif" width="66" height="18" alt="" />
    <p>Przykładowy tekst, o stronach internetowych.
    Tworzenie stron www. Projektowanie stron internetowych.</p>
</div>

Aby np. jak w powyższym przykładzie umieścić element, w tym wypadku div w dolnym prawym rogu, elementu blokowego można wykorzystać do tego celu właściwość position. Element blokowy musi mieć position:relative lub position:absolute oraz koniecznie określoną szerokość width. Bez określonej szerokości w IE6 strona się posypie. Element pozycjonowany ustawiamy już normalnie przez position:absolute i jego pozycja odnosić się będzie nie do dokumentu tylko do elementu nadrzędnego. Pozycja obrazka będzie ustawiana do pierwszego elementu blokowego, nadrzędnego który będzie miał ustawioną własnoć position.

Jak zrobić dwie kolumny w css, bez używania tabeli?

HTML powyższego przykładu

<div id="exCenter">
    <div id="exHeader">
        Nagłówek strony
    </div>
    <div id="exContent">
        <div id="exLeftColumn">
            <p>Lewa kolumna</p>
        </div>
        <div id="exRightColumn">
            <p>Prawa kolumna</p>
            <p>Prawa kolumna</p>
            <p>Prawa kolumna</p>
        </div>
        <div class="exClear"></div>
    </div>
    <div id="exFooter">
        <p>Stopka strony</p>
    </div>
</div>

CSS powyższego przykładu

#exCenter{
    width:300px;
    margin:auto;
}
#exHeader,#exContent,#exFooter{
    background-color:#f1f1f1;
    border:solid 1px #CCCCCC;
    margin-bottom:2px;
}
#exLeftColumn{
    float:left;
    width:149px;
    background-color:#00CCFF;
}
#exRightColumn{
    float:right;
    width:149px;
    background-color:#CCCCCC;
}
.exClear{
    clear:both;
    line-height:0px;
}

Do rozmieszczenia kolumny lewej z lewej strony a prawej z prawej strony, posłużyć się można regułą css float. Odpowiednio dla lewej kolumny reguła float przyjmuje wertość float:left, a dla prawej float:right. To praktycznie by załatwiło sprawę, mamy kolumny tam gdzie trzeba. Al chcemy jeszcze żeby proporcje były takie jakie chcemy. Do określenia proporcji wykorzystuje się regułę width, podająć szerokość każdej z kolumn. Wszystko ładnie pięknie. Tylko narazie rodzic w którym umieszczone są kolumny, nie rozciąga się na wysokość kolumn. Można temu zaradzić wstawiając poniżej kolumn dodatkowy div z regułą clear:both, spowoduje to rozciągnięcie rodzica. Rozciągniety element rodzic przydać nam się może do ustawiania odpowiedniego tła jednej z kolumn. Warto też ustawić wysokość lini elementu clear line-height:0px wtedy w każdej przeglądarce zajmie on tyle samo wysokości – 0px. Do wycentrowania całego układu posłużył jeden dodatkowy element div, z ustawioną regułą margin:auto.

Żeby wrzucić ładne tło w postaci png z ustawionym jakimś tam transparency, można zastosować filter i ustawić ten png jako backgound. Jeśli zastosujemy taką opcję dla jakiegoś kontenera, w którym będą znajdować się elementy <a> wtedy stają się one nieaktywne. Żeby temu zapobiec wystarczy dodać regułę css dla wszystkich elementów <a> znajdujących się w owym kontenerze w postaci: position:relative. Koniec.

Często znajduję rozwiązanie jakiegoś problemu. Zastosowanie jest dosyć rzadkie i powtarza się raz na pół roku może rzadziej. Zdarza się więc, że sam zapominam jak rozwiązałem dany problem. I zaczynam wtedy jeszcze raz. Bez sensu. Dobrym pomysłem więc będzie zapisać to gdzieś sobie, tak żeby można było łatwo sięgnąć w odpowiednim czasie po rozwiązanie i po raz kolejny nie wywarzać drzwi. Tak więc będę sobie zapisywał na tym blogu wszystko co wymyśliłem lub nauczyłem się od kogoś lub z jakiegoś miejsca w sieci. Przy okazji może komuś się to przyda.