Уроци Форуми Блогове

Помогни ни да направим Uroci.net по - богат! Добави урок

Категории Други уроци Adobe Photoshop Adobe Illustrator Adobe Flash Adobe Fireworks DreamWeaver CSS и HTML Corel Draw Image Ready PHP SEO CMS Microsoft Windows Microsoft Word Microsoft Excel PowerPoint Microsoft Access Microsoft Publisher Linux Visual basic JavaScript Ajax 3ds Max Maya 3D C++ Sound Forge Gimp SWiSH

Здравейте отново. В този урок, искам да Ви покажа как да си направите сайт с HTML и CSS! В предишният ми урок, споменах че ще има и друг пак за това, как се прави сайт!

Като за начало, трябва да започнем като отворим нашият Текстов Редактоp ( Няма значение дали е Notepad ++ или просто обикновен текстов редактор - Notepad ).

1. Като за начало на нашата страничка, ще трябва да си направим една папка. Името е без значение, аз ще кръстя моята " Моят първи Уеб сайт ".  Ще трябва да създадем и още една папка, която задължително ще трябва да кръстим " Images ". Като до сега сме създали две папки!

2. До тук добре! Време е да започнем и с началната ни страничка ( index.html ). Отваряме нашият текстов документ и ще започнем с " , след това ще започнем с което ще рече че от тук на доло, започва вашият сайт! След това, ще добавим и заглавието на сайта с ето този код " " под него, ще добавим един мета таг, който ще ни помогне да избегнем Маймуницата. Ето това е кода " " след като го добавите, той ще укаже браузърната азбука! След това, може да сложим и Favicon, това е иконката, която стой до вашия url адрес в address bar-а. Не е задължително да я сложите, но ваш е избора! Ето това е кода " ", images това е папката която създадохме малко по горе и там сме поставили изображението, но може и от линк като махнем images и favicon.png! Сега идва и на последният код, който ще е за CSS. Първо ще трябва да направим нов текстов документ и да го запазим като " styles.css ". С този код, вие ще може да насочите Style.css към Index.html ! Ето го и кода " ". След като сме готови с това, трябва да затворим тага head с ето този код " " - Ако си спомняте в началото, добавихме само и сега го затваряме с . Като цяло, ето така трябва да изглежда " http://www.prikachi.com/images.php?images/8/5194008r.png ".

3. След като сме готови с една малка част от нашият сайт, сега ще трябва да обърнем малко внимание на Style.css. Ето че отваряме Style.css с нашият текстов редактор, в него ще трябва да напишем body което ще сочи тялото на сайта. В Style.css се започва с отварящ таг " { " и затварящ " } " нещо подобно като на head. Аз ще започна с този код " body { " и под него ще добавя фона на сайта с този код " background: url (images/fon.png"); " ако искате да добавите и цвят на вашият сайт, вместо " url images, fon.png " добавяте  само цвета който искате, например може да използвате " #404040 - това е тъмно сиво ". След това добавяте и кода за шрифта на сайта. С този код Вие може да избирате какъв да е Шрифта, например Arial, Verdana, Comic Sans MC и други. С този код става " font-family: 'Century Gothic'; " аз ще използвам този, след това ще добавим и Текст Shadow с ето този код " text-shadow: 1px 1px 1px #000000 - Това е за черен Shadow ". И това е за Body, но за да се получи, ще трябва да го затворим с ето този код " } ". Като цяло, ето така трябва да се е получило : http://www.prikachi.com/images/987/5193987t.png !

3. След като вече направихме и тялото на нашият сайт, е време да сложил и рамката на сайта, която също става с CSS и малко HTML! Ще започнем, с ето това "
html {background: url('images/fon2.png') ;} /От тук си избираме цвета/ " Това е за цвета на външният фон, ето така : http://www.prikachi.com/images.php?images/197/5197197c.png ! След това ще започнем вътрешната страна. С ето този код : " body {background-color:#FFFFFF /От тук променяме цвета/ ; ", това е вътрешната страна, не мисля че някой няма да разбере и без да давам снимки! :)

margin:0 auto; / това нагласява в коя част да е, 0 е за средата, но ако искате да е от ляво вместо 0 сложете 10/  

margin-top:30px; / това е за колко да е надоло - 30 е добре, но Вие може да си го направите по ваш избор! /  

margin-bottom:30px; / това е за долната част на сайта, подобно на горната така че може и да не го бараме! /

padding:30px 30px 40px 30px; / това да не го бараме! /

width:720px; / това определя колко да е голяма страничката, имам предвид колко да е широка, но най добре си е 720. /

border:1px solid #E0E0E0;} / с това определяме колко да е голям border-a на рамката и с какъв цвят да е! /

След, този код, трябва да добавим и ето този : a {text-decoration:none; color:#2887E3;} a:hover {text-decoration:underline;} h1 {text-align:center; margin:0;} ! Няма да обеснявам за какво е, но за да проработи, ще трябва него да използваме! Сега, по ваше желание, може да заоблим ъглите с ето този код :
div
{
border-bottom-left-radius: 40px;} / това е за долната лява страна /
div
{
border-bottom-right-radius: 40px;} / това е за долната дясна страна /
}


Като цяло, ето така трябва да е станало : http://www.prikachi.com/images/197/5197197c.png :)

4. Време е да се върна към Index-a. Почваме да вършим вече и Body, но HTML! :) Забравих да спомена че е време да направим и логото на сайта, може да използвате Photoshop или друга програма! Когато вече започнем по тялото да работим, слагаме ето този код " " - С името " logo.png " трябва да запазите логото на сайта, може да го промените по ваш избор! За предпочитане, размерите може да са 300х70 на логото! :) За, да може да се отличава от Менюто, аз ще сложа една hr ( черта ).


5. Добре, до тук добре! Сега, вместо да пишем меню, може да си намерим такова от Интернет. В повечето случай, аз използвам ето този сайт : cssmenumaker.com в него има най-различни видове менюта. Аз ще използвам ето това меню : http://cssmenumaker.com/menu/red-css3-drop-down-menu вие може да си избере от тук : cssmenumaker.com/css-drop-down-menu :) Ето така ще изглежда моето : http://www.prikachi.com/images.php?images/458/5197458f.png , когато вече го свалите и сте в папката, първо влезте в " instructions.html " там е описано как става, но ще трябва да копираме HTML кода за CSS Mенюто. След това го поставете в Index.html, а след това влезте в menu_assets ( папката ) и от там влезте в styles.css копирайте кода и го поставете под този на нашият Style.css! Ето така трябва да излгежда нашият Индекс : http://www.prikachi.com/images.php?images/475/5197475o.png , а ето така трябва да излежда нашият Style : http://www.prikachi.com/images.php?images/489/5197489x.png ! Ако е така всичко, отворете index-a с вашият Интернет Браузер и вижте дали се е получило, при мен е станало : http://www.prikachi.com/images.php?images/528/5197528C.png !

6. След това идва време да започнем текста. Заглавията ще започват с

и ще свършват с

, но за да се получи хубав Текст Shadow, ние ще трябва да ползваме ето този код "

Тук пишете текста

и под него може да добавите за параграф, ето този код "

" и накрая когато напишете текста да го затворите с "

"..

7. Време е за се върнем на CSS файла и да оправим footer-a, с ето този код "

#footer
{
    clear: both;
    margin: 0;
    padding: 10px 0;
    text-align: center;    
    border-top: 1px solid #000;
    color: #EEE;
    background: #191919;    
}

" - Това е за Footer-a така че може да го поставите най-доло в Style.css, а това в index.html !

8. Е, това е като цяло от мен! Добавил съм някой отделни екстри, който не съм ги споменал тук!
Моля, ако имате критики ги кажете, за да може да ги добавя в другата версия на сайта 0.3, но моля без излишни коментари който биха ме наругали или работата ми, все пак съм начинаещ все още с уроците..

ДЕМО : http://www.prikachi.com/images/982/5197982C.png
СВАЛИ : http://dox.bg/files/dw?a=90a7362910

Калдейта ЕООД - © 2003-2010. Всички права запазени.

Контакти За реклама Условия за ползване