ALL ABOUT IMAGES “3 Day Design Boot Camp”
Day 1 Procedure:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Day 2
Vocab Part 1:
Correct way to insert an IMAGE on the HTML page:
<img src= “name.jpg” alt= “name”/>
(Adding a width/height to this on HTML)
<img src= “name.jpg” alt= “name” style=" width:42px; height:42px;” />
(Adding a width/height to this on CSS)
img { width: 42px; height: 42px; }
Vocab Part 2:
Making an Image a HYPERLINK!
Links:
<a href="url">link text</a>
Instead of the normal link text we will insert the image.
<a href="url"><img src=”dog.jpg”/></a>
Step1: Go to the home.htm page that we created yesterday. In the unordered navigation, link "unopened.jpg" as a hyperlink.
<li><a href="#"><img src="unopened.jpg"/></a></li>
Step 2: Create a brand new HTML document and save it as "snap1.htm" in your Snap Chat folder. On this page link the image "snap1.jpg" in <h1> tags in the body of the document. Change the background color to yellow.
<body style="background-color:yellow;">
<img src="snap1.jpg"/>
</body>
Step 3: Return to the home.htm page and link to this new page by replacing the pound sign or hash tag we inserted after a href to "snap1.htm." Add the text "H-F High School" right after the closing link </a> bracket.
<li><a href="snap1.htm"><img src="unopened.jpg"/></a>H-F High School</li>
Insert the image "
Correct way to insert an IMAGE as a background on the CSS page:
body { background-image: url(“ name.jpg”);}
Correct way to keep background-image from “tiling”:
body { background-image: url(“ name.jpg”);
background-repeat: no-repeat; }
Step 4: Insert the background image "background2.png" to the CSS sheet. Make sure you keep it from tiling.
body{
background-color:yellow;
background-image:url(background2.png);
background-repeat:no-repeat;
}
*the image for a background cannot be resized from Dreamweaver. Instead, we must open the image in Photoshop and change the size.
Photoshop Correction Basics:
*Tutorial Items in Folder in “photos (hf-storage)”> “Web Student”
or on website as a download
Day 1 Procedure:
- Let’s start by creating a new folder in your H-Drive (in your web design folder) called “SNAPCHAT.” To do this please open your H-Drive and using a right click>new folder to create a new folder.
- Open up Adobe Dreamweaver from your start menu and create both a new html and css document.Name the html document “home.htm” and css page “snap.css.”
- Set up the basic HTML structure for your home.htm page including the doctype, head, body and footer.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html> - Create a link to the snap.css page to your home.htm page.
<link href="snap.css" rel="stylesheet" type=”text/css”/> - Let’s make sure the pages are linked.Exit out of both and open up just the HTML page. Does the CSS page appear with it?
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- Change the background color to the entire body of your web-page to yellow.
- Return to the HTML page and add in a header and article to the body of the document.
<body>
<header>
</header>
<article>
</article>
</body> - Inside the header will be the title of your webpage. This will be placed in an h1 heading. “SnapChat”
- Inside of the article will be an unordered navigation list with 5 starting list elements. Call them “List Item 1” etc.
- Return to the CSS page and change the title color to white.Change the font to a new font of your choice.
- Also on the CSS page, add a background color to the navigation, eliminate the underlines and bullet points from your list and add a hover color of grey to the list elements.
(End of Day 1)
Day 2
Vocab Part 1:
- Use the HTML <img> element to define an image
- Use the HTML src attribute to define the URL of the image
- Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
- Use the HTML width and height attributes to define the size of the image
- Use the CSS width and height properties to define the size of the image (alternatively)
Correct way to insert an IMAGE on the HTML page:
<img src= “name.jpg” alt= “name”/>
(Adding a width/height to this on HTML)
<img src= “name.jpg” alt= “name” style=" width:42px; height:42px;” />
(Adding a width/height to this on CSS)
img { width: 42px; height: 42px; }
Vocab Part 2:
- Use the <a> element to define a link
- Use the href attribute to define the link address
Making an Image a HYPERLINK!
Links:
<a href="url">link text</a>
Instead of the normal link text we will insert the image.
<a href="url"><img src=”dog.jpg”/></a>
Step1: Go to the home.htm page that we created yesterday. In the unordered navigation, link "unopened.jpg" as a hyperlink.
<li><a href="#"><img src="unopened.jpg"/></a></li>
Step 2: Create a brand new HTML document and save it as "snap1.htm" in your Snap Chat folder. On this page link the image "snap1.jpg" in <h1> tags in the body of the document. Change the background color to yellow.
<body style="background-color:yellow;">
<img src="snap1.jpg"/>
</body>
Step 3: Return to the home.htm page and link to this new page by replacing the pound sign or hash tag we inserted after a href to "snap1.htm." Add the text "H-F High School" right after the closing link </a> bracket.
<li><a href="snap1.htm"><img src="unopened.jpg"/></a>H-F High School</li>
Insert the image "
Correct way to insert an IMAGE as a background on the CSS page:
body { background-image: url(“ name.jpg”);}
Correct way to keep background-image from “tiling”:
body { background-image: url(“ name.jpg”);
background-repeat: no-repeat; }
Step 4: Insert the background image "background2.png" to the CSS sheet. Make sure you keep it from tiling.
body{
background-color:yellow;
background-image:url(background2.png);
background-repeat:no-repeat;
}
*the image for a background cannot be resized from Dreamweaver. Instead, we must open the image in Photoshop and change the size.
Photoshop Correction Basics:
*Tutorial Items in Folder in “photos (hf-storage)”> “Web Student”
or on website as a download
- Crop: Crop Tool (scaling/tilting/clone stamp)
- Resize: Image>Image Size>change pixels (save as jpeg)
- Adjustments: LEVELS>Red-drag in arrows, Green, Blue (Merge Layers)
- Color Balance: Image>Adjustments>Color Balance
- Light: Image>Adjustments>Exposure