Steps to deploy website onto Sharepoint

  • Get the pure html Mark up, css/images/js files ready.
  • Login to the sharepoint designer 2013. Use the url  https://example.sharepoint.com .
  • Copy the UI styling files(css/images and js) in -> all files/style library folder.
  • Go to -> all files/_catalogs/masterpages. Two steps to create master pages one via Design Manager and second directly via Sharepoint Designer
  • Method 1 – Design Manager: convert html to master page
  1. Copy the html page in all files/_catalogs/masterpages folder
  2. Go to the sharepoint website -> settings -> Design Manager
  3. Select the option edit master pages -> convert html to sharepoint masterpage.
  4. It automatically converts the html and an additional master page with the same name and the extension .master is created in master page gallery. The html and .master files are associated with each other. Changes to html file override the .master file changes.
  5. To edit the html markup page you have to edit the html page and the changes will be synced to the master page automatically.
  • Method 2 – Sharepoint Designer: convert html to master page
  1. In Sharepoint Designer in the navigation select file -> New Master Page. This creates an empty master page eg: example1.master.
  2. Next you edit the example1.master and seattle.master. seattle is a bydefault master page that come with sharepoint. Copy paste the contents into example1.master.
  3. Refer Randy Drisgill sharepoint 2013 Starter Master Pages. http://blog.drisgill.com/2012/10/sharepoint-2013-starter-master-pages.html. And create a master page referring to the example provided on the site.
  • Now you can edit the master page and keep the common elements such as header and footer in the page and strip out rest of the mark up and paste it into Page layouts. Add the necessary css and js files in the head tag of the master page with their relevant URL pointing to style library folder.
  • To set the master page visit Site Settings -> Look and Feel -> Master Page -> . Here we can specify the site master page and system master page that you want to set.
  • Next you create different page layouts (similar to different html markup structures for different pages) and apply these page layouts to different pages.
  • First you need to create a page layout visit sharepoint website -> settings -> Design Manager -> Edit Page Layouts -> Create new page Layout.
  • These can be found in the master page gallery under all files/_catalogs/masterpages folder. Edit the page layout.
  • Copy the sliced mark up from html master page in to the page layout. Create different page layouts.

Click on settings add a page. It create a .aspx page with the provided name. Edit the page, in the second level top navigation click on Page Layout to select the intended page layout that you want to assign for the page.

Advertisements