December 1, 2017 Web Design
Drop-down Menus We will create a bare bone version the drop-down menu on page 487-89. In addition to the presentation that you experienced earlier in the semester, this will give you a fundamental understanding of how it works. To learn to make fancier dropdowns, you can: learn through tutorials, Search for “CSS3 generators” to generate automatically online. Search for dropdown menu programs. I wanted to show you a quick online version, but most require you to log on or to download the software… too much to do in the short time that we have.
SEO Tips (Search Engine Optimization) By Nick and Tony
Starting HTML and CSS /* dont think i need <!DOCTYPE html> <html lang="en"> <head> <title>Skeleton dropdown </title> <meta charset="utf-8"> <link href="dropstyles.css" rel="stylesheet"> </head> <body> <div id ="wrapper"> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="coffee.html">Coffee</a></li> <li><a href="cuisine.html">Cuisine</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="http://www.justnowhere.com">Contact</a></li> </ul> </nav> <header> <h1>Hello World</h1> </header> <p>This is a sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. </p> </div> </body> </html> /* dont think i need header, main, nav, footer, figure, figcaption { display: block; } */ body { background-color: #66484d; } #wrapper { width: 800px; min-height: 400px; background-color: #ffe9ec; margin: auto; header { background-color: #ffd3d9 ; min-height: 125px; p { padding: 10px; nav { background-color: #bb0033; text-align: right; padding-right: 5px;
Image Gallery To follow-up on the presentation on photo galleries, we will do the exercise on page 493. To save time, we’ll use their files, but for a richer experience, you should later try it with your own pictures and make them around 600px or some other moderate size. Start by creating a folder called gallery2 Copy images from chapter11/starter/gallery Copy the template starter from below: <!DOCTYPE html> <html lang="en"> <head> <title>Skeleton Photo Gallery</title> <meta charset="utf-8"> <link href="dropstyles.css" rel="stylesheet"> </head> <body> <h1>My Image Gallery </h1> <div id =“gallery"> </div> </body> </html>
Parallax Design Sorry that we will not get a chance to explore this one more fully. I see that you were highly engaged in the presentation on Parallax design. However, it would take a longer time to follow up on it. I suggest that you try the simple one on w3schools to get the foundational aspects of how it uses layers, positioning, transitions, etc. https://www.w3schools.com/howto/howto_css_parallax.asp Then search for beginner tutorials to make it fancier. I will continue to explore as well.
C’est tout, folks!