فتوشاپ تصاوير شما رو قطعه قطعه ميكنه و خودش براي شما يك فايل HTML ميسازه و طبق فايل PSD تصاوير رو در كنار هم جدول بندي ميكنه !
اين روش استفاده از Slice tool براي توليد وب سايت بود ، اما براي طراحي قالب وبلاگ كمي موضوع پيچيده تر هست و بايد حداقل به صورت نصبي با برنامه فرونت پيج آشنا باشي يك توضيح كلي ميدم ولي خودت بايد حتما با فرونت پيج آشنا بشي ، اگر اون آموزشي كه گفتم رو تهيه كني كه خيلي راحت مينوني فرونت پيج رو ياد بگيري .
فرونت پيج چهار قسمت داره :
1 . Design : قسمت شي گرا ، مثلا يك عكس رو درگ ميكني داخل برنامه و با استفاده از امكانات نرم افزار عكس رو وسط صفحه قرار ميدي و ...
3 . Code : قسمت كد ، هر كار تو Design كني كدش توليد ميشه و توي اين صفحه درج ميشه ، اگر با Html آشنا باشي ميتوني خودت توي اين قسمت كد نويسي كني .
2 . Split : تركيب كد و ديزاين ، هر دو محيط بالا در كنار هم قرار دارند
4 . Preview : براي مشاهده يك پيش نمايش از صفحه اي كه طراحي كردي
اين بخش پايين و سمت چپ صفحه قرار داره و ميتوني با كليك كردن روش محيط رو تغيير بدي .
تو بايد با قسمت Design برنامه كار كني ، فرونت پيج خودش كد ها رو توليد ميكنه و در قسمت Code قرار ميده ، ابتدا تصاويرت رو كه برش دادي روي رو نت آپلود كن img98.com سايت خوبي براي اين كار هست .
بعد برو تو فرونت پيج منوي view گزينه toolbar گزينه table رو انتخاب كن ابزار table به نوار ابزار فرونت پيج اضافه ميشه ؛ با استفاده از ابزار table جدول قالب مورد نظرت رو توليد كن ، براي قالبي كه ما تو فتوشاپ درست كرديم ( اون بالا D: ) بايد يك همچين جدولي طراحي كني :
همينطور كه ميبيني اين جدول خيلي بزرگ هست و كل عرض صفحه رو گرفته براي كوچيك كردنش T گوشه سمت راست جدول رو به داخل درگ كن ... ( ناحيه اي كه در تصوير زير هاي لايت كردم ) :
همينطور كه الان ميبيني جدول كوچيك تر شده ولي به قسمت چپ صفحه چسبيده و حالت جالبي نداره براي آوردنش به وسط ( مثل بدنه همين سايت كه وسط صفحه مرورگر قرار داره ) :
روي يك قسمت از جدول كليك راست كن و گزينه table Properties رو انتخاب كن صفحه زير باز ميشه .
توضيح گزينه ها :
1 . تعيين تعداد سطر ها
2 . تعيين تعداد سطون ها
3 . مكان قرار گرفتن جدول ( چپ ، وسط ، راست ) از اينجا ميتوني center رو انتخاب كني تا جدول بياد وسط صفحه
4 . چيز مهمي نيست
5 . فاصله بين خطوط ( اون خط سفيد بين هر خط از جدول اين رو عموما رو صفر قرار ميدن )
6 . جهت جدول ( روي Right to left قرار بده ، از اين به بعد براي كوچيك و بزرگ كردن جدول بايد سمت چپ جدول رو به بيرون و يا داخل درگ كني )
7 . قطر خطوط جدول ( عموما روي صفر بايد باشه مخصوصا براي طرح هاي گرافيكي )
8 . رنگ خطوط
9 . رنگ پس زمينه كل جدول ( تمام خونه ها )
10 . ميتوني يك تصوير براي پس زمينه كل جدول قرار بدي .
11 . عرض جدول
12 . طول جدول
خوب پس توي اين پنجره مكان قرار گرفتن رو روي center جهت رو Right to left قسمت هايي رو هم كه گقتم روي صفر قرار بده ، جدول رو هم كه قبلا كوچيك كردي الان تصوير جدولت به اين صورت بايد باشه :
همينطور كه ميبيني جدول كوچيك شده ( عرضا ) و وسط صفحه قرار گرفته همينطور خطوطش بي رنگ هستند ديده نميشند ( اگر اون قسمت هايي كه روي صفر گذاشتي رو تغيير نميدادي خطوط ديده ميشدن و بعد از قرار دادن تصاوير صفحه جالب به نظر نميرسيد .
خوب الان وقت گذاشتن تصاوير هست مثلا ميخوايم هدر رو قرار بديم ، دو راه پيش رو داريم :
1 . روي اون خونه از جدول كه ميخوايم عكس رو بزاريم توش كليك ميكنيم ، در اينجا ميخوايم هدر رو قرار بديم پس ميشه خونه بالايي ، بعد با استفاده از گزينه insert picture از نوار ابزار ، دادن لينك تصوير و كليك بر روي گزينه insert عكس رو به اون خونه اضافه ميكنيم ، با اين روش عكس روي اون خونه مي افته و ما نميتونيم چيزي روش بنويسيم مثالا نميتونيم تگ <blogname> رو روش بنويسيم ...
2 . از اين روش استفاده ميكنيم : روي خونه مورد نظر كليك راست ميكنيم گزينه Cell Properties رو انتخاب ميكنيم پنجره زير باز ميشه .
- 1 . از اينجا ميتوني به اين خونه يك رنگ بدي
- 2 . از اين قسمت ميتوني يك تصوير رو پشت اين خونه بزاري ! از اين گزينه استفاده ميكنيم
حالا عكست افتاد پشت خونه طبق گفته هاي بالا سايز جدول و خونه رو طوري تعيين كن كه عكس و جدول و خونه ها با هم همخواني داشته باشند .
به همين صورت تصوير خونه هاي ديگر رو هم وارد كن .
الان وقت گذاشتن تگ هاي سرويس دهنده وبلاگ توي قسمت هاي مورد نظرت هست اگر با ورد يك آشنايي داشته باشي ميتوني به راحتي اين قسمت رو انجام بدي بعد از تگ گذاري دونه دونه تگ ها رو انتخاب ميكني ! يك كپي ازشون ميگيري ميري تو قسمت code و جايگزين قسمتي كه هايلايت هست ميكنيشون، براي چي ؟ براي اينكه تگ هاي بلاگفا و ... رو وقتي توي فرونت پيج وارد ميكني توي محيط كد درست وارد نميشند ! ما اول تو محيط طراحي ( design ) وارد ميكنيمشون بعد با موس انتخاب ميكنيم و يك كپي ازش ميگيريم ميريم تو قسمت كد دقيقا ميريم روي همون خطي كه اون تگ هست ، كلمه برامون هايلايت شده ما هم جايگزينش ميكنيم !
تموم شد ( اينجوري نگاه نكن يك ساعت وقتمو گرفت ) ، اين يك خلاصه از مطالبي بود كه بايد از اون مقاله ياد ميگرفتي ( احتمالا توش نبود
) ، حالا اگر فرصت شد و دوستان كمك كردن حتما آموزش طراحي قالب وبلاگ رو به صورت كامل تهيه ميكنيم .
راستي قسمت اول رو اختصاصي براي حميد خان گذاشتم ، عرفان جان مقالاتت رو چند روز پيش خوندم بسيار عالي بودند فقط قربون دستت يكم حجم تصاويرت رو بيار پايين پوستم كنده شد تا گرفتمشون .
موفق باشي .
