Office 365 supports two different tools for editing the Office 365 public web site. These are the integrated editor and SharePoint Designer. The simpler tool to use is the Office 365 integrated web editor. We have included information on how to install SharePoint Designer, but that is beyond the scope of this chapter. We recommend that you start with the integrated editor, and if you still have to use SharePoint Designer, purchase a book dedicated to the use of that tool. SharePoint Designer is a complex tool to use, and the primary purpose is to design to build and manage SharePoint team sites.
SharePoint Designer is an advance SharePoint tool used for the modification and maintenance of SharePoint team sites. The Office 365 public web site is a subset of a SharePoint team site.
Let’s walk through an overview of using the Office 365 integrated web-editing tool. Our focus will be on pointing out the key features, to give you a better understanding of the tool’s capabilities. Later we will use the tool to build our sample web site with a PayPal payment integration. We deploy a ten-step process (discussed later) in the building of our web site that you can deploy for your own Office 365 public web site.
Getting Started on the Public Web Site
To get started on the public web site, select the public web site link that is located in the SharePoint admin center. The landing page of the public web site should look like Figure 6-9.
The Office 365 public site editing tool uses two controls: “Page” and “Site.” The “Page” control is used for content management, and the “Site” control is used for global look changes. This is similar to the SharePoint controls on the Office 365 team site, but different. The public web site controls are optimized for web development and not user permission or library management. The Office 365 SharePoint tools were discussed in detail in Chapter 5.
Accessing the Public Web Site
You can access the public web site in three ways:
Access the URL from the SharePoint admin console.
Access the URL directly through your browser (in our case the URL is
. (If the site is not published, you will be requested to log in with your Office 365 account.)
Access the URL and select “Sign In” (see Figure 6-9, upper right, above the search menu bar).
The Office 365 public web site only supports site collection administrators. There are no private member areas for user access. This may change in a future release, but the date is not known. If you are looking for a member-only web site, you have two options: (1) use the Office 365 team site (assign licenses or external users) or (2) look at hosting a web site in Microsoft Azure.
Using the Page Control
The Page control is used to modify and create new page content (Figure 6-10). Selecting the Page control will expand the different content editing functions. There are two types of edit controls: “Edit,” for the content of the page, and “Edit Properties,” for the site. The Edit control also allows you to have an internal page and a public page. You can “Save and Publish” and review page history options to revert to an earlier page.
To create new pages, select “New” and enter the page description (see Figure 6-11). As an example, we can create two new pages, “Product” and “Store.” These two pages are top-level pages; they will appear on the menus.
When you select create a page, Office 365 changes the menu to the Page Edit control to build out the web page with content. You can add content into the page as needed. In our example, we will add some basic text content and create our “Store” page, so our customers can purchase products from our company. Once you have added content, select “Save,” then “Save and Publish” (or “Unpublish,” for an existing page).
Office 365 Page editor allows you to Save (and not publish), Save and Publish, or Unpublish an existing page. The page history contains all of the differnt versions that were publised on the public website. When you unpublish, you are reverting to an earlier version.
Page Control: Edit Content
Once you have content, there are certain basic controls available to modify the page. These are your standard formatting tools (as you would expect in Microsoft Word), including a spell-checker. There are some additional controls; these are for editing the source and converting content to XHTML (Figure 6-12).
Once you have selected the edit content, you can now select the page and insert additional elements onto the page. The insert elements are the expected elements (see Figure 6-13), with the exception of three new controls. The standard controls that you will take advantage of in your design are
Table, Picture, Video and Audio, Map, Link, and Embed Code. Granted, some of these controls are expected, such as Map, but the interesting controls are the Reusable Content control (for typing data that is used on multiple pages), the Social plug-in, and the Embed Code control. The Embed Code control allows you to do interesting things, such as insert HTML code for a shopping cart (from PayPal) on our web site or add tracking metrics (to see who has visited our site and when).
The control we find the most interesting is the Social plug-in (see Figure 6-14). This control opens the SharePoint Store and allows you to insert different controls and apps into your Office 365 public web site. We’re not sure why SharePoint called this “Social”—it seems more akin to a developer toolkit—but whatever the reason, this control is a real gem.
Page Control: Edit Properties
Edit Properties is a very important feature in your public web site setup. This control offers two different options: editing properties of the pages on your web site and editing the search engine optimization (SEO) properties that are used by search engines to find your web site, so that you can engage more customers for your product or services.
The SEO interface allows you to rename a page, change the title, change the browser title, give detailed meta-and keyword descriptions, and control the search engine (whether it is allowed to scan or not scan). Typically, an SEO expert will modify the HTML and meta-data directly on your pages. What we have in this case is a tool that will format the SEO characteristics, so that you can use these later on in your Bing and Google ad campaigns to drive leads to your web site for conversion into opportunities and business transactions.
Page: Page History
The most useful control is the Page History. Once you have started to edit a page, select “Page History” to view your changes (see Figure 6-15). Page History allows you to look at different versions and compare the versions to what you have currently published. This feature is extremely useful for ensuring that you do not lose content and have a record of what you’ve published.
Using the Site Control
Earlier, we looked at the Page elements. The “Site” control raises us a level to look at the site in detail (Figure 6-16). The Site control allows you to set the global site characteristics, form, and feel.
With the Site control, you set up the site’s look and feel, style sheets, logos, menus, structure, etc. This is how you give your web site personality. As an example, the basic template for all Office 365 web sites is a cloud theme. If you do not like clouds, this is where you change the site.
The preceding was a quick look at the editing tools that you can use to build your web site, but to take advantage of the tools, you must have a plan. To show you how make one, we have created an eight-step process to build your own web site. Our test web site will be about model trains, and we will use the different internal editor tools to build the web site. Our goal is to give you the necessary information, so that you can repeat the process for your own Office 365 public web site.