Project 4
Dreamweaver & Web Design

Tuesday 5/23

A Three page website for an artist that is responsive and uses both HTML5 and Bootstrap Components.

After completing Workshop 14-1 you should be just about finished with your website and ready to turn in.
There will just be tweaks to color and any other style choices that you'd like to make.
Please repurpose content from your Project 3.

Instructor's Example

 

BEGIN

by renaming your lastname_workshop14-1
name it: lastname_proj4

 

The following is what should be on each page:

nav bar

  1. Name of the artist in the Branding Section
  2. An "active" color on the correct page
  3. All links in the Nav bar must work
  4. Color should correspond to the rest of the sites color styles
  5. Should be responsive and fixed to the top

 

footer

  1. A sticky footer with the following text:
    Your Lastname MULT 101 Spring 2017

 

index.html

  1. Nav bar (see Nav bar requirements)
  2. Header with a Hero image - set to be responsive
  3. Main. Inside of this should be a Quote. Find a quote from your author to use.
  4. Style the quote with a unique .class that uses an edge web font. Find in the "custom" section for text/font choices. Treat this as a "pull-quote" section.
  5. Sticky Footer (see footer requirements)

 

bio.html

  1. Nav bar (see Nav bar requirements)
  2. Header with a YouTube video inserted. It should be responsive.
  3. Main. Inside of this should be Bio Text. Use from your Project 3 layout. Copy and Paste.
  4. Use a Bio Photo of your artist. Height should be 150px. Does NOT need to be responsive, but should float to the left and inserted before the first paragraph tag.
  5. Give credit to the source of your Bio text by creating a link. This will be an absolute external link targeting a new tab or window.
  6. Sticky Footer (see footer requirements)

 

slides.html

  1. Nav bar (see Nav bar requirements)
  2. Header with a Carousel inserted. This will be responsive.
  3. Use 6 images that your Artist created. (use from your Project 3 layout)
  4. Change the Title and add a Year for each image.
  5. Main. Delete this from the slides.html page. You don't need it.
  6. Sticky Footer (see footer requirements)

 

favicon - OPTIONAL (Extra Credit)

  1. Create a logo or size an image to 260 x 260 pixels. This can have transparency or not.
  2. Upload your image to the Favicon Generator:
  3. Copy and Paste the generated code into the <head> section
  4. Drag all generated files into the site root

 

Test your site and make sure everything works before turning in

 

Links:

Lorem Ipsum Generator
Bootstrap NAV bar style generator
Favicon Generator
YouTube

 

Saving:
All files and sub-folders should be created and managed through Dreamweaver.
DO NOT move or rename files or sub-folders outside of Dreamweaver or links will be broken.
*an exception would be adding IMAGES to a sub images folder before they are linked.


Folder (site root): lastname_proj4

in the Site Root:
index.html
bio.html
slides.html
*all favicon files*
*any associated Bootstrap files*
Sub Sub Folder: css
styles.css
Sub Sub Folder: images
image.jpg