چند سوال در مورد طراحی وب

[yasharhi]

سلام
من تازه css و html رو یاد گرفتم و دارم نرم افزار dreamwear رو هم یاد میگیرم. ( قبلا با نیوک ، دیتالایف ، پرستا شاپ ، جوملا سایت راه اندازی کردم ). چند تا سوال داشتم
1- برای طراحی یک وب سایت ابتدا باید بصورت psd در نرم افزارهایی مثل فتوشاپ طراحی کنیم و بعد اون رو به html تبدیل کنیم ؟
2- منظور از طراحی با table چی هست ؟ و آیا منسوخ شده ؟
3- قالب جوملا و وردپرس رو هم میشه با draemwear طراحی کرد ؟
4- کدوم مجموعه آموزشی رو توصیه میکنید ؟

[omidabedi]

1. خیر خیلی راحت میشه با یک note pad یک طراحی فوق حرفه ای کنید. و کلا به نظر من طراحی با فتوشاپ و تبدیل اون به html کار غیر حرفه ای هست.
2.هر قالب باید یک چارچوب داشته باشد به عنوان مثال : سر صفحه - محتوا - ستون سمت راست - ستون سمت چپ .قبلا با تگ های <table> <ul> <li> و نظیر اینها این چارچوب را طراحی میکردند که با امدن css منسوخ شد و جای خود را به div داد و به این نوع سبک طراحی (بویسله ی div) میگن table less design یعنی طراحی بدون table اما هنوز از table استفاده میشود اما سر جای خود مثلا جایی که دقیقا ما جدول بخوایم مثلا میخوایم برنامه ی هفتگی یک کلاس رو مشخص کیم.
3.طراحی قالب میشه با هر چی انجام داد و cms ها طراحی خاص خودشونو ندارند اما باید بر اساس استاندارد های cms برنامه نویسی (به اصطلاح) شود .
4. برای یادگیری طراحی وب بهترین منبع که قابلیت اجرای کد به صورت انلاین رو داره سایت w3schools.com هست.
در سایت خودمم یک اموزشی گذاشتم قبلنا بد نیست یه نگاهی بندازی :

[e4lyas]

1 - طراحی قالب ( پوستهع سایت ) آنچه که حالت گرافیکی داره و در تمام سایت به یک شکلی طراحی شده در فتوشاپ و یا به نرم افزاری ( کم تعداد ) دیگری طراحی میشوند > برای نمایش اون در سایت میبایست کد بشه .. این کد میتونه (...)HTML + Css + Js + Jquery + PHP باشه / البته بیس و پایه html , و بعد css برای استایل دادن هست /

2 - بله ! طراحی سایت ( تمام سایت ) با Table روش بود که در سالهای دور ( :دی ) استفاده می شد ... الان از Div و در HTML 5 از Section استفاده می شه //

3 - ببینید نرم افزار DreamWeaver یک محیط کد نوشتن هست .. مربوط به Wordpree / Joomla / Nuke /و CMS های دیگر نیست ..

--- CMS یک سیستم مدیریت محتوا هستش همچون بلاگفا - میهن بلاگ که اینها در سطح وبلاگدهی هستند ! /

--- قالب بعد از تبدیل شدن به کد html / css برای قرار گیری در یکی از این سیستم های مدیریت محتوا میباست قرار بگیره ( حتی سیستم های نوشته شده شخصی ) .. حالا برای قرار گیری یک سری کد در این سیستم ها تعریف شدن که در قالبتون باید اون کد ها رو قرار بدید تا قالبتون تحت اون سیستم کار کنه /

--- Html / css خالی یک صفحه ی کد هستند که استاتیک هستند و تغییری تحت اون میبایست با نوشتن کد اعمال بشه // ولی وقتی اونو داینامیک کنید این امکان وجود دارد که پیست بدون دست کاری در کد به راحتی ( برای مثال ! ) اضافه شوند و بسیاری کار دیگر که بدون اعمال کد انجام بشند .و این منوط بر استفاد از کد های پیشفرض سیستم ها هست !

--- برای مثال سیستم وردپرس برای تعریف و نمایش عنوان صفحه از


<?php the_title( '<h3>', '</h3>' ); ?>

استفاده میکنه /

--- DreamWeaver یکی از بهترین محیط های کد نوشتن تحت وب هستش که برای شروع خوب پیشنهاد میشه .. حتی به صورت دستی با موس میتونید المان های داخل سایتتون رو وارد کنید و اون کد تحویل بده // اما ایراد اون سنگین بودن ( از نظر من هست ) //
پیشنهاد من بعد از اینکه وارد بر نوشتن کد شدید ( بدون حفظ کردن ( به همراه درک ) ) به محیط های ساده دلچسب مثل Sublime Text و Notepad ++ و امثال این برید که سادگی رو برای شما به ارمغان میاورد :)

--- مجموعه آموزشی در سزح اینترنت زیاد است / پیشنهاد من آموزش هایی ( به صورت ویدیو - کتاب [ایبوک] ) هست که ابتدا توانایی و مهارتتون در یادگیری زبون های اسکریپتی و تحت سروری ( html/css /js/ php /jquery ) افزایش بده و به درک مناسبی از کد ها داشته باشید .. اون درک خیلی مهمه ... حفط نباید بشه :)


زیاد شد :دی امیدوارم تونسته باشم کمکی کرده باشم :)
موفق باشید

[yasharhi]

1. خیر خیلی راحت میشه با یک note pad یک طراحی فوق حرفه ای کنید. و کلا به نظر من طراحی با فتوشاپ و تبدیل اون به html کار غیر حرفه ای هست.
2.هر قالب باید یک چارچوب داشته باشد به عنوان مثال : سر صفحه - محتوا - ستون سمت راست - ستون سمت چپ .قبلا با تگ های <table> <ul> <li> و نظیر اینها این چارچوب را طراحی میکردند که با امدن css منسوخ شد و جای خود را به div داد و به این نوع سبک طراحی (بویسله ی div) میگن table less design یعنی طراحی بدون table اما هنوز از table استفاده میشود اما سر جای خود مثلا جایی که دقیقا ما جدول بخوایم مثلا میخوایم برنامه ی هفتگی یک کلاس رو مشخص کیم.
3.طراحی قالب میشه با هر چی انجام داد و cms ها طراحی خاص خودشونو ندارند اما باید بر اساس استاندارد های cms برنامه نویسی (به اصطلاح) شود .
4. برای یادگیری طراحی وب بهترین منبع که قابلیت اجرای کد به صورت انلاین رو داره سایت w3schools.com هست.
در سایت خودمم یک اموزشی گذاشتم قبلنا بد نیست یه نگاهی بندازی :
http://shiraz-web.ir/content/%D8%A7%D9%85%D9%88%D8%B2%D8%B4%20html
ممنون از راهنماییهاتون
البته من با html و css کاملا آشنایی دارم ولی برای طراحی یک قالب الان با مشکل مواجهم و کارهام خیلی غیر گرافیکی هست .

[mokha21]

1و کلا به نظر من طراحی با فتوشاپ و تبدیل اون به html کار غیر حرفه ای هست.

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

[omidabedi]

به نظر من شما مشکلتون اینه که تجریه ندارید مثه قدیمای خودم
بهتره تو وب گشت بزنید و از هر قالب سایت الهام بگیرید من چند سایت رو میزارم برای الهام گرفتن :
http://captaindash.com/
http://inze.it/
http://trentwalton.com/2011/07/14/content-choreography/
https://www.postable.com/
http://pulpfingers.com/
http://oliverrussell.com/
http://www.liftinteractive.com/about/

البته بسته به کارتون باید از اینها استفاده کنید مثلا سایتی که محتوا زیاد داره نمیتونه از این قالب ها استفاده کنه.

فعلا استفاده از فریم ورک رو پیشنهاد نمیدم چون باید همچین ورزیده تر بشید :دی

[mokha21]

سلام
من تازه css و html رو یاد گرفتم و دارم نرم افزار dreamwear رو هم یاد میگیرم. ( قبلا با نیوک ، دیتالایف ، پرستا شاپ ، جوملا سایت راه اندازی کردم ). چند تا سوال داشتم
1- برای طراحی یک وب سایت ابتدا باید بصورت psd در نرم افزارهایی مثل فتوشاپ طراحی کنیم و بعد اون رو به html تبدیل کنیم ؟
2- منظور از طراحی با table چی هست ؟ و آیا منسوخ شده ؟
3- قالب جوملا و وردپرس رو هم میشه با draemwear طراحی کرد ؟
4- کدوم مجموعه آموزشی رو توصیه میکنید ؟

1. آره

2.صفحات وب معمولا با دو تگ تقسیم بندی میشوند : table و div
تگ table به همراه tr , td و ..
تگ div به همراه حاصیت float و ..
-صفحاتی که با table طراحی میشوند در مرورگر ie سرعتشون افت پیدا میکنه چون داخل table رو قبل از نمایش چک میکنه.
امروزه اکثر صفحات وب با div تقسیم بندی میشند که هم راحتره و سرعتش بیشتره.

3. بله میشه طراحی کرد البته باید طراحی قالب برای اون سیستم رو بلد باشید

4. برای چه چیزی آموزش میخواید : html - جوملا - وردپرس یا ...

[yasharhi]

1. آره

2.صفحات وب معمولا با دو تگ تقسیم بندی میشوند : table و div
تگ table به همراه tr , td و ..
تگ div به همراه حاصیت float و ..
-صفحاتی که با table طراحی میشوند در مرورگر ie سرعتشون افت پیدا میکنه چون داخل table رو قبل از نمایش چک میکنه.
امروزه اکثر صفحات وب با div تقسیم بندی میشند که هم راحتره و سرعتش بیشتره.

3. بله میشه طراحی کرد البته باید طراحی قالب برای اون سیستم رو بلد باشید

4. برای چه چیزی آموزش میخواید : html - جوملا - وردپرس یا ...
4- html css و جوملا و وردپرس رو بلدم ولی نمیدونم الان برای طراحی یک قالب استاتیک باید چکار کنم ؟( الان تو نت پد قالب طراحی میکنم ولی سایت شبیه سایت های دهه 1990 میشه ! )
قبلا بالای 50 تا سایت با جوملا راه انداختم و کلی قالب جوملا رو هم rtl کردم حالا خودم میخوام قالب استاتیک طراحی کنم

[mokha21]

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

حالا اگه میخواید از عکس استفاده کنید باید یکمی فتوشاپ بلد باشید
مثلا این لینک (http://www.websiteha.com/post/2011/06/18/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%DA%A9%D8%A7%D9%85%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-%D8%A8%D8%A7-%D8%AC%D8%B2%DB%8C%DB%8C%D8%A7%D8%AA.aspx) نمونه طراحی سایت با فتوشاپه.

در کنار اون نیز میتونید از css 3 استفاده کنید
سری به این سایت (http://www.7learn.com) بزنید

[yasharhi]

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

حالا اگه میخواید از عکس استفاده کنید باید یکمی فتوشاپ بلد باشید
مثلا این لینک (http://www.websiteha.com/post/2011/06/18/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%DA%A9%D8%A7%D9%85%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-%D8%A8%D8%A7-%D8%AC%D8%B2%DB%8C%DB%8C%D8%A7%D8%AA.aspx) نمونه طراحی سایت با فتوشاپه.

در کنار اون نیز میتونید از css 3 استفاده کنید
سری به این سایت (http://www.7learn.com) بزنید
من با css3 آشنایی دارم باید برم کمی فتوشاپ یاد بگیرم
یک سوال طراحی یک قالب حرفه ای در سطح http://vasterad.com/themes/?theme=nevia چند روز طول میکشه ؟
من از قالب
http://vasterad.com/themes/?theme=nevia
خوشم میاد و می خوام مشابهش رو طراحی کنم ؟ اول باید تو فتوشاپ طراحیش کنم و بعد قسمت قسمت بکنم و با html , css بسازمش ؟!

[mokha21]

برای طراحی چنین قالبی نیازی به فتوشاپ نیست .
شما میتونید با jquery , ajax , js , css3 , html 5 چنین قالبی رو طراحی کنید.

http://www.w3schools.com (http://www.w3schools.com/) منبع خوبی برای آموزش است .

[yasharhi]

برای طراحی چنین قالبی نیازی به فتوشاپ نیست .
شما میتونید با jquery , ajax , js , css3 , html 5 چنین قالبی رو طراحی کنید.

http://www.w3schools.com (http://www.w3schools.com/) منبع خوبی برای آموزش است .
ممنون همچین طراحی چقدر زمان میبره ؟
شروع به طراحی قالب در دریم ویر کردم . هر جا که مشکل داشتم توی همین فروم می پرسم

[mokha21]

زمان طراحی بستگی به تجربه کاری شما داره . اگه حرفه ای باشید و تمیز کارکنید حدودا 4 روز و کمتر

اگه میخواهید همراه با طراحی ، یاد بگیرید 10 روز و بیشتر و شاید خیلی بیشتر زمان ببرد

موفق باشید