طراحي يك صفحه وب در فتوشاپ
طراحي يك صفحه وب در فتوشاپ
روش هاي مختلفي براي ايجاد صفحات وب وجود دارد . در حاليكه برخي از طراحان مايل هستند ابتدا طرح اوليه خود را تكميل كرده و سپس اقدام به كد نويسي هاي پيچيده كنند ، برخي ديگر از طراحان نيز بيشتر مايل به استفاده اوليه از نمونه هاي گرافيكي در طرح بندي و محيط سايت وب خود هستند. در اين مقاله بيشتر به بررسي روش دوم و با استفاده از يك برنامه گرافيكي اقدام به طراحي يك صفحه وب مي كنيم .
در وهله اول مراحلي كه در طراحي اوليه يك سايت بايد مد نظر قرار داد را بررسي مي كنيم . شروع كار طراحي سايت وب از طريق انجام كار اوليه بر روي يك تصوير در برخي موارد آسان تر از ساير روش هاست .بدين منظور :1- ابتدا برنامه فتوشاپ را اجرا كرده و سپس فايلي را كه قصد استفاده از آن به عنوان صفحه اصلي سايت تان داريد را انتخاب كنيد.2- پس از دست يابي به تصوير مورد نظر و جهت استفاده در سايت بايد آن را به تكه هاي مناسبي تقسيم كنيد. در اين مرحله با استفاده از اطلاعات كلي مربوط به كدنویسی HTML نحوه كار جداول را بررسی كرده و تصوير را به شيوه اي تقسيم بندي خواهیم كرد كه در جداول مورد استفاده قرار گيرند. 3- مرحله بعد ايجاد سندي است كه كد هاي HTML مربوطه بر اساس تكه هاي موجود در آن ايجاد می شوند و در نتيجه در وب سايت قابل استفاده خواهند بود. براي آسان تر شدن كار می توانید فايل مورد نياز كه در اين قسمت بر روي آن كار خواهيم كرد را با كليك در اينجا بر روي سيستم خود دريافت و ذخيره كنيد.
1- رابط ايجاد كننده تصوير
1-1 رابط طراحي اين قسمت در واقع بخش اساسي و مشكل مربوط به فرايند ايجاد سايت در فتوشاپ مي باشد. طراحي رابط يكي از موارد مهمي است كه بايد مورد توجه قرار گيرد و قابليت استفاده از وب سايت در واقع به دقت در آن بر مي گردد. از اين رو بهتر است در هنگام طراحي صفحات اين جمله را به خاطر داشته باشيد كه ، در صورتي كه بازديد كنندگان نتوانند به راحتي به مطالب موجود در سايت شما دسترسي پيدا كنند و يا طرح بندي محيط شما سبب گيج شدن آنها شود ديگر به سراغ سايت شما نخواهند آمد . 2-1 برنامه ريزي اوليه براي هر طراحي جديد و پيش از شروع كار بايد از قبل برنامه ريزي متناسب با آن را انجام دهيد .براي مثال ، پيش بيني اينكه در آينده قصد افزودن چه بخش هايي را در سايت خود داريد. در صورت عدم توجه به اين موضوع يا برنامه ريزي نامناسب مجبور به انجام تمامي كار هاي مربوط به طراحي از ابتداي كار خواهيد بود . و اگر برنامه ريزي دقيقي انجام داده باشيد امكانات و وقت شما به هدر نخواهد رفت و كارتان نيز به آساني پيش رفت خواهد كرد . تصور اينكه در آينده به چه مرحله اي خواهيد رسيد و اهداف تان چيست از نكات بسيار مهم و حائز اهميت برنامه ريزي طراحي در يك سايت موفق است.3-1 طرح بندي شروع كار ما با صفحه اي در ابعاد 740*460 پيكسل مي باشد . در اين فضا سرصفحه ، محيط هاي مرور و محيط هاي مفاهيم مورد نياز را قرار خواهیم داد.در صورتي كه به فايلي كه به فايل دقت كنيد ، نوارهاي آبي تيره موجود در بالا و پائين صفحه به محل قرار گيري نوار مرور اشاره دارند. در صورتي كه مفاهيم سايت شما زياد است و مايليد تا صفحات تان به سرعت بارگذاري شوند استفاده از اين شيوه بسيار موثر و مناسب است . بعد از ايحاد تصوير در فتوشاپ زمان آماده كردن هر بخش جهت استفاده در يك سند HTML است.
2- تكه كردن تصوير هر چند براي ايجاد تصاوير گرافيكي مي توانيد از نرم افزارهاي مختلفي استفاده كنيد ، اما توصيه من به شما استفاده از نرم افزار فتوشاپ مي باشد . در كنار فتوشاپ برنامه ديگري به نام ImageReady قرار دارد كه شما مي توانيد براي ذخيره تصاوير مناسب در وب ، ايجاد تصاوير انيميشن Gif ، و برش تصاوير موجود در فتوشاپ از آن استفاده كنيد . تكه كردن در واقع به اين مفهوم اشاره دارد كه ما تصوير مربوط به محيط اصلي را گرفته و آن را به بخش هاي كوچك تر تقسيم كنيم و پس از آن به راحتي هر بخش را در يك جدول HTML وارد مي كنيم .با اين كار امكان استفاده از طرحي همانند تصوير بزرگ و اوليه در كد HTML وجود خواهد داشت بدون اينكه مجبور به استفاده از تصوير بزرگ باشيد . و مي توانيد محيط تصوير را به بخش هايي تقسيم كنيد كه بتوانيد هر كدام از آنها را به يك بخش لينك كنيد . همانطور كه در اين مثال مشاهده مي كنيد ، هنگام تقسيم و برش يك تصوير بزرگ امكان بهينه سازي جداگانه هر بخش براي كم كردن حجم نهايي فايل وجود دارد . همچنين برخي از تكه ها در بخش هاي مختلف تكرار شده اند و به همين دليل مي توانيد از يك تصوير به جاي همه آنها استفاده كنيد . نمونه تصويري كه من با اين فايل ايجاد كرده ام تنها 26.1k حجم داشته است . در واقع كاربري كه از مودم 28.8k استفاده مي كند تنها نياز به 9 ثانيه زمان براي بارگذاري صفحه دارد . تصويري كه آماده تقسيم شدن در فتوشاپ است را در طرح زير مشاهده مي كنيد :
همانطور كه ملاحظه مي كنيد خطوط آبي رنگ بصورت متقاطع در تصوير وجود دارند . اين خطوط در واقع همان خطوط راهنماي موجود در برنامه فتوشاپ هستند كه به سادگي و از طريق كشيدن محيط خط كش به روي صفحه قرار مي گيرند . سپس مي توانيد آنها را در محل هايي كه قصد برش تصوير را داريد قرار دهيد .در مرحله بعد تصوير تان را به داخل برنامه ImageReady منتقل كرده و گزينه Slices را از منو انتخاب كنيد . در منوي مربوطه گزينه Create Slices from Guides را انتخاب كنيد . طرح شما بايد مطابق شكل زير باشد.
توجه داشته باشيد كه تمامي خطوط راهنماي ايجاد شده داراي شماره منحصري هستند. اين نام گذاري بر مبناي پيش فرضي است كه در برنامه ImageReady وجود دارد . حال كه تكه هاي تصوير خود را ايجاد كرديد در كادر محاوره اي گزينه Show Slices را انتخاب كنيد. من چيزي شبيه به طرح زير را مشاهده كردم :
در اين مرحله سه تكه را با هم تركيب كرده و آنها را با يك عنوان نام گذاري مي كنيم . بدين منظور گزينه Slice Selection Tool را انتخاب كنيد . دو خط راهنماي عمودي قسمت سر صفحه را به سه قسمت تقسيم مي كنند . و ما قصد داريم تا سر صفحه را به يك تكه تصوير تبديل كنيم. پس از انتخاب گزينه Slice Selection Tool در بالاي گوشه سمت چپ تكه شماره 01 كليك كنيد. سپس كليد Shift را پائين نگه داريد و در تكه هاي 02 و 03 نيز كليك كنيد. سپس در تكه وسطي راست كليك كرده و از كادر محاوره اي نمايان شده گزينه Combine Slices را انتخاب كنيد. اكنون طرح شما بايد به شكل زير تبديل شده باشد :
سه تكه بالايي در اين مرحله به يك بخش تقسيم شده اند و با يك حاشيه زرد رنگ مشخص شده اند . براي نام گذاري تكه به كادر محاوره اي Show Slices برويد . در فيلد name كلمه header را وارد كنيد. و اين كار را براي محيط پاصفحه نيز تكرار كنيد و آن را footer نام گذاري كنيد. هنوز تكه هايي وجود دارند كه به نام گذاري نياز دارند . در پائين سر صفحه و در سمت چپ آن بايد تكه شماره 02 را مشاهده كنيد- يك مربع كوچك آبي رنگ . از آنجا كه ابعاد اين تكه با ابعاد بخش هاي شماره 04، 08 و 10 مساوي هستند تنها يكي از آنها را ذخيره مي كنيم. در حاليكه ابزار تصوير Slice Selection Tool فعال است در تكه شماره 02 كليك كرده و نام blue_square را به آن بدهيد. سپس در تكه شماره 05 كليك كرده و نام gray_bar را به آن بدهيد. اگر دقت كنيد متوجه متناسب بودن ابعاد اين قسمت با تكه شماره 07 خواهيد شد. از اين رو تنها نياز به ذخيره همين قسمت خواهيد داشت. بهينه سازي و ايجاد فايل خروجي در اين قسمت اقدام به بهينه سازي و سپس ايجاد فايل خروجي مناسب براي وب خواهيم كرد. براي انتخاب تكه gray_bar از ابزار Slice Selection Tool استفاده كنيد . كليد Shift را پائين نگه داشته و در تكه blue_square كليك كنيد. از آنجا كه از لحاظ رنگ بندي هر دو اين قسمت ها يكسان هستند مي توان در يك مرحله هر دو قسمت را بهينه سازي كرد. از تنظيمات براي بهينه سازي هر دو تكه بصورت يك فايل Gif استفاده كنيد:
سپس از ابزار Slice Selection Tool براي انتخاب سرصفحه استفاده كنيد و در حاليكه كليد Shift را پائين نگه داشته ايد قسمت پاصفحه را نيز انتخاب كنيد. از آنجا كه رنگ بندي اين قسمت ها داراي ويژگي پيچيده تري است بهتر است اين قسمت ها را در حالت jpeg ذخيره كنيد .
براي ايجاد فايل خروجي ابزار Slice Selection Tool را انتخاب كرده و سپس تكه هاي header, footer, blue_square و gray_bar را انتخاب كنيد:
در منوي فايل گزينه Save Optimized As را انتخاب نمائيد.
گزينه هايي كه در اين قسمت وجود دارند عبارتند از : 1- انتخا ب مقصد و محل ذخيره فايل ها و پوشه ها 2- در قسمت هاي مربوطه مي توانيد تعيين كنيد كه فايل تنها بصورت HTML ذخيره شود و صفحه html اي ايجاد كند كه كاملا با طرح بندي شما متناسب باشد. 3- گزينه سوم – ذخيره تصاير انتخاب شده- را نيز انتخاب كنيد. در كادر محاوره اي Save as type گزينه Images Only را انتخاب كرده و سپس در زير آن گزينه Selected Slices را انتخاب كنيد. بصورت پيش فرض برنامه ImageReady تمامي تصاوير انتخاب شده را در يك پوشه ذخيره مي كند. در صورتي كه قصد چنين كاري را نداريد مي توانيد در كادر Output Settings كليك كرده و در بخش پائيني كادر محاوره اي گزينه Put images in folder را غير انتخاب كنيد. البته بهتر است قبل از ايجاد تكه هاي مربوطه پوشه اي براي فايلهاي اصلي و در آن پوشه نيز زيرپوشه هاي مورد نياز تان را ايجاد كنيد. در اين حالت به راحتي مي توانيد هر تصوير را در پوشه مورد نظرتان ذخيره كنيد. پس از انتخاب موقعيت ذخيره فايل ها گزينه Save را كليك كنيد.
مرحله بعد ايجاد صفحه HTML اي است كه از آن به عنوان الگويي در وب سايت خود استفاده مي كنيم . نگران بخش هاي ذخيره نشده در فايل نباشيدو بخش مركزي تصوير در بردارنده مفاهيم و محتواي سايت است .
3- قرار دادن تصاوير تكه شده در فايل HTMLبراي ايجاد الگوي مورد نظر در اين مرحله تصاوير مان را در داخل سند HTML قرار مي دهيم :1- جدولي با پنج رديف و 3 ستون ايجاد كنيد.دقت كنيد تا كد قبل از جدول و كد نيز بعد از آن قرار گيرد. اين امر سبب قرار گرفتن جدول شما در مركز صفحه مي شود .2- در رديف بالا ، مقدار col span مربوط به سلول چپ اول را 3 قرار دهيد . در اين قسمت بايد تصوير header.jpg را وارد كنيد. 3- در رديف زير سر صفحه ، مقدار ارتفاع هر سلول را 18 پيكسل قرار دهيد . تا متناظر با تصوير blue_square.gif شود . و عرض سلول را 16 پيكسل در نظر بگيريد. 4- براي رديف چهارم نيز همين كار را تكرار كنيد. 5- در اين مرحله تصوير blue_square.gif را در سلول هاي بيروني رديف هاي دوم و چهارم وارد كنيد. تصوير gray_bar.gif را در داخل سلول اول رديف سوم قرار دهيد (سمت چپ) و اين مراحل را براي ستون سوم تكرار كنيد. 6- رنگ هاي زمينه هر دو سلول را CCCCCC # قرار دهيد . رنگ هاي زمينه ستون دوم رديف دوم و چهارم را برابر 374256 # قرار دهيد . در ستون مركزي رديف سوم ( جائيكه مفاهيم قرار مي گيرند ) رنگ زمينه CCCCCC #را انتخاب كنيد. 7- در رديف پنجم ، اولين سلول را انتخاب كرده و مقدار col span آن را برابر 3 قرار دهيد . سپس مي توانيد فايل footer.jpg را در آن قرار دهيد . 8- سرانجام ارتفاع رديف اول، دوم ، چهارم و پنجم را تعيين كنيد و رديف سوم را تعيين نشده رها كنيد تا بر مبناي مفاهيم وارد شده اندازه ان تغيير كند . در اين مرحله صفحه شما بايد شبيه طرح زير باشد :
از آنجا كه رنگ زمينه سفيد به خوبي با طرح كار نمي كند ، من يك تصوير كاشي براي پشت سر رابط ايجاد كرده ام.
بدين منظور مي توانيد يك تصوير در فتوشاپ ايجاد به عرض 1 پيكسل و ارتفاع 2 پيكسل ايجاد كنيد. مربعي با عرض و ارتفاع 1 پيكسل انتخاب كنيد و رنگ آن را متناسب با رنگ طرح تان انتخاب كنيد. سپس آن قسمت را به پائين جابجا كنيد . تصوير را با استاندارد gif و تعداد رنگ 2-color ذخيره كنيد .
به سادگي تصوير را در كد background مربوط به tag الگوي جديدتان قرار داده تا تمام محيط را بپوشاند . براي مشاهده طرح نهايي در صفحه HTML اينجا را كليك كنيد.
رنگ زمينه سلول هاي تصوير gray_bar بايد بصورت #CCCCCC انتخاب شوند. بطوريكه در هنگام بزرگ كردن صفحه به همان رنگ ديده شود . از آنجا كه رنگ زمينه سفيد به خوبي با طرح كار نمي كند ، من يك تصوير كاشي براي پشت سر رابط ايجاد كرده ام.
روش هاي مختلفي براي ايجاد صفحات وب وجود دارد . در حاليكه برخي از طراحان مايل هستند ابتدا طرح اوليه خود را تكميل كرده و سپس اقدام به كد نويسي هاي پيچيده كنند ، برخي ديگر از طراحان نيز بيشتر مايل به استفاده اوليه از نمونه هاي گرافيكي در طرح بندي و محيط سايت وب خود هستند. در اين مقاله بيشتر به بررسي روش دوم و با استفاده از يك برنامه گرافيكي اقدام به طراحي يك صفحه وب مي كنيم .
در وهله اول مراحلي كه در طراحي اوليه يك سايت بايد مد نظر قرار داد را بررسي مي كنيم . شروع كار طراحي سايت وب از طريق انجام كار اوليه بر روي يك تصوير در برخي موارد آسان تر از ساير روش هاست .بدين منظور :1- ابتدا برنامه فتوشاپ را اجرا كرده و سپس فايلي را كه قصد استفاده از آن به عنوان صفحه اصلي سايت تان داريد را انتخاب كنيد.2- پس از دست يابي به تصوير مورد نظر و جهت استفاده در سايت بايد آن را به تكه هاي مناسبي تقسيم كنيد. در اين مرحله با استفاده از اطلاعات كلي مربوط به كدنویسی HTML نحوه كار جداول را بررسی كرده و تصوير را به شيوه اي تقسيم بندي خواهیم كرد كه در جداول مورد استفاده قرار گيرند. 3- مرحله بعد ايجاد سندي است كه كد هاي HTML مربوطه بر اساس تكه هاي موجود در آن ايجاد می شوند و در نتيجه در وب سايت قابل استفاده خواهند بود. براي آسان تر شدن كار می توانید فايل مورد نياز كه در اين قسمت بر روي آن كار خواهيم كرد را با كليك در اينجا بر روي سيستم خود دريافت و ذخيره كنيد.
1- رابط ايجاد كننده تصوير
1-1 رابط طراحي اين قسمت در واقع بخش اساسي و مشكل مربوط به فرايند ايجاد سايت در فتوشاپ مي باشد. طراحي رابط يكي از موارد مهمي است كه بايد مورد توجه قرار گيرد و قابليت استفاده از وب سايت در واقع به دقت در آن بر مي گردد. از اين رو بهتر است در هنگام طراحي صفحات اين جمله را به خاطر داشته باشيد كه ، در صورتي كه بازديد كنندگان نتوانند به راحتي به مطالب موجود در سايت شما دسترسي پيدا كنند و يا طرح بندي محيط شما سبب گيج شدن آنها شود ديگر به سراغ سايت شما نخواهند آمد . 2-1 برنامه ريزي اوليه براي هر طراحي جديد و پيش از شروع كار بايد از قبل برنامه ريزي متناسب با آن را انجام دهيد .براي مثال ، پيش بيني اينكه در آينده قصد افزودن چه بخش هايي را در سايت خود داريد. در صورت عدم توجه به اين موضوع يا برنامه ريزي نامناسب مجبور به انجام تمامي كار هاي مربوط به طراحي از ابتداي كار خواهيد بود . و اگر برنامه ريزي دقيقي انجام داده باشيد امكانات و وقت شما به هدر نخواهد رفت و كارتان نيز به آساني پيش رفت خواهد كرد . تصور اينكه در آينده به چه مرحله اي خواهيد رسيد و اهداف تان چيست از نكات بسيار مهم و حائز اهميت برنامه ريزي طراحي در يك سايت موفق است.3-1 طرح بندي شروع كار ما با صفحه اي در ابعاد 740*460 پيكسل مي باشد . در اين فضا سرصفحه ، محيط هاي مرور و محيط هاي مفاهيم مورد نياز را قرار خواهیم داد.در صورتي كه به فايلي كه به فايل دقت كنيد ، نوارهاي آبي تيره موجود در بالا و پائين صفحه به محل قرار گيري نوار مرور اشاره دارند. در صورتي كه مفاهيم سايت شما زياد است و مايليد تا صفحات تان به سرعت بارگذاري شوند استفاده از اين شيوه بسيار موثر و مناسب است . بعد از ايحاد تصوير در فتوشاپ زمان آماده كردن هر بخش جهت استفاده در يك سند HTML است.
2- تكه كردن تصوير هر چند براي ايجاد تصاوير گرافيكي مي توانيد از نرم افزارهاي مختلفي استفاده كنيد ، اما توصيه من به شما استفاده از نرم افزار فتوشاپ مي باشد . در كنار فتوشاپ برنامه ديگري به نام ImageReady قرار دارد كه شما مي توانيد براي ذخيره تصاوير مناسب در وب ، ايجاد تصاوير انيميشن Gif ، و برش تصاوير موجود در فتوشاپ از آن استفاده كنيد . تكه كردن در واقع به اين مفهوم اشاره دارد كه ما تصوير مربوط به محيط اصلي را گرفته و آن را به بخش هاي كوچك تر تقسيم كنيم و پس از آن به راحتي هر بخش را در يك جدول HTML وارد مي كنيم .با اين كار امكان استفاده از طرحي همانند تصوير بزرگ و اوليه در كد HTML وجود خواهد داشت بدون اينكه مجبور به استفاده از تصوير بزرگ باشيد . و مي توانيد محيط تصوير را به بخش هايي تقسيم كنيد كه بتوانيد هر كدام از آنها را به يك بخش لينك كنيد . همانطور كه در اين مثال مشاهده مي كنيد ، هنگام تقسيم و برش يك تصوير بزرگ امكان بهينه سازي جداگانه هر بخش براي كم كردن حجم نهايي فايل وجود دارد . همچنين برخي از تكه ها در بخش هاي مختلف تكرار شده اند و به همين دليل مي توانيد از يك تصوير به جاي همه آنها استفاده كنيد . نمونه تصويري كه من با اين فايل ايجاد كرده ام تنها 26.1k حجم داشته است . در واقع كاربري كه از مودم 28.8k استفاده مي كند تنها نياز به 9 ثانيه زمان براي بارگذاري صفحه دارد . تصويري كه آماده تقسيم شدن در فتوشاپ است را در طرح زير مشاهده مي كنيد :
همانطور كه ملاحظه مي كنيد خطوط آبي رنگ بصورت متقاطع در تصوير وجود دارند . اين خطوط در واقع همان خطوط راهنماي موجود در برنامه فتوشاپ هستند كه به سادگي و از طريق كشيدن محيط خط كش به روي صفحه قرار مي گيرند . سپس مي توانيد آنها را در محل هايي كه قصد برش تصوير را داريد قرار دهيد .در مرحله بعد تصوير تان را به داخل برنامه ImageReady منتقل كرده و گزينه Slices را از منو انتخاب كنيد . در منوي مربوطه گزينه Create Slices from Guides را انتخاب كنيد . طرح شما بايد مطابق شكل زير باشد.
توجه داشته باشيد كه تمامي خطوط راهنماي ايجاد شده داراي شماره منحصري هستند. اين نام گذاري بر مبناي پيش فرضي است كه در برنامه ImageReady وجود دارد . حال كه تكه هاي تصوير خود را ايجاد كرديد در كادر محاوره اي گزينه Show Slices را انتخاب كنيد. من چيزي شبيه به طرح زير را مشاهده كردم :
در اين مرحله سه تكه را با هم تركيب كرده و آنها را با يك عنوان نام گذاري مي كنيم . بدين منظور گزينه Slice Selection Tool را انتخاب كنيد . دو خط راهنماي عمودي قسمت سر صفحه را به سه قسمت تقسيم مي كنند . و ما قصد داريم تا سر صفحه را به يك تكه تصوير تبديل كنيم. پس از انتخاب گزينه Slice Selection Tool در بالاي گوشه سمت چپ تكه شماره 01 كليك كنيد. سپس كليد Shift را پائين نگه داريد و در تكه هاي 02 و 03 نيز كليك كنيد. سپس در تكه وسطي راست كليك كرده و از كادر محاوره اي نمايان شده گزينه Combine Slices را انتخاب كنيد. اكنون طرح شما بايد به شكل زير تبديل شده باشد :
سه تكه بالايي در اين مرحله به يك بخش تقسيم شده اند و با يك حاشيه زرد رنگ مشخص شده اند . براي نام گذاري تكه به كادر محاوره اي Show Slices برويد . در فيلد name كلمه header را وارد كنيد. و اين كار را براي محيط پاصفحه نيز تكرار كنيد و آن را footer نام گذاري كنيد. هنوز تكه هايي وجود دارند كه به نام گذاري نياز دارند . در پائين سر صفحه و در سمت چپ آن بايد تكه شماره 02 را مشاهده كنيد- يك مربع كوچك آبي رنگ . از آنجا كه ابعاد اين تكه با ابعاد بخش هاي شماره 04، 08 و 10 مساوي هستند تنها يكي از آنها را ذخيره مي كنيم. در حاليكه ابزار تصوير Slice Selection Tool فعال است در تكه شماره 02 كليك كرده و نام blue_square را به آن بدهيد. سپس در تكه شماره 05 كليك كرده و نام gray_bar را به آن بدهيد. اگر دقت كنيد متوجه متناسب بودن ابعاد اين قسمت با تكه شماره 07 خواهيد شد. از اين رو تنها نياز به ذخيره همين قسمت خواهيد داشت. بهينه سازي و ايجاد فايل خروجي در اين قسمت اقدام به بهينه سازي و سپس ايجاد فايل خروجي مناسب براي وب خواهيم كرد. براي انتخاب تكه gray_bar از ابزار Slice Selection Tool استفاده كنيد . كليد Shift را پائين نگه داشته و در تكه blue_square كليك كنيد. از آنجا كه از لحاظ رنگ بندي هر دو اين قسمت ها يكسان هستند مي توان در يك مرحله هر دو قسمت را بهينه سازي كرد. از تنظيمات براي بهينه سازي هر دو تكه بصورت يك فايل Gif استفاده كنيد:
سپس از ابزار Slice Selection Tool براي انتخاب سرصفحه استفاده كنيد و در حاليكه كليد Shift را پائين نگه داشته ايد قسمت پاصفحه را نيز انتخاب كنيد. از آنجا كه رنگ بندي اين قسمت ها داراي ويژگي پيچيده تري است بهتر است اين قسمت ها را در حالت jpeg ذخيره كنيد .
براي ايجاد فايل خروجي ابزار Slice Selection Tool را انتخاب كرده و سپس تكه هاي header, footer, blue_square و gray_bar را انتخاب كنيد:
در منوي فايل گزينه Save Optimized As را انتخاب نمائيد.
گزينه هايي كه در اين قسمت وجود دارند عبارتند از : 1- انتخا ب مقصد و محل ذخيره فايل ها و پوشه ها 2- در قسمت هاي مربوطه مي توانيد تعيين كنيد كه فايل تنها بصورت HTML ذخيره شود و صفحه html اي ايجاد كند كه كاملا با طرح بندي شما متناسب باشد. 3- گزينه سوم – ذخيره تصاير انتخاب شده- را نيز انتخاب كنيد. در كادر محاوره اي Save as type گزينه Images Only را انتخاب كرده و سپس در زير آن گزينه Selected Slices را انتخاب كنيد. بصورت پيش فرض برنامه ImageReady تمامي تصاوير انتخاب شده را در يك پوشه ذخيره مي كند. در صورتي كه قصد چنين كاري را نداريد مي توانيد در كادر Output Settings كليك كرده و در بخش پائيني كادر محاوره اي گزينه Put images in folder را غير انتخاب كنيد. البته بهتر است قبل از ايجاد تكه هاي مربوطه پوشه اي براي فايلهاي اصلي و در آن پوشه نيز زيرپوشه هاي مورد نياز تان را ايجاد كنيد. در اين حالت به راحتي مي توانيد هر تصوير را در پوشه مورد نظرتان ذخيره كنيد. پس از انتخاب موقعيت ذخيره فايل ها گزينه Save را كليك كنيد.
مرحله بعد ايجاد صفحه HTML اي است كه از آن به عنوان الگويي در وب سايت خود استفاده مي كنيم . نگران بخش هاي ذخيره نشده در فايل نباشيدو بخش مركزي تصوير در بردارنده مفاهيم و محتواي سايت است .
3- قرار دادن تصاوير تكه شده در فايل HTMLبراي ايجاد الگوي مورد نظر در اين مرحله تصاوير مان را در داخل سند HTML قرار مي دهيم :1- جدولي با پنج رديف و 3 ستون ايجاد كنيد.دقت كنيد تا كد
از آنجا كه رنگ زمينه سفيد به خوبي با طرح كار نمي كند ، من يك تصوير كاشي براي پشت سر رابط ايجاد كرده ام.
بدين منظور مي توانيد يك تصوير در فتوشاپ ايجاد به عرض 1 پيكسل و ارتفاع 2 پيكسل ايجاد كنيد. مربعي با عرض و ارتفاع 1 پيكسل انتخاب كنيد و رنگ آن را متناسب با رنگ طرح تان انتخاب كنيد. سپس آن قسمت را به پائين جابجا كنيد . تصوير را با استاندارد gif و تعداد رنگ 2-color ذخيره كنيد .
به سادگي تصوير را در كد background مربوط به tag الگوي جديدتان قرار داده تا تمام محيط را بپوشاند . براي مشاهده طرح نهايي در صفحه HTML اينجا را كليك كنيد.
رنگ زمينه سلول هاي تصوير gray_bar بايد بصورت #CCCCCC انتخاب شوند. بطوريكه در هنگام بزرگ كردن صفحه به همان رنگ ديده شود . از آنجا كه رنگ زمينه سفيد به خوبي با طرح كار نمي كند ، من يك تصوير كاشي براي پشت سر رابط ايجاد كرده ام.
posted by mehran29f @ 5:17:00 AM
0 Comments:
Post a Comment
<< Home