Distribuiţi|

HTML+CSS portal forumgratuit

Vezi subiectul anterior Vezi subiectul urmator In jos
AutorMesaj
Ace-Master
Admin
avatar

Grad: Admin
Postari Postari : 138
Reputatie Reputatie : 5
Inscris in Inscris in : 28/01/2012
Varsta Varsta : 22
MesajSubiect: HTML+CSS portal forumgratuit Joi Feb 02, 2012 8:18 am

VEZI: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Azi o sa va arat cum sa faceti o pagina HTML+CSS care sa mearga , dupa cum stiti pe forumgratuit se poate adauga un HOMEPAGE ca si portal ,acesta poate fi modificat foarte usor ,insa daca v-ati saturat de simplul tutorial cum sa adaugati 2 imagini pe pagina care sa va directioneze spre un link,acest tutorial o sa va arate cum sa realizati o pagina ceva mai complicata.Inainte de a incepe trebuie sa alocati cel putin o ora pentru a termina basicul pagini adica cea mai simpla forma a pagini.

Templateul arata cam asa insa dupa modificare poate arata mult mai stilist depinde de creativitatea fiecaruia
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Pentru inceput as vrea sa va rog din suflet sa nu reproduceti acest tutorial fara a aduga un link direct catre forumgratuit si catre forumul meu deoarece acet template este creat in intregime de mine deci in limita bunului simt va rog sa respectati aceste doua reguli

codurile le puteti afla foarte usor ; sa incepem tutorialul pentru inceput trebuie sa activati pagina HTML din PA=>Module=>HTML&JAVASCRIPT=>Administrare pagini HTML pentru a afla mai usor urmariti aceste imagini :
1.[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]<--Pe bara de navigare din PA
2.[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]<--Primul obiect deasupra footerului
3.[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]<--Apare dupa selectarea Administrare pagini HTML in cazul in care aceasta este prima pagina html pe care o creati

Dati un titlu pagini si selectati la fel ca in imagine
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Acum suntem gata sa adaugam pagina HTML
Insa , pentru ca pagina sa poata fi afisata ca homepage trebuie sa contina un link direct catre forumgrauit acest link este:
Cod:
<a href="http://www.forumgratuit.ro" target="_blank">forumgratuit.ro</a>

Dupa ce ati bagat linkul direct urmeaza adaugata pagina si treptat o sa va explic ce aveti de modificat

Cod:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://darktuts.clan.su/style.css" />
<link rel="shortcut icon" href="imagine/favicon.ico" type="image/x-icon" />
<title>DARKTUTS</title>
</head>

Modificati aici titlul
Cod:
<title>DARKTUTS</title>

Daca doriti sa folositi stilul CSS creat de mine editati
Cod:
<link rel="stylesheet" type="text/css" href="http://darktuts.clan.su/blackace/ol.css" />

Insa pentru ca pagina sa mearga va sugerez sa nu modificati

Aici modificati iconul care apare pe Bara de Titlu ca si in imagine
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Cod:
<link rel="shortcut icon" href="linkul iconului" type="image/x-icon" />
va sugerez sa folositi daca gasiti trebuie neaparat sa fie nume.ico daca nu aveti puteti elimina acest cod din script

Acum urmeaza logoul
Cod:
<body>
<div id="container">
      <div id="header">
           <h1>Logoul<span class="off">Website-ului</span></h1>
            <h2>Titlul forumului</h2>
        </div> 
Este cel din imagine:[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Daca doriti doar numele ca logo editati
Cod:
 <h1>Logoul<span class="off">Website-ului</span></h1>
Daca doriti imagine ca logo editati in loc de
Cod:
 <h1>Logoul<span class="off">Website-ului</span></h1>
puneti
Cod:
<img src="link imagine" width="100" height="100"></img>
modificati width si height pentru a mari sau micsora imaginea

Acum urmeaza adaugarea primului meniu
Cod:

        <div id="menu">
           <ul>
               <li class="menuitem"><a href="Linkul de redirectionare">Meniu 1</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 2</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 3</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 4</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 5</a></li>
              <li class="menuitem"><a href="Linkul de redirectionare">meniu 6</a></li>
            </ul>
        </div>
       
        <div id="leftmenu">

        <div id="leftmenu_top"></div>

Acesta fiind meniul din imagine
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Modificati
Cod:
<li class="menuitem"><a href="Linkul de redirectionare">Meniu 1</a></li>
cu linkul si textul de pe buton
EX:
Cod:
<li class="menuitem"><a href="http://exemplu.ex">Tutoriale</a></li>

puteti adauga si/sau elimina butoane prin adaugareaa/stergera mai multor
Cod:
<li class="menuitem"><a href="Linkul de redirectionare">Meniu 1</a></li>

Acum urmeaza adaugarea celui de-al doilea meniu adica meniul din imagine
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Cod:
      <div id="leftmenu_main">   
               
                <h3>Optiuni</h3>
                       
                <ul>
                    <li><a href="Linkul de redirectionare">Optiunea 1</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 2</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 3</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 3</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 4</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 5</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 6</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 7</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 8</a></li>
                </ul>
</div>
               
               
              <div id="leftmenu_bottom"></div>
        </div>
Modificati numele meniului editand
Cod:
                <h3>Optiuni</h3>
Urmati aceeasi pasi ca si la meniul anterior pentru modificare , adugare si stergere

Urmatorul pas este adaugarea continutului
Cod:
<div id="content">                 
       
       
        <div id="content_top"></div>
        <div id="content_main">
           <h2><font size="12">MESAJUL TAU</font></h2>
           <p>&nbsp;</p>
             <p>&nbsp;</p>
           <h3><font size="5">TEXT 1:</font></h3>
                    <font size="3">  Subiect 1</font>

           <p>&nbsp;</p>
              <h3><font size="5">Text 2</font></h3>
                    <font size="3"> Subiect 2 </font>

           <p>&nbsp;</p>
           <h3><font size="5">Contact</font></h3>
                    <font size="3"> Info Contact</font>
         
<BR>
  <BR>
    <BR>
      <BR>
        <BR>
          <BR>
            <BR>
              <BR>

             
<p>&nbsp;</p>
        </div>
        <div id="content_bottom"></div>

Daca doriti sa adaugati o imagine pe post de continut modificati codul anterior cu

Cod:
<div id="content">                 
       
       
        <div id="content_top"></div>
        <div id="content_main">
           <p>&nbsp;</p>
             <p>&nbsp;</p>
                <img src="link imagine" width="100" height="100">
              <p>&nbsp;</p>
        </div>
        <div id="content_bottom"></div>

Dinnou daca doriti sa mariti sau sa micsorati imaginea modificati width si height

Sau daca doriti imagine si titlu modificati codul sa arate
Cod:
<div id="content">                 
       
       
        <div id="content_top"></div>
        <div id="content_main">
           <h2><font size="12">MESAJUL TAU</font></h2>
           <p>&nbsp;</p>
             <p>&nbsp;</p>
                <img src="link imagine" width="100" height="100">
              <p>&nbsp;</p>
        </div>
        <div id="content_bottom"></div>

Acum sfarsitul codului si ceea ce va rugam la inceput , as dori din suflet sa lasati footerul asa cum este , pe post de multumire pentru ca v-am ajutat amintitiva ca un template ca asesta ar costa intre 20-40$
Cod:
    <div id="footer"><h3>HTML TEMPLATE creat de <a href="http://www.darktuts.tequilaforum.net">Darktuts Comunity</a></h3></div>
      </div>
  </div>
</body>
</html>

Acum ca ati terminat tot codul ar trebui sa arate cam asa ,daca ati urmat basicul
Cod:

<a href="http://www.forumgratuit.ro" target="_blank">forumgratuit.ro</a>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://darktuts.clan.su/blackace/ol.css" />
<link rel="shortcut icon" href="imagine/favicon.ico" type="image/x-icon" />
<title>DARKTUTS</title>
</head>

<body>
<div id="container">
      <div id="header">
           <h1>Logoul<span class="off">Website-ului</span></h1>
            <h2>Titlul forumului</h2>
        </div> 
       
        <div id="menu">
           <ul>
               <li class="menuitem"><a href="Linkul de redirectionare">Meniu 1</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 2</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 3</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 4</a></li>
                <li class="menuitem"><a href="Linkul de redirectionare">Meniu 5</a></li>
              <li class="menuitem"><a href="Linkul de redirectionare">meniu 6</a></li>
            </ul>
        </div>
       
        <div id="leftmenu">

        <div id="leftmenu_top"></div>

            <div id="leftmenu_main">   
               
                <h3>Optiuni</h3>
                       
                <ul>
                    <li><a href="Linkul de redirectionare">Optiunea 1</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 2</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 3</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 3</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 4</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 5</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 6</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 7</a></li>
                    <li><a href="Linkul de redirectionare">Optiunea 8</a></li>
                </ul>
</div>
               
               
              <div id="leftmenu_bottom"></div>
        </div>
       
       
       
       
      <div id="content">                 
       
       
        <div id="content_top"></div>
        <div id="content_main">
           <h2><font size="12">MESAJUL TAU</font></h2>
           <p>&nbsp;</p>
             <p>&nbsp;</p>
           <h3><font size="5">TEXT 1:</font></h3>
                    <font size="3">  Subiect 1</font>

           <p>&nbsp;</p>
              <h3><font size="5">Text 2</font></h3>
                    <font size="3"> Subiect 2 </font>

           <p>&nbsp;</p>
           <h3><font size="5">Contact</font></h3>
                    <font size="3"> Info Contact</font>
         
<BR>
  <BR>
    <BR>
      <BR>
        <BR>
          <BR>
            <BR>
              <BR>

             
<p>&nbsp;</p>
        </div>
        <div id="content_bottom"></div>
           
            <div id="footer"><h3>HTML TEMPLATE creat de <a href="http://www.darktuts.tequilaforum.net">Darktuts Comunity</a></h3></div>
      </div>
  </div>
</body>
</html>

Cred ca ati observat , ca din acel cod lipsesc imaginile ,ei aici vine partea a doua , modificare stilului CSS
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]ATENTIE! Acest tutorial este pentru cei mai avansati deci o sa pun intregul cod si o sa explic la sfarsit ce trebuie modificat daca nu puteti vedea singuri.Inainte de a incepe asigurate ca , cunosti un website de upload care iti da link direct catre fisier deoarece , ca sa functioneze scriptul linkul trebuie sa fie sub forma
Cod:
http://exemplu.ex/exemplu/style.css
Pentru inceput creati un nou fisier word adaugati acest cod si salvati-l style.css deoarece vine bagat aici
Cod:
<link rel="stylesheet" type="text/css" href="http://darktuts.clan.su/blackace/ol.css" />
daca aveti toate resursele necesare puteti modifica acest script cu conditia de a nu modifica footerul tot ce tine de acest template imi apartine deci sa fiti macar bucurosi ca il impart cu voi gratuit un template ca acesta costa aproximativ 20$
Cod:
/* Design gratuit din partea comunitatii Darktuts viziteazane http://darktuts.tequilaforum.net */



body {
   margin: 0;
   padding: 0;
   text-align: left;
   font: 12px Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #061C37;
   background: #CCCCCC;
   background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/backgr10.png);
   background-repeat:repeat-x;
}
*
{
  margin: 0 auto 0 auto;
 text-align:left;}

#container
{
  display: block;
  height:auto;
  position: relative;
  width: 960px;
}


#header
{
height:85px;
width:960px;   
}

#header h1
{
   position:absolute;
text-align:left;
color:#FFFFFF;
font-size:43px;
color:#FFF;   
left:14px;
top:18px;
}


#header h2
{
position:absolute;
text-align:right;
color:#EAEAEA;
left:490px;
top:38px;
width:400px;
}

#mainpic
{
background-image:url();
background-repeat:no-repeat;
width:900px;
height:354px;   
}



.off
{
color:#000000;
}


#menu
{
display:block;
float:left;
clear:both;
width:960px;
height:54px;
float:left;
clear:both;
}

#leftmenu
{
margin-top:15px;
width:204px;
float:left;
}

#leftmenu_top
{
width:204px;
height:13px;
background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/leftme11.png);
}
#leftmenu_bottom
{
width:204px;
height:13px;
background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/leftme10.png);
}
#leftmenu_main
{
width:204px;
height:auto;
background-color:#5B5B5B;
}

#leftmenu_main ul
{
list-style: none;
padding: 0px;
width:204px;
}


#leftmenu_main h3
{
list-style: none;
padding: 0px;
width:204px;
color:#FFFFFF;
padding-left:10px;
padding-bottom:14px;
}

#leftmenu_main ul li
{
list-style: none;
padding: 0px;
width:204px;
text-align:left;
}

#leftmenu_main ul li a, #leftmenu_main ul li a:visited
{
   display:block;
list-style: none;
padding: 0px;
width:192px;
padding-left:12px;
padding-top:4px;
height:30px;
text-align:left;
background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/leftme12.png);
background-repeat:repeat-x;
margin-top:5px;
color:#FFFFFF;
text-decoration:none;
font-size:15px;
font-weight:bold;
}

#leftmenu_main ul li a:hover
{
color:#000000;
   
   
}




#content
{
display:block;
float:left;
width:689px;
height:auto;
padding-left:10px;
padding-top:15px;
padding-right:10px;
padding-bottom:5px;
}


#content_top
{
   background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/main_t10.png);
   background-repeat:no-repeat;
   width:689px;
   height:23px;
}

#content_main
{
background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/main_b10.png);
background-repeat:repeat-y;
width:659px;
padding-left:15px;
padding-right:15px;
}

#content_bottom
{
background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/main_b11.png);
background-repeat:no-repeat;
width:689px;
height:23px;
}








#footer
{
width:inherit;
height:auto;
}

#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#FFF;
}


#menu ul {
   list-style: none;
   padding: 0px;
   margin-left:auto;
   width:960px;
}

#menu li {
   list-style: none;
   padding: 0px;   
   display: inline;
   
}

#menu a {
   float: left;
   height: 36px;
   display: block;
   text-align: center;
   text-decoration: none;
   color: #ffffff;
   font-weight: bold;
   padding-top: 18px;
   font-size: 15px;
   padding-left:13px;
   padding-right:13px;
   
}

#menu a:hover{
   background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/link_b10.png);
   background-repeat:repeat-x;
}

#content p
{
   
}


html, body {
text-align: center;
}
p {text-align: left;}

Singurele parti care pot fi modificate fara a deteriora scriptul sunt
Cod:
   background-image:url(http://i41.servimg.com/u/f41/14/91/45/14/link_b10.png);

Asigurativa ca nu modificati altceva inafara de imagini , dar totusi va sugerez sa lasati asa cum este


Daca gasiti vreo problema in legatura cu tutorialul va rog sa postati aici . Pentru mai multe templateuri vizitati pagina noastra cu templateuri folosind butonul HELPER din index


Ultima editare efectuata de catre Ace-Master in Sam Feb 25, 2012 2:28 am, editata de 2 ori
Sus In jos
http://ace-romania.hitforum.ro
dRoO
Nou Venit
avatar

Grad: Nou Venit
Postari Postari : 40
Reputatie Reputatie : 2
Inscris in Inscris in : 23/02/2012
Varsta Varsta : 20
Localizare : Timisoara
MesajSubiect: Re: HTML+CSS portal forumgratuit Vin Feb 24, 2012 1:25 pm

am incercat sa imi instalez si eu indexul acesta dar nu merge nicicum style.css......cand intru pe pagina imi arata doar codu-l!
Sus In jos
dRoO
Nou Venit
avatar

Grad: Nou Venit
Postari Postari : 40
Reputatie Reputatie : 2
Inscris in Inscris in : 23/02/2012
Varsta Varsta : 20
Localizare : Timisoara
MesajSubiect: Re: HTML+CSS portal forumgratuit Vin Feb 24, 2012 1:27 pm

pls ajutama
Sus In jos
Ace-Master
Admin
avatar

Grad: Admin
Postari Postari : 138
Reputatie Reputatie : 5
Inscris in Inscris in : 28/01/2012
Varsta Varsta : 22
MesajSubiect: Re: HTML+CSS portal forumgratuit Vin Feb 24, 2012 11:33 pm

incercati acum , trebuie sa mearga
Sus In jos
http://ace-romania.hitforum.ro
Continut sponsorizat

Grad:
MesajSubiect: Re: HTML+CSS portal forumgratuit

Sus In jos

Subiecte similare

-
t Zeynep Beserler
t Shahrukh Khan
t Ahu Yagtu
t Coduri HTML
t Provocarea nr. 59 - Cracked Polymer Clay
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
Ace-Romania :: Website :: ForumGratuit :: Portal HTML-