Өөрийн вэбсайтаа хэрхэн бүтээх вэ: 16 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:05

Хэрэв та хүсвэл цаасан дээрээс вэб рүү үнэгүй нэвтрэх бүрэн гарын авлага, ялангуяа ээлтэй вэбмастерууд танд хэд хэдэн давуу талтай боловч туршлага, мэдлэг багатай байсан ч гэсэн та сайт үүсгэж, вэб дээр байршуулж болно. …

Алхам 1: Багаж хэрэгсэл, материал, үндсэн ур чадвар

Танай сайтыг хийхдээ танд дараахь зүйлс хэрэгтэй болно: Багаж хэрэгсэл - Тавиас доош настай компьютер - Dreamweaver -ийн хуулбар (заавал биш), гэхдээ энэ бол миний мэддэг зүйл бөгөөд танд үзүүлэх болно - Photoshop -ийн хуулбар, тийм ч чухал биш боловч Сайхан харагдах сайттай байхыг хүсдэг хэн бүхэнд заавал байх ёстой - Таны компьютер дээрх интернет холболт, илүү хурдан байх нь зүйтэй (учир нь энэ нь ажлыг хурдан болгодог) Материалууд - Санаа - Танай сайтын зориулалтаас шалтгаалан зарим дискний зай - Цаг хугацаа, тийм ээ үнэ цэнэтэй материал - Хэрэв танд хэрэгтэй бол ажиллах имэйл хаяг, тэд Gmail болон hotmail -ээс ангид байх Үндсэн ур чадвар - Компьютер, интернетээ хэрхэн ашиглах талаархи үндсэн мэдлэг - Энэ бол кодгүй, ойлгомжгүй зүйл бөгөөд энэ нь хүмүүст зориулагдсан болно. Сайт хийхийг хүсч байгаа боловч яаж хийх талаар ямар ч ойлголтгүй - Загвар зохион бүтээх зарим ур чадвар ашиглахад хялбар байх болно - Photoshop -ийг хэрхэн ашиглахыг мэдэх нь сайхан байх болно, paint. NET эсвэл GIMP

Алхам 2: Эхлээд үзье

Та ямар сайт хийхийг хүсч байгаагаа мэдмэгц дизайныхаа шийдвэрийг гаргах болно.

Сайтын үндсэн хөргөгч, түүний хэв маяг, хүмүүс үүнийг хэрхэн удирдахыг хүсч байгаагаа бодоорой. Хэрэв та үүнийг бизнес эсвэл клубт зориулж хийж байгаа бол энэ сайт нь компани/клубын хөргөгчийг тусгасан бөгөөд тухайн компаний тухай юмсыг дуурайдаг эсвэл үүн дээр суурилсан онцлог шинж чанартай байх нь хамгийн сайн арга юм. Таны сайтуудын навигаци нь хэд хэдэн зүйл байж болох бөгөөд ерөнхийдөө зүүн ба баруун талын цэс, дээд талын цэсийг ашигладаг (эдгээр нь энэ сайтын толгой шиг гарч ирдэг) Хэрэв та сайтыг өөрөө хийж байгаа бол өнгө, дизайны онцлогийг сонгоорой. танд таалагдаж, тэндээс анхааруулах үг ч гэсэн очно уу. Үнэхээр зөрчилдөж буй өнгийг бүү ашигла, охид флюресцент ягаан өнгийг сонгохгүй байхыг хичээгээрэй. Энэ сайтын ашигладаг Yahoo дэлгүүрүүд гэх мэт зүйлийг ашиглах нь илүү хялбар болно.

Алхам 3: Сайтыг эхлүүлэх

Яг эндээс бид "Баримт бичиг" рүүгээ ороод "Миний вэбсайт эсвэл сайтын нэрийг ашиглаарай. Тэр хавтасны дотор" хуудас ", нөгөө нь" файл "гэж нэрлэгддэг" зургууд "гэсэн дуудлага хийнэ үү. (гэж нэрлэгддэг файл нь таны сайтыг бүтээх явцад ашиглаж болох бусад бүх файлуудад зориулагдсан болно.) Dreamweaver програмыг ажиллуулаад жаахан файлын хажуугаар сайт гэж нэрлэгдэх цэсийг харах болно. дэвшилтэт табыг ашиглаарай (учир нь дамжуулахад хялбар байдаг), одоо вэбсайтынхаа нэрийг сайтын нэрийн хайрцагт оруулна уу. Та "локал эх хавтас" гэсэн хайрцгийг харах болно, энэ бол таны сайтын нэрээр хийсэн хавтас юм. Дараагийн хайрцгийг 'Default images folder' гэсэн шошготой бөгөөд өөрийн үндсэн фолдерт байгаа нэртэй нэртэй фолдерыг сонгоно уу. Хоёр хайрцгийг ганцааранг нь үлдээгээрэй.

Алхам 4: Дараа нь гацчихъя

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

Загвар дээрээ та толгой хийх хэрэгтэй болно, энэ бол хуудасны дээд талд байрладаг гол сурталчилгаа бөгөөд ихэвчлэн сайт/компанийн нэр, уриа, сайтын сэдвийг тусгасан зураг, лого байдаг.. Миний өгч чадах хамгийн сайн хэмжээс бол 760 x 100-200 өндөр бөгөөд энэ нь цэсийн мөр хаашаа явахаас хамаарна. Өргөн нь 760 хэмжээтэй тул дэлгэц дээр 800x600 хэмжээтэй зураг ажиллуулж байх үед ч гэсэн хөтчийн цонхонд таарах болно (хэрэв та сайтын талыг харж чадахгүй бол энэ нь ашиггүй болно) Таны цэсийн товчлуур (хэрэв та тэдгээрийг хэт өндөр болгохгүй бол би зөвлөж байна. Өндөр, пикселийн 30 пиксел нь олон зүйлээс хамаардаг боловч минийх ихэвчлэн 100 - 1500 пиксел байдаг. Дараа нь та огт хүчин чармайлт шаарддаггүй флаш товчлууруудыг ашиглаж магадгүй юм. (Dreamweaver -ийн хувьд)

Алхам 5: Загвар хийх …

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

Алхам 6: Загварыг үргэлжлүүлэн хийх. зохион байгуулалт

Одоо бид загвар зохион бүтээх ажлыг эхлүүлж байна.

Хүснэгт оруулах товч эсвэл хүснэгт зурах товчийг дарна уу. Хүснэгт хийхийн тулд зүгээр л чирээд үзээрэй, 3x3 -ийг сонгох нь эхлэхэд тохиромжтой газар юм. Таны хийх ёстой хамгийн эхний зүйл бол хүснэгтийг 800 пикселийн өргөнтэй болгох явдал юм, та доод хэсэгт байгаа шинж чанаруудын мөрийг харж болно, одоо нүднүүдийн дээд мөрийг сонгоод хулганы баруун товчийг дараад цэсийн баруун товчлуур дээр очиж нүдийг нэгтгэх сонголтыг сонгоно уу. шинээр үүсгэсэн нүдийг толгойн зургийнхаа өндрийг болгоорой. Энэ үед хүснэгтийнхээ шинж чанарууд руу очоод 'cellpad' болон 'border' утгуудын тэг утгыг оруулна уу. Энэ нь хүснэгт нь эцсийн хэрэглэгчид байдаггүй боловч бүх зүйлийг байрандаа хадгалдаг гэсэн үг юм. Одоо бид үүнийг толгойн зурган дээр байрлуулж, сайтын зургийн хавтсанд хадгалах ёстой, гэхдээ хэрэв энэ нь Dreamweaver биш бол та файлыг тэнд хуулахыг хүсч байгаа эсэхийг асуух болно. Зураг оруулахын тулд товчлууруудынхаа хажуу тийш харна уу (дээрх таб нь нийтлэг байх ёстой), хайрцган дахь модны дүрс бүхий товчлуурыг олоорой (ихэнх програмууд ижил төстэй тэмдэг ашигладаг), үүн дээр дарахад харилцах цонх гарч ирнэ. зүгээр л өөрийн файлыг хайж олоод давхар товшино уу. Хэрэв таны дүрс буруу газар гарч ирвэл курсор буруу нүдэнд байна. Одоо та хүснэгтийн цэсийг хүссэн талдаа нүдийг хувааж, мөрүүд багануудын хажуугаар өнгөрч байгааг санаарай. Цэсийн товчлуурын хүснэгтийн хайрцгийг таны бодож байгаа шиг өргөн болгож, товчлууруудаа зөв өргөнтэй болго (хэрвээ та флэш товчлуур авахыг хүсвэл үүнийг үл тоомсорлоорой) Одоо нүднийхээ дотор 1 мөр, олон багана бүхий хүснэгт хий. товчлуурууд (та үүнийг сайтынхаа төлөвлөгөөнөөс мэдэж байх ёстой, би танд тусалж чадахгүй, энэ бол таны сонголт) эсвэл хэвтээ цэсийн хувьд 1 багана, товчлуурууд шиг олон мөр.

Алхам 7: Цэсийн товчлууруудыг нэмэх

Үүнийг хийх цөөн хэдэн арга бий. Хэрэв та энгийн зургийн товчлуурыг хүсч байвал (товчлуур шиг харагдах товчлууртай зураг) Дараа нь та зургийг ердийн байдлаар оруулаад одоохондоо энэ болоогүй байна. Дараа нь бид тэдэнд линк оруулах болно.

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

Алхам 8: Хэрэглэх загвар үүсгэх

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

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

Алхам 9: Зарим контент нэмэх

Хуудсуудаа контентоо нэмж, хуудсандаа хийсэн фолдерт хадгалж, зургуудаа хийсэн зургийн хавтсанд оруулахаа мартуузай. Миний ашиглаж байсан хуурамч контентыг тэмдэглээрэй, үүнийг Лорем Испсум гэдэг бөгөөд энэ нь латинаар сайн муугийн тухай түүх юм. Вэб, график дизайнерууд үүнийг ашиглан бүтээгдэхүүн нь жинхэнэ текстээр хэрхэн харагдах талаар ойлголт өгөх болно. Эдгээр цэнхэр хайрцгууд нь танд ч бас засварлах боломжтой бүсүүд байгаа гэж найдаж байна.

Алхам 10: Одоо бид холбоосоо хийж байна

Ашиглаж байсан загвараа нээнэ үү (энэ хайрцагыг санаарай, одоо тоглох болно) Нэг минутанд таны цэсийн товчлуурууд зүгээр л зургууд болно (хэрэв тэдгээр нь флаш бол доороос харна уу) Одоо танд хуудсууд байгаа бол тэдгээр нь жинхэнэ товчлуур болж чадна., Тэд өнхрөх эсвэл энгийн зураг байгаа эсэхээс үл хамааран гэрийнхээ товчлуур дээр дарж, линкийг өөрчлөх эсвэл линк хийх (хувилбараас хамаарна) руу очиход харилцах цонх гарч ирэх бөгөөд зүгээр л нүүр хуудасныхаа файлыг хайж олоод дээр нь дарна уу. Одоо энэ нь хуудастай холбогдсон байна, үлдсэн товчлууруудаа давтаж, баримтаа хадгалаарай, хэрэв dreamweaver хэрэв та баримт бичигт үндэслэн бүх хуудсыг өөрчлөхийг хүсч байвал тийм гэж хэлээрэй.

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

Алхам 11: Цөөхөн хэдэн зөвлөмж, ашигтай санаанууд

Хэрэв та XP дээр ажиллаж байгаа бол (магадгүй vista орсон байж магадгүй) XP resertizer гэж нэрлэгддэг зураг солигч нь хулганы баруун товчлуур дээр дарж хэмжээг өөрчлөх боломжийг олгодог бөгөөд та хэсэг болгон хийж нэр бүрийн төгсгөлд эрхий хуруугаа нэмж болно. Фото зургийн галлерейн хувьд үндсэн хуудсан дээрх зургуудынхаа дагуу хийсэн өнгөц зургийг ашиглан товчлуурууд шиг том зургийн файл руу холбож өгвөл энэ нь илүү хурдан ачаалах, галлерейн хуудсыг багасгах боломжийг олгодог.

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

Алхам 12: Индекс хуудас үүсгэх

Одоогийн байдлаар ихэнх вэб хостууд индекс хуудас шаарддаг бөгөөд энэ нь 'index.htm' гэж нэрлэгддэг нүүр хуудасны хуулбар байж болно (үүнийг та нэрлэх хэрэгтэй болно) эсвэл сайт оруулах замаар хөгжилтэй хуудас хий. Хэрэв та ямар нэгэн зүйлийг амьдруулахын тулд анимацтай байж болох юм. Тэр онцгой мөчид ойртож байгааг та мэдрэх ёстой.

Алхам 13: Биднийг хөтлөгчтэй болгоё

Одоо та миний илгээсэн сайт дээр өөрийгөө олох болно, би үүнийг сонгосон, учир нь үнэгүй хостууд үнэхээр гайхалтай бөгөөд маш их зүйлийг зөвшөөрдөг, 8gig хадгалах сан, 300GB зурвасын өргөн/сар гэх мэт.

Тиймээс бүртгэлийн алхамуудыг дагаж, дансаа идэвхжүүлээрэй, тэр файлын менежерийг бүү хараарай, энэ нь бидэнд хэрэггүй болно. Өөрийн данс руу очоод FTP дансныхаа нэр, хэрэглэгчийн нэр, нууц үгийг (хост дансны нууц үгээ оруулаад) устгаарай. Сайт руу орж, сайтуудыг засаад өөрийн сонголтыг сонгоод дэвшилтэт таб руу очоод туршилтын сервер рүү очно уу. (Миний мэдээлэл алсын мэдээлэл дээр байгаа боловч тест хийх сервер бол сайтыг байршуулах хамгийн хялбар арга юм), зурган дээрх шиг мэдээллээ оруулна уу.

Алхам 14: Та үүнийг мэдэрч чадах уу?

Сайтыг байршуулах цаг боллоо … Та вэбсайттай болох гэж байна.

Өөрийн сайтын файлууд/хөрөнгийн мөрөнд очоорой, энэ нь үнэхээр өөр харагдаж байгаа нь эргэлзээгүй, харах цэс дээр дарж, туршилтын серверийг сонгоно уу. Dreamweaver таны FTP нууц үгийг хадгалсан байна. Алсын хост руу холбогдох товчийг дарна уу (гурван хөгжилтэй хэлбэртэй). Таны холбогдсон гэж хэлсний дараа файлуудыг оруулах товчийг дарна уу. Энэ бол дээш харсан сум юм. (Дараа нь ашиглахын тулд та данс руугаа нэвтэрч, компьютер дээрээ алдсан файлуудаа авахын тулд get файлыг ашиглаж болно.) Үүнийг дарахад та сайтыг бүхэлд нь байрлуулахыг хүсч байгаа эсэхийг асуух болно. Энэ бүхэн үр дүнтэй байдаг тул жижиг шинэчлэлтүүдийн оронд та орлуулах файлуудыг илгээж болно. Энэ нь 'index.htm' болоход түүнийг орлуулах эсэхийг асуух болно, тийм гэж хэлээрэй, эс тэгвээс таны сайт 15 хоногийн дараа унах болно, тиймээс бид эхлээд манай сайтыг хийсэн.

Алхам 15: Одоо та нэр хүсч байна уу?

Тиймээс дэд сайт байх санаа нь таны эго -д нөлөөлж байна, танд сонголт байна, домэйн нэр худалдаж аваарай (хостинг хийхгүйгээр үнэтэй биш, та.com.org.co.uk,.net -ээс өөрт тохирохыг нь сонгоорой. Эсвэл. Бүх зүйлийг үнэгүй авахыг хүсдэг залуугийн хувьд зүгээр л цэгийн сайт руу ороорой. Тэд таны хуудсыг толин тусгал болгодог тул та үүнийг өөрийн нүүр хуудас эсвэл индекс хуудсыг сайтын холбоос болгож, killerjackalope.tk үүнийг авсан гэж хэлэхийг хүсч байна уу?

Алхам 16: Илүү ихийг авах уу?

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

Энэ нь өмнөх хичээлээс ирсэн гэдгийг би мэднэ, гэхдээ та нүүр хуудсандаа сайт хийх гэж оролдоход ийм зүйл тохиолддог гэдэгт би итгэлтэй байна, энэ бол аймшигтай зүйл бөгөөд танд Dreamweaver хулгайлж, дараа нь нүүр худалдаж аваарай гэж хэлмээр байна. Дараагийн зааварчилгаа, хэрхэн хөгжилтэй hulk зураг хийх.