تبلیغات

تبلیغات متنی

محبوبترینها

مزایای آستر مدول الیاف سرامیکی یا زد بلوک

سررسید تبلیغاتی 1404 چگونه می‌تواند برندینگ کسب‌وکارتان را تقویت کند؟

چگونه با ثبت آگهی رایگان در سایت های نیازمندیها، کسب‌ و کارتان را به دیگران معرفی کنید؟

بهترین لوله برای لوله کشی آب ساختمان

دانلود آهنگ های برتر ایرانی و خارجی 2024

ماندگاری بیشتر محصولات باغ شما با این روش ساده!

بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟

قیمت انواع دستگاه تصفیه آب خانگی در ایران

نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]

9 روش جرم‌ گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد

آمار وبسایت

تعداد کل بازدیدها : 1854239862

آموزش طـراحی وب

واضح آرشیو وب فارسی:راسخون:

آموزش طـراحی وب (1) نویسنده: امیر سروری در این خود آموز شما خواهید توانست یک وب سایت با ساده ترین روش و به صورت مرحله به مرحله بسازید . این وب سایت بر طبق استانداردهای روز طراحی وب ساخته خواهد شد و شم این استانداردها را به ساده ترین روش و به صورت عملی فرا خواهید گرفت. در طول این خود آموز ملاحظه خواهید کرد که در چندین قسمت برای تصحیح کدهای اولیه به مراحل قبل باز خواهیم گشت که در طراحی به صورت عملی این امریست اجتناب ناپذیر . متن خود آموز ، کدها و فایل گرافیکی این وب سایت نیز برای سهولت در یاد گیری شما دوستان در اختیار شما قرار خواهد گرفت. مرحله اول – به کجا خواهیم رسید ؟ یک وب سایت ساده و معمولی برای طراحی و کد نویسی در نظر گرفته شده ولی کار کردن بر روی این وب سایت بسیار آموزنده خواهد بود. بنابراین مراحل را دنبال کنید و به صورت عملی یاد بگیرید و تجربه کنید. در زیر نمایی نهایی صفحه وب مورد نظر را می بینید.
آموزش طـراحی وب (1)

مرحله دوم – آماده شدن : به چه چیزهایی احتیاج دارید ؟ سعی شده است مراحل طراحی و کدنویسی این وب سایت به ساده ترین روش و برای افراد مبتدی توضیح داده شود ولی برای شروع احتیاج به دانش مقدماتی و آشنایی با برخی از نرم افزارها دارید: نرم افزار فتو شاپ Photoshop یا ویرایشگرهای تصویر مشابه نرم افزارهای تولید کد مانند Dreamweaver آشنایی مقدماتی با کدهای html آشنایی مقدماتی با کدهای Css استفاده از ویرایشگرهای استاندارد ( IE+7 , FireFox ) – در این خودآموز از FireFox استفاده شده است در صورت نیاز می توانید به وب سایت W3Schools مراجعه نمایید و نکات آموزنده بسیاری را فرا بگیرید. ساختار و لایه ها برای شروع ساختار بسیار ساده و عمومی را در نظر میگیریم که بسیاری از شما دوستان با این ساختار آشنا هستید . header, content, sidebar and footer
آموزش طـراحی وب (1)

اینها هر کدام از اجزاء تشکیل دهنده وب سایت ما خواهند بود و نحوه قرارگیری و جایگاه آنها در وب سایت بسیار مهم است.این ایده خوبی هست که قبل از شروع به کار کد نویسی نمومنه ای از وب سایت و صفحه وب را در نرم افزارهای طراحی گرافیکی مانند فتوشاپ طراحی کنیم و سپس آن را در نرم افزارهای تولید صفحات وب بسازیم. مرحله سوم – شروع به کار : خوب برای شروع به محیط نرم افزار فتوشاپ می رویم و یک برگه با عرض و طول ۱۰۰۰px در ۱۲۰۰px ایجاد می کنیم . در اینجا سعی شده عرض مورد نظر بیشتر از عرض واقعی وب سایت در نظر گرفته شود تا محیط باز تری برای کار وجود داشته باشد و در انتها این برگه به اندازه واقعی خود در خواهد آمد. اگر با محیط نرم افزار فتوشاپ آشنایی کافی داشته باشید کار با این خود آموز برای شما بسیار راحت خواهد بود. برای سهولت در کار از خط کش و خط های کمکی استفاده میکنیم . مقیاس خط کش را برای Pixel تنظیم کنید (واحد اندازه گیری در طراحی وب سایت Pixel است) .
آموزش طـراحی وب (1)

طبق تصویر دو خط کمکی عمودی یکی در اندازه ۱۰۰px و دیگری در ۹۰۰px ایجاد کنید . در حال حاضر عرض وب سایت ۸۰۰px در نظر گرفته شده است ( بین خط کمکی روی ۱۰۰px و خط کمکی روی ۹۰۰px ). بعد ازایجاد این دو خط کمکی یک خط دیگر در اندازه ۶۳۰px ایجاد کنید. در حال حاضر ۳ خط کمکی در این برگه ایجاد شده است. در صورت نیاز می توانید با کشیدن خط ها و Drag کردن آنها بر روی خط کش آنها را پاک کنید. مرحله چهارم – Header :
آموزش طـراحی وب (1)

پس از نشانه گذاری مرزهای وب سایت در مرحله قبل به قسمت Header وب سایت می رسیم که یکی از مهمترین اجزاء تشکیل دهنده هر وب سایت است. شعار تبلیغاتی ، لوگو و تصاویر تبلیغاتی وب سایت شما در این قسمت قرار خواهد گرفت .با استفاده از ابزارها ( کلید میانبر U ) یک مستطیل به ارتفاع ۱۷۰ px و با رنگ #۲۳b6eb ایجاد کنید . سعی کنید که از نوار ابزار فتوشاپ برای اندازه گذاری دقیق اجزاء و همچنین چینش دقیق اجزاء در صفحه استفاده کنید . یک مستطیل دیگر مانند تصویر روی مستطیل اولیه خود ایجاد کنید به ارتفاع ۳۰px و رنگ #۵d5a5a ( مستطیل تیره رنگ در بالای header ) مرحله پنجم – Navigation Bar – نوار منوها :
آموزش طـراحی وب (1)

برای ایجاد نوار منوها طبق تصویر یک مستطیل با ارتفاع ۶۰px ایجاد کنید ، در ابتدا رنگ این مستطیل مهم نیست زیرا ازگرادیانت ها برای زیباتر شدن آن استفاده خواهیم کرد. برای آشنایی با گرادیانت ها می توانید مطلب فوق را مطالعه نمایید. استفاده از گرادیانت در طراحی پس از ایجا د این مستطیل ، گرادیانتی با استفاده از رنگ #e2e3e4 تا #bebdbd با زاویه ۹۰ درجه ایجاد کنید. مرحله ششم – Footer :
آموزش طـراحی وب (1)

برای ایجاد footer نیز از یک مستطیل با رنگ #۵d5a5a استفاده کنید. در اینجا ارتفاع ۵۰px کافیست. یک footer خوب و استاندارد نقش بسیار ارزنده ای در بالا بردن دسترسی پذیری وب سایت و حتی زیبایی آن دارد و یکی از اجزای مهم یک وب سایت است . مرحله هفتم – Logo – لوگو : لوگو یکی از اجزاء مهم تشکیل دهنده یک وب سایت است که معمولا باید گویای نوع فعالیت و خدمات وب سایت شما باشد .شما می توانید لوگوی خود را به صورت جدا گانه ایجاد نمایید و در قسمت کد نویسی به شما آموزش داده خواهد شد که چگونه آن را وارد وب سایت خود نمایید. در لینک زیر می توانید مطالب مفیدی را در مورد طراحی و استانداردهای یک لوگو بخوانید. چگونه میتوان یک لوگوی حرفه ای و تاثیر گذار ساخت؟
آموزش طـراحی وب (1)

برای ایجاد لوگو طبق مراحل زیر عمل شده است و البته شما نیز می توانید از لوگوی مورد نظر خودتان استفاده نمایید.کلمه مورد نظر خود را با استفاده از مشخصات زیر بر روی طرح می نویسیم (LOGO ). Font: Myriad Pro Style: Bold Size:60px Color:#36809a
آموزش طـراحی وب (1)

مرحله هشتم – tagline:
آموزش طـراحی وب (1)

با استفاده از مشخصات زیر شعار تبلیغاتی خود را در جلوی لوگوی طراحی شده می نویسیم. Font: Arial Style: Bold Size:30pt Color:#e4dfdf مرحله نهم – منو ها :
آموزش طـراحی وب (1)

با استفاده از مشخصات زیر منو ها را با اندازه و رنگ مورد نظر طراحی می کنیم. Font: Arial Style: Bold Size: 30pt Color: #676666 مرحله دهم – محتویات و نوشته ها : می توان با توجه به تصاویر و با استفاده از مشخصات زیر محتویات و نوشته ها را نیز در جای مناسب قرار داد تا طرحی کلی و پیش فرض از صفحه وب برای ادامه کار بدست آید.این نکته در اینجا قابل ذکر است که ایجاد یک طرح گرافیکی قبل از شروع کد نویسی یک وب سایت خوبیهای فراوانی دارد که به چند نکته از اشاره می شود ایجاد یک نقشه راه برای اینکه بدانیم به کجا خواهیم رسید.استفاده از تصاویر طرح گرافیکی برای ساختن وب سایت. رفع ایراد ها و نواقص قبل از شروع به کد نویسی ( مخصوصا برای کار با مشتری ها …!؟ ) کار کردن بر روی یک طرح گرافیکی بسیار راحت تر از کد نویسی آن است بنابراین می توانیم تمامی ایده ها ی خود برای یک صفحه وب را در یک طرح گرافیکی پیاده نماییم و سپس به آماده سازی آن بپردازیم. h2 Header: Font: Arial Style: Bold Size: 36pt Color: #0e5d7a h3 Header: Font: Arial Style: Bold Size: 24pt Color: #444444 Paragraph: Font: Arial Style: Normal Size: 14pt Color: #595858
آموزش طـراحی وب (1)

مرحله یازدهم – Side Bar: ابتدا مستطیلی با ابعاد متناسب و با رنگ #d4d6d3 همراه با یک stroke ( خط دور طرح در نرم افزار photoshop ) به اندازه ۱px و رنگ #bebdbd ایجاد نمایید. لینکها
آموزش طـراحی وب (1)

لینکها را میتوان با مشخصات زیر به راحتی ایجاد نمود. h3 Headers: Font: Arial Style: Normal Size: 24pt Color: #044055 List items: Font: Arial Style: Normal Size: 18/14pt Color: #373737 Button برای ساخت این button از گرادیانتی که در طراحی لوگو استفاده شد با همان ترکیب رنگ استفاده شده است و در محیط این button یک stroke به اندازه ۱px و رنگ #c7c7c7 نیز ایجاد شده است.
آموزش طـراحی وب (1)

مرحله دوازدهم – محتویات و نوشته های footer : در انتهای این بخش به پایین ترین نقطه وب سایت یعنی footer ان می رسیم که با ایجاد یک مستطیل در مراحل قبل ایجاد شده است برای نوشتن محتویات و کامل کردن این بخش از مشخصات زیر برای font استفاده می نماییم. Font: Arial Style: Normal Size: 14pt Color: #e0e2e2
آموزش طـراحی وب (1)

قسمت دوم – برش دادن طرح -------------------------------------------------------------------------------- در حال حاضر یک نمای کلی از وب سایت خود را طراحی کرده ایم . حال باید این طرح را در قالب یک صفحه وب ایجاد کنیم ، یکی از مهمترین نکات که باید در این کار در نظر گرفته شود حجم مناسب در کنار کیفیت مطلوب تصاویر است . به این معنی که کیفیت و حجم تصاویر نباید فدای یکدیگر شوند و یک تعادل بین این دو موضوع بر قرار باشد. لود شدن سریع تصاویر همراه با کیفیت مطلوب آنها ، جلوه خوبی را به صفحه وب ما خواهد داد. برای تبدیل این طرح به یک وب سایت نکات بسیار دیگری نیز وجود دارد که سعی می شود به صورت بسیار ساده بیان شود. برای برش تصاویر و استفاده از آنها در صفحه وب روشهای متفاوتی وجود دارد که در اینجا سعی شده ساده ترین و در عین حال مفید ترین روش مورد استفاده قرار گیرد. مرحله سیزدهم – ابزار برش : در این مرحله می توان از ابزار Slice و Crop برای برش دادن تصاویر استفاده کرد و نوع برش تصاویر بسیار مهم است. برای برش طبق تصاویر زیر عمل نمایید. برای درک بهتر در این قسمت اجزاء به صورت جداگانه برش داده می شوند. Header
آموزش طـراحی وب (1)

یک نوار باریک برای استفاده در کدهای html صفحه وب از طرح جدا شده است و با تکرار آن در صفحه وب در جهت افقی می توان به شکل مورد نظر رسید. Footer
آموزش طـراحی وب (1)

برای برش تصاویر در قسمتهای Footer و button نیز از همین روش برای برش استفاده می شود. استفاده از این روش باعث کم شدن حجم تصاویر مورد استفاده در صفحه وب و در نتیجه حجم پایین صفحه وب و لود شدن سریع تر صفحه وب می شود. Button
آموزش طـراحی وب (1)

مرحله چهاردهم – ذخیره تصاویر برای وب سایت :
آموزش طـراحی وب (1)

با استفاده از Save For Web برش ها را طبق تصویر ذخیره می کنیم . در اینجا از فرمت Png 24 برای ذخیره تصاویر استفاده شده است.
آموزش طـراحی وب (1)

پس از تنظیمات زیر و انتخاب محل ذخیره سازی تصاویر آنها را ذخیره کنید. “images only”, “default settings”, and “selected slices only.” آیکون ها و لوگو نیز طبق تصاویر زیر و با استفاده از روش مشابه به صورت مجزا ذخیره می شوند.برای ذخیره سازی و برش لوگو و آیکون ها بقیه اجزاء در طرح فتوشاپی غیر فعال شده اند و طبق تصاویر Background به صورت Transparent در آمده است. استفاده از فرمت png با پس زمینه Transparent مشکلات و مزایای مختلفی دارد.این تصاویر در Browser های FireFox به صورت Transparent نمایش داده می شوند و اما در IE نمایش آنها با مشکلاتی همراه است که البته با استفاده از چند Script قابل حل است .
آموزش طـراحی وب (1)

مرحله پانزدهم – نامگذاری : تصاویر اضافی حذف می شوند و نامهای مناسبی برای قطعات برش داده شده انتخاب می شوند. انتخاب نامهای مناسب در راحتی و استاندارد کار شما بسیار تاثیر گذار هستند.
آموزش طـراحی وب (1)