Sharepoint Web Design 1

Friday, November 15, 2013


  • Branding:
    • the act of building a specific image or identity that people recognize in relation to your company
  • Website Branding:
    • Designing elements to give site its look and feel

Branding a Website:

  • Designing and implementing the look and feel
    • Selecting fonts, colors and images
    • Designing page layout and navigation
    • Can involve overall site functionality
  • Steps when planing a large branding project
    1. Create wireframes
    2. Create design comps
    3. Design page layout using HTML and CSS
    4. Implement design in test site
    5. Move implementation into production

Site actions -> site settings -> master pages

All site content, view style library, storage for style sheets

Copy the url and open sharepoint designer

Click on open site and paste the url in there

Change site title here

In sharepoint designer edit site title, click save

Refresh site, see title changed

See the master pages inside the site

Create a new .aspx page, name Page1.aspx

Open page in advanced edit mode

This is what the page looks like at first

Make these changes to the page, hit the save button, saved to the server in the content database

Hit f5 to view the page in pane beneath without committing to content database

Make a change, hit f5 to view in design mode, save to commit to content database

Navigate to Page1.aspx, just off the root

Add navigation link, site actions, site settings, top link bar, new navigation link, click ok

Navigation link in top link bar

Brand new team site, notice the url /SitePages/Home.aspx

Click on site pages link, see document library that is wiki page library

Site actions -> edit page, go into edit mode, see the server side ribbon

Text layout one column make changes to page

Text layout two columns with header

Format text with styles and markup styles, hit insert tab, click picture from computer

Specify name and title for site assets library, hit save

Now the file has been added to the page

Add a picture and format text in second column, click save and close

The new home page

Files are stored in Site Assets, Site Pages, Home folder

Libraries, Site Pages, click on how to use this library

Goto Home page, click edit page type in text using double square brackets syntax to create a link, save

Click on the link

Get prompt to create the page if it does not exist

Sharepoint creates the page on the fly

Type double square brackets get dropdownlist, intellisense, driven by javascript

Point to home page with a friendly title, click save

The new page with the link to the home page

Default Success Warning Important Info Inverse
B S W I ? O