بلاگ - شرکت سبزاندیش آراد |طراحی سایت

۲۷ بهمن

تفاوت وب سايت دايناميک با استاتيک!

طراحی سایت معمولا به دو شکل صورت می گیرد. سایت ها یا استاتیک هستند و یا داینامیک . حال در این جا چه فرقی بین این نوع از سایت ها است؟ بهتر است بگوییم سايت استاتيک که نام دیگر آن ايستا است، وب سايتي است که طراحی آن ساده بوده و با HTML طراحی می شود. در این نوع سایت شما می توانید بدون مشکل و دانش فنی خاصی در زمینه ی طراحی سایت، وب سایت خود را بروز رسانی نمائید. اغلب سایت های استاتیک بعد از طراحی، کم تر دچار تغییر در محتوا می شوند و این به این معنی است که سایت استاتیک بصورت ثابت می ماند ولی می توان محتوای آن را از جمله متن، تصاویر و … را تغییر داد. سايت دايناميک که نام دیگر آن سایت پويا می باشد، سايتي است که توسط يک نرم افزار مانند نرم افزار سایت ساز سبزاندیش محتوای سایت را کنترل می کند. مزیت این نوع سایت ها در این است که شما برای بروز رسانی کردن محتوای سایت خود هیچ گونه مشکلی نخواهید داشت و براحتی محتوای خود را با این نرم افزار تغییر می دهید.

 

برخی از تفاوت های سایت استاتیک با داینامیک

سایت داینامیک توسط نرم افزار مديريت محتوا ایجاد می شود. گروه سبزاندیش نیز با طراحی نرم افزار مدیریت محتوا با نام سیستم مدیریت وب سایت سبزاندیش در این زمینه اقدام نموده است که دارای نکات قابل توجه در مقایسه با سایر نرم افزار های تولید شده می باشد. برخی از این ویژگی ها عبارت اند از:
  •  امنیت : امروزه در دنیای مجازی، افراد و نرم افزار های بسیاری سعی در تخریب، آلوده کردن، کپی برداری اطلاعات شخصی و … می نمایند که باعث ایجاد خسارت های بسیاری می شود. گروه سبزاندیش هسته ی اصلی و تمامی قسمت ها را به گونه ای طراحی کرده است که فقط از طریق خود نرم افزار قابل اجراست و این امر باعث بسته شدن تمامی حفره های امنیتی شده است. صفحه ورود مدیریت نیز از ویژگی های امنیتی ویژه ای برخوردار می باشد.
    همچنین با طراحی بخشی به نام بروزرسانی در سیستم مدیریت، بخشی برای باگها و رفع خطاهای سیستم در آینده و پس از راه اندازی وب سایت طراحی نموده است.
  • مدیریت آسان و کاربر پسند : سایت ساز سبزاندیش  طوری طراحی شده است که مدیر وب سایت بدون هیچ دانش برنامه نویسی و حتی بدون یک کلمه برنامه نویسی، میتواند بصورت حرفه ای و در محیطی زیبا و کاربر پسند ، براحتی وب سایت خود را مدیریت نماید.
  • ماژولار بودن : گاهی نیاز است سیستم خود را به امکانات جدید و یا اختصاصی ارتقاء دهید. مثلا می توانید سیستم خود را به فروش آنلاین، سیستم پیامک، گالری ها و … متصل و ارتقاء دهید. تمامی قسمت های نرم افزار سبزاندیش  قابل بروز رسانی و ارتقاء می باشد. همچنین می توانید ماژول های اختصاصی خود را سفارش دهید تا عملیات مورد نظر خود را در وب سایت راه اندازی نمایید.
  • پوسته حرفه ای : سایت سازسبزاندیش از موتور قدرتمند SMARTY برای پوسته ها استفاده نموده است. یعنی شما می توانید پوسته و ظاهر گرافیکی بسیار زیبا، حرفه ای، پر محتوا و … داشته باشید. همچنین امکان ویرایش کدها و فایل های پوسته نیز می باشد.

شما عزیزان می توانید  اطلاعات وب سایت را در هر زمان و مکان بدون دخالت طراح سایت یا برنامه نویس  به راحتي تغيير دهید. در صورتيکه برای تغییر محتوا یا اطلاعات تغيير اطلاعات سايت های استاتيک تنها این کار توسط طراحان و برنامه نويسان وب و اغلب با پرداخت هزينه مجدد انجام پذير است.

در این جا باید یاد آور شویم که هزینه ی طراحی سایت های داینامیک کمی بیشتر از سایت های استاتیک است . اما مزیت آن به این شکل است که شما در طول استفاده از سایت داینامیک خود هیچ مبلغ اضافی را به طراح یا برنامه نویس سایت جهت بروزرسانی سایت خود نمی دهید.
از سوی دیگر برنامه نویسان و طراحان سایت در سایت های استاتیک با مشکل بروز رساني مواجه هستند و پيشنهاد اغلب توسعه دهندگان وب اين است که اگر به فکر توسعه و ارتقاء وب سایت هستيد بايد از ابتدا از سيستم مديريت محتوا (سبزاندیش) استفاده کنید.
سايت شرکت هاي متوسط و بزرگ که به صورت پیاپی در طول روز،هفته و یا ماه ها به روز مي شوند حتما بايد از سيستم مديريت محتوا (سبزاندیش) بهره مند باشد. عدم وجود سيستم مديريت محتوا منجر به افزايش چشمگير زمان پاسخ گويي به نياز مخاطبان و کاهش توان بروز عکس العمل نسبت به تغييرات بازار و در نهايت، عقب ماندن شرکت نسبت به ساير رقبا خواهد شد.
نکته ی آخری که باید در این جا یادآور شویم، این است که در سيستم مديريت محتوای سبزاندیش، شما امکان کنترل پنل (بخش مديريتي) سایت خود دارامی باشید. این پنل شامل : اعمال تنظيمات، ايجاد، ويرايش و به روز رساني اطلاعات است در صورتيکه اين امکان درسايت های استاتيک وجود ندارد.
طراحی <a href="http://sabzandishco.ir/tag/site" target="_blank" title="سایت" ><noscript><img src="http://sabzandishco.ir/content/uploads/2017/02/tarnama7.jpg" alt=سایت تارنما!' />
اشتراک
۲۷ بهمن

طراحی وب سایت ریسپانسیو

به تازگی طراحی ریسپانسیو حتی از سمت متخصصان و کارشناسان این حوزه به عنوان گرایشی محبوب مطرح شده است. به نقل از مدیرعامل Springbox “طراحی سایت ریسپانسیو” بهترین روش کاربردی برای مخاطبان دیوایس های موبایل خواهد بود. بر اساس گزارشی موثق استفاده از این روش تاثیر بسیار چشم گیری بر رتبه بندی وب سایت دارد. در واقع به کمک ریسپانسیو شما شانس ارائه مطالب به مخاطبان بیشتری را خواهید داشت و به این ترتیب به نتیجه مطلوب کسب بهترین رتبه در موتورهای جست و جو دست خواهید یافت. اولین دلیل محبوبیت ریسپانسیو که در ذهن انسان بوجود می آید حقیقت غیرقابل چشم پوشی افزایش روز افزون دیوایس های موبایل است. اما موتور جست و جوی هوشمندی مثل گوگل که قادر به تشخیص جنسیت مخاطب خود از روی حرکات ماوس است قطعاً دلایل برتری برای رتبه بندی به “ریسپانسیو” دارد. برای اطلاع از مزایای بی شمار طراحی “ریسپانسیو” با ما همراه باشید.
گوگل : همیشه اولویت، رضایت مخاطب است

حقیقتاً رمز ماندگاری و موفقیت روز افزون گوگل چیست؟

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

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

اما .. آیا سایت شما آمادگی ریسپانسیو را دارد ؟؟!! با روش آزمون و خطای گوگل می توانید از آمادگی سایت خود (Mobile – Friendly) برای آغاز طراحی ریسپانسیو آگاه شوید. همچنین پس از تحقق این روش بر روی وب سایت خود می توانید با ابزارهای متنوع آنلاین موجود، کیفیت Mobile – Friendly بودن وب سایت خود را در پلت فرم های مختلف بررسی کنید.
انگیزه های پنهان طراحی ریسپانسیو .. !
ریسپانسیو را می توان روشی از طراحی در نظر گرفت که وب سایت شما را به صورتی پویا برای نمایش در دیوایس هایی از جمله موبایل، تبلت ها و آیپدها مطابقت می دهد. صفحه آرایی ها، طراحی های ظاهری انعطاف پذیر، انتخاب سایز و کیفیت مناسب برای تصاویر و استفاده از متن های مناسب می تواند یک ترکیب جذاب و کارآمد برای حضور وب سایت شما در این دیوایس های موبایل فراهم آورد. توجه داشته باشید که تمامی وب سایت ها با موضوعات مختلف مثل سایت های آکادمی، فروشگاه های آنلاین، آشپزی و سرگرمی و نهایتاً همه و همه می توانند و حتی باید به گرایش ریسپانسیو روی آورند. جالب است بدانید که استفاده کردن از اپلیکیشن های موبایلی مثل مرورگرها برای کسب نتیجه دلخواه شما در حیطه طراحی ریسپانسیو به هیچ وجه کافی نیست.
وب سایت شما بیش از چیزی که تصور می کنید در موفقیت نام تجاری شما اهمیت دارد. تک تک کلیک ها، بازدیدها و کامنت ها بر روی وب سایت شما در واقع انعکاس احساسات کاربران و مخاطبان برند شما است.

محبوبیت اپل در طراحی ریسپانسیو …

از زبان طراحان وب سایت ها بشنوید: بسیاری از صاحبان برند خواستار طراحی ریسپانسیو مطابق با دیوایس های شرکت اپل هستند غافل از اینکه این برند تنها ۱۴ در صد از مارکتینگ جهانی را به خود اختصاص می دهد. این در حالی است که سیستم عامل اندروید ۸۰ درصد بازار را به تسخیر در آورده است. البته با هدف مطرح بودن در زمینه طراحی وب سایت توصیه می شود که تمام سیستم های عامل را در نظر بگیرید و قلب مخاطبان خود با تمامی دیوایس ها را فتح نمایید.

تا به حال به این نکته توجه کرده اید که ..

ایمیل های ارسالی شما به کاربران، در اسمارت فون آنها چگونه ظاهر می شود ؟
اگر به عنوان یک طراح وب سایت به این نکته توجه نکرده باشید، احتمالاً در این ایمیل ها لوگوی شما به شکل نامناسبی بسیار بزرگتر از محتوای اصلی ایمیل شما نمایش داده می شود. این نکته می تواند یک نقطه ضعف بزرگی برای شما باشد. آیا از کاربران خود انتظار دارید که منتظر نمایش داده شدن محتوای اصلی ایمیل شما در فضاهای انتهایی صفحه نمایش دیوایس هوشمندشان بمانند .. !
نکات کلیدی وجود دارد که برای تطابق ایمیل های ارسالی شما با دیوایس های هوشمند می توانید آنها را به کار ببرید. نکته اصلی توجه ویژه به سایز متن ها، سایز تصاویر و همچنین متناسب بودن این دو در ایمیل است. در این شرایط شما می توانید از طراحی های آماده مثل Emma و یا MailChimp استفاده نمایید. این الگوها می توانند دستیار کمکی شما برای قابل مشاهده شدن محتوایتان در تمامی دیوایس ها باشد.

تحقق مارکتینگ همه منظوره …

جالب است بدانید که برندهایی هستند که با اتکا به طراحی ریسپانسیو و Mobile – Friendly خود به لوگوهایی مطرح و برجسته در ذهن مخاطبان تبدیل شده اند. برای تحقق چنین مارکتینگ موفق و به اصطلاح همه منظوره طراحی ریسپانسیو را در راس کار خود قرار دهید. به این ترتیب همواره در معرض دید مخاطبان و کاربران خود قرار خواهید گرفت.

نهایتاً اگر به حضور موفق نام تجاری خود در دنیای دیجیتال اهمیت می دهید، از نقش انکار ناپذیر طراحی ریسپانسیو غافل نشوید.
سایت ریسپانسیو.jpg" alt='طراحی ریسپانسیو' />

اشتراک
۲۷ بهمن

اینفوگرافیک

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

قوانینی که می بایست در اینفوگرافیک طراحی سایت رعایت نمود:

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

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

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

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

اشتراک
۲۵ بهمن

تنظيمات موقعيت عناصر در CSS و ساير خواص:

با مجموعه خواص ارائه شده در اين قسمت می توان مکان قرار گيری عناصر را در صفحه توسط CSS تنظيم کرد .
خواص ارائه شده دراين قسمت در ليست زير قرار دارند . برای درياقت اطلاعات درباره هر کدام بر روی نام آن کليک کنيد :

left
right
top
bottom
overflow
vertical-align
z-index

خواص تنظيم موقعيت عناصر در CSS :

در بخش خاصيت position در صفحه قبل ، اشاره کرديم چنانچه خاصيت position بر روی يکی از مقادير relative , absolute يا fixed تنظيم شود می توان توسط خواص left , right , top و bottom مختصات دقيق محل قرار گيری عنصر را در صفحه يا عنصر در بر گيرنده آن تعيين کرد . در اين بخش به معرفی ۴ خاصيت اشاره شده برای تنظيمات مکان قرار گيری عناصر می پردازيم :

نکات :

  1. در صورتی که خاصيت position بر روی مقدار static تنطيم شده باشد ، تعيين مختصات برای عناصر بي اثر بوده و مرورگر عناصر را در مکان مورد نظر خود بر حسب محتويات صفحه نمايش می دهد .
  2. در حالتی که خاصيت position بر روی مقدار relative تنظيم شود ، مختصات تعيين شده در اين قسمت ، نسبت به عنصر در برگيرنده عنصر مورد نظر محاسبه می شود . ولی در حالت هايي که خاصيت position بر روی مقادير absolute يا fixed تعيين شده باشد ، مختصات نقاط شروع نسبت به کل صفحه در نظر گرفته می شود .

برای درک بهتر به مثال های خاصيت position در صفحه قبل دقت کنيد .

نام خاصيتنوع خاصيتشرح
leftauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت چپ در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت چپ عنصر را تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت چپ بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت چپ تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت چپ تعيين می شود .
rightauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت راست در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت راست عنصر را تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت راست بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت راست تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت راست تعيين می شود .
topauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت بالا در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت بالای عنصر تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت بالا بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت بالا تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت بالا تعيين می شود .
bottomauto
length
درصد %
مختصات نقطه شروع عنصر را از سمت پايين در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند :
– auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت پايينی عنصر تنظيم می کند .
– length : در اين حالت مختصات نقطه شروع عنصر را در سمت پايين بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت پايين تعيين می شود . برای مثال اگر مقدار ۱۰% تعيين شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت پايين تعيين می شود .

مثال : در مثال زير برای جدول مقدارهای top و left را تعيين کرده ايم . دقت کنيد که مقدار خاصيت position بروری relative تنظيم شده و مختصات مکان جدول با توجه عنصر در بر گيرنده آن يعنی خانه جدول تنظيم می شود :

Example
< table style=”border: solid 2px blue; width: 200px; height: 100px; top: 25px; left: 200px; position: relative” cellspacing=”0″ >
  < tr >
    < td style=”border: solid 2px blue” >
      Cell 1
< /td >
< td style=”border: solid 2px blue” >
      Cell 2
< /td >

< /tr >

< /table >
کد
Cell 1Cell 2
خروجی

 


خاصيت overflow

نام خاصيتنوع خاصيتشرح
overflowvisible
hidden
scroll
auto
توسط اين خاصيت تعيين می شود که چنانچه محتويات يک عنصر از عرض يا طول تعيين شده برای آن بيشتر شد ، مرورگر برای نمايش قسمت اضافه چه کاری انجام دهد ، که می تواند يکی از حالت های زير باشد :
– visible : در اين حالت ، قسمت اضافه نيز درون عنصر نمايش داده شده و عرض و طول آن به اندازه ای که کل محتويات را درون خود جای دهد ، افزايش می يابد .
– hidden : در اين حالت ، فقط به اندازه تعيين شده برای عنصر از محتويات آن نمايش داده می شود و قسمت اضافه مخفی می ماند .
– scroll : در اين حالت ، مرورگر به طور اتوماتيک در جهت هايي که نياز به افزايش اندازه عنصر برای مشاهده قسمت های اضافه است ، نوار پيمايش قرار می دهد و فقط به اندازه واقعی عنصر در هر لحظه از محتويات آن را نمايش می دهد .
– auto : در اين حالت نيز مرورگر به طور اتوماتيک در صورت نياز در ۲ جهت نوار پيمايش قرار می دهد .

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

Example
حالت visible

نکته : می بينيم که در اين حالت عرض پاراگراف از انداره واقعی بيشتر شده تا کل محتويات را نمايش دهد .

< p style=”width: 120px; height: 50px; overflow: visible” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioخروجی
حالت hidden

نکته : در اين حالت عرض و ارتفاع پاراگراف از انداره واقعی بيشتر نشده و محتويات اضافه نمايش داده نشده است .

< p style=”width: 120px; height: 50px; overflow: hidden” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioخروجی
حالت scroll و auto

نکته : می بينيم که در اين حالت برای نمايش محتويات اضافه از نوار پيمايش استفاده شده و عنصر در اندازه واقعی خود نمايش داده می شود .

< p style=”width: 120px; height: 50px; overflow: scroll” >
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio
< /p >
کد
DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioخروجی

 


خاصيت vertical-align

نام خاصيتنوع خاصيتشرح
vertical-alignbaseline
top
text-top
middle
sub
super
bottom
text-bottom
length
اين خاصيت نحوه تراز بندی عمودی عنصر را در عنصر در برگيرنده آن تعيين می کند ، که می تواند يکی از حالت های زير باشد :
– baseline , top , text-top : عنصر در بالای عنصر در برگيرنده آن قرار می گيرد .
– middle : عنصر در وسط عنصر در برگيرنده آن قرار می گيرد .
– sup : عنصر به صورت زير نويس ( در پايين )عنصر در بر گيرنده آن قرار می گيرد .
– super : عنصر به صورت بالا نويس ( در بالای )عنصر در بر گيرنده آن قرار می گيرد .
– bottom , text-bottom : عنصر در پايين عنصر در برگيرنده آن قرار می گيرد .
– length : در اين حالت می توان مکان قرار گيری عمودی عنصر را از بالا ، بر حسب واحدی مثل px يا pt تعيين کرد .

مثال : در مثال زير در خانه های مختلف جدول ارائه شده ، برخی از حالت های تراز بندی عمودی متن را نمايش داده ايم :

Example
< table style =”width : 600px; height: 80px” >
< tr >
    < td style=”vertical-align: baseline ” >   baseline   < /td >
    < td style=”vertical-align: top” >   top , text-top   < /td >
    < td style=”vertical-align: middle” >   middle   < /td >
< td style=”vertical-align: bottom” >   bottom , text-bottom   < /td >
< /tr >
< /table >
کد
baselinetop , text-topmiddlebottom , text-bottom
خروجی

 


خاصيت z-index

نام خاصيتنوع خاصيتشرح
z-indexnumber
عدد
اين خاصيت يک شماره منحصر به فرد برای ترتيب قرار گيری عناصری که بر روی هم هستند ، استفاده می شود که عنصر با شماره بزرگتر در بالای عنصر ديگر قرار می گيرد . اين خاصيت فقط در زمانی کاربرد دارد که خاصيت positon عنصر بر روی مقدار relative يا absolute تنظيم شده باشد .
اشتراک
۱۸ بهمن

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

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

  • طراحی سایت واکنشگرا میتونه رو پلتفرم های مختلف کار کنه

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

  • یک مزیت رقابتی پیدا میکنید

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

  • جستجوهای موبایلی محلی زودتر به تصمیم برای خرید منجر میشن

تحقیقی که خود گوگل انجام داده نشون میده که سرچ های محلی که از طریق دستگاه های موبایل انجام شدند معمولا بیشتر از سایر سرچ ها منجر به اقدام (از جمله خرید، رزرو یا حتی بازدید فیزیکی از محل فروشگاه) میشن. ۸۰% از این سرچ ها به تبدیل کاربر منجر میشن.
به نظرتون نباید از این فرصت ها استفاده کرد؟
میتونید با سرمایه گذاری برای یک طراحی واکنشگرا، یک تجربه کاربری بی نظیر بوجود بیارید که کاربر به موندن روی سایت متمایل بشه. چون بیشتر سرچ های محلی با یک هدف مشخص در ذهن کاربر انجام میشن، سایتی که به این نیاز کاربر جواب بده شانس اینو داره که اعتمادشو جلب کنه و در نتیجه تجارت کنه.

  • گوگل واکنشگرا بودن سایت رو نشونه ای برای گرفتن رتبه گذاشته

تمام سعی گوگل بر اینه که بهترین تجربه و مرتبط ترین نتایج رو به کاربرهاش ارائه بده.
کیفیت و ارتباط محتوای سایت میتونه تأثیر زیادی روی رتبه جستجوش داشته باشه. البته به جز این دو، عوامل دیگه ای هم در رتبه سایت دخیلند اما اهمیت سایت بروز و کاربرپسند با محتوای درجه یک جای بحث نداره.
حالا این مسئله رو تو محدوده کار با موبایل اعمال کنید. وقتی موبایل انقدر دم دسته دیگه کسی برای سوالایی که یه دفعه ای به سرش میزنه یا کارهای کوچیک و سریع حال نداره لپتاپشو باز کنه یا بره جلوی کامپیوتر بشینه و روشنش کنه و منتظر بمونه تا بتونه یه چیزی سرچ کنه. حالا که موبایلهامون میتونن بلافاصله اطلاعات مورد نیاز رو برامون فراهم کنن، پس دیگه چرا صبر کنیم؟
به نظرتون کاربرها کدوم رو ترجیح میدن؟ ۱- سایتی که برای موبایل و تبلتشون کاملا بهینه شده باشه، سریع لود بشه، طبق مد روز طراحی شده باشه و کاربر بتونه براحتی روش به اطلاعات دسترسی داشته باشه یا ۲۲- سایتی که دقیقا شبیه سایت دسکتاپی باشه، بارگذاریش تا ابد طول بکشه، کلی فهرست و محتوا داشته باشه که کاربر گیج بشه و نتونه تصمیم بگیره که کجا کلیک کنه و دست آخر هم بخاطر اینکه همه چیز نزدیک بهم قرار گرفتند روی یک گزینه اشتباهی کلیک کنه.
قطعا کاربرها سناریوی اول رو ترجیح میدن و دقیقا به همین دلیل گوگل با نمایش بهتر سایتهای واکنشگرا روی نتایج جستجوی موبایلی بهشون جایزه میده. اگه یه دقیقه بهش فکر کنید، تو مزایای طراحی واکنشگرا غرق خواهید شد.

  • محتواتون بیشتر به اشتراک گذاشته میشه

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

  • تجربه بی نظیری برای کاربرها فراهم میکنه

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

اشتراک
شرکت سبزاندیش آراد

کلیه حقوق متعلق به شرکت سبزاندیش آراد میباشد.

لوگو نماد اکترونیکیlogo-samandehi