Week #12
DESIGN FOR THE WWW
ART 365 - 002
SPRING 2019
Tuesday, 2:00pm - 5:50pm
CA 4030
Instructor : Ryan Smith
webpage:
ryanSmithArt.com/courses/2019
Talk about:
your class web page
If you haven't already...
add link from your class web page, to your
"Project A" &
"Project B"
&
**Talk about Grades
- site structure and a wire frames
https://www.w3schools.com/CSS/css_dropdowns.asp
link to my CSS & HTML code
Dropdown Menu
Move the mouse over the button to open the dropdown menu.
Note: We use href="#" for test links. In a real web site this would be URLs.
Instax Photo |
socks
| PIXI soap
| Fidget Spinner
* Branding, identity, & logo design
examples:
- christhurman.com
-
studioix.com
-
whirlpool.com
some review...
CSS positioning & other fun stuff
* Source
Also: " floating nav"
<!-- **********************CSS goes in the <head> ********************* -->
<style>
*{
margin:0px;
padding:0px;
}
#nav{
padding:10px;
position:fixed;
top:0px;
width:100%;
height:100px;
background-color:#FFF;
}
#home{
padding:10px;
padding-top:150px;
height:250px;
background-color:#FC6;
width:100%
}
#div1{
padding:10px;
padding-top:150px;
height:750px;
background-color:#6FC;
width:100%
}
#div2{
padding:10px;
padding-top:150px;
height:750px;
background-color:#F9C;
width:100%
}
</style>
HTML:
<div id="nav">
<a href='#top'class="smoothScroll">HOME</a>
<a href="#div1" class="smoothScroll">div1</a>
<a href="#div2" class="smoothScroll">div2</a>
</div><!-- END NAV -->
<a name="top"></a>
<div id="home">
Home / 'top'
</div>
<a name="div1"></a>
<div id="div1">
div #1
</div>
<a name="div2"></a>
<div id="div2">
div #2
</div>
JavaScript:
*JavaScript & link to jQuery
Homework :
Due date: April 23, 2019 (Week #13), next week!