Skocz do zawartości

Zarchiwizowany

Ten temat jest archiwizowany i nie można dodawać nowych odpowiedzi.

M@TH3V

Mam szablon strony, jak teraz zrobić pod nia kod?

Przez M@TH3V, w Programowanie i webmastering

Polecane posty

M@TH3V Ent

M@TH3V

Napisano
Napisano

Dostałem szablon strony, elementy sa juz "powycinane", teraz nie wiem jak sie za to zabrać.

Czy zacząc pisać w html'u strone i potem zrobić osobny plik style.css w ktrorym zrobie ten styl? Jak przyporządkować element wyciety do strony?

Korzystam z tej strony na razie http://www.kurshtml.boo.pl/html/wyswietlanie,tekst.html jednak natłok informacji sprawia, ze sie zwyczajnie gubię ; /

Link do komentarza
Udostępnij na innych stronach
TatankaYatanka Człowiek

TatankaYatanka

Napisano
Napisano

Hmm... to co podałeś to jedna z lepszych i bardziej przystępnych stron o tworzeniu stron jakie znam...

Co do budowy samej strony zależy to min. od tego jak bardzo jest złożona. Jeżeli jest to bardzo prosta strona, której nie będziesz w ogóle za często zmieniał (w sensie jej wyglądu, czy układu) arkusze stylów można w gruncie rzeczy olać i zbudować wszystko w HTML, nie jest to do końca poprawne jeśli chodzi o obecne standardy, ale też nie powinno się gryźć z przeglądarkami (kiedyś CSS nie było, a stare strony wciąż wyświetlają się poprawnie).

CSS można też umieścić w pliku HTML ze stroną, choć osobiście preferuję trzecią opcję czyli zewnętrzny plik *.css. Zaletą tego jest to, że zwykle struktura strony www wygląda tak, że składa się z iluś plików html i chcemy, żeby pewne elementy tych plików były takie same (tło, menusy etc.), problemy zaczynają się gdy mamy do podmiany kawałki kodu w 100 takich plikach, dlatego dobrze mieć jeden plik, który za to odpowiada (dlatego wymyślono css, choć podobny efekt można uzyskać za pomocą ramek, ale z tego się już praktycznie nie korzysta).

Jak się za to zabrać? Ja zwykle tworzę oba pliki jednocześnie. Tj. buduję najpierw plik HTML - taki pusty szablon z podstawowymi znacznikami, które zawsze i tak są takie same (html, head, body, jakieś info o mnie, tytuł strony etc. jednym słowem wszystko co będę powielać w każdej podstronie), w sekcji head dodaje odniesienie do pliku css i w sumie w tym momencie takowy tworzę. Od tej chwili zwykle jak dodam jakiś nowy element na stronie dostaje on swoje id, a w arkuszu css przynajmniej wstępne ustawienia jak np. pozycja, albo rozmiar czcionki. Jak ktoś pracuje nieco inaczej niż ja, znaczy się nie lubi co chwila podglądać efektów pracy może w sumie zacząć od budowy samego pliku html, a dopiero potem wszystko poukładać (ale IMHO do tego trzeba być lepszym webmasterem niż ja).

Link do komentarza
Udostępnij na innych stronach
TatankaYatanka Człowiek

TatankaYatanka

Napisano
Napisano

Oki. Spreparowałem coś takiego Klik

Kod html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

    <head>

        <title>Przykład</title>

        <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />

        <meta name="author" content="TatankaYatanka" />

        <link rel="shortcut icon" href="grafika/icon.ico" />

        <link rel="stylesheet" href="style.css" type="text/css" />

    </head>

    <body>

        <div align="center">                    

            <div id="NAGLOWEK">

                <div id="ZAKLADKI" align="left">

                    <a href="index.html"><img src="logo.bmp" /></a>

                                                                    

                                                                    

                                                                    

                                                                    

                                                                

                    <a href="index.html"><img src="home.bmp" /></a>

                    <a href="index.html"><img src="gallery.bmp" /></a>

                    <a href="index.html"><img src="contact.bmp" /></a>

                    <a href="index.html"><img src="email.bmp" /></a>

                </div>

            </div>                


            <div id="TRESC">

                <br />

                <img src="obrazek.bmp" />

                <p>

                    <h3>Blah, blah</h3>

                    Blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah.

                </p>

                <br /><br /><br /><br />

            </div>

    

            <div id="STOPKA">

                    <div id="LINKI">                        

                        <a href="index.html">Pierwszy</a>

                        <a href="index.html">Drugi</a>

                        <a href="index.html">Czeci</a>

                    </div>            

            </div>    


        </div>

    </body>

</html>

Kod CSS:

/* USTAWIENIA OGÓLNE ------------------------------------------------*/

html, body {

    background-image: url(bg.bmp);

    background-repeat: repeat;

    margin: 0; 

    padding: 0; 

    width: 100%; 

    height: 100%;

    font-size: xx-small;

    text-align: left;

}

img {

    border: none;

}

/* USTAWIENIA NAGŁÓWKA ----------------------------------------------*/

#NAGLOWEK {

    width: 100%;

    height: 45px;

    background-image: url(pasektop.bmp);

    background-repeat: repeat-x;

}

#ZAKLADKI {

    width: 426px;

    height: 45px;

}

/*USTAWIENIA DLA WŁAŚCIWEJ CZĘŚCI STRONY-----------------------------*/

#TRESC {

    width: 426px;

    text-align: left;

}

/*USTAWIENIA STOPKI--------------------------------------------------*/

#STOPKA {

    width: 100%;

    height: 28px;

    background-image: url(pasekbottom.bmp);

    background-repeat: repeat-x;

}

#LINKI {

    width: 426px;

    height: 15px;

    padding: 7px;

}

Nie wiem, czy cię to satysfakcjonuje, ale to w sumie szczyt moich możliwości.

Można w sumie pójść też na łatwiznę i skorzystać z jakiegoś CMS-a ;).

Link do komentarza
Udostępnij na innych stronach
lukasz784 Goblin

lukasz784

Napisano
Napisano

Hmmm... CMS, to nie do końca taka łatwizna... Owszem, jeżeli chcesz skorzystać z darmowego szablonu, który pobierzesz sobie z neta, to nie ma nic prostszego... Ale dla własnej satysfakcji, to chyba zdecydowanie przyjemniejsze jest, jak posiedzi się kilka dni dłużej nad stroną, ale niech to będzie wyłącznie Twoja zasługa (ewentualnie kumpla, który Ci pomaga)... Bo stworzenie własnego szablonu dla CMS'a jest według mnie dużo trudniejsze, niż dla pisanej ręcznie strony, ponieważ nie dosyć, że musisz stworzyć graficzny szablon, to dodatkowo trzeba go zaprogramować. I tu oprócz HTML'a i CSS'a dochodzi jeszcze PHP... I u pojawia się dylemat (którego ja nie miałem), bo albo wybierasz kilka godzin/dni poświęconych szablonowi i prostym zażądzaniu treścią -> CSM, albo odwrotnie -> HTML... Z tym, że CMS, przy większym wysiłku dużo lepiej się prezentuję i ułątwia późniejszą pracę... Wybór należy do Ciebie ;) POZDRAWIAM!

Link do komentarza
Udostępnij na innych stronach
Przejdź do listy tematów

  • Kto przegląda   0 użytkowników

    • Brak zalogowanych użytkowników przeglądających tę stronę.
×
×
  • Utwórz nowe...