Week #14
Note: Kim Hopkins will be joining us today :)
TOWSON WEATHER :
54° - 42°, Cloudy
***Check Homework***
Talk about Student Pages:
https://ryansmithart.com/2023/students.html
- talk about Project #2 & GRADES
examples:
- example_1
- example_2
- example_3
Talk about the "Final Project "
* Branding, identity, & logo design
& Brand, branding, identity...
*Review:
*The Container Class (W3)
Dropdown Menu (W3)
Dropdown Images (W3)
*Responsive Navbar with Dropdown
(W3)
- What's "SmoothScrolling"
<!-- HTML -->
<a class="nav-link" href="#part_2">smoothScroll</a>
<!-- anchor: -->
<div id="part_2"></div>
// jquery & javaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
What's a favicon?
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
More info:
https://seranking.com/blog/what-is-a-favicon/
<link rel="icon" href="favicon.jpg" type="image/jpg">
Or:
ryansmithart.com/favicon.ico
Study for Quiz
File management:
What should you save the first page of your website as?
What's a server?
What's a directory?
What's an IP Address?
What's a DNS?
What's FTP?
In the following URL, what's the domain name, and what's the file name?
http://ryansmithart.com/photos/dog.html
What's the difference between a web browser & a search engine?
<!-- HTML-->
<html>
<head>
<title> my title </title>
</head>
<body>
stuff
</body>
</html>
Paragraph tags
Line Breaks
Emphasis tags
Strong tags
Inserting an image
<img src="images/flower.jpg">
How to create a link
<a href="http://www.npr.org"> NPR News </a>
/ * CSS */
CSS Syntax:
p {color:red; font-family: Arial, Helvetica; }
How to Change the color of your links:
a:link {text-decoration: underline; color: #000;}
a:visited {text-decoration: underline; color: #000;}
a:hover {text-decoration: none; color: #FFF; background-color:#0F0}
a:active {text-decoration: none; color: #000;}
CSS styles can be applied to:
general page elements, CSS Classes, and specific items (ID values).
How do you code CSS Classes and ID values?
p{color:red; }
.title{font-family:Arial Black; background-color:#CCC; }
#footy{height:20px; position:fixed; bottom:0px; width:100%;}
<span class="title"> This is the title </span>
<p>Red Text</p>
<div id="footy"> Footer </div>
What's the difference:
{position:fixed;} & {position:relative;}
What's "z-index"?
What's a Favicon?
What's the hexadecimal code for:
red, green, blue, yellow, magenta, cyan, white, black, light & dark grey
Talk about plagiarism
FUN STUFF:
https://gifrun.com
HOMEWORK:
**Study for QUIZ :)Keep working on your "Final Project "
Examples:
profesional: 1 - 2 - 3 - 4 - 5
students: 1 - 2 - 3
...next week: .gifs!
NOTE:
Please bring an external hard drive or "thumb drive" with you to class.
Note: You will use your (USB) flash drive to move your files from your computer to the desktop computer.
I will also expect you to upload your projects to Towson’s server space (Tigerweb.towson.edu/…).
If you forget to bring your "Thumb drive", and you’re having difficulty uploading your project, you may need some help.
If you need help, please ask for assistance.
If you have a broken or incomplete project, bring it to class anyway.
Required materials for this class:
(1) a flash drive or hard drive: 2GB or more
(some external device to store your work on)
(2) *Personal Web Space (Towson user accounts are fine)
(3) a sketchbook, something not too big, about 8x10 inches
(for notes and sketches)
(4) something to write & make drawings with