Web Site Design

1
Web Site Design

• Malden Public Library
• YA Summer Reading Program
• Ms. Adams

2
Online Safety

• Dont use your real name (NarutoFan27)
• Dont post personal information where people can
  locate you
• Dont post pictures of yourself
• Dont tell anyone your password

3
Be Safe

• Be as general as possible
• Draw a caricature of yourself.
• Make a picture of your favorite quote.
• Take a picture from a free clip art site.
• Take a picture of yourself and use photo editing
  software to make it not look like you anymore.

4
Compare

• Hi, my name is Isabella DiMarco and Im a 14 year
  old year who lives in Malden. If you want to be
  my friend, text me at 781-324-0218.
• Hi, my name is CuteSkaterGirl and I live right
  outside Boston.
• Hi, my name is HeavyMetalFan88776 and I live in
  Massachusetts. I like listening to metal a lot.
  I went to see Metallica last year and they were
  awesome. If you want to talk to me about metal,
  send me an email at johnnylovesmetal_at_hotmail.com.
  

• I hate homework sooooo much. My stupid teacher
  Ms. Adams gives us like a ton of work all the
  time. I mean, were only in eighth grade, duh.
  I had to go pick up Suzi, the girl I babysit for,
  from day care and it is a long walk from Cheverus
  and I thought my backpack was going to bust open.
  
• I HATE my boss. Hes such an idiot. If it
  werent for the fact that I owe my dad five
  hundred dollars for my car insurance, my
  waitressing days at China Wok would be over.
• I am so mad at AZ for breaking up with TM. She
  cried all through lunch even though we tried to
  tell her hes a jerk.

5
Things to make a website about

• Your favorite hobby
• Your poetry
• Your favorite TV show or movie
• Life in general

6
Good Web Design

• Pick colors that look good together
• Make sure the text is legible.
• Only use simple fonts (Times New Roman, Arial,
  Helvetica)
• Make sure your images are small
• Dont use animated GIFs or scrolling marquees
• Dont use frames
• Dont use too many different fonts (one for
  headlines, one for text)
• Dont put too much text on one page
• Make sure your navigation is clear and consistent

7
Lets Make a Website

• What you see is what you get (WYSIWYG)
• Build a website while looking at what it will
  basically look like.
• First, well take a look at a WYSIWYG Editor and
  what you can do with it.
• Then, well look at the different parts of a
  sample website and then youll learn how to
  recreate it.

8
My Awesome Website

• Header
• Navigation
• Main Text

9
Layout

• Make a layout using tables
• This layout has two tables.

10
Header

• The website has an image at the top that says the
  name of the website. This is a good place to
  experiment with fonts.
• If you are using text, you can only use fonts
  everyone has on their computer (ie. Arial, Times
  New Roman). If its an image you can use
  whatever you want.

11
Navigation

• You can make your navigation using text or images
  and links.
• You can put it at the top or the side of your
  website.
• You want the navigation to look the same on all
  of your websites so that it is easy to find.

12
Main Text

• You can write whatever you want. In this example
  we also included some pictures.

13
Make a Layout

• Create a Table with two rows and one column Make
  the width of the column 800 px and the border 0.

14
Make a Layout

• Put your cursor in the bottom row and click
  create table. Make a table with one row two
  columns. Make the width of the column 800 px and
  the border 0.

15
Insert an Image

• In the top row of the website we want to put an
  image. Click on Image and then Choose file.
  Click on title.gif. Type in something under
  alternate text. That shows up if the image
  doesnt load or for blind people with screen
  readers.

16
Navigation

• In the bottom left half, we will put our
  navigation. For now, put the following
  catagories
• Home
• Links
• Games
• Blog

17
Navigation

• Navigation isnt useful if it doesnt take you
  anywhere. Turn those words into links by
  highlighting each word, clicking on the Link
  button, and typing the name of the file.
• Home home.html
• Links links.html
• Games games.html
• Blog blog.html

18
Colors

• You can change the background color of the entire
  page, tables, or table cells.
• Under format, click on table cell properties or
  page colors and backgrounds.
• Choose colors that will look good together.
• It is usually a bad idea to change the color of
  links since people are very familiar with them.
• If you do change the link color make sure that
  the colors are different for link text versus
  visited links.

19
Make New Pages

• Dont start from scratch
• Go into the Web Design Class folder on the
  desktop
• Copy the index.html file
• Paste it three times
• Rename the files links.html games.html
  blog.html

20
Links Page

• Open links.html
• Make a link to your favorite website like you did
  for the navigation
• Insert google.gif and change that to a link in
  the image menu. Do not check the box for border.

21
Games

• Go to http//www.addictinggames.com
• Click on Embed Games
• Find a game you like and copy the code that is
  underneath it.
• Other games websites may have similar codes.

22
Games Website

• Open games.html
• Click in the bottom right part of the table.
• Delete the text thats in there.
• Click on Source (tab at bottom of screen)
• Dont click anywhere else unless you need to
  scroll. Paste the code there.
• Hit control-S to save and go back to Normal
• You may not be able to see the game. Go into the
  folder and double click on games.html to open it.
  The game may be too wide to fit in your table
  nicely.

23
Blog

• Even though we made a website for your blog, I
  would not recommend using it.
• Instead, sign up for an account with blogger or
  live journal. This makes managing your posts
  easier.
• Blogger is best if you are writing about topics
  anyone can read about, like TV shows or movies or
  books.
• Live Journal is best if you are writing about
  yourself. You can Friends-Lock your posts so
  only people you know in real life can read them.
• You need to be 14 to sign up for these services
  unless you have permission from your parents.
• If you do create your own blog, make sure you
  change the link in the navigation to your new
  address. Use the full address
  http//rockergirl27.livejournal.com

24
Basic HTML

• Use Tags to Build a website
• This is a website
• This is the header
• This is the title
• This is the body
• This is a paragraph
• 
  
  Insert a line break
• Change the font
• Link to this
• This is a picture

25
The Most Basic HTML Only

• Awesome Website
• This is my super cool website.
• If you want to see another website, go hrefhttp//www.maldenpubliclibrary.orghere./p
• dog
• altAnother picture of my dog
• 
  Click on that picture to see a website about
  my dog.

26
Create a table in HTML

• Hi
• Whats Up?
• Fun!
• Tables

Table Heres a Table TR Heres a new row TD
Heres a new column
27
Help Yourself

• Start out using a WYSIWYG editor. Learn HTML to
  fix things that you cant do with the editor.
• Learn more HTML as you go. Best website
  http//www.lissaexplains.com

28
Web Hosting

• Sign up at http//www.bravenet.com