ورود

View Full Version : سوال: آموزش کامل طراحی ریسپانسیو.لطفاً


سینا اکبری
دوشنبه 30 تیر 1393, 15:46 عصر
سلام.
من میخوام سایت ریسپانسیو طراحی کنم و هیچ چیزی در این مورد نمیدونم تو انجمن ها و اینترنت سرچ کردم همه یک سری کد داده بودند و نگفته بودند برای چیه و.....
اگر میشه یکی یک کتابی،نرم افزاری،.....یا اینکه خودتون زحمت بکشید و یاد بدید مطمئنن خیلی ها دنبال این موضوع هستند.
اگر میشه طراحی ریسپانسیو رو هم برای سایت های استاتیک بگید و هم داینامیک مثل وردپرس
ممنون
kahe.mehrdad
دوشنبه 30 تیر 1393, 16:02 عصر
دوست من responsive بودن یک سایت در یک کلام به این خلاصه میشه که با هر دستگاهی اون وبسایت را ببینی قالبش بهم ریخته نشه. برای نمونه میتونی همین وب سایت برنامه نویس خودمون را تست کنی. صفحه مرورگرت را کوچیک کن ببین چه شکلی میشه. یعنی اینکه این سایت ریسپانسیو نیست. حالا اگه به این سایت بری : http://barnamenevisan.org/ و دوباره مرورگت را کوچیک کنی میبینی که صفحه وب هم داره تغییر حالت میده و خودش را با اندازه مرورگر تطبیق میده. این یعنی سایت responsive شده است. اگه تا اینجا مشکلت رفع شده برو به این آدرس http://www.aparat.com/GolsaSoft چند تا ویدیو را که ببینی خودت دستت میاد. سوال داشتی همینجا بپرس.
سینا اکبری
دوشنبه 30 تیر 1393, 18:50 عصر
چند تا از این فیلم ها دیدم ، بلد هستم با دریم ویور سایت ریسپانسیو طراحی کنم اما میخوام بدونم از چه کد هایی،چه روش css و...استفاده میشه تا بتونم خودم طراحی کنم.
چون من از دریم ویور خوشم نمیاد و بیشتر با نرم افزار های دیگه طراحی می کنم
اگر میشه بیشتر کتاب معرفی کنید .
ممنون اگه کمکم کنید من خیلی به این آموزش نیاز دارم
soroush.r70
دوشنبه 30 تیر 1393, 21:32 عصر
میتونی از این لینک کمک بگیری دوست عزیز (http://barnamenevis.org/showthread.php?378702-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-responsive)
tux-world
دوشنبه 30 تیر 1393, 22:18 عصر
طراحی رسپانسیو بیشترش تجربی و اکتسابی هستش. باید با مرورگرها و رزولیشن های محتلف کار کنید تا دستتون بیاد. کتاب به کارتون میاد ولی تا حدودی که شما استفاده ها شون رو یاد بگیرید
kahe.mehrdad
سه شنبه 31 تیر 1393, 08:21 صبح
دوست من شما اگر با هسته bootstrap (http://www.getbootstrap.com)کار کنی خیلی کارت راحته. این هسته تمامی کلاس ها را برای ریسپانسیو کردن وب سایت تو خودش داره. پس برای ریسپانسیو کردن کمی باید bootstrap بلد بود. بعدش دیگه کارتون خیلی راحته. الان کد زیر را شما در نظر بگیرید:


<body>
<div class="row">
<div class="container">
<div class="col-md-3 col-sm-6" style="background:black; height:100px">
</div>
<div class="col-md-9 col-sm-6" style="background:blue; height:100px">
</div>
</div>
</div>
</body>

در کد بالا همه کلاس هایی که میبینید در bootstrap تعریف شده. فقط شما ازش استفاده میکنید فقط. اون دو تا div که کلاس col-md دارند، md در اونجا به معنای medium هست یعنی توی نمایشگر های متوسط صفحه را 3 به 9 تقسیم کن بین این دو تا div . حالا کلاس بعدی col-sm یعنی اگر نمایشگر small بود اونها رو نصف نصف نشونش بده. و کلاس row میگه هر چی که بین اون هست رو در کنار هم توی یک سطر نشونش بده. یعنی الان اون دو تا div تو هر حالتی کنار هم قرار میگیرند.
سینا اکبری
سه شنبه 31 تیر 1393, 15:50 عصر
خیلی ممنون .
عاشق کسانی هستم که قشنگ پاسخ میدن
kahe.mehrdad
سه شنبه 31 تیر 1393, 16:01 عصر
خواهش میکنم دوست من.
اگه باز هم به مشکلی برخورد کردید تو همین پست مطرح کنید.
سینا اکبری
سه شنبه 31 تیر 1393, 16:09 عصر
مشکل که دارم
اگه میشه سایتم رو یک نگاه بیاندازید ببینید باید چی رو دستکاری کنم
www.weandyou.ir
ریسپانسیو هست اما میخوام منو های یک شکل دیگر د تبلت و موبایل نمایش داده شه
m.alinejad
سه شنبه 31 تیر 1393, 16:20 عصر
می تونید از کتاب Responsive Design-Smashing eBook Series استفاده کنید.
http://ebook-dl.com/item/responsive_design_smashing_magazine (http://ebook-dl.com/item/responsive_design_smashing_magazine/)
سینا اکبری
سه شنبه 31 تیر 1393, 21:26 عصر
ممنون کتاب خوبی است
kahe.mehrdad
چهارشنبه 01 مرداد 1393, 00:33 صبح
مشکل که دارم
اگه میشه سایتم رو یک نگاه بیاندازید ببینید باید چی رو دستکاری کنم
www.weandyou.ir (http://www.weandyou.ir)
ریسپانسیو هست اما میخوام منو های یک شکل دیگر د تبلت و موبایل نمایش داده شه

دوست من وب سایت شما ریسپانسیو نیست. چون اگر دقت کنید تصاویر کوچک نمیشند. و همچنین صفحه اسکرول میخوره وقتی کوچیک میشه. برای شروع به نظرم بهتره از قالب های ریسپانسیو آماده استفاده کنی. اگر با جوملا یا وردپرس کار میکنی راحت میتونی پیداش کنی
سینا اکبری
چهارشنبه 01 مرداد 1393, 13:06 عصر
من میخوام از بوت استرپ استفاده کنم اما شکل سایتم عوض میشه .
چجوری میتونم css خودم رو درونش قرار بدم؟
kahe.mehrdad
چهارشنبه 01 مرداد 1393, 13:21 عصر
شما هز CMS آماده استفاده میکنید یا خودتون وب سایتونو نوشتید؟
سینا اکبری
چهارشنبه 01 مرداد 1393, 13:25 عصر
از وردپرس
اما بعد ها میخوام سایت های استاتیک هم بسازم
kahe.mehrdad
چهارشنبه 01 مرداد 1393, 13:32 عصر
خوب اگه از وردپرس استفاده میکنی قالب های زیادی هست که responsive هم هستند. فقط کافی عبارت قالب ریسپانسیو (واکنش گرا) برای وردپرس را سرچ کنی
سینا اکبری
چهارشنبه 01 مرداد 1393, 13:36 عصر
بله میدونم اما میخوام قالبی که خودم طراحی کردم رو ریسپانسیو کنم.
بعدشم من طراحی سایت میکنم نمیتونم برای دیگران هم از جاهای دیگه استفاده کنم:قهقهه:
اگر میشه روش جایگزینی فایلی css در یسپانسیو رو بگید
اگر توانستید کمکم کنید و اگر نمیتوانید زحمت نمیدم تا همینجاشم خیلی بزرگواری کردید
farzadyazdan
چهارشنبه 01 مرداد 1393, 13:37 عصر
سلام دوست عزیز
بنظر من اگر میخواهید رسپانسیو با bootstrap کار کنید حداقل خودتون یک سایت رو از صفر طرح بزنید البته یادتون باشه از نسخه rtl بوت استرپ استفاده کنید اگر هم خواستید از استایل های خودتون استفاده کنید کافی فایل css خودتون رو بعد از لینک فایل های bootstrap قرار بدین با این کار استایل های bootstrap رو over write میکنید

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

اگر هم تازه کار هستید و نمیدونید چطور کلاس های بوت استراپ رو کنار هم قرار بدین و ازشون استفاده کنید پیشنهاد میدم از این سایت استفاده کنید.

http://www.layoutit.com/

این سایت به شما کمک میکنه که به راحتی و در چند دقیقه یک layout با بوت استراپ برای سایتتون طراحی کنید

سوالی داشتین بپرسین

موفق باشید
kahe.mehrdad
چهارشنبه 01 مرداد 1393, 13:44 عصر
دوست من این باور خیلی اشتباهیه که حتما یک طراح اصلا نیمتونه کدی را از جای دیگه کپی کنه. همونطور که دوستمون گفت شما میتونی نسخه rtl bootstrap را بگیری و اختصاصی کنی. البته فریمورک های دیگه ای هم هستند که من پیشنهادشو نمیدم. مبحثش در عین سادگی خیلی گستردست. تو این تاپیک نمیشه بیش از این گفت. شما چند تا ویدیو نگاه کنی کار کردن bootstrap را ببینی خودت میفهمی که کار ساده ایه
سینا اکبری
چهارشنبه 01 مرداد 1393, 13:44 عصر
سلام .ممنون.آقای فرهاد شما نحوه جایگزینی فایل css رو با تصویر به من بگید که چجوری فایل سی اس اس خودم رو جایگزینی کنم مشکلم تا حدی بر طرف میشه همون کاری که گفتید رو انجام دادم قبلاً اما سایت یک شکل عجیبی میشه که اصلا هیچی معلوم نیست
سینا اکبری
چهارشنبه 01 مرداد 1393, 13:47 عصر
منظورتون اینه که فایل css بوت استرپ رو ویرایش کنم؟
farzadyazdan
چهارشنبه 01 مرداد 1393, 13:50 عصر
سلام .ممنون.آقای فرهاد شما نحوه جایگزینی فایل css رو با تصویر به من بگید که چجوری فایل سی اس اس خودم رو جایگزینی کنم مشکلم تا حدی بر طرف میشه

همون کاری که گفتید رو انجام دادم قبلاً اما سایت یک شکل عجیبی میشه که اصلا هیچی معلوم نیست


پیشنهاد میکنم توی www.youtube.com یه سرچ در مورد bootstrap بزنین مطمئنا چیطهای زیادی در این باره یاد میگیرید
سینا اکبری
چهارشنبه 01 مرداد 1393, 14:04 عصر
قول میدم سوال آخرم باشه
هیچ راهی نیست که css قالب سایتم رو در بوت استرپ جایگزاری کنم؟
به نظر تون یک تاپیک در مورد آموزش بوت استرپ ایجاد کنم؟
farzadyazdan
چهارشنبه 01 مرداد 1393, 14:08 عصر
قول میدم سوال آخرم باشه
هیچ راهی نیست که css قالب سایتم رو در بوت استرپ جایگزاری کنم؟
به نظر تون یک تاپیک در مورد آموزش بوت استرپ ایجاد کنم؟

ببینید اگر شما بخواهید قالب سایتتون رو تبدیل به بوت استرپ کنید باید از کلاس های بوت استراپ هم استفاده کنید برای تگ هاتون و صرف تعریف و لینک دادن بوت استراپ کافی نیست
elahe471
چهارشنبه 01 مرداد 1393, 14:14 عصر
من پیشنهاد میکنم حالا که قالب و طراحی کردین و میخواین تبدیل کنید از css گرید responsivegridsystem.com (http://www.responsivegridsystem.com) استفاده کنید چون فوق العاده سبک و راحته
8908183
شنبه 08 شهریور 1393, 13:49 عصر
این ویدیوهای فارسی رو ببینید ...داخلش در مورد نحوه طراحی قالب برای جلوگیری از به هم ریختن قالب توضیح داده شده..با گوشی همراه هم تست کردم با رزلوشن های مختلف هم جواب میده...واقعا فوق العاده بود..البته هر آموزشش چندین قسمت داره...همه قسمت ها رو کامل کنید تا بتونید قالب رو به صورت ریپانسیو و اصولی ایجادش کنید...

http://clicksite.ir/article.php?id=46 (http://clicksite.ir/article.php?id=47)
_mojitaba_
شنبه 08 شهریور 1393, 16:49 عصر
بوت استرپ فوق العاده آسونه و راحته منتها کدها خیلی زیاد و پیچیده میشه
سینا اکبری
یک شنبه 09 شهریور 1393, 20:45 عصر
ممنون از همه