گام 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” بنویسید. برای مثال:
روش طراحی وب سایت مخصوص گوشی های همراه

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

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

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

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