شاید خیلی از شما دوستان طراح حرفه ای وب سایت باشید، اما این مطلبی رو که میخوام بگم برای کسانی مفیده که بخوان تازه وارد مبحث طراحی وب سایت بشن و برای همین سعی کردم که این پست در عین حالی که ساده باشه مفید هم واقع بشه.
خیلیها ممکنه ندونن از کجا برای طراحی وب سایت باید شروع کرد، من خودم یادم میاد اولین وب سایتی که درست کردم با برنامه هایی بود که کمتر کسی تو ایران باهاش کار میکرد، یکیش Adobe GoLive بود، یکی دیگه Adobe LiveMotion بود که قرار بود رقیب اون موقع Macromedia Flash باشه ولی شکست خورد، خب Photoshop هم که رفیق همیشگیم بوده و هست و خواهد بود. من خودم هیچوقت سعی نمیکردم کد بنویسم چون به طراحی گرافیک بیشتر علاقه داشتم برای همین تا مدت زیادی کدهای وب سایت من ماشینی بود. منظورم از کد ماشینی اینه که مثلا من یه آیتم رو از Toolbar مینداختم روی صفحه و نرم افزار مربوطه کد رو زحمت میکشیدن مینوشتن ! همیشه هم مخالف کسایی بودم که میگفتن نوشتن دستی کد خیلی بهتره، فکر میکردم ماشین همه کار رو بلده !
تا وقتیکه چند تا کتاب و سایت مربوط به طراحی سایت رو خوندم و نظرم به کل در این مورد عوض شد، تا جایی که الان سعی میکنم هیچوقت از نرم افزار مثل DreamWeaver برای کد نویسی استفاده نکنم و خودم دستی بنویسم. دلایل زیادی برای این کار میتونم بگم ولی به طور خلاصه این موارد رو میتونم بگم :
وقتی کد نویسی دستی باشه شما کنترل کامل روی سایت دارید، یعنی میدونید که دقیقا کجا باید یک المان رو به کار ببرید، یا این المان برای چی اینجاست و…
وقتی کد نویسی دستی انجام میدید به راحتی میتونید ساختار کلی سایت رو پیاده کنید و المان ها رو در سر جایش قرار دهید و بعدا قسمتهای جانبی رو تکمیل کنید.
کد نویسی دستی معمولا از نظر حجمی کمتر ار کد ماشینی میشود و برای بارگذاری وب سایتها خیلی مناسب تر است.
معمولا وقتی میخواین کد بنویسین و در مورد ساختار سایت فکر میکنید، اگه منطق شما درست باشد ساختار سایت بسیار ایده ال خواهد شد در صورتیکه ماشین در مورد سایت شما فکر نمیکنه و نمیدونه که این سایت در چه موردی هست ولی شما بسته به موضوع سایت ساختار سایت رو میسازید و این نکته خیلی مهمی هست.
کد نویسی دستی به صورت منطقی و اصولی نتیجه بهتری در موتورهای جستجو خواهد داشت.
نکته مهم دیگه اینکه لذت نوشتن کد دستی رو نمیشه با چیزی عوض کرد !
خب، امیدوارم قانع شده باشید که دستی کد بنویسید، میدونم سخته ولی باور کنید وقتی برای مدتی این کار رو بکنید و از نرم افزار استفاده نکنید، به خودتون افتخار می کنید، باور کنید شوخی نمیکنم، امتحان کنید.
خب، حالا از کجا شروع کنیم ؟ شما باید با محیط اینترنت آشنایی داشته باشید، مرورگرهارو بشناسید، سایتهای زیادی رو دیده باشید،با اصلاحات اینترنتی و وب آشنا باشید و …. به طور خلاصه خوره اینترنت باشید، این نکته مهمی میتونه باشه. با کامپیوتر هم باید آشنایی داشته باشید، حداقل در حدی که بتونید به راحتی با ویندوز یا سایر سیستم عاملها کار کنید. در ضمن زبان انگلیسیتان هم باید خوب باشه، خیلی بهتون کمک میکنه. سایتهای زیادی هست تو اینترنت برای مرجع با یه جستجوی ساده میتونید بهش برسید.
حالا نوبت HTML هست، باید این رو کامل یاد بگیرید، باید ! خیلی هم سخت نیست اگه علاقه داشته باشید و پشتکار خیلی زود میتونید باهاش کار کنید، من برای مبتدیها این سایت رو پیشنهاد میکنم : آموزش HTML. خیلی ساده و خوب توضیح داده با مثال، البته بازم جستجو میتونه بهتون نمونه های دیگه ای هم بده. من خودم با این شروع کردم.
بعد از اینکه HTML رو یاد گرفتید، میتونید برید سراغ XHTML، خیلی فرق نداره یه سری قوانین داره که باید در کدنویسی اونهارو رعایت کنید : آموزش XHTML.
خوشبختانه یا بدبختانه تو ایران میتونید راحت آموزشهای ویدیویی رو خریداری کنید، البته به زبان انگلیسی، من یه سایت معرفی میکنم که شما میتونید از اون خریداری کنید : خرید آموزشهای تصویری. این آموزشها خیلی مفید میتونن باشن، مخصوصا Lynda و Total Training.
خب اگه اینارو کار کنید، میتونید راحت یه سایت ساده رو پیاده سازی کنید، البته بدون گرافیک و جلوه های ویژه ! نویت اون ها هم میرسه، سعی کنید پله پله برید جلو و کامل این مباحث رو یاد بگیرید تا وارد مباحث بعدی نشدید.
اگه به حرف من گوش دادیدو دارید دستی کد مینویسید من دو تا نرم افزار رایگان بهتون معرفی میکنم که بتونید راحت توشون کد نویسی کنید، بعدا هم برای کد نویسی داینامیک کمکتون میکنه : Komodo Edit و Aptana Studio. البته Aptana محیط کاملتری هست ولی پیچیده تره اگر هم نمیخواین دستی بنویسین خب DreamWeaver انتخاب خوبیه.
خب حالا که به دنیای زیبای وب پا گذاشتید و کد نویسی رو هم شروع کردید نویت میرسه به کمی رنگ و لعاب دادن. بعد از اینکه HTML رو یاد گرفتید میرید سراغ CSS باز هم از این سایت میتونید یاد بگیرید : آموزش CSS.
CSS برای دادن ویژگیهای ظاهری به سایت و کدهای HTML شماست ، با گرافیک اشتباه نگیرید ، نسبت به HTML زمان بیشتری برای یاد گیری نیاز داره چون مطالب بیشتری داره و کمی هم پیچیده تر هست. اما یاد میگیرید نگران نباشید ! برای اینکه بدانید CSS چیست به این مطلب مراجعه کنید، همچنین برای یاد گیری اصول اولیه CSS میتونید از این قسمت هم استفاده کنید : مفاهیم CSS.
این سوالی بوده که من همیشه داشتم ولی هیچوقت جواب دقیقی نگرفتم، چون تو ایران متاسفانه همه کار رو از شما میخوان و هم اینکه تو دنیای گسترده وب در حال حاضر باید با هر دو جنبه آشنایی داشته باشید، ولی سعی کنید تمرکزتون رو روی مبحثی بذارید که بیشتر به آن علاقه دارید. من خودم Design رو خیلی بیشتر دوست دارم ولی مجبورم کدنویسی هم بکنم. البته باید بگم منظورم از کد نویسی، کد نویسی داینامیک و Server Side هست، مثل ASP، PHP و یا زبانهای دیگه. اگه میخواین طراح بشین باید بتونین یه قالب رو که مثلا در Photoshop آماده میکنین به کد HTML و CSS تبدیل کنید و این کد نویسی با کد نویسی داینامیک فرق داره.
آشنایی کامل با HTML و CSS.
ساخت قالب یک وب سایت با برنامه گرافیکی و تبدیل آن قالب به HTML و CSS.
آشنایی با نرم افزارهایی مثل Photoshop – Flash – Illustrator
دارای خلاقیت و ذوق برای ساخت قالب
آشنا بودن با گرافیک در وب سایت ها و ساخت انیمیشن
آشنایی با اصول طراحی در وب و به روز بودن طرح
آشنایی با انواع CMS ها و نرم افزارهای مدیریت محتوا و وبلاگها برای ساخت Skin
آشنایی داشتن با XML – Javascript- AJAX
Photoshop که به نظر من همیشه باید باشه البته نرم افزارهای جایگرین دیگه ای هم هستن، اما من فقط با فتوشاپ کار میکنم. از این نرم افزار برای ساخت قالب سایت، افکتهای ویژه، ساخت دکمه و هزاران کار دیگه ای که من هنوزم خیلیاشو بلد نیستم میشه استفاده کرد، اینو گفتم چون فتوشاپ یه دنیای نامحدوده هرچی بیشتر برید جلو میبینید که هنوزم خیلی چیزارو نمیدونید.
برای ایجاد جلوه های متحرک هم میتونید از نرم افزار Flash استفاده کنید.
