Вэбсайт хэрхэн зохион бүтээх вэ (зурагтай)

Агуулгын хүснэгт:

Вэбсайт хэрхэн зохион бүтээх вэ (зурагтай)
Вэбсайт хэрхэн зохион бүтээх вэ (зурагтай)

Видео: Вэбсайт хэрхэн зохион бүтээх вэ (зурагтай)

Видео: Вэбсайт хэрхэн зохион бүтээх вэ (зурагтай)
Видео: PS5 Россия Распаковка PlayStation 5 CFI-1118A Дисковая версия 825GB 8K 4K 120FPS HDR 2024, May
Anonim

Энэхүү wikiHow нь мэргэжлийн мэт харагдаж, сайн ажилладаг вэбсайтыг хэрхэн яаж хийхийг танд заадаг. Таны вэбсайтын дизайны дийлэнх хэсэг нь эцсийн дүндээ танд хамаатай боловч вэбсайт хийхдээ зайлсхийх, хийх ёстой зарим чухал зүйлүүд байдаг.

Алхам

2 -р хэсгийн 1: Вэбсайтаа хэрхэн яаж дизайн хийх вэ

Вэбсайт хийх алхам 1
Вэбсайт хийх алхам 1

Алхам 1. Вэбсайт бүтээгчийг ашиглахыг хүсч байгаагаа тодорхойл

Эхнээс нь бүтээсэн вэбсайтууд нь HTML кодчиллын талаар нэлээд нарийвчилсан ойлголт шаарддаг боловч Weebly, Wix, WordPress эсвэл Google Sites гэх мэт үнэгүй хостингийн үйлчилгээг ашиглан вэбсайт үүсгэх боломжтой. Вэбсайт бүтээгчид анх удаа дизайнеруудад HTML ашиглахаас хамаагүй хялбар байдаг.

  • Хэрэв та өөрийн вэбсайтыг кодлохоор шийдсэн бол HTML болон CSS кодчиллыг хоёуланг нь сурах хэрэгтэй болно.
  • Хэрэв таны вэбсайтыг бүтээхэд цаг хугацаа, энерги зарцуулах нь тийм ч таатай санагддаггүй бол та өөрийн сайтыг бий болгохын тулд вэбсайт зохион бүтээгчийг хөлсөлж болно. Чөлөөт дизайнерууд нэг цагт 30 доллараас 100 долларын үнэтэй байж болно.
Вэбсайт хийх 2 -р алхам
Вэбсайт хийх 2 -р алхам

Алхам 2. Сайтаа газрын зураг дээр байрлуул

Вэбсайт бүтээгчийг нээхээс өмнө та вэбсайтаа хэдэн хуудас байлгахыг хүсч байгаагаа, эдгээр хуудас бүрийн агуулга ямар байх ёстойг, мөн нүүр хуудас, "Тухайн тухай" гэх мэт чухал хуудсуудын ерөнхий зохион байгуулалтыг мэдэж байх ёстой. хуудас.

Хэрэв та ямар контент гарч ирэх ёстойг тодорхойлохын оронд тус бүрийг нь бүдүүлгээр зурсан бол таны вэбсайтын хуудсуудыг төсөөлөхөд хялбар байх болно

Вэбсайт хийх алхам 3
Вэбсайт хийх алхам 3

Алхам 3. Ухаалаг дизайныг ашигла

Шинэлэг санаануудын талаар хэлэх зүйл байгаа ч гэсэн таны вэбсайтын үндсэн загвар нь дараахь удирдамжийг дагаж мөрдөх ёстой.

  • Навигацийн сонголтууд (жишээлбэл, өөр өөр хуудасны табууд) хуудасны дээд талд байх ёстой.
  • Хэрэв та цэсийн дүрс (☰) ашигладаг бол энэ нь хуудасны зүүн дээд буланд байх ёстой.
  • Хэрэв та хайлтын мөр ашиглаж байгаа бол энэ нь хуудасны баруун дээд талд байх ёстой.
  • Ашигтай холбоосууд (жишээ нь "About" хуудас эсвэл "Бидэнтэй холбоо барих" хуудасны линкүүд) хуудас бүрийн хамгийн доод хэсэгт байх ёстой.
Вэбсайт хийх 4 -р алхам
Вэбсайт хийх 4 -р алхам

Алхам 4. Тууштай байх

Текстийн фонт, өнгөт палитр, зургийн сэдэв, дизайны сонголтуудаас үл хамааран вэбсайт дээрээ ижил шийдвэрийг ашиглаж байгаа эсэхийг шалгаарай. Нүүр хуудсанд огт өөр шрифт ашиглаж байх үед "About" хуудасны нэг фонт эсвэл өнгөний схемийг ашиглах нь үнэхээр аймшигтай санагдаж магадгүй юм.

  • Жишээлбэл, хэрэв та сайтынхаа нүүр хуудсанд зөвхөн хүйтэн өнгө хэрэглэдэг бол дараагийн хуудсанд тод, чанга өнгийг бүү оруулаарай.
  • Ялангуяа өнгө нь динамик (жишээлбэл, хөдөлгөөнт) хэлбэрээр харагддаг бол цөөн тооны вэб хэрэглэгчдийн хувьд эпилепси үүсгэдэг болохыг анхаарна уу. Хэрэв та сайт дээрээ ийм өнгө хэрэглэхээр шийдсэн бол холбогдох хуудсуудын өмнө эпилепсийн эсрэг анхааруулга нэмж оруулаарай.
Вэбсайт хийх алхам 5
Вэбсайт хийх алхам 5

Алхам 5. Навигацийн сонголтыг нэмнэ үү

Нүүр хуудасны дээд хэсэгт вэбсайтынхаа чухал хуудсуудын шууд холбоосыг байрлуулах нь анх удаа ирж буй хүмүүсийг чухал ач холбогдолтой контент руу чиглүүлэхэд тусална. Ихэнх сайт бүтээгчид эдгээр холбоосыг анхдагч байдлаар нэмдэг.

Вэбсайт дээрх хуудас бүрийг зөвхөн хуудасны хаягаар хандахаас илүү вэбсайтынхаа сонголтуудыг дарж үзэх боломжтой байх нь чухал юм

Вэбсайт хийх алхам 6
Вэбсайт хийх алхам 6

Алхам 6. Бие биенээ нөхөх өнгийг ашигла

Бусад төрлийн дизайны нэгэн адил вэбсайтын дизайн нь өнгө үзэмж сайтай хослол дээр тулгуурладаг; Үүнээс шалтгаалан өнгөний өнгийг хамтад нь сонгох нь маш чухал юм.

Хар, цагаан, саарал нь хаанаас эхлэхээ мэдэхгүй байгаа бол сайн хослол юм

Вэбсайт хийх алхам 7
Вэбсайт хийх алхам 7

Алхам 7. Минималист загварыг ашиглах талаар бодоорой

Минимализм нь хүйтэн өнгө, энгийн график, хар цагаан текст хуудас, аль болох бага гоёл чимэглэлийг дэмждэг. Минимализм нь гоёмсог элементүүдийг шаарддаггүй тул маш их хөдөлмөр шаардалгүйгээр вэбсайтаа мэргэжлийн, сэтгэл татам харагдуулах хялбар арга юм.

  • Олон вэбсайт бүтээгчид вэбсайтаа тохируулахдаа сонгож болох "минималист" сэдэвтэй болно.
  • Минимализмын өөр хувилбар бол илүү хатуу шугам, тод өнгө, тод текст, хамгийн бага дүрслэлийг ашигладаг "харгислал" юм. Харгислал нь минимализмтай харьцуулахад цөөн тооны дагалдагчтай боловч таны вэбсайтын агуулгаас хамааран дизайны хэрэгцээнд илүү нийцэж магадгүй юм.
Вэбсайт хийх алхам 8
Вэбсайт хийх алхам 8

Алхам 8. Өвөрмөц сонголт хийх

Шулуун шугамууд болон сүлжээгээр түгжигдсэн вэб элементүүд нь аюулгүй бооцоо боловч хэд хэдэн өвөрмөц стилист шийдвэр гаргах нь хоёулаа таны сайтын онцлог шинж чанарыг өгч, танай сайтыг онцлоход тусална.

  • Давхар харагдах байдлыг бий болгохын тулд вэбсайтын элементүүдийг тэгш бус байдлаар байрлуулах эсвэл давхцсан элементүүдийг ашиглан чиг хандлагыг өөрчлөхөөс бүү ай.
  • Гоёмсог, хурц өнцөг, дөрвөлжин хэлбэртэй элементүүд ("картанд суурилсан" танилцуулга гэж нэрлэдэг) нь дугуй хэлбэртэй, зөөлөн элементүүдээс хамаагүй тааламжтай байдаг.

2 -р хэсгийн 2: Вэбсайтын гүйцэтгэлийг хэрхэн нэмэгдүүлэх вэ

Вэбсайт хийх алхам 9
Вэбсайт хийх алхам 9

Алхам 1. Гар утасны оновчлолын сонголтуудын давуу талыг ашиглах

Мобайл хөтөч нь ширээний хөтчүүдээс илүү их вэб урсгалыг эзэлдэг бөгөөд энэ нь таны вэбсайтын мобайл хувилбарт анхаарлаа хандуулах хэмжээ нь таны ширээний вэбсайтын хөгжүүлэлтийг дор хаяж тэнцүү байх ёстой гэсэн үг юм. Вэбсайт бүтээгчдийн ихэнх үйлчилгээ нь таны сайтын мобайл хувилбарыг автоматаар үүсгэдэг боловч та мобайл сайтынхаа талаар дараах мэдээллийг санаж байхыг хүсч байна.

  • Товчнууд (жишээлбэл, сайтын холбоосууд) том хэмжээтэй бөгөөд товшиход хялбар эсэхийг шалгаарай.
  • Гар утсан дээр үзэх боломжгүй онцлогуудыг (жишээлбэл, Flash, Java гэх мэт) хэрэгжүүлэхээс зайлсхий.
  • Вэбсайтдаа зориулж гар утасны апп хийх талаар бодож үзээрэй.
Вэбсайт хийх алхам 10
Вэбсайт хийх алхам 10

Алхам 2. Нэг хуудсанд хэт олон зураг ашиглахаас зайлсхий

Ширээний болон гар утасны хөтөч хоёулаа олон тооны зураг эсвэл видео харуулсан хуудсыг ачаалахад бэрхшээлтэй тулгардаг. Вэб дизайнд зураг чухал боловч хэд хэдэн хуудсыг нэг хуудаснаас хэтрүүлэн ашиглах нь шаардлагагүй ачаалал өгөхөд хүргэдэг бөгөөд энэ нь тухайн хуудсанд зочлохоос урьдчилан сэргийлэх болно.

Ерөнхийдөө та вэбсайтынхаа хуудсыг дөрвөн секундын дотор ачаалахыг хүсч байна

Вэбсайт хийх алхам 11
Вэбсайт хийх алхам 11

Алхам 3. "Холбоо барих" хуудсыг нэмнэ үү

Бараг бүх байгуулагдсан вэбсайтууд холбоо барих мэдээлэл (жишээ нь, утасны дугаар, имэйл хаяг) агуулсан "Бидэнтэй холбоо барих" хуудастай болохыг та анзаарах болно; зарим сайтууд энэ хуудсан дээр асуултын маягттай байдаг. "Холбоо барих" хуудсыг нэмж оруулснаар вэбсайт үзэгчид тантай шууд холбоо тогтоох бөгөөд ингэснээр болзошгүй бухимдлыг арилгах шийдлийг нэмж өгөх болно.

Вэбсайт хийх алхам 12
Вэбсайт хийх алхам 12

Алхам 4. Захиалгат 404 хуудас үүсгэх

Хэн нэгэн таны вэбсайтад тохируулагдаагүй эсвэл байхгүй байгаа тодорхой хуудсанд зочлоход "404 Error" вэб хуудас гарч ирнэ. Ихэнх хөтөч нь 404 хуудастай байдаг боловч та вэбсайтаа бүтээгчийн тохиргоон дотроос өөрийн хуудсыг өөрчилж болно. Хэрэв тийм бол дараах дэлгэрэнгүй мэдээллийг оруулсан эсэхээ шалгаарай.

  • Хөнгөн сэтгэлийн алдааны мессеж (жишээ нь: "Баяр хүргэе, та бидний алдааны хуудсыг оллоо!")
  • Сайтын нүүр хуудас руу буцах линк
  • Нийтлэг үздэг линкүүдийн жагсаалт
  • Таны вэбсайтын зураг эсвэл лого
Вэбсайт хийх алхам 13
Вэбсайт хийх алхам 13

Алхам 5. Боломжтой бол хайлтын мөрийг ашиглана уу

Хэрэв таны вэбсайт үүсгэх арга нь вэбсайтдаа хайлтын мөр оруулахыг дэмждэг бол үүнийг хийхийг зөвлөж байна. Энэ нь хэрэглэгчид таны навигацийн сонголтыг дарахгүйгээр тодорхой хуудас эсвэл зүйл рүү хурдан шилжих боломжтой болно.

Таны үзэгчид туршилт, алдааг ашиглахгүйгээр ерөнхий нэр томъёог хайхыг хүсч байвал хайлтын мөрүүд бас хэрэгтэй болно

Вэбсайт хийх алхам 14
Вэбсайт хийх алхам 14

Алхам 6. Нүүр хуудсандаа хамгийн их цаг зарцуулах

Хэн нэгэн таны вэбсайтын нүүр хуудсанд ирэхэд тэр таны вэбсайтын сэдвийг шууд олж авах ёстой; Нэмж дурдахад, нүүр хуудасны бүх элементүүд, түүний дотор навигацийн сонголтууд болон бусад зургууд хурдан ачаалагдах ёстой. Таны нүүр хуудас дараахь талуудтай байх ёстой.

  • Үйлдлийн дуудлага (жишээ нь, дарах товч эсвэл бөглөх маягт)
  • Навигацийн хэрэгслийн самбар эсвэл цэс
  • Гоёмсог график (жишээлбэл, нэг хатуу зураг, видео эсвэл дагалдах бичвэр бүхий жижиг бүлэг зургууд)
  • Таны вэбсайтын үйлчилгээ, сэдэв эсвэл анхаарлаа хандуулахтай холбоотой түлхүүр үгс
Вэбсайт хийх алхам 15
Вэбсайт хийх алхам 15

Алхам 7. Вэбсайтаа олон платформ дээр олон хөтөч дээр туршиж үзээрэй

Энэ нь маш чухал юм, учир нь өөр өөр хөтөч нь вэбсайтынхаа талыг өөрөөр зохицуулж чаддаг. Вэбсайтаа сурталчилж эхлэхээсээ өмнө Windows, Mac, iPhone, Android платформ дээрх дараах хөтөч дээр вэбсайтаа ашиглаж үзээрэй.

  • Гүүгл Кром
  • Firefox
  • Safari (зөвхөн iPhone ба Mac)
  • Microsoft Edge ба Internet Explorer (зөвхөн Windows)
  • Android-ийн өөр өөр гар утсан дээр суулгасан хөтөч (жишээлбэл, Samsung Galaxy, Google Nexus гэх мэт)
Вэбсайт хийх алхам 16
Вэбсайт хийх алхам 16

Алхам 8. Вэбсайтаа нас ахих тусам үргэлжлүүлэн шинэчлээрэй

Загварын чиг хандлага, линк, гэрэл зураг, ойлголт, түлхүүр үг зэрэг нь цаг хугацаа өнгөрөх тусам өөрчлөгддөг тул шинэчлэгдэж байхын тулд та вэбсайтдаа үргэлжлүүлэн өөрчлөлт оруулах хэрэгтэй болно. Энэ нь вэбсайтынхаа гүйцэтгэлийг бусад ижил төстэй вэбсайтуудын хамт дор хаяж гурван сар тутамд нэг удаа шалгаж байхыг шаарддаг (илүү зохимжтой).

HTML -ийн үндсэн тусламж

Image
Image

HTML бүхий вэб хуудасны дээж

WikiHow болон бүх дээжийг нээнэ үү.

Image
Image

HTML хууран мэхлэх хуудас

WikiHow болон бүх дээжийг нээнэ үү.

Image
Image

Энгийн вэб хуудасны жишээ

WikiHow болон бүх дээжийг нээнэ үү.

Зөвлөмж

  • Вэбсайтад нэвтрэх боломж бол вэбсайт хөгжүүлэх бас нэг чухал тал юм. Үүнд сонсголын бэрхшээлтэй үзэгчдэд зориулсан тайлбар, хараагүй хүмүүст зориулсан аудио тайлбар, танай вэбсайт таталт өдөөж болзошгүй нөлөө үзүүлсэн тохиолдолд гэрэл мэдрэмтгий байдлын анхааруулга гэх мэт зүйлс орно.
  • Ихэнх вэбсайт бүтээгчид өөрийн дуртай элементүүдийг нэмж оруулахаасаа өмнө сайтынхаа зохион байгуулалт, дизайныг цементлэхэд ашиглаж болох загваруудын багцтай байдаг.

Анхааруулга

  • Ихэнх сайт бүтээгчид үнэ төлбөргүй байдаг; Гэсэн хэдий ч хэрэв та өөрийн домэйныг ашиглахыг хүсч байвал (жишээлбэл, "www.yourname.wordpress.com" гэхийн оронд "www.yourname.com") сар бүр эсвэл жилийн төлбөр төлөх шаардлагатай болно.
  • Хулгай хийхээс зайлсхийж, зохиогчийн эрхийн бүх хуулийг дагаж мөрдөөрэй: зөвшөөрөлгүйгээр вэбээс санамсаргүй зураг, тэр ч байтугай бүтцийн элементүүдийг бүү оруулаарай.

Зөвлөмж болгож буй: