Archived copy for reference only
 

 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Dreamweaver: Home Page Slider Options

(Archived from 2019)

Objective

To learn advanced CSS/JavaScript layout techniques by recreating the following sample pages:

Discussion

Although there is some controversy over the use of sliders/carousels for home pages, the technique is very popular. With the right images, sliders can make a good visual impression welcoming visitors to yuor website. Slider images can also be changed quite easily, keeping the home page fresh while maintaining a consistent branding scheme.

Sources: Supersized and howchoo.com

Procedure

Starting a Bootstrap project

  1. download starter files
  2. download Supersized source
  3. download bootstrap master templates
  4. extract all zip archives and merge into "html/e?_slider" folder
  5. launch dreamweaver
  6. site > new site: site name=e?_slider; 
    local site folder=faa999/gds220/html/e?_slider; export STE file
  7. dreamweaver: site > advanced > recreate site cache
  8. copy "/~bootstrap_master/examples/starter-template/starter-template.css" to root folder
  9. rename as "slider-test.css"
  10. copy "/~bootstrap_master/examples/starter-template/index.html" to root folder
  11. rename as "slider-iframe.html"
  12. file > preview in browser (opt+F12 and cmd+F12)

Working with the Supersized system

  1. open "/supersized-develop/slideshow/slide.html"
  2. examine code, delete unneeded content
  3. edit slide images, titles; remove thumb, URL
  4. remove thumbnail navigation, "thumb-tray", "play-button", "tray-button"
  5. window > CSS designer: add selectors (source=<style>:
    • #slidecaption a: color=white, text-decoration=none
    • #slidecaption a:hover: text-decoration=uderline
    • #controls-wrapper: height=60px, background-image=nav-bg-88.png
  6. window > css designer: add selectors (source=<style>, 
    media=max-width=767):
    • #controls-wrapper: height=80px
    • ul#slide-list: margin-top=28px
  7. save as "slide.html" (in root folder)
  8. file > preview in browser (opt+F12 and cmd+F12)
  9. open "/supersized-develop/slideshow/img/nav-bg.png" in Photoshop
  10. image > image size: 2x88px; save as "nav-bg-88.png"

Creating an Iframe slider (fixed width)

  1. open "slider-iframe.html"
  2. replace <div.starter-template> with:
    <iframe src="slide.html" frameborder="0" width="100%" height="600"></iframe>
  3. window > CSS designer: add selectors (source=<style>):
    • iframe: margin-top=30px
  4. save, file > preview in browser (opt+F12 and cmd+F12)

Creating an Iframe slider (proportional)

  1. save as "slider-iframe-proportional.html"
  2. browse to howchoo.com
  3. copy/paste iframe code (retain src)
  4. save, file > preview in browser (opt+F12 and cmd+F12)

Creating a fullscreen slider

  1. save as "slider-fullscreen.html"
  2. delete <div.container>
  3. merge code from "slide.html" (note duplicate jquery code)
  4. save, file > preview in browser (opt+F12 and cmd+F12)

Grading

  1. publish all 3 files (see separate lesson)
  2. make links from your process page to this assignment

BACK TO TOP
Last updated: 5/10/21