Егер сіз веб -беттерді жобалағыңыз және жасағыңыз келсе, алдын ала жоспарласаңыз, бұл процесс әлдеқайда жеңіл болады. Жоспарлау кезеңінде дизайнер мен клиент олардың қажеттіліктеріне сәйкес келетін формат пен орналасуды табу үшін бірге жұмыс жасай алады. Жоспарлау процесі сайттың стиліне немесе стиліне әсер етеді, бұл веб -дизайндағы ең маңызды аспект деп айта аласыз, әсіресе бұл іскерлік мақсатта болса.
Қадам
4 -тің 1 -бөлігі: Негізгі құрылымды құру
Қадам 1. Веб -сайттың қызметін анықтаңыз
Егер сіз жеке сайт жасасаңыз, сіз жауапты білетін шығарсыз. Алайда, егер сіз басқа ұйымға, компанияға немесе адамға сайт жасасаңыз, олар не қалайтынын және сайттың функционалдығын білуіңіз керек. Бұл жерде көрсетілгендердің бәрі веб -бет аяқталғаннан кейін күшіне енеді.
- Веб -сайтқа Storefront қажет пе? Пайдаланушыларға түсініктеме беру керек пе? Пайдаланушыға кейінірек тіркелгі жасау керек пе? Сайттағы мақала бағдарланған ба? Немесе суретке бағдарланған ба? Барлық осы және басқа сұрақтар сізге сайтты құруға көмектеседі.
- Бұл жоспарлау процесін сызбаға салуға болады, әсіресе егер ол ірі компанияға арналған болса және бұл жобаны құруға көптеген адамдар қатысса.
Қадам 2. Сайт картасының диаграммасын жасаңыз (сайт картасы)
Сайт картасының диаграммасы ағындық диаграммаға ұқсас, ол пайдаланушылардың бір беттен екінші бетке қалай өтетінін көрсетеді. Бұл кезеңде сізге веб -бет қажет емес, тек жалпы ұғымдар легі. Сіз компьютерлік бағдарламаны пайдаланып диаграммалар жасай аласыз немесе қағазға өзіңіздің эскизіңізді жасай аласыз. Бұл диаграмманы иерархиялық орналасу мен веб -беттің байланысы туралы түсініктерді көрсету үшін қолданыңыз.
Қадам 3. Картаны құрастыру әдісін қолданып көріңіз
Топтық веб -әзірлеудің танымал әдістерінің бірі - әркімнің күтуін білу үшін бірнеше карталарды пайдалану. Бірнеше карталарды алыңыз және олардың әрқайсысына веб -беттің негізгі мазмұнын жазыңыз. Ең жақсы тұжырымдаманы табу үшін өз тобыңызбен бірге осы карталарды орналастырыңыз. Бұл әдіс басқалармен веб -беттерді құру кезінде бірлескен кезде қолдануға жарамды.
Қадам 4. Қағаз мен хабарландыру тақтасын немесе тақтаны пайдаланыңыз
Бұл шағын бюджет бойынша жоспарлаудың бастапқы әдісі, сіз мазмұнды тез жоюға немесе ауыстыруға және ағынды өзгертуге болады. Веб -дизайнды қағазға салыңыз, содан кейін қағаздарды жіппен қосыңыз немесе тақтаға сызықтар салыңыз. Бұл әдіс ми шабуылы сеанстарында қолдануға өте қолайлы.
5 -қадам. Мазмұн тізімін жасаңыз
Шын мәнінде, бұл веб -дизайнға қарағанда, желілерді қайта жобалауда қолданған дұрыс. Әр дайын мазмұнды немесе веб -бетті электрондық кестеге енгізіңіз. Нені алып тастауды және нені сақтау керектігін анықтау үшін осы тізімді пайдаланып, мазмұнның немесе беттің әр бөлігінің мақсатын жазып алыңыз. Сіз веб құрылымын жеңілдетіп, кейін қайта жобалау процесін жеңілдете аласыз.
4 -тің 2 -бөлігі: HTML -дің негізгі құрылымын құру
Қадам 1. Веб -беттердің иерархиясын құру үшін сымды кадр құрыңыз
HTML -дің негізгі шаблоны - бұл ең қарапайым тегтер мен үлгі (блоктар/үлгілер) мазмұнын қолдана отырып, сіз құратын сайттың жоспары. Бұл құрылым «Интернетте не көрінеді және қайда?» Деген сұраққа жауап береді. Бұл контурды құруда пішімдеу мен сәндеу қажет емес.
- Стиль параметрін таңдаудан бұрын мазмұнның құрылымы мен схемасын негізгі құрылыммен көруге болады.
- Негізгі HTML шаблондары PDF немесе суреттер сияқты тұрақты емес, сіз жаңа құрылымдарды құру үшін үлгі мазмұнын жылдам айналдыра аласыз.
- Негізгі жүйе интерактивті, бұл веб -әзірлеушілерге де, клиенттерге де пайдалы. Бұл негізгі құрылым қарапайым HTML кодымен жазылғандықтан, сіз оны шарлай аласыз және веб -беттің ауысуы қалай жұмыс істейтінін біле аласыз. Мұны PDF көмегімен жасауға болмайды.
Қадам 2. Сұр қорап әдісін қолданып көріңіз
Сұр қорапта веб -беттің мазмұнын блоктаңыз немесе бөлектеңіз, ең маңызды мазмұн жоғарғы жағында. Мазмұнды бір баған бойынша сұрыптаңыз. Мысалы, егер бет «Компания туралы» болса, онда жоғарыда компания туралы толық ақпарат, одан кейін қызметкерлер тізімі, содан кейін байланыс ақпараты және т.б.
Бұған жоғарғы және төменгі колонтитулдар кірмейді. Сұр қорап - бұл интернетте пайда болатын мазмұнның визуалды бейнесі
Қадам 3. Негізгі контур құрушы бағдарламасын қолданып көріңіз
Негізгі веб -құрылымды құру процесінде қолдануға болатын әр түрлі бағдарламалар бар. Сіз меңгеруге тиіс веб -бағдарламалау кодының (тілінің) көлемі әр бағдарлама үшін әр түрлі болады. Кейбір танымал бағдарламаларға мыналар жатады:
- Үлгі зертханасы. Бұл сайт «атомдық дизайнға» арналған, әр мазмұн үлкен веб -бетті құрайтын «молекула» болып саналады.
- Джампарттар. Бұл веб-сайт веб-негізделген жоспарлау мен кадрлық қызметтерді ұсынады. Бұл сайттар ақылы және жазылуды қажет етеді, бірақ сіз веб -бағдарламалау кодын көп меңгермей -ақ веб -құрылымды тез құра аласыз.
- Wirefy. Wirefy - бұл «атомдық дизайнды» ұсынатын тағы бір сайт. Веб -әзірлеушілер бұл құралды тегін ала алады.
Қадам 4. Қарапайым HTML белгілеуді қолданыңыз
Жақсы негізгі шаблон бастапқы сайтқа оңай айналады. Бұл үлгіні жасау барысында веб -сәндеу туралы көп ойламаңыз. Оңай түсінуге және өзгертуге болатын белгілеуді қолданыңыз.
Қарапайым базалық жүйе әлдеқайда жақсы. Белгілеудің мақсаты - құрылымды құру. Көрнекі көріністі кейінірек CSS және кеңейтілген түзету арқылы реттеуге болады
Қадам 5. Әр веб -бет үшін негізгі контур құрыңыз
Сіз кез келген веб -бетті бір негізгі құрылыммен теңестіре аласыз. Шын мәнінде, бұл сіздің сайтыңызды қарапайым және жалықтыратын етеді. Әр бетке басқа контур құрыңыз, сонда әр беттің өзіндік дизайны қажет екенін түсінесіз.
3 -ші бөлім 4: Мазмұн құру
Қадам 1. Веб -бет жасамас бұрын мазмұнды дайындаңыз
Егер сізде үлгілерді немесе толтырғыштарды пайдаланудың орнына нақты мазмұн болса, сізге веб -шолуды қарау оңайырақ болады. Сізге тым көп мазмұн қажет емес, бірақ түпнұсқаның көшірмесін қолдансаңыз, сіздің макетіңіз әлдеқайда жақсы болады.
Сізге мақаланың барлық материалдары қажет емес, бірақ, кем дегенде, нақты тақырып болуы керек
Қадам 2. Керемет мазмұн тек мәтін емес екенін ұмытпаңыз
Интернет қарапайым мәтіндік веб -беттен әлдеқайда күрделі. Келушілерді тарту және шақыру үшін керемет веб -сайт құру үшін сізге әр түрлі мазмұн қажет. Мысалға:
- Сурет.
- Дауыс.
- Бейнелер.
- Веб тарату немесе веб -ағын (Twitter)
- Facebook интеграциясы
- RSS
- Веб -арна
Қадам 3. Кәсіби фотографтан көмек сұраңыз
Егер сіз фотосуреттерді сіздің сайтыңызға қосқыңыз келсе, кәсіби фотосуреттермен толтырылған жағдайда сіздің веб -сайтыңыздан алатын бірінші әсер әлдеқайда жақсы болады. Бір жақсы фотосуреттің сапасы төмен жиырмадан асады.
Фотосурет өнерінің жаңа түлегін кәсіпте ұзақ уақыт жүрген кәсіби фотографқа қарағанда арзан шешім ретінде іздеңіз
Қадам 4. Сапалы мақалалар жазыңыз
Веб -беттегі жазбаша мазмұн сіздің веб -трафик мөлшерін анықтайды. Бұл дизайн процесінде контент құру туралы көп уайымдаудың қажеті жоқ, бірақ бұл туралы ойланудың еш зияны жоқ, себебі сіздің сайтыңыз іске қосылғаннан кейін сізге үнемі мазмұн қажет болады.
Мақаланың мазмұнынан басқа, веб -бетті құрастыру кезінде сізге қажет жазбаша материал бар. Мысалы, байланыс ақпараты, компания атауы немесе сайтта бірнеше рет қолданылатын басқа нәрсе
4/4 бөлімі: Тұжырымдамаларды веб -сайттарға айналдыру
Қадам 1. Негізгі элементтерді реттеңіз
Элементтердің бұл орналасуы сіздің сайтыңыздағы тақырыптар, сілтемелер мен шарлау мәзірлері сияқты әр бетке қолданылады. Барлық беттердің қалай көрінетінін тексеру үшін оны өте қарапайым стильде орнатыңыз. Бұл әсіресе веб -орналасу процесіне өту кезінде пайдалы.
Мәліметтер туралы көп уайымдамаңыз, тақырып қалай көрінетінін алдын ала қарауға тырысыңыз
Қадам 2. Қарапайым макетті жасаңыз
Сағаттың орнын негізгі контур бағанынан беттегі нақты орынға ауыстырудан бастаңыз. Мысалы, сіз шарлау мәзірінің үлгісін беттің сол жағына және тақырыптар тізімін оңға жылжытқыңыз келуі мүмкін.
Келесі қадамға өтпес бұрын бірнеше беттерге арналған веб -макеттермен тәжірибе жасай беріңіз. Сіз жасайтын макеттің тірі екенін сезіну үшін басқаларға қарауға рұқсат етіңіз
3 -қадам. Макет жасаңыз
Веб -сайтыңыздың макеттерін немесе үлгі беттерін жасау үшін Photoshop сияқты бағдарламаны қолданыңыз. Нұсқаулық ретінде сіз құрастырған макетті пайдаланыңыз. Сіз кескіндерді өңдеу бағдарламасының көмегімен макеттерді тезірек жасай аласыз және қажетті нәтижеге қол жеткізе аласыз. Бұл суреттердің нәтижелері кейінірек веб -бағдарламалау кодын жазу процесінде сілтеме ретінде қолданыла алады.
Жақсы көрінуі үшін нақты мазмұнды макетке салыңыз
Қадам 4. Үлгі ұғымын бастапқы мазмұнмен алмастырыңыз
Веб -беттерге мазмұн мен элементтерді қосыңыз. Әзірге веб -стиль параметрлерін бұзбаңыз, бәрін дұрыс орынға жинаңыз. Бұл сізге кейінірек енгізілетін веб -стиль өзгерістерін қарауға көмектеседі.
Қадам 5. Веб -стилі бойынша нұсқаулық жасаңыз
Стильдердің үйлесімін сақтау өте маңызды, әсіресе үлкен сайттар үшін. Егер сайт іскерлік мақсаттарға арналған болса және оның өзіндік бренді немесе стилі болса, оны сайт дизайнына біріктіру керек. Веб -беттің стилі бойынша нұсқаулық құру кезінде ескеру қажет нәрселер:
- Навигация
- Бас жазба
- Параграф
- Курсивті таңба
- Батыл мінез
- Сілтемелер (белсенді, белсенді емес, апару)
- Суретті қолдану
- Белгіше
- Тұтқасы
- тізім
Қадам 6. Веб стилін қолданыңыз
Сәйкес стиль мен дизайнды тапқан соң, оны іске асырыңыз. CSS - бұл веб -бетте немесе сайтта стильдерді енгізудің ең қарапайым әдістерінің бірі. CSS -ті пайдалану туралы егжей -тегжейлі түсіну үшін келесі нұсқауларды қараңыз.
