تبدیل قالب psd به قالب html5

[websaz2012]

درس سوم
حذف بخش های اضافه
حالا که ما یکسری تنظیمات برای پوسته خود تعریف یا ویرایش کردیم وقت ان رسیده است
که یک سری بخش ها را که به دردمون نمیخوره یا اینطوری بگم اضافه است را پاک کنیم
پس اول از همه من میخوام ک از بالا شروع کنم روی logo کلیک کنید (جایی ک نوشته insert-logo (180*90))
حالا به پایین پایین برنامه نگاه کنید
نوشته ک <img#insert logo> قسمت چپ ان عبارت <a> را میبینید که روی ان کلیک کنید
جالا دکمه Delete را فشار دهید تا logo کلا پاک شود سپس عبارت header را تایپ کنید.
میرویم سراغ sidebar1 که مشاهده میکنید که درون ان یک منو طراحی شده است ولی در طرح ما
به چنین منویی نیاز نداریم پس اونو پاک میکنیم اینطوری که تو یکی از خونه های اون کلیک کرده و در پایین برنامه <ul.nav> را کلیک کرده سپس دکمه Delete را بزنید.

متن کامل ان را انتخاب کنید و سپس پاک کرده و عبارت Sidebar را تایپ کنید

سراغ content بروید و تمام متن ان را پاک کنید و عبارت content را درون ان بنویسید
در اخر سراغ footer میرویم و تمام متن ان را پاک کنید و عبارت footer را درون ان تایپ کنید.



خوب حالا که بخش های اضافی را پاک کردیم وقت ان رسیده که استایل انها را نیز از فایلمون پاک کنید
به پانل css style رفته و این کلاسها را پاک کنید(انتخاب کرده رو ایکن کوچک سطل اشغال کلیک کنید)
[LTR].content ul, .content ol
ul.nav
ul.nav li
ul.nav a, ul.nav a:visited
ul.nav a:hover, ul.nav a:active, ul.nav a:focus[/LTR]
پایان درس سوم.

 

[websaz2012]

درس چهارم
اضافه کردن چند کلاس دیگر به صفحه
اگه به فایل psd یک نگاه دیگر بیندازید متوجه خواهید شد که طرحمون
از شش بخش تشکیل شده است(پانل color را فعال کرده و درون ان تیک container را بردارید)
ما بخش های header و sidebar و content و footer را داریم اما دو بخش ان را که مربوط به slider و showcase است را نداریم وباید خودمون طراحی کنیم.
اول slider را بعد از header امده است را طراحی میکنیم.
پس وارد قسمت کد میشویم (code)
بعد از عبارت <div class="header">header<!-- end .header --></div> کلیک کرده و از
Insert > Layou objiect >Div tag
را انتخاب کنید

تو کادر class عبارت slider را تایپ کنید و new css rule را کلیک کنید و سپس تو کادر جدید تو قسمت
Rule Difination شما style.css را انتخاب کرده و دو بار ok کنید.
همانطور ک میبینید یک کلاس به نام slider بعد از کلاس header وارد صفحه میشود و همچنین
یک کلاس به نام .slider تو پانل css style تو زیر مجموعه style.css نیز افزوده شده است.
حالا دوباره که تو حالت کد هستید این بار بعد از عبارت
<div class="slider">Content for class "slider" Goes Here</div>

کلیک کرده و طبق مراحل قبلی یک کلاس به نام showcase بعد از کلاس slider وارد صفحه کنید




پایان درس چهارم.

 

[ghasemrayaneh]

درس سوم
حذف بخش های اضافه

متن کامل ان را انتخاب کنید و سپس پاک کرده و عبارت Sidebar را تایپ کنید

سراغ content بروید و تمام متن ان را پاک کنید و عبارت content را درون ان بنویسید
در اخر سراغ footer میرویم و تمام متن ان را پاک کنید و عبارت footer را درون ان تایپ کنید.

مشاهده پیوست 94817

خوب حالا که بخش های اضافی را پاک کردیم وقت ان رسیده که استایل انها را نیز از فایلمون پاک کنید
به پانل css style رفته و این کلاسها را پاک کنید(انتخاب کرده رو ایکن کوچک سطل اشغال کلیک کنید)
[LTR].content ul, .content ol
ul.nav
ul.nav li
ul.nav a, ul.nav a:visited
ul.nav a:hover, ul.nav a:active, ul.nav a:focus[/LTR]
پایان درس سوم.

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

سپاس

 

[websaz2012]

دقیقا بگین کدوم قسمتو متوجه نشدید تا توضیح بدهم

 

[websaz2012]

درس پنجم
چند تنظیم جزئی برای زیبایی کار
در این درس ما فقط روی کلاس container که سایتمون بر روی ان سوار است
متمرکز میشویم
کلاس container را در پانل css style انتخاب کنید و روی ان دو بار کلیک کنید تا کادر
مورد نظر برای تنظیمات باز شود و طبق زیر پیش بروید.






سپس ok کنید
حالا ما میخواهیم که یک سایه خیلی کم رنگ به دور container داشته باشیم
من نمیخوام به شما css3 را یاد بدم چون زمان زیادی را میطلبه پس من این کدها رو میدم شما

به قسمت استایل container اضافه کنید

[CSSS] -moz-box-shadow: 0px 0px 5px #D2D5D6;
-webkit-box-shadow: 0px 0px 5px #D2D5D6;
-ms-box-shadow: 0px 0px 5px #D2D5D6;
-o-box-shadow: 0px 0px 5px #D2D5D6;
box-shadow: 0px 0px 5px #D2D5D6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;


[/CSSS]
حالا همه را ذخیره کنید(save all) سپس f12 را بزنید و نتیجه را در مرورگر ببینید.


پایان درس پنجم.

 

[websaz2012]

متن کامل ان را انتخاب کنید و سپس پاک کرده و عبارت Sidebar را تایپ کنید

متن داخل sidebar1 را میگم

 

[websaz2012]

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

این درس هیچ اجباری ندارد ولی من دوست داشتم این درس را هم بگم در این درس
ما سایتمونو با تصاویری که از فتوشاپ ذخیره کردیم سر هم میکنیم سپس که کامل شد تک تک بخش ها رو از نوع و تخصصی تر تعریف میکنیم
پس فایل psd را درون فتوشاپ باز کنید
اول میرویم سراغ header یک انتخاب به دور ان رسم میکنیم مانند تصویر زیر




سپس از Edit > Copy Merged را انتخاب میکنیم حالا وارد دریمویور میشویم و متن داخل header را
پاک میکنیم و کلید ctrl+V را میزنیم.
یک کادر براتون باز میشود که شما در ان کادر نوع فرمت تصویری که میخواهید را انتخاب که در کادر دومی jpeg را انتخاب کنید سپس
Okکنید و در پایان فایل را با نام header درون پوشه images ذخیره میکنیم.



*** این کادر بر اساس نوع ورژن دریمویور متغیر خواهد بود***

دوباه سراغ فتوشاپ بروید حالا یک انتخاب دیگر به دور slider میکشیم از منوی Edit > Copy Merged

را انتخاب کرده و وارد دریمویور می شویم سپس متن داخل slider را پاک کرده و ctrl+V را میزنیم و تصویر را با نام slider درون پوشه images ذخیره میکنیم.





دور showcase نیز یک انتخاب و مانند قبل عمل کرده و تصویر را با نام showcse درون پوشه images ذخیره کنید.





حالا نوبت sidebar1 است .
اول وارد دریمویور شوید تا یک سری تغییرات دیگر به sidebar1 بدهیم کلاس .sidebar1 را انتخاب کرده
سپس margin-right را به 10پیکسل تغییر میدهیم حالا وارد فتوشاپ میشویم و دور sidebar را انتخاب میکنیم.
مانند مراحل قبل عمل میکنیم و تصوییر را با نام sidebarدرون پوشه images ذخیره میکنیم.




حالا سراغ content میرویم. به دریمویور روید و کلاس .content را انتخاب کنید
و عرض ان را به 622 پیکسل و float را به left تغییر دهید.


وارد فتوشاپ شده دور content را نیز یک انتخاب بکشید و مثل مراحل قبل عمل کنید

برای footer وارد دریمویور شوید و padding ان را پاک کنید و margin-bottom: 70px; را هم به ان اختصاص دهید و وارد فتوشاپ شوید ومثل مرحله های قبل عمل کنید

سایت تا کنون با این تصاویر کامل شد و در درسهای بعدی ما این تصاوییر را پاک کرده و کلاسهای موردنیاز خود را جاگذاری میکنیم

 

[websaz2012]

برای کمک به شما دوستان میتوانید فایل زیر را دانلود کرده ان را داخل دریمویور باز کنید تا مفهوم این درس را بهتر متوجه شوید.

مشاهده پیوست lesson6.rar

 

[websaz2012]

*********************************************************************************************************************************************
دوستان یه چیز قبلا یادم رفته بود که به شما یاد اموری کنم در این اموزش از dreamweaver cs6 استفاده شده است چنانچه دوستان از نسخه های پایین تر استفاده میکنند ممکن است هنگام
استفاده از تمپلتهای اماده دریمویور کلاسهایی با نام های متفاوت با این اموزش مواجه شوند . که در این صورت با خلاقیت میتوانند مشکل را حل کنند
*********************************************************************************************************************************************

درس هفتم
طراحی هدر سایت
از این درس به بعد ما تو هر درس فقط به یک بخش می پردازیم ک در کل شش درس خواهیم داشت
درس اول مربوط ب هدر سایت خواهد بود.
هدر
اگر به هدر سایتمون توجه کنید خواهید دید که این هدر ما از سه بخش تشکیل شده است
1.لوگوی سایتمون
2.کادر جستجو
3.منوی بالایی
که در طراحی نیز به همین ترتیب بالایی عمل خواهیم کرد.
-لوگو سایت
مراحل:وارد فتوشاپ شوید و فایل psd اموزش را باز کنید
ما باید یک تصویر از لوگوی سایتمون ذخیره کنیم چند راه داریم
یکی این است که ما دور ان یک انتخاب بکشیم و اونو کپی کنیم
راه دومی که خیلی ساده تر است و خیلی هم کاربردی که اصولا هم می تواند یک ترفند تلقی شود
این است که ما لوگوی خود را بصورت smart objiect در اوریم که در ان صورت با دوبار کلیک کردن روی ان , فتوشاپ لوگوی ما رو در یک سند جدید باز خواهد کرد و ما میتوانیم ان را ذخیره کنیم .
من این راه را پیشنهاد میکنم.
گروپ header را از حالت قفل شدن در اورید(گروپ را انتخاب روی ایکن قفل کلیک کنید).
حالا گروپ header را باز کنید و گروپ logo را که زیر مجموعه ان است را انتخاب کنید.
و همانند شکل روی تصویر مورد نظر کلیک کنید



سپس از منوی باز شده عبارت Convert Smart Objiect را انتخاب کنید.
حال که گروپ ما به یک smart objiect تبدیل شده ب روی ان دوبار کلیک کنید تا فایلمون رو در یک سند جدید باز کنه حالا از منوئ
File > save for web
را انتخاب کرده و از کادر فرمت png24 را انتخاب کنید و تصویر را با نام logo.png داخل پوشه images ذخیره کنید.




این پایان مرحله اول بود حالا وارد دریمویور شوید و روی تصویر header کلیک کنید
سپس دکمه delete کیبرد را فشار دهید تا تصویر مورد نظر حذف شود حالا از منوی
Insert > image را انتخاب کرده و از پوشه images تصویر logo.png را انتخاب کنید
در کادرجدید جلوی عبارت Altemate text عبارت logo را تایپ کرده و ok کنید.

لوگوی ما وارد header خواهد شد

***************************************************************************
لوگو:اصولا یک تصویر که نشانگر سایت است و به چند شیوه میتوان ان را در یک صفحه نشان داد
1.مانند همین روش که ما ان را وارد صفحه کرده و یک لینک به ان میدهیم
2.یک لینک در صفحه میدهیم سپس با استایل نویسی به ان عرض و طول و لوگوی خود را پس زمینه
ان خواهیم کرد.
***************************************************************************

من خودم روش اول را بیشتر میپسندم که در ضمن باید بگویم در هردو حالت میتوان برای لوگوی خود استایل تعریف کرد.
روی تصویر لوگو کلیک کنید سپس در پاین برنامه تو قسمت properties تو بخش link یک لینک پوچ مثل # یا javascript;: را تایپ کرده و اینتر بزنید.
F12 را بزنید و نتیجه را در مرورگر ببینید .
همانطور که میبینید تصویر ما دارای یک لینک شده است اما ظاهرا تصویر ما به سمت راست کشیده شده است که دلیل ان همان خاصیت direction:rtl; است که ما به تگ body نسبت داده ایم.
که این خاصیت تمام اجزای وب را به سمت راست کشیده و متون وب را نیز راست چین خواهد کرد.
اما در فایل psd ما این لوگو در سمت چپ قرار دارد به نظرتون چه طوری ما لوگوی خود را به
سمت چپ ببریم؟
اگه یادتون باشه ما دو تا کلاس به نام های left و right قبلا طراحی کرده بودیم که هم اکنون بدردمون میخوره.

رو تصویر لوگو دوباره کلیک کنیدو سپس در پایین برنامه تو قسمت propreties از کادر class که اصولا سمت راست قرار دارد عبارت left را انتخاب کنید
در ان صورت لوگوی شما به سمت چپ کشیده خواهد شد.خوب بخش لوگو به پایان رسد.
بخش بعدی کادر جستجو خواهد بود.

 

[websaz2012]

بابا خیلی بی معرفتین چرا نظر نمیدین؟

 

[mtshavandi]

از بس کارت درسته و مهمتر از اون سرعتت بالاست!

 

[ghasemrayaneh]

بابا خیلی بی معرفتین چرا نظر نمیدین؟

بسیار سپاس از شما

من کمتر نظر میزارم تا اسپم نداده باشم . در کل کارت بیسته جای نظر نذاشتی دیگه d:

 

[websaz2012]

_ کادر جستجو
دیگه رسیدیم به بخش کادر جستجو
کادر جستجو یه بخش از سایت است که از ان برای جستجو کردن عبارت موردنظر استفاده میشود
که اصولا یک دکمه درکنار ان است که بعد از تایپ کردن و زدن اون دکمه مرورگر شروع به جستجو میکند
***************************************************************************
اصولا فرم ها همیشه به یک فایل php متصل هستند(استثناء هم داریم) چون همانطور که میدانید php یک زبان سمت سرور است و خیلی کارها با این زبان میتوان کرد از جمله طراحی سایتهای دینامیک .
سایت های دینامیک به سایتهای کاملا هوشمند و دارای قابلیت اپدیت همیشگی هستند گفته میشود مثل همین فروم که شما یک تاپیک میتوانید ارسال کنید.
***************************************************************************

بگذریم
دوستان تمام سعی من اینست که اموزش رو جوری بدم که احتیاجی به کدنویسی نباشه
گر چه در کدنویسی شما به همه چیز تسلط کامل دارید اما خوب اونم به یک اموزش مجزاء
نیاز دارد که از وقت و حوصله ما خارج است سعی من اموزش خود دریمویور بصورت کاربردی
است.
بازم بگذریم
میریم سراغ ادامه کار
فایل psdمونو تو فتوشاپ باز کنید
تو گروپ header گروپ search را باز کنید سپس توی ان گروپ button را باز کنید و متنمونو
مخفی کنید(تیک ان را بردارین)
سپس دور این کادرمونو چند تا خط می اوریم به صورت زیر



حالا اول یک انتخاب فقط به دور input میکشیم



حالا که انتخاب ما فعال است گروپ Background را که پایین ترین گروپ فایلمون است را مخفی کنید
سپس از منوء Edit > Copy Mereged را انتخاب کرده و از File > New را میزنیم
در کادر جدید در قسمت backgroun content شما گزینه transparent را انتخاب کنید سپس
ok کنید



حالا یک سند جدید بدون پس زمینه به اندازه 180*30 باز خواهد شد
سپس از Edit > paste را انتخاب کنید
واز منوء File > save for web را انتخاب کرده و با فرمت png24 درون پوشه images با نام input.png
ذخیره کنید. این شد تصویر کادر متن ما.
نوبت تصویر دکمه جستجومون است پس یک انتخاب دور ان
هم میکشیم. البته بهتره قبلش گروپ background را دوباره فعال کنید تا بهتر بتوانید ببینید مثل
مرحله قبل انجام دهید و تصویر را با نام btn.png درون پوشه images ذخیره کنید.



خوب کار ما با فتوشاپ برای این بخش به اتمام رسید میرویم سراغ دریمویور.

وارد حالت code دریمویور شوید سپس تو قسمت header بعد از کد

[HTMLS]<a href="#"><img src="images/Logo.png" alt="logo" width="377" height="112" class="left"></a>[/HTMLS]

کلیک کرده و یک کلاس با نام searchbar وارد header کنید و تنظیمات ان را بصورت زیر انجام دهید

 

[websaz2012]

...........ادامه

شکل کلی هدر تا این لحظه



این کلاس که ما تعریف کردیم دربر گیرنده کل فرم ماست
خوب بریم سراغ طراحی کادرها قبل از ان باید یک فرم تعریف کنیم
در حالت Desing دریمویور باشین و متن داخل searchbar را پاک کنید و از منوء
Insert > form > form
را انتخاب کنید. یک فرم داخل searchbar تشکیل میشود

داخل فرم کلیک کنید و از منو inser > form >text field را انتخاب کنید در کادر جدید تنظیمات را مثل
زیر انجام دهید.



و ok کنید که یک کادر متنی وارد فرم ما خواهد شد که یک id به نام input به ان اختصاص داده می شود.

حالا می خواهیم یک دکمه هم در کنا کادر متنی وارد کنیم پس در کنار کادرمتنی در یک جاء خالی درون فرم کلیک کنید و از منوء insert > form > button را انتخاب کنید و کادر را همانند زیر تنظیم کنید




حالا روی همین دکمه کلیک کنید سپس از قسمت پایین تو بخش propreties تو کادر value بجای عبارت submit عبارت جستجو را تایپ کنید و اینتر را بزنید.





خوب دیگه وقت ان رسیده که ما برای این دوتا استایل تعریف کنیم اول واسه کادر متنی
اول پانل css style را باز کنید سپس روی کادر متنی کلیک کنید حالا که روش کلیک کردین تو پانل css style یک ایکن کوچک شبیه یک ورق تا خورده با یک علامت + پایین این پانل است روش کلیک کنید.
کادر مطابق شکل باز میشود



میتوانید عبارتهای قبل از عبارت #input را پاک کنید سپس ok کنید.

..............

 

[websaz2012]

........ ادامه

در کادر باز شده همانند تصاویر زیر ان را تنظیم کنید













سپس ok را بزنید میبینید که کادر ما دقیقا همانی خواهد شد که در فتوشاپ میدیدیم.

 

[websaz2012]

.......... ادامه

حالا نوبت دکمه جستجو است برای دکمه هم مراحل کادر متنی را پیش گیرید و تنظیمات را همانند زیر انجام دهید.









خوب بخش کادر جستجو هم به پایان رسید در زیر هم تصویر نهایی

 

[websaz2012]

فایل نهایی تا الان
مشاهده پیوست lesson7.rar

 

[websaz2012]

_ منوی سایت

خوب به بخش مهیج منوی سایت رسیدیم و ما تو این درس میخواهیم که یک منو طراحی کنیم
فایل psd رو باز کنید تو گروپ nav واقع در گروپ header لایه های متن و دو تا لایه های ایکن کوچک را خاموش کنید.



حالا ما میخواهیم این تصویر را ذخیره کنیم اول درو این منو را چندتا خطکش میکشیم و سپس با ابزار انتخاب دور ان را انتخاب میکنیم بصورت زیر.



سپس لایه background را خاموش کرده و از Edit > Copy Merged را انتخاب سپس file > new را انتخاب میکنیم و ان را روی transparent مانند تصویری که واسه input ذخیره کردیم paste میکنیم و ان را با نام nav.png ذخیره میکنیم.

این شد تصویر پس زمینه منو حالا نوبت به ذخیره اون دو تا ایکن ها میرسه
پس لایه های ان دو ایکن را فعال کنید.
حال که دو لایه ایکن را فعال کردین انها را به Smart Objiect تبدیل کرده و رای هر کدام دوبار کلیک کنید تا فتوشاپ انها را در یک سند جدید بدون پس زمینه بازکند
سپس ایکن خونه را با نام home.png و ایکن قفل را با نام login.png ذخیره کنید.

خوب برای این قسمت دیگه به فتوشاپ نیاز نداریم پس وارد دریمویور میشویم.اما شما باید قبلش سراغ container بروید و به ان خاصیت position: relative; دهید دلیل این کار را بعدا میگم. حالا
تو حالت code بروید و بعد از searchbar کلیک کنید. مانند زیر



و از منوء insert > layout objiect > div tag را انتخاب کرده و تو کادر class عبارت nav را
وارد کنید و روی گزینه new css reuler کلیک کنید در کادر جدید مراقب باشید تا تو قسمت Rule Defination روی style.css قرار گرفته باشد سپس ok کنید و تنظیمات ان را مانند زیر انجام دهید.





....................

 

[websaz2012]

......... ادامه



سپس ok کنید و شکل تا این لحظه:




***************************************************************************
حالا چرا ما به containerحالت position:relative; را دادیم؟
دلیل ان این است که ما به هر چیزی که درون conteainer است بخواهیم خاصیت
position: absolute; بدهیم اون عنصر ممکن است از مرز cotainer خارج شود که دلیل اصلی ان این است در ضمن با خاصیت های lefr و right نیز میتوان ان را از مرز container خارج کرد مثل همین منوی ما اما خوب این left و right از مرز خود container محاسبه میشود که اصلیترین دلیل این کار هم
همین است میتونید امتحان کنید این خاصیت را از container شما disable کنید و نتیجه را ببینید.
***************************************************************************

خوب میریم سراغ نوشته ها و ایکنها. متن داخل nav را پاک کنید و عبارتهای خانه ورود را با زدن دکمه بزرگ کیبرد با فاصله تایپ کنید.

حالا متن خانه را هایلایت کنید و در پایین برنامه تو قسمت propries تو قسمت link یک لینک پوچ مانند # تایپ و اینتر کنید برای کلمه ورود نیز همین کار را انجام دهید.

ما دوتا لینک توی nav وارد کردیم حالا من میخوام رنگ این لینکها سفید باشد پس تو پانل css style رو
ایکنی که شبیه به یک ورق تاخورده با علامت+ است کلیک کنید و مانند تصویر زیر تایپ کنید و ok
کنید.



سپس تو کادر جدید تو قسمت color رنگ را سفید انتخاب کنید و ok کنید.
تو مرورگر اگر تست کنید خواهید دید که رنگ لینکها سفید شده.
حالا من میخوام وقتی که موس روی لینکها میرود رنگ لینکها یه کمی تیره تر شود پس دوباره روی همون ایکن تو پانل css style کلیک کنید و مانند زیر انجام دهید.




و ok کنید و تو کادر جدید تو قسمت color رنگ #ccc را انتخاب کنید و ok کنید.خوب حالا بریم به استایل دهی لینکها و اون ایکونهای کوچک.من میخوام کل لینکها رو کمی جابجا کرده و اون ایکن های کوچک را پس زمینه لینکها قرار بدم پس به دو کلاس نیاز دارم یکی به نام .home ویکی دیگه با نام .login پس این دو کلاس را میسازم اول کلاس .homeرا میسازم و تنظیمات ان را مانند تصویر زیر انجام دهید.

..........................

 

[websaz2012]

.............. ادامه







خوب ok کنید. این شد کلاس home حالا یک کلاس دیگه با نام .login بسازین وتنظیمات ان را مانند
زیر انجام دهید.






....................