بلاگ

مشاهده آخرین پست‌های مرتبط با شیرپوینت

07 خرداد

آموزش گام به گام ایجاد Master Page در شیرپوینت دیزاینر ۲۰۱۳

شیرپوینت ۲۰۱۳ شامل ویژگیها و قابلیت های ویژه ای است که توسط شیرپوینت دیزاینتر (sharepoint designer) پشتیبانی می شود

شیرپوینت ۲۰۱۳ شامل ویژگیها و قابلیت های ویژه ای است که توسط شیرپوینت دیزاینتر (sharepoint designer) پشتیبانی می شود برخی از این امکانات عبارتند از پشتیبانی از HTML5 , بخش look and feel , Design Manager , تعداد زیادی قالب (template) های از قبل آماده و پشتیبانی از طراحی واکنشگرا (responsive) برای مستر پیج ها موجود است.

در این پست قصد آموزش گام به گام کار با sharepoint designer 2013  را داریم. برای شروع باید مطمین شوید که می‌توانید با دسترسی design با شناسه کاربری تان در محیط شیرپوینت لاگین کنید و سپس مراحل زیر را قدم به قدم انجام دهید. (از آنجایی که ترجمه متعددی از نسخه فارسی شیرپوینت ۲۰۱۳ موجود است و بخش های مختلف با کلمات مختلفی ترجمه شده اند در این مقاله سعی شده از نام اصلی برای بخشهای مختلف استفاده شود مثلا به جای تنظیمات سایت همان site setting را عنوان میکنیم)

گام اول : برای ایجاد یک مستر پیج (master page) برروی آیکون site setting کلیک نمایید. 

 

 گام دوم :‌ انتخاب site setting از دکمه ای بالای صفحه

 گام سوم :‌ در قسمت site setting ->‌ look and feel -> باید گزینه design manager را انتخاب کنید. 

 گام چهارم : در قسمت design manager با گزینه upload design files را انتخاب کنیم .

 گام پنجم : حال از لینکی که در تصویر زیر مشخص شده است می توانیم محتوا (content) , فایلهای html , css , script برای مستر پیج جدیدمان اضافه کنیم.

 گام ششم :‌ در این مرحله باید تمام محتوایاتی که برای ایجاد مستر پیج جدید مان نیاز داریم نظیر صفحه html , استایل های css و اسکریپت ها را اضافه کنیم. نحوه اضافه کردن به این ترتیب است که برروی گزینه فایل در ریبون (ribbon) کلیک میکنیم و گزینه start uploading files انتخاب میکنیم. 

  گام هفتم :‌ در این مرحله یک فولدر جدید می سازیم و نام آنرا SPEmpower میگذاریم. 

 گام هشتم :  بعد از ایجاد فولدر اصلی که در مرحله قبل ایجاد کردیم محتویات css ها و js ها و تصاویر و فایلهای html را داخل این فولدر اضافه میکنیم. 

 گام نهم :‌ ایجاد ساب فولدر با نام های css , javascript , images و اضافه کردن فایل html (نام گذاری فولدرها انتخابی است فقط باید در لینک دادن محتویات فولدرها در صفحه html دقت کنیم.)

گام دهم : حال زمان بارگزاری فایلهای و استایلهای صفحه در داخلی فولدرهای مربوطه می باشد این کار را از طریق منوی file گزینه upload document انجام میدهیم تنها کاری که لازم است انجام دهید آنست که document مورد نظر از قسمت browse انتخاب کنید و برروی دکمه Ok کلیک کنید. 

گام یازدهم :‌ در این مرحله یک پنجره دیگر به شما نمایش داده خواهد شد شما باید از آن پنجره برروی دکمه save کلیک کنید تا document های بارگزاری شده شما در فولدر های مربوطه ذخیره گردد.

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

 گام سیزدهم : بعد از کلیک کردن برروی دکمه ok در مرحله قبل پنجره زیر نمایش داده میشود که در آن باید برروی دکمه save کلیک کنیم.

گام چهاردهم :‌ بعد از اضافه کردن تمام مستندات در فولدر مورد نظرمان شکل شمای ظاهر فولدر مربوط به مسترپیج مان باید شبیه به تصویر زیر باشد. 

 گام پانزدهم :‌ در این مرحله باید به قسمت design manager برویم و گزینه edit master pages و سپس Convert an HTML file to a Sharepoint master page را انتخاب کنیم این کار باعث میشود فایل html بارگزاری شده توسط شما تبدیل به یک مستر پیج شود.

 گام شانزدهم :‌ انتخاب فولدر مربوط به مستر پیج 

 گام هفدهم :  لطفا صفحه html را انتخاب و سپس برروی دکمه insert کلیک کنید تا صفحه html به مسترپیج تبدیل شود.

گام هجدهم : اینک به منظور مشاهده صفحه convert شده مان باید به قسمت Design manager برویم سپس گزینه Upload design files را انتخاب کنیم و سپس لینکی در قسمت پایین آن صفحه (در شکل زیر با کادر قرمز رنگ مشخص شده) است را انتخاب کنیم

گام نوزدهم : در این مرحله باید مجددا فولدر SPEmpower را که در مراحل ایجاد کردیم را انتخاب کنیم. 

 

گام بیستم :‌ در این مرحله میتوانیم به خوبی نتیجه کارمان را مشاهده کنیم که صفحات .html مان به .master تبدیل شده اند.

گام بیست و یکم : پس از انجام این مراحل زمان منتشر کردن پروژه مان است. ما فایلهای زیادی را در داخل فولدر مان (مانند تصاویر , استایلها و اسکریپت ها) باید منتشر کنیم. به این منظور باید به قسمت Design manager برویم و برروی گزینه Publish and Apply Design کلیک کنیم سپس گزینه Go to the Master Page Gallery را انتخاب می کنیم.

گام بیست و دوم : به پروژه مان بازمیگردیم (فولدر SPEmpower)

گام بیست و سوم : در این مرحله به منوی Files می رویم و هر نوع محتوایی را که می خواهیم انتخاب میکنیم و سپس برروی دکمه Publish کلیک میکنیم با انتخاب فایلها دکمه publish نیز به حالت فعال(enable) تغییر میکند. 

گام بیست و چهارم : زمانیکه برروی دکمه publish کلیک کنیم یک پنجره جدید باز میشود, اگر تمایل دارید یک توضیحاتی برای منتشر شدن document تان بنویسید از طریق این پنجره این امکان فراهم شده است. 

گام بیست و پنجم :‌ در این مرحله مسترپیج شما باید منتشر شده باشد به طور پیش فرض سایت های شیرپوینت از seattle.master به عنوان master page  استفاده میکنند به منظور جایگزین کردن مسترپیج خودتان به جای مسترپیج شیرپوینت می توانید باید به Site setting رفته و گزینه Select Master Page را از قسمت Look and feel انتخاب کنید. 

گام بیست و ششم :  در این مرحله مسترپیجی که خودتان ایجاد کرده بودید را انتخاب کنید.

گام و بیست و هفتم : از قسمت Site Master page سپس از لیست drop down آن بخش میتوانید مستر پیج مورد نظرتان از میان مسترپیج های موجود را انتخاب کنید.

گام و بیست و هشتم : از طریق این بخش مستر پیج تان به عنوان master page اصلی فعال کنید اگر تمایل داشته باشید می توانید از قسمت System Master Page یکسری تغییرات دیگر برروی مسترپیج مورد نظرتان انجام دهید و آنرا برای سایر بخشها فعال کنید.

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

گام سی ام :‌ پس از فعال کردن مسترپیجی که تا کنون برروی آن کار کردیم شکل ظاهر وب شما باید (بسته به نوع template تان) تغییر کرده باشد به عنوان خروجی سایت همانند شکل زیر خواهد بود. 

گام سی و یکم : در این مثال (برای جنبه های آموزشی) محتوای اصلی طوریست که در پایین صفحه زیر فوتر صفحه قرار گرفته است که این موضوع مناسب نیست و ما باید محتوای اصلی (main content) را از پایین صفحه به یک مکان مناسب cut کنیم , به این منظور باید نرم افزار Sharepoint Designer استفاده کنیم.

گام سی و دوم :‌ ابتدا نرم افزار شیرپوینت دیزاینر را اجرا و سایت شیرپوینتی تان را در آن باز کنید. 

گام سی و سوم : حال از قسمت navigation  نرم افزار گزینه master page را انتخاب کنید.

گام سی و چهارم : حال در این مرحله باید فولدری که نام آن را SPEmpower گذاشته بودیم را انتخاب کنیم .

گام سی و پنجم :‌ در این مرحله فایل sharepointempower.html قابل مشاهده است و باید آن را انتخاب کنیم.

گام سی و ششم :‌ در مرحله به منظور اضافه کردن محتوای دلخواه از قسمت customization باید Edit File را انتخاب کنیم. توجه داشته باشید زمانیکه از نرم افزاری sharepoint designer استفاده میکنید فقط میتوانیم فایل sharepointempower.html را ویرایش کنیم و تغییرات ما به صورت اتوماتیک به فایل .master اضافه میشود و دیگر نیازی انجام تغییرات در sharepointempower.master نیست.

گام سی و هفتم : بعد از باز کردن کد مربوط به صفحه Html به انتهای صفحه بروید و بعد از تگ footer تگ  MainContentPlaceHolder را مشاهده خواهید کرد. تنها کاری که باید بکنید اینست که div مربوطه را کات کنید و در قسمت Main-Content پیست کنید.

گام سی و هشتم :‌ قسمتی که باید کد MainContentPlaceHolder را در آنجا کپی کنید Main-Contetn نام دارد و تصویر کاملا مشخص است.

گام سی و نهم :‌ با یک بار کپی و paste کار انجام شد و شما می توانید MainContentPlaceHolder مربوط به master page را در وسط صفحه مشاهده کنید. 

 

  • BLOG_RATING
  • 2863 Times

عضویت در ماهنامه شیرپوینت

در صورت تمایل می‌توانید با وارد کردن ایمیل خودتان و تایید آن به صورت رایگان در ماهنامه الکترونیکی ما عضو شوید