ساخت اسلایدر با زبان جاوا در طراحی وب سایت

روش های ساخت اسلاید در طراحی اسلاید چیست؟

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

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

• Slider Revolution.
• LayerSlider.
• RoyalSlider.
• Hero Slider.
• Accordion and Accordion Slider.
• Recent Post Slider/Carousel.
• Soliloquy.
• Soliloquy.

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

ساخت اسلاید با زبان جاوا اسکریپت برای طراحی وب سایت ایستا

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

در این مثال ما تعداد چهار عس را با نام های 1،2،3،4 را به گونه در کنار هم قرار داده و افکت خاصی را به آن می دهی این کدها را باید در برنامه نوت پد تایپ کرده و با فرمت jsm.* ذخیره کنیم.

کد این برنامه به چند طریق می توان نوشت

ساخت اسلاید مثال 1

<config Version="3.2" bSavedFiles="True">
  <slideshow>
    <slideshowStyle slideshowName="blindsshow">
      <width>600</width>
      <height>200</height>
      <scaleMode>scaleToFill</scaleMode>
      <firstSlide>0</firstSlide>
      <randomPlay>false</randomPlay>
      <autoPlay>true</autoPlay>
      <showShadow>true</showShadow>
      <loopForever>true</loopForever>
      <loop>0</loop>
      <showBorder>true</showBorder>
      <borderSize>6</borderSize>
      <borderColor>0xffffff</borderColor>
      <effectMode>blind</effectMode>
      <interval>3000</interval>
      <effectSpeed>500</effectSpeed>
      <totalSlices>12</totalSlices>
      <sliceInterval>50</sliceInterval>
      <effect strType="assemble" strCaption="fade">false</effect>
      <effect strType="assemble" strCaption="blindLeft">true</effect>
      <effect strType="assemble" strCaption="blindRight">true</effect>
      <effect strType="assemble" strCaption="blindDownLeft">true</effect>
      <effect strType="assemble" strCaption="blindDownRight">true</effect>
      <effect strType="assemble" strCaption="blindUpLeft">true</effect>
      <effect strType="assemble" strCaption="blindUpRight">true</effect>
      <effect strType="assemble" strCaption="blindUpDownLeft">true</effect>
      <effect strType="assemble" strCaption="blindUpDownRight">true</effect>
      <showCaption>false</showCaption>
      <textCSS>.title {font-size:12px;font-weight:bold;font-family:Arial;color:#ffffff;line-height:200%;} .alt {font-size:12px;font-family:Arial;color:#ffffff;}</textCSS>
      <captionPosition>bottom</captionPosition>
      <captionBarColor>0x333333</captionBarColor>
      <captionBarOpacity>0.8</captionBarOpacity>
      <captionBarPadding>8</captionBarPadding>
      <captionAlign>center</captionAlign>
      <showNavArrows>true</showNavArrows>
      <autoHideNavArrows>true</autoHideNavArrows>
      <showNavDots>true</showNavDots>
      <navDotsBottom>6</navDotsBottom>
      <navDotsAlign>right</navDotsAlign>
      <navDotsLeftRightMargin>16</navDotsLeftRightMargin>
    </slideshowStyle>
  </slideshow>
  <items>
    <item StrFile="556_files\1.jpg" StrTitle="1" StrDescription="" bWebLink="False"/>
    <item StrFile="556_files\2.jpg" StrTitle="2" StrDescription="" bWebLink="False"/>
    <item StrFile="556_files\4.jpg" StrTitle="4" StrDescription="" bWebLink="False"/>
    <item StrFile="556_files\5.jpg" StrTitle="5" StrDescription="" bWebLink="False"/>
  </items>
</config>

ساخت اسلاید مثال 2

<config Version="3.2" bSavedFiles="True">
  <slideshow>
    <slideshowStyle slideshowName="slideshow">
      <width>600</width>
      <height>200</height>
      <scaleMode>scaleToFill</scaleMode>
      <firstSlide>0</firstSlide>
      <randomPlay>false</randomPlay>
      <autoPlay>true</autoPlay>
      <showShadow>true</showShadow>
      <loopForever>true</loopForever>
      <loop>0</loop>
      <showBorder>true</showBorder>
      <borderSize>6</borderSize>
      <borderColor>0xffffff</borderColor>
      <effectMode>slide</effectMode>
      <interval>3000</interval>
      <effectSpeed>500</effectSpeed>
      <showCaption>false</showCaption>
      <textCSS>.title {font-size:12px;font-weight:bold;font-family:Arial;color:#ffffff;line-height:200%;} .alt {font-size:12px;font-family:Arial;color:#ffffff;}</textCSS>
      <captionPosition>bottom</captionPosition>
      <captionBarColor>0x333333</captionBarColor>
      <captionBarOpacity>0.8</captionBarOpacity>
      <captionBarPadding>8</captionBarPadding>
      <captionAlign>center</captionAlign>
      <showNavArrows>true</showNavArrows>
      <autoHideNavArrows>true</autoHideNavArrows>
      <showNavDots>true</showNavDots>
      <navDotsBottom>6</navDotsBottom>
      <navDotsAlign>right</navDotsAlign>
      <navDotsLeftRightMargin>16</navDotsLeftRightMargin>
    </slideshowStyle>
  </slideshow>
  <items>
    <item StrFile="5564_files\1.jpg" StrTitle="1" StrDescription="" bWebLink="False"/>
    <item StrFile="5564_files\2.jpg" StrTitle="2" StrDescription="" bWebLink="False"/>
    <item StrFile="5564_files\4.jpg" StrTitle="4" StrDescription="" bWebLink="False"/>
    <item StrFile="5564_files\5.jpg" StrTitle="5" StrDescription="" bWebLink="False"/>
  </items>
</config>

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

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

در ساخت اسلایدی که بتوانیم تکست در آن به کار ببریم علارقم زبان برنامه نویسی جاوا باید از کد های CSS استفاده شود که به آن نیز می پردازیم

اسلایدر چه نقشی در طراحی وب سایت داد

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

اگر وب‌سایت شما دارای اسلایدری با سرعت بالا و تصاویر با کیفیت پایین باشد، کاربران هنگام ورود به وب‌سایت دچار سردرگمی می‌شوند و وب‌سایت را ترک می‌کند.

اسلایدر می‌تواند فرصت مناسبی برای معرفی کسب‌وکار شما به کاربران در یک نگاه باشد. با کمک اسلایدر می‌توانید خدماتی که ارائه می‌دهید را به صورت خلاصه به مخاطبان خود معرفی کنید و لینک ورود یا دکمه CTA برای هر بخش را در اسلایدر قرار دهید. برخی از وب‌سایت‌ها نیز از اسلایدر برای اطلاع رسانی استفاده می‌کنند و خبر‌های مهم را در قالب تصویر در اسلایدر خود قرار می‌دهند.

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

مزایای استفاده ساخت اسلاید اسلایدر در طراحی وب سایت

• به کمک اسلایدرها می‌توانید مهم‌ترین مطالب را در یک نگاه به کاربر ارائه دهید.
• اسلایدر‌ها می‌توانند موجب دسترسی سریع کاربران به بخش‌های مهم وب‌سایت شوند.
• با کمک اسلایدرها می‌توانید چندین بخش را در یک قسمت از وب‌سایت قرار دهید و باعث صرفه‌جویی در فضا شوید.
• روش های ساخت اسلاید

معایب استفاده از اسلایدر در طراحی وب سایت

• اسلایدر می‌تواند باعث سردرگمی کاربران شود. از آن جایی که اسلایدر در آن واحد چندین پیشنهاد به کاربر ارائه دهد می‌تواند برای کاربران گیج کننده باشد.
• از آنجایی که اسلایدرها حجم زیادی دارند حضور آن‌ها در صفحه می‌تواند باعث کاهش سرعت بارگذاری سایت شود.
• اسلایدرها فضای بسیار زیادی از صفحه را اشغال می‌کنند که می‌تواند با المان‌های مفید دیگری جایگزین شود.
• اسلایدرها می‌توانند این حس را در کاربر ایجاد کنند که در حال مشاهده تبلیغات هستند؛ از این رو کاربران به آن توجه نمی‌کنند.
• برخی از اسلایدرها روی تلفن همراه نمایش خوبی ندارند و کار نمی‌کنند.
• روش های ساخت اسلاید