GoDLike Comunity
Log in

I forgot my password

Checkpagerank.net
Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

None

Most users ever online was 14 on Sun Feb 05, 2017 3:16 am
Statistics
We have 1651 registered users
The newest registered user is lesn1k

Our users have posted a total of 558 messages in 467 subjects

Cum sa faci o pagina in html partea 2

Go down

Cum sa faci o pagina in html partea 2

Post by MeG@DaN on Wed Nov 02, 2011 12:54 pm

Cum sa faci o pagina in html partea 2



Sa zicem ca vrei sa ai pagina index.html , o pagina contact.html si o pagina produse.html
creeaza un folder undeva si in acel folder creeaza 3 fisier text si
modifica-i numele la fiecare document cu numele spuse mai sus.

Pe pagini vrem sa avem legaturi (linkuri) spre celelate pagini. Ca sa
faci asta scrii forma de baza a unui fisier html si pui linkuri:

fisierul index.html:

Code:

  <html>

    <head>

    <title>Untitled Document</title>

    </head>

  <body>

    <a href="index.html">Index</a> | <a
href="contact.html">Contact</a> | <a
href="produse.html">Produse</a>

    <br />

    <br />

    Continutul paginii index.tml

    </body>

    </html>




Fa la fel si cu celelate fisiere si modifica in loc de index pune
contact si produse pe fiecare pagina. Cand deschizi cu browserul vei
avea legaturi intre fiecare pagina, iar aceste pagini vor avea continut
unic.

Ca si pe orice site trebuie sa il infrumusetezi cu imagini alinieri
headinguri si asa mai departe. Pentru asta poti folosi tabele sau
divid-uri (<div> <div />) si Cascading style sheets (css)
pentru a aranja fiecare elemetn in parte ca pagina s aiasa cum iti
doresti. Eu cand fac un site, prima si prima data ma gandesc cum as vrea
sa arete situl, si fac o schita a paginilor(template) dupa care adaug
continutul pe fiecare pagina. Cel putin asa mi se pare mie mai usor.
Spre exemplu am schita urmatoare:




Acuma vreau ca situl meu sa aiba o forma cu niste imagini si un text formatat:



Ca sa aranjam toate elementele in pagina vom folosi divide taguri si le vom da proprietati cu Cascading styled sheets.

Prima data trebuie sa punem in fisierul html tagurile si css(cascading stled sheets). Eu am ales sa le pun sub forma

Code:

  <html>

    <head>

    <title>titlu pagina</title>

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

  </head>

  <body>

    <div id="container">

  <div id="banner">Content for  id "banner" Goes Here</div>

  <div id="butoane">Content for  id "butoane" Goes Here</div>

  <div id="continut">Content for  id "continut" Goes Here</div>

  </div>

  </body>

  </html>

 

 





Salveaza pagina si creeaza un fisier text nou si pune-i numele stil.css
(Atnetie ca extensia sa fie vizibila caci altfel nu merge).

La banner vom pune o imagine si vom seta ca partea din dreapta a
imaginii sa se multiplice (banerul va avea inaltimea sau height 126
pixeli)

La butoane vom pune un fundal printr-o imagine de
1px grosime (partea unde vor fi puse butoanele va avea inaltimea sau height-ul de 39 pixeli)

La continut vom pune o culoare inchisa si vom seta culoarea fontului din el un rosu mai inchis

Deschide fisierul stil.css

proprietatile dividului container:

Vom seta marginie documentului 0 fontul arial de 15 pixeli
Code:

body {

margin: 0px;

font-family: arial;

font-size: 15px;
}

proprietatile dividului container:
Code:

#container {

  width: auto;

}
proprietetile dividului banner
Code:

#butoane {

  background: url(tut_5_4.jpg) repeat-x;

  height: 39px;

}
si punem in dividul banner o imagine cu bannerul nostru
Code:

<div id="banner"><img src="tut_5_3.jpg" /></div>
Indtre dividurile butoane vom pune urmatoarele:
Code:

<div id="butoane">

<ul>

<li><a href="index.html" title="Acasa" >Acasa</a></li>

<li><a href="produse.html" title="produse" >Produse</a></li>

<li><a href="contact.html" title="Contact" >Contact</a></li>

</ul>

<div />

si in fisierul stil.css vom avea:

Code:

  li a

    {

    background: url(tut_5_6.jpg) repeat-x;

    color: #ffffff;

    }

  li a:hover

    {

    background: url(tut_5_5.jpg) repeat-x;

    color: #ffffff;

    }

  ul {

    padding: 0px;

    margin: 0px auto;

    }

  li

    {

    display: inline;

    list-style: none;

    font-family: Arial;

    }

  li a

    {

    float: left;

    height: 39px;

    text-decoration: none;

    text-align: center;

    width: 80px;

    white-space:nowrap;

    padding-left: 5px;

    line-height: 25px;

    margin-left: 2px;

    }


La sfarsit ar trebui sa arate sub forma:

Fisierul index.html:

Code:

  <html>

    <head>

    <title>titlu pagina</title>

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

    </head>

  <body>

    <div id="container">

  <div id="banner"><img src="tut_5_3.jpg" /></div>

  <div id="butoane">

  <ul>

  <li><a href="index.html" title="Acasa" >Acasa</a></li>

  <li><a href="produse.html" title="produse" >Produse</a></li>

  <li><a href="contact.html" title="Contact" >Contact</a></li>

  </ul>

  </div>

  <div id="continut">Continutul paginii</div>

  </div>

  </body>

  </html>

 


Si fisierul stil.css:

Code:

  body {

    margin: 0px;

    font-family: arial;

    font-size: 15px;

    background-color: #141414;

  }

  #container {

    margin-left: auto;

    margin-right: auto;

    }

  #banner {

    background: url(tut_5_7.jpg) repeat-x;

    }

  #butoane {

    background: url(tut_5_4.jpg) repeat-x;

    height: 39px;

    }

  #continut {

    color: #9f0a0a;

    padding: 5px;

    }

  li a

    {

    background: url(tut_5_6.jpg) repeat-x;

    color: #ffffff;

    }

  li a:hover

    {

    background: url(tut_5_5.jpg) repeat-x;

    color: #ffffff;

    }

  ul {

    padding: 0px;

    margin: 0px auto;

    }

  li

    {

    display: inline;

    list-style: none;

    font-family: Arial;

    }

  li a

    {

    float: left;

    height: 39px;

    text-decoration: none;

    text-align: center;

    width: 80px;

    white-space:nowrap;

    padding-left: 5px;

    line-height: 25px;

    margin-left: 2px;

    }


Si vei obtine in pagina de browser:






imaginile folosite in creearea acestei pagini:

Banner

imaginea care se repeta dupa ce se termina bannerul

fundal butoane

buton normal

buton cand mousul este peste link
Enjoy
avatar
MeG@DaN
Administrator
Administrator

Mesaje : 465
Data de inscriere : 17/12/2010
Localizare : Acasa

http://godlike.forumclan.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum