С развитието на толкова много езици за програмиране, стил и маркиране, изучаването на уеб дизайн става все по -сложно от всякога. За щастие има много инструменти, които да ви помогнат да започнете. Потърсете няколко основни ресурса, като онлайн уроци или актуална книга за уеб дизайна. След като сте готови да започнете, започнете с усвояване на основите на 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. Намерете някои шаблони за уебсайтове, с които да започнете да играете
Няма нищо лошо в използването на шаблони, докато изучавате основите на уеб дизайна. Потърсете шаблони за уеб страници, които харесвате, и разгледайте внимателно кода, за да добиете представа как дизайнерът е събрал страницата. Можете също така да експериментирате с промяна на кода и добавяне на ваши собствени елементи към шаблона.
Потърсете безплатни шаблони за уебсайтове, за да започнете, или експериментирайте с шаблони, които се доставят с вашия софтуер за уеб дизайн
Метод 2 от 4: Овладяване на HTML
Стъпка 1. Запознайте се с основните HTML тагове
HTML е прост език за маркиране, който се използва за форматиране на основните елементи на уебсайт. Можете да форматирате различни елементи на уебсайта си с помощта на тагове. Етикетите се показват в ъглови скоби преди и след всеки елемент и предоставят инструкции за това как този елемент ще функционира на страницата. За да затворите етикета, поставете / пред крайния етикет вътре в скобените скоби.
- Например, ако искате част от текста ви да бъде удебелен, бихте обградили елемента с етикета, така: Този текст е удебелен.
- Няколко често срещани тагове включват (параграф), (котва, която определя свързания текст) и (шрифт, който може да помогне за определяне на различни атрибути на текста, като размер и цвят).
- Други тагове определят различните части на самия HTML документ. Например, се използва за съдържане на информация за страницата, която няма да бъде видима за зрителя, като ключови думи или описание на страница, които биха се появили в резултатите от търсачката.
Стъпка 2. Научете се да използвате атрибути на етикета
Някои маркери се нуждаят от допълнителна информация, за да определят как трябва да функционират. Тази допълнителна информация се появява в началния маркер и се нарича „атрибут“. Името на атрибута се появява веднага след името на маркера, разделено с интервал. Стойността на атрибута е прикрепена към името на атрибута със знак = и е заобиколена от кавички.
- Например, ако искате да направите част от текста си червен, можете да го направите, като използвате маркера и подходящ атрибут за цвят на шрифта, като този: Този текст е червен.
- Много от ефектите, които някога са били рутинно постигани с атрибути на HTML тагове, като например задаване на различни цветове на шрифта, сега обикновено се извършват с CSS кодиране вместо това.
Стъпка 3. Експериментирайте с вложени елементи
HTML също ви позволява да поставяте елементи в други елементи, за да създадете по -сложно форматиране. Например, ако искате да дефинирате абзац и след това да начертаете курсив на част от текста в абзаца, можете да го направите по следния начин:
Обичам кодирането!
Стъпка 4. Запознайте се с празни елементи
Някои елементи в HTML не се нуждаят както от отваряне, така и от затваряне на маркери. Например, ако вмъквате изображение, имате нужда само от един маркер „img“, съдържащ името на етикета и всички други необходими атрибути (като например името на файла с изображение и всеки алтернативен текст, който искате да добавите за целите на достъпността). Например:
Стъпка 5. Разгледайте основното оформление на HTML документ
За да може вашият уебсайт, базиран на HTML, да функционира правилно, ще трябва да знаете как да форматирате цялата страница. Това включва дефиниране къде започва и свършва вашия html код, както и използване на тагове за определяне кои части от кода ще се показват в сравнение с кои са там, за да предоставят скрита основна информация. Например:
- Използвайте маркера, за да определите страницата си като HTML документ.
- След това съдържайте цялата си страница в маркерите, за да определите къде започва и свършва вашият код.
- Поставете в маркерите всяка информация, която няма да се показва на зрителя, като заглавието на страницата, ключовите думи и описанието на страницата ви.
- Определете тялото на страницата си (т.е. всеки текст и изображения, които искате зрителят да види) с маркерите.
Метод 3 от 4: Запознаване с CSS
Стъпка 1. Използвайте CSS, за да приложите стилове към вашите HTML документи
CSS е език на таблица със стилове, който ви позволява да прилагате различни елементи от стила и дизайна към вашата уеб страница. Например, ако искате да приложите избирателно определен шрифт или цвят на текста към някои от текстовите елементи на страницата си, можете да създадете CSS файл, за да направите това. След това можете да вмъкнете CSS файла във вашия HTML документ, където пожелаете.
-
Например, ако искате CSS файл да превърне всички елементи на абзаца във вашия HTML документ в зелено, можете да създадете.css файл, съдържащ редовете:
- p {
- цвят: зелен;
- }
- След това бихте записали файла с име като 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. Запознайте се с jQuery, за да улесните кодирането на JavaScript
jQuery е JavaScript библиотека, която може да опрости програмирането на Java, като ви позволи достъп до различни предварително кодирани JavaScript елементи. jQuery е чудесен инструмент, ако вече сте запознати с основите на JavaScript кодирането.
Можете да получите достъп до библиотеката на jQuery и много други ценни ресурси чрез jQuery.org, уебсайта на фондацията jQuery
Стъпка 3. Изучавайте езиците от страна на сървъра, ако се интересувате от разработване на back-end
Докато HTML, CSS и JavaScript са идеални за уеб дизайнери, които са фокусирани върху това, което потребителят вижда и прави на уебсайта, езиците от страна на сървъра са полезни, ако се интересувате повече от работата зад кулисите. Ако искате да научите за back-end разработка, фокусирайте се върху изучаването на езици като Python, PHP и Ruby on Rails.
Тези езици са полезни за управление и обработка на данни, които потребителят не вижда. Например, PHP може да се използва за изграждане на защитени инструменти за създаване на пароли на уебсайтове, които изискват вход
Помощни файлове
HTML Cheat Sheet
CSS Cheat Sheet
