Подготовка

Фотошоп FastWeb Курсът показва как да използваме Photoshop, за да създаваме скоростно качествен уеб дизайн и как да обработваме изображения с Photoshop според целите ни.

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
В този урок ще си приготвим за работа с html.
 Първо отидете във вашия браузър.
 Потърсете в Google.
 Потърсете Notepad ++.
 Kогато отидете на главната страница ще може да си я свалите от този бутон.
 Notepad ++ е безплатен едитор за различни типове файлове ключително html.
 Сваляте го от тук и след това го инсталирате.
 Сега ще стартирам едитора.
 Той прилича на notepad, но има допълнителни функции.
 Те ще ни помогнат за да виждаме html по-добре.
 Ще създам html файл.
 Избирам Save as.
 Tук ще избера Hyper Text markup language files - html.
 Файла ще наименовам като "Тест".
 Ще видите че тук, когато пиша HTML, имам опцията syntax highlighting, което значи оцветяване на синтаксиса.
 ID стана червено.
 Елементите са сини.
 Този syntax highlighting ще ви помогне за разбирането на HTML.
 Същото нещо в нормален notepad би изглеждало така.
 Доста по-неразбираемо е, когато обработваме големи файлове.
 Това което виждаме в папката е текстовия файл, който направих.
 Това е html файла.
 Когато се опитвам да преименувам файла използвайки F2, например на test2.
html.
 Tой отново ще бъде текстов файл.
 Нека да покажа иконките в по-голям размер.
 Това означава, че файлът е html и може да се отвори с браузър.
 Този пък е обозначен като текстов файл, когато натисна два пъти ще се отвори е текстов едитор.
 За да променим разширението на този файл, ние трябва да променим една опция в Windows.
 Тази опция в Windows 7 е тук.
 Control Panel.
 Appearance and Personalization.
 Folder options.
 Тук избирам View раздела.
 Hide extensions for known file types, което значи да скрива разширенията на файловете които познава.
 Попринцип Windows познава всички файлове, така че ще ги скрие навсякъде и никой няма да може да им променим разширението, затова махаме тази отметка.
 Прилагаме промените с Apply и приемаме с OK.
 Сега вижте какво се е получило.
 Вече ни се показват разширенията на файловете.
 Test.
html и test2.
html.
txt Избирам F2 за преименуване.
 Ще изтрия .
txt.
 Windows ме пита дали съм сигурен.
 Избирам ОК.
 Вече и двата файла са html.
 Как може и на Windows XP да промените folder options.
 Tова става от тук, когато сте в Explorer, избирате Tools След това Folder Options, следва да ви излезне същия прозорец премахваме този checkbox и избирам OK.
 Препоръчвам ви да си свалите Google Chrome.
 Tова може да направите пак чрез Google.
 Google Chrome e много лek браузър и много бърз.
 И е много по-качествен от другите браузъри, когато става въпрос за разработка и разглеждане на html.
 В тези уроци аз също ще работя с Google Chrome и ще ти показвам неща от него, които могат да ни помогнат.
 Как да отворим този файл, който направихме? Ще изтрия втория.
 Мога да го направя по този начин.
 Десен бутон open with Google Chrome.
 След което ще го отворя за разработка.
 Еdit with notepad.
 Да напишем нещо.
 Избирам Ctrl + S за да запазя файла.
 Всеки път, когато променям файла ще трябва да го запиша, след което да отворя този прозорец и да натисна F5 за refresh.
 Избирам Ctrl + S.
 Виждате тук нищо не се е променило.
 Първо идвам тук натискам F5 и промяната се показва.
 Ще разположа прозорците така, че да се вижда какво става.
 В момента това би трябвало да е html, следователно, когато напишете нещо тук, изтривам ненужните ми елементи, Този текст трябва да е удебелен.
 Записвам normal bold.
 Ще се приближа посредством задържане на Ctrl и скролиране с мишката.
 Другата програма, която ще е хубаво да имате, Аз ще я използвам тук, защото улеснява процеса на създаване на CSS около 100 пъти.
 Програмата е тази.
 Отварям Google, Изписвам stylizer.
 Това е програмата Stylizer.
 Препоръката ми е да свалите безплатната версия, с която ще може да изпробвате програмата.
 С нея ще разберете CSS по-добре.
 Както виждате тук във интро видеото е показано.
 С тази програма по-лесно може да променяте стила на една страница.
 Също може да постигнете когато го пишете ръчно, но с тази програма става много по-лесно.
 Това е нужната подготовка за работа с HTML, в рамките на този модул.

 

За по-лесна работа в следващите уроци може да инсталирате notepad ++ и stylizer

 

Въпроси и отговори

  • Защо е толкова слаба резолюцията?

    Venko Stoev:

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

    Venko Stoev:

    Дори когато дам пауза има някакъв delay и видеото се спира с около секунда закъснение....? :(

    Веселин Аула:

    Здравей, нищо не сме променяли във видео системата, все същата си е. При мен след пауза спира веднага видеото. Резолюцията ми е добра, full HD е и има съвсем малко компресия. Погледни какво си инсталирал (в add/remove programs) последните дни и какво се е променило в компютъра ти.

    Ана Йорданова:

    Можете ли да ми кажете коя е най-добрата алтернатива на notepad++ за mac?

    Pavlina Petrova:

    Здравейте, имам проблем с кирилицата.Като да на преглед в браузъра ми излиза на маймуни..Някаква идея как да го оправя?

    Златин Христов:

    @Ана Йорданова може да ползваш Sublime, има го и за Mac, като дори е в повече от notepad++

    Златин Христов:

    @Pavlina Petrova сложи в <head> секцията <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> или в менютата на notepad++ избери Кодировки ->  Кодирай в UTF-8 без BOM и трябва също да помогне.

  • Защо когато се опитвам да сваля/инсталирам Stylizer антивирусната програма го спира и казва че има вирус

    Кремена Коева:

    Свалих ог от официалния сайт - stylizerapp.com пренасочва към skybound.ca :(

    Мария Балева:

    Здравей, понякога настройките на антивирусната система разпознават, някои приложения и програми, като вируси, дори да са напълно проверени и да са свалени от достоверни източници. Може да промениш настройките на антивирусната система и да сложиш програмата в разрешения списък за инсталиране или да я изключиш временно, доката инсталираш програмата.

  • Какво се случва...?

    Марио Спасов:

    Свалих си Stylizer 7 с предупреждението, че мога да го ползвам тестово само 14 дни, а след това трябва да си купя версията. Искам да попитам какво точно се случава след тези 14 дни? Благодаря!

    Веселин:

    Когато аз имах пробна версия (след това си я купих и може да са сменили начина на работа) след като изтече започва да ти спира през няколко минути. Трябва да изчакаш 60сек и можеш да продължиш. Използвай 14-те дни за да научиш CSS и да видиш визуално какво правят промените, след това можеш и без Stylizer.

Напред