Вовед во HTML и CSS за дизајнери

Вовед во HTML и CSS за дизајнери.

Како графички дизајнер, веројатно сте свесни за постојано развивање на врската помеѓу дизајнот и технологијата. Ова е особено точно за оние кои се занимаваат со веб дизајн. Во оваа индустрија, треба да имаме основно разбирање за тоа како нашите внимателно изработени распореди стануваат живи веб-страници. Кога ќе ги разбереме основите на овој процес (и неговите ограничувања), можеме прецизно да комуницираме со програмерите и да создаваме веб-страници со совршени пиксел.

Ова не значи дека треба да знаете како да кодирате веб-локација од горе до долу (иако тоа би било одлично!), тоа само значи дека треба да ги разберете основите. Во овој пост, ќе започнеме со многу основен вовед во HTML. Ќе научите како да исечете веб дизајни во Photoshop и да форматирате HTML користејќи CSS. Вовед во HTML и CSS за дизајнери

Што е HTML?

Речиси сè што гледате кога пребарувате на интернет е документ за јазик за означување на хипертекст (HTML). Хипертекст е текст кој упатува и упатува на друг текст на вашиот екран, овозможувајќи ви да пристапите до содржината со едноставен клик. Јазик за означување е збир на ознаки затворени во квадратни загради <>. Овие HTML тагови обично доаѓаат во парови:

<ознака за почеток> : Исто така познат како ознака за отворање.
: наречена и ознака за затворање и вклучува коса црта нанапред /

Кога ќе ставите содржина помеѓу овие две ознаки, целата работа се нарекува елемент :

Ова е параграф

Кога овој јазик е преведен на Интернет, гледачите нема да ги видат ознаките - тие ќе ја видат само содржината помеѓу нив.

HTML 5, тековната верзија на HTML, содржи околу 100 ознаки со атрибути кои ја менуваат нивната функција или изглед. Треба да знаете само 30-40 од овие ознаки за да започнете да разбирате и креирате HTML. Погледнете ги и забележи како се групирани по функција. Ајде да го видиме ова на дело.

Сечење слики во Photoshop.

Вовед во HTML и CSS за дизајнери

Пред кодирањето, треба да одлучиме кои делови од веб-страницата треба да вклучуваат слики и кои може да се кодираат. Ајде да ги искористиме алатка Фотошоп Парче (скриен под подменито Алатка за сечење ) и означете области како што се фотографија на бурито и тако Џоан .

Сега треба да ги извеземе нашите фрагменти - изберете Датотека > Зачувај за веб (Alt + Shift + Ctrl + S). Кога ќе се избере одреден фрагмент, можете да ги поставите неговите опции за извоз на десната страна од прозорецот (JPG, PNG, итн.). Ако кликнете двапати на одреден фрагмент, ќе видите скокачки прозорец " Параметри на фрагмент" - Ова ви овозможува да именувате одредени датотеки со фрагменти.

Стандардно, сите слики се сместени во: /images/ поддиректориум. Ако сакате да ги извезувате само фрагментите што ги креирате, изберете „ Сите сопствени фрагменти" во прозорецот „Зачувај“. Вовед во HTML и CSS за дизајнери

Креирање на основен HTML документ

Имаме нашите сечачи, ајде да создадеме основен HTML документ. Вовед во HTML и CSS за дизајнери

Линија 1 : Изјавува дека дијалектот HTML 5 е јазикот на документот.

Линија 2 : елемент го претставува коренот на HTML документ. Ова е задолжителен контејнер што ги означува границите на нашиот документ.

3 : поглавје содржи невидливи елементи на страницата како мета информации, наслов итн.

Линија 4 : Ова е декларацијата за кодирање на документот − утф-8 - безбеден избор - можете да прочитате повеќе за HTML кодирање на знаци тука .

Линија 5 : Примерок страница Ова е насловот на страницата што се појавува во насловната лента на прелистувачот.

6 : ја затвора ознаката од редот 3.

Линија 7 : Овој елемент на телото ќе ја содржи целата видлива содржина на страницата.

Линија 8 : ја затвора ознаката од линијата 2. Овој елемент го означува крајот на документот. Вовед во HTML и CSS за дизајнери

Постојат и други можни начини за кодирање на истиот дизајн. Ќе користиме HTML 5 семантички ознаки (заглавие, навиг, статија, подножје) за да ја создадеме основната структура на документот:

Ова е распоредот преведен во HTML:

Неколку забелешки:

Редовите 11 и 12 : Елементите се суштината на Интернетот како што се користат за креирање хиперврски . Тие се врзани за атрибутот HREF и мора да ја поврзат целта URL .

Редови 18-20 : Ова се некои ознаки за форматирање на текст: означува наслов од прво ниво; означува став; значи прекин на линијата.

Форматирање со каскадни листови со стилови (CSS).

Вовед во HTML и CSS за дизајнери

Кога ќе ја отворите само датотеката HTML во веб-прелистувач, ќе видите дека таа не е форматирана како нашиот претходен дизајн. Тоа е затоа што HTML-кодот не е доволен - треба да го форматираме со Каскадни листови со стилови (CSS) . CSS е јазик на стилски лист кој се користи за форматирање на HTML елементи.

Но, зошто точно ни треба да комбинираме HTML со CCS? Пред некое време, форматирањето беше постигнато со додавање атрибути на HTML тагови. Сепак, ова резултираше со нечитлив и неодржлив код. Решението беше да се оддели содржината на документот (HTML) од форматирањето на документите (CSS).

Ајде да расчистиме едноставно CSS правило : .

Избирач : Ова е HTML елементот што сакате да го стилизирате. На пример: <член>

Реклама : Правилото на CSS може да има една или повеќе декларации. Секоја декларација се состои од својство и вредност и е одвоена со точка-запирка. Ставате декларации во кадрави загради {}. Вовед во HTML и CSS за дизајнери

Сопственост : ова е стилска карактеристика, што сакате да го промените. На пример: боја на позадина, големина фонт итн

Вредност : Секое својство има вредност поврзана со неа. На пример: #ffcc11 (за боја на позадина), 16 px (за големина на фонтот) итн.

Постои многу CSS својства, кој може да се постави за секој HTML елемент, но нема потреба да ги пишувате сите сами. Може да се потпрете на стандардните поставки на вашиот прелистувач или да користите основен стилски лист што го ресетира вашиот прелистувач на разумни поставки. Всушност, да пишуваат селектори да го направите тоа сами бара многу знаење и искуство.

Ајде да погледнеме неколку правила на CSS потребни за форматирање на нашиот едноставен дизајн.

Својства за позиционирање на CSS : постои 4 различни методи (статички, фиксни, релативни и апсолутни) кои ни овозможуваат да поставиме одредени елементи во нашиот дизајн. Откако ќе поставите еден од овие методи, можете да поставите елементи користејќи ги својствата на горните, десните, долните и левите - тие ќе работат поинаку во зависност од тоа кој од 4-те методи го користите. Во овој случај би сакале да поставиме позиција плоча_слика, користејќи апсолутна позиционирање.

Модел на CSS Box : овој модел е рамка која ги опфаќа сите HTML елементи, вклучувајќи ги маргините, границите, подлогата и содржината. Маргината е невидливата област околу границата и поставата помеѓу границата и содржината.

Ако навистина сакате да дознаете повеќе за кодирањето, Погледни на оваа кул страница: Codecademy .