Урок №6 Работа с параграфи - 3 October 2014

Home » » Урок №6 Работа с параграфи

0:56 AM Урок №6 Работа с параграфи
Този урок е разделен на следните части: Структура на параграф Съдържание на параграф Стилизиране на параграф Упражнение Практически съвети Структура на параграф За да добавим параграф в нашата уеб страница е нужно да използваме HTML елемента <p>. Този елемент е блоков, което значи че ширината му ще бъде равна на ширината на родителския елемент. Повече информация за блоковите елементи можете да откриете в урока Разлики между block и inline елементи. Друга важна характеристика е, че този елемент идва под формата на двойка отварящ и затварящ таг. Отварящия таг (<p>) маркира началото на параграфа, докато затварящия (</p>) маркира края. Всичко, което се намира между тези два тага се счита за съдържание на параграфа. Виж следващата снимка: Съдържание на параграф Както вече знаем параграфа е блоков елемент, което означава че не може да съдържа други блокови елементи. От друга страна, освен текст, параграфа може да съдържа инлайн (inline) елементи. Най-често използваните инлайн елементи като част от параграф са: <img /> - изображение; <a> - линк; <strong> - удебеляване на дума или изречение; <em> - курсив (наклонен) шрифт за наблягане върху дума или изречение; <br /> - изкуствено добавяне на нов ред Стилизиране на параграф В повечето случаи параграфите, които създаваме (било то с текст, изображения, линкове и т.н.) трябва да се вписват в цялостния дизайн на сайта. За да променим стила им можем да използваме различни похвати като например използване на <strong> винаги, когато искаме част от текста да бъде удебелен. Тази практика се използва, за да насочим вниманието на читателя върху ключова дума или израз от текста. С помоща на CSS можем да променим други характеристики, които да улеснят посетителя в по-бързото и лесно възприемане на информацията. Това може да включва промяна на размера на текста, шрифта, разстоянието между думите и редовете, цвят на текста, достатъчно добър контраст с фона, дължина на реда и други. Много е важно да подходим към всички тези параметри с необходимото внимание и да ги приложим по най-добрия за посетителите ни начин. Ако посетителите на нашия сайт са предимно възрастни хора е необходимо да увеличим размера на текста, защото зрението им не е толкова силно. Също така, достатъчното разстояние между редовете позволява на текста да “диша”, което ни улеснява в намирането на желаната информация. Както виждаш ролята на уеб дизайнера вече не е просто да създава уеб страници, а да предостави изживяване, което е съобразено с характеристиките на посетителя. В следващия пример ще разгледаме няколко техники, които са наистина лесни за прилагане, но променят значително начина на възприемане на информацията. Упражнение Тук ще се фокусираме върху работата на параграфа и начините, чрез които можем да подобрим визуалното му представяне. Няма да навлизам в детайли за всяко CSS свойство, което ще използвам. Всички тях ще ги разгледаме в уроците по CSS. Стъпка 1 Първо трябва да имаме текст, с който да работим. Избрах да използвам част от разказа на Йордан Йовков “Песента на колелетата“. Нека вземем само първите два абзаца. Не е нужно да използваме целия разказ, защото принципа на работа е общо взето един и същ. Добра идея е преди да започнем с дадена задачка да си изградим план на действие, към който да се придържаме. Моя план е следния: В началото на нашата страница ще сложа h1 заглавие, което ще съдържа името на произведението. След това ще добавя h4 заглавие с името на автора. Веднага след него ще използвам параграф, в който ще поставя средно по размер изображение. След изображението ще създам два нови параграфа, в които ще поставя двата текстови абзаца. Накрая ще завърша с нов параграф, който ще съдържа линк към цялото произведение. Представено визуално това ще изглежда така: Стъпка 2 Плана и структурата на страницата изглеждат наистина добре. Преобразувано в HTML това ще изглежда по следния начин: Забележка : За да не удължавам излишно кода, а и самата страница, няма да използвам пълния текст, а само няколко думи от началото и края на всеки абзац. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PC-Tools Guides - Работа с параграфи</title> </head> <body> <h1>Песента на колелетата</h1> <h4>Автор: Йордан Йовков</h4> <p><img src="cart-wheel.jpg" alt="Колело от каруца" /></p> <p>Славата на Сали Яшар, ... нагорещено желязо или само с няколко думи връщат живота на много умиращи.</p> <p>Сали Яшар наистина имаше нещо, което го оприличаваше на тия хора. ... но имаше вид на мъдрец и неволно вдъхваше уважение дори и на ония, които не го познаваха и нищо не знаеха за изкуството на ръката му.</p> <p><a href="" title="">Прочети целия разказ</a></p> </body> </html> В първия параграф имаме снимка. Това е напълно разрешено, защото <img> елемента е инлайн, а по-нагоре научи, че блоковите елементи (какъвто е <p>) може да съдържа инлайн елементи. В урока Работа с изображения - <img /> подробно описах начините на работа с изображения и задължителните атрибути, които трябва да използваме. Няма да се спирам отново върху това. Ако нещо не ви е ясно и се затруднявате, по-добре първо прегледайте този урок. Следващите два параграфа са изцяло текстови. С тях ще работим след малко. Четвъртият параграф съдържа линк. Все още няма добавен урок описващ работата на линковете, но ще се постарая да го кача в най-скоро време. Въпреки това, фокуса на този урок е върху работата на параграфите, затова няма да се спирам върху линка. Единственото, което трябва да знаеш за сега е, че линковете (елемента <a>) са инлайн елементи, затова без проблем могат да бъдат част от параграф. Стъпка 3 Нека запазим html документа, който създадохме и видим резултата в браузър. Дори без да добавяме стил от наша страна, резултата изглежда приемливо. Виждаме, че браузъра показва всеки елемент с определен стил. Например, браузъра добавя разстояние преди и след h1 заглавието, преди и след h4, преди и след параграфа и т.н. Забележка : Винаги, когато не добавим наш CSS стил върху конкретен елемент или страницата, браузъра използва стила зададен му по подразбиране. Проблема тук е, че страницата е направена без да се взема в предвид посетителя т.е. информацията е тук, но посетителя сам трябва да се адаптира към страницата. Параграфа е блоков елемент затова заема ширината на родителския елемент (в случая това е самата страница). Ако искаме да намалим дължината на редовете, трябва да променим размера на прозореца, което изисква допълнителни усилия. Това е типичен пример, в който дизайнера може би си мисли “Ок, текста е тук, страницата изглежда горе-долу добре, който иска да прочете разказа, ще намери начин, дори и да му е малко трудничко.” Представете си сега, че това е единственото място в Интернет, в което можеш да намериш така интересния разказ на Йордан Йовков “Песента на колелетата”. Нужно ли е да се затрудняват толкова много хора, когато няколко допълнителни и лесни за прилагане техники, могат значително да подобрят престоя им? Съвсем не. Това според мен (а и много други) е разликата между добрия и лошия дизайнер. Добрия дизайнер се грижи за посетителите на своята страница като прави престоя им лесен и запомнящ се, докато лошия дизайнер не се интересува от хората, които ще използват неговия сайт и прави престоя им труден и мъчителен. Ок, обратно към упражнението. Стъпка 4 Как можем да подобрим страницата по-горе? Първо, нека намалим дължината на редовете. За тази цел ще приложим CSS стил чрез външен файл. В урока Прилагане на CSS чрез външен файл подробно описах как става това. Всичко, което трябва да направите е да създадете нов файл и да го запазите с разширение “.css”, след което чрез елемента <link /> поставен в <head> раздела на html документа можеш да го приложиш към страницата. Отвори новосъздадения CSS файл и въведи следния стил: body { font-family:Verdana; margin:0px auto; width:550px; } Запазете промените и вижте резултата. Наистина изглежда много по-добре. При това само с 5 реда код. Няма да навлизам в детайлно описание на CSS свойствата, защото ще напиша специален урок за всяко от тях. Като селектор тук използвам елемента body, който отговяра за цялата страница. Използвайки свойството font-family успяхме да променим шрифта на Verdana. Декларацията margin: 0px auto; е една от най-често срещаните техники за центриране на елемент. Чрез свойството width променихме размера на страницата на 550px. Всичко това ни дава една страница, която е 550 пиксела широка и е центрирана в браузъра. Какво още можем да променим? Стъпка 5 Текста в параграфите изглежда голям и освен това разстоянието между редовете е много малко, което го прави труден за четене. Това също може да се промени много лесно. Веднага след CSS кода, който имаме до сега, добави следното: ... p { font-size:14px; line-height:21px; } Тук за селектор използваме елемента <p>. Тъй като няма никакви ограничения, стила ще бъде приложен върху всички <p> елементи намиращи се в страницата. Свойството font-size ни позволява да променим размера на текста. Използвал съм 14px, което е една добра стойност. Второто свойство (line-height) е интересно и трябва да му обърнем внимание. То ни позволява да променим разстоянието между редовете. Общоприет стандарт е разстоянието между редовете да бъде 1.5 пъти по-голямо от размера на шрифта. Това придава на текста вид, който е лесен за четене и не натоварва окото. Разбира се има изключения в зависимост от избрания шрифт и т.н., но най-често това е оптималното решение. Формулата придобива следния вид: Размер на текста х 1.5 = разстояние между редовете Приложено на практика получаваме: 14px х 1.5 = 21px Запазете промените и вижте резултата. Текста изглежда много по-естествен и лесен за четене. Какво друго можем да подобрим? Стъпка 6 Нека видим как да променим стила на двете заглавия. Първото е h1 и съдържа името на произведението, а второто е h4 и съдържа името на автора. След CSS кода, който имаме до сега добави следното: ... h1 { text-transform:uppercase; } h4 { color:gray; } Върху h1 заглавието прилагаме свойството text-transform, което ни позволява да преобразуваме текста по различен начин. Стойността uppercase променя целия текст в главни букви. Върху h4 заглавието прилагаме свойството color, което ни позволява да променим цвета. В случая съм използвал ключовата дума gray. Резултата е наистина по-добър и ясен. h1 заглавието изглежда масивно и тежи на мястото си, докато h4 заглавието остава леко незабелязано, но придава стил. Стъпка 7 Всичко до тук го постигнахме с помоща на CSS. HTML обаче също ни предоставя няколко елемента, които могат да ни послужат за стилизиране. С един от тях вече се запознахме в предишните уроци и това е <strong>. Чрез него можем да удебелим дума или изречение, което искаме ясно да се отличава от останалта част от текста. Друг елемент е <em> (съкратено от emphasis), който набляга на текста като го прави наклонен. Третия елемент е <br />, чрез който изкуствено можем да накараме текста да започне на нов ред. Този елемент е от групата на “празните” елементи затова трябва да се затвори преди края на отварящия таг. За да видим как работят тези три елемента е нужно да изберем част от текста, върху който да ги приложим. За целта в първото изречение на първия текстов абзац ще оградим израза “майстор на каруци” с <em>. В края на това изречение ще добавим нов ред чрез <br />, а първата част на второто изречение (преди запетайката) ще я удебелим чрез <strong> <p>Славата на Сали Яшар, прочутия <em>майстор на каруци</em> от Али Анифе, стигаше вече твърде далеч. <br /><strong> Такъв майстор като него никога по-рано не беше имало в Али Анифе</strong> … </p> Резултата е следния: Това са само три от елементите, които можем да използваме за форматиране на текст. Има и други, но тях ще ги разгледаме в бъдещи уроци. Сега, ако сравним двете страници, които създадохме ще видим наистина голяма разлика. И двете имат едно и също съдържание както и една и съща структура. Без съмнение обаче, втората е значително по-добра и по-лесно за използване. Това със сигурност не е всичко, което можем да подобрим. Въпреки това, само с няколко реда код успяхме да превърнем една обикновена страница в страница, която посетителя може да използва с удоволствие. Практически съвети Тук искам да споделя няколко практически съвета при работа с текст. Опитайте се да ги приложите (или поне част от тях) в следващия уеб сайт и резултатите ще бъдат наистина удовлетворяващи. Избягвайте прекалено дългите редове. Когато четем текст, който е дълъг колкото ширината на целия екран, очите започват бързо да се изморяват. Добро решение е всеки ред да съдържа между 70 и 130 символа, но това също зависи и от вида сайт. Направете шрифта достатъчно голям и лесен за четене. С течение на възраста зрението ни става все по-слабо. Докато един човек на 16г. няма да има проблеми при четене на текст с 12px големина, друг човек на 35г. ще трябва наистина да положи усилия. Най-добрия размер е този, който кара посетителя да се чувства комфортно без да го натоварва. Изберете шрифт, който е оптимизиран за четене. Това е малко по-сериозен съвет и изисква повече практика и умения. Надявам се да го разгледаме в някой бъдещ урок, но тук накратко искам да спомена, че не всеки шрифт е удобен за четене на голямо количество текст. Например Verdana и Arial са широко използвани шрифтове, които са лесни за четене. Бъдете сигурен, че фона и цвета на текста са в достатъчно силен контраст. Може би най-добрия пример е черен текст на бял фон, но това не винаги е възможно. Въпреки това, опитай се да избереш цветове, които не са прекалено близки и ясно се отличават един от друг. Направете разстоянието между редовете достатъчно голямо. Това го разгледахме по-горе. Бъде сигурен/а, че разстоянието между редовете е 1.5 пъти по-голямо от размера на текста и в по-голямата част от случаите това ще ти даде най-добрия резултат. Позволявайте на текста да “диша”. Това е наистина важно и много начинаещи уеб дизайнери много често го избягват като се стремят да запълнят всяко възможно кътче от страницата. Предоставянето на разстояние в, между и около текста го прави не само лесен за четене, но и оставя наистина приятно впечатление. Това са няколко практически съвета, чрез които можеш значително да подобриш текста на своята страница. Винаги имай едно на ум и направи посетителите на твоята страница наистина доволни. Надявам се, че всичко от урока ви е ясно. Ако искате да допълните нещо или да изразите своя коментар, можете да го направите чрез формата по-долу.
1 2 3 4 5 Категория: HTML \| Преглеждания: 807 \| Довавено от: knif3r \| Оценка: 5.0 \| Гласували :4 \| Tags: Paragraph, параграфи, text, Html, Urok, текст, font, Начинаещ, шрифт, урок