СПОДЕЛИ

Дизајнирањето и развивањето на еден веб сајт не е лесна работа. Процесот вклучува различни чекори, кои треба да се постигнат со голема прецизност, па затоа се вели дека кога сакате да си обезбедите успешен продукт, најдобро е да побарате помош од експерт во индустријата.

Процесот на дизајнирање и развој на некој начин се зависни еден од друг. Дизајнерите креираат естетски распоред со јасен и впечатлив кориснички интерфејс, и за нив има многу корисни работни рамки, како на пример Adobe Photoshop. Потоа, овие Photoshop документи треба да се конвертираат во HTML датотеки, за програмерите да може да почнат со развој на страниците.

Во овој пост ќе ви ги откријам неопходните чекори за трансформирање на еден Photoshop документ во HTML датотека. Пред да започнеме би било добро да ја разбереме важноста на прилагодливиот дизајн.

Зошто треба да изберете прилагодлив HTML?

Со напредокот на мобилната технологија се појавуваат и многу напредни мобилни уреди. Сите тие ни се достапни на пазарот. Затоа, во оваа мобилна ера, ако имате веб сајт кој не е мобилен ќе изгубите многу од потенцијалните корисници.

Денес, многу корисници претпочитаат мобилни уреди со овозможен интернет како паметни (смарт) телефони и таблети, наспроти десктоп уреди, за да пристапат до содржините на интернет. Ова значително го зголеми мобилниот сообраќај на интернет, и тоа не може да го игнорираме. Затоа, вашата веб страница мора да е компатибилна со овие напредни платформи.

1Токму како резултат на сево ова, HTML мора да е оптимизиран за точно да се прикажува како на десктоп, така и на мобилни уреди. Изобилието на мобилните уреди дополнително го усложнува процесот. За да може дизајнерите да се справат со побарувањата на пазарот, потребно е да имаат стратегија која ќе им помогне ефикасно да одговорат на потребите на мобилниот веб, без притоа да го намалат квалитетот на услугата.

За среќа, експертите воведоа непроценлив пристап со прилагодлив дизајн кој им помага на веб страниците успешно да се прикажуваат на секаков уред. Прилагодливиот распоред ја оптимизира веб содржината, водејќи сметка за некои од атрибутите на уредот кој го цели. На пример, ја зема во предвид мобилната платформа, прелистувачот, резолуцијата на екранот, големината на екранот итн. и според тоа го креиера изгледот и чувството на веб страницата, со цел секој уред да може да пристапи до неа.

Се надевам дека причините кои ви ги наведов ви се доволни за да го изберете токму прилагодливиот веб дизајн.

Сега ни останува само да ги дешифрираме чекорите потребни за конвертирање на PSD во HTML.

Чекор 1: Предуслови

Пред да се задлабочиме во процесот на конвертирање, неопходно е да ги имаме следниве работи:

  • Photoshop документ (PSD) кој треба да се трансформира во HTML.
  • Од суштинска важност е да имате одлични познавања од HTML. Мора да сте стручни за да го испланирате HTML распоредот на најдобар начин. Доколку немате длабоки познавања во темата, мора да ја научите основната синтакса, таговите кои се поддржани и атрибутите.

2Чекор 2: Конфигурирање на структурата на складиштето

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

Чекор 3: Исечете ја сликата

Бидејќи не можете да вклучите комплетна PSD датотека директно во HTML датотека, мора истата да ја исечете на помали парчиња. Овде имате опција да изберете или JPEG формат или PNG-24 битен формат за да ги зачувате исечените слики. И двата формата имаат свои предности. JPEG обезбедува слики со мала големина и оптимизација на големина, додека пак, PNG-24 ви обезбедува неоспорлив квалитет на сликата. Изборот е сепак на вас.

3Чекор 4: Вметнување во кодот

За соодветно да ги вметнете исечените слики во HTML5 кодот, еве неколку совети кои треба да ги земете во предвид.

  • Соодветно поставете го логото на HTML5 страницата и направете да може да се кликнува на него за да ве однесе на веб страницата.
  • Обично за ова се избира почетната страница од еден сајт, меѓутоа вие може да изберете страница по избор. Ова може да се направи со употреба на тагот anchor.
  • Тагот за заглавје мора да е вклучен во тагот за тело.
  • Вклучете div таг заедно со Wrapper како негова вредност за класа во заглавјето.
  • За да ја додадете сликата, упoтребете таг за слика и дадете ја патеката до сликата во неговиот атрибут за извор.
  • За да креирате лента за навигација, имплементирајте го тагот за навигација. Во оваа лента за навигација може да креирате подредена и неподредена листа за да ги прикажете опциите во менито. Ова ќе го постигнете со употреба на соодветни тагови. Повторно употребете го тагот anchor за да ги поврзете опциите од менито со странициите на кои одговараат.

4Заклучок

Со ова едноставно, но информативно упатство лесно ќе можете да конвертирате PSD во HTML, па се надевам дека овој туторијал и навистина ќе ви помогне. Дополнително, на пазарот постојат и неколку неверојатно корисни алатки и работни рамки кои ќе ви дозволат да го постигнете процесот на конвертирање и ќе ви дадат квалитетни резултати.

Инспирирани?

Доколку сте заинтересирани за градење кариера во оваа област, погледнете ги студиските програми на Веб академијата Еверест.

Ти се допадна овој напис?
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.