Sharepoint Web Design 1

Friday, November 15, 2013

Branding

  • 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