آموزش جامع طراحي قالب وبسايت + تبديل به صفحه ي وب استاندارد + آپلود در اينترنت

[Webber]

سلام
اگر موافق باشید مي خوايم در مورد طراحي قالب سايت(در فتوشاپ) و تبديل اون به صفحه ي وب و آپلودش در اينترنت مطالبي رو تقديم دوستان كنيم.اميدوارم لذت ببريد.
البته همونطور كه مي دونيد در طراحي وب،براي حل هر مسئله ممكنه چندين راه حل وجود داشته باشد و ما سعي مي كنيم آسانترين راه انتخاب كنيم كه اون هم تا حدي سليقه ايست.ولي ممكنه اشكالاتي در مباحث باشد كه ممنون ميشم بفرماييد.
(در ابتدا مي خواستم يه تحقيقي در مورد رنگ ها در طراحي وب بكنم تا مطلب بهتري داشته باشيم و به گوگل رفتم و كلمه ي "رنگ در طراحي وب" رو جستجو كردم به اميد يك عالمه مطالب متنوع و رنگارنگ.ولي متاسفانه مثل اكثر اوقات نااميد كننده بود اوضاع.يك مقاله بيچاره بود و تعداد زيادي مشتاق ... .خدا نويسندش رو بيامرزه كه يه خدمت ماندگار در عرصه ي توليد علم پارسي كرده.شما هم مي دونيد يكي از مشكلات سايت ها و وبلاگ هاي ايراني رعايت نكردن حقوق همديگر(در واقع هيچ كس) هست كه ديگه نويسنده هم رغبت نمي كنه يه مقاله ي آموزشي درست و حسابي بنويسه.دريغ از يك لينك منبع كه بفهميم مادر اين مقاله كدوم سايته لا اقل اكن.
به اميد يادگيري رعايت حقوق همديگر حتي در فضاي سايبر،قبل از يادگيري خود فضاي سايبر.)
بگذريم.فكر كنم قبل از وارد شدن به بحث طراحي،يه چيزايي در مورد رنگ ها بدونيم بهتر باشه.پس لطفا با ما همراه باشيد.
---------

اهميت رنگ ها و طراحي
ما از وبسايت براي ارتباط با بيننده استفاده مي كنيم و بحث مهم اين است كه بتوانيم اين ارتباط را حفظ كنيم.به طور كلي 2 چيز در اين امر موثر هستند:1)طراحي و رنگ بندي(كه شايد هر دو را با هم بشود رابط كاربري(UserInterface) ناميد 2)استفاده اي كه بيننده مي تواند يا مي خواهد از سايت ما بكند(كه اين بسته به هر سايت متفاوت است.شايد در سايتي صرفا خواندن مطلب و مقاله باشد و در ديگري استفاده از سرويس هاي مختلف مثل ايميل يا ... ).در واقع اين دو مكمل هم هستند و اگر يكي ناقص باشد يا توجهي به آن نشود به روند پيشرفت سايت لطمه وارد مي شود.يك وبسايت را فرض كنيد كه داراي مطالب پربار علمي باشد كه افراد زيادي دنبال آن هستند ولي رابط كاربري نا مناسب و نا همگوني دارد.بينندگان شما به اندازه اي كه بايد باشند،نخواهد بود.شايد شما بگوييد كه مجبوراند استفاده كنند ولي در اين صورت به محض يافتن جايگزين شما را ترك خواهند كرد.درست برعكس اين قضيه هم صادق است و اگر سايت شما رابط كابري(UI) خوب و عالي داشته باشد ولي احتياجات بيننده را نتواند برآورده كند،باز هم محكوم به شكست خواهيد بود.بايد به اين نكته هم توجه داشته باشيم كه يك رابط كاربري خوب و مناسب لزوما فقط به معني زيبا نيست بلكه بايد سعي كنيم براساس موضوع ،اهداف و نيازهاي سايت آن را طراحي كنيم.
"آیا شما بهترین رنگ را برای وب سایت خود بکار گرفته اید ؟ هنگام انتخاب رنگ در زمان طراحی باید به نکات زیر توجه کنید :

1- اثر روان شناسی رنگ

2- قابلیت خواندن متون صفحات سایت

3- رنگ متمم رنگهای انتخابی برای بک گراند ، گرافیک ها ، لینک ها و متون

لیست زیر مشخصه هایی از رنگ ها را که هنگام طراحی باید مدنظر داشته باشید بیان میکند:

1- رنگ ها اثر زیادی روی احساسات ما در 90 ثانیه اول دیدن میگذارند .

2- اثر رنگ میتواند بیننده را ترغیب به خرید یک جنس از شما کند.

3- رنگ ها رفتار ما را در برابر یک موضوع فقط تشدید نمیکنند ، بلکه اثر خود را کاملا در رفتار ما نشان میدهند .

4- اثر گذاری رنگ در فرهنگ های مختلف گوناگون است !

5- هر رنگ به تنهایی یک پیام مخصوص به چشم بیننده میفرستد .

در فرهنگ آمریکای شمالی رنگ های زیر به احساسات یا مشخصه های زیر مربوطند:
سفید : اشاره دارد به صداقت ، پاکیزگی ، صمیمیت ، ملایمت و معاصر بود ن چیزی . سفید بهترین رنگ برای بک گراند های وب است . در تجارت سفید رنگ خستگی گیر و انرژی بخش است .
سیاه : اشاره دارد به ظرافت ، قدرت ، دلیری ، شهامت ، فریبندگی ، شیطان ، مهارت و باستان . مشکی برای رنگ متن روی یک پس زمینه روشن ایده آل است. این رنگ بعنوان رنگ پس زمینه چشم را خسته میکند .
قرمز : توانایی ، هیجان ، احساسات شدید ، سرعت ، خطر و تهاجم . این رنگ از بیننده توجه به خود را طلب میکند . در تجارت بمعنی وام و بدهی است . این رنگ شدید ترین رنگ احساس است و ضربان قلب و تنفس را تسریع میکند .
آبی : امنیت ، اعتماد ، مسئولیت پذیری ، سرما ، ایمان ، وفاداری ، وابستگی وجاه و جلال . آبی دومین رنگ عوام پسند است . در تجارت بمعنای ضمانت مالی است .
سبز : تندرستی ، فراوانی ، حاصلخیزی ، آزادی ، شفا و بهبودی ، طبیعت ، پیشرفت ، حسادت و خونسردی . در تجارت بیانگر مقام و ثروت است. این رنگ در چشم ها راحت تر از همه دیده میشود .
قهوه ای : تاثیر گذاری ، متانت ، توانگری مالی و کمک کننده بودن . قهوه ای رنگ کره خاکی ماست و در طبیعت بسیار فراوان است .
خاکستری : صمیمیت زیاد ، اعتبار و نفوذ و عملی بودن . در تجارت بمعنای سنت گرایی است .
صورتی : ملایمت ، شیرینی ، ظرافت و زنانگی ، خوب بودن ، بی گناهی و پرورش کودک .
بنفش : وقار ، معنویت ، شاهانه بودن ، عیش و نعمت ، دارایی ، اعتبار و نفوذ ، سوگواری و مهارت . در تجارت بزرگ نشان دادن است . بنفش طرفداری از سبک های هنرمندانه است.
نارنجی : سرزندگی و شوخی ، لذت و خوشگذرانی ، تعادل گرمایی ، تشویق کردن ، چالاکی و نیرو ، تحمل و بلند همتی .
زرد : نور خورشید ، گرمی ، خوشی ، نامردی ، ترسویی و حسادت . در تجارت درخواست از نوع روشنفکرانه است و برای تاکید نیز خوب است . زرد باعث افزایش تمرکز شده ، سوخت و ساز را زیاد میکند و سخت ترین رنگ برای چشم هاست .
طلایی : نشانگر گران بودن و پرستیژ است .
نقره ای : سرما ، علمی بودن و اعتبار و پرستیژ است .

پس وقتی میخواهید رنگی انتخاب کنید باید درباره بازار نهایی کار خود باندیشید . چه احساساتی را میخواهید برانگیخته کنید ؟ اول کمی درباره چشم انداز احساسی هدفتان فکر کنید و نیز پیامی که از راه دید میخواهید منتقل کنید . بعد رنگ خود را انتخاب کنید !
حسين شرفي
منبع:مايكرومديا ايكس
"
----
سعي كردم كوتاه و مختصر باشه.اميدوارم خسته نشده باشيد.تا بحث بعدي فعلا خدانگهدار شما

موفق باشيد

بحث و بررسي مبحث "آموزش جامع طراحي قالب وبسايت + تبديل به صفحه ي وب + آپلود"

 

[Webber]

سلام
امروز بخش طراحي رو شروع مي كنيم.اول قالبي رو مي بينيد كه قصد طراحيش رو داريم.بعد نم نم شروع مي كنيم به طراحي.البته سعي مي كنيم بحث رو تقسيم كنيم تا از هر نظر راحت باشيم.اگر سوالات دوستان زياد بود سعي مي كنيم يه بحث جديد فقط براي سوالات و نظرات ايجاد كنيم با اجازه ي حسين جان.
احساس مي كنم بايد چيزاي زيادي رو اينجا بگم براي مقدمه ولي چيزي يادم نمي ياد خوب.پس مي ريم سراغ شروع طراحي
--------
قالبي كه ما مي خواهيم آن را طراحي كنيم در زير مشاهده مي كنيد.(ميشه در امضا هم گذاشت)

شروع طراحي(بخش اول)

اگر با جلوتر رفتن احساس كنيد كه طرح شما كمي با طرحي كه اينجا مي بينيد تفاوت دارد جاي نگراني نيست.ولي بهتر است از همين حالا سعي كنيد طرحتان زياد با طرح اينجا متفاوت نباشد مخصوصا مكان قرارگيري اجزاي قالب.

در ضمن تصاويري كه در ذيل مشاهده مي كنيد،به دليل اجتناب از به هم ريختگي بحث و بالا رفتن حجم صفحه ،نسبت به قالب اصلي داراي مقياس كوچكتري مي باشند و شما بايد اندازه ها را كمي بيشتر در نظر بگيريد.

1.خوب يك سند جديد با عرض 850px و ارتفاع 700px با رنگ پس زمينه ي 262626# ايجاد كنيد.لطفا كليد D رو هم يك فشار بديد.

2.حالا نياز داريم كه يك مستطيل بكشيم.براي اين كار ابزار (rectangle Tool(U را انتخاب مي كنيم و مطابق شكل زير آن را مي كشيم.

در پالت لايه ها روي نام لايه دابل كليك كنيد و اسم آن را به MiddleBlack تغيير دهيد و روي آن راست كليك كرده و از منوي باز شده گزينه ي Rasterize Layer را انتخاب مي كنيم.سپس روي آن دوبار كليك مي كنيم تا پنجره ي Blending Options باز شود.در سمت چپ گزينه ي Drop Shadow را انتخاب كنيد و مطابق شكل زير تغيير دهيد.

در گزينه ي Color Overlay هم رنگ سياه را انتخاب نماييد و OK كنيد.حالا بايد شبيه شكل فوق شده باشد.

3.روي لايه ي MiddleBlack راست كليك كنيد و گزينه ي Duplicate Layer را انتخاب نماييد و در پنجره ي باز شده در كادر As، نام لايه يعني BottomWhite را وارد كنيد و Ok.دقت كنيد كه لايه ي جديد بالاتر از همه و انتخاب باشد.به بخش Blending Option رفته و فقط مقدار Color Overlay را از سياه به سفيد تغيير دهيد و Ok.حالا لايه ي BottomWhite را به پايين لايه ي MiddleBlack منتقل و كوچكتر كنيد.سعي كنيد شبيه تصوير زير باشد و از پايين هم به اندازه ي مناسب فاصله داشته باشد،چون از Drop Shodow استفاده كرده ايم.

4.دوباره لايه ي BottomWhite را كپي(duplicate) كنيد و نامش را FooterContainer بگذاريد و به بخش Blending Option برويد.تيك DropShadow را برداريد.ولي در بخش Color Overlay،رنگ را به 1E1E1E# تغيير دهيد و oK.حالا لايه ي سفيد محو شده است.در حالي كه لايه ي جديد انتخاب شده است،با فشردن كليد V ،ابزار ‌Move Tool را برگزينيد و به سمت راست لايه حركت كنيد(فقط دستتون).از سمت راست و چپ و پايين كمي مستطيل را به داخل كوچكتر كنيد.فكر كنم شكل بهتر از من توضيح مي دهد.

5.از لايه ي FooterContainer يك كپي ايجاد كنيد و نامش را BodyContainer بگذاريد.با كپي كردن لايه كار ما آسان مي گردد و فقط بايد آن را به بالا منتقل كنيم و كمي ارتفاع اش را زياد كنيم.البته اين كار را بايد مطابق شكل زير انجام دهيد.به بخش Blending لايه رفته و بخش Gradient Overlay را مطابق شكل زير تنظيم كنيد.(با كليك در بخش قرمز،پنجره ي دوم باز خواهد شد).

شكل و موقعيت لايه را در زير مشاهده مي نماييد

اندازه ي واقعي
مي توانيد نتيجه را با شكل زير مقايسه كنيد و از مناسب بودن اندازه ها مطمئن شويد.

-------
بخش (هاي) بعدي طراحي رو سعي خواهم كرد در اسرع وقت قرار بدم.تا اينجا بيشتر شبيه صفحه ي شطرنج شده تا قالب وبسايت.ولي همين زودي ها يه قالب خواهيم ساخت.نگران نباشيد.همونطور كه مشاهده مي كنيد،سعي كرديم طراحي قالبمون زياد سخت نباشه تا اگر كسي يه كم فتوشاپ بلد باشه هم بتونه طراحي كنه در ضمن خودمون هم بدونيم چي داريم عرض مي كنيم خدمت شما.

به هر روي اميدوارم لذت ببريد.
------
موفقيت

 

[Webber]

سلام[;

----
6.لايه ي BodyContainer را كپي كنيد و مطابق شكل زير ارتفاع و موقعيت آن را تغيير دهيد.

7.حالا لطفا از اينــــجــا فايل گل منگلي را كه مي خواهيم سرصفحه را با آن تزئين كنيم،دريافت كنيد.
بعد از باز كردن آن،كليد تركيبي ctrl+a و سپس ctrl+c را فشار مي دهيم.به سند قالبمان برگرديم و ctrl+v فشار مي دهيم.نام لايه ي جديد را HeaderFloral مي گذاريم.دقت مي كنيم كه ابزار Move Tool انتخاب باشد.حالا موس را به بيرون لبه هاي لايه مي بريم تا به شكل يك فلش دوسر خم شده تبديل شود و حالا كليك مي كنيم و در زير نوار منو،مقدار زاويه را 90- وارد مي كنيم.

ما فقط به گل هاي اين لايه كه به رنگ سياه هستند،نياز داريم.پس بايد پس زمينه ي سفيد را حذف كنيم.البته براي بهتر شدن نتيجه ي كار ،رنگ هايي را كه نسبتا نمود بيشتري دارند(در اينجا قرمز) را هم حذف مي كنيم.پس در حالي كه لايه انتحاب است به منوي ...Select > Color Range مي رويم.در بالا از منوي Select گزينه ي Highlights را انتخاب مي كنيم و Ok.حالا تمام بخش هاي سفيد انتخاب شده اند و با زدن كليد Delete آنها را خذف مي كنيم.براي رنگ هاي ديگر مثل قرمز هم در پنجره ي قبل،روي رنگ مورد نظر كليك مي كنيم و بعد از انتخاب،آن را حذف مي كنيم.

حالا تقريبا شكلي شبيه زير رو مشاهده مي كنيد.شما در مكان قرار گيري گلها و كلا لايه ها ،آزاد هستيد ولي پيشنهاد ما مكان هايي است كه در تصوير مشاهده مي كنيد.

به نظر من كه خيلي زيبا شد.مگه نه؟شوخي كردم هنوز تموم نشده.فقط هواي اون چايي ات رو داشته باش،سرد نشه.

8.لايه ي HeaderFloral را كپي مي كنيم و نام لايه ي جديد را HeaderFloral2 مي گذاريم.فقط دقت مي كنيم كه اين لايه بالاي لايه ي قبلي قرار بگيرد.با منوي ...Filter > Texture > Patchwork مي رويم.به ترتيب دو مقدار اين فيلتر را برابر با 4 و 0 قرار مي دهيم و ok.كليدهاي تركيبي ctrl+u را مي فشاريم و مطابق شكل زير تنظيم مي كنيم.

شما مي توانيد به سليقه ي خود رنگ اين بخش را تعيين كنيد،فقط بايد طوري انتخاب كنيد كه با ساير رنگ هاي صفحه همخواني داشته باشد.

براي اينكه كمي به سرصفحه عمق بدهيم ،به بخش Blending Option رفته و گزينه ي Drop Shadow را مطابق شكل زير مقداردهي مي كنيم.

در پالت لايه ها در حالي كه لايه ي فعلي انتخاب است،Blend mode را به Difference تغيير مي دهيم.اگر خواستيم كمي كار رو روشنتر و نرم تر كنيم مي توانيم فيلتر patchwork رو چند بار ديگر به لايه اعمال كنيم.(ctrl+f).

حالا احتمالا سرصفحه ي شما شكل وشمايلي شبيه زير پيدا كرده است:

9.ولي طرح هنوز كامل نيست.چون سرصفحه كاملا جدا از بقيه ي عناصر به نظر مي رسد.براي اين كار مي خواهيم يك شيب رنگ(Gradient) از پايين به بالا و از رنگ سياه به بي رنگ(Transparent) بكشيم.در واقع هدفمان اين است كه قسمت پايين سرصفحه را كمي محو كنيم.براي اين كار،ابزار Rectangular Marquee Tool را بوسيله ي فشار كليد m انتخاب مي كنيم.ناحيه اي از صفحه را مطابق شكل زير انتخاب مي كنيم.

يك لايه ي جديد ايجاد مي كنيم(shift+ctrl+n) و نامش را HeaderGradient مي گذاريم.كليد D را فشار مي دهيم تا رنگ سياه براي پيش زمينه انتخاب شود.روي ابزار Gradient Tool كليك كرده يا كليد g را فشار مي دهيم.در نوار اختيارات،روي فلش كليك مي كنيم و گزينه ي دوم را انتخاب مي كنيم.

حالا در پايين كادري كه قبلا انتخاب كرده ايم،كليد چپ ماوس را فشار داده و در همين حال تا بالاي كادر مي كشيم و آنجا رها مي كنيم(Drag & Drop).اگر كافي نبود دوباره همين كار را مي كنيم.تا زماني كه پايين لايه ي گل منگلي كاملا تيره شده و جزئي از صفحه ديده شود.البته مواظب باشيد كه كل لايه را سيا نكنيد

-----
ترتيب لايه ها در فتوشاپ دقيقا به ترتيب مراحل هستند.يعني لايه (ها)ي هر مرحله ،بالاي لايه ي مرحله ي قبل قرار مي گيرد.
در بخش بعد،منو،لوگو و چيزاي ديگه رو اضافه مي كنيم .
اميدوارم استفاده كنيد و لذت ببريد چون اين تنها انگيزه براي ارائه ي اين مباحثه.
در ضمن اگر جايي به مشكل برخورديد،بپرسيد.
موفق باشيد

 

[Webber]

سلام به همه ی عزیزان دوستم

يه كم زودتر پيش بريد

ادامه نمی دی؟

خیلی خوشحالم که این پی گیری سختگیرانه رو از طرف دوستان عزیز می بینم و از طرفی هم کمی نگران چون مسئوليت مضاعفي بر دوش بنده مي گذارد.حق با شماست.شايد تنبلي از بنده است .شايد مي بايست فاصله ي بين مطالب رو كمتر كنم.وسرهم كردن اين مطلب مشكل نيست ولي مطمئنا شما نيز با كمي فاصله ي زماني بيشتر ولي كيفيت بهتر موافقيد.به هر حال شرمنده منم و سعي خواهم كرد مطالب رو در وقت مناسب ارائه كنم.مطمئن هم هستم كه شما با صبرتون،اين تايپيك رو همراهي خواهيد كرد و شما هم مطمئن باشيد اگر خدا بخواد، اين مطلب رو تا آخرش خواهيم رفت.قول ِ قول

اگر موافقید بریم سراغ ادامه بحث.

------------
10.می خواهیم برای عمق دادن و زیباتر کردن قالب مان،یک تصویر به کار اضافه کنیم.ما برای این کار تصویر یک تصویر سوزناک از غروب انتخاب کردیم.

نکته:
با توجه به بند 3 که در بحث مربوط به رنگ ها عرض کردیم،تصمیم گرفته ایم از رنگ های گرم مثل قرمز،نارنجی و زرد و ... در کارمان استفاده کنیم.این یکی از دلایل مهمی است که ما از این تصویر استفاده کرده ایم.

لطفا فایل تصویر را از اینـــــجا دريافت كنيد.
ما مي خواهيم اين تصوير را در داخل(روي) لايه ي HeaderContainer و با كمي فاصله از حاشيه ها قرار دهيم.پس تصوير را طوري كوچك مي كنيم كه اجزاي اصلي آن مانند خورشيد و پرتوهاي آن و ابرها،پس از خذف اضافه ها ديده شوند.
پس ابتدا تصوير را وارد كارمان مي كنيم،نامش را sunset گذاشته و بالاي لايه ي HeaderGradient (در پالت لايه ها) قرار مي دهيم.تصوير را با رعايت نكات بالا و توجه به لايه ي HeaderContainer،كوچك مي كنيم.براي اينكه از مكان تصوير مطمئن شويم،كليد ctrl را نگه داشته و روي لايه ي HeaderContainer كليك مي كنيم تا به حالت انتخاب در آيد.اگر مكان تصوير به نظرتان مناسب است،برويم سراغ خذف اضافه هاي آن.براي خذف،در حالي كه لايه ي HeaderContainer انتخاب شده است،روي لايه ي sunset كليك مي كنيم.به مسير Select > Modify > Contract رفته و مقداري دلخواه تقريبا بين 20 و 25 وارد كرده و ok.حالا كليدهاي ctrl+shift+i را براي برعكس كردن انتخاب،مي فشاريم و كليد delete را فشار مي دهيم.مي بينيد كه اضافه هاي تصوير حذف شد.خوشبختانه قوانين زمان بر فتوشاپ حاكم نيست،پس شما مي توانيد با زدن كليدهاي alt+ctrl+z به عقب برگشته و اشتباهات خود را درست كنيد.در بخش Blending options نيز موارد Drop shadow و Gradient overlay را مطابق اشكال زير تنظيم مي كنيم.

حالا همان كاري را كه براي سرصفحه ي گل منگلي انجام داديم،براي اين تصوير هم انجام مي دهيم.يعني مي خواهيم تصوير هر چه به سمت راست تر مي رود،سياه تر شود.پس كليد ctrl را نگه مي داريم و روي لايه ي sunset كليك مي كنيم تا اطراف آن انتخاب شود.براي ايجاد يك لايه ي جديد،كليد هاي shift+ctrl+n را فشار مي دهيم و نام آن را SunsetGradient مي نهيم!
كليد d را يه فشار مي دهيم(اگه گفتيد چرا؟)براي انتخاب ابزار Gradient،كليد g را فشار مي دهيم و مطابق شكل زير تنظيم مي كنيم.

در حالي كه اطراف لايه ي sunset منتخب است،با استفاده از اين ابزار،سعي مي كنيم سياهي ملايمي از راست به چپ ايجاد كنيم.پس نشانگر موس را در سمت چپ تصوير قرار داده و كليد چپ ماوس را فشار مي دهيم و در حالي كه آن را نگه داشته ايم تا وسط تصوير مي كشيم و رها مي كنيم.اگر مطابق ميل تان نشد مي توانيد به عقب برگشته و دوباره سعي كنيد.احتمالا چيزي كه مي بينيد،شبيه شكل زير خواهد بود.

11.قصد داريم در آينده در گوشه ي سمت چپ پايين يك ساعت با جاوااسكريپت بگذاريم.بخاطر همين مي خواهيم بخش پاييني تصوير را متمايز تر كنيم.با توجه به اينكه قبلا رنگبندي گرم را بر گزيده ايم،پس مي توانيم با خيالي راحت آن را قرمز كنيم.
با زدن كليد u،ابزار Rectangle را بر مي گزينيم و در محلي كه در پايين مشاهده مي كنيد يك مستطيل مي كشيم.به بخش Blending options رفته و در قسمت Color overlay رنگ قرمز(ff0000) را انتخاب مي كنيم.در قسمت بالاي همين بخش به Blending options:custom رفته و در قسمت كانال هاي رنگ،تيك كانال قرمز را بر مي داريم و Ok.براي اينكه نتيجه ي بهتري بگيريد،مي توانيم اين لايه را دوبار ديگر هم تكرار كنيم.

12.حالا وقتشه قالبمون رو لوگو دار كنيم.در پايين پالت لايه ها،روي آيكون پوشه كليك مي كنيم و يك پوشه براي لايه ها يا همان Layerset به نام Top ايجاد مي كنيم.كليد t را مي فشاريم و يك لايه ي متني در داخل پوشه ي Top با متن "بنام خدا" ايجاد مي كنيم.روي لايه راست كليك مي كنيم و گزينه ي Blending options را نيز كليك مي كنيم.در سمت راست تيك گزينه ي Drop shadow را مي زنيم و مطابق مقادير زير تنظيم مي كنيم:
Blend mode:normal
color:#ffffff
Distance:0px
Spread:23%
Size:2px
(اولين در دريف پايين)Contour:Half Round
سپس گزينه ي Color overlay را هم تيك مي زنيم و با انتخاب رنگ سفيد،ok مي كنيم.مكان قرارگيري اين لايه و لوگو را در شكل زير مي بينيد.

حالا در كنار اين لايه،يك لايه ي متني ديگر با محتوي "قالب من" مي سازيم.قبل از اين كار نياز به فونت احد داريم كه مي توانيد از ايـــــــــن آدرس دانلود كنيد.حالا در حالي كه با ابزار Type tool متن را انتخاب كرده ايم،روي آيكون نامه سه سطري در نوار options كليك مي كنيم تا پنجره ي مشخصات فونت باز شود و مقادير آن را طبق شكل زير تنظيم مي كنيم.

براي زيبا شدن و تكميل لوگو به بخش Blending options رفته و به ترتيب بخش هاي مربوطه را مطابق اشكال زير تنظيم مي كنيم:

و در انتها،در بخش Color overlay،رنگ FFEE79# را بر مي گزينيم.حالا بايد شكلي شبيه چيزي كه در بالا ديديد را مشاهده كنيد.
حالا شايد بگوييد كه آن پروانه ي قشنگ از كجا امده پس؟به اين ميگن حرف حساب.
براي افزودن پروانه،كليد u را مي زنيم،سپس در بالا از منوي options،روي Custom Shape Tool كليك مي كنيم و از منوي Shape گزينه ي Butterfly را انتخاب مي كنيم.

نكته:
اگر اين گزينه ي را در منوي shape نيافتيد،مي توانيد بعد از بازكردن آن،در سمت راست روي فلش كليك كنيد و از منوي بازشونده گزينه ي All را انتخاب كرده و Ok كنيد.

حالا با نگه داشتن كليد چپ ماوس و كشيدن اشاره گر،يك پروانه ي كوچولو مي كشيم.سپس كليد ها ctrl+t را مي زنيم و روي شكل كليك كرده و گزينه ي distort را بر مي گزينيم.حالا ماوس را روي مربع كوچك پايين چپ قرار داده و كمي به سمت بالا و بيرون مي كشيم تا حالت نشستگي پروانه را ايجاد كنيم.دوبار رويش كليك مي كنيم تا نتيجه را ببينيم.اوه بله.تقريبا درست شده.ولي نه يه چيزي مونده انگار.
به Blending option لايه ي"قالب من" بر مي گرديم و در سمت راست،پايين كليد Cancel روي New Style كليك مي كنيم و ok.
حالا لايه ي پروانه را با تك كليك انتخاب كرده و در پالت Styles آخرين استايل را كليك مي كنيم تا همان سبك،به اين لايه نيز اعمال شود.
نتيجه ي نهايي:

-------
اگر جايي اشتباهاتي ديديد،لطفا بفرمايين اصلاح كنم.
اگر مي بينيد جاهايي كمي بيش از حد توضيح داده مي شه،به خاطر اينه كه دوستانيه كه شايد در فتوشاپ زياد وارد نباشند.
اميدوارم پرحرفي هام رو ببخشيد و تحمل كنيد.
فعلا

 

[Webber]

سلام
دوستان عزيز،از اين پس مي توانند سوالات و نظرات و پيشنهادات و انتقادات و ... را در مبحث زير مطرح كنند.

بحث و بررسي مبحث "آموزش جامع طراحي قالب وبسايت + تبديل به صفحه ي وب + آپلود"

اميدوارم با نظرات سازنده ي خودتون ما رو ياري كنيد.
پيشاپيش از همكاري تان تشكر مي كنيم.

موفق باشيد

 

[Webber]

سلام
------
13.حالا نوبت به منوها رسیده که به صفحه مان اضافه کنیم.برای منوها در طراحی وب قانون خاصی وجود ندارد ولی اکثرا به چهار شکل مورد استفاده قرار می گیرند:
1.منوی بالایی که نزدیکی های لوگو قرار می گیرد و اکثرا دارای 3 لینک ثابت است :1.خانه 2 .تماس 3.نقشه ی سایت
2.منوی اصلی که به صورت افقی تقریبا در مرکز صفحه قرار می گیرد و بسته به نوع سایت دارای لینک هایی مثل موضوعات،صفحات و ... می باشد.
3.منوی کناری که مشابه منوی اصلی است فقط به صورت عمودی و در کنار صفحه قرار می گیرد.
4.منوی پایینی که در footer صفحه قرار می گیرد و گزینه های پرکاربرد را شامل می شود تا کاربر مجبور نباشد برای دسترسی به آن ها کل صفحه را به سمت بالا پیمایش کند مخصوصا در صفحات پرمحتوا و طولانی.

منویی که اکنون قصد ایجاد آن را داریم،از نوع اول است و دارای 3 لینک خانه-تماس-نقشه می باشد.برای مدیریت بهتر لایه ها،یک Layer Set جدید ایجاد می کنیم و نامش را Menu می گذاریم.با فشردن کلید U،یک مستطیل کوچک می کشیم.سپس به بخش Blending options لایه رفته و فقط گزینه ی Gradient color را مطابق شکل زیر تغییر می دهیم.

حالا با زدن کلید ctrl+j دو کپی دیگر از لایه ایجاد می کنیم.کلید u را زده و با ابزار Custom shape tool یک مثلث توپر کوچک بالای هر سه مستطیل می کشیم البته با رنگ سفید.احتمالا!شکل زیر را می بینید:

حالا می توانیم هم از آیکون و هم از نوشته برای تزئین منوها استفاده کنیم.برای این کار می توانید فونت traffic را از این آدرس دریافت کنید.
اندازه و نوع متن را بر عهده ی شما می گذاریم.حالا به Blending options لایه رفته و گزینه ی Drop shadow را طبق شکل زیر تنظیم می کنیم:

بی زحمت یه سری هم به بخش Color overlay زده و رنگ DC8700# را بر می گزینیم.پس داریم

احتمالا موافقید که یک جلوه یز roll over برای منو ایجاد کنیم.پس روی پوشه ی لایه های Menu کلیک راست کرده و گزینه ی Duplicate layer set را برای ایجاد یک کپی از layer set منو،انتخاب می کنیم.نام پوشه ی جدید را MenuHover می گذاریم.فقط یک تغییر کوچک می خواهیم تا منوی هاور را ایجاد کنیم.پس در Blending options،بخش Gradient overlay را مطابق شکل ذیل،کمی تغییر می دهیم.برای هر سه شکل

نتیجه ی این مرحله :

--------
تو قسمت بعد،روی footer کار می کنیم.
امیدوارم لذت برده باشید.

موفقیت

 

[Webber]

سلام دوستان

در این قسمت سعی می کنیم بخش طراحی رو تموم کنیم و خیز برداریم به سوی یک کیمیاگری تمام عیار.با ما همراه باشید.

---------
14.می خواهیم یک نوار مناسبتی (که معمولا سایت ها برای اعلام خبر یا مناسبت ها و یا تبلیغ از آن استفاده می کنند) بسازیم.با کلید U ابزار Rectangle Tool را بر می گزینیم و در گوشه ی راست بالای لایه ی منظره،یک مربع(اگه درست یادم باشه،متساوی الاضلاع) می کشیم.برای اینکه یک نوار داشته باشیم دوباره یک مستطیل درازتر می کشیم و زاویه ی 45 درجه را به آن می دهیم.در حالی که در پالت لایه ها،لایه ی مربع انتخاب شده است،کلید ctrl را نگه داشته و روی لایه ی مستطیل کلیک می کنیم تا انتخاب شود.بهتر است مثل شکل زیر عمل کنیم.

کلید delete را می زنیم تا آن قسمت پاک شود.اطراف مشتطیل را از حالت انتخاب خارج کرده و با کلید shift+right arrow و shift+ top arrow،مستطیل را به گوشه ی دیگر مربع انتقال داده و دوباره اعمال بالا را تکرار می کنیم.اینجا می توانیم کلفتی نوار را نیز تغییر دهیم.حالا که کارمان تمام شد،گوشه های اضافی مربع و لایه ی مستطیل را خذف کرده و به سراغ Blending options مربع می رویم و گزینه ی Gradient options را مطابق شکل زیر تنظیم می کنیم.(مطمئنا می توانید با استفاده از خلاقیت تان،نتیجه ی بهتری بگیرید.)

متن روی آن هم به عهده ی خودتون.

15.برای پنل های راست قالبمان،یک مستطیل می کشیم و در Blending options گزینه ی Gradient overlay را مطابق سلیقه ی خودمان یا شکل زیر تنظیم می کنیم:

خوب دوستان، کار طراحی به پایان رسید.دیدید چقدر ساده و لذت بخش بود. اگر با ما همراه بوده اید،احتمالا ! منظره ی پایین را مشاهده می کنید.

-------
در آینده ی نزدیک این قالب را به صفحه ی وب تبدیل خواهیم کرد.
از بابت دیرکرد منو ببخشید.
منتظر نظرات و پیشنهادات شما در این مبحث هستم.

موفقیت

 

[Webber]

سلام دوستان

از امروز مي خواهيم قالبي را كه طراحي كرده ايم به صفحه ي وب تبديل كنيم.سعي خواهيم كرد مباحث رو كوتاه و مختصر مطرح كنيم و شما مي تونيد سوالاتتون رو در مبحث نظرسنجي كه آدرسش در بالا ذكر شده مطرح كنيد.

-------

تصوير بالا مربوط به قالبي است كه طراحي كرده ايم.موقعي كه مي خواهيد يه تصوير را به صفحه وب تبديل كنيد بايد به ساده ترين شكل ممكن اين كار را انجام دهيد.البته تا جايي كه به قابل استفاده بودن و استاندارد بودن صفحه لطمه نخورد.پيشنهاد ما اين است كه قبل از شروع به كار،يك طرح كلي از تقسيم بندي هاي صفحه بكشيد شايد يك سري از مشكلات به جاي آينده همين حالا بروز كنند.يكي از مهمترين مسائلي كه بايد به آن توجه كنيد بخش هايي است كه سايزشان متغيير خواهد بود.مثلا در قالب ما،بخش وسط يعني جايي كه منو و پست قرار خواهد گرفت داراي اين خصوصيت خواهد بود ولي بخش هاي ديگر مانند سرصفحه ،منظره و پايين صفحه ثابت هستند(از نظر ارتفاع).

نمي دونم شما از چه نرم افزاري استفاده مي كنيد ولي پيشنهاد ما Expression Web است.برادر خلف فرونت پيج كه علاوه بر استاندارد بودن،سادگي برادر بزرگتر را هم به ارث برده است.

PhotoShop= PS
ExpressionWeb=EW

16.براي شروع در فتوشاپ روي titlebar قالب rightclick كرده و Duplicate را انتخاب كنيد.علامت چشم را از بغل layer set هاي Menu و MenuHover بر داريد.از منوي Layer روي Flatten Image كليك كرده و Ok را بزنيد.با فشردن كليد M و انتخاب ابزار Rectangle Marquee Tool كل فضاي بالاي منظره را انتخاب كرده و كليدهاي ctrl+insert را فشار دهيد.حالا به مسير File > new رفته و ok.اين بار كليد هاي shift+insert را بزنيد.چون بايد صفحه ي وب ما سبك باشد،بايد سعي كنيم تصاوير را با كمترين حجم ذخيره كنيم.كليد هاي alt+shift+ctrl+s را بزنيد يا به File > Save for web رفته و بهينه ترين گزينه(اكثر اوقات jpg و گزينه ي High مناسبترين است) را براي ذخيره ي تصوير انتخاب كنيد.تصوير را با نام header.jpg در پوشه اي بنام images ذخيره كنيد.

حالا PS را رها كنيد و به سراغ EW برويد.وقتي يك صفحه ي جديد در EW ايجاد مي كنيد كدهاي HTML زير را خواهيد ديد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>

<body>

</body>

</html>

بايد چند كار اوليه را انجام دهيم.مثل راست به چپ كردن صفحه،اضافه كردن CSS اوليه و .. .

body{
	direction:rtl;
	margin:0;
	background:#262626
}

خط اول مربوط به راست چين كردن صفحه است.خط دوم باعث حذف فاصله بين محتويات و لبه ي مرورگر مي شود و خط سوم رنگ پس زمينه را تعيين مي كند.

براي اعمال اين استايل،بايد آن را در داخل تگ استايل ،در بخش header صفحه قرار دهيد:

...
<style media="screen" type="text/css">
<!--CSS code here-->
</style>
...

حالا يك div براي نگهداري قالب به بخش body اضافه كنيد و id اش را container بگذاريد.چرا id?چرا class نه؟چون فقط يك عدد از اين نوع div در صفحه خواهيم داشت.از اين عنصر براي نگهداري كل محتويات استفاده خواهيم كرد.

...
<body>
 <div id="container">

 </div>
</body>
...

احتمالا شما هم حدس زديد كه عرض اين عنصر برابر با طول تصوير هدر مي باشد.زيرا عرض اين تصوير بيشتر از ديگران است.

اضافه كردن سرصفحه

دوباره يك div به صفحه اضافه كنيد كه مربوط به هدر است و اينبار داخل container بگذاريد.

...
<body>
 <div id="container">
  <div id="header">
  
  </div>
 </div>
</body>
...

حالا مي بايست تصويري كه ذخيره كرده ايد را به صفحه اضافه كنيد.پس

#header{
	background:url('images/header.jpg');
	height:146px
}

خط اول تصوير را به عنوان پس زمينه انتخاب مي كند.در خط دوم نيز ارتفاع تگ header را برابر با ارتفاع تصوير قرار مي دهد.

به نظرتان بهتر نيست لوگومان داراي لينك باشد.پس اولين خط را به صورت زير در بخش header وارد مي كنيم:

...
  <a href="http://forum.majidonline.com/showthread.php?t=120992" id="logo" title="آموزش كامل طراحي وب"><span>Majidonline Webdesign tutorial</span></a>
...

براي اينكه اين كد خام را به شكل دلخواه در آوريم از كد CSS زير استفاده كنيد:

#header a#logo{
	float:right;
	width:136px;
	height:53px;
	margin:53px 60px 0 0;
}
#header a#logo span{
    display:none
}

در بخش اول به مرورگر مي گوييم كه كد css را به لينكي اعمال كند كه داراي logo id باشد همچنين داخل header باشد.
در خط بعدي عنصرمان را در داخل header شناور مي كنيم به همين دليل در خط آخر مي توانيد با margin موقعيت اش را تغيير دهيد.خط هاي دوم و سوم هم همانطور كه مي دانيد مربوط به طول و ارتفاع عنصر لينك هستند.

در سبك بعدي تگ span اي را كه در داخل لينكي(a) با id ي logo هست انتخاب مي كنيم و با استفاده از display و مقدار none كاري مي كنيم كه نوشته ي داخل لينك يعني "Majidonline Webdesign tutorial" مخفي شود.

اضافه كردن لينك هاي سر صفحه

در اين بخش مي خواهيم منوهاي بالاي صفحه را اضافه كنيم.قبل از اين كار بايد عكس ها را از فايل قالب استخراج كنيد.به PS بر مي گرديم و روي نوار عنوان سند قالب راست كليك كرده و duplicate را انتخاب مي كنيم.در سند جديد علامت چشم را در پالت لايه ها از كنار تمام لايه ها بر داريد به جز دو لايه ي Menu و MenuHover .لايه ي MenuHover را به زير لايه ي ديگر برده و بعد از Trim (حذف اضافات) با فرمت PNG ذخيره كنيد.

حالا به EW رفته و كد HTML زير را بعد از لينك لوگو اضافه كنيد.

...
   <div id="TopMenu">
    <ul>
     <li id="home"><a href="#"></a></li>
     <li id="contact"><a href="#"></a></li>
     <li id="sitemap"><a href="#"></a></li>
    </ul>
   </div>
...

همانطور كه مشاهده مي كنيد از يك div به عنوان نگهدارنده ي اين بخش استفاده شده است.همچنين از جادوي ليست ها + خصوصيت float سي اس اس براي استخوان بندي لينك ها استفاده كرده ايم.

اگر موافق هستيد به نوبت كد CSS اين بخش را بررسي مي كنيم:

#header #TopMenu{
	float:left;
	width:160px;
	margin:80px 0 0 90px;
}

در اين سبك،با استفاده از خصوصيت float،عنصر مان را در سمت چپ(بر عكس لينك لوگو) والدش،شناور كرده ايم.در خط سوم براي اينكه عنصر را دقيقا در موقعيت مورد نظر قرار دهيم،80px از بالا و 90px از چپ با عنصر والدش فاصله انداخته ايم.

#header #TopMenu ul{
    list-style:none;
    margin:0;
    padding:0
}

از اين كد ،براي اعمال تنظيمات مان بر روي عنصر والد ليست(ul) استفاده كرده ايم.مثلا در خط اول،بالت هاي پيش فرض ليست ها را محو كرديم.مرورگرهاي مختلف ممكن است فاصله هاي متفاوتي را از داخل (padding) و خارج (margin) ليست ها با عناصر كناري در نظر بگيرند كه براي همين مقدار صفات بعدي را 0 گذاشتيم.

#header #TopMenu ul li{
    float:right;
    width:35px;
    height:26px;
    margin:0 0 0 18px
}

بعد از تربيت والد ليست،نوبت به بچه هاي ليست مي رسد كه درست بشند.گذشته از انتخابگر CSS،دوباره عناصر فرزند ليست(li) ها را به سمت راست شناور كرده اي،چون به صورت پيش فرض زير هم هستند.در خط دوم،طول،خط سوم،ارتفاع و در آخرين خط نيز يك فاصله ي 18px بين آنها ايجاد مي كنيم(دعوا نشه).

#header #TopMenu ul li a{
    display:block;
    width:35px;
    height:26px;
}

همانطور كه مي دانيد،لينك ها (a) عناصري inline هستند يعني در خط فعلي شكست ايجاد نمي كنند.اين خصوصيت اكثر مواقع خوب جواب ميدهد ولي در بعضي جاها نياز داريم كه اين عناصر را كمي خشن تر و در واقع Block كنيم مثل تگ p,div و ... .در خط اول همين كار را كرده ايم تا به راحتي بتوانيم طول و عرض لينك را با محتواي خالي تغيير دهيم.

#header #TopMenu ul li#home{
    background:url('images/top-menu.png') no-repeat -101px 0;
}
#header #TopMenu ul li#home:hover{
    background:url('images/top-menu.png') no-repeat -101px -26px;
}

#header #TopMenu ul li#contact{
    background:url('images/top-menu.png') no-repeat -51px 0;
}
#header #TopMenu ul li#contact:hover{
    background:url('images/top-menu.png') no-repeat -51px -26px;
}

#header #TopMenu ul li#sitemap{
    background:url('images/top-menu.png') no-repeat;
}
#header #TopMenu ul li#sitemap:hover{
    background:url('images/top-menu.png') no-repeat 0 -26px;
}

اصلا نترسيد.اين كدها برخلاف حجيم بودن بسيار ساده و به صرفه هستند.در كد CSS،ما براي هر ليست، دو سبك در نظر گرفتيم.يكي براي حالت عادي و يك براي زماني كه ماوس روي لينك مي رود(roll over يا hover).تنها سوالي كه شايد براي شما ايجاد بشود،اين است كه عدد 101- يا 51- از كجا آمده است.اين اعداد را مي توان با استفاده از حدس زدن و آزمون و خطا بدست آورد ولي سريعترين راه استفاده از PS به صورت زير است.

در اين تصوير شما با استفاده از ابزار انتخابگر PS،فاصله ي بين گوشه ي چپ هر لينك تا مرز تصوير(مستطيل رنگي) را انتخاب كرده و كپي مي كنيد(ctrl+c) سپس به مسير File > New مي رويد.عدد نوشته شده روبه روي width همان عدد مورد نظر ماست.

نكات:
1.براي موقعيت دهي سريعتر به عناصر مي توانيد يك border موقتي به آن اضافه كنيد و بعد از اتمام آن را پاك كنيد.
2.اين كدها در مرورگرهاي Firefox,Safari,Opera و به طبع Chrome تست شده اند.
3.شما مجبور نيستيد براي تكه تكه كردن قالب از Slice tool استفاده كنيد.ما هم مجبور نيستيم.نه؟

نتيجه ي كار

●●●●ويرايش شــــــــــــد●●●●
--------
اگر سوال يا پيشنهادي داريد يا اشتباهي در كدها مي بينيد،مي تونيد در تايپيك بحث و نظرسنجي اين مبحث مطرح كنيد.

اميدوارم لذت ببريد

موفقيت

 

[Webber]

سلام

------
17.حالا قصد داريم تصوير غروب دل انگيزي كه در قالب گذاشته ايم را به صفحه ي وب منتقل كنيم.پس PS را باز كرده و تصوير فوق را كپي كرده و ذخيره نماييد.مثلا:

ارتفاع اين تصوير براي ما مهم است كه برابر است با 255px.به EW بازگشته و پايين و خارج از header id كد زير را اضافه كنيد.

  <div id="vista">
    
  </div>

در بخش css صفحه يعني تگ style،كد css زير را اضافه كنيد.

#vista{
	background:url('images/vista.jpg');
	height:255px
}

خط اول اين سبك،فايلي را كه ذخيره كرده ايم به عنوان پس زمينه ي div انتخاب مي كند و خط دوم نيز همان ارتفاع تصوير است كه براي div نيز در نظر گرفتيم.

حالا مي توانيد اضافه شدن اين بخش را نيز ببينيد.اگر در مراحل قبل يادتان باشد يك نوار كج در گوشه ي اين بخش ايجاد كرديم كه وقت اضافه كردنش رسيده است.پس يك كپي از سند قالب در PS ايجاد كرده و تمام لايه ها به جز layer set روبان را مخفي كنيد (با برداشتن علامت چشم).سپس به منوي Image > Trim رفته و دكمه ي راديويي اول (Transparent Pixels) را انتخاب و ok نماييد.مي بينيد كه اضافات كار خذف شذ و فقط روبان مورد نظر شما مانده است.حالا از منوي File > Save for web گزينه ي PNG-24 را به عنوان فرمت تصوير انتخاب كرده و با نام roban ذخيره كنيد.اين فرمت باعث مي شود كه شفافيت تصوير مخصوصا سايه ها، با كيفيت بالايي حفظ شود.width تصوير 126px و height آن 116px است.
به EW باز گشته و كد قبلي را به اين صورت تغيير دهيد:

  <div id="vista">
    <div id="roban"></div>
  </div>

كد css زير را هم به بخش استايل ها اضافه كنيد.

#vista #roban{
	background:url('images/roban.png');
	width:126px;
	height:116px;
}

اگر نتيجه را ببينيد مشاهده مي كنيد كه تصوير مورد نظر اضافه شده است ولي به سمت راست نگهدارنده ي خود چسبيده است.(احتمالا اگر direction صفحه را به ltr تغيير دهيد،به سمت چپ مي چسبد).پس بايد كمي فاصله از طرف راست بين roban و نگهدارنده اش ايجاد كنيد.براي اين كار كد بالا را به شكل زير تغيير دهيد:

#vista #roban{
	background:url('images/roban.png');
	width:126px;
	height:116px;
	margin:0 80px 0 0 ;
}

در مورد ما،با فاصله اي 80 پيكسلي اين مشكل حل شد.شايد در مورد طرح شما كمي متفاوت باشد.

حالا وقت افزودن ساعت و تاريخ در بخش قرمز پايين و چپ رسيده است.يك div ديگر داخل vista اضافه مي كنيم و حالا داريم:

  <div id="vista">
    <div id="roban"></div>
    [B]<div id="DateTime">8:14 2009/08/22</div>[/B]
  </div>

شايد اصلا ساعت و تاريخ را مشاهده نكنيد كه كجا هستند.براي اينكه پيداشون بشه لطفا سبك زير را به قسمت استايل ها اضافه كنيد:

#vista #DateTime{
	float:left;
	border:1px aqua solid;
	margin:70px 0 0 130px
}

با اضافه كردن خط اول،محتويات قابل رويت مي شوند ولي اصلا در جاي مناسبي قرار ندارند.پس مي بايست با استفاده از خصوصيت هايي مثل margin آنها را در جاي مناسبش قرار دهيم.براي همين خط دوم را اضافه كرديم تا بهتر بتوانيم عنصر را موقعيت دهي كنيم.بعد از آن با كمي آزمون و خطا به خط سوم رسيديم كه تقريبا موقعيت دلخواه ما را به DateTime مي داد.
حالا وقت آن است كه روي شكل ظاهري عنصر كار كنيم.

#vista #DateTime{
	float:left;
	margin:70px 0 0 130px;
	font:bold 1.6em arial;
	color:#fff;
	text-shadow: #fff 0px 0px 6px;
}

فكر مي كنم به راحتي اين كد ها را درك مي كنيد فقط در مورد خط آخر از يك خصوصيت CSS3 استفاده شده است براي ايجاد سايه اطراف متن.اين افكت را مي توانيد در مرورگرهاي جديد مثل Opera مشاهده نماييد..

نتيجه ي كار

-----
خواهش مي كنم خلاقيت خودتون رو فراموش نكنيد.اينجا مجال زيادي نيست كه به جزئيات بپردازيم . بهترين دوستي كه هميشه همراه شماست و بهترين پيشنهاد ها را مي دهد هماره ذهن خيال پرداز شماست.آزادش كنيد تا قدرتش رو به شما نشان بده.

ما رو از نظراتتون بي بهره نكنيد مثل اكنون

تا بخش بعد ، فعلا ....

 

[Webber]

با سلام

به دلايلي مبحث مان به مدت طولاني خوابيد كه از اين جهت از دوستاني كه همراه ما بودند،عذر مي خواهم.اگر مشكلي پيش نيايد،سرعت مان رو دو برابر خواهيم كرد.محكم بشينيد.

---------

18.در اين بخش مي خواهيم قسمت محتويات را اضافه كنيم.اين بخش يك تفاوت با بخش هاي بالايي دارد و آن هم اين است كه ارتفاع (Height) آن متغير است،پس نمي توانيم يك تصوير ثابت به عنوان پس زمينه انتخاب كنيم و بايد از پس زمينه ي تكرار شونده استفاده كنيم.فقط در بالا،كمي سايه ي خاكستري هست كه ثابت خواهد بود.به PS رفته و پوشه هاي لايه (LayerSet) ي panel و post را مخفي كنيد(با برداشتن چشم از كنار آنها).حالا از مسير Layer > Flatten Image تمام لايه ها را يكي مي كنيم، بعد از زدن ok.آن قسمت خاكستري را انتخاب نموده و در يك لايه ي جديد،كپي كرده و با نام "main-fixed-bg.jpg" ذخيره كنيد.منظورمان شكل زير است:

حالا نوبت به پس زمينه ي تكرار شونده مي رسد.يكي از نكات مثبت اين نوع پس زمينه،حجم پايين آن است كه در ادامه مشاهده مي كنيد.بعد از انتخاب ابزار Rectangular Marquee Tool يا همان كليد M،روي آن راست كليك كرده و گزينه ي سوم را انتخاب كنيد.مزيت اين كار اين است كه با يك بار كليك،محدوده اي به ارتفاع 1px و طول كل صفحه انتخاب مي شود.دقيقا همان چيزي كه نياز داريم.پس كمي پايين تر از بخش خاكستري كليك كرده مثل تصوير قبل و با نام "main-repeated-bg.jpg" ذخيره كنيد.

براي جايگذاري اين بخش چند كد كوچك HTML را بايد اضافه كنيد.به سراغ EW رفته و كد زير را قبل از تگ پاياني "container" اضافه نماييد.

  <div id="main">
    <div id="fixed-bg">&nbsp;</div>
  </div>

همانطور كه مي بينيد،2 تگ div استفاده شده است.يكي براي نگهداري كل اين بخش كه داراي پس زمينه ي تكرار شونده است و يكي هم در داخل آن و براي پس زمينه ي ثابت بالا.براي آغشته كردن اين كد به CSS،در بخش استايل ها،كد هاي زير را اضافه كنيد.

#main{
	background:url('images/main-repeated-bg.jpg') repeat-y ;
}

#main #fixed-bg{
	background:url('images/main-fixed-bg.jpg')
}

فكر نمي كنم نيازي به توضيح باشد فقط در بخش اول از repeat-y براي تكرار عمودي تصوير استفاده كرديم.

حالا دو بخش ديگر يعني بخش ارسال و منو را اضافه مي كنيم.كد ما به اين صورت تغيير مي كند:

  <div id="main">
    <div id="fixed-bg">&nbsp;</div>

    <div id="menus"></div>
    <div id="posts"></div>
  </div>

كد CSS زير را هم به بخش استايل ها اضافه نماييد:

#main #menus{
	width:198px;
	float:right;
	margin:0 71px 0 0;
}

#main #posts{
	width:462px;
	float:left;
	margin:0 0 0 100px
}

براي درك بهتر اندازه ها،مي توانيد به آخر بحث هشتم مراجعه كنيد.

در PS نوار زرد رنگ عنوان پنل را طبق معمول گذشته و با نام panel-title.jpg ذخيره كنيد(با عرض 1px).براي بدنه ي پنل نيز همين كار را بكنيد و با نام panel-body.jpg ذخيره نماييد.در اين قسمت بايد تصميم بگيريم با توجه به اينكه تعداد پنل ها مشخص نيست، از چه ساختاري براي طراحي پنل ها استفاده كنيم.مي توانيم از ساختاري شبيه زير استفاده كنيم:

<div class="panel">
 <h3 class="title"></h3>
 <div class="body"></div>
</div>

چطورِس؟خوبِس.پس كد را داخل menu قرار دهيد.فقط دقت كنيد كه از class به جاي id استفاده كرديم.در داخل title عنوان "دوستان" رو وارد كنيد و در بخش css،سبك زير را اضافه كنيد:

#main #menus .panel .title{
    background:url('images/panel-title.jpg') repeat-x;
    margin:0;
    padding:10px 10px 0 0;
    height:39px;
    color:#993300;
}

فرض كنيد مي خواهيد تعدادي لينك را به اين بخش اضافه كنيد.يكي از بهترين روش ها استفاده از ليست ها است.مثل:

      <div class="body">
       <ul>
        <li><a href="http://majidonline.com">مجيد آنلاين</a></li>
        <li><a href="http://echessdesign.com">حسين سعيدي</a></li>
        <li><a href="http://alizamani.ir/">علي زماني</a></li>
        <li><a href="http://forum.majidonline.com/showthread.php?t=124195">آموزش جامع طراحي وب</a></li>
       </ul>
      </div>

براي خوشمزه تر شدن بخش محتويات پنل ،مي توانيم CSS زير را استفاده كنيم:

#main #menus .panel .body{
    font:.7em tahoma;
    background:url('images/panel-body.jpg') repeat-x top;
    margin:0;
    padding:10px 10px 10px;
    color:#993300;
    text-align:justify
}
#main #menus .panel .body a{
	text-decoration:none;
	color:#FF5050;
	border:1px solid transparent
}
#main #menus .panel .body a:hover{
	color:#CC6600;
	background:#FFCCCC;
	border:1px solid #FF4304
}
#main #menus .panel .body ul{
	width:100%;
}
#main #menus .panel .body li{
	border-bottom:1px solid #FF0066;
	padding:4px 0 4px 0
}
ul{
	margin:0;
	padding:0;
	list-style:none
}

مي توانيد پنل هاي ديگري نيز اضافه كنيد و نتيجه را ببينيد.حالا مي رسيم به نمايش پست.براي اين كار از ساختار زير استفاده مي كنيم:

     <div class="entry">
      <div class="entry_title">
       <h2>بنام خدا</h2>
       <span>88/3/10</span>
       <div style="clear:both"></div>
      <div class="entry_body">
       <p>
   <!--text here-->
       </p>
      </div>
      <div class="entry_meta">
       <a href="#">نظرات (8)</a> - <a href="#">ادامه ي مطلب</a> - ارسال از جناب آقا
      </div>
      </div>
     </div>

همانطور كه مشاهده مي كنيد اين ساختار از سه بخش تشكيل شده است.اولين بخش "entry_title" است كه حاوي عنوان و تاريخ ارسال مطلب هست.دومين قسمت،"entry_body" نام دارد كه در بردارنده ي متن پست ماست و بخش آخر "entry_meta" است كه اطلاعات ديگر پست از قبيل تعداد نظرات،ادامه ي مطلب و نويسنده ي مطلب را ارائه مي دهد.
كد CSS اين بخش از قرار زير است:

#main #posts .entry .entry_title h2{
	float:right
}
#main #posts .entry .entry_title span{
	float:left;
	margin:26px 0 0 8px;
	font:bold .9em arial;
	color:#993300
}
#main #posts .entry .entry_body{
    font:.8em tahoma;
    text-align:justify;
    border-top:1px solid #CCCCCC

}
#main #posts .entry .entry_meta,#main #posts .entry .entry_meta a{
    font:.6em tahoma;
    text-align:justify;
    border-top:1px solid #CCCCCC;
    color:#990000

}

اين كدها و ديگر سبك هاي CSS اي كه در بالا آمدند ساده هستند و فكر نمي كنم نياز به توضيح اضافه باشد فقط شايد برايتان سوال بوجود آمده باشد كه چرا از كد زير استفاده كرده ايم؟

<div style="clear:both"></div>

براي اينكه اگر دقت كرده باشيد در داخل "entry_title" دو تگ h2 و span را،يكي در سمت راست و ديگري در سمت چپ شناور كرده ايم(float).در اين صورت مرورگر آنها را ناديده گرفته و محتويات پايين را به سمت بالا حركت مي دهد تا جايگزين آنها كند.اين قطعه كد مثل يك سد مانع از اين كار مي شود.البته ما كه ديديم با خذف اين كد نيز مشكل حادي ايجاد نمي شود ولي هدفمان آشنايي شما به اين راهكار بود كه در طراحي CSS based كاربرد مهمي دارد.

نتيجه ي كار

-----
خوب فكر مي كنم اين بخش نيز كامل تقديم حضورتان شد.سعي كرديم از توضيحات زياد و جزئيات بپرهيزيم تا بحث خسته كننده و حجيم نشه.چون ميان آماده سازي اين مبحث كمي فاصله افتاد،اگر در طي مراحل يا در نتيجه ي پاياني مشكلي ديديد،يا هر سوال ريز و درشتي برايتان بوجود آمده است در تايپيك بحث و بررسي اين مبحث اطلاع دهيد تا رفع كنيم.

اميدوارم استفاده و لذت كافي رو برده باشيد.

موفق باشيد

 

[Webber]

سلام (;

------
19.امروز بخش آخر تبديل به صفحه ي وب است و فقط پايين صفحه يا footer مانده است.پس اگر موافق باشيد برويم سراغ كارمان.لطفا قالب را در PS باز كرده و طبق منوال گذشته(Flat كردن تصوير-انتخاب و ذخيره كردن بخش مورد نظر در فايل جديد) بخش فوتر را ذخيره نماييد.شكل زير را مشاهده مي كنيد.

كد HTML زير را مي بايست بعد از تگ پاياني main قرار دهيد:

  <div id="footer">
   <div id="footer_main"></div>
  </div>

كد CSS مربوط هم از قرار زير است:

#footer{
    height:116px;
    background:url('images/footer-bg.png') no-repeat top;
}

اگر مشاهده كنيد،تا به اينجا پس زمينه ي كار را اضافه كرديم و مي خواهيم در بخش خاكستري وسط يك نگهدارنده براي فوتر ايجاد كنيم.تگ آن را در بالا اضافه كرده ايم(footer_main) و فقط بايد كد CSS كوچكي را محيا كنيم:

#footer #footer_main{
    width:692px;
    height:57px;
	margin-right:55px;
	padding:16px 8px 8px 8px;
	color:#ddd;
	font:.6em tahoma
}
#footer #footer_main a{
    color:#faa
}

حالا مي توانيد محتويات مورد نظر را اضافه كنيد.در اينجا ما براي مثال،چند لينك و كپي رايت را به اين بخش مي افزاييم.ولي قبل از آن بايد نگهدارنده ي آنها را ايجاد كنيم:

  <div id="footer">
   <div id="footer_main">
    <div id="footer_right"></div>
    <div id="footer_left"></div>
   </div>
  </div>

همانطور كه مي بينيد يك نگهدارنده براي سمت راست و يكي هم براي سمت چپ ايجاد كرده ايم كه بايد آنها را شناور كنيم تا در يك سطر قرار بگيرند.

#footer #footer_main #footer_right{
    float:right;
}
#footer #footer_main #footer_left{
    float:left;
}

حالا محتويات:

    <div id="footer_right">
	 <p>تمام حقوق طراحي اين سايت با مجيدآنلاين است.©2009</p>
	</div>
    <div id="footer_left">
	 <ul>
	  <li><a href="#">خانه</a> | </li>
	  <li><a href="#">درباره</a> | </li>
	  <li><a href="#">تماس</a> | </li>
	  <li><a href="#">نقشه</a></li>
	 </ul>
	</div>

بعد از اتمام كار،كل CSS را در يك فايل جدا بنام style.css كنار فايل اصلي ذخيره مي كنيم و بوسيله ي كد زير آن را يه صفحه لينك مي دهيم:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

نتيجه ي كار
----
خوب،صفحه كامل شد ... .

با تشكر

 

[Webber]

آپلود

سلام

در آخرين بخش سري مقالات به موضوع آپلود مي پردازيم.لطفا با ما همراه باشيد.

----

همانطور كه مي دانيد ،آپلود به معني بارگزاري فايل(ها) به اينترنت است.فرض كنيد يك سايت شامل چند صفحه ي ساده ي HTML طراحي كرده ايد يا تعدادي فايل فشرده داريد كه مي خواهيد آن را در اينترنت منتشر كنيد.پس راهي نداريد چز اينكه آنها را upload كنيد.براي آپلود كردن فايل،راههاي مختلفي وجود دارد كه به دليل سادگي دو مورد پايين بيشتر از همه مورد استفاده قرار مي گيرند.

1.آپلود از طريق برنامه هاي آپلود(FTP Clients) از جمله FileZilla,FlashFXP,TurboFTP و ... .
2.آپلود از طريق كنترل پنل هاست كه اغلب Cpanel يا Plesk هستند.

1.آپلود با برنامه هاي آپلود(FTP clients)

در ابتدا اگر موافقيد،كار با FTP Client ها را بررسي كنيم.برنامه هاي زيادي در اين مورد وجود دارد كه به تعدادي از آنها در بالا اشاره شد ولي ما در اينجا با FileZilla كار مي كنيم.چون به نظر شخصي بنده يك كوچولو بهتر و نرم تر از ديگر برنامه ها است.

بعد از نصب و باز كردن برنامه،ابتدا بايد اطلاعات (FTP(File Transfer Protocol هاستي كه مي خواهيد فايل را در آن آپلود كنيد،به برنامه بدهيد.اين اطلاعات را شركت هاستينگ،هنگام ايجاد هاست شما برايتان ايميل مي كند.اطلاعاتي كه در اين مورد نياز داريم موارد زير هستند:
1.آدرس سرور FTP كه معمولا به صورت ftp.your-site.com است.
2.نام كاربري اتصال به FTP.
3.رمز عبور كه معمولا همان رمز عبور ورود به كنترل پنل هاست است.

البته مي توانيد بعد از ورود به كنترل پنل سايت،حساب هاي(FTP Accounts) مختلفي ايجاد و مديريت كنيد.
اگر اين اطلاعات را در اختيار نداريد،مي توانيد از سرويس دهنده ي هاست خود سوال كنيد در غير اين صورت به مرحله ي بعد مي رويم.
در برنامه ي FileZilla و در منوي File گزينه ي Site Manager را انتخاب كنيد.
در كادر محاوره اي باز شده،در سمت چپ كليد New Site را بفشاريد و در كادر سفيد بالا براي گزينه ي جديد،نام مشخصي براي شناسايي وارد كنيد.
در سمت راست و در مقابل Host،آدرس FTP سرور خود را وارد كنيد.
در بخش Logontype گزينه ي Normal را انتخاب نماييد تا دو كادر ورودي User و Password فعال شود،سپس نام كاربري و رمز عبور را به ترتيب در آنها وارد نماييد
و كليد Connect را در پايين بزنيد.اگر اطلاعات صحيح باشد،پوشه ي ريشه ي هاست شما نمايان خواهد شد،وگرنه با دقت دوباره اطلاعات را وارد كنيد.

حالا فقط بايد فايل مورد نظر را انتخاب كرده و با rightclick روي آن گزينه ي Upload را بزنيد تا به مقصود نائل شويد.همانطور كه مي بينيد،بخش وسط برنامه به 4 قسمت تقسيم شده است.دو بخش سمت چپ براي مرور پوشه ها و محتويات آنها روي كامپيوتر شما و دو بخش سمت راست براي انتخاب مكان آپلود و مرور محتويات سرور استفاده مي شود.پس شما ابتدا فايل مورد نظرتان را از سمت چپ انتخاب مي كنيد و سپس از طريق راه بالا يا با كشيدن آن و رها كردن روي سرور،آن را آپلود كنيد.

نكته:فقط نكته اي كه شايد لازم هست عرض كنم خدمت دوستان،اين است كه اگر فايل هاي بزرگ آپلود مي كنيد،بهتر است از مسير Edit > Settings > Transfers مقدار Timeout را افزايش دهيد تا وسط آپلود اتصال قطع نشود.

2.آپلود با كنترل پنل هاست(File Manager)
در اين مورد نيازي به اطلاعات ftp نيست فقط مي بايست به كنترل پنل هاست(پيش فرض cpanel) وارد شويد.سپس در كادر Files،گزينه ي File Manager را كليك كنيد.در ابتدا ريشه ي هاست را مشاهده مي كنيد.مي توانيد در سمت چپ با كليك روي علامت + كنار هر پوشه محتويات آن را مشاهده كنيد(البته براي باز كردن پوشه ها بايد دوبار روي انها كليك كنيد).براي آپلود در بالا روي گزينه ي آپلود كليك كنيد و در پنجره ي باز شده با كليك روي گزينه ي Browse فايل مورد نظر را از كامپيوتر خود برگزينيد.به اين ترتيب آپلود به صورت خودكار شروع مي شود تا 100%.
همانطور كه مي بينيد تعداد محدودي فايل را مي توان از اين طريق آپلود كرد.پس اگر مي خواهيد تعداد فايل زيادي آپلود كنيد گزينه ي مناسب همان برنامه هاي ftp هستند چون شما مي توانيد يك پوشه را آپلود كنيد.
----
از دوستان عزيزم خواهش مي كنم نظرات خودشون رو در مبحث زير كه مخصوص اين كار است مطرح كنند چون مباحث اصلي اين تايپيك به اندازه ي كافي بلند و حجيم هست و مرورش سخت.

تايپيك مخصوص نظرات شما در مورد اين بحث

از همكاري و همراهي شما متشكرم.ببخشيد كه دير شد.

موفق باشيد

 

[echessdesign]

درود بر شما
دوستان عزیز لطف بفرماییید و تنها از طریق دیکمه تشکر

محبت و قدر دانی خود را برسانند، زیرا با با لا رفتن پست هایی که تنها متن تشکر در این تایپیک را دارند، تایپیک از خوانایی خود خارج می شود.
با سپاس فراوان
(پست های اضافه این تایپیک خذف خواهند شد.)

 

[Webber]

با سلام

تعدادي از فايل هاي مربوط به مبحث رو براي استفاده ي دوستان اينجا مي گذارم.

فايل PDF كامل مبحث

فايل PSD سايز كوچك

فايل PSD سايز اصلي

در ضمن پست هاي دوستان پاك نشده و به مبحث بحث و بررسي كه به كرات در پست هاي بالا ذكر شد،منتقل شده اند.

از حسين سعيدي عزيز كه در مديريت اين مبحث كمك شاياني كردند،ممنونم.

همچنين از mohsen.rajabi عزيز كه تا جايي كه بنده ديدم،تنها كسي هستند كه تصوير اين آموزش رو در امضاشون قرار دادند تشكر مي كنم.

اگر مبحث را مفيد ديديد،به دوستانتون هم پيشنهاد كنيد.

موفقيت

 

[tarenoco]

خیلی ممنون
واقعا خوب بود
خسته نباشید

 

[tarenoco]

بهترین راهی که میشه css رو دقیقا همونطور که تو ذهن داریم کد نویسی کنیم به چه صورت هست ؟