Создание макета сайта Первая часть

Կայքի դասավորության ստեղծում Առաջին մաս

После того как вы научились основам 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{
  width: 100%;
  height: 100px;
  background-color: #0a121f;
}

После того как вы написали у вас будет вот такая картина:

Գրելուց հետո դուք կունենաք հետևյալ նկարը.

Как вы видите по кроям остались отступы, но мы такого не задавали. Чтобы их убрать нужно использовать три свойства:

Ինչպես տեսնում եք, կրճատումների մեջ կան հեռավորություներ, բայց մենք դա չենք սահմանել: Դրանք հեռացնելու համար հարկավոր է օգտագործել երեք հատկություն.

*{
  box-sizing: border-box; 
  margin: 0; /*Убирает все внешние отступы*/
  padding: 0; /*Убирает все внутренние отступы*/
}

*{
  box-sizing: border-box; 
  margin: 0; /*Հեռացնում է բոլոր ներքին հեռավորություները*/
  padding: 0; /*Հեռացնում է բոլոր ներսի հեռավորություները*/
}

Теперь у нас <header> должен плотно приклеиться к верхней части сайта. Теперь как мы прикрепили давайте перейдём к добавлению логотипа и навигации (Кнопок меню). Из папки мы возьмём логотип и установим внутрь <header>:

Այժմ մենք ունենք <header> , որը պետք է քիպ կպչի կայքի վերևին: Այժմ, երբ մենք այն կցեցինք, եկեք անցնենք լոգոյի և մենյուի ավելացմանը (Մենյուի կոճակներ): Մենք լոգոն կվերցնենք թղթապանակից և կտեղադրենք այն <header>-ի ներսում.

<img class="logo" src="/img/codenyx.png" alt="Логотип codenyx" width="270px" height="38px"/>

После нам нужно добавить нашу навигацию. Для это добавим наш <nav> тег внутрь <header> и зададим для него <ul> и <li> чтобы сделать ненумерованным списком. Это нам поможет в будущем, чтобы сделать бургер меню(раскрывающее меню).

Հետո մենք պետք է ավելացնենք մեր նավիգացիան: Դա անելու համար եկեք ավելացնենք մեր <nav> թեգը <header>-ի ներսում և նրան տանք <ul> և <li>` այն չդասավորված ցուցակ դարձնելու համար: Սա կօգնի մեզ ապագայում պատրաստել բուրգեր մենյու (բացվող մենյու):

<nav class="nav">
  <ul class="menu">
      <li><a href="#">Домой</a></li>
      <li><a href="#">Про нас</a></li>
      <li><a href="#">Услуги</a></li>
      <li><a href="#">Статьи</a></li>
      <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Если добавить внутри href знак решётки(#), то он перенаправит туда где вы сейчас находитесь. Для логотипа мы зададим размер. Для <ul> и мы уберем точки чтобы было красиво и для <a> уберём декорацию.

Եթե href-ի ներսում ավելացնեք վանդականիշի նշան (#), այն կվերահղվի այնտեղ, որտեղ դուք հիմա եք: Լոգոյի համար մենք կսահմանենք չափը։ <ul>-ի համար մենք կհեռացնենք կետերը, որպեսզի այն գեղեցիկ տեսք ունենա, իսկ <a>-ի համար մենք կհեռացնենք զարդարանքը:

.logo {
  width: 270px;
  height: 38px;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

Пока что выглядит очень сыро и не похоже как на макете:

Առայժմ այն շատ հում տեսք ունի և նման չէ դասավորությանը.

Теперь уже пришло время добавлять flex элементы. Самая важная часть работы это правильно расставлять свойства. Для <header>-а мы добавим flex:

Այժմ ժամանակն է ավելացնել flex տարրերը։ Աշխատանքի ամենակարևոր մասը գույքի ճիշտ ձևավորումն է: <header>-ի համար մենք կավելացնենք flex:

header {
  width: 100%;
  height: 100px;
  background-color: #0a121f;
  display: flex;
  flex-direction: row; /*Направление flex-контейнера по главной оси: горизонтально*/
  align-items: center; /*Выравнивает flex-элементы по центру*/
  justify-content: space-around; /*Распределение пространство между и вокруг элементов контента вдоль главной оси flex контейнера*/
  flex-wrap: nowrap; /*Блоки не переносит*/
}

header {
  width: 100%;
  height: 100px;
  background-color: #0a121f;
  display: flex;
  flex-direction: row; /*Ֆլեքս տարայի ուղղությունը հիմնական առանցքի երկայնքով՝ հորիզոնական*/
  align-items: center; /*Հավասարեցնում է ճկուն տարրերը կենտրոնում*/
  justify-content: space-around; /*Տարածության բաշխում բովանդակության տարրերի միջև և շուրջը ճկուն կոնտեյների հիմնական առանցքի երկայնքով*/
  flex-wrap: nowrap; /*Տողադարձ չի կատարում*/
}

Теперь нам нужно настроить menu, чтобы элементы были по горизонтали и находились в центре.

Այժմ մենք պետք է հարմարեցնենք menu-ն այնպես, որ տարրերը լինեն հորիզոնական և կենտրոնացված:

.menu {
  display: flex;
  flex-wrap: nowrap; /*Блоки не переносит*/
  flex-direction: row;/*Направление flex-контейнера по главной оси: горизонтально*/
  justify-content: center; /*Распределение пространство в центре элементов контента вдоль главной оси flex контейнера*/
  align-items: center; /*Выравнивает flex-элементы по центру*/
}

.menu {
  display: flex;
  flex-wrap: nowrap; /*Տողադարձ չի կատարում*/
  flex-direction: row;/*Ֆլեքս տարայի ուղղությունը հիմնական առանցքի երկայնքով՝ հորիզոնական*/
  justify-content: center; /*Բովանդակության տարրերի կենտրոնում տարածության բաշխումը ճկուն կոնտեյների հիմնական առանցքի երկայնքով*/
  align-items: center; /*Հավասարեցնում է ճկուն տարրերը կենտրոնում*/
}

Для того чтобы кнопки не слиплись можно использовать <padding> для ссылок. Мы будем использовать вызов внутри блока menu. То есть мы зададим стиль для элемента <а> который находиться в menu. Будет выглядеть так:

Որպեսզի կոճակները իրար չկպնեն, հղումների համար կարող եք օգտագործել <padding>: Մենք կօգտագործենք կանչը menu բլոկի ներսում: Այսինքն՝ մենք կսահմանենք մենյուում գտնվող <а> տարրի ոճը։ Այն այսպիսի տեսք կունենա.

.menu a {
  padding: 15px;
  color: white;
}

У нас получилось что-то похожее как на макете. Но при изменении размера у нас текст "Про нас" начинает переноситься:

Մենք ստացել ենք դասավորության նման մի բան: Բայց երբ չափը փոխում ենք, «Про нас» տեքստը սկսում է փաթաթվել.

Чтобы исправить эту проблему можно использовать тег <white-space>.

Այս խնդիրը շտկելու համար կարող եք օգտագործել <white-space> թեգը:

.menu a {
  padding: 15px;
  color: white;
  white-space: nowrap;
}

Можно сказать что верхняя часть уже готова. Теперь приступим к созданию первого блока. В первом блоке присутствует 3 вида текста, 2 кнопки и одна фотография. Но прежде чем начинать собирать всё давайте добавим тег <main> и <section> для каждых блоков. Для маленьких текстов будем использовать тег <p>, а для большого будем использовать <h1>(помните <h1> на сайте можно использовать лишь один раз).

Կարելի է ասել, որ վերնամասն արդեն պատրաստ է։ Այժմ եկեք սկսենք ստեղծել առաջին բլոկը: Առաջին բլոկը պարունակում է 3 տեսակի տեքստ, 2 կոճակ և մեկ լուսանկար։ Բայց մինչ մենք կսկսենք ամեն ինչ միավորել, եկեք յուրաքանչյուր բլոկի համար ավելացնենք <main> և <section> թեգը: Փոքր տեքստերի համար մենք կօգտագործենք <p> թեգը, իսկ մեծ տեքստերի համար՝ <h1>(հիշեք, որ <h1>-ը կարող է օգտագործվել միայն մեկ անգամ կայքում):

<main>
  <section class="first-block">
    <div class="first-block-texts">
      <p class="blue-text">ПЛАТФОРМА СЛЕДУЮЩЕГО ПОКОЛЕНИЯ</p>
      <h1 class="h1-text">Интеграция 3D моделей на сайт</h1>
      <p class="main-text">
        3D модели добавляют на сайт уникальность и привлекают много внимания. 3D модели могут помочь лучше ознакомить пользователя продуктом.
      </p>
      <div class="btn-block">
        <a href="#" class="btn-1 button-a">
          <p class="btn-text">Начать</p>
        </a>
        <a href="#" class="btn-2 button-a">
          <div class="play"></div>
          <p class="btn-text">Смотреть видео</p>
        </a>
      </div>
    </div>
    <div>
      <img class="spaceship-moon" src="/img/raketa.png" alt="Фотография ракеты" width="751px" height="695px"/>
    </div>
  </section>
</main>

Այն դեռ անհասկանալի ու սարսափելի տեսք ունի։ Եկեք ճիշտ հերթականությամբ գնանք: Մենք ստեղծել ենք Բաժին մեր բլոկի համար, որտեղ կպահենք մեր բոլոր տեքստերն ու լուսանկարները: Ավելացրել ենք <p> թեգը կապույտ տեքստի համար և տվել blue-text class: Հսկայական տեքստի համար մենք տվել ենք <h1>, իսկ դրա տակ ևս մեկ <p> թեգ: Այնուհետև մեզ անհրաժեշտ էր բլոկ ստեղծել՝ մեր կոճակները պահելու համար: Մենք ստեղծել և տվել ենք btn-block class-ը։ Միակ հարցը, որը կարող է առաջանալ, այն է, թե ինչպես կարելի է տեսանյութի նվագարկման կոճակ պատրաստել: Վերջերս խոսեցինք clip-path հատկությունների մասին, դրա օգնությամբ փոքրիկ խորանարդից կկազմենք պտտվող եռանկյունի։ Հիմա եկեք մեկ առ մեկ ոճավորենք մեր բլոկները.

.first-block {
  width: 100%;
  min-height: 778px;
  background: #08101e;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Мы для первого блока задали ширину в 100% чтобы он покрывал всю площадь. Прямо над width вы видите какое то новое свойства: min-height; Вы спросите почему не написать просто <height>? Проблема в то что при изменении размера экрана фотография будет переноситься и чтобы не было проблем с размерами мы зададим только минимальное значение. Теперь перейдём к текстам:

Մենք առաջին բլոկի լայնությունը սահմանեցինք 100% այնպես, որ այն ծածկի ամբողջ տարածքը: Անմիջապես width-ի վերևում դուք տեսնում եք մի նոր հատկություն՝ min-height; Ինչու՞ պարզապես չգրել <height>, հարցնում ես: Խնդիրն այն է, որ երբ դուք փոխեք էկրանի չափը, լուսանկարը կփոխանցվի, և որպեսզի չափի հետ կապված խնդիրներ չլինեն, մենք կսահմանենք միայն նվազագույն արժեքը։ Այժմ անցնենք տեքստերին.

.first-block-texts {
  max-width: 520px;
  width: 95%;
  height: auto;
  display: flex;
  flex-direction: column;
}

А тут мы использовали уже max-width. Что бы блок не выходил за пределы и мог спокойна изменяться до маленьких размеров. Внизу мы написали width: 95%; для того чтобы при максимальном уменьшении текста он не прилегал к стене. Можно было и сделать через padding но оба варианта рабочие. Теперь стилизуем наш первый текст.

Իսկ այստեղ մենք արդեն օգտագործել ենք max-width. Որպեսզի բլոկը դուրս չգա և հեշտությամբ փոխվի փոքր չափերի: Ներքևում մենք գրել ենք width: 95%; այնպես, որ երբ տեքստը կրճատվում է առավելագույնը, այն չկպչի պատին: Դա կարելի էր անել padding-ի միջոցով, բայց երկու տարբերակներն էլ աշխատում են: Հիմա եկեք ոճավորենք մեր առաջին տեքստը:

.blue-text {
  font-family: "Open Sans", sans-serif; /*Семейство шрифтов open-sans*/
  font-style: normal; /*Стиль нормальный*/
  font-weight: 600; /*Жирность 600*/
  font-size: min(18px, 8vw); /*Размер шрифта от минимального до максимального*/
  line-height: 160%; /*Высота линии*/
  text-transform: uppercase; /*Все буквы будут заглавными*/
  color: #447bd9;
}

.blue-text {
  font-family: "Open Sans", sans-serif; /*Տառատեսակների ընտանիքը open-sans*/
  font-style: normal; /*Ոճը սովորական է*/
  font-weight: 600; /*Հաստություն 600*/
  font-size: min(18px, 8vw); /*Տառատեսակի չափը նվազագույնից մինչև առավելագույնը*/
  line-height: 160%; /*Գծի բարձրությունը*/
  text-transform: uppercase; /*Բոլոր տառերը կլինեն մեծատառ*/
  color: #447bd9;
}

Что же мы тут сделали. Во-первых, мы подключили шрифт, стиль, жирность и размер. Для того чтобы подключать шрифты, нужно получить ссылку. Для данного текста мы использовали данное семейство шрифтов и импортировали через @import. Он должен находиться на самом верху css файла:

Ի՞նչ ենք մենք արել այստեղ։ Նախ, մենք ներառել ենք տառատեսակը, ոճը, հաստությունը և չափը: Տառատեսակները միացնելու համար անհրաժեշտ է հղում ստանալ։ Այս տեքստի համար մենք օգտագործեցինք այս տառատեսակների ընտանիքը և ներմուծեցինք այն @import-ի միջոցով: Այն պետք է լինի css ֆայլի հենց վերևում.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");

Ещё очень важный момент. Для текста мы не задали конкретное значение в пикселях и вы видите новую единицу измерения: vw - это процентная величина от общей ширины области просмотра. Мы задали что минимальное значение у него будет 18px а при уменьшении у него будет процентное значение. Также мы применим к другим текстам:

Մեկ այլ շատ կարևոր կետ. Տեքստի համար մենք չենք սահմանել որոշակի պիքսելային արժեք, և դուք տեսնում եք չափման նոր միավոր. vw-ն տեսադաշտի ընդհանուր լայնության տոկոսն է: Մենք սահմանել ենք, որ այն ունենա 18px նվազագույն արժեք, և երբ այն փոքրանա, այն կունենա տոկոսային արժեք: Մենք կկիրառենք նաև այլ տեքստերի համար:

.h1-text {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: min(55px, 12vw);
  line-height: 130%;
  color: white;
  margin-top: 15px;
}

.main-text {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: min(18px, 8vw);
  line-height: 160%;
  color: #b8b8b8;
  margin-top: 35px;
}

После того как мы задали текстам их размеры, перейдём к кнопкам:

Տեքստի չափերը սահմանելուց հետո եկեք անցնենք կոճակներին.

.btn-1 {
  width: 134px;
  height: 57px;
  margin: 40px 30px 0 0;
}

.btn-2 {
  width: 261px;
  height: 57px;
  margin: 40px 0 0 0;
}

Для первой и второй кнопки зададим размеры и отступы чтобы не были близко друг к другу. После это нам нужно чтобы кнопки были в одну линию и текст был в центре:

Առաջին և երկրորդ կոճակների համար մենք չափերն ու հեռավորությանը կդնենք այնպես, որ դրանք իրար մոտ չլինեն։ Դրանից հետո մեզ անհրաժեշտ է, որ կոճակները լինեն մեկ տողում, իսկ տեքստը՝ կենտրոնում.

.button-a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 20px;
  gap: 10px;
  background: #3a68b8;
  border-radius: 5px;
  justify-content: center;
  border: none;
}

.btn-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.play {
  width: 24px;
  height: 24px;
  background-color: white;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

С помощью button мы сделали текст в центре и задали свойства gap. gap - задаёт отступы между столбцами и строками. Он нужен для того чтобы блок play был чуточку дальше. Через btn-block мы задали чтобы кнопки были горизонтально и прижимались к левому углу. И play нужен для того чтобы сделать из куба в треугольник через clip-path.

button-ի օգնությամբ մենք տեքստը դարձրեցինք կենտրոնում և սահմանեցինք gap-ի հատկությունները։ Gap - սահմանում է հեռավորություն սյունակների և տողերի միջև: Դա անհրաժեշտ է, որպեսզի play բլոկը մի փոքր ավելի հեռու լինի։ btn-block-ի միջոցով մենք կոճակները դնում ենք հորիզոնական և սեղմված ձախ անկյունում: Եվ play-ն անհրաժեշտ է, որպեսզի այն clip-path-ի միջոցով խորանարդից վերածվի եռանկյունի:

В конце остался всего лишь добавить размеры для фото. Мы должны поместить его в <div> чтобы сделать его блочным элементом. Для него мы зададим данные свойства:

Ի վերջո, մնում էր լուսանկարի համար չափեր ավելացնելը։ Մենք պետք է այն ավելացնենք <div>-ով, որպեսզի այն դարձնենք բլոկի տարր: Մենք դրա համար կսահմանենք այս հատկությունները.

.spaceship-moon {
  width: 100%;
  height: auto;
}

Мы задали ему width: 100%; чтобы блок имел полную ширину, а для height просто поставим автоматически (можно сказать это то же самое 100%).

Մենք տվել ենք width: 100%; այնպես, որ բլոկը ունենա ամբողջ լայնություն, իսկ բարձրության համար մենք այն պարզապես սահմանում ենք ավտոմատ կերպով (կարելի է ասել, որ սա նույնն է 100%):

Чтобы уж точно всё было похоже как в макете, нам нужно изменить цвет, шрифт и добавить несколько вещей от себя для крайних случаев (Чтобы не было переноса строки).

Որպեսզի համոզվենք, որ ամեն ինչ նման է դասավորությանը, մենք պետք է փոխենք գույնը, տառատեսակը և ավելացնենք մի քանի բան մեզանից ծայրահեղ դեպքերի համար (Տողերի ընդհատումներից խուսափելու համար):

a {
  text-decoration: none;
  color: white;
  padding: 0px 6px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  width: auto;
  word-wrap: normal;
  white-space: nowrap;
}