Ko'p dasturlash, uslub va belgilash tillarining rivojlanishi bilan veb -dizaynni o'rganish har qachongidan ham murakkablashmoqda. Yaxshiyamki, sizni boshlashga yordam beradigan ko'plab vositalar mavjud. Bir nechta asosiy manbalarni qidiring, masalan, onlayn darsliklar yoki veb-dizayn bo'yicha dolzarb kitob. Siz boshlashga tayyor bo'lgach, HTML va CSS asoslarini o'rganishdan boshlang. Keyin JavaScript kabi veb -dizaynning yanada rivojlangan tillarini o'rganishni boshlashingiz mumkin!
Qadamlar
4 -usul 1: Veb -dizayn manbalarini topish
Qadam 1. Veb -dizayn kurslari va qo'llanmalarini onlayn tekshiring
Internet veb -dizayn haqida batafsil ma'lumotga to'la va ularning ko'pchiligi erkin foydalanish mumkin. Siz Udemy yoki CodeCademy -da bepul onlayn kurslardan o'tishingiz yoki freeCodeCamp kabi kodlash jamoasiga qo'shilishingiz mumkin. YouTubeda veb -dizayn bo'yicha video darsliklarni ham topishingiz mumkin.
- Agar siz nimani qidirayotganingizni aniq bilsangiz, maxsus atamalar yordamida qidirishga harakat qiling (masalan, "CSS darsligida sinf tanlashchilar").
- Agar siz veb -dizayn tajribasiga ega bo'lmagan bo'lsangiz, HTML va CSS -da kodlash asoslarini o'rganishdan boshlang.
2 -qadam. Mahalliy kollej yoki universitetda dars olishni o'rganing
Agar siz kollej yoki universitetda o'qiyotgan bo'lsangiz, veb -dizayn bo'yicha kurslar mavjudligini bilish uchun maktabingizning informatika bo'limiga murojaat qiling yoki kurslar katalogiga murojaat qiling. Agar siz maktabda bo'lmasangiz, yaqin atrofdagi kollej yoki universitetlar veb -dizayn bo'yicha uzluksiz ta'lim kurslarini taklif qilishini tekshiring.
Ba'zi universitetlar ro'yxatdan o'tishni istaganlar uchun ochiq bo'lgan veb -dizayn bo'yicha onlayn darslarni taklif qilishadi. Coursera.org kabi veb -saytlarni tekshirib, universitet o'qituvchilari tomonidan bepul yoki arzon veb -dizayn darslarini toping
Qadam 3. Kitob do'konidan yoki kutubxonadan veb -dizayn bo'yicha ba'zi kitoblarni oling
O'zingizning hunarmandchiligingizni o'rganayotganingizda va qo'llayotganingizda veb -dizayn bo'yicha yaxshi kitob bebaho ma'lumot bo'lishi mumkin. Umumiy veb-dizayn yoki ma'lum kodlash formatlari va siz o'rganmoqchi bo'lgan tillar bo'yicha dolzarb kitoblarni qidiring.
Veb -dizayn haqida jurnallar va blog maqolalarini o'qish, shuningdek, yangi texnikani o'rganish, ilhom olish va so'nggi tendentsiyalarni kuzatib borish uchun yaxshi usuldir
Qadam 4. Ba'zi veb -dizayn dasturlarini yuklab oling yoki sotib oling
Yaxshi veb -dizayn dasturlari sizga veb -saytlarni yanada samarali va samaraliroq qurishga yordam beradi, shuningdek, kodlash, skript va boshqa dizayn elementlarini qo'llashning sirlarini o'rganishga yordam beradi. Siz quyidagi vositalardan foydalanishingiz mumkin:
- Adobe Photoshop, GIMP yoki Sketch kabi grafik dizayn dasturlari.
- WordPress, Chrome DevTools yoki Adobe Dreamweaver kabi veb -sayt yaratish vositalari.
- Tayyor fayllarni serverga o'tkazish uchun FTP dasturi.
Qadam 5. Ishlayotganda o'ynash uchun ba'zi veb -sayt shablonlarini toping
Veb -dizayn asoslarini o'rganganingizda shablonlardan foydalanishning hech qanday yomon joyi yo'q. O'zingiz yoqtirgan veb -sahifa shablonlarini qidiring va dizayner sahifani qanday birlashtirgani haqida tasavvurga ega bo'lish uchun kodni diqqat bilan ko'rib chiqing. Kodni o'zgartirish va shablonga o'z elementlaringizni qo'shish bilan tajriba qilishingiz mumkin.
Ishni boshlash uchun bepul veb -sayt shablonlarini qidiring yoki veb -dizayn dasturiy ta'minotingiz bilan birga kelgan shablonlarni sinab ko'ring
4 -usul 2: HTMLni o'zlashtirish
Qadam 1. Asosiy HTML teglari bilan tanishib chiqing
HTML - bu veb -saytning asosiy elementlarini formatlash uchun ishlatiladigan oddiy belgilash tili. Siz teglar yordamida veb -saytingizning turli elementlarini formatlashingiz mumkin. Teglar burchakli qavslarda har bir elementdan oldin va keyin paydo bo'ladi va bu element sahifada qanday ishlashi haqida ko'rsatma beradi. Yorliqni yopish uchun burchakli qavslar ichidagi oxirgi teg oldiga / belgisini qo'ying.
- Masalan, agar siz matnning bir qismini xohlasangiz qalin, siz elementni teg bilan o'rab olasiz: Bu matn qalin.
- Bir nechta umumiy teglar quyidagilarni o'z ichiga oladi: (paragraf), (bog'langan matnni belgilaydigan langar) va (shrift, bu matnning har xil atributlarini, masalan, o'lcham va rangni aniqlashga yordam beradi).
- Boshqa teglar HTML hujjatning turli qismlarini belgilaydi. Masalan, qidiruv tizimida paydo bo'ladigan kalit so'zlar yoki sahifa tavsifi kabi tomoshabinga ko'rinmaydigan sahifa haqidagi ma'lumotlarni o'z ichiga oladi.
2 -qadam. Tag atributlaridan foydalanishni o'rganing
Ba'zi teglar qanday ishlashi kerakligini aniqlash uchun qo'shimcha ma'lumotga muhtoj. Bu qo'shimcha ma'lumot ochilish yorlig'ida paydo bo'ladi va u "atribut" deb nomlanadi. Atribut nomi teg nomidan keyin darhol bo'sh joy bilan ajratiladi. Atribut qiymati atribut nomiga = belgisi bilan biriktirilgan va tirnoq bilan o'ralgan.
- Masalan, agar siz matningizning bir qismini qizil rangga bo'yashni xohlasangiz, buni teg va tegishli shrift rangi atributi yordamida qilishingiz mumkin, masalan: Bu matn qizil.
- Bir vaqtlar HTML yorlig'i atributlari yordamida erishilgan ko'plab effektlar, masalan, shriftlarning turli ranglarini sozlash, endi odatda CSS kodlashi yordamida amalga oshiriladi.
3 -qadam. Ichki elementlar bilan tajriba o'tkazing
HTML shuningdek, murakkabroq formatlash uchun elementlarni boshqa elementlarga joylashtirishga imkon beradi. Misol uchun, agar siz paragrafni belgilab, keyin paragraf ichidagi matnning bir qismini kursivlashtirmoqchi bo'lsangiz, buni shunday qilishingiz mumkin:
Men kodlashni yaxshi ko'raman!
Qadam 4. Bo'sh elementlar bilan tanishing
HTML -dagi ba'zi elementlarga ochilish va yopish teglari kerak emas. Masalan, agar siz rasm qo'shayotgan bo'lsangiz, sizga teg nomi va boshqa kerakli atributlarni o'z ichiga olgan bitta "img" yorlig'i kerak bo'ladi (masalan, rasm faylining nomi va kirish uchun qo'shmoqchi bo'lgan boshqa matn). Masalan:
5 -qadam. HTML hujjatning asosiy tartibini o'rganing
HTML-ga asoslangan veb-saytingiz to'g'ri ishlashi uchun siz butun sahifani qanday formatlashni bilishingiz kerak. Bu sizning html kodingiz qaerdan boshlanishini va tugashini aniqlashni, shuningdek, kodning qaysi qismlari ko'rsatilishini va yashirin fon ma'lumotlarini taqdim etish uchun teglardan foydalanishni o'z ichiga oladi. Masalan:
- Sahifangizni HTML hujjati sifatida belgilash uchun tegdan foydalaning.
- Keyin, sizning kodingizning boshlanishi va tugashini aniqlash uchun teglar ichida butun sahifangizni joylashtiring.
- Sahifa sarlavhasi, kalit so'zlar va sahifangiz tavsifi kabi tomoshabinlarga ko'rsatilmaydigan ma'lumotlarni teglarga joylashtiring.
- Sahifangiz tanasini (ya'ni, tomoshabin ko'rishni istagan matn va rasmlarni) teglar bilan belgilang.
3 -usul 4: CSS bilan tanishish
Qadam 1. HTML hujjatlaringizga uslublarni qo'llash uchun CSS -dan foydalaning
CSS - bu veb -sahifangizga har xil uslub va dizayn elementlarini qo'llash imkonini beruvchi uslublar jadvali tili. Masalan, agar siz sahifangizdagi ba'zi matn elementlariga ma'lum shrift yoki matn rangini tanlab qo'ymoqchi bo'lsangiz, buning uchun CSS faylini yaratishingiz mumkin. Keyin CSS faylini HTML -hujjatingizga xohlagan joyingizga kiritishingiz mumkin.
-
Misol uchun, agar siz CSS -fayl HTML -dagi barcha xatboshi elementlarini yashil rangga aylantirishini xohlasangiz, satrlarni o'z ichiga olgan.css faylini yaratishingiz mumkin:
- p {
- rang: yashil;
- }
- Keyin faylni style.css kabi nom bilan saqlaysiz.
- Uslublar jadvalini HTML hujjatingizga qo'llash uchun siz uni teglar ichidagi bo'sh havola elementi sifatida kiritgan bo'lar edingiz. Masalan:
2 -qadam. CSS qoidalar to'plamining elementlari bilan tanishing
CSS kodining alohida qismi "qoidalar to'plami" deb nomlanadi. Qoidalar to'plami sizning kodingizni nima qilishni xohlayotganingizni aniqlaydigan turli xil elementlarni o'z ichiga oladi. Bularga quyidagilar kiradi:
- Siz uslub qilmoqchi bo'lgan HTML elementini belgilaydigan selektor. Masalan, agar siz qoidalaringiz paragraf elementlariga ta'sir qilishni xohlasangiz, siz qoidalar to'plamini "p" harfi bilan boshlagan bo'lar edingiz.
- Siz xohlagan xususiyatlarni belgilaydigan deklaratsiya (shrift rangi kabi). Deklaratsiya {} jingalak qavs ichida joylashgan.
- HTML elementining qaysi xususiyatini uslublashni xohlayotganingizni ko'rsatadigan xususiyat. Masalan, teg ichida siz matnning rangiga uslub kiritmoqchi ekanligingizni belgilashingiz mumkin.
- Mulk qiymati, siz qanday qilib mulkni o'zgartirishni aniq belgilaydi (masalan, agar shrift rangi bo'lsa, mulk qiymati "yashil" bo'ladi).
- Bitta deklaratsiyada siz turli xil xususiyatlarni o'zgartirishingiz mumkin.
Qadam 3. Matningizga CSS -ni qo'llang, shunda matn terish uslubi chiroyli ko'rinadi
CSS HTML -dagi har bir xususiyatni alohida kodlamasdan, matningizga turli effektlarni qo'llashda foydalidir. CSS -da turli xil yozish xususiyatlarini o'zgartirish bilan tajriba o'tkazing, shu jumladan:
- Shrift rangi
- Shrift o'lchami
- Shriftlar oilasi (masalan, matnda ishlatmoqchi bo'lgan shriftlar diapazoni)
- Matnni tekislash
- Chiziq balandligi
- Harflar oralig'i
Qadam 4. Qutilar va boshqa CSS -ni joylashtirish vositalari bilan tajriba o'tkazing
CSS sizning sahifangizga matn qutilari va jadvallar kabi jozibali vizual elementlarni qo'shish uchun ham foydalidir. Bundan tashqari, siz uni sahifangizning umumiy tartibini o'zgartirish va turli elementlarning bir -biriga nisbatan joylashishini aniqlash uchun ishlatishingiz mumkin.
Masalan, siz elementning kengligi va fon rangi kabi atributlarni belgilashingiz, chegara qo'shishingiz yoki sahifangizdagi turli elementlar orasida bo'sh joy yaratadigan chegaralarni belgilashingiz mumkin
4 -usul 4: Boshqa dizayn tillari bilan ishlash
Qadam 1. O'z sahifalaringizga interaktiv elementlar qo'shmoqchi bo'lsangiz, JavaScript -ni o'rganing
JavaScript - bu sizning veb -saytlaringizga animatsiyalar va qalqib chiquvchi oynalar kabi qo'shimcha funktsiyalarni qo'shishni istasangiz, o'rganish uchun ajoyib til. JavaScript -da qanday kod yozish va ushbu kodlangan elementlarni veb -sahifalaringizga qo'shish bo'yicha kurslardan o'ting yoki onlayn qo'llanmalarni qidiring | HTML yordamida.
JavaScript -ni o'rganishdan oldin, siz HTML va CSS -da sahifalar yaratish asoslari bilan tanishishingiz kerak
2 -qadam. JavaScript kodlashni osonlashtirish uchun jQuery bilan tanishib chiqing
jQuery-bu JavaScript kutubxonasi bo'lib, u Java-ni oldindan kodlangan har xil elementlariga kirishga ruxsat berib, Java dasturlashni soddalashtiradi. Agar siz JavaScript kodlash asoslari bilan allaqachon tanish bo'lsangiz, jQuery - bu ajoyib vosita.
Siz jQuery kutubxonasiga va boshqa ko'plab qimmatli manbalarga jQuery Foundation veb -sayti jQuery.org orqali kirishingiz mumkin
3-qadam. Agar siz rivojlanishga qiziqsangiz, server tomonidagi tillarni o'rganing
HTML, CSS va JavaScript foydalanuvchining veb-saytida ko'rgan va qilgan ishlariga e'tibor qaratadigan veb-dizaynerlar uchun ideal bo'lsa-da, agar siz sahna ortida ishlashga ko'proq qiziqsangiz, server tillari foydali bo'ladi. Agar siz rivojlanishni o'rganmoqchi bo'lsangiz, Python, PHP va Ruby on Rails kabi tillarni o'rganishga e'tibor qarating.
Bu tillar foydalanuvchi ko'rmaydigan ma'lumotlarni boshqarish va qayta ishlash uchun foydalidir. Masalan, kirishni talab qiladigan veb -saytlarda xavfsiz parol yaratish vositalarini yaratish uchun PHP -dan foydalanish mumkin
Yordam fayllari
HTML aldash varaqlari
CSS uchun cheet varaq
