Website Process Document

This document will outline the steps made to create a portfolio website using the Squarespace content management system.  General website setup will not be covered as extensive help is available directly from the Squarespace team.
    The first step in setting up the Portfolio site is to create the four required pages: home page, print instructional materials, graphic instructional materials and multimedia instructional materials.  I like to keep my site (http://aduckworth.com) organized so I nested the pages in a “Portfolio” folder (Figure 1).

Figure 1

Figure 1

Squarespace builds navigation automatically so I didn’t need to build that component separately.  I did build navigation on the home page, however.
The home page is where I started with some of the formatting requirements.  In order to make changes to fonts and background colors in Squarespace it is necessary to inject CSS code.  This can be done in the “Settings” area under “Page Content” (Figure 2).

Figure 2

Figure 2

In this area changes can be made to the configuration of the page.  When entering the “Settings” area the user is confronted with basic configuration options.  In order to inject CSS the I had to enter the “Advanced” section.  In this section I was able to inject code to make changes to my page.  In order to change the background color and make font type and color changes I added my CSS code (Figure 3).

Figure 3

Figure 3

I am familiar with some CSS code but I decided to check my CSS background code reference (CSS Background, n.d.).  I also decided to reference a site to determine the correct CSS code for my font style and color (CSS Fonts, n.d.)  It has been quite a while since I utilized hexadecimal color codes so I to reference a hexadecimal color picker tool (HTML Color Picker, n.d.).  I also needed to add some navigation links to my other pages so I did this with their basic text editor which includes a hyperlink tool.
    Once the home page was complete I began work on the other content pages.  I used the same steps from the home page for my CSS and hexadecimal setup.  The only other elements that my content pages had that differed from the home page were an image, a table and an external link.  To add images I used the Squarespace content picker which has an image item (Figure 4).

Figure 4

Figure 4

This tool lets me add information to the images.  I was able to add a link to the content creator as well as a caption.  For my images I used the advanced search tool on Flickr to look for items that had a Creative Commons Attribution-Share Alike license so I could make edits to the images if I needed to and would not need to worry about copyright issues.  In order to   create a table to showcase the content that I will create in future tasks I needed to add some HTML code.  Squarespace makes this pretty easy as they have a code content item (Figure 5).

Figure 5

Figure 5

I still remembered my HTML tags for tables so it was a simple matter to set up a basic table on each content page with some placeholder text (Figure 6).

Figure 6

Figure 6

By following the instructions above anyone with a Squarespace account should be able to replicate the process to create a portfolio site that will meet the requirements of the portfolio task for Western Governors University.

References

 

         CSS Background. (n.d.). Retrieved October 18, 2014, from http://www.w3schools.com/css/css_background.asp

         CSS Fonts. (n.d.). Retrieved October 18, 2014, from http://www.w3schools.com/css/css_font.asp

         HTML Color Picker. (n.d.). Retrieved October 18, 2014, from http://www.w3schools.com/tags/ref_colorpicker.asp