Въведение в HTML и CSS за дизайнери

Въведение в HTML и CSS за дизайнери.

Като графичен дизайнер вероятно сте наясно с непрекъснато развиващата се връзка между дизайн и технология. Това важи особено за тези, които се занимават с уеб дизайн. В тази индустрия трябва да имаме основно разбиране за това как нашите внимателно изработени оформления се превръщат в живи уеб страници. Когато разберем основите на този процес (и неговите ограничения), можем точно да комуникираме с разработчиците и да създаваме уебсайтове с перфектни пиксел.

Това не означава, че трябва да знаете как да кодирате уебсайт отгоре надолу (въпреки че това би било страхотно!), това просто означава, че трябва да разберете основите. В тази публикация ще започнем с много основно въведение в HTML. Ще научите как да изрязвате уеб дизайни във Photoshop и да форматирате HTML с помощта на CSS. Въведение в HTML и CSS за дизайнери

Какво е HTML?

Почти всичко, което виждате, когато сърфирате в мрежата, е документ на език за маркиране на хипертекст (HTML). Хипер текст е текст, който препраща и препраща към друг текст на вашия екран, което ви позволява да получите достъп до съдържанието с просто щракване. Маркиращ език е набор от етикети, затворени в квадратни скоби <>. Тези HTML тагове обикновено идват по двойки:

<начален етикет> : Известен също като отварящ етикет.
: нарича се също затварящ таг и включва наклонена черта /

Когато поставите съдържание между тези два маркера, цялото нещо се извиква елемент :

Това е параграф

Когато този език бъде преведен в интернет, зрителите няма да виждат таговете – те ще виждат само съдържанието между тях.

HTML 5, текущата версия на HTML, съдържа около 100 етикета с атрибути, които променят тяхната функция или външен вид. Трябва да знаете само 30-40 от тези тагове, за да започнете да разбирате и създавате HTML. Разгледайте ги и забележете как са групирани по функция. Нека видим това в действие.

Изрязване на изображения във Photoshop.

Въведение в HTML и CSS за дизайнери

Преди да кодираме, трябва да решим кои секции от уебсайта трябва да включват изображения и кои могат да бъдат кодирани. Да се възползваме инструмент Photoshop Парче (скрит в подменю Инструмент за изрязване ) и подчертайте области като снимка на бурито и тако джоан .

Сега трябва да експортираме нашите фрагменти - изберете File > Save for Web (Alt + Shift + Ctrl + S). Когато е избран конкретен фрагмент, можете да зададете неговите опции за експортиране от дясната страна на прозореца (JPG, PNG и т.н.). Ако щракнете двукратно върху определен фрагмент, ще видите изскачащ прозорец " Параметри на фрагмента" - Това ви позволява да наименувате конкретни файлове с фрагменти.

По подразбиране всички изображения се поставят в: /images/ поддиректория. Ако искате да експортирате само създадените от вас фрагменти, изберете " Всички персонализирани фрагменти" в прозореца "Запазване". Въведение в HTML и CSS за дизайнери

Създаване на основен HTML документ

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

Ред 1 : Декларира, че диалектът HTML 5 е езикът на документа.

Ред 2 : елемент представлява корена на HTML документ. Това е задължителен контейнер, който обозначава границите на нашия документ.

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

Ред 4 : Това е декларацията за кодиране на документа − UTF-8 - безопасен избор - можете да прочетете повече за HTML кодирането на знаци тук .

Ред 5 : Примерна страница Това е заглавието на страницата, което се появява в заглавната лента на браузъра.

6 : затваря етикета от ред 3.

Ред 7 : Този елемент на тялото ще съдържа цялото видимо съдържание на страницата.

Ред 8 : затваря етикета от ред 2. Този елемент маркира края на документа. Въведение в HTML и CSS за дизайнери

Има и други възможни начини за кодиране на същия дизайн. Ще използваме HTML 5 семантични тагове (header, nav, article, footer), за да създадем основната структура на документа:

Това е оформлението, преведено в 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 (за цвят на фона), 16px (за размер на шрифта) и т.н.

Там много CSS свойства, които могат да бъдат зададени за всеки HTML елемент, но не е необходимо да ги пишете сами. Можете да разчитате на настройките по подразбиране на вашия браузър или да използвате основен стилов лист, който нулира браузъра ви до разумни настройки. Всъщност, за да пишете селектори да го направите сами изисква много знания и опит.

Нека разгледаме някои CSS правила, необходими за форматиране на нашия прост дизайн.

CSS свойства за позициониране : съществува 4 различни метода (статични, фиксирани, относителни и абсолютни), които ни позволяват да позиционираме определени елементи в нашия дизайн. След като зададете един от тези методи, можете да позиционирате елементи, като използвате свойствата отгоре, отдясно, отдолу и отляво - те ще работят по различен начин в зависимост от това кой от 4-те метода използвате. В този случай бихме искали да позиционираме plate_image, използване абсолютен позициониране.

CSS модел на кутия : този модел е рамка, която обхваща всички HTML елементи, включително полета, рамки, подложки и съдържание. Полето е невидимата област около границата и подложката между границата и съдържанието.

Ако НАИСТИНА искате да научите повече за кодирането, погледни към този готин сайт: Codecademy .