تعریف طراحی سایت واکنش گرا

با مطالعه انواع روش های طراحی سایت ، ویژگی هر یک از شیوه های مرسوم طراحی سایت را می شناسید. همان طور که می دانید ، امروزه یکی از رایج ترین شیوه های طراحی سایت ، طراحی سایت

روش های متداول ساخت صفحات وب – بخش دوم

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

روش های ساخت صفحات وب

در این مقاله ، دو روش دیگر را بررسی می کنیم:
استفاده از ادیتور های HTML در طراحی سایت 
به طور کلی عنوان طراحی سایت یا صفحات اینترنتی شاید در نگاه اول کمی سخت باشد و تصور کنید که انجام آن ، پیچیده است. اما خوش بختانه ادیتور های مختلفی برای طراحی صفحات درطراحی سایت وجود دارد که طراحی وب سایت را نظیر ایجاد یک فایل متنی یا سند در نرم افزار مایکروسافت آفیس ، ساده کرده است. نرم افزارهایی نظیر etObjects Fusion یا Dreamweaver از بهترین برنامه های موجود برای ویرایش کدهای HTML هستند. دقت داشته باشید که تنها مشکل استفاده از این برنامه ها ، نداشتن کنترل کافی روی بخش های مختلف است و بسیاری از قسمت های توسط خود برنامه ویرایش میشود.
طراحی سایت با کدنویسی دستی
این نوع کدنویسی ها در نرم افزارهای ویرایش و مشاهده ی متن نظیر نوت پد انجام میشود و به این معنا است که شما خودتان کدها را قرار می دهید و ویرایش می کنید. استفاده از این روش برای طراحی سایت ، بهترین شیوه است. چرا که شما ناظر تمامی تغییرات هستید و همه چیز تحت کنترل است. در این روش از تگ های HTML استفاده میشود که زبان متنی خوانا برای مرورگر ها می باشند. در طراحی سایت این تگ ها در کنار عکس و متن ها برای نمایش به صورت صفحات وب درج میشوند.

منبع: روش های متداول ساخت صفحات وب – بخش دوم

انواع شیوه های طراحی سایت

شاید تا به حال شنیده اید که وب سایت های ریسپانسیو در موتورهای جست وجو جایی ندارند یا اگر قالب وب سایت شما واکنشگرا نباشد ، رتبه ی خوبی در گوگل نخواهید داشت. یکی از قابلیت های قالب وب سایت ، تعیین شیوه نمایش سایت است . در واقع در طراحی سایت ، قطعا باید به این مهم توجه شود ؛ چرا که بخشی از موفقیت سایت ، طراحی قالب مناسب سایت است. در ادامه بیشتر با روش های متداول طراحی وب سایت آشنا میشوید.

آشنایی با شیوه های طراحی سایت

طراحی سایت به صورت معمول در سه قالب مجزا انجام میشود:
طراحی سایت ریسپانسیو
طراحی سایت انطباقی
طراحی سایت منفصل
ابتدا به صورت مختصر با تعریف هر یک از این شیوه های طراحی و در آینده با مزایا و معایب استفاده از این روش ها آشنا خواهید شد.
طراحی ریسپانسیو یا واکنش گرا
یک سایت ، از یک آدرس اینترنتی ثابت برای نمایش در انواع دستگاه ها استفاده می کند.یعنی سایتی به نام X ، در تمامی دستگاه ها با این نام ولی با جلوه ی دیگری به نمایش در می آید. به زبان دیگر ، محتوا و قالب سایت ، در دستگاه های مختلف و مطابق با سایز آن دستگاه ، مجددا ریسایز میشود. طراحی سایت ریسپانسیو به همین معناست و در این شیوه ، مرورگر مجبور است کل سایت را دانلود کند و سپس تغییراتی در اندازه ها ایجاد کند.
طراحی انطباقی
در این شیوه از طراحی سایت ، سرور یا محلی که سایت در آن میزبانی میشود ، نوع دستگاهی که از آن استفاده میشود ، مثلا موبایل یا تبلت را شناسایی می کند و نسخه ی مربوط با بارگذاری می کند. به بیان دیگر ، تمامی سایت و نسخه های موجود دانلود نمیشوند ؛ بلکه نسخه مدنظر شما تنها دانلود میشود. این متد ، به سرور شما تکیه دارد. چرا که قبل از این که مرورگر وارد عمل شود ، سرور نسخه موردنیاز را شناسایی می کند.

منبع: انواع شیوه های طراحی سایت  

انواع شیوه های طراحی سایت – بخش دوم

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

شیوه های طراحی سایت

طراحی سایت به صورت منفصل ( برای موبایل)
همان طور که گفته شد هر سایتی یک دامین و آدرس خاص دارد و در کنار آن ، ساب دامین نیز وجود دارد که در طراحی سایت ، معمولا ساب دامین به صورت کامل برای نمایش در موبایل بهینه میشود. در روش طراحی سایت انفصالی یا منفصل ، یک سایت به طور ویژه برای کامپیوتر و تبلت طراحی میشود و سایت مخصوص موبایل ، جداگانه است.

کدام یک از شیوه های طراحی سایت بهتر است؟

به طور کلی هر سه روش برای طراحی وب که به آن ها اشاره شد ، مناسب هستند و گوگل تمامی سایت ها را ایندکس می کند. اما گوگل ، طراحی های ریسپانسیو را ترجیح می دهد ؛ چرا که در این روش ، ربات های گوگل صفحات کمتری را برای ایندکس کردن کل سایت خواهند داشت و این به این معناست که کراول کردن سایت ساده تر میشود.
آیا لازم است قالب سایت را عوض و ریسپانسیو کرد؟
در پاسخ به این سوال باید گفت که اگر تم فعلی شما واکنشگرا نیست ، نیازی نیست که طراحی سایت خود را عوض کنید.؛ به ویژه اگر شما از قالب های سفارشی استفاده می کنید که ممکن است هزینه های بالایی را برای تعویض متحمل شوید.
چرا که هریک از روش های طراحی سایت ، مزایای و معایبی دارند که در آینده به آن ها اشاره می کنیم و بهتر است گول افرادی که طراحی سایت ریسپانسیو را با هزینه های بالا انجام می دهند و قول رتبه های برتر گوگل را تنها به واسطه قالب به شما می دهند ، نخورید.

منبع: انواع شیوه های طراحی سایت – بخش دوم

روش های متداول ساخت صفحات وب

بعد از این که با ابزار های طراحی سایت آشنا شدید و تصمیم گرفتید که وب سایت خود را طراحی کنید ، نیاز است که بدانید این ابزارها را به چه روشی استفاده کنید و یا به بیان دیگر ، با روش های متداول طراحی و ساخت صفحات وب یا وب پیج آشنا شوید. بدین منظور با ما همراه باشید.

روش ساخت صفحات وب

آموزش سی اس اس

در قسمت اول با استفاده از CSS یک قالب دو ستوني کلاسیک با navigation سمت چپ ايجاد كرديم كه تنها چند نوع تگ HTML داشت. قسمت اول کد صفحه را ارائه كرده و توضیح مي‌داد که قرار است از چه تگ‌هاي HTML استفاده کنیم.

همانطور که مي‌دانید، تمام محتوایي (متن، عکس، فلش، و غیره) که کاربر هنگام مشاهده یک صفحه وب مي‌بیند با HTML مشخص شده و بین تگ‌هاي <body> و </body> قرار دارد.

در این مورد داريم:

<body>

<div id=”navigation”>

انواع قالب های وب سایت

قالب سایت ، یکی از مهم ترین بخش های سایت است. فرض کنید محتوای سایت شما کاملا متحصر به فرد و کامل است ؛ اما اگر این محتوا در قالب مناسبی برای بازدیدکننده نمایش داده نشود ، ارزش خود محتوا خود به خود کم میشود. بنابراین توجه به نوع قالب های موجود در بحث طراحی سایت و سپس انتخاب تم مناسب از میان انواع قالب های وب سایت ، مهم است. در ادامه با انواع قالب های وب سایت آشنا میشوید.

انواع مختلف قالب های وب سایت

پوسته ی وب سایت قطعا یکی از سه حالت زیر را دارد:

قالب وب سایت

تمامی بخش های تشکیل دهنده ی یک وب سایت ، مجموعا یک قالب را ایجاد می کنند که به آن پوسته یا تم نیز گفته میشود. در پوسته یا قالب وب سایت ، بخش هایی به صورت مشترک با سایت های دیگر وجود دارند ؛ اما این که هر یک از آیتم ها دقیقا در کجای سایت ، با چه شمایلی و یا چه رنگ هایی قرار بگیرند ، مجموعا قالب وب سایت را تشکیل می دهد که در طراحی سایت ، سبب متمایز شده یک سایت از سایت دیگر میشود. در ادامه با تعریف قالب سایت و جایگاه و شیوه ساخت آن آشنا میشوید.

قالب یا تم چیست؟

با استفاده از تم های مختلف ، وب سایت شما از سایر سایت ها متمایز میشود و در این موقع می توان گفت که طراحی سایت شما انحصاری بوده است.
عملکرد تم یا قالب سایت
وظیفه ی اصلی تم ، دسته بندی محتوا جهت نمایش در مرورگر کاربران و بازدیدکنندگان است. در واقع در طراحی سایت و در بخش طراحی تم ، می خواهیم نحوه ی نمایش بخش ها را تعیین کنیم. به عنوان مثال وقتی طراحی سایت را انجام می دهیم ،به نکات زیر در انتخاب تم توجه می کنیم:
وب سایت استاتیک است یا دینامیک؟
وب سایت واکنشگرا است یا خیر؟
طراحی مد نظر ما دو ستونه است یا سه ستونه؟
واکنشگرایی تم ما در چه دستگاهی اهمیت بیشتری دارد؟
توپوگرافی و المان های CSS ، مجموعا چه طور طراحی شوند که ظاهر بهتری داشته باشیم؟

ابزارهای ضروری برای طراحی سایت – بخش دوم

در بخش اول ، دو ابزار ضروری طراحی سایت ، یعنی مرورگر ها و ادیتور های متنی معرفی کردیم. در ادامه ، به صورت مفصل تر انواع ادیتور های متنی که برای درج کدهای مختلف و ویرایش آن ها مورد استفاده قرار میگیرند را معرفی می کنیم.

ابزارهای مهم و کاربردی در طراحی صفحات وب
دو ابزار اصلی برای ویرایش کد که به صورت پیش فرض در انواع سیستم عامل ها وجود دارند ، Notepad در ویندوز و TextEdit در سیستم عامل مک است.
معرفی ادیتور های متنی

بخش های مختلف یک سایت

بعد از این که با ابزارهای اولیه برای طراحی سایت آشنا شدید و البته آشنایی مقدماتی با انواع زبان ها نظیر HTML پیدا کردید ، لازم است با بخش های تشکیل دهنده یک وب سایت استاندارد جهت طراحی وب سایت کاملی آشنا شوید. این بخش ها را در ادامه معرفی می کنیم.

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

ابزارهای ضروری برای طراحی سایت

بعد از این که با تعریف طراحی وب سایت آشنا شدید ، مهم ترین موضوع ، ابزارهایی ضروری برای طراحی یک وب سایت می باشد که قطعا سوال بسیاری از کاربران مبتدی می باشد. این که درطراحی وب چه ابزاری را به کار گیریم و با استفاده از چه نرم افزارهایی به طراحی سایت مشغول شویم ، مهم ترین بخش در یادگیری طراحی سایت است و در این مقاله و مقاله بعدی ، به اختصار با آن ها آشنا خواهید شد.

آیا نسخه آفلاین سایت خود را ساخته اید؟

نحوه فعال سازی نسخه آفلاین سایت

نسخه آفلاین سایت چیست؟

ویژگی به نام Application Cache وجود دارد، با این خاصیت که قابلیت ذخیره سازی تمام قسمت های سایت، به صورت آفلاین را دارد. در نتیجه فایل های JS وCSS و HTML همچنین تصاویر و دیگر اطلاعات سایت را برای کاربران ارسال می کند.

فعالسازی Offline Web Apps برای زمانی کاربرد دارد که کاربران متصل به اینترنت نبوده و قادر خواهند بود به سایت های مورد نظر دسترسی پیدا کنند.

معرفی بوت استرپ و کاربرد آن

در معرفی بوت استرپ باید گفت که یک چهار چوب front-end قدرتمند برای توسعه سریع و راحت وب می باشد. بر اساس قالب های طراحی HTML و CSS در بخش های تایپوگرافی، فرم ها، دکمه ها، جداول، آرشیو، منو ها، هشدار ها، زبانه ها و بسیاری از پسوند های جاوا اسکریپت می باشد.
از کاربرد های Bootstrap این است که قابلیت ایجاد طراحی سایت ریسپانسیو را می دهد.

معرفی مزایای بوت استرپ

از بزرگترین مزایای بوت استرپ این است که مجموعه ای کامل از ابزار رایگان را در اختیار کاربران قرار داده است. همچنین طراحی وب انعطاف پذیر و پاسخگو (Responsive Web Design) از ویژگی های بوت استرپ می باشد.

معرفی کاربردهای کد QR

کد QR یا همان Code Quick Responding کد هایی هستند که استفاده از آن ها روز به روز در حال گسترش می باشد و مطمئنا نمونه هایی را در سایت های اینترنتی مشاهده کرده اید. اما هنوز خیلی ها از کاربرد های کد QR اطلاع ندارند. کد کیوآر کاربرد ارزنده ای می تواند داشته باشد. در این بخش به معرفی کاربرد های QR می پردازیم. کد کیوآر امروزه در طراحی سایت بسیار طرفدار پیدا کرده است.

Hero Header در طراحی سایت

طراحان وب بدنبال ویژگی های جدید برای استفاده در پروژه های خود در طول زمان هستند. حرفه ای های واقعی طرح های خود را مطابق مد روز تکمیل می کنند. امروز شما شانس رویارویی با بهترین مد در طراحی سایت را دارید و آن چیزی نیست جز یک تصویر هدر که به آن Hero Header درطراحی سایت گویند.

دکمه های نامرئی در طراحی سایت

دکمه های نامرئی در طراحی سایت ، دکمه های Transparent شفاف با قابلیت کلیک کردن روی آن ها هستند. که دنیا ی طراحی وب را مانند طوفان در بر گرفته اند.
چه کسی تا بحال در مورد چیز ساده ای مانند یک دکمه ی نامرئی که می توانست دنیای طراحی وب را دگرگون کند، فکر کرده بود؟

استفاده از دکمه های نامرئی در طراحی سایت

استفاده از دکمه های نامرئی یا Ghost Buttons در صفحات فرود وب سایت برای جلب نظر کاربران مورد استفاده قرار می گیرند.
پاسخ عملکرد کاربردی استفاده از دکمه های نامرئی در CTA برای کلیک کاربر روی آن ها در هر وبسایتی، موفقیت آمیز بوده است.
اکثر سیستم عامل های محبوب گوشی های هوشمند نیز گرایش به استفاده ی سخاوتمندانه از این دکمه های نامرئی در طراحی شان دارند.