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 Click “Images” (top left corner) Type in your search term –Flickr (second choice) Type in your search term Select and image and click on it Under “Additional Information” observe the rights limitations. –Go to 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. 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: 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 and to create spacing – –  use with care

Use a thumbnail image as a link. Open up index.htm file in Notepad (File  Open) Use this code: 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 –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 Save and check your work in Internet Explorer

Other options for using backgrounds Go to Click on HTML Shortcuts Copy shortcut #1 and paste into index.htm Everything you worked on before goes here.

The result: A table

Tables are more useful than that This is cell 1 This is cell 2 Row 2, cell 1 Row 2, cell 2 Starts your table Starts a row Creates a cell Creates another cell Starts a new row Creates another cell Ends table

More properties for your tables Change table border size:,, etc. –With table border=0 you can use a table to position text Change table background: – – etc to change individual cells Change relative size of cells: – wide cell – narrow cell

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 –About Me –Pictures –Location Save as side.htm Create a new file in Notepad

Using Frames Main page: Sidebar: Defines the relative width of each part of your frame. Links to your pages (1 st 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: – Pictures –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