Най-трудният аспект на съдържание Nettuts сайт + е адаптивна към различни нива на знанието на потребителя. Ако публикуваме твърде много уроци за напреднали, начинаещите потребители няма да го харесат. Обратното е вярно. Правим всичко, което зависи от нас, обаче, никога не се колебайте да ви напомня, ако чувствате, че те забравят за вас. Този сайт е на първо място, за да изразят мнението си! Като по-горе под внимание, урок днес ще бъде посветена специално на тези, които са просто се налива в уеб програмирането. Ако имате само една година или по-малко на опит, ние се надяваме, че някои от съветите, изброени тук ще ви помогне да станете по-добър и по-бързо!
Ново в категорията:
Така че нека да разгледаме незабавно от 30 основни правила, които да се следват при създаването на страници.
1: Винаги затваряйте таговете
Когато нещо не е необичайно и тези връзки:
Имайте предвид, че UL / OL черупка маркер се пропуска. В допълнение, много от тях предпочитат да не се затвори етикет LI. По днешните стандарти това е просто недобросъвестна практика и трябва да се избягва при 100%. Винаги, винаги затваряйте си маркери. В противен случай, при проблеми валидиране ще се появят на всяка крачка.
Как да се справим по-добре
2: Настройте правилния DOCTYPE
Когато бях по-млад, аз понякога седна на CSS форуми. И винаги, когато даден потребител има въпрос, преди да ни питате, той трябваше да направи две неща първо:
Потвърждаване на валидността на CSS файла. Fix всички грешки. Добавяне на документ от тип
"Сложете преди отваряне маркер DOCTYPE HTML в горната част на страницата, и казва на браузъра, който съдържа страницата. - HTML, XHTML, или и двете, така че да може да показва правилно оформление"
Най използва четири различни типа на документа при създаването на нови обекти.
Сега има разгорещен дебат по отношение на правилния избор в тази ситуация. Отначало се е смятало, че най-добрият вариант е да се използват версии на XHTML Strict. Въпреки това, след като някои изследвания, стана ясно, че повечето браузъри ще се върнат към нормалното HTML в обработката на тези страници. Поради тази причина, много хора избират да използват HTML 4.01 Strict вместо. По същество всички тези опции ще ви даде контрол. Изследване на околната среда и да изберат свой собствен вариант
3: Никога не използвайте включените стилове
Понякога, когато може да е трудно да се разработи оформление, може да искате да се вземат по лесния път и вкарайте малко стил
Разбира се - тя изглежда напълно безвредни. Все пак, това води до вашите кодове за грешка.
Това като напречните греди на ловците на духове. Това е просто лоша идея. Крис Koyer (Chris Coyier) (за което той не е включен.)
Вместо това, завърши шаблона, а след това даде линк към този етикет P във външен CSS файл.
Как да се справим по-добре
4: Сложете всички външни CSS файлове в главата тагове
Технически, можете да сложите листа стил навсякъде. Въпреки това, HTML спецификация препоръчва поставянето им в главата маркер на документа. Най-важното предимство на това е, че вашите страници ще се зареждат по-бързо.
При проверката на proizoditelnost в Yahoo. открихме, че се движи стилове на заглавната част на документа прави страниците се зареждат по-бързо. Това е така, защото стилови на стаите в главата дава възможност да се зареди страницата постепенно. - YSlow Екип
Ако единствената цел на вашия JS файл е да се добави функционалност страница - например, след натискане на бутон - можете спокойно да постави тези файлове в долната част на страницата, точно преди тялото на затваряне маркер. Това е най-добрият вариант.
Как да се справим по-добре
Друга често срещана практика в миналото е да се постави отбора директно на таговете JS. Той често се използва за прости галерии с изображения. По същество, етикет просто присвоил атрибут "OnClick". Значението му е равна на всяка процедура, JS. Излишно е да казвам, че това никога не трябва да бъде направено. Вместо това, включете кода в външен JS файл и да използвате "addEventListener / attachEvent" да "слуша" желаното събитие. Или, когато се използва такава рамка като JQuery, просто използвайте метода "клик".
7: Винаги проверявайте за валидност
Аз наскоро написа в блога си за това как въпросът за валидиране е напълно неразбрани от тези, които не разбират напълно предназначението си. Както споменах в тази статия, "валидиране трябва да работи за вас, а не срещу него."
Въпреки това, особено в началото, аз силно препоръчвам ви да изтеглите Web Developer Toolbar и постоянно да използвате елементите "Проверка на HTML" (проверка на HTML код) и "Проверка на CSS". Въпреки, че CSS и доста лесно да научат езика, тя може да ви накара да се откъсне си косата. Също така, често ще се уверите, че това е вашият лошо качество маркиране доведе до странни пространства на страницата. Ето защо, чек, проверете и проверете отново.
8: Изтеглете Firebug
9: Използване Firebug!
От моя опит, повечето хора използват Firebug само 20% от капацитета си. Наистина вие сте сами правим лоша услуга. Прекарайте няколко часа и за мрежата изглежда, всички достоен материал по темата.
10: Всички маркери трябва да са малки букви
Технически, можете да направите таговете с главна буква.
От друга страна, не го правете. Това е безпредметно и боли очите - да не говорим за факта, че тя ми напомня на функциите HTML Microsoft Word!
Как да се справим по-добре
11: Използвайте H1 тагове - H6
Аз трябва да кажа, че това е нещо, което често се забравя. Най-добре е да се използват всички шест от тези маркери. За да бъда честен, аз обикновено използвам първите четири, но аз съм на работа по него. За подобряване на семантично и SEO сайта сила себе си да замени P маркер при всеки подходящ H.
12: Когато създадете блог, магазини H1 хедър
Попитах нашите последователи, ако считат, че е подходящо да се използва H1 за лого, или да го използвате за титлата. Около 80% от туитовете са били върнати в полза на последния вариант.
Както при всичко останало, се определи какво е най-подходящ за вашия сайт. Въпреки това, когато създадете блог, бих препоръчал, че положих си H1 маркер за заглавието на статията. От съображения за SEO е, по мое мнение, най-добрият вариант.
13: Изтеглете YSlow
Особено през последните години, Yahoo екип е направил наистина страхотна работа в нашата област. Не толкова отдавна те пусна допълнение към Firefox, наречен YSlow. Включете го и той ще анализира интернет страницата и да даде "доклад карта", която опише подробно областите на сайта, който трябва да бъдат подобрени. Може би това е малко по-трудно, и все пак в полза. Аз силно препоръчвам тази добавка
14: лентата за навигация е затворено при неподредените списъци
Всеки уебсайт съдържа поне някакво подобие на менюто за навигация. Може би трябва да го организира, както следва:
Аз не бих препоръчал използването на този метод на семантичните съображения. Вашата задача е да се създаде най-добрата код, към който сте способни.
Защо да изготви списък на връзки за навигация, отколкото всеки друг с изключение на неподреден списък?
Предполага се, че маркерът UL съдържа списък с предмети.
Как да се справим по-добре
15: Научете се да се стремим към IE
Рано или късно пак ще прокълне IE. Тя обикновено е необходим елемент в нашата общност. Когато прочетох за Twitter, като един от моите приятели, борещи се сили с IE, аз просто се усмихвам и си мисля: ". Знам как се чувстваш, приятелю"
Първата стъпка, след като сте създали своя основна CSS файл е да се създаде отделен файл ie.css. След това можете да го изпратите само т.е. използвайки следния код.
Този код означава, че "на браузъра на потребителя е Internet Explorer 6 или по-ниска, използвайте този стил лист, в противен случай, не направи нищо." Ако искате да замените и IE7, просто замени "LT" на "LTE" (по-малко или равно на)
17: Когато един сайт е готов, стиснете го!
CSS компресия услуги
18: Намаляване, намаляване, намаляване
Поглеждайки назад към първата си уеб сайт, мисля, че е претърпял форма на движение "divatita". На първо място, си естествен инстинкт е да приключи всеки параграф в DIV. и след това да го включите отново в един DIV, за всеки случай. Ще бързо осъзнават, че това е изключително неефективна.
След завършване на модела премине очите му няколко пъти, както и начини за намаляване на броя на елементи на страницата изглежда. Не забравяйте да поставите UL в собствената си Разделение. Мисля, че не е задължително.
Както и ключа с буквата "рязане, рязане, рязане" - е вярно за шаблони.
19: Всички снимки изискват собствените си качества Alt
Лесно е да се подценява значението на ALT атрибут в маркера за изображение. Независимо от това, те са много важни, за по-голямо удобство и проверка за валидността. Затова отделете малко време, за да попълните таговете.
Как да се справим по-добре
20: Проучване до последно
Силно се съмнявам, че аз съм единственият, който, в някакъв момент от научавам нещо, огледа и разбра, че седях в тъмна стая и час някъде рано сутринта. Ако се окажете в подобна ситуация, отидете да се отпуснете и бъдете сигурни, че сте избрали правилния път
Тези невероятни моменти от откриването, поне за мен, винаги идват късно през нощта. Същото беше и когато за първи път разбрах принципа на скобите в JavaScrip. Това е много приятно усещане, че трябва да опитате, ако не сте изпитали.
Какъв по-добър начин да научите HTML, но за да копирате вашите герои? Като имаме голям всички plagiatchiki! Вече след това бавно започваме да разработят свои собствени начини и методи. Затова гледай на местата на тези, които те уважават. Как да те изпълняват определена част? Научете и да им подражава. Ние всички се, направете си. (Не крадат дизайна, просто се учат от самия код)
22: ВСИЧКИ стилизирани елементи
Това е много важно правило, особено когато работите на клиента. Само защото не използва текстов блок елемент, това не означава, че той не се нуждае от клиента си. Да не се използва подредени списъци? Това не означава, че вашият клиент също няма да бъде. Направи си услуга и да се създаде специална страница, за да покажете вашите стилове за всеки елемент: ул. ол. стр. h1-h6. Блоковото. и т.н.
23: Използване на Twitter
Първоначално основната идея на Twitter е да се напише "това, което правите." Въпреки факта, че сега остава така в някои отношения, Twitter е станал по-голяма мрежа инструмент в нашата индустрия. Ако уеб разработчик уважаван ме в течение линк към една статия, че е намерил интересен, повярвайте ми, аз го прочетох, също - и ти трябва! Това е причината, че сайтове като Digg стават все повече и повече досадно.
24: Научете Photoshop
В действителност, Photoshop е доста вероятно да се превърне най-важната си инструмент. След като сте се научили HTML и CSS, бих ви препоръчваме да учат максималния брой Photoshop техники
25: Проучване всеки HTML тагове
Има десетки HTML тагове, които няма да срещнете в работата си. Все пак, това не означава, че не ги знаете! запознат с маркер съкр пример ли сте? А какво да кажем за цитирам? Това са две етикет заслужават мястото си в полето си на инструменти. Научете ги всички!
Между другото, ако все още не са запознати с тези две ключови думи:
съкр прави точно това от него и чакаше. Той е съкращение. "Бул" могат да бъдат увити в маркера за съкр тъй като това съкращение дума "булевард".
Сайтове като ни значително да допринесат за по-нататъшен растеж на знания в областта на уеб дизайна, вие също трябва да! Най-накрая разбра как правилно да се поставят елементите на страницата? Създаване на блог пост и учат другите как да го направя. Винаги ще има хора, които живеят по-малко от твоята. Не само ще участват в общността, но и те се учат. Никога не съм забелязал, че нещо наистина не мога да разбера, докато не сте принудени да го научи?
27: Използване на CSS Reset
Тук е друг въпрос, на който горещо дебат. Reset CSS: да се използва или не се използва, това е въпросът. Ако попитате моята лична консултация, бих 100% препоръчвам ви да създадете свой собствен сметище файл. Можете да започнете с мишката някои популярни файлове, като например файл Ерик Майер, а след това бавно, тъй като може да се научи да започне да го превърне в свой собствен. Ако не го направите, вие наистина не разбирам защо елементите на списъците си получат допълнително уплътнение, което не сте се посочи всяко място във вашия CSS файл. Съжали нервите си и просто да го изхвърли! Тук трябва да се започне.
28: Изравнете всички!
29: Демонтирайте СДП
Така че, вече имате солидни познания по HTML, CSS и Photoshop. Следващата стъпка е да се превърне вашата първа PSD файл в работещ сайт. Не се притеснявайте, това не е толкова трудно, колкото изглежда. По-добър начин да се прилагат знанията си на практика, само си представете.
30: Да не се използва freymvorki..Poka
CSS Freymvorki предназначена за напреднали програмисти, които искат да спестят време. Те не са за начинаещи.
Моля, оценете тази статия:
Свързани статии