ورود به سایت

ثبت نام در سایت

Registration confirmation will be e-mailed to you.

فراموشی رمز

سه × سه =

بستن
بستن

چگونه با Dreamweaver وب سایت مخصوص موبایل بسازیم؟

چگونه با Dreamweaver  وب سایت مخصوص موبایل بسازیم؟

طبق یافته های شرکت Com.score بیش از ۱۰۰ ملیون کاربر، برای وبگردی از موبایل های خود استفاده می کنند.

به همین دلیل یادگیری ساخت وب سایت مخصوص تلفن های همراه امری ضروری است.

برای استفاده از این مقاله، به برنامه Dreanweaver CS5 یا بالاتر نیاز دارید.

مطالب مرتبط


گام 1 - روش طراحی وب سایت مخصوص گوشی های همراه

روش طراحی وب سایت مخصوص گوشی های همراه

برنامه را باز کنید و از قسمت File، New را انتخاب کنید:

در این قسمت پنجره New Document برای شما نمایش داده خواهد شد.

در قسمت چپ روی گزینه Page From Sample را انتخاب کنید.

در ستون بعدی Mobile Starters و در ستون دیگر jQuery Mobile (CDN) را انتخاب کنید.

روش طراحی وب سایت مخصوص گوشی های همراه

نوبت به ایجاد وب سایت می رسد:

به محض باز کردن فایل (jQuery Mobile (CDN یک صفحه شبیه به تصویر بالا را مشاهده خواهید کرد.

  • با وجود اینکه این پرونده تک صفحه ای است، هر هدر نشان دهنده یک صفحه جدید می باشد. برای مثال صفحه اول می تواند مختص صفحه "خانه" در نظر گرفته شود. صفحه دوم می تواند برای "درباره ما" استفاده شود و صفحه سوم برای خدمات ارائه شده در وب سایت و الی آخر.
روش طراحی وب سایت مخصوص گوشی های همراه

دستور برنامه را بررسی کنید:

اگر با زبان HTML آشنایی نداشته باشید ممکن است این قسمت برای شما کمی سخت باشد. برای ایجاد محتوا بهتر است در برنامه Dreamweaver در حالت Split view کار کنید. برای فعال کردن این حالت در گوشه سمت چپ برنامه زیر منوی فایل، چهار گزینه مشاهده خواهید کرد: Code, Split, Design, Live.

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

عنوان هر صفحه را ویرایش کنید:

در قسمتی از کدها، کد (div data-role="page" id="page") را مشاهده خواهید کرد. این کد به شما می گوید که در اول صفحه قرار دارید. دقت داشته باشید که هر صفحه عدد خود را دارد. مثال: div data-role="page" id="page2، نشان دهنده صفحه دوم است.

div data-role="header قسمت مربوط به عنوان است که در این مرحله شما باید اطلاعات عنوان خود را در بین دو عبارت "h1" و "/h1" قرار دهید.

روش طراحی وب سایت مخصوص گوشی های همراه

محتوا و منوی سایت را ویرایش کنید:

دستور "div data-role="Content" شروع بخش مربوط به محتوا است. در این محتوای اصلی هر صفحه از وب سایت جای می گیرد.

  • اگر به صفحه اصلی وب سایت نگاه کنید، متوجه خواهید شد که در صفحه اول یک سری لیست وجود دارد. "ul data-role="listview" دستوری است که لیست های خود را در آن قسمت باید یادداشت کنید. هرگاه خواستید یک منو یا یک لیست به سایت اضافه کنید باید از صحت لینک مطمئن باشید. برای مثال اگر صفحه دوم به " درباره ما" اختصاص دارد، صفحه سوم مربوط به "خدمات" و صفحه چهارم "تماس با ما"، باید به شکل زیر عمل کنید:
  • حالا برای ویرایش محتوا، متن خود را بین " div data-role="content" و "/div" بنویسید. برای مثال:
  • blank
روش طراحی وب سایت مخصوص گوشی های همراه

انتهای وب سایت را ویرایش کنید:

برای این کار، متن خود را در قسمتی که نوشته  "Page Footer"  قرار دهید.

از قسمت "Live Mode" به سایت خود نگاه کنید:

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

اطلاعات مطلب

  • Blog
  • 98 بازدید
  • blankblankblankblankblank (2 votes, average: 5٫00 out of 5)
    blankLoading...
  • آخرین ویرایش توسط : فخر کامبیز - پنج‌شنبه, 26 سپتامبر 19, 7:05 ب.ظ

دیدگاه کاربران

  1. Avatar
    محمد تقی زاده - 2019/09/29 - 9:34 ب.ظ
  2. Avatar
    سعید قربانی - 2019/12/08 - 9:12 ب.ظ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بهترین علوم و دانش برای شما گردآوری میشه

آخرین های آیا میدانید

از همه جا براتون مطلب داریم لطفا کلیک کنید

مطالب برگزیده

موضوعات مهم سایت

مطالب محبوب