Web Design Introduction

Open: Open Office

• File / New / HTML Document
• Save the document in your personal folder as: MyWebPage.html
  HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML is the basic building-blocks of webpages.
  
  

Start Creating Your Page using a table

• Insert / Table ( 3 rows, 2 columns), OK
  
  
• Merge your top 2 cells in the table, into one cell: Highlight the top 2 cells, right click, 'merge'.
  

• Your Header image or pictures will now fit into this top row of the table.
  
  
• Contact Information, pictures, links, text go in the other rows. You decide how you want it, and what you want in it - its your webpage!
  
  
• You can move your divider lines (inside the table) by grabbing and dragging where you want them. Merge cells to create a larger box, or add more rows or columns if you need them for your layout design.
  
  

Create some Links to other websites

• Find a web page you like, and copy the entire URL (web address)
  URL is an abbreviation for Uniform Resource Locator, the global address of documents and other resources on the World Wide Web.
  
  
• URL's will start with http://www....... copy the entire address.
  
  
• Go back to your webpage, put the cursor where you want your link and: Insert / Hyperlink
  
  
• Paste that URL into the pop up box where it says Target
  
  
• In the 'Further Settings' section in the pop up box, where it says 'Text', type in the words you want to be displayed as your hyperlink, instead of seeing the entire URL web address.

Link images with Image Maps
This site uses image maps:
http://www.littleqt.ca/

• Put a graphic on your page, select it.
  
• Edit / Image Map
• Window pops up with your image, select an area you want to be a link
• Type in the URL of where you want it to link
• Apply
• Test in your browser!

Jazz up your page with info and pics!

• Find a cool picture online
• Right click on it and choose, "Save Image As"
• Save it to your personal folder on the LAB drive, don't just copy and paste the image.
• Note: when you go to save it, you can rename the image file to something that makes sense to you, but always leave the .jpg or .gif extension the same.
• Now go back to your web page, put your cursor where you want the image to appear
• On menu bar: Insert / From File /
• Find your image in your folder, select it, OPEN
  
  or
  
  
• Create your own picture using Open Office Draw

Add Some Text...

• Add a paragraph here, describing yourself, your interests, or the webpage you are creating. 
  
  To Edit your text with Bold, or enlarge the font size:
  - Click inside a text box
  - A blue tool bar shows at the top with a few formatting
    options
  - Highlight the text you want to edit and choose a style from
     the tool box
  
  

Add an animated .gif!

• Have 3 versions of a small image ready. You could have all 3 same pictures, but one is tilted one way, one is tilted the other way, and one is straight. When its animaged, it will go through all 3 versions quickly so it looks like it is moving.
• To create, go to OpenOffice Draw
• Open an image, or draw one.
• When ready, Export / as .gif (image.gif)
• Now change it slightly for the next movement, Export / as .gif again,l but name it with a number 2 (image2.gif)
• Do the same for a 3rd and 4th version of movements.
• When all 3 or 4 versions are exported as gif files, go to http://picasion.com
• Browse for your files in the order you created them
• Create animation (be patient while it words)
• If you like it, save your animated gif to your personal folder to use on your website!

or grab an animation that is already made...

• Go to http://www.animatedgif.net/animals/animals.shtml
• This page has a number of animated .gif files
  .GIF stands for Graphics Interchange Format"
  
• Find a .gif you like, right click on it and choose, "Save Image As"
• Save it to your personal folder on the LAB drive
  
• Now go back to your web page, put your cursor where you want the animation to appear
  
• Insert / From File /
• Find your animated gif in your folder, select it, OPEN
• Now your animated gif should be showing up on your page!
  
  

Add some sound using a .wav or .mpg file!

• Go to this page: http://www.wavcentral.com/
• Find a .wav or .mpg file that you like
  A .wav file is the abbreviation for 'Waveform Audio File' , and is highly used on the internet for sound.
  An .mpg is the abbreviation for 'Moving Picture Experts Group' (MPEG) and is a working group of experts that set standards for audio and video compression and transmission.
  
  
• Click on a file and listen to it - if you like it,
• Right click on the NAME of the sound, the actual link
• Click 'Save Link As' and save it to your folder on the Lab drive.
  
• Now go back to your web page, put your cursor somewhere on the page
  
• Insert / Object / Sound
• Find your .wav or .mpg file in your folder, select it, OPEN
• Now your sound file will be embedded on the page
• Test the page to hear your sound:
• File / Preview in Web Browser
  

Preview your page on a web browser

• Click 'File / Preview in Web Browser'
• This will launch Internet Explorer, your web browser, and you can review what you page will look like when its online.
• I will manually add these pages to the website, so you can review them from home!

Be Smart in What Info you Add!

• Do not use your full name, phone number or any other private information on your page
• Make it a fun page.  Add things you think people would like to see when they visit your page
• Keep it tasteful - no bad language, pictures or messages. 

Examples of Good/Bad Web Design

Play with this page, have fun and keep it clean.