Көптөгөн программалоо, стиль жана белгилөө тилдеринин өнүгүшү менен веб -дизайнды үйрөнүү мурдагыдан да татаалдашууда. Бактыга жараша, баштоого жардам бере турган көптөгөн каражаттар бар. Бир нече негизги ресурстарды издеңиз, мисалы онлайн сабактары же веб-дизайн боюнча заманбап китеп. Баштоого даяр болгондон кийин, HTML жана CSSтин негиздерин үйрөнүүдөн баштаңыз. Андан кийин сиз JavaScript сыяктуу веб дизайн дизайнын өркүндөтө баштасаңыз болот!
Кадамдар
Метод 1дин 4: Веб -дизайн ресурстарын табуу
Кадам 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 - бул веб -сайттын негизги элементтерин форматтоо үчүн колдонулган жөнөкөй белгилөө тили. Сиз тегдердин жардамы менен веб -сайтыңыздын ар кандай элементтерин форматтай аласыз. Тегдер ар бир элементтин алдында жана кийин бурчтуу кашаада пайда болот жана ал элементтин бетте кандай иштээри жөнүндө көрсөтмөлөрдү берет. Теги жабуу үчүн, бурчтуу кашаанын ичине акыркы тегдин алдына а / коюңуз.
- Мисалы, эгер сиз тексттин бир бөлүгүн кааласаңыз калың, сиз элементти тег менен курчап алмаксыз, мындай: Бул текст калың.
- Бир нече жалпы тегдерге (параграф), (байланышкан текстти аныктоочу анкер) жана (тексттин өлчөмү жана түсү сыяктуу тексттин ар кандай атрибуттарын аныктоого жардам бере турган шрифт) кирет.
- Башка тегдер HTML документтин ар кайсы бөлүктөрүн аныктайт. Мисалы, издөө системасынын натыйжаларында пайда боло турган ачкыч сөздөр же баракча сүрөттөмөсү сыяктуу, көрүүчүгө көрүнбөй турган барак жөнүндө маалыматты камтуу үчүн колдонулат.
Кадам 2. Тег атрибуттарын колдонууну үйрөнүңүз
Кээ бир тегдер кантип иштеши керектигин тактоо үчүн кошумча маалыматка муктаж. Бул кошумча маалымат ачылуучу тегдин ичинде пайда болот жана ал "атрибут" деп аталат. Атрибут аты боштуктан кийин дароо пайда болот. Атрибут мааниси атрибут атына = белгиси менен тиркелет жана тырмакча менен курчалган.
- Мисалы, эгерде сиз тексттин бир бөлүгүн кызыл кылгыңыз келсе, тегиңизди жана тиешелүү шрифт түс атрибутун колдонсоңуз болот: Бул текст кызыл.
- HTML тегинин атрибуттары менен үзгүлтүксүз жетишилген көптөгөн эффекттер, мисалы, ар кандай шрифт түстөрүн орнотуу, азыр адатта CSS коддоосу менен жасалат.
3 -кадам. Киргизилген элементтер менен эксперимент жүргүзүңүз
HTML дагы татаал форматтоону түзүү үчүн элементтерди башка элементтердин ичине жайгаштырууга мүмкүндүк берет. Мисалы, эгер сиз абзацты аныктап, андан кийин абзацтын ичиндеги тексттин бир бөлүгүн курсив кылгыңыз келсе, муну мындай кылсаңыз болот:
Мен кодировканы жакшы көрөм!
Кадам 4. Бош элементтер менен таанышыңыз
HTMLдеги кээ бир элементтерге ачуу жана жабуу тегдеринин кереги жок. Мисалы, эгер сиз сүрөттү киргизип жатсаңыз, сизге тегдин аталышын жана башка керектүү атрибуттарды камтыган бир гана "img" теги керек (мисалы, сүрөт файлынын аталышы жана жеткиликтүүлүк үчүн кошкуңуз келген альтернативдүү текст сыяктуу). Мисалы:
Кадам 5. HTML документтин негизги макетин изилдөө
HTMLге негизделген веб-сайтыңыз туура иштеши үчүн, сиз бүт баракты кантип форматтоону билишиңиз керек. Бул сиздин html кодуңуздун кайда башталарын жана бүтөөрүн аныктоону, ошондой эле коддун кайсы бөлүктөрү көрсөтүлө тургандыгын аныктоо үчүн тегдерди колдонууну камтыйт, бул жерде жашыруун маалымат берүү үчүн. Мисалы:
- Барагыңызды HTML документи катары аныктоо үчүн тегди колдонуңуз.
- Андан кийин, кодуңуздун башталган жана аяктаган жерин аныктоо үчүн барактарыңыздын бардыгын камтыңыз.
- Барактын аталышы, ачкыч сөздөр жана баракчаңыздын сүрөттөмөсү сыяктуу көрүүчүгө көрсөтүлбөгөн маалыматты тегдердин ичине коюңуз.
- Тегиңиз менен баракчаңыздын денесин (б.а. көрүүчүнүн көрүүсүн каалаган текстти жана сүрөттөрдү) аныктаңыз.
Метод 3 3: CSS менен таанышуу
Кадам 1. HTML документтериңизге стилдерди колдонуу үчүн CSSти колдонуңуз
CSS - бул веб -баракчаңызга ар кандай стиль жана дизайн элементтерин колдонууга мүмкүндүк берүүчү стилдердин тили. Мисалы, эгер сиз баракчаңыздагы кээ бир текст элементтерине белгилүү бир шрифт же текст түсүн колдонууну кааласаңыз, анда бул үчүн CSS файлын түзө аласыз. Андан кийин, сиз каалаган жерге HTML документиңизге CSS файлын киргизе аласыз.
-
Мисалы, эгер сиз 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 китепканасы. jQuery - бул эң сонун курал, эгер сиз JavaScript коддоонун негиздери менен тааныш болсоңуз.
Сиз jQuery китепканасына жана башка көптөгөн баалуу ресурстарга jQuery.org, jQuery Фондунун сайты аркылуу кире аласыз
Кадам 3. Арткы өнүгүүгө кызыксаңыз, сервердик тилдерди үйрөнүңүз
HTML, CSS жана JavaScript веб-дизайнерлер үчүн идеалдуу, алар колдонуучунун веб-сайтта көргөндөрүнө жана жасаган нерселерине багытталган, бирок сахна артындагы жумушка көбүрөөк кызыксаңыз, сервердик тилдер пайдалуу. Эгерде сиз арткы өнүгүү жөнүндө билгиңиз келсе, Python, PHP жана Ruby on Rails сыяктуу тилдерди үйрөнүүгө басым жасаңыз.
Бул тилдер колдонуучу көрбөгөн маалыматтарды башкаруу жана иштетүү үчүн пайдалуу. Мисалы, PHP кирүүнү талап кылган веб -сайттарда коопсуз сырсөз түзүү куралдарын куруу үчүн колдонулушу мүмкүн
Жардам файлдары
HTML Cheat Sheet
CSS Cheat Sheet
