Workshop 14-1
Web Design / Dreamweaver

Complete the in-class Workshop

Create the framework for a website for the same artist you used for Project 3

Goals of this Workshop:

1. Create a new blank BOOTSTAP html5 file
2. Add a NAV bar
3. Style the NAV bar
4. Add a Header
5. Add a Main
6. Add a sticky Footer
7. Create a page with a Carousel
8. Create and Insert a Favico
9. Insert a YouTube video using the EMBED code

What will be created:
Instructor's Example

Instructions for the "home" page:

  1. Work directly to your USB
  2. Create a new folder: lastname_workshop14-1
  3. Create a New blank BOOTSTRAP html5 file
  4. Save AS: index.html
  5. Create and Link a new CSS file (css/styles.css)
  6. Choose the theme colors for your site
  7. Insert a NAV bar into your page - Insert > Boostrap Components > Navbar (fixed to the top)
  8. Customize for 3 links (home, bio, slides), and in the Branding - Add your Artist'sname from Project 3
  9. Style with the Bootstrap NAV bar generator.
  10. Insert a Header box under Insert > HTML > Header
  11. Insert a Main (with Lorem Ipsum - 5 sentences at least. You can drag from Sniptets > HTML_Snipets or copy and paste from the Lorem Ipsum link) Lorem Ipsum Generator
  12. Add a sticky Footer: click in the code right after the </main> and insert an html "footer" in the Insert Panel
  13. Open your .css file, click after your last rule (most likely the main or p)
    Find the option for "sticky footer" or "fixed footer" in the CSS_Snipets folder in the Snippets Panel. Double-click the icon in the Snippets Panel and new style code for #footer will be inserted. Remove the "#" and you are good to go.

Instructions for the "bio" page:

  1. With the index.html open, Save AS: bio.html
  2. This page will have a Responsive YouTube video inserted
  3. Find a YouTube video that talks about either your artist or the type of art that your artist worked in (ie, cartoon, street graffiti, etc)
  4. Click on Share > Embed > copy just the embed tag src tag. For example:
    src="https://www.youtube.com/embed/tiqjKyjgQUY"
  5. Your source code will be inserted in place of the placeholder src link.
  6. In the "main", bio text about your artist will be inserted (though Lorem Ipsum is fine for this workshop)

 

Instructions for the "slides" page:

  1. With the index.html open, Save AS: slides.html
  2. In Code View, Remove the <main> section
  3. Select the <header> section
  4. Insert Panel > Bootstrap Component > Carousel
  5. Click in your code, and then click ONCE on the Carousel option in the Insert panel
  6. By default the carousel comes in with 3 placeholder images
  7. Add 1 image of your own into this section
  8. Adjust the Carousel so that 4 images display
  9. *You will eventually add 6 images of your artist including title and year.

 

Instructions for the "favicon":

  1. Create a "favicon" for your site (Customize based on your artist from Project 3)
  2. Initial image should be 260 x 260px and can have transparency (or not)
  3. Take the image though the Favicon Generator
  4. Files and Code will be generated
  5. Copy the generated code into the <head> section of each page on your site
  6. Drag all files generated into the site root

 

Instructions for inserting a YouTube video:

  1. Go to YouTube
  2. Conduct a Search for your Artist (or a video that is close)
  3. Copy from the Embed section under "Share"
  4. Make sure you are only copying the actual video link and not the entire <iframe> code
  5. Paste into the Header box or "Hero" image section

 

Instructions for inserting a Hero image on the index.html page:

  1. Find a good image of your Artist's
  2. Resize in Photoshop for a width of 3000px and height of between 500px - 1000px
  3. Insert the image into the <header> section on index.html
  4. Apply .img-responsive to the img. either type in the class in live view or:
    Insert > Bootstrap Components > Responsive Image

 

Links used in this tutorial:

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_workshop14-1

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