После того как вы научились основам Html и Css, можно приступить к работе. Перед созданием давайте возьмём всё что нужно для работы. Сперва создайте папку и внутри создайте файл html и css, для фотографий тоже создайте отдельную папку. Примерно должно выглядеть так:
Հենց որ սովորեք Html-ի և Css-ի հիմունքները, կարող եք անցնել աշխատանքի: Ստեղծելուց առաջ վերցնենք այն ամենը, ինչ մեզ անհրաժեշտ է աշխատելու համար։ Սկզբում ստեղծեք թղթապանակ և ներսում ստեղծեք html և css ֆայլ, ստեղծեք առանձին թղթապանակ նաև լուսանկարների համար: Այն պետք է մոտավորապես այսպիսի տեսք ունենա.
После это скачайте все нужные фотографии из гугл диска и
вставьте всё в папку img. Если всё будет сделано, то мы можем уже начинать разработку макета. Сперва в файле html
создайте первоначальную структуру кода нажатием shift+1 + Tab. У вас должно появиться
вот так:
Դրանից հետո ներբեռնեք բոլոր անհրաժեշտ լուսանկարները google drive-ից և տեղադրեք ամեն ինչ img թղթապանակում: Եթե ամեն ինչ արված է, ապա մենք արդեն կարող ենք սկսել դասավորության մշակումը: Նախ, html ֆայլում ստեղծեք սկզբնական կոդի կառուցվածքը՝ սեղմելով shift+1 + Tab.Դզեր մոտ պետք է ստացվի այսպես.
Следующим делом давайте посмотрим на наш макет и увидим из каких частей состоит наш макет:
Հաջորդը, եկեք նայենք մեր դասավորությանը և տեսնենք, թե ինչ մասերից է բաղկացած մեր դասավորությունը.
Начнём, с того чтобы создать верхнюю часть сайта: <header>. Сперва создадим блок в котором будет находиться наш логотип и меню.
Սկսենք ստեղծելով կայքի վերին մասը -> <header>. Նախ, եկեք ստեղծենք բլոկ, որը կպարունակի մեր լոգոն և մենյուն:
В стилях пропишем ему несколько свойств:
Ոճերում մենք կնշանակենք նրա համար մի քանի հատկություն.
После того как вы написали у вас будет вот такая картина:
Գրելուց հետո դուք կունենաք հետևյալ նկարը.
Как вы видите по кроям остались отступы, но мы такого не задавали. Чтобы их убрать нужно использовать три свойства:
Ինչպես տեսնում եք, կրճատումների մեջ կան հեռավորություներ, բայց մենք դա չենք սահմանել: Դրանք հեռացնելու համար հարկավոր է օգտագործել երեք հատկություն.
Теперь у нас <header> должен плотно приклеиться к верхней части сайта. Теперь как мы прикрепили давайте перейдём к добавлению логотипа и навигации (Кнопок меню). Из папки мы возьмём логотип и установим внутрь <header>:
Այժմ մենք ունենք <header> , որը պետք է քիպ կպչի կայքի վերևին: Այժմ, երբ մենք այն կցեցինք, եկեք անցնենք լոգոյի և մենյուի ավելացմանը (Մենյուի կոճակներ): Մենք լոգոն կվերցնենք թղթապանակից և կտեղադրենք այն <header>-ի ներսում.
После нам нужно добавить нашу навигацию. Для это добавим наш <nav> тег внутрь <header> и зададим для него <ul> и <li> чтобы сделать ненумерованным списком. Это нам поможет в будущем, чтобы сделать бургер меню(раскрывающее меню).
Հետո մենք պետք է ավելացնենք մեր նավիգացիան: Դա անելու համար եկեք ավելացնենք մեր <nav> թեգը <header>-ի ներսում և նրան տանք <ul> և <li>` այն չդասավորված ցուցակ դարձնելու համար: Սա կօգնի մեզ ապագայում պատրաստել բուրգեր մենյու (բացվող մենյու):
Если добавить внутри href знак решётки(#), то он перенаправит туда где вы сейчас находитесь. Для логотипа мы зададим размер. Для <ul> и мы уберем точки чтобы было красиво и для <a> уберём декорацию.
Եթե href-ի ներսում ավելացնեք վանդականիշի նշան (#), այն կվերահղվի այնտեղ, որտեղ դուք հիմա եք: Լոգոյի համար մենք կսահմանենք չափը։ <ul>-ի համար մենք կհեռացնենք կետերը, որպեսզի այն գեղեցիկ տեսք ունենա, իսկ <a>-ի համար մենք կհեռացնենք զարդարանքը:
Пока что выглядит очень сыро и не похоже как на макете:
Առայժմ այն շատ հում տեսք ունի և նման չէ դասավորությանը.
Теперь уже пришло время добавлять flex элементы. Самая важная часть работы это правильно расставлять свойства. Для <header>-а мы добавим flex:
Այժմ ժամանակն է ավելացնել flex տարրերը։ Աշխատանքի ամենակարևոր մասը գույքի ճիշտ ձևավորումն է: <header>-ի համար մենք կավելացնենք flex:
Теперь нам нужно настроить menu, чтобы элементы были по горизонтали и находились в центре.
Այժմ մենք պետք է հարմարեցնենք menu-ն այնպես, որ տարրերը լինեն հորիզոնական և կենտրոնացված:
Для того чтобы кнопки не слиплись можно использовать <padding> для ссылок. Мы будем использовать вызов внутри блока menu. То есть мы зададим стиль для элемента <а> который находиться в menu. Будет выглядеть так:
Որպեսզի կոճակները իրար չկպնեն, հղումների համար կարող եք օգտագործել <padding>: Մենք կօգտագործենք կանչը menu բլոկի ներսում: Այսինքն՝ մենք կսահմանենք մենյուում գտնվող <а> տարրի ոճը։ Այն այսպիսի տեսք կունենա.
У нас получилось что-то похожее как на макете. Но при изменении размера у нас текст "Про нас" начинает переноситься:
Մենք ստացել ենք դասավորության նման մի բան: Բայց երբ չափը փոխում ենք, «Про нас» տեքստը սկսում է փաթաթվել.
Чтобы исправить эту проблему можно использовать тег <white-space>.
Այս խնդիրը շտկելու համար կարող եք օգտագործել <white-space> թեգը:
Можно сказать что верхняя часть уже готова. Теперь приступим к созданию первого блока. В первом блоке присутствует 3 вида текста, 2 кнопки и одна фотография. Но прежде чем начинать собирать всё давайте добавим тег <main> и <section> для каждых блоков. Для маленьких текстов будем использовать тег <p>, а для большого будем использовать <h1>(помните <h1> на сайте можно использовать лишь один раз).
Կարելի է ասել, որ վերնամասն արդեն պատրաստ է։ Այժմ եկեք սկսենք ստեղծել առաջին բլոկը: Առաջին բլոկը պարունակում է 3 տեսակի տեքստ, 2 կոճակ և մեկ լուսանկար։ Բայց մինչ մենք կսկսենք ամեն ինչ միավորել, եկեք յուրաքանչյուր բլոկի համար ավելացնենք <main> և <section> թեգը: Փոքր տեքստերի համար մենք կօգտագործենք <p> թեգը, իսկ մեծ տեքստերի համար՝ <h1>(հիշեք, որ <h1>-ը կարող է օգտագործվել միայն մեկ անգամ կայքում):
Այն դեռ անհասկանալի ու սարսափելի տեսք ունի։ Եկեք ճիշտ հերթականությամբ գնանք: Մենք ստեղծել ենք Բաժին մեր բլոկի համար, որտեղ կպահենք մեր բոլոր տեքստերն ու լուսանկարները: Ավելացրել ենք <p> թեգը կապույտ տեքստի համար և տվել blue-text class: Հսկայական տեքստի համար մենք տվել ենք <h1>, իսկ դրա տակ ևս մեկ <p> թեգ: Այնուհետև մեզ անհրաժեշտ էր բլոկ ստեղծել՝ մեր կոճակները պահելու համար: Մենք ստեղծել և տվել ենք btn-block class-ը։ Միակ հարցը, որը կարող է առաջանալ, այն է, թե ինչպես կարելի է տեսանյութի նվագարկման կոճակ պատրաստել: Վերջերս խոսեցինք clip-path հատկությունների մասին, դրա օգնությամբ փոքրիկ խորանարդից կկազմենք պտտվող եռանկյունի։ Հիմա եկեք մեկ առ մեկ ոճավորենք մեր բլոկները.
Мы для первого блока задали ширину в 100% чтобы он покрывал всю площадь. Прямо над width вы видите какое то новое свойства: min-height; Вы спросите почему не написать просто <height>? Проблема в то что при изменении размера экрана фотография будет переноситься и чтобы не было проблем с размерами мы зададим только минимальное значение. Теперь перейдём к текстам:
Մենք առաջին բլոկի լայնությունը սահմանեցինք 100% այնպես, որ այն ծածկի ամբողջ տարածքը: Անմիջապես width-ի վերևում դուք տեսնում եք մի նոր հատկություն՝ min-height; Ինչու՞ պարզապես չգրել <height>, հարցնում ես: Խնդիրն այն է, որ երբ դուք փոխեք էկրանի չափը, լուսանկարը կփոխանցվի, և որպեսզի չափի հետ կապված խնդիրներ չլինեն, մենք կսահմանենք միայն նվազագույն արժեքը։ Այժմ անցնենք տեքստերին.
А тут мы использовали уже max-width. Что бы блок не выходил за пределы и мог спокойна изменяться до маленьких размеров. Внизу мы написали width: 95%; для того чтобы при максимальном уменьшении текста он не прилегал к стене. Можно было и сделать через padding но оба варианта рабочие. Теперь стилизуем наш первый текст.
Իսկ այստեղ մենք արդեն օգտագործել ենք max-width. Որպեսզի բլոկը դուրս չգա և հեշտությամբ փոխվի փոքր չափերի: Ներքևում մենք գրել ենք width: 95%; այնպես, որ երբ տեքստը կրճատվում է առավելագույնը, այն չկպչի պատին: Դա կարելի էր անել padding-ի միջոցով, բայց երկու տարբերակներն էլ աշխատում են: Հիմա եկեք ոճավորենք մեր առաջին տեքստը:
Что же мы тут сделали. Во-первых, мы подключили шрифт, стиль, жирность и размер. Для того чтобы подключать шрифты, нужно получить ссылку. Для данного текста мы использовали данное семейство шрифтов и импортировали через @import. Он должен находиться на самом верху css файла:
Ի՞նչ ենք մենք արել այստեղ։ Նախ, մենք ներառել ենք տառատեսակը, ոճը, հաստությունը և չափը: Տառատեսակները միացնելու համար անհրաժեշտ է հղում ստանալ։ Այս տեքստի համար մենք օգտագործեցինք այս տառատեսակների ընտանիքը և ներմուծեցինք այն @import-ի միջոցով: Այն պետք է լինի css ֆայլի հենց վերևում.
Ещё очень важный момент. Для текста мы не задали конкретное значение в пикселях и вы видите новую единицу измерения: vw - это процентная величина от общей ширины области просмотра. Мы задали что минимальное значение у него будет 18px а при уменьшении у него будет процентное значение. Также мы применим к другим текстам:
Մեկ այլ շատ կարևոր կետ. Տեքստի համար մենք չենք սահմանել որոշակի պիքսելային արժեք, և դուք տեսնում եք չափման նոր միավոր. vw-ն տեսադաշտի ընդհանուր լայնության տոկոսն է: Մենք սահմանել ենք, որ այն ունենա 18px նվազագույն արժեք, և երբ այն փոքրանա, այն կունենա տոկոսային արժեք: Մենք կկիրառենք նաև այլ տեքստերի համար:
После того как мы задали текстам их размеры, перейдём к кнопкам:
Տեքստի չափերը սահմանելուց հետո եկեք անցնենք կոճակներին.
Для первой и второй кнопки зададим размеры и отступы чтобы не были близко друг к другу. После это нам нужно чтобы кнопки были в одну линию и текст был в центре:
Առաջին և երկրորդ կոճակների համար մենք չափերն ու հեռավորությանը կդնենք այնպես, որ դրանք իրար մոտ չլինեն։ Դրանից հետո մեզ անհրաժեշտ է, որ կոճակները լինեն մեկ տողում, իսկ տեքստը՝ կենտրոնում.
С помощью button мы сделали текст в центре и задали свойства gap. gap - задаёт отступы между столбцами и строками. Он нужен для того чтобы блок play был чуточку дальше. Через btn-block мы задали чтобы кнопки были горизонтально и прижимались к левому углу. И play нужен для того чтобы сделать из куба в треугольник через clip-path.
button-ի օգնությամբ մենք տեքստը դարձրեցինք կենտրոնում և սահմանեցինք gap-ի հատկությունները։ Gap - սահմանում է հեռավորություն սյունակների և տողերի միջև: Դա անհրաժեշտ է, որպեսզի play բլոկը մի փոքր ավելի հեռու լինի։ btn-block-ի միջոցով մենք կոճակները դնում ենք հորիզոնական և սեղմված ձախ անկյունում: Եվ play-ն անհրաժեշտ է, որպեսզի այն clip-path-ի միջոցով խորանարդից վերածվի եռանկյունի:
В конце остался всего лишь добавить размеры для фото. Мы должны поместить его в <div> чтобы сделать его блочным элементом. Для него мы зададим данные свойства:
Ի վերջո, մնում էր լուսանկարի համար չափեր ավելացնելը։ Մենք պետք է այն ավելացնենք <div>-ով, որպեսզի այն դարձնենք բլոկի տարր: Մենք դրա համար կսահմանենք այս հատկությունները.
Мы задали ему width: 100%; чтобы блок имел полную ширину, а для height просто поставим автоматически (можно сказать это то же самое 100%).
Մենք տվել ենք width: 100%; այնպես, որ բլոկը ունենա ամբողջ լայնություն, իսկ բարձրության համար մենք այն պարզապես սահմանում ենք ավտոմատ կերպով (կարելի է ասել, որ սա նույնն է 100%):
Чтобы уж точно всё было похоже как в макете, нам нужно изменить цвет, шрифт и добавить несколько вещей от себя для крайних случаев (Чтобы не было переноса строки).
Որպեսզի համոզվենք, որ ամեն ինչ նման է դասավորությանը, մենք պետք է փոխենք գույնը, տառատեսակը և ավելացնենք մի քանի բան մեզանից ծայրահեղ դեպքերի համար (Տողերի ընդհատումներից խուսափելու համար):