Как да създадем Web сайт само с Notepad++
| Автор |
|
| anonymousПон, 05.05.08, 09:45 |
Чудесно е!  Особено за хора, за които дизайна на интерфейса е на първо място. Ако мога да направя 2 "забележки":
- направи го с проценти, а не с пиксели;
- главния контейнер бих му дал нещо от типа на min-height:90%; , за да не се събира, когато няма съдържание. Kakmo kaзват в добрите английски семейства: "Keep walking"
 | | | phrozencrewПон, 05.05.08, 11:12 | RE: Как да създадем Web сайт само с Notepad++
” Чудесно е! Особено за хора, за които дизайна на интерфейса е на първо място. Ако мога да направя 2 "забележки":
- направи го с проценти, а не с пиксели;
- главния контейнер бих му дал нещо от типа на min-height:90%; , за да не се събира, когато няма съдържание. Kakmo kaзват в добрите английски семейства: "Keep walking"
„ , благодаря за добрите идеи. Ето и продължението. #########################################
За да направим дизайна да се разширява според резолюцията много лесно можем да променим дизайна като просто заменим в CSS файла широчината на слоя съдържащ цялото съдържание от 750 пиксела на 80%: #conteiner {width: 750px; ...
#conteiner {width: 80%; ... |
Това вече позволява на съдържанието да се разполага свободно по целия екран и дори да свием прозореца пак ще имаме едно прилично изложено съдържание.
Нека вкараме и минимална височина на слоя content. В този случай дори да имаме само един ред в съдържанието (content) височината пак ще си остане същата. За да направя това аз ще използвам хак(трик), който да важи за повечето браузери, тъй като инструкцията min-height не се поддържа навсякъде. За тази цел аз ще добавя още един ред в CSS файла: #content {min-height: 200px; height: auto !important; height: 200px;} |
Хаковете (триковете) са много популярни при изграждане на XHTML + CSS сайтове. Ако на този етап отворим страницата с Internet Explorer 6 ще видим, че по незнайни причини полето footer е станало по-високо ?!!! Няма да губим време да псуваме стария браузер на M$, а просто ще вкара един от най-популярните хакове за IE: <!--[if lt IE 7.0]>
<style type="text/css">
...някакви инструкции...
</style>
<![endif]--> |
Какво представлява този код? Този код ще се прочете само от IE браузерите. Останалите ще го подминат защото, както виждате кода е поставен в коментар (<!-- -->). [if lt IE 7.0] - това казва на браузера: "Ако си Internet Explorer версия по-малка 7, изпълни следния код до [endif]". Другите възможности за използване на горния код са:
[if gt IE 6.0] - ако браузера е с версия по-голяма от 6
[if IE 6.0] - ако браузера съвпада в 6
Има и други техники, като слагане на шпации или удивителен знак (if !IE 6.0), но те не са тема на урока.
Сега да видим как ще оправя футъра с този хак. Първо ще зануля падинга и после ще сложа стилове на параграфа във падинга. Колко хитро, че сложихме параграф! Отваряме си html страницата и в горната част поставяме: <!--[if lt IE 7.0]>
<style type="text/css">
#footer {padding: 0px;}
#footer p{padding: 8px 150px 10px 150px;}
</style>
<![endif]--> |
Ето как ще изглежда кода вмъкнат в страницата ни: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Заглавие на документа</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7.0]>
<style type="text/css">
#footer {padding: 0px;}
#footer p{padding: 8px 150px 10px 150px;}
</style>
<![endif]-->
</head>
<body>
<div id="conteiner">
<div id="heade.... |
Да видим как ще изглеждат промените, които направихме върху нашата страница:
[v.16]
Изтегляне на кода:  v.2415.rar | | | anonymousСъб, 14.06.08, 14:23 |
Ааааа много красиво...за урок, семпло, без губене на време, и даващо точно толкова информация, колкото е нужно за начало! Браво! В момента и аз се уча на стария HTML и тъкмо мислех да премина към DREAMWEAVER-a когато прочетох тези твои уроци тук.
Сега първата ми работа ще е да разгледам световните стандарти, да науча CSS, да видя точно как работи и да понауча XHTML .....и след това отново ще започна да си правя умозаключения :) Вярно е че всичко отнема време , но по-добре да дам 1-2 месеца от скромния ми живот и да направя остатъка му красив и плодотворен, ..отколкото цял живот да се чудя какво да правя със свободното си време и да гълтам кафета на килограм ! беше ми приятно : <a href="maito:ohilen@yahoo.com"> "О"хилен</a> | | | anonymousПет, 17.04.09, 01:27 | RE: Как да създадем Web сайт само с Notepad++
Ето как с малко труд, с много ентусиазъм и желание за учене създадохме простичък сайт, валидиран по стандартите и изключително лек. Сега остана да разберете как да сложите допълнителните meta-тагове, които ще помогнат на търсещите машини да индексират по-лесно вашият сайт, но за това друг път. Урока е създаден специално за сплотеното форумно общество на download.bg. Кода е написан изцяло от мен (PhrozenCrew) и не са използвани външни източници освен от [link=www.w3.org]W3 - консорциума[/li Неееееееееееееееееее ..не е честнооооооооооооооооооо !!
Аз само попитах няколко невинни въпроса и четейки отговорите и опитвайки се да ги разбера сега съм пристрастена !!
Искаааааааааааааам още !!! И Фрозен, както казах тук срещнах най- невероятните хора и ти си един от тях ! Благодаря ти за урока тук и затова , че ти си не само изключително талантлив , но и надраснал егото си и споделяш това знание с другите !Е, това е мярката за колко голям отвътре е един човек
| | | dreamskillНед, 08.11.09, 16:53 |
Искам малко да бъмпна темата. Мисля, че фрозен няма нищо напротив И ето какво направих | | | anonymousСъб, 14.11.09, 10:37 |
НЕ, процентите се бъгват, не подвеждай хората (това е съвсем сериозно!) | | | darkchildНед, 05.12.10, 10:31 |
Хиляди благодарности за това нещо phrozencrew!! Знам, че темата е остаряла, но си заслужава да бъде „изровена“ Ето какво спретнах набързо с този урок http://mnogovajno.hit.bg/ | | | zlatenaНед, 05.12.10, 11:00 | RE: Как да създадем Web сайт само с Notepad++
” Знам, че темата е остаряла, но си заслужава да бъде „изровена“
„
Аз дори се надявам phrozencrew да добави още нещо интересно. | | | phrozencrewНед, 05.12.10, 12:50 |
Едиз, браво! Много интересен "монохроматичен" дизайн! В момента бих пренаписал темата отново, защото аз също се развивам и вече почти не използвам IE-хакове. На вместо това ми е много по-лесно да използвам нулиране на стиловете в различните браузери с CSS. На няколко пъти съм я споменавал тази техника и вероятно и някой друг вече я използва успешно. Спестява работа и мислене, за да разбереш кое се прецаква в гадния IE6. Най-просто колекцията ми от ресет инструкции е следната: @charset "windows-1251";
html, body { height: 100%; }
html{ width: 100%; margin-bottom: 1px; }
*,html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, table, tr, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
a:active {outline: none;}
a img,:link img,:visited img, img, map { border:none }
ul,ol { list-style:none }
body { font: 100%/1.25 arial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
/* ############ CLEAR ############ */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* ############ END CLEAR ############ */
hr { border: 0; height: 1px; background: black; color: black; }
input[type=hidden]
{
display: none !important;
visibility: hidden;
height:0px;
border:0px;
margin: 0 0 0 0;
padding: 0 0 0 0;
position:absolute;
}
table { border-collapse:collapse; border-spacing:0; empty-cells:show; }
table tr td {vertical-align: top;}
b {font-weight: bold;}
u {text-decoration: underline;}
i {font-style:italic;} |
Има някои невалидирани css-инструкции. Обещавам да помисля как да се оправят.
Този файл си се запазва примерно като reset.css. След това се добавя (импортира) за да не се меши в основния дизайн (основния css-файл), по следния начин: @import url("reset.css");
|
За мен този начин на работа е много по-чист и добър, макар да е леко досаден в известен смисъл. | | | tegoteНед, 05.12.10, 18:02 |
Виждам, че това е урок за напреднали. Всичко, което се поднася има за цел да удовлетвори знаещите, но не и незнаещите, които имат нужда - именно те! Идеята е да се започне, защото ако няма "първи клас", няма да се стигне до "десети", което означава, че наличието на урок за десети клас не означава, че той ще е най-полезният. Защото до 10-ти клас (давам пример само) стигат само някои. А за да стигнат до там тези, които не знаят как да започнат, трябва да им се снесе това от 1-ви клас. Както се вижда, тези уроци са най-важните, особено важни за да мотивират обикновеният потребител към първи стъпки. Има разлика дали правиш нещо за благото на 10 човека или за 1000 човека! Ако трябва да се изнесе урок за 1-ви клас, то статията би трябвало да е кратно голяма на предоставената тук. За всяка дума, било то чуждица или термин трябва да се даде обяснение. В противен случай ще виждате само двойкаджии! А целта не е такава. Но да не забравяме, че хората нямат време или времето им отива в други неща - жена, деца, работа, къща, строителство и ремонти, хората имат грижи. Какво ще последва при даденият по този начин урок за уж "Тъй като това просто ръководство е насочено към начинаещите"? 1. Няма да разберат същноста. 2. Дори да се обясни повече, става още по-лошо, защото се приема, че хората нямат търпение и имат друга работа и ангажименти. Затова аз бих предложил урок да се дава само с примери, без много обяснение. Сравняването на кода на шаблоните с резултатът могат достатъчно да помогнат на човек да изгради представа кое какво е. Но най-добрият начин е устният урок. Човек се учи като пита. Смятам и съм сигурен, че има учебници и то на български, които са предназначени за тази цел. Лошото е че има и лентяи, които гледат на нас с насмешка и това само защото не ни разбират и не ги вълнува. Съответно и не могат да ти признаят таланта да боравиш със компютъра. Казват си наум - ПРОГРАМИСТ! Учил е математика, научил е програмирането. Хубаво. Но как се научава? Това те не са опитали. Само си казват, че сме вързани за компютрите, което не е полезно, преди не е имало компютри и живота е бил по-спокоен и реален. А сега нашето другарче е компютъра и виртуалния човек оттатък мрежата. Не звучи много похвално. Но да не се отклонявам от темата, идеята е като ще се прави нещо, то да е за начинаещи и да бъде с примери, не такива (свали, разглеждай, сравнявай), а направо - сорс -> резултат. Другото няма как да бъде дадено на ученика, защото няма обратната връзка да пита, да разпитва, пък и времето притиска. | |  Коментар
|
Отговор
За печат
