Көптеген бағдарламалау, стиль және белгілеу тілдерінің дамуымен веб -дизайнды үйрену бұрынғыдан да күрделене түсуде. Бақытымызға орай, жұмысты бастауға көмектесетін көптеген құралдар бар. Интернеттегі оқулықтар немесе веб-дизайн бойынша жаңартылған кітап сияқты бірнеше негізгі ресурстарды іздеңіз. Бастауға дайын болғаннан кейін, 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. Бастау кезінде ойнауға болатын веб -сайт үлгілерін табыңыз
Веб -дизайн негіздерін үйрену кезінде шаблондарды қолданудың еш жаман жері жоқ. Сізге ұнайтын веб -беттің шаблондарын іздеңіз және дизайнер бетті қалай біріктіргенін түсіну үшін кодты мұқият қарап шығыңыз. Сіз сондай -ақ кодты өзгертуге және шаблонға өз элементтеріңізді қосуға тәжірибе жасай аласыз.
Бастау үшін ақысыз веб -сайт шаблондарын іздеңіз немесе веб -дизайн бағдарламалық жасақтамасымен бірге келетін шаблондармен тәжірибе жасаңыз
2 -ші әдіс 4: HTML тілін меңгеру
Қадам 1. Негізгі HTML тегтерімен танысыңыз
HTML - бұл веб -сайттың негізгі элементтерін пішімдеу үшін қолданылатын қарапайым белгілеу тілі. Сіз тегтердің көмегімен веб -сайтыңыздың әр түрлі элементтерін пішімдеуге болады. Тегтер бұрыштық жақшаларда әр элементтің алдында және кейін пайда болады және бұл элементтің бетте қалай жұмыс істейтіні туралы нұсқаулар береді. Тегті жабу үшін бұрыштық жақшалардың ішіне соңғы тегтің алдына а / қойыңыз.
- Мысалы, егер сіз мәтіннің бір бөлігін алғыңыз келсе қалың, сіз элементті тегпен қоршап алатын боласыз: Бұл мәтін қалың.
- Бірнеше жалпы тегтер (параграф), (байланыстырылған мәтінді анықтайтын якорь) және (мәтіннің өлшемі мен түсі сияқты әр түрлі атрибуттарын анықтауға көмектесетін қаріп).
- Басқа тегтер HTML құжатының әр түрлі бөліктерін анықтайды. Мысалы, іздеу жүйесінің нәтижелерінде пайда болатын кілт сөздер немесе бет сипаттамасы сияқты көрерменге көрінбейтін бет туралы ақпаратты қамту үшін қолданылады.
Қадам 2. Тег атрибуттарын қолдануға үйреніңіз
Кейбір тегтер қалай жұмыс істеу керектігін көрсету үшін қосымша ақпарат қажет. Бұл қосымша ақпарат ашылатын тегте пайда болады және ол «атрибут» деп аталады. Атрибут атауы бос орынмен бөлінген тег атауынан кейін бірден пайда болады. Атрибут мәні атрибут атауына = белгісімен бекітіледі және тырнақшамен қоршалған.
- Мысалы, егер сіз мәтіннің кейбір бөлігін қызыл еткіңіз келсе, оны тег пен сәйкес қаріп түсінің атрибутын қолдана отырып жасай аласыз: Бұл мәтін қызыл.
- Бір кезде HTML тегінің атрибуттарымен әр түрлі қаріп түстерін орнату сияқты қол жеткізілген көптеген әсерлер, әдетте, орнына CSS кодтауымен жасалады.
3 -қадам. Кірістірілген элементтермен тәжірибе жасаңыз
HTML сонымен қатар күрделі пішімдеу үшін элементтерді басқа элементтерге орналастыруға мүмкіндік береді. Мысалы, егер сіз абзацты анықтап, содан кейін абзац ішіндегі мәтіннің бір бөлігін курсивке айналдырғыңыз келсе, оны келесідей орындауға болады:
Мен кодтауды жақсы көремін!
Қадам 4. Бос элементтермен танысыңыз
HTML -дегі кейбір элементтерге ашу және жабу тегтері қажет емес. Мысалы, егер сіз кескінді кірістірсеңіз, сізге тег атауы мен басқа да қажетті атрибуттар (мысалы, сурет файлының атауы және қол жетімділік мақсатында қосқыңыз келетін кез келген балама мәтін) бар жалғыз «img» белгісі қажет. Мысалға:
Қадам 5. HTML құжатының негізгі орналасуын зерттеңіз
HTML-ге негізделген веб-сайтыңыз дұрыс жұмыс істеуі үшін сіз бүкіл бетті қалай пішімдеу керектігін білуіңіз керек. Бұл сіздің html кодының қайдан басталатынын және аяқталуын анықтауды, сондай -ақ кодтың қандай бөліктері көрсетілетінін және жасырын фондық ақпаратты қамтамасыз ету үшін қай жерде болатынын анықтау үшін тегтерді қолдануды қамтиды. Мысалға:
- Бетті HTML құжаты ретінде анықтау үшін тегті пайдаланыңыз.
- Әрі қарай, сіздің кодтың қай жерде басталатынын және қай жерде аяқталатынын анықтау үшін барлық бетті тегтерде орналастырыңыз.
- Көрсеткішке көрсетілмейтін ақпаратты, мысалы, бет атауын, кілт сөздерді және сіздің бет сипаттамаңызды тегтердің ішіне орналастырыңыз.
- Тегтер көмегімен беттің негізгі бөлігін (яғни, көрермен көргісі келетін кез келген мәтін мен суреттерді) анықтаңыз.
3 -ші әдіс 4: CSS -пен танысу
Қадам 1. HTML құжаттарына стильдерді қолдану үшін CSS пайдаланыңыз
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 кітапханасы, ол JavaScript-тің алдын ала кодталған әр түрлі элементтеріне қол жеткізуге мүмкіндік беретін Java бағдарламалауды жеңілдетеді. jQuery - бұл тамаша құрал, егер сіз JavaScript кодтау негіздерімен таныс болсаңыз.
Сіз jQuery кітапханасына және басқа да көптеген құнды ресурстарға jQuery Foundation сайты арқылы қол жеткізе аласыз
3-қадам. Егер сіз артқы жағын дамытуға қызығушылық танытсаңыз, серверлік тілдерді үйреніңіз
HTML, CSS және JavaScript қолданушы веб-сайтта не көретініне және жасайтынына бағытталған веб-дизайнерлер үшін өте қолайлы, ал егер сіз сахнаның артындағы жұмыстарға көбірек қызығушылық танытсаңыз, серверлік тілдер пайдалы болады. Егер сіз артқы даму туралы білгіңіз келсе, Python, PHP және Ruby on Rails сияқты тілдерді үйренуге назар аударыңыз.
Бұл тілдер пайдаланушы көрмейтін деректерді басқаруға және өңдеуге пайдалы. Мысалы, PHP кіруді қажет ететін веб -сайттарда құпия сөз құрудың қауіпсіз құралдарын құру үшін пайдаланылуы мүмкін
Анықтама файлдары
HTML алдау парағы
CSS алдау парағы
