SharePoint Online creates the home page layout of the Portal series

before words

In SharePoint Online, you create the first page layout, which is typically provided by the artist, the graph becomes the HTML + Css + script form, and then all the resource files are uploaded to the SharePoint Online repository, creating the page in designer. Add an HTML page and modify the reference.

Below, let's take a step-by-step demonstration of this process.

First, get it, make a cut.

The layout of SharePoint online, usually made by the artist, and cut to the html+ picture + style + script, into the hands of our developers, to facilitate the creation of the page.

Here, I have finished the cut diagram, because designer 2013 does not support the Design view, so this is shown in designer 2007, such as:

Second, using the designer Create a page in a Web site

Then use the designer to open the SharePoint Online site and go to all files-pages, such as:

In the new option on the Ribbon menu, create a new page, such as:

Then, in line with the previous introduction of the master page, use advanced mode to open the newly created home page, mainly adding all the HTML content to the PlaceHolderMain node, such as:

Third, upload the resource file while modifying the reference path

Copying HTML to a page allows us to upload images, styles, scripts, and so on to a library of SharePoint online, such as:

Upload all the footage files, then replace all the picture reference paths, script reference paths, and style reference paths, and then you can preview our page, such as:

Of course, the contents of all the columns are still static HTML, we also need a step by step, the content of the part to replace the content of the dynamic release, which I will be in the next blog to introduce to you.

To this, our homepage layout is basically complete, can begin to join dynamic content, colleague, we can right click this page in designer, then set to homepage; Of course, we can also go to Site Settings – Appearance – Welcome page set Homepage, so that we access through the domain name, The default is to jump to our home page.

Four, some suggestions on how to create a home page layout

Style sheet, script file external reference; Use div+css for better layout; SPO supports HTML5 responsive layout; Browser compatibility is determined by layout;

Total Knot

Home layout of the production, in the portal production is relatively simple, usually the role of art is very large, if there are some ambiguous CSS definition, will give us the next job brings a lot of trouble.

In particular, don't let the artist globally define the style of the label, such as Div{margin:auto;} This way, try to make your custom style unique so that you don't conflict with SharePoint online styles.

Well, the introduction of home layout is here, the next article we will introduce the application of navigation alone.

SharePoint Online creates the home page layout of the Portal series