Төв блок.

Сайтын цэс, үе хийхээсээ өмнө бид эхлээд төвийн блокийг хийж эхлэе. Дизайныг арай чөлөөтэй байлгах үүднээс цэсний үе болон толгой хэсгийн хооронд 50 px зайг үлдээе. Цэсийг агуулах үеийн өндөр 35 px байх тул төвийн блок сайтын дээд хязгаараас 385 px зайнаас эхлэнэ. Иймд 350 ба 385 px дээр хоёр хэвтээ чиглүүлэгчийг нэмэн байрлуулъя. Төвийн блок 365 px өндөртэй байх учраас бид 650 px түвшинд бас нэгэн чиглүүлэгчийг байршуулна. Чиглүүлэгчдийг үүсгэе. Үүний тулд Move Tool (V) хэрэгслийг аваад ажлын хэсгийг дээр байрлах чиглүүлэгчийн шугамаас чирэлт хийн зохих түвшинд шугамыг байрлуулж өгнө.

Текстийн блок

Сайтын дизайн хийх ажлаа үргэлжлүүлэхийн өмнө төв блокийн хоёр хэсгийг заагласан тусгаарлагч үүсгэж өгөх хэрэгтэй. Тусгаарлагчаар бид 1 px өргөнтэй босоо шугамыг ашиглах болно. Үүний тулд

• Single Column Marquee Tool (M) хэрэгслийг аваад 800 px түвшинд босоо шугам үүсгэнэ.
• Wrapper бүлэгт шинэ үе нэмээд түүнийг Separator гэж нэрлэе.
• Foreground өнгийг хар болгоод Alt + Backspace товчийг даран тусгаарлагчийг будан өгнө
• Ctrl + D товчийг даран сонголтыг болиулна
• Separator үеийн Opacity параметрийг 30% болгоно
• Rectangle Marquee Tool (M) хэрэгслийг аваад тусгаарлагчийн илүү хэсгийг сонгон аваад Delete товчийг даран арилган өгнө. Тусгаарлагчийг слайдшоу хэсгийн өндөртэй тэнцүү байхаар үлдээнэ.

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

Цэсний мөр.

Цэсний мөрийг үе /Tab/ хэлбэрээр зохион байгуулах нь их эвтэйхэн байдгийг зохиогч дурдсан болно. Ингээд Wrapper бүлгийн Box бүлэгт шинээр Tabs гэсэн бүлэг үүсгээд түүн дотроо Previous, Home, Portfolio, About, Contact, Next гэсэн 6 үеүүдийн бүлгийг нэмэн өгнө. Зохиогч нэг элементийг 1-ээс дээш үетэй болоход тэдгээрт зориулсан бүлгийг нээгээд байгаа. Энэ аргачлал нь фотошоп дээр ажиллах ажиллагааг цэгцтэй ойлгомжтой болгоход их хэрэгтэй мэт надад санагдсан. Одоохондоо тесктийг бичихгүйгээр бүтцийг үүсгэх болно. Үр дүн доорх байдлаар харагдах юм.

Бидний дараагийн хийх зүйл бол блогийн хэсэг юм. Бэлтгэл ажлын хүрээнд бидэнд нэмэлт чиглүүлэгч хэрэгтэй. Сайтын төв хэсгээс блогийн хэсгийг 50px зайтай байршуулъя. Иймээс бид 700px -ийн түвшинд шинээр чиглүүлэгч байрлуулна. Түүнээс гадна Content бүлэгт шинээр Blog нэртэй үеүүдийн бүлгийг нэмээрэй. Өмнөх хичээлүүдийг үзсэн бол эдгээрийг амархан хийж сурсан байх.

Толгойн мөр.

Сайтын загвар дээр энэ хэсэгт сонингийн зураг оруулахаар төлөвлөсөн байгаа. Таны татан авсан файлууд дотор knewsticker.png нэртэй файл байгааг фотошоп дээр нээгээд сайтын дизайны файлд оруулан ирээд Blog бүлэгт оруулан үед icon нэр өгнө.

Бидний дараагийн хийх зүйл бол Twitter модулийн хэсэг байгаа. Модул блогийн хэсэгтэй төстэй учраас амархан хийгдэнэ. Үеүүдийн бүлгийн хувьд блогийн хэсэгтэй ижилхэн зохион байгуулах хэрэгтэй. Иймээс Content бүлэгт шинээр Twitter нэртэй үеүүдийн бүлгийг нэмээрэй.

Толгойн мөр.

Бид блог хэсгийг хийхдээ толгойн хэсгийг Header Bar бүлэгт оруулсан. Үеүүдийн бүлгийг ашиглах нь эмх цэгцтэй байхын зэрэгцээ ямар давуу талтайг бид одоо хийх ажлаар батлан харах болно. Твиттер хэсгийн толгойн хэсгийг хийхийн тулд

Энэ хичээлээр бид сайтын хөл хэсгийг хэрхэн хийхийг үзснээр сайтын макетыг фотошоп программ дээр хийх цуврал хичээлүүд дуусна. Сайтын агуулга хэсгийн араас хөл хэсгийн текстийг шууд залгасан макет байж болох ч энэ нь миний бодлоор зохицол муутай санагддаг тул бид энэ хэсэгт сайтын толгой хэсгийн зургаас оруулаад макетаа дуусгах нь дээр гэж үзлээ.
Эхлээд бид хөл хэсэгт зориулан Footer үеүүдийн бүлгийг нэмээд түүн дотроо Image, Bar гэсэн хоёр бүлгийг бас нэмэн өгье. Бүлэг нь бие даасан өөрөөр хэлбэл Content, Status Bar, Header бүлгүүдтэй нэг түвшингийнх байх ёстойг анхаарна уу. Хөл хэсэг нь сайтын макетын тусдаа логик хэсэг шүү дээ.