شیرپوینت را قورت دهید ویرایش دوم - کار با کدهای HTML و CSS در صفحات (درس هفدهم)

_{کار با کدهای HTML و CSS در صفحات}

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

در تب Format Text گزینه‌ای با نام Edit Source وجود دارد که این قسمت، کدهای داخل صفحه را به شما نمایش می‌دهد، توجّه داشته باشید، این کدها مربوط به نوار بالایی و همچنین نوار سمت چپ نیست.

همان‌طور که مشاهده می‌کنید، کد HTML مشخّص شده است، برای مثال یک کد ساده از HTML را در خطّ اول وارد می‌کنیم و بر روی OK کلیک می‌کنیم.

بعد از وارد کردن کد و کلیک بر روی OK، متن زیر با تگ <H1> در صفحه ظاهر شده است که این، یک کد ساده بوده است، در ادامه از کد CSS استفاده خواهیم کرد.

بعد از اینکه نحوه ی وارد کردن کد را در صفحه مشخّص کردیم، نیاز داریم تا کارهای بهتری را ارائه دهیم؛ برای این کار از کدهای CSS استفاده می‌کنیم، برای یادگیری آن می‌توانید از لینک زیر استفاده کنید:

http://beyamooz.com/css-tutorial

برای شروع کار، کدهای ساده¬ی CSS را با هم بررسی می‌کنیم و بعد از یادگیری، کدهای پیشرفته‌تری را استفاده خواهیم کرد.

قبل از هر چیز باید یک موضوع مهم را با هم بررسی کنیم؛ وارد قسمت Change the look شوید.

یکی از قالب‌ها را به دلخواه انتخاب کنید.

همان‌طور که قبلاً بررسی کردیم، هر صفحه دو قالب دارد که با نام‌های Seattle و Oslo مشخّص شده‌اند که به صورت پیش‌فرض، همه¬ی صفحات بر روی Seattle قرار دارند، برای اینکه CSS را در صفحه¬ی اوّل خود وارد کنید باید با این دو صفحه کار کنید و کد خود را در این صفحات وارد کنید، برای وارد کردن کد، نیاز به SharePoint Designer دارید.

وارد SharePoint Designer ‌شوید؛ از سمت چپ بر روی Master Pages کلیک کنید، همان‌طور که در لیست مشاهده می‌کنید، دو صفحه‌ای که در بالا بررسی کردیم در لیست قرار دارد، برای اینکه کد CSS را اجرا کنید، صفحه‌ی پیش‌فرض، یعنی Seattle.master را بررسی می‌کنیم.

بر روی فایل Seattle.master کلیک راست کنید و گزینه‌ی Edit File in Advanced Mode را برای ویرایش و وارد کردن کد CSS انتخاب کنید.

در شکل زیر کد مربوط به صفحه‌ی Seattle را مشاهده می‌کنید، برای وارد کردن کد CSS باید کد را بین دو تگ <head></head> وارد کنید، به مانند شکل، قبل از تگ </head> کد صفحه‌ی بعد را وارد کنید.

در صفحه‌ی زیر و در قسمت مورد نظر، کد CSS را وارد کنید؛ این کد یک Border ایجاد می‌کند که رنگ آن، خاکستری و نوشته‌ی آن سفید است، بعد از وارد کردن کد زیر، صفحه‌ی مورد نظر را Save کنید.

.test{ color:white; background-color:gray; border-radius: 50px; height:100px; width:250px;

padding:40px}

</style>

بعد از اینکه کد مورد نظر را وارد کردید باید در صفحه‌ی شیرپوینتی خود، آن را صدا بزنید، برای این‌کار وارد ویرایش صفحه‌ی مورد نظر خود شوید و بر روی Edit Source کلیک کنید.

در شکل زیر ، کد زیر را وارد کردیم:

<div class="test">Welcome to sharepoint 2016</div>

در کد بالا برای اینکه ازکد CSS که در صفحه‌ی Seattle قرار دادیم، استفاده کنیم، class آن را که test بود را در این صفحه صدا می¬زنیم.

همان‌طور که مشاهده می‌کنید، کد CSS اجرا شده و یک Border به رنگ خاکستری و نوشته‌ی سفید ایجاد شده است؛ برای ذخیره‌ی صفحه بر روی Save کلیک کنید.

این یک روش ساده برای استفاده از کدهای CSS در صفحه‌ی شیرپوینتی است که اگر با این کدها خوب کار کرده باشید، برای کاربران خود می توانید صفحات جذّاب ایجاد کنید.

^{_{اضافه کردن فایل CSS از طریق لینک}}

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

به مانند شکل زیر وارد نرم افزار SharePoint Designer شوید و از سمت چپ بر روی All Files کلیک کنید، در صفحه‌ی بازشده کلیک راست کنید و از قسمت New، گزینه‌ی Folder را انتخاب کنید.

تذکّر: این کار را از طریق سایت نیز می‌توانید انجام دهید.

بعد از ایجاد فولدر CSS، وارد آن شوید و از قسمت New، گزینه‌ی CSS را انتخاب کنید.

در فایلی که ایجاد کردید، کد CSS قبلی را در این فایل وارد و ذخیره کنید.

بعد از ایجاد فایل و وارد کردن کد CSS باید آدرس فایل را بدست آورید، برای به‌ دست آوردن فایل بر روی فایل Test.css کلیک راست کنید و گزینه‌ی Properties را انتخاب کنید.

همان‌طور که در شکل زیر مشاهده می‌کنید، آدرس فایل CSS مشخّص شده است که از این آدرس در ادامه استفاده خواهیم کرد.

برای اینکه از فایل CSS که با هم با نام Test.css ایجاد کردیم، استفاده کنیم باید به مانند شکل زیر وارد Master Pages شویم و صفحه‌یseattle.master را باز کنیم و کد زیر را در آن وارد کنیم:

<SharePoint:CssRegistration ID="CssRegistration1" Name="/css/Test.css" runat="server" After="corev15.css" />

توجّه داشته باشید در کد بالا، به جای /css/Test.css باید آدرس فولدر و فایلی را که ایجاد کردید را وارد کنید؛ تگ SharePoint:CssRegistration که در کد بالا مشاهده می‌کنید، مختص به فایل CSS است که قرار است به صفحه اضافه شود که باید این کد بین دو تگ <head></head> قرار بگیرد.

با این کار، صفحه‌ی اصلی شیرپوینت به فایل CSS متّصل می‌شود و شما نیز مانند قبل می‌توانید از این کد در صفحه‌ی اصلی خود استفاده کنید.

برای درک بهتر موضوع یک مثال را با هم بررسی می‌کنیم، وارد آدرس زیر شوید:

https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover

در شکل زیر ، سایت w3schools را مشاهده می‌کنید که یک مثال از فایل CSS اجرا کرده است؛ در این مثال، چند دکمه ایجاد شده است که با قرار دادن مأوس بر روی آن، رنگ آن تغییر می‌کند، برای اینکه از این دکمه در سایت شیرپوینتی خود استفاده کنید، در صفحه‌ی بالا و در سمت چپ، کدهای HTML و CSS را مشاهده می‌کنید.

برای شروع، کدهایی که بین دو تگ <style>,</style> قرار دارند را کپی بگیرید و در فایل Test.css که در شیرپوینت ایجاد کردید را کپی کنید، این کار را در شکل زیر مشاهده می‌کنید، بعد از کپی کردن کد، فایل Test.css را ذخیره کنید.

بعد از انجام کارهای بالا وارد صفحه‌ی شیرپوینتی مورد نظر خود شوید و برای ویرایش صفحه بر روی Edit کلیک کنید.

در صفحه‌ی ویرایش بر روی HTML Source کلیک کنید و هر چه بین دو تگ <Body></Body> است را در صفحه‌ی شیرپوینت، وارد و بر روی OK کلیک کنید و در آخر بر روی Save کلیک کنید.

همان‌طور که مشاهده می‌کنید، کد CSS به همراه کد HTML اجرا شده و دکمه های مشخّص شده را در صفحه قرار داده است، توجّه داشته باشید همیشه از آخرین نسخه‌ی مرورگر خود استفاده کنید.

^{_{تغییر Home Page در شیرپوینت}}

یکی از راه¬هایی که می‌توانید قالب سایت شیرپوینتی خود را به یک سایت پیشرفته و زیبا تغییر دهید، این است که صفحه‌ی اوّل سایت را تغییر دهید؛ برای انجام چنین کاری می‌توانید از سایت‌های دیگر که ارائه-دهنده‌ی قالب‌های سایت هستند، کمک بگیرید، مثلاً سایت http://www.free-css.com، قالب‌های زیبایی را با CSS و JS ارائه می‌دهد.

برای شروع کار قالب زیر را دانلود کنید:

http://www.free-css.com/assets/files/free-css-templates/download/page214/salique-v1.0.zip

بعد از دانلود وارد پوشه‌ی salique-wide شوید و دو بار بر روی فایل Index کلیک کنید.

در شکل زیر، سایت مورد نظر اجرا شده است که می‌خواهیم این سایت را به عنوان صفحه‌ی اوّل شیرپوینت به کار ببریم.

نرم‌افزار SharePoint Designer را باز کنید و به سایت شیرپوینتی متّصل شوید و از سمت چپ بر رویSite Pages کلیک کنید؛ در این صفحه، پوشه‌های دانلود شده را بکشید و در جای مشخّص شده کپی کنید، البتّه هر کدام از پوشه‌ها یک سایت کامل است.

وارد پوشه‌ی salique-wide شوید و بر روی فایل Index.html کلیک راست کنید و گزینه‌ی Rename را انتخاب کنید و پسوند html را به aspx تغییر دهید و بر روی Yes کلیک کنید.

برای اینکه سایت جدید خود را به عنوان صفحه‌ی اوّل شیرپوینت انتخاب کنید، بر روی آن کلیک راست کنید و گزینه‌یSet as Home Page را انتخاب کنید تا این صفحه به عنوان صفحه‌ی اوّل انتخاب شود، بعد از انتخاب، آیکون مورد نظر به صورت شکل زیر تغییر می‌کند.

اگر صفحه‌ی اوّل سایت شیرپوینت خود را که در اینجا، آدرس آنHttp://sp2016/ است را اجرا کنید، تغییرات را به مانند شکل زیر مشاهده خواهید کرد.

اگر بخواهید از همه‌ی صفحات این سایت استفاده کنید باید پسوند صفحات را از html به aspx تغییر دهید، در صفحه‌ی زیر، یک صفحه‌ی طرّاحی¬شده را مشاهده می‌کنید که به عنوان صفحه‌ی اوّل سایت انتخاب شده است.

شیرپوینت را قورت دهید ویرایش دوم - بررسی کلی سرور‌ها (درس اول)

شیرپوینت را قورت دهید ویرایش دوم - راه اندازی سرور دیتابیس (درس دوم)

شیرپوینت را قورت دهید ویرایش دوم - راه اندازی سرور شیرپوینت (درس سوم)

شیرپوینت را قورت دهید ویرایش دوم - کار با سایت ها و لیست ها در شیرپوینت (درس چهارم)

شیرپوینت را قورت دهید ویرایش دوم - فیلتر کردن و گروه بندی در لیست‌ها (درس پنجم)

شیرپوینت را قورت دهید ویرایش دوم - ایجاد نما (View) در شیرپوینت (درس ششم)

شیرپوینت را قورت دهید ویرایش دوم - کار با Task (وظایف) در شیرپوینت (درس هفتم)

شیرپوینت را قورت دهید ویرایش دوم - ایجاد Template از لیست شیرپوینت (درس هشتم)

شیرپوینت را قورت دهید ویرایش دوم - کار با ستون Lookup در شیرپوینت(درس نهم)

شیرپوینت را قورت دهید ویرایش دوم -کار با InfoPath در شیرپوینت (درس دهم)

شیرپوینت را قورت دهید ویرایش دوم - ایجاد شرط در InfoPath (درس یازدهم)

شیرپوینت را قورت دهید ویرایش دوم - دریافت اطّلاعات لیست دیگر در فرم Infopath (درس دوازدهم)