Bir çox proqramlaşdırma, üslub və işarələmə dillərinin inkişafı ilə web dizaynını öyrənmək həmişəkindən daha mürəkkəbləşir. Xoşbəxtlikdən, işə başlamağınıza kömək edəcək bir çox vasitə var. İnternet dərsləri və ya veb dizaynı ilə bağlı müasir bir kitab kimi bir neçə əsas mənbəyə baxın. Başlamağa hazır olduqdan sonra HTML və CSS əsaslarını mənimsəməklə başlayın. Sonra JavaScript kimi daha inkişaf etmiş veb dizayn dillərini araşdırmağa başlaya bilərsiniz!
Addımlar
Metod 1 /4: Veb Dizayn qaynaqları tapın
Addım 1. Veb dizayn kursları və dərsləri üçün onlayn yoxlayın
İnternet veb dizaynı haqqında ətraflı məlumatlarla doludur və bir çoxu sərbəst şəkildə mövcuddur. Udemy və ya CodeCademy -də bəzi pulsuz onlayn kurslar keçməklə və ya freeCodeCamp kimi kodlaşdırma cəmiyyətinə qoşulmaqla başlaya bilərsiniz. YouTube -da veb dizayn video dərsləri də tapa bilərsiniz.
- Nə axtardığınızı dəqiq bilirsinizsə, müəyyən şərtləri (məsələn, "CSS təlimatında sinif seçiciləri") istifadə edərək axtarış etməyə çalışın.
- Veb dizayn təcrübəsi olmayan bir başlanğıcsınızsa, HTML və CSS -də kodlaşdırmanın əsaslarını öyrənərək başlayın.
Addım 2. Yerli bir kollecdə və ya universitetdə dərs almağa baxın
Bir kollec və ya universitetə gedirsinizsə, məktəbinizin kompüter elmləri şöbəsinə müraciət edin və ya hər hansı bir veb dizayn kursunun olub olmadığını öyrənmək üçün kurs kataloqunuza müraciət edin. Məktəbdə deyilsinizsə, yaxınlığınızdakı hər hansı bir kollecin və ya universitetin veb dizaynında davamlı təhsil dərsləri verdiyini yoxlayın.
Bəzi universitetlər, qeydiyyatdan keçmək istəyən hər kəs üçün açıq olan onlayn veb dizayn dərsləri təklif edir. Universitet müəllimləri tərəfindən öyrədilən pulsuz və ya əlverişli veb dizayn dərsləri tapmaq üçün Coursera.org kimi saytları yoxlayın
Addım 3. Kitab mağazasından və ya kitabxanadan bəzi veb dizayn kitabları alın
Veb dizaynı ilə bağlı yaxşı bir kitab sənətkarlığınızı öyrənərkən və tətbiq edərkən əvəzolunmaz bir istinad ola bilər. Ümumi veb dizaynı və ya öyrənmək istədiyiniz xüsusi kodlaşdırma formatları və dillərlə bağlı ən son kitabları axtarın.
Veb dizaynı ilə bağlı jurnal və blog məqalələrini oxumaq da yeni texnika öyrənmək, ilham almaq və ən son trendləri izləmək üçün yaxşı bir yoldur
Addım 4. Bəzi veb dizayn proqramlarını yükləyin və ya satın alın
Yaxşı veb dizayn proqramı veb saytlarını daha səmərəli və təsirli bir şəkildə qurmağınıza kömək edə bilər və eyni zamanda kodlaşdırma, skript və digər əsas dizayn elementlərinin tətbiqinin təfərrüatlarını öyrənməyinizdə çox faydalıdır. Aşağıdakı vasitələrdən istifadə edə bilərsiniz:
- Adobe Photoshop, GIMP və ya Sketch kimi qrafik dizayn proqramları.
- WordPress, Chrome DevTools və ya Adobe Dreamweaver kimi veb sayt qurma vasitələri.
- Hazır fayllarınızı serverinizə köçürmək üçün FTP proqramı.
Addım 5. Başladığınız zaman oynamaq üçün bir neçə veb şablonu tapın
Veb dizaynının əsaslarını öyrəndiyiniz zaman şablonlardan istifadə etməyin heç bir günahı yoxdur. Bəyəndiyiniz veb sayt şablonlarını axtarın və dizaynerin səhifəni necə bir araya gətirdiyini bilmək üçün kodu yaxından nəzərdən keçirin. Kodu dəyişdirmək və öz elementlərinizi şablona əlavə etməklə də təcrübə edə bilərsiniz.
Başlamaq üçün pulsuz veb sayt şablonlarını axtarın və ya veb dizayn proqramınızla birlikdə gələn şablonları sınayın
Metod 2 /4: HTML -ni mənimsəmək
Addım 1. Əsas HTML etiketləri ilə tanış olun
HTML, veb saytın əsas elementlərini formatlaşdırmaq üçün istifadə olunan sadə bir işarə dilidir. Etiketlərdən istifadə edərək veb saytınızın müxtəlif elementlərini formatlaşdıra bilərsiniz. Etiketlər hər bir elementdən əvvəl və sonra açılı mötərizədə görünür və bu elementin səhifədə necə işləyəcəyi ilə bağlı təlimatlar verir. Etiketi bağlamaq üçün açılı mötərizələrin içərisindəki son etiketin önünə / işarəsini qoyun.
- Məsələn, mətninizin bir hissəsinin olmasını istəyirsinizsə qalın, elementi etiketlə əhatə edərdiniz, belə: Bu mətn qalındır.
- Bir neçə ümumi etiketə (paraqraf), (əlaqəli mətni təyin edən çapa) və (mətnin ölçüsü və rəngi kimi müxtəlif atributlarını təyin etməyə kömək edə bilən şrift) daxildir.
- Digər etiketlər HTML sənədinin fərqli hissələrini təyin edir. Məsələn, axtarış motorunun nəticələrində görünəcək açar sözlər və ya səhifə təsviri kimi izləyiciyə görünməyəcək səhifə haqqında məlumatları ehtiva etmək üçün istifadə olunur.
Addım 2. Etiket xüsusiyyətlərindən istifadə etməyi öyrənin
Bəzi etiketlərin necə işləyəcəyini təyin etmək üçün əlavə məlumatlara ehtiyac var. Bu əlavə məlumat açılış etiketində görünür və buna "atribut" deyilir. Atribut adı etiket adından dərhal sonra boşluqla ayrılır. Atribut dəyəri atribut adına = işarəsi ilə əlavə olunur və tırnak işarələri ilə əhatə olunur.
- Məsələn, mətninizin bir hissəsini qırmızı etmək istəyirsinizsə, bunu etiketdən və uyğun bir şrift rəngi xüsusiyyətindən istifadə edərək edə bilərsiniz: Bu mətn qırmızıdır.
- Bir zamanlar fərqli yazı tipi rəngləri təyin etmək kimi HTML etiket atributları ilə müntəzəm olaraq əldə edilən bir çox təsirlər indi ümumiyyətlə CSS kodlaşdırması ilə yerinə yetirilir.
Addım 3. Daxili elementləri sınayın
HTML daha mürəkkəb formatlaşdırma yaratmaq üçün elementləri digər elementlərin içərisinə yerləşdirməyə imkan verir. Məsələn, bir paraqraf təyin etmək və sonra paraqrafdakı mətnin bir hissəsini italik etmək istəyirsinizsə, bunu belə edə bilərsiniz:
Kodlamağı sevirəm!
Addım 4. Boş elementlərlə tanış olun
HTML -də bəzi elementlərin həm açma, həm də bağlanma etiketinə ehtiyacı yoxdur. Məsələn, bir şəkil əlavə edirsinizsə, etiket adını və digər lazımlı atributları (məsələn, görüntü faylının adı və əlçatanlıq məqsədi ilə əlavə etmək istədiyiniz hər hansı bir alternativ mətn) ehtiva edən tək bir "img" etiketinə ehtiyacınız var. Misal üçün:
Addım 5. HTML sənədinin əsas sxemini araşdırın
HTML əsaslı veb saytınızın düzgün işləməsi üçün bütün səhifəni necə formatlaşdıracağınızı bilməlisiniz. Bu, html kodunuzun harada başladığını və bitəcəyini, habelə kodun hansı hissələrinin göstəriləcəyini və gizli fon məlumatlarını təmin etmək üçün orada olduğunu təyin etmək üçün etiketlərdən istifadə etməyi əhatə edir. Misal üçün:
- Səhifənizi HTML sənədi olaraq təyin etmək üçün etiketdən istifadə edin.
- Sonra, kodunuzun harada başladığını və bitdiyini təyin etmək üçün bütün səhifənizi etiketlər daxil edin.
- Səhifənin adı, açar sözlər və səhifənizin təsviri kimi izləyiciyə göstərilməyəcək hər hansı bir məlumatı etiketlərin içərisinə yerləşdirin.
- Səhifənizin gövdəsini (yəni izləyicinin görməsini istədiyiniz hər hansı bir mətn və şəkilləri) etiketlərlə təyin edin.
Metod 3 /4: CSS ilə tanış olmaq
Addım 1. HTML sənədlərinizə üslub tətbiq etmək üçün CSS -dən istifadə edin
CSS, veb səhifənizə fərqli üslub və dizayn elementləri tətbiq etməyə imkan verən üslub cədvəli dilidir. Məsələn, səhifənizdəki bəzi mətn elementlərinə müəyyən bir şrift və ya mətn rəngini seçici olaraq tətbiq etmək istəyirsinizsə, bunun üçün bir CSS faylı yarada bilərsiniz. Sonra CSS faylını istədiyiniz yerə HTML sənədinizə daxil edə bilərsiniz.
-
Məsələn, bir CSS faylının HTML sənədinizdəki bütün paraqraf elementlərini yaşıllaşdırmasını istəsəniz, sətirləri olan bir.css faylı yarada bilərsiniz:
- p {
- rəng: yaşıl;
- }
- Sonra faylı style.css kimi bir adla saxlayardınız.
- Üslub cədvəlini HTML sənədinizə tətbiq etmək üçün onu etiketlərin içərisinə boş bir əlaqə elementi kimi daxil edərdiniz. Misal üçün:
Addım 2. CSS qayda dəstinin elementləri ilə tanış olun
Fərdi CSS kod parçasına "qayda dəsti" deyilir. Qayda dəsti, kodunuzun nə etmək istədiyini təyin edən fərqli elementləri ehtiva edir. Bunlara daxildir:
- Üslub etmək istədiyiniz HTML elementini təyin edən seçici. Məsələn, qaydalarınızın paraqraf elementlərinə təsir etməsini istəyirsinizsə, qaydalarınızı "p" hərfi ilə başlamalısınız.
- Üslub etmək istədiyiniz xüsusiyyətləri (şrift rəngi kimi) təyin edən bəyannamə. Bəyannamə mötərizədə {} daxil edilir.
- HTML elementinin hansı xüsusiyyətini üslublaşdırmaq istədiyinizi göstərən xüsusiyyət. Məsələn, etiket daxilində mətnin rəngini tərtib etmək istədiyinizi təyin edə bilərsiniz.
- Mülkiyyət dəyəri, mülkü necə dəyişdirmək istədiyinizi konkret olaraq təyin edir (məsələn, mülk şrift rəngindəysə, mülkiyyət dəyəri "yaşıl" olardı).
- Bir bəyannamədə bir neçə fərqli mülkü dəyişdirə bilərsiniz.
Addım 3. Yazı tərzinizin gözəl görünməsi üçün mətninizə CSS tətbiq edin
CSS, hər bir əmlakı HTML -də kodlaşdırmadan mətninizə müxtəlif effektlər tətbiq etmək üçün faydalıdır. CSS -də fərqli yazma xüsusiyyətlərini dəyişdirməklə sınayın:
- Şrift rəngi
- Şrift ölçüsü
- Şrift ailəsi (məsələn, mətninizdə istifadə etmək istədiyiniz şriftlər aralığı)
- Mətn uyğunlaşdırılması
- Xəttin hündürlüyü
- Məktub aralığı
Addım 4. Qutular və digər CSS düzəliş vasitələri ilə sınaq keçirin
CSS, səhifənizə mətn qutuları və cədvəllər kimi cazibədar vizual elementlər əlavə etmək üçün də faydalıdır. Əlavə olaraq, səhifənizin ümumi planını dəyişdirmək və fərqli elementlərin bir -birinə nisbətən harada yerləşdiyini təyin etmək üçün istifadə edə bilərsiniz.
Məsələn, bir elementin eni və fon rəngi kimi atributları təyin edə, bir haşiyə əlavə edə və ya səhifənizdəki müxtəlif elementlər arasında boşluq yaradacaq haşiyələr təyin edə bilərsiniz
Metod 4 /4: Digər Dizayn Dilləri ilə İş
Addım 1. Səhifələrinizə interaktiv elementlər əlavə etmək istəyirsinizsə JavaScript öyrənin
JavaScript, veb saytlarınıza animasiya və pop -up kimi daha inkişaf etmiş xüsusiyyətlər əlavə etmək istəyirsinizsə, öyrənmək üçün əla bir dildir. Bir kurs keçin və ya JavaScript -də kod yazmaq və bu kodlu elementləri veb səhifələrinizə daxil etməklə bağlı HTML dərsləri axtarın.
JavaScript ilə rahatlıq əldə etməzdən əvvəl HTML və CSS -də səhifələr qurmağın əsasları ilə tanış olmalısınız
Addım 2. JavaScript kodlaşdırmasını asanlaşdırmaq üçün jQuery ilə tanış olun
jQuery, əvvəlcədən kodlanmış müxtəlif JavaScript elementlərinə daxil olmaq üçün Java proqramlaşdırmasını asanlaşdıran bir JavaScript kitabxanasıdır. jQuery, JavaScript kodlaşdırmanın əsaslarını artıq bilirsinizsə əla bir vasitədir.
JQuery kitabxanasına və bir çox digər dəyərli mənbəyə jQuery Vəqfi jQuery.org vasitəsi ilə daxil ola bilərsiniz
Addım 3. Arxa tərəfli inkişafla maraqlanırsınızsa, server tərəfindəki dilləri öyrənin
HTML, CSS və JavaScript, istifadəçinin veb saytında gördüklərinə və etdiklərinə diqqət yetirən veb dizaynerləri üçün ideal olsa da, pərdə arxası işlərlə daha çox maraqlanırsınızsa server tərəfindəki dillər faydalıdır. Arxa inkişaf haqqında məlumat əldə etmək istəyirsinizsə, Python, PHP və Ruby on Rails kimi dilləri öyrənməyə diqqət edin.
Bu dillər istifadəçinin görmədiyi məlumatları idarə etmək və işləmək üçün faydalıdır. Məsələn, giriş tələb edən veb saytlarda təhlükəsiz parol yaratmaq vasitələri yaratmaq üçün PHP istifadə edilə bilər
Yardım Faylları
HTML fırıldaqçı hesabatı
CSS fırıldaqçı hesabatı
