Embed Size (px)
Citation preview
Create Your Own Webpage
Fun with images
• Today we’ll cover– Working with images
• Including an image on your page• Making the image a link• Editing images (maybe)
– Using background images– Using frames (if we have time)
Including images on your page
• Find an image– Google Images Search
• Go to www.google.com• Click “Images” (top left corner)• Type in your search term
– Flickr www.flickr.com (second choice)• Type in your search term• Select and image and click on it• Under “Additional Information” observe the rights
limitations. – Go to http://flickr.com/creativecommons/ for more information.
Save your image to your flash drive
• Right click on image and select “Save Picture As…”
• Save to your flash drive
• This is the RIGHT way to do it (assuming you have permission to use the photo). You can also LINK to the image on someone else’s server, e.g. <img src=http://www.flickr.com/image.jpg> but especially on private Web sites, this is considered stealing bandwidth.
Rename photo to a simple filename
• Start Programs Accessories Windows Explorer
• Select E:\ (Traveldrive)
• You should see yesterday’s files and the photo you download
• Right click on photo, select rename and call it photo.jpg (keeping it simple so it’s easy, you don’t have to rename in the future)
Add image to your pictures.htm file
• Open up pictures.htm in Notepad (File Open)• Use this code: <img src=“photo.jpg”>• Save and use web browser to check your work. • Add additional text or HTML coding if you wish:
– Add additional text around the images, using <p> and <br> to create spacing
– <center><img src=“photo.jpg”></center>– <img border=1 src=“photo.jpg”>– <img width=200 height=400 src=“photo.jpg”> use
with care
Use a thumbnail image as a link.
• Open up index.htm file in Notepad (FileOpen)• Use this code: <a href=“pictures.htm”><img
width=100 src=“photo.jpg”></a>• Save & use web browser to check your work.• Change width or height to fit in your page
design, i.e. a row of same height images = buttons
Photo storage websites
• If you select a web host that limits your storage space or bandwidth, consider using flickr or photobucket to host your photos– Link to the images directly (OK with a reference
back to flickr)– Send web site viewers to Flickr or Photobucket
using links or linked images
Editing Images
• Consider using Adobe Photoshop if you want to do more advanced work with images.
• We’ll use Microsoft Office Picture Manager, which appears to be packaged with many recent Windows operating systems
• Right click on photo.jpg
• Open With Microsoft Office Picture Manager– If your images show a red icon in file manager, you
can double click on that image and it will automatically open in Picture Manager
Using Picture Manager
• Click “Edit Pictures” from top bar– Experiment with some of these options. Ones to
know: Crop, Rotate and Flip, and Resize– Experiment with these options. Ctrl-Z to undo.
Adobe Photoshop
• Create macros to quickly perform tasks on many pictures at a time, (e.g. a professional photographer loading many pictures onto a web site for client preview)
• Ability to “photoshop out” problems in pictures or use to change image content
• Many more features that allow you to do things like create logos, buttons for your web site, etc.
• Photoshop = $$$, not necessary for most users!
Adding a background image
• This is a touchy subject, as many background images affect readability!
• Let’s all go to http://www.backgroundcity.com/– At home, you can Google search: “free background
images”
• Browse and select a background image. – Recommendations: Select a light colored
background, not much contrast in the image so can use a dark color for your font.
Adding a background image
• Download the chosen image. – Click on preview– Right click on background, “Save Background As…”– Save as Background
• File type (file extension) will likely be .gif Don’t change it!
• In Notepad, open up index.htm
• At top of the page, use this code <body background=“background.gif”>
• Save and check your work in Internet Explorer
Other options for using backgrounds
Go to http://www.snotrocketscience.com/cfk
Click on HTML Shortcuts
Copy shortcut #1 and paste into index.htm
<body background=“background.gif”>
<table border=1 align=center width=80% height=100% bgcolor=white>
<tr valign=middle><td>
Everything you worked on before goes here.
</table>
The result: A table
Tables are more useful than that
<table border=1>
<tr>
<td>This is cell 1</td>
<td>This is cell 2</td>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</table>
• Starts your table• Starts a row• Creates a cell• Creates another cell• Starts a new row• Creates another cell• Creates another cell• Ends table
More properties for your tables
• Change table border size: <table border=5>, <table border=0>, etc. – With table border=0 you can use a table to position
text
• Change table background:– <table bgcolor=white>– <td bgcolor=green> etc to change individual cells
• Change relative size of cells:– <td width=80%>wide cell</td>– <td width=20%>narrow cell</td>
IF CLASSTIME PERMITS…
Using Frames
• Open your web directory in file manager.• Rename index.html to main.htm
– Right click on file and select “Rename”
• In notepad, create new file (File New) • Type in a few things you’d like to have as links in the
future, separated by <br>– About Me <br>– Pictures <br>– Location <br>
• Save as side.htm • Create a new file in Notepad
Using Frames<FRAMESET cols="20%,
80%"><FRAME name=side
src="side.htm"><FRAME name=main
src="main.htm">
<NOFRAMES>Main page: <a
href="main.htm">Sidebar: <a href="side.htm"></NOFRAMES>
</FRAMESET>
• Defines the relative width of each part of your frame.
• Links to your pages (1st link is 20% wide, second link is 80%)
• Provides coding in case people are using a browser that doesn’t recognize frames. Fairly unlikely.
• Ends your frameset
Edit your sidebar
• So far, all links we have created open in the same window.
• For your frames page, you’ll want the links in your sidebar to open in the main part of your webpage.
• Open side.htm and create a link:– <a href=“pictures.htm” target=main>Pictures</a>– Without specifying the target, your pages will open
in the same area from which they are linked.
More to Do
• Find and include other images
• Expand your sidebar to include links to the pages we’ve created so far
• Create more pages and link them from your sidebar
• Experiment with your frameset—change relative width and placement of frames
