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
- download starter files
- download Supersized source
- download bootstrap master templates
- extract all zip archives and merge into "html/e?_slider" folder
- launch dreamweaver
- site > new site: site name=e?_slider;
local site folder=faa999/gds220/html/e?_slider; export STE file
- dreamweaver: site > advanced > recreate site cache
- copy "/~bootstrap_master/examples/starter-template/starter-template.css" to root folder
- rename as "slider-test.css"
- copy "/~bootstrap_master/examples/starter-template/index.html" to root folder
- rename as "slider-iframe.html"
- file > preview in browser (opt+F12 and cmd+F12)
Working with the Supersized system
- open "/supersized-develop/slideshow/slide.html"
- examine code, delete unneeded content
- edit slide images, titles; remove thumb, URL
- remove thumbnail navigation, "thumb-tray", "play-button", "tray-button"
- 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
- window > css designer: add selectors (source=<style>,
media=max-width=767):
• #controls-wrapper: height=80px
• ul#slide-list: margin-top=28px
- save as "slide.html" (in root folder)
- file > preview in browser (opt+F12 and cmd+F12)
- open "/supersized-develop/slideshow/img/nav-bg.png" in Photoshop
- image > image size: 2x88px; save as "nav-bg-88.png"
Creating an Iframe slider (fixed width)
- open "slider-iframe.html"
- replace <div.starter-template> with:
<iframe src="slide.html" frameborder="0" width="100%" height="600"></iframe>
- window > CSS designer: add selectors (source=<style>):
• iframe: margin-top=30px
- save, file > preview in browser (opt+F12 and cmd+F12)
Creating an Iframe slider (proportional)
- save as "slider-iframe-proportional.html"
- browse to howchoo.com
- copy/paste iframe code (retain src)
- save, file > preview in browser (opt+F12 and cmd+F12)
Creating a fullscreen slider
- save as "slider-fullscreen.html"
- delete <div.container>
- merge code from "slide.html"
(note duplicate jquery code)
- save, file > preview in browser (opt+F12 and cmd+F12)
Grading
- publish all 3 files (see separate lesson)
- make links from your process page to this assignment