Дизайнерлер үчүн HTML жана CSSке киришүү

Дизайнерлер үчүн HTML жана CSSке киришүү.

Графикалык дизайнер катары сиз дизайн менен технологиянын ортосундагы дайыма өнүгүп келе жаткан байланышты билесиз. Бул, өзгөчө, веб-дизайн менен алектенгендерге тиешелүү. Бул тармакта биз кылдаттык менен иштелип чыккан макеттерибиз кантип жандуу веб-баракчаларга айланары жөнүндө негизги түшүнүккө ээ болушубуз керек. Бул процесстин негиздерин (жана анын чектөөлөрүн) түшүнгөндө, биз иштеп чыгуучулар менен так байланышып, түзө алабыз идеалдуу веб-сайттар пиксел.

Бул сиз веб-сайтты өйдөдөн ылдыйга чейин кантип коддоону билишиңиз керек дегенди билдирбейт (бирок бул эң сонун болмок!), бул жөн гана негиздерди түшүнүү керек дегенди билдирет. Бул постто биз HTMLге эң негизги киришүү менен баштайбыз. Сиз фотошопто веб-дизайндарды кантип кесүүнү жана CSS аркылуу HTMLди форматтоону үйрөнөсүз. Дизайнерлер үчүн HTML жана CSSке киришүү

HTML деген эмне?

Вебди карап жатканыңызда көргөнүңүздүн дээрлик бардыгы гипертексттик белгилөө тили (HTML) документи. Гипертекст Бул сиздин экраныңыздагы башка текстке шилтеме берген жана мазмунга жөнөкөй чыкылдатуу менен кирүүгө мүмкүндүк берген текст. Белгилөө тили чарчы кашаанын ичинде <> алынган тегдердин жыйындысы болуп саналат. Бул HTML тэгдери адатта жуп болуп келет:

<старт тэг> : Ошондой эле ачылыш теги катары белгилүү.
: жабуу теги деп да аталат жана алдыга сызыкты камтыйт /

Бул эки тегдин ортосуна мазмунду киргизгенде, бүт нерсе деп аталат элемент :

Бул абзац

Бул тил Интернетке которулганда, көрүүчүлөр тегдерди көрүшпөйт — алардын ортосундагы мазмунду гана көрүшөт.

HTML 5, HTMLдин учурдагы версиясы, алардын функциясын же көрүнүшүн өзгөрткөн атрибуттары бар 100дөй тегди камтыйт. HTML түшүнүп жана түзө баштоо үчүн бул тегдердин 30-40ун гана билишиңиз керек. Аларды карап көрүңүз жана алардын функциясы боюнча кандайча топтолгонуна көңүл буруңуз. Келгиле, муну иш жүзүндө көрөлү.

Фотошопто сүрөттөрдү кесүү.

Дизайнерлер үчүн HTML жана CSSке киришүү

Коддоштуруудан мурун, веб-сайттын кайсы бөлүмдөрү сүрөттөрдү камтышы керек жана кайсынысын коддосо болорун чечишибиз керек. Келгиле, пайдаланалы курал Photoshop үзүм (подменю астында жашырылган Кесүү куралы ) жана буррито сүрөтү сыяктуу жерлерди бөлүп көрсөтүңүз тако жоан .

Эми биз үзүндүлөрүбүздү экспортташыбыз керек - Файл > Веб үчүн сактоону тандаңыз (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 семантикалык тегдерин (баш, nav, макала, колонтитул) колдонобуз:

Бул 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 Positioning Properties : бар 4 түрдүү ыкмалар (статикалык, туруктуу, салыштырмалуу жана абсолюттук) биздин дизайндагы айрым элементтерди жайгаштырууга мүмкүндүк берет. Бул ыкмалардын бирин орноткондон кийин, сиз элементтерди жогорку, оң, төмөнкү жана сол касиеттерин колдонуп жайгаштырсаңыз болот - алар 4 ыкманын кайсынысын колдонгонуңузга жараша ар кандай иштейт. Бул учурда биз позицияны каалайбыз табак_сүрөтү, колдонуу абсолюттук жайгаштыруу.

CSS куту модели : бул модель бардык HTML элементтерин, анын ичинде четтерин, чектерин, толтурууну жана мазмунду камтыган кадр. Чет чек аранын айланасындагы көрүнбөгөн аймак жана чек менен мазмундун ортосундагы толтургуч.

Эгер сиз чындап эле коддоо жөнүндө көбүрөөк билгиңиз келсе, кароо бул сонун сайтка: Кирүү .