Dizaynerlar uchun HTML va CSS ga kirish

Dizaynerlar uchun HTML va CSS ga kirish.

Grafik dizayner sifatida siz dizayn va texnologiya o'rtasidagi doimiy o'zaro bog'liqlikdan xabardorsiz. Bu, ayniqsa, veb-dizayn bilan shug'ullanadiganlar uchun to'g'ri keladi. Ushbu sohada biz qanday qilib puxta ishlab chiqilgan maketlarimiz jonli veb-sahifalarga aylanishi haqida asosiy tushunchaga ega bo'lishimiz kerak. Ushbu jarayonning asoslarini (va uning cheklovlarini) tushunganimizda, biz ishlab chiquvchilar bilan aniq muloqot qilishimiz va yaratishimiz mumkin mukammal veb-saytlar piksel.

Bu veb-saytni yuqoridan pastgacha kodlashni bilishingiz kerak degani emas (garchi bu juda yaxshi bo'lardi!), bu shunchaki asoslarni tushunishingiz kerakligini anglatadi. Ushbu postda biz HTML-ga juda oddiy kirish bilan boshlaymiz. Siz Photoshop-da veb-dizaynlarni qanday kesishni va CSS-dan foydalanib HTMLni formatlashni o'rganasiz. Dizaynerlar uchun HTML va CSS ga kirish

HTML nima?

Internetni ko'rib chiqishda ko'radigan deyarli hamma narsa gipermatn belgilash tili (HTML) hujjatidir. Gipermatn ekrandagi boshqa matnga havola qiluvchi va unga havola qiluvchi matn boʻlib, oddiy bosish orqali tarkibga kirish imkonini beradi. Belgilash tili kvadrat qavslar ichida <> olingan teglar to'plamidir. Ushbu HTML teglar odatda juft bo'ladi:

<start teg> : Ochilish yorlig'i sifatida ham tanilgan.
: yopilish yorlig'i deb ham ataladi va oldinga qiyshiq chiziqni o'z ichiga oladi /

Ushbu ikkita teg orasiga tarkib qo'shsangiz, hamma narsa chaqiriladi element :

Bu paragraf

Ushbu til Internetga tarjima qilinganda, tomoshabinlar teglarni ko'rmaydilar - ular faqat ular orasidagi tarkibni ko'radilar.

HTML 5, HTML ning joriy versiyasida ularning funksiyasi yoki ko'rinishini o'zgartiruvchi atributlarga ega 100 ga yaqin teglar mavjud. HTMLni tushunish va yaratishni boshlash uchun bu teglardan atigi 30-40 tasini bilish kerak. Ularga qarang va ular funksiya bo'yicha qanday guruhlanganligiga e'tibor bering. Keling, buni amalda ko'rib chiqaylik.

Photoshop-da tasvirlarni kesish.

Dizaynerlar uchun HTML va CSS ga kirish

Kodlashdan oldin veb-saytning qaysi bo'limlari tasvirlarni o'z ichiga olishi va qaysi biri kodlanishi mumkinligini hal qilishimiz kerak. Keling, foyda keltiraylik asbob Fotoshop Tilim (pastki menyu ostida yashirin Kesish vositasi ) va burrito fotosurati kabi joylarni ajratib ko'rsatish va tako joan .

Endi biz parchalarni eksport qilishimiz kerak - Fayl > Veb uchun saqlash ni tanlang (Alt + Shift + Ctrl + S). Muayyan parcha tanlanganda, uning eksport parametrlarini oynaning o'ng tomonida (JPG, PNG va boshqalar) o'rnatishingiz mumkin. Agar siz ma'lum bir qismni ikki marta bossangiz, qalqib chiquvchi oynani ko'rasiz " Fragment parametrlari" - Bu sizga alohida fragmentli fayllarni nomlash imkonini beradi.

Odatiy bo'lib, barcha tasvirlar quyidagi katalogga joylashtiriladi: /images/. Agar siz faqat yaratgan parchalarni eksport qilmoqchi bo'lsangiz, "ni tanlang. Barcha maxsus qismlar" "Saqlash" oynasida. Dizaynerlar uchun HTML va CSS ga kirish

Asosiy HTML hujjatini yaratish

Bizning slayderlarimiz bor, keling, asosiy HTML hujjatini yarataylik. Dizaynerlar uchun HTML va CSS ga kirish

1-qator : HTML 5 dialekti hujjat tili ekanligini e'lon qiladi.

2-qator : element HTML hujjatining ildizini ifodalaydi. Bu bizning hujjatimizning chegaralarini ko'rsatadigan majburiy konteyner.

3 : bob meta-ma'lumot, sarlavha va boshqalar kabi ko'rinmas sahifa elementlarini o'z ichiga oladi.

4-qator : Bu hujjat kodlash deklaratsiyasi - utf-8 - xavfsiz tanlov - HTML belgilar kodlari haqida ko'proq o'qishingiz mumkin shu yerda .

5-qator : Namuna sahifa Bu brauzerning sarlavha satrida paydo bo'ladigan sahifa sarlavhasi.

6 : tegni yopadi 3-qatordan.

7-qator : Ushbu asosiy element sahifaning barcha ko'rinadigan mazmunini o'z ichiga oladi.

8-qator : tegni yopadi qatordan 2. Bu element hujjatning oxirini belgilaydi. Dizaynerlar uchun HTML va CSS ga kirish

Xuddi shu dizaynni kodlashning boshqa mumkin bo'lgan usullari mavjud. Hujjatning asosiy tuzilishini yaratish uchun HTML 5 semantik teglaridan (sarlavha, navbat, maqola, altbilgi) foydalanamiz:

Bu HTMLga tarjima qilingan tartib:

Bir nechta eslatma:

11 va 12 qatorlar : Elementlar Internetning mohiyatidir, chunki ular yaratishda foydalaniladi giperhavolalar . Ular HREF atributiga bog'langan va maqsadni bog'lashi kerak URL .

18–20 qatorlar : Bu ba'zi matn formatlash teglari: birinchi darajali sarlavhani bildiradi; paragrafni bildiradi; qator uzilishini bildiradi.

Kaskadli uslublar jadvallari (CSS) yordamida formatlash.

Dizaynerlar uchun HTML va CSS ga kirish

Veb-brauzerda faqat HTML faylni ochganingizda, u avvalgi dizaynimiz kabi formatlanmaganligini ko'rasiz. Buning sababi, HTML kodi etarli emas - biz uni formatlashimiz kerak Kaskadli uslublar jadvallari (CSS) . CSS - bu HTML elementlarini formatlash uchun foydalaniladigan uslublar jadvali tili.

Lekin nima uchun biz HTMLni CCS bilan birlashtirishimiz kerak? Bir muncha vaqt oldin formatlash HTML teglariga atributlar qo'shish orqali amalga oshirildi. Biroq, bu o'qib bo'lmaydigan va saqlab bo'lmaydigan kodga olib keldi. Yechim hujjat mazmunini (HTML) hujjat formatlashdan (CSS) ajratish edi.

Keling, oddiy qismlarga ajrataylik CSS qoidasi : .

Tanlovchi : Bu siz uslublashni xohlagan HTML elementidir. Masalan: <maqola>

Reklama : CSS qoidasi bir yoki bir nechta deklaratsiyaga ega bo'lishi mumkin. Har bir deklaratsiya xususiyat va qiymatdan iborat bo'lib, nuqta-vergul bilan ajratiladi. Siz deklaratsiyalarni jingalak qavs ichida joylashtirasiz {}. Dizaynerlar uchun HTML va CSS ga kirish

Mulk : Bu uslub xususiyati, siz o'zgartirmoqchi bo'lgan. Masalan: fon rangi, o'lchami shrift va hokazo.

ma'no : Har bir xususiyat u bilan bog'langan qiymatga ega. Masalan: #ffcc11 (fon rangi uchun), 16px (shrift hajmi uchun) va hokazo.

U erda ko'p CSS xususiyatlari, har bir HTML elementi uchun o'rnatilishi mumkin, lekin ularning hammasini o'zingiz yozishingiz shart emas. Brauzeringizning standart sozlamalariga ishonishingiz yoki brauzeringizni oqilona sozlamalarga qaytaradigan asosiy uslublar jadvalidan foydalanishingiz mumkin. Aslida, uchun selektorlarni yozish buni o'zingiz qilish juda ko'p bilim va tajribani talab qiladi.

Keling, oddiy dizaynimizni formatlash uchun zarur bo'lgan ba'zi CSS qoidalarini ko'rib chiqaylik.

CSS joylashishni aniqlash xususiyatlari : mavjud 4 xil usul (statik, sobit, nisbiy va mutlaq) bu bizga dizaynimizda ma'lum elementlarni joylashtirish imkonini beradi. Ushbu usullardan birini o'rnatganingizdan so'ng, yuqori, o'ng, pastki va chap xususiyatlardan foydalangan holda elementlarni joylashtirishingiz mumkin - ular 4 ta usuldan qaysi birini qo'llashingizga qarab boshqacha ishlaydi. Bu holatda biz joylashishni xohlaymiz plastinka_tasviri, foydalanish mutlaq joylashishni aniqlash.

CSS Box modeli : bu model barcha HTML elementlarini, jumladan, chetlari, hoshiyalari, toʻldirish va kontentni oʻz ichiga olgan ramka. Chegara - bu chegara atrofidagi ko'rinmas maydon va chegara va tarkib o'rtasidagi plomba.

Agar siz kodlash haqida ko'proq bilmoqchi bo'lsangiz, bir ko'rib chiqing bu ajoyib saytga: Registratsiya .