خانه / JSP / HTML5 Templates / طراحی سمت کاربر (بخش دوم )

طراحی سمت کاربر (بخش دوم )

در این جلسه قصد داریم  یک قالب html ساده باکمک Netbeans IDE ایجاد کنیم . قبل از هرچیزی بگم انتخاب IDE برای نوشتن کدها بسته به انتخاب خودتون داره مهم نیست Sts باشه یا eclipse  یا netbeanse حتی میتونید از یک برنامه notepad++ استفاده کنید . مباحثی هم که در طی جلسات آینده مطرح میشه هم همه همینطوره یعنی هیچ دلیلی نداره شما از این IDE استفاده کنید مگر اینکه خودتون بخواین .

میخوایم قالبی طراحی کنیم که با html5 نوشته شده باشه و از بوت استرپ و جی کوئری و جاوا اسکریپت هم چاشنی گرفته باشه خب فرض رو بر این میگیرم که شما هم مثل من نت بینز رو به عنوان IDEتون انتخاب کردید . نت بینز یه کانکتوری توی مرورگر کروم داره که میتونید با کمک اون خیلی راحت و سریع  تغییراتی که توی کدهاتون اعمال میکنید رو ببینید . این افزونه NetBeans Connector نام داره که میتونید اون رو راحت از کروم وب استور  دانلود و نصب کنید . وقتی این افزونه نصب شد توی یوآرال صفحات پروژه هاتون  آیکن نت بینز انتهای یوآرال قرار میگیره که وقتی روش کلیک کنید لیستی از سایزهای مختلف صفحه باز میشه که میتونید نمایش صفحه رو توی سایزهای مختلف نمایشگرهای متفاوت ببینید

 

html5-runproject2

حالا نت بینز رو باز کنید از منوی file گزینه New Project رو بزنید . توی ویزاردی که بهتون نمایش داده میشه دسته HTML5 رو و بعد از اون زیر دسته HTML5 Application رو انتخاب کنید . یه اسم برای پروژه و مسیر ذخیره پروژه رو تعیین کنید .توی صفحه بعد گزینه No Site Template رو تیک بزنید

html5-newproject2

وقتی این گزینه رو تیک دار میکنید یه قالب خالی html ایجاد میکنه که یه پوشه به نام Site Root داره و یه فایل  index.html که داخلش قرار داره قدم بعدی افزودن کتابخونه های مورد نیاز پروژه تونه . مثلا من کتابخونه jquery  رو نیاز دارم و اون رو نصب میکنم

html5-newproject3

این کتابخونه ها توی یه پوشه به نام libs داخل پوشه js اضافه میشه . بعد finish رو بزنید .

حالا برای اعمال تغییراتتون به فایل index.html سر بزنید ، هرطور که دوست دارید طرح صفحه اصلی تون رو بزنید و برای نمایش صفحه از مرورگر کروم بالای toolbar نت بینز استفاده کنید .

html5-js-selectbrowser

مدیریت پلاگین ها ، عکس ها و فایل های css و خلاصه هر چیزی که قراره به پروژه تون اضافه بشه با خودتونه اما همه رو توی پوشه public_html اضافه کنید . من دیگه وارد جزئیات بیشتری نمیشم و هرچیزی لازم باشه توی جلسات بعد خواهم گفت . وقتی قالبتون اون طور که خواستید دراومد میتونید از اون به عنوان یه قالب برای پروژه های بعدی تون استفاده کنید برای اینکار روی پوشه پروژه تون توی بخش نمایش لیست پروژه هاتون راست کلیک کنید و گزینه Save as Template  رو بزنید دقت کنید که تیک همه فایل ها خورده باشه . وقتی روی دکمه finish کلیک کنید نت بینز یه فایل زیپ از این پروژه توی مسیری که مشخص کردید ایجاد میکنه که میتونید توی پروژه های بعدی به عنوان قالب از پیش ایجاد شده استفاده کنید

html5-sitetemplate

 

در این جلسه قصد داریم  یک قالب html ساده باکمک Netbeans IDE ایجاد کنیم . قبل از هرچیزی بگم انتخاب IDE برای نوشتن کدها بسته به انتخاب خودتون داره مهم نیست Sts باشه یا eclipse  یا netbeanse حتی میتونید از یک برنامه notepad++ استفاده کنید . مباحثی هم که در طی جلسات آینده مطرح میشه هم همه همینطوره یعنی هیچ دلیلی نداره شما از این IDE استفاده کنید مگر اینکه خودتون بخواین . میخوایم قالبی طراحی کنیم که با html5 نوشته شده باشه و از بوت استرپ و جی کوئری و جاوا اسکریپت هم چاشنی گرفته باشه خب فرض رو…

۰

User Rating: 2.48 ( 2 votes)

درباره ی فاطمه سادات کریمی

پاسخ دهید

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