Маш олон програмчлал, хэв маяг, тэмдэглэгээний хэлийг хөгжүүлснээр вэб дизайныг сурах нь урьд өмнөхөөс илүү төвөгтэй болж байна. Аз болоход, таныг эхлүүлэхэд туслах олон тооны хэрэгсэл байдаг. Онлайн заавар эсвэл вэб дизайны талаархи хамгийн сүүлийн үеийн ном гэх мэт цөөн хэдэн үндсэн эх сурвалжийг хайж олох. Эхлэхэд бэлэн болмогц HTML ба CSS -ийн үндсийг эзэмшиж эхэл. Дараа нь та JavaScript гэх мэт илүү дэвшилтэт вэб дизайны хэлийг судалж эхлэх боломжтой!
Алхам
4 -ийн 1 -р арга: Вэб дизайны нөөцийг хайх
Алхам 1. Вэб дизайны курс, хичээлийг онлайнаар шалгаарай
Интернет нь вэб дизайны талаархи дэлгэрэнгүй мэдээллээр дүүрэн бөгөөд ихэнхийг нь чөлөөтэй ашиглах боломжтой. Та Udemy эсвэл CodeCademy дээр үнэгүй онлайн сургалтанд хамрагдах эсвэл freeCodeCamp гэх мэт кодлох нийгэмлэгт элсэх замаар эхэлж болно. Та мөн YouTube дээр вэб дизайн хийх видео хичээлийг олж болно.
- Хэрэв та яг юу хайж байгаагаа мэдэж байгаа бол тодорхой нэр томъёог ашиглан хайлт хийж үзээрэй (жишээлбэл, "CSS хичээл дээрх анги сонгогчид").
- Хэрэв та вэб дизайны туршлагагүй эхлэгч бол HTML болон CSS дээр код бичих үндсийг мэдэж аваарай.
Алхам 2. Орон нутгийн коллеж, их сургуулийн хичээлд хамрагдахыг анхаарч үзээрэй
Хэрэв та коллеж, их сургуульд суралцаж байгаа бол сургуулийнхаа компьютерийн шинжлэх ухааны тэнхимээс лавлах эсвэл сургалтын каталогоос лавлаж вэб дизайн хийх боломжтой эсэхийг олж мэдээрэй. Хэрэв та сургуульд сураагүй бол ойролцоох коллеж, их сургуулиуд вэб дизайны чиглэлээр тасралтгүй боловсролын анги санал болгодог эсэхийг шалгаарай.
Зарим их дээд сургуулиуд онлайнаар вэб дизайн хийх ангиудыг элсүүлэх хүсэлтэй бүх хүмүүст нээлттэй байдаг. Coursera.org гэх мэт вэбсайтуудаас их сургуулийн багш нарын заадаг үнэгүй эсвэл хямд вэб дизайны ангиудыг хайж олох
Алхам 3. Номын дэлгүүр эсвэл номын сангаас вэб дизайны зарим ном авах
Вэб дизайны талаархи сайн ном нь гар урлалаа сурч, ашиглаж байхдаа үнэлж баршгүй лавлах болно. Сурахыг хүсч буй ерөнхий вэб дизайн эсвэл тодорхой кодчиллын формат, хэлний талаархи хамгийн сүүлийн үеийн номыг хайж олох.
Вэб дизайны талаархи сэтгүүл, блог нийтлэлийг унших нь шинэ техник сурах, урам зориг авах, хамгийн сүүлийн үеийн чиг хандлагыг дагаж мөрдөх сайн арга юм
Алхам 4. Вэб дизайны зарим програмыг татаж авах эсвэл худалдаж авах
Вэб дизайны сайн програм хангамж нь вэбсайтыг илүү үр дүнтэй, үр дүнтэй бүтээхэд тусалдаг бөгөөд кодчилол, скрипт болон дизайны бусад гол элементүүдийг ашиглах нарийн ширийн зүйлийг сурахад тусалдаг. Та дараахь хэрэгслийг ашиглах нь ашиг тустай байж магадгүй юм.
- Adobe Photoshop, GIMP эсвэл Sketch гэх мэт график дизайны програмууд.
- WordPress, Chrome DevTools эсвэл Adobe Dreamweaver гэх мэт вэбсайт бүтээх хэрэгслүүд.
- Дууссан файлуудаа сервер рүү шилжүүлэх FTP програм хангамж.
Алхам 5. Эхлэх үедээ тоглох вэбсайтын зарим загварыг хайж олоорой
Вэб дизайны үндсийг сурч байхдаа загвар ашиглахад ямар ч буруу зүйл байхгүй. Танд таалагдсан вэб хуудасны загварыг хайж олоод, дизайнер хуудсыг хэрхэн яаж нэгтгэсэн тухай ойлголттой болохын тулд кодыг сайтар ажиглаарай. Та мөн кодыг өөрчилж, өөрийн элементүүдийг загварт нэмж оруулах туршилт хийж болно.
Эхлэхийн тулд үнэгүй вэбсайтын загвар хайх эсвэл вэб дизайны програм хангамжтай хамт ирсэн загваруудыг туршиж үзээрэй
4 -ийн 2 -р арга: HTML -ийг эзэмших
Алхам 1. Үндсэн HTML хаягуудтай танилцана уу
HTML бол вэбсайтын үндсэн элементүүдийг форматлахад ашигладаг энгийн тэмдэглэгээний хэл юм. Та хаягийг ашиглан вэбсайтынхаа өөр өөр элементүүдийг форматлах боломжтой. Шошго нь элемент бүрийн өмнө болон хойно өнцөгт хаалтанд гарч ирэх бөгөөд уг элемент хуудсан дээр хэрхэн ажиллах талаар зааварчилгаа өгдөг. Тагийг хаахын тулд өнцгийн хаалт дотор эцсийн шошгоны урд a / байрлуулна.
- Жишээлбэл, хэрэв та текстийнхээ зарим хэсгийг хийхийг хүсч байвал зоригтой, та элементийг дараах хаягаар хүрээлэх болно. Энэ текст тод байна.
- Хэд хэдэн нийтлэг тэмдэглэгээнд (догол мөр), (холбосон текстийг тодорхойлдог зангуу), (текстийн хэмжээ, өнгө гэх мэт төрөл бүрийн шинж чанаруудыг тодорхойлоход туслах фонт) орно.
- Бусад хаягууд нь HTML баримт бичгийн өөр өөр хэсгүүдийг тодорхойлдог. Жишээлбэл, хайлтын системийн үр дүнд гарч ирэх түлхүүр үгс эсвэл хуудасны тайлбар гэх мэт үзэгчдэд харагдахгүй байгаа хуудасны талаархи мэдээллийг агуулсан болно.
Алхам 2. Тагийн шинж чанарыг ашиглаж сурах
Зарим шошго нь хэрхэн ажиллах ёстойг тодорхойлохын тулд нэмэлт мэдээлэл шаарддаг. Энэхүү нэмэлт мэдээлэл нь нээлтийн хаяг дотор гарч ирдэг бөгөөд үүнийг "шинж чанар" гэж нэрлэдэг. Аттрибутын нэр нь шошгоны нэрийн дараа зайгаар тусгаарлагдан гарч ирнэ. Атрибутын утгыг атрибутын нэрэнд = тэмдгээр хавсаргаж, хашилтын тэмдгээр хүрээлэгдсэн болно.
- Жишээлбэл, хэрэв та текстийнхээ зарим хэсгийг улаан болгохыг хүсч байвал шошго, фонтын өнгөний зохих шинж чанарыг ашиглан үүнийг хийж болно: Энэ текст улаан байна.
- Янз бүрийн үсгийн өнгийг тохируулах гэх мэт HTML хаягийн шинж чанаруудаар тогтмол хүрч байсан олон эффектийг одоо оронд нь CSS кодлох замаар хийдэг.
Алхам 3. Үүрдсэн элементүүдийг туршиж үзээрэй
HTML нь илүү төвөгтэй форматыг бий болгохын тулд элементүүдийг бусад элемент дотор байрлуулах боломжийг олгодог. Жишээлбэл, хэрэв та догол мөрийг тодорхойлж, догол мөр доторх текстийг налуу болгохыг хүсч байвал үүнийг дараах байдлаар хийж болно.
Би код бичих дуртай!
Алхам 4. Хоосон элементүүдтэй танилцана уу
HTML -ийн зарим элементүүдэд нээх, хаах тэмдэглэгээ шаардлагагүй болно. Жишээлбэл, хэрэв та зураг оруулж байгаа бол танд хаягийн нэр болон бусад шаардлагатай шинж чанаруудыг агуулсан ганц "img" хаяг хэрэгтэй болно (жишээлбэл зургийн файлын нэр, хүртээмжтэй байдлын үүднээс нэмэхийг хүссэн өөр текст гэх мэт). Жишээлбэл:
Алхам 5. HTML баримт бичгийн үндсэн схемийг судлах
Таны HTML дээр суурилсан вэбсайт зөв ажиллахын тулд та хуудсыг хэрхэн яаж форматлахаа мэдэх хэрэгтэй болно. Энэ нь таны html код хаанаас эхэлж, хаана дуусахыг тодорхойлох, мөн кодын аль хэсгийг харуулахыг харуулахын тулд далд дэвсгэр мэдээллийг өгөх хэсгийг тодорхойлоход оршино. Жишээлбэл:
- Таны хуудсыг HTML баримт гэж тодорхойлохын тулд шошго ашиглана уу.
- Дараа нь, таны код хаана эхэлж, хаана дуусахыг тодорхойлохын тулд бүх хуудсыг таг дотор байрлуулна уу.
- Хуудасны гарчиг, түлхүүр үгс, хуудасны тайлбар гэх мэт үзэгчдэд харагдахгүй мэдээллийг хаягийн дотор байрлуулна уу.
- Хуудасныхаа хэсгийг (өөрөөр хэлбэл үзэгчээс үзэхийг хүсч буй текст, зургийг) шошго ашиглан тодорхойл.
4 -ийн 3 -р арга: CSS -тэй танилцах
Алхам 1. CSS -ийг ашиглан HTML баримтуудад хэв маягийг ашиглаарай
CSS бол өөр өөр хэв маяг, дизайны элементүүдийг вэб хуудсандаа ашиглах боломжийг олгодог хэв маягийн хүснэгт хэл юм. Жишээлбэл, хэрэв та хуудасныхаа зарим текст элементүүдэд тодорхой фонт эсвэл текстийн өнгө сонгохыг хүсч байвал үүнийг хийхийн тулд CSS файл үүсгэж болно. Дараа нь та CSS файлыг HTML баримт бичигт дуртай газраа оруулах боломжтой.
-
Жишээлбэл, хэрэв та CSS файлыг HTML баримт бичгийн бүх догол мөрийн элементүүдийг ногоон болгохыг хүсч байвал мөрүүдийг агуулсан.css файл үүсгэж болно.
- х {
- өнгө: ногоон;
- }
- Та дараа нь style.css гэх нэртэй файлыг хадгалах болно.
- Загварын хүснэгтийг өөрийн HTML баримт бичигт ашиглахын тулд та үүнийг хаягууд дотор хоосон холбоосын элемент болгон оруулах болно. Жишээлбэл:
Алхам 2. CSS дүрмийн олонлогийн элементүүдтэй танилцана уу
CSS кодын тусдаа хэсгийг "дүрмийн багц" гэж нэрлэдэг. Дүрмийн багц нь таны кодоос юу хийхийг хүсч байгаагаа тодорхойлдог өөр өөр элементүүдийг агуулдаг. Үүнд:
- Загвар хийхийг хүсч буй HTML элементийг тодорхойлдог сонгогч. Жишээлбэл, хэрэв та дүрмээ догол мөрийн элементүүдэд нөлөөлөхийг хүсч байвал дүрмийн багцыг "p" үсгээр эхлүүлэх болно.
- Таны загварчлахыг хүсч буй шинж чанаруудыг тодорхойлдог мэдэгдэл (үсгийн өнгө гэх мэт). Тунхаглалыг буржгар хаалтанд оруулсан болно {}.
- HTML элементийн аль шинж чанарыг загварчлахыг хүсч байгаагаа тодорхойлдог шинж чанар. Жишээлбэл, шошгон дотор та текстийн өнгийг загварчлахыг хүсч байгаагаа зааж өгч болно.
- Үл хөдлөх хөрөнгийн үнэ цэнэ нь тухайн үл хөдлөх хөрөнгийг хэрхэн яаж өөрчлөхийг тодорхойлдог (жишээлбэл, хэрэв өмч нь фонтын өнгө байвал өмчийн утга нь "ногоон" байх болно).
- Та нэг мэдүүлгийн дотор хэд хэдэн өөр өмчийг өөрчлөх боломжтой.
Алхам 3. Текстээ CSS -ээр түрхээд сайхан бичээрэй
CSS нь HTML дээрх өмч бүрийг тус тусад нь кодлохгүйгээр таны текстэд янз бүрийн эффект ашиглахад ашигтай байдаг. CSS дээр янз бүрийн хэвлэх шинж чанарыг өөрчлөх туршилт хийх, үүнд:
- Фонтын өнгө
- Үсгийн хэмжээ
- Фонтын гэр бүл (жишээ нь, текст дээрээ ашиглахыг хүссэн фонтын хүрээ)
- Текстийг тэгшлэх
- Шугамын өндөр
- Захидал хоорондын зай
Алхам 4. Хайрцаг болон бусад CSS зохион байгуулалтын хэрэгслүүдийг туршиж үзээрэй
CSS нь текст хайрцаг, хүснэгт гэх мэт сонирхолтой хуудсыг өөрийн хуудсан дээр нэмэхэд тустай. Нэмж дурдахад та үүнийг ашиглан хуудасныхаа ерөнхий зохион байгуулалтыг өөрчилж, өөр өөр элементүүд хоорондоо харьцангуй хаана байрлаж байгааг тодорхойлох боломжтой.
Жишээлбэл, та элементийн өргөн, арын өнгө гэх мэт шинж чанаруудыг тодорхойлж, хүрээ нэмж эсвэл хуудасныхаа янз бүрийн элементүүдийн хоорондох зайг бий болгох боломжтой болно
4 -ийн 4 -р арга: Бусад дизайны хэлтэй ажиллах
Алхам 1. Хэрэв та хуудсандаа интерактив элемент нэмэхийг хүсвэл JavaScript -ийг сураарай
JavaScript бол таны вэбсайтад хөдөлгөөнт дүрс, попап гэх мэт илүү дэвшилтэт боломжуудыг нэмж оруулах сонирхолтой байгаа бол сурахад тохиромжтой хэл юм. JavaScript дээр хэрхэн код бичих, эдгээр кодлогдсон элементүүдийг вэб хуудсууддаа оруулах талаар HTML хичээл ашиглан эсвэл онлайн хичээл хайж үзээрэй.
JavaScript -ийг ашиглахаасаа өмнө HTML болон CSS дээр хуудас бүтээх үндсийг мэдэж байх хэрэгтэй
Алхам 2. JavaScript кодчилолыг хөнгөвчлөхийн тулд jQuery -той танилцаарай
jQuery бол JavaScript-ийн номын сан бөгөөд Java програмчлалын хялбаршуулсан JavaScript-ийн янз бүрийн элементүүдэд хандах боломжийг олгодог. Хэрэв та JavaScript кодчиллын үндсийг аль хэдийн мэддэг бол jQuery бол маш сайн хэрэгсэл юм.
Та jQuery сангийн вэбсайт болох jQuery.org -ээр дамжуулан jQuery номын сан болон бусад олон үнэт эх сурвалжуудад хандах боломжтой
Алхам 3. Хэрэв та арын хөгжлийг сонирхож байгаа бол сервер талын хэлийг судлаарай
HTML, CSS, JavaScript нь вэбсайт дээр хэрэглэгчийн харж, хийж буй зүйлд анхаарлаа төвлөрүүлдэг вэб дизайнеруудад тохиромжтой боловч хэрвээ та хөшигний ард ажиллахыг илүү их сонирхож байвал сервер талын хэл нь ашигтай байдаг. Хэрэв та арын хөгжүүлэлтийн талаар мэдэхийг хүсч байвал Python, PHP, Ruby on Rails гэх мэт хэл сурахад анхаарлаа хандуулаарай.
Эдгээр хэл нь хэрэглэгчийн олж хардаггүй өгөгдлийг удирдах, боловсруулахад хэрэгтэй байдаг. Жишээлбэл, нэвтрэх шаардлагатай вэбсайтууд дээр нууц үг үүсгэх аюулгүй хэрэгслийг бий болгохын тулд PHP -ийг ашиглаж болно
Тусламж файлууд
HTML хууран мэхлэх хуудас
CSS хуурах хуудас
