download.bg
 Вход Списание  Новини  Програми  Статии  Форум  Чат   Абонамент  Топ95   Архив 

Как да създадем Web сайт само с Notepad++

< 1 2 3 4 5 >

Автор
Съобщение
phrozencrew
Пет, 02.05.08, 19:35
Създаване простичък и валидиран по стандартите Web-сайт само с Notepad++

XHTML + CSS Web Site
XHTML + CSS Web Site

Реших да напиша този урок за всички, които тепърва започват да се занимават с Web програмиране и създаване на сайтове. Доста хора имат погрешна представа за създаването на сайтове и често се отклоняват от правия път като използват програми подобни на Dreamweaver, а още по-лошо се получава, когато директно се насочат към рязаници с Photoshop. В този урок няма да има нито една рязаница и нито ред написан на нещо друго освен на вездесъщия текстов редактор Notepad++. В момента тече мощна световна кампания в подкрепа на Web стандартите. Дори фондация Mozilla изкара тениски (Don't Hurt The Web) за своя браузер Firefox в подкрепа на стандартите:

Don't Hurt The Web
Don't Hurt The Web

Ето за това реших да споделя някои идеи за да ограничим масовото нараняване на Web пространството с не стандартизирани и неоптимизирани сайтове. Ще се постарая да дам конкретни идеи с много примери и малко обяснения.
И така, нека започнем. Първото, над което ще акцентирам е изборът DOCTYPE и създаването на правилен XHTML документ. Тъй като това просто ръководство е насочено към начинаещите ще използваме по-лека форма за валидиране на XHTML - xhtml1-transitional. Предполага се, че четящите имат бегла представа от HTML и XML кодиране. Но все пак ще дам леки обяснения. Всеки HTML документ (или страница) се състои от последователност команди към браузера. Тези команди се наричат тагове (странна дума, която на български бих превел като маркери или етикети). Тези тагове служат за правилното визуализиране на съдържанието от браузера. Според съвременните стандарти и по конкретно стандарта, който ще използваме в това ръководство, трябва да съдържат отваряща и затваряща част. Това е основно правило и при изграждането на XML документи. Пример:
<html> <!-- Отварящ елемент -->
	<body> <!-- Отварящ елемент -->
	<h1>Заглавие</h1> <!-- Отварящ и затварящ елемент -->
	<hr /> <!-- Отварящ и затварящ елемент заедно -->
	</body> <!-- Затварящ елемент -->
</html> <!-- Затварящ елемент -->

Както се вижда всяко начало задължително трябва да има край :) (такъв е животът!). Кода <!-- коментар --> ни позволява да слагаме коментари, които браузерите няма да визуализират. Този коментарен код ще ни помогне по-късно да се ориентираме много бързо в страницата. И така нека създадем една проста бланка за нашия сайт. Първо нека решим от какви елементи ще се състои нашата страница. В едно поле или слой, което ще наричам conteiner ще поставя съдържанието на самите страници. Вътре в това поле ще бъдат поставени всички останали полета или слоеве на сайта. Избирам да имам заглавно поле, което ще нарека header. В това поле по-късно ще поставя заглавието на сайт (име на фирма или вашето име/прякор или ... просто заглавие), в това поле ще сложа и основното меню за навигация из сайта. В друго (content) поле ще сложа съдържанието. И най-накрая ще поставя и поле за край на документа, в което ще опиша кой е автора на този сайт и разни други интересни неща. Ето и самата бланка:

схема на страницата
схема на страницата

Както и как изглежда самия код:
<!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>
</head>
 
<body>
<div id="conteiner">
	<div id="header">
		<div id="zaglavie"><h1>Заглавие</h1></div>
		<div id="menu">
	    </div><!-- Затварям id="menu" -->
    </div><!-- Затварям id="header" -->
 
	<div id="content">
    </div><!-- Затварям id="content" -->
 
	<div id="footer">
    </div><!-- Затварям id="footer" -->
</div><!-- Затварям id="conteiner" -->
</body>
 
</html>

Първия пасаж на нашия документ е изключително важен. Той определя стандарта, по който ще се валидира документа (<!DOCTYPE html... ), езика, който ще се използва в документа (charset=windows-1251), заглавието на документа, а по-късно ще добавим и още елементи, но за начало и това ни стига.

Във втория пасаж от кодове аз съм поставил няколко слоя, които да отделят отделните елементи на страницата - header, content и footer. Сега нека запишем по горния код. Отваряме Notepad++, след това избираме последователно File -> Save As... -> index.html и записваме документа в някоя празна папка. Можете да отворите този документ с любимия ви браузер и да видите какво се е получило. Но по-интересно е да видим дали кода ще издържи проверката на стандартите. Отивате на адрес: http://validator.w3.org/, избирате таба Validate by File Upload, избирате файла, който записахме преди малко и го проверявате. Ако сте следвали точно стъпките би трябвало да получите съобщението "This Page Is Valid XHTML 1.0 Transitional!".
Трябва да свикнете да правите тази проверка при всяка по-сериозна промяна в кода на страницата!

Сега след като имаме добре структурирана и валидирана бланка, нека започнем да я пълним с информация. Като за начало ще сложим няколко линка (връзки) към вътрешността на сайта. Аз избирам да сложа следните връзки в менюто - "НАЧАЛО", "ЗА МЕН", "КОНТАКТИ". За да поставя тези линкове ще използвам списъчна структура, тъй като тя е най-разпространена при създаването на менюта. Списъците започват с тага <ul>, а отделните елементи от списъка се отбелязват с <li>. Самите линкове се бележат с тага за котва (anchor) <a>, като вътре в този таг се поставя и информация на къде сочи линка. Да видим:
<ul>
	<li><a href="#">НАЧАЛО</a></li>
	<li><a href="#">ЗА МЕН</a></li>
	<li><a href="#">КОНТАКТИ</a></li>
</ul>

Този код го поставете между отварящия и затварящия слой (поле) <div id="menu"></div>:
<!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>
</head>
 
<body>
<div id="conteiner">
	<div id="header">
		<div id="zaglavie"><h1>Заглавие</h1></div>
		<div id="menu">
			<ul>
				<li><a href="#">НАЧАЛО</a></li>
				<li><a href="#">ЗА МЕН</a></li>
				<li><a href="#">КОНТАКТИ</a></li>
			</ul>
	    </div><!-- Затварям id="menu" -->
    </div><!-- Затварям id="header" -->
 
	<div id="content">
    </div><!-- Затварям id="content" -->
 
	<div id="footer">
    </div><!-- Затварям id="footer" -->
</div><!-- Затварям id="conteiner" -->
</body>
 
</html>

Запазете документа и го отворете в браузера за да видим какво се е получило. Би трябвало да е нещо подобно:
[v.02]

Да сложим малко информация и в полето за съдържание content. Тъй като ще пишем чист текст ще използваме един тага за параграф <p>. Това ще ни позволи да отделим отделните пасажи текст. Нека сложим следния текст:
<p>
Това е моя първи сайт, в който ще използвам съвременните стандарти за изграждане на Web страници. Този текст е в параграф, за да може по-късно да бъде по-добре форматиран. Този текст служи за пълнеж на сайта, но по-късно ще го заменя с текста, който наистина искам да сложа тук.
</p>

Да видим как ще изглежда по-горния параграф вмъкнат в нашата скромна страничка:
<!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>
</head>
 
<body>
<div id="conteiner">
	<div id="header">
		<div id="zaglavie"><h1>Заглавие</h1></div>
		<div id="menu">
			<ul>
				<li><a href="#">НАЧАЛО</a></li>
				<li><a href="#">ЗА МЕН</a></li>
				<li><a href="#">КОНТАКТИ</a></li>
			</ul>
	    </div><!-- Затварям id="menu" -->
    </div><!-- Затварям id="header" -->
 
	<div id="content">
		<p>
		Това е моя първи сайт, в който ще използвам съвременните стандарти за изграждане на Web страници. Този текст е в параграф за да може по-късно да бъде по-добре форматиран. Този текст служи за пълнеж на сайта, но по-късно ще го заменя с текста, който наистина искам да сложа тук.
		</p>
    </div><!-- Затварям id="content" -->
 
	<div id="footer">
    </div><!-- Затварям id="footer" -->
</div><!-- Затварям id="conteiner" -->
</body>
 
</html>

Нека валидираме отново и да видим как ще изглежда сайта до тук в браузера.
[v.03]

Сега остава да попълним със съдържание и най-долната част от нашата страничка. Отново ще сложим параграф в който ще поставим текста:
<p>
Всички права запазени. Дизайн PhrozenCrew. Сайтът е валидиран по XHTML - Transitional и CSS.
</p>

Вмъкваме и този код в нашата страничка, запазваме и отново проверяваме дали кода минава валидирането:
<!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>
</head>
 
<body>
<div id="conteiner">
	<div id="header">
		<div id="zaglavie"><h1>Заглавие</h1></div>
		<div id="menu">
			<ul>
				<li><a href="#">НАЧАЛО</a></li>
				<li><a href="#">ЗА МЕН</a></li>
				<li><a href="#">КОНТАКТИ</a></li>
			</ul>
	    </div><!-- Затварям id="menu" -->
    </div><!-- Затварям id="header" -->
 
	<div id="content">
		<p>
		Това е моя първи сайт, в който ще използвам съвременните станарти за изграждане на Web страници. Този текст е в параграф за да може по-късно да бъде по-добре форматиран. Този текст служи за пълнеж на сайта, но по-късно ще го заменя с тексто, който наистина искам да сложа тук.
		</p>
    </div><!-- Затварям id="content" -->
 
	<div id="footer">
		<p>
		Всички права запазени. Дизайн PhrozenCrew. Сайта е валидиран по XHTML - Transitional и CSS.
		</p>
    </div><!-- Затварям id="footer" -->
</div><!-- Затварям id="conteiner" -->
</body>
 
</html>

В общи линии сме готови със съдържанието на сайта. Да видим как ще се вижда сайта от търсачките:
[v.04]

##########################################################

Сега дойде време за забавната част от създаването на един сайт, а именно дизайна. Тъй-като всички съвременни корифеи на Web разработката пропагандират отделяне на съдържанието от дизайна и ние ще направим точно така. Ще създадем един CSS файл, наречен style.css, който ще се погрижи за дизайна на нашия сайт. Създаваме файла с Notepa++ го записваме в директорията в която се намира и файла ни index.html. Този файл ще го приложим върху страниците като добавим следния ред:
<link href="styles.css" rel="stylesheet" type="text/css" />

в началото на нашия документ, непосредствено след </title> тага:
<title>Заглавие на документа</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

Може би най-трудната част при създаването на дизайна е избора на подходящи цветове. Сега няма да се задълбочавам в избора на цветове затова ще си избера някоя готова палитра от сайта http://www.colorhunter.com/.
След като сме избрали няколко, не повече от 4-5 цвята, трябва да преценим как точно да ги комбинираме. Аз си избрах следните цветове:
#bea24f
#70864a
#4e4c20
#89bf88
#ffffff

Да започнем същинската работа. Първото нещо, което трябва да направим е да се оттървем от автоматичното форматиране на браузерите. Всеки браузер има такова форматиране, което води до разлики във визуализирането на сайта. За това в началото на нашия CSS файл слагаме следния ред:
html, body, table, tr, td, div, h1, h2, h3, img, ul, li, a {margin: 0px; padding: 0px;}

Това ще накара браузера да нулира всички отстояния - вътрешни и външни - между отделните елементи на сайта. Може да се добави и един астерикс * за да сме сигурни, че няма да изпуснем някой елемент (таг), който мислим да ползваме. Повечето браузери добавят точки пред списъчните елементи, така, че не е лоша идея да разкараме всякакво форматиране върху списъците ни, а защо да не разкараме и долното подчертаване под линковете. Това можем да направим като добавим тези редове в css файла:
ul {list-style: none;}
a {text-decoration: none;}

Да вземем да пипнем и фона на страницата:
body {background: #bea24f;}

След толкова много работа да видим до къде я докарахме. Съдържанието на css файла трябва да е такова
*, html, body, table, tr, td, div, h1, h2, h3, img, ul, li, a {margin: 0px; padding: 0px;}
ul {list-style: none;}
a {text-decoration: none;}
body {background: #bea24f;}

А в браузера страницата ни трябва да изглежда така:
[v.05]

Да продължим нататък. Много важно е да се разбере, че пред стандартните HTML кодове не се слага нищо, докато ако искаме да форматираме частен случай, който има идентификационно име "id= "ne6to_si"" тогава форматирането на елемента в който е сложен идентификатора започва с #. Възможно е използването и на класове - class="ne6to_si". Класовете имат много предимства и могат да се повтарят за разлика от идентификаторите, но за това друг път. Аз мисля, че е много добра идея да поставим рамка до къде да се простира текста, защото така докато четем трябва да си въртим главата по целия монитор. За тази цел нека форматираме слоя conteiner, в който сме поставили цялото съдържание и го ограничим на широчина да е 750 пиксела:
#conteiner {width: 750px;}

Аз бих желал моя сайта да е хоризонтално центриран, така че нека добавим и едно центриране на целия този слой с техниките, които ни позволява CSS:
#conteiner {width: 750px; margin-left: auto; margin-right: auto;}

Страницата вече изглежда малко по-добре, но аз искам да вкарам отстояние от рамката на браузера горе 20 пиксела (margin-top: 20px;), ще се получи добре и ако сложа една плътна рамка от 12 пиксела около целия слой. Рамката ще е в цвят #70864a (border: 12px solid #70864a;), но за да имам по-голям контраст ще оцветя и фона на conteiner слоя (background: #4e4c20):
#conteiner {width: 750px; margin-left: auto; margin-right: auto; margin-top: 20px; border: 12px solid #70864a; background: #4e4c20;}

Да видим какво се получи:
[v.06]

И така да продължим. Този шрифт, който е по подразбиране в браузера ми не ми харесва особено и аз бих искал да го сменя с по-приятен за четене шрифт. За това в инструкциите за body ще добавя параметрите които ми харесват като шрифт и цвят на текста. Ще направим шрифта Arial ,като зададем възможност при липса на този шрифт браузера да използва Verdana (font-family: Arial, Verdana;) и едновременно с това ще кажем цвета на текста да е бял (color: #ffffff;):
body {background: #bea24f; font-family: Arial, Verdana; color: #ffffff;}

До тук css файла изглежда така:
*, html, body, table, tr, td, div, h1, h2, h3, img, ul, li, a {margin: 0px; padding: 0px;}
ul {list-style: none;}
a {text-decoration: none;}
body {background: #bea24f; font-family: Arial, Verdana; color: #ffffff;}
 
#conteiner {width: 750px; margin-left: auto; margin-right: auto; margin-top: 20px; border: 12px solid #70864a; background: #4e4c20;}

Колко малко текст, а каква забележителна промяна в нашата страничка:
[v.07]

Сега ще си поиграем със заглавната част (header) на страницата.
Тъй като в момента хедъра се слива със съдържанието, нека му сложим някакъв фон от избраните по-горе цветове (background: #89BF88;). Да го направим и с определена височина от 120 пиксела (height: 120px;)
#header {height: 120px; background: #89BF88;}

[v.08]

Получи се нещо странно, но все пак откроихме заглавната част. Да си поиграем още малко. Аз бих искал да сложа логото вертикално по средата на хедъра, като го от ляво на известно разстояние. За тази цел ще използвам възможността за работа с обекти на CSS. Тъй като искаме да коригираме тага <h1>, който се среща в хедъра, но без да променяме формата на останалите <h1> елементи, които могат да се сложат в текста, ще използваме наследяване (#zaglavie h1{}). И така отстъпването на <h1> тага ще стане за сметка на вътрешните разстояния или т.нар padding. Когато искаме да направим отстъп от няколко места можем да съкратим кода и да напишем padding (горе дясно долу ляво), като мерните единици отново могат да са пиксели. Когато поставим на някое от разстоянията 0 без мерна единица ние казваме на браузера да нулира това разстояние (padding: 40px 0 0 40px;). И тъй като при различните браузери заглавните тагове <h1>, <h2>, <h3>... по подразбиране могат да бъдат с различна големина на текста ние ще се застраховаме за тази големина като и сложим размер (font-size: 1.8em; - можете да използвате и пиксели или други мерни единици, но в случая аз предпочитам размерност em). Има едно много досадно болдване на тези заглавни тагове, което също може да ни провали форматирането, нека премахнем и него (font-weight: normal;):
#zaglavie h1{font-size: 1.8em; font-weight: normal; padding: 40px 0 0 40px;}

До къде стигнахме:
[v.09]

Виждаме, че менюто нещо не седи както трябва. Време е да се заемем и с него. Какво искам да направя с това меню? Хм... първо бих искал го изпратя в дясно, защото така много ми се мота със логото (float: right;). След това ще е добре да накарам всички елементи от списъка (линковете) да се погазва в линия, а не да са един под друг (ul li {display: inline;} - опааа, отново използвахме наследяване, макар че може и без него). Да видим кода:
ul {float: right;}
ul li {display: inline;}

[v.10]

Хм, пак седи много тъпо. Ще приложа една лека техника за преобразуване на текстовите линкове в слоеподобни (display: block;), след това ще им дам размер (font-size: 0.6em;), ще ги накарам да са ляво подравнени (float: left;) и ще им променя цвета (color: #4e4c20;).
ul li a {display: block; font-size: 0.6em; float: left; color: #4e4c20;}

И тъй като им зададохме да се държат като блокове, вече на линковете мога да сложа вътрешни отстояния (padding: 4px 8px 4px 8px;), външни отстояния (margin-left: 1px; - в случая сложиш отстояние между два съседни линка 1 пиксел) и фон (background: #70864a;) и, така че ще продължа по горната инструкция:
ul li a{padding: 4px 8px 4px 8px; margin-left: 1px; background: #70864A;}

Да видим какво се получи:
[v.11]

Мисля, че започна да прилича на заглавна част, но иска още малко работа. Нека накараме цялото меню да слезе още малко надолу. Това можем да го извършим като сложим отстояния на тага за начало на списъка ul {padding: 23px 2px 0 0;} - това ще накара целия списък да се смъкне надолу с 23 пиксела и да се отдръпне в дясно с 2 пиксела. В такъв случай форматирането на <ul> стана:
ul {float: right; padding: 23px 2px 0 0;}

Да направим ховър ефект при преминаване с мишката върху някой линк. За тази цел ще сменим фона на линковете, както и цвета на текста:
ul li a:hover{background: #bea24f; color: #ffffff;}

[v.12]

Горе-долу се получи един приличен хедър. Сега да се заемем с същинската част на сайта - централното съдържание. По-горе споменах, че тази част ще се съдържа в слоя content, а самия текст ще го слагаме в отделни параграфи. Първото, което бих искал да направя е да сложа малко вътрешни отстояния на слоя content:
#content {padding: 20px;}

Сега, нека пипнем леко и параграфите. Няма да е лошо да имаме един наистина добре форматиран текст, който да заема равномерно цялото поле, което му се осигурява (text-align: justify;). Нека сложим и размер на шрифта (font-size: 1em;), разстояние между отделните редове (line-height: 1.4em;), както и някакъв по-мек цвят за четене (color: #89BF88;):
#content p {text-align: justify; font-size: 1em; line-height: 1.4em; color: #89BF88;}

[v.13]

Да се заемем и с футъра или най-долната част на страничката ни. Мисля, че е добра идея да се слее фона на футъра със страничната рамка (background: #70864a;). По мой вкус аз бих центрирал всичко във футъра (text-align: center;) и бих намалил текста (font-size: 0.8em;). Друго, което ми се струва много подходящо е да отдалечим всичко съдържащо се в футъра от всички страни чрез padding:
#footer {background: #70864a; text-align: center; font-size: 0.8em; padding: 8px 150px 10px 150px;}

Ще е добре и да сложим форматиране на линковете, но за тази цел, нека се върнем към основния ни HTML документ и сложим линкове във футъра:

<p>
Всички права запазени. Дизайн <a href="http://afsh.hit.bg">PhrozenCrew</a>. Сайта е валидиран по <a href="#">XHTML - Transitional</a> и <a href="">CSS</a>.
</p>

Нека сложим и форматиране на тези линкове:
#footer a {color: #89bf88}
#footer a:hover {color: }

[v.14]

Мисля, че сме готови! Ето го и целия CSS файл, който стилизира простата ни страничка:
*, html, body, table, tr, td, div, h1, h2, h3, img, ul, li, a {margin: 0px; padding: 0px;}
ul {list-style: none;}
a {text-decoration: none;}
body {background: #bea24f; font-family: Arial, Verdana; color: #ffffff;}
 
#conteiner {width: 750px; margin-left: auto; margin-right: auto; margin-top: 20px; border: 12px solid #70864a; background: #4e4c20;}
#header {height: 120px; background: #89BF88;}
 
#zaglavie h1{font-size: 1.8em; font-weight: normal; padding: 40px 0 0 40px;}
 
ul {float: right; padding: 23px 2px 0 0;}
ul li {display: inline;}
ul li a {display: block; font-size: 0.6em; float: left; color: #4e4c20;}
ul li a{padding: 4px 8px 4px 8px; margin-left: 1px; background: #70864A;}
ul li a:hover{background: #bea24f; color: #ffffff;}
 
#content {padding: 20px;}
#content p {text-align: justify; font-size: 1em; line-height: 1.4em; color: #89BF88;}
 
#footer {background: #70864a; text-align: center; font-size: 0.8em; padding: 8px 150px 10px 150px;}
#footer a {color: #89bf88;}
#footer a:hover {color: #4e4c20;}

Ето как с малко труд, с много ентусиазъм и желание за учене създадохме простичък сайт, валидиран по стандартите и изключително лек. Сега остана да разберете как да сложите допълнителните meta-тагове, които ще помогнат на търсещите машини да индексират по-лесно вашият сайт, но за това друг път.

Урока е създаден специално за сплотеното форумно общество на download.bg. Кода е написан изцяло от мен (PhrozenCrew) и не са използвани външни източници освен от W3 - консорциума.

edit: Отворен съм към всякакви коментари по кода. Целия код може да се изтегли от тук:
XHTML_and_CSS_Web_Design_only_with_Notepad___by_PhrozenCrew.zip

редактиран от phrozencrew на 02.05.08 19:57
редактиран от phrozencrew на 04.05.08 20:02
anonymous
Пет, 02.05.08, 19:58
Много яко и простоphrozenhell.Ти си гений
редактиран от anonymous на 02.05.08 19:59
редактиран от anonymous на 02.05.08 19:59
редактиран от anonymous на 02.05.08 19:59
anonymous
Пет, 02.05.08, 20:19
много полезно
anonymous
Пет, 02.05.08, 20:27
Евала, майсторе
anonymous
Пет, 02.05.08, 20:53
Фрозен има ли нещо което не можеш да правиш/свързано с компютри?
И има ли език за програмиране който ти обегва?
Винаги съм се питал.
Ще е много полезно на всички нас, ако по често пускаш по някое туториалче
Поздравления!
anonymous
Пет, 02.05.08, 20:59

RE: Как да създадем Web сайт само с Notepad++

” ...И има ли език за програмиране който ти обегва?.. „
има!казва се gmlама съм сигурен,че ще го научи за 1 ден
anonymous
Пет, 02.05.08, 21:42
Браво Питам се - дали и аз някога ще се науча да правя нещо подобно Може би ,ако си взема малко творческа отпуска или взема да се пенсионирам
редактиран от anonymous на 02.05.08 21:42
zlatena
Съб, 03.05.08, 00:47
phrozencrew, какво да добавя...
Чудесен тутор,но не е само това...
Написаното е толкова ясно,че повече от това незнам може ли да бъде...
Изисква да отделиш от енергията си и да я предадеш на другите,поднесена по този начин...
Поне аз несъм срещала такова нещо...за без пари
Thanks...
phrozencrew
Съб, 03.05.08, 19:26
Приятели, благодаря ви за добрите думи. Това, което правя с всичките уроци, които съм пускал във форума е защото имам нужда да го правя. Аз съм благодарен на хилядите хора, които ми позволяват да използвам Linux и да се уча, защо и аз да не споделям знанията и опита си. Професионализма е комплексно явление, то се гради върху човешките принципи, а пък човешките принципи са различни от животинските. Не разбирам хората, които всячески се стремят да не кажат нещо само защото някой може да им стане конкурент или едва ли пък не дай си Боже да им изяде супата с вилица :). Професионализма се гради върху екипната работа и помощта. Аз сам не бих могъл да направя нищо без блестящите уроци в мрежата на хората, които са способни да споделят знанията си. Не бих правил и нищо ако нямаше за кой да го правя. Урока, който съм написал мисля, че става за прохождащи XHTML и CSS кодери, но не и за любители, като мен, или професионалисти. Аз не съм типичен Web разработчик. Аз просто се забавлявам с това изкуство и нямам никакви проблеми да споделям това, което знам с всеки, който иска да се учи.

Бих добавил малко гъдел в страничката, просто за да изостря апетита към CSS на новаците. Много лесно е да се запази страницата оптимизирана и все пак да се вкарат картинки от по 1 пиксел за фон, които много биха я отворили. Ей тука вече говорим за по-професионален усет. За да се вкарат подобни картинки задължително ще ви трябва професионален редактор от сорта на Gimp/Photoshop. Няма повече да се задълбочавам в темата, защото мисля, че всеки може да реже картинки от по един пиксел широки. В CSS кода си позволих да вкарам и псевдо-код, който кара първата буква от параграфа да изглежда различно. Мисля, че всеки вече може да се ориентира в CSS кода, така че ето и демо:
[v.15]
Целия код от тук:
v.15+Images.zip

anonymous
Съб, 03.05.08, 22:10

RE: Как да създадем Web сайт само с Notepad++ ?!

Създаване простичък и валидиран по стандартите Web-сайт само с Notepad++

XHTML + CSS Web Site
XHTML + CSS Web Site

Реших да напиша този урок за всички, които тепърва започват да се занимават с Web програмиране и създаване на сайтове. Доста хора имат погрешна представа за създаването на сайтове и често се отклоняват от правия път като използват програми подобни на Dreamweaver ?!, а още по-лошо се получава, когато директно се насочат към рязаници с Photoshop. В този урок няма да има нито една рязаница и нито ред написан на нещо друго освен на вездесъщия текстов редактор Notepad++. „

Много странно твърдение за програма от ранга на Dreamweaver.Не бих се съгласил с такова твърдение още повече,че за правене на сайт с текстов редактор е било в зората на интернет сайта и ако човек реши по тоя начин да изгражда сайт,времето което му трябва ще е вероятно година.Има и други причини и то не малко да не е с текстов редактор.Има предостатъчно литература да прочетете защо е така .А визуалните редактори напълно ги изключвам като вредни за хората които ще се занимават с тая дейност.За направата на един сайт е необходимо да имате една дузина програми.
А за запалените на тая тема посочвам линк за да си изтеглят 60 шаблона за сайт.

< 1 2 3 4 5 >

Коментар

за нас | за разработчици | за реклама | станете автори | in english  © 1998-2024   Experta Ltd.