Primii pasi in CSS

Salutari.

Mam apucat de curand sa invat despre Css si Html, deoarece simt o atragere catre web design si programare si in plus vreau sa imi fac o pagina web, mai degraba un fel de carte de vizita online.

Am luat Deamweaver Cs5 si Photoshop Cs4 amandoua trial de 30zile. Eu am mai lucrat cu Macromedia Dreamweaver acum vreo 5-7 ani (prin liceu) chiar reusisem sa fac un site in M. Dw, iar acum in Dw CS5 mi se pare foarte complicat si destul de ciudat.

Am incrcat si Joomla, am reusit sa-l instalez, chiar de mai multe ori,  am reusit sa scap de faimoasa eroare "Unable to connect to the database:Could not connect to MySQL", dar intr-un final mi-am bagat....piciorul in el de joomla, nu-mi place, parca e prea complicat pentru mine.

Ok, am lasat balta Dw Cs5 mi-am prins urechile si simt ca nu ajung nicaieri cu el, iar cu PS Cs4 la fel, inca nu sunt obisnuit sa lucez cu layere sau sa lucrez in PS...In schimb dupa multe cautari prin bibleoteca prietenului nostru comun Goagal, am dat de W3School cu tot felul de tutoriale, dar la fel nu prea inteleg mare lucru, dar in schimb pe youtube am gasit un tutorial dspre CSS destul de bine facut(mai ales pentru Iq-ul meu deficitar ca Pib-ul Romaniei) >Link<, asa ca mam pus pe treaba, mi-am descarcat Notepad++ si Paint.NET (mai usor decat PS, dar nu cred ca poate sa faca nici 10% cat poate sa faca PS).

Am inceput sa lucrez exact ca in tutorial, dar ca nu intleg un lucru.. De ce in Mozzila situl arata ok, iar in IE face figuri?
>Imagine Mozila<     >Imagine IE<

Asa... in afara de comenzile din CSS si Html cam ce ar mai trebui sa invat?

Inca o intrebare, cam cum credeti ca ar trebui sa arate un site gen carte de vizita. eu ma gandeam la ceva in genu(ma refer la cuprins):

1. Home -> nu am nici o idee ce naiba sa scriu

2. Un buton gen Istoria... sau Despre "domeniul de activitate" si sa contina un sub-meniu sau...in fine despe diferite Tehnici si Utilizari.

3. Ma gandesc sa pun intr-un viitor apropiat o arie de "Anunturi" - nu i-mi dau seama, inca, ce script se foloseste..

4. Eventual un Forum

5. "Despre mine" (about me) - dar daca a-si vrea sa adaug punctele 3 si 4 nu stiu daca o sa arate destul de "profi" sau nu cred ca o sa mai fie "carte de vizita", o sa treaca in zona comerciala.

6. "Contact" - un forumlar de contact gen nume, adresa mail, titlu, text si evental un nr de elefon din partea mea sau ceva in genul

Pe un astfel de mini-site e ok sa pui AdSense? eu unu nu vad cu ochi buni, nu pare profsional.


Astept sfaturi bune din partea celor cu experienta.
ps. sa nu va agitati cu Pm-uri sau posturi gen:"cu 10euro iti fac eu site"

{
multam
}

Quote

Dupa ce te descurci cu html si css invata si php(vei putea folosi si mysql pentru baze de date)

Quote

Ai incercat sa validezi codul sa vezi daca sunt erori ? (tot la w3c)

Quote

Nustiu cum vede lumea chestiile astea dar pe un site de prezentare persoalana/carte de vizita/site a unei agentii etc.. nu mi se pare foarte profesional sa vad publicitate.. adica eu daca intru pe site-ul unei agentii si vad pe acolo sute de publicitati de la google, imi da impresia de putina seriozitate.

Quote

Joomla sux. Really.

Quote

Browserele sunt putin ciudate uneori la randare. Legat de ce a spus boghy, e bine sa ai cod valid pe pagina dar asta nu garanteaza ca o sa arate bine in fiecare browser. E bine sa iti instalezi pe pc toate browserele si sa testezi site-ul in fiecare.

Quote

Javascript. Daca vrei sa o iei mai usor poti incepe cu jQuery ( framework javascript ) dar trebuie sa ai macar notiuni de baza in javascript ca sa folosesti jQuery bine.
Legat de css si html, parerea mea e ca cel mai bine o sa le poti invata cu dreamweaver ca are code completion. Dupa ce le inveti te bagi pe notepad++ ca e mai rapid.

Quote

Poti face un site 1-page site. Uite aici niste exemple: http://www.instantsh...ebsite-designs/

Quote

1. Da, cum ai zis tu nu e foarte profesional. Dar depinde cum il integrezi.
2. Nu prea ii vad rostul, adica o sa ai asa multi vizitatori dintr-un site de genul, ca sa poti scoate bani din adsense?

Spor la invatat

ieri am instalat Opera, Safari si Chrome si din pacate doar IExplorer arata exact aceasi chestie....
ms de sfaturi

Folosește un CSS Reset.
Problema ta cu IE vs restul lumii nu prea poate fi rezolvată doar dintr-un screenshot. Ori pui codul să vedem și noi, ori îi dai înainte cu ghici.

Și dacă spui că vrei să înveți CSS și HTML, pune mâna pe un editor de cod, lasă DW celor ce vor doar cod infect.
Notepad++, E-texteditor etc. Chestii d'astea bune

folosesc notepad++ pentru cod si W3school cu exemplele lor

Index.html

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

<div id="container">

<div id="header">This is the Header</div>

<div id="leftnav">This is the Leftnav</div>

<div id="rightnav">This is the Rightnav</div>

<div id="body">This is the Body</div>

<div id="footer">This is the Footer</div>

</body>
</html>

si
style.css

#container  {

width: 900px;


}


#header  {

text-align: center;
width: 900px;
height: 100px;
background-image: url(images/header.png);
border-bottom: 2px solid #000000;

}

#leftnav {

float: left;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-right: 1px solid #694717;

}


#rightnav  {

float: right;
width: 140px;
height: 400;
background-color: #F8AA3C;
border-left: 1px solid #694717;

}
 
#body  {
text-align: center;
width: 620;

}


#footer  {

clear: both;
background-color: #D1C0A7;


}

Edited by victor.andrey, 02 July 2010 - 16:39.

Dacă ai fi citit puțin despre  box model ai fi văzut că borderul se ia în considerare când specifici dimensiunea. Astfel, la codul

{
width: 140px;
border-right: 1px solid #694717;
}

Ai de fapt lățimea de 141px. Iar 141+141+620 > 900px => conținutul o ia pe arătură.

dap, ai dreptate

oricum, ieri mam enervat si mi-am cumparat un caiet A4 cu 100 de file sa o iau de la -1 pentru ca mi-am dat seama ca incepusem gresit cu invatatul.
acum citesc de pe W3S si notez pe caiet ca sa nu uit si sa aprofundez pe Notepad si prin exemplele lor.

daca mai aveti ceva situri bune si noob-friendly va rog sa postati, poate vor prinde bine si celor care vor sa se apuce de invatat.
nu cred ca o sa ajung sa fac situri super profesioniste, dar macar vreau sa vad cam cu ce se mananca

multam

Edited by victor.andrey, 02 July 2010 - 16:59.

Daca stii engleza la un nivel acceptabil, cea mai buna referinta ramane documentatia oficiala.

CSS 2.1 Specifications
HTML 4.01 Specifications
XHTML 1.0 Specifications

Incearca sa citesti aceasta documentatie si cu ce gasesti pe W3C Schools ca exemple poti invata repejor sa construiesti pagini web. Dupa ce insusesti suficiente cunostinte poti trece la PHP si Javascript (DOM Structure) si te poti uita si la XML XML Specifications).

Nu te astepta la rezultate spectaculoase intr-un timp scurt. Sintetizat, o pagina HTML are elemente (sau obiecte) caracterizate prin atribute definite prin propietati. Cand o sa realizezi lucrul asta, dupa aceea ti se va parea simplu sa construiesti o pagina web.

Bafta la studiu.

Quote

#########
+1
+1

@victor.andrey pe langa ce s-a spus mai sus, nu uita de http://en.wikipedia....i/Semantic_HTML.

cu engleza nu am probleme
am inteles ceva ceva, dar inca sunt la baza 1 din 100. este interesant si chiar imi place

multam de linkuri

 victor.andrey, on 3rd July 2010, 14:13, said:

Problema de la IE e ca nu ai pus margin la stanga si la dreapta la id-ul body. Trebuie sa le pui ca sa "faci loc" la float-uri.

am descoperit si eu Wordpress si Blogspot...
ca sa imi pun o tema pentru WP imi trebuie sa activez optiunea CSS(adica sa platesc) ?
pe blogspot, am vreo sansa sa pot face o tema?