چگونه با HTML , CSS سایت طراحی کنیم ؟

[hamid_diablo]

سلام دوستان

من تقریبا با تمام مباحث HTML , CSS آشنا هستــــــم
میخواستم بدونم الان چطور باید یک سایت استاتیک طراحی کنـــــــم؟

ایده از کجا بیارم؟ دید مناسبی از طراحی یک سایت ندارم فعلا...
(ممنون میشم راهنماییم کنید )

[Thor God]

پيش فرض چگونه با HTML , CSS سایت طراحی کنیم ؟


به سختی :n02:

جدا از شوخی باید بگم که شما فایل psd قالب از اینترنت بگیرید و تبدیل کنید به کد.
بعدش مبحث مختلف رو اجرا کنید مثله تکنیک های رسپانسیو و ... . و البته ترجمه به CMS های آماده مثله وردپرس.

بعدش که آشنا شدی دیگه خودتم میتونی تو فتوشاپ طراحی انجام بدی و بعدش کد کنی.

موفق باشی/

[hamid_diablo]

به سختی :n02:

جدا از شوخی باید بگم که شما فایل psd قالب از اینترنت بگیرید و تبدیل کنید به کد.
بعدش مبحث مختلف رو اجرا کنید مثله تکنیک های رسپانسیو و ... . و البته ترجمه به CMS های آماده مثله وردپرس.

بعدش که آشنا شدی دیگه خودتم میتونی تو فتوشاپ طراحی انجام بدی و بعدش کد کنی.

موفق باشی/

فایل psd رو از کجا باید گیرم؟

(سایت معرفی کنید ممنون میشم)
در ضمن تمپلت چیه؟ توضیح میدین ...

در ضمن نظرتون درباره این سایت چیه ؟

[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

[tabriz-info]

فایل psd رو از کجا باید گیرم؟

(سایت معرفی کنید ممنون میشم)
در ضمن تمپلت چیه؟ توضیح میدین ...

در ضمن نظرتون درباره این سایت چیه ؟

[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

آدرس این سایت رو میبینی اولش نوشته template همون جواب سوال سومی هست که پرسیدی تمپلت template

یعنی قالب ، قالب یک سایت

فایل psd خروجی نرم افزار فتوشاپ هست

یعنی شما یک طرح که در ذهن دارید به صورت گرافیکی روی نرم افزار فتوشاپ طراحی میکنید و سپس وقتی میخواید ذخیره کنید یک فایل با پسوند psd تحویل میده

معلومه که با فتوشاپ آشنایی ندارید میتونید به جای اون از balsamiq mockups استفاده کنید از این جا دانلود کنید : [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

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


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

[hamid_diablo]

همین الان یه تمپلت دان کردم

کدش رو دیدم.یکم گیج کنندس.از [ div ]ای بیشماری استفاده شده...

اما احساس میکنم خیلی چیزها رو میشه زا همین تمپلتها یاد گرفت...میشه جای متنهای انگلیسی از فارسی استفاده کرد...

در مرود PSD هم یه سوال دارم...

(چقدر باید زا نرم افزار فتوشاپ شناخت داشت که بشه طرح مورد نظر ذهنی رو پیاده سازی کرد؟)

[Web Design]

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

شناخت چندانی لازم نیست لایه ها ، سایه ها و یکم ابزار Pen رو بلد باشی خیلی کمکت می کنه .

اما پیشنهاد من Firework هست این نرم افزار برای طراحان وب هست اصلا :n06:

[kian98]

سلام

میخواستم بدونم الان چطور باید یک سایت استاتیک طراحی کنـــــــم؟
برای طراحی یک سایت استاتیک چند راه دارید.
#1 استفاده از نرم افزارهای طراحی سایت مثل نرم افزار Website X5 که صرفا برای ساخت سایت ایستا هست.
کدنویسی به صورت دستی درن مافزار های ادیتوری مثل نوت پد و یا phpstorm.

ایده از کجا بیارم؟ دید مناسبی از طراحی یک سایت ندارم فعلا...
ایده می تونید از انواع سایت ها بدست بیارید.
مثلا از قالب های سایت های معروف و سایت های خارجی. حتی از قالب وبلاگ ها.
برای ساخت ایده های بهتر میتونید یک قالب کامل رو از اینترنت دانلود کنید و به دلخواه توی مرورگر توش تغییراتی ایجاد کنید.

فایل psd رو از کجا باید گیرم؟
سایت هایی مثل Persiangfx.com و همین طور از این تاپیک ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
توی اینترنت چیزی که زیاده فایل psd هست.

در ضمن تمپلت چیه؟ توضیح میدین ...
تمپلت در زبان انگلیسی یعنی قالب و پوسته :)

(چقدر باید از نرم افزار فتوشاپ شناخت داشت که بشه طرح مورد نظر ذهنی رو پیاده سازی کرد؟)
ببینید: منظور از اینکه یک قالب در فتوشاپ طراحی کنید و کدنویسیش کنید یعنی اینکه فایل psd یک فایل لایه باز هست یعنی اینکه مثل یک تصویر نیست که بعد از اینکه ذخیره اش کردیم دیگه نتونیم هیچ کدوم از عناصر تصویر رو تغییر بدیم. توی فایل psd شما هر بخش از تصویر که توی یک لایه جداگونه باشه رو میتونید تغییر بدید. حالا شما بعد از اینکه اون قالب رو (شکل ظاهریش رو توی فتوشاپ ساختید ) باید بر اساس اون قالب کدنویسی کنید یعنی مثلا لوگوی قالب بالا و سمت راسته پس شما اون لوگو رو به صورت یک توصیر جداگونه ذخیره می کنید و برا اساس مکان اون لوگو کدنویسی می کنید تا توی سایت لوگو دقیقا همونجا قرار بگیره. بعضی از سایت ها و نرم افزارها هوشمند هستند و پس از دادن فایل psd خودشون بر اساس مکان تصاویر فایل قالب رو کدنویسی می کنند.

ساخت یک قالب یک سری اصول هم داره.

برای هر نوع از اجزای قالب یک پوشه درست کنید مثلا :
برای تصاویر پوشه images
برای کدهای css پوشه css
برای کدهای جاوا اسکریپت و جی کوئری به ترتیب پوشه javascript و jQuery.
و....
بعد درون فایل html صفحه اصلی که معمولا اسمش رو index و main میزارند کدهای html اصلی رو قرار بدید و به هرکدوم از بخش ها توی این کدها لینک بدید مثلا به کدهای مکان لوگو رو توی فایل ایندکس بنویسید و بعد آدرس لوگو رو تشون قرار بدید تا دقیقا در همون مکان مورد نظری که توی فتوشاپ بود نشون داده بشه.

باتشکر :n16:

[hamid_diablo]

بسیار ممنون ابت توضیحات کامل و جامع دوستان

(سوال داشتم باز هم تو این تاپیک مطرح میکنــــــم)

[hamid_diablo]

سلام

دوستان به نظرتون برای سبانهای اسکریپی , javascripe بهتره یا jquery ?

و سوال بعدی بریا طراحی وب بهتره از div های متوالی استفاده کنیم که بعدش با position محلش رو مشخص کنیم یا اینکه از table استفاده کنیم بهتره!!! ؟

[kian98]

سلام


دوستان به نظرتون برای سبانهای اسکریپی , javascripe بهتره یا jquery ?
چون جی کوئری یکی از کتابخانه های جاوااسکریپته نمیشه این دو رو زیاد با هم مقایسه کرد ولی برای یه طراحی خوب و حرفه ای جی کوئری پیشنهاد میشه به دلایل زیر:

جی کوئری میتونه یک مکانیسم سریع و موثر بدون نیاز به جاوااسکریپت رو به ما بده.
قابلیت افزودن انیمیشن (fade) به یک صفحه
گرفتن و یا دادن فیدبک به کاربران با استفاده از امکاناتی مثل fade
قابلیت تغییر ظاهر یک صفحه (البته اینکار رو سی اس اس هم میتونه بکنه ولی سی اس اس قادر به انجام اینکار در مرورگرهای مختلف که استانداردهای متفاوتی دارند نیست) ولی جی کوئری میتونه براحتی هرنوع مرورگری رو ساپورت کنه و حتی میتونه مختصات ویژه صفحات وب رو بعد از دستکاری و تغییر ساختار و ظاهر دوباره تغییر بده.
قابلیت کسب اطلاعات یک صفحه از سرور بدون رفرش کردن اون صفحه که اصطلاحا Ajax نامیده میشه. (جی کوئری اینکار رو بدون نیاز به دونستن مختصات ویژه اون سرور و فقط با مراجعه مستقیم به اون سرور انجام میده)
قابلیت اجرا رو تمامی مرورگرها
قابلیت دستکاری و تغییر خصوصیات CSS
متحرک سازی و قرار دادن افکت روی عناصر وب سایت
کار با ایجکس
دسترسی به عناصر موجود در پرونده و تغییر و دستکاری آنها
کنترل اسان و قدرتمند تر رویدادها(Events)
ایجاد افکت و حرکات انیمیشین
توسعه دادن پلاگین ها
دارای برنامه های کوچک و سودمند هم هست

برای طراحی وب بهتره از div های متوالی استفاده کنیم که بعدش با position محلش رو مشخص کنیم یا اینکه از table استفاده کنیم بهتره!!! ؟
مسلما استفاده از div بهتره.
به این دلایل:
در div هر قسمت که لود بشه سریع همون موقع نمایش داده میشه ولی در table باید کلش لود بشه تا نمایش داده بشه .
div ها خیلی سبک و سریع هستند.
کدهای table پیچیده هستند و برای نوشتنشون مغز آدم سوت میکشه ولی div ها کدهای پیچیده و درهم برهم ندارند.

گرچه نوشتن div ها سخت تر از table ها هست.

باتشکر:n16: