Illustration Portfolio

Online Portfolio Website

Learn how to create your own online portfolio, using a provided template as a starting point.

Setting up your site on your Mac

  1. In Google Classroom, download the provided website template:
    1. Click on the link to the zipped folder
    2. Click the download button in the top right
  2. Using Finder, move the site folder to a new location:
    1. Open Finder by clicking on the blue/white square face icon on the left side of the dock
    2. Go to "Documents" in the left sidebar and create a new folder to contain your website folder
      1. Click on the small gear icon (on the top - to the left of search)
      2. Select "New Folder"
      3. Give your folder a name (ie. Website)
      4. Press enter or click outside of the name field to exit the name editing mode
    3. Move the downloaded website template into the newly created website folder
      1. In the left sidebar, click on "Downloads"
      2. Select the downloaded website template and drag to hover over the "Documents" directory in the left sidebar
      3. After the background of "Documents" turns blue and the finder window switches to Documents, continue dragging your template to hover over the website folder
      4. After the background of the new folder turns blue, release the website template folder
  3. If the template is still zipped, double-click to open
  4. Rename your website folder to include your first name, last initial, and S2019 (if your entire website will be anonymous, use your chosen psuedonym instead of your actual name):
    1. Click once directly on the folder name
    2. When the name background turns blue, click on the name again
    3. Type your first name, last initial and S2019 (ie. jJohnS2019)
    4. Make sure not to leave any spaces in the name
    5. Press enter or click outside of the name field to exit the name editing mode

Setting up your site in Dreamweaver

  1. Open Dreamweaver
    1. Select "Yes, I have"
      Selecting Yes image is missing
    2. Select "Standard Workspace"
    3. Select your theme
      Selecting theme image is missing
    4. Click on the X at the top right corner of the startup screen
      Closing window image is missing
  2. Go to Site → "Create Site"
  3. Add a name for your site
  4. Select your website's location:
    1. Click on the folder icon to the right of "Local Site Folder"
    2. Use the file browser to choose your website's parent folder (the directory/folder that contains your website folder - this should be in the Documents folder and named something like "Website") - DO NOT select the folder with your name
  5. Select the "Servers" tab
  6. Click on the "+" icon (towards the bottom left) to add the remote hosting server
  7. Under "Basic", fill in the FTP account information (for security purposes, the specifics will be provided on paper and not online)
    1. Click on "Test" to confirm that you can connect to the server
    2. If the connection was unsuccessful, double check to make sure your spelling and capitalization is correct
    3. After a successful connection, click on "Save" to save the server settings
  8. Click on "Save" on the bottom right to save the website to Dreamweaver

Replacing Placeholder Images with Your Own

Image Requirements

  • PNG format
  • Width of 500px
  • Recommended name format:
    image1.png → image10.png

Easiest Replacement Method

If your image files are saved in the same format, with the same name, you can switch out the images easily in Finder

  1. Drag and drop your images into the website's "Images" folder
  2. When the notification dialog warns that the names are the same, choose "Replace"

Changing the HTML to Use Different Image Names

If you would rather use your own naming system or are using a different file format, you need to edit the HTML to change the image names. For each image you need to change the name twice - once for the larger image and once for the small thumbnail image.

  1. Open the portfolio.html page (double-click on the name in the file manager)
  2. In the Code View, use CMD-F to search for the image you are changing - ie. image1.png
  3. Delete the original name and replace it with the correct file name/format (ie. image1.png → editorial.jpg) and make sure to keep the rest of the images path the same (ie. "images/...")
  4. Use the right/left arrows to the right of the search field to go to the 2nd image and replace it as well
  5. Repeat these steps as necessary

Replacing Written Content with Your Own

In Design view, find the text you would like to change and type as you would in any text editor. Normal shortcuts apply (CMD-C to copy, CMD-X to cut, CMD-V to paste). If you use Code View instead, be careful not to delete/change any HTML elements or brackets < > - only change the placeholder text.

Customizing Your Template Styles

There are 3 basic ways of selecting parts of the HTML to change the appearance:
  1. Element name - any element name can be used as a selector (main, p, img or etc.)
  2. Class - a type of identifier that can be added to the opening tag of multiple elements (class="name") and then used in the CSS as a selector, by putting a period in front of the class name (.name)
  3. Id - a unique identifier that can be used only once on the page, is also placed in the opening tag of an elmenent (id="unique_name") and then used in the CSS as a selector, by putting a # in front of the id name (#name)

Add id's and classes into your HTML when necessary. Learn more here.

Adding or changing the CSS

The visual styles (colors, fonts, alignment & etc.) can be changed in the stylesheet. The stylesheet linked to all of your webpages is called style.css. If an HTML page is open, you can click on the linked stylesheet at the top of the page to open it. You can also double-click on the name in the file manager.

All CSS follows the same general synax:
selector {property:value;}

Multiple properties and values can be part of a single stlye, within a pair of {} brackets. There can also be multiple selectors, with commas inbetween. Learn more here.

Font Color

selector {color: value;}
ie. header {color: lightblue;}

Color values can be written as the color name, hex#, rgb or rgba values. Only specific color names will actually work. To find a specific color, try going here.

Background Color

selector {background-color: value;}
ie. header {background-color: rgba(0,0,0,.4);}


selector {font-family: value, generic;}
ie. h1 {font-family: 'Times New Roman', serif;}

Generic fonts are a backup in case the chosen font is not accessible. Generic values include: cursive, serif, sans-serif, fantasy, and monospace. A generic font will not necessarily be the same from computer to computer.

If a font name is more than one word, quotations must be placed around the name. When the font name is a single word, quotes are not necessary.

Uploading to the Internet with FTP

  1. Under "Local Files" (in the right sidebar in the "Files" tab), click on the name of your website folder to select it
    Local files image is missing
  2. Click on the plug icon to connect to the server
  3. Click on the up arrow to upload your folder
    Connect and upload image is missing
  4. Click on the plug icon to disconnect from the server

You can upload individual files the same way - but by clicking on the file name instead of the entire website folder. Always test your webpages after uploading - make sure the images and styles display as expected.