So you want to build a website

1
So you want to build a website?

• Presented by
• Jasmine Trabelsi, Experimental Media
• http//www.experimentalmedia.com/class

2
Overview Agenda

• Session II HTML Part II
• Adding Hyperlinks and Email Addresses
• Creating Lists
• Images and Graphical Elements
• Image Maps
• Using Tables
• Homework 2
• QA and Independent Work

3
Introduction

• FrontPage
• Create a Page
• File structure
• Basic toolbar functions

4
Getting Started

• It is important when commencing a new site with
  Front Page to create a web correctly.
• OPEN FrontPage
• STARTgtProgramsgtMicrosoft FrontPage

5
Getting Started (cont)

• The window shown here will be shown immediately
  you open Front Page.
• If you have an existing Front Page you may open
  it.
• If you wish to create a new Front Page web you
  may wish to use the Wizard.
• If you'd prefer to create your own pages select
  Blank Front Page
• (as shown circled in red)

6
(No Transcript)
7
(No Transcript)
8
Try it Yourself

• Type on the blank page just like you would in
  Microsoft Word.
• Notice the folder list to the left. This is your
  file structure you should find your folder from
  last week.

9
(No Transcript)
10
Toolbars

• WSIWIG-(What You See Is What You Get).
• The lower row of tools are similar to those found
  on Word Processing applications. Rolling the
  mouse over an icon and its operation will be
  displayed in a pop-up.You can immediately begin
  your page now by typing just as you would on a
  word processor.

11
Lower Row

• The lower row of tools are similar to those
  found on
• Word Processing applications. Rolling the mouse
  
• over an icon and its operation will be
  displayed in a
• pop-up.You can immediately begin your page now
  by
• typing just as you would on a word processor.

12
Upper Row

• The upper row is more specifically related to
  web building tools.

13
Web Page Tools
The first set of tools on the upper bar are
fairly simple and explanatory. The Preview in
Browser is especially useful for checking how the
page will look in different browsers. The
second set are probably even simpler. The
business end of the toolbar.
14

Show Front Page Explorer is a shortcut to
Explorer.This allows you to view the web and all
its hyperlinks and allows you to sort your files
efficiently. The To Do list is just that ... a
list of things you have listed "to do".
15
Try It Yourself

• Create your own page
• Add your content from last weeks homework. Make
  sure you use color (bg color) and fonts. Use your
  examples for a guide.
• Name your file as index.html

16
Tables

• Tables allow you to control the look of your page
  as they stipulate where on a page text or images
  etc will appear in relationship to the other
  parts of the page. Without tables you cannot
  place images and text side by side (at least not
  so that they look attractive)
• Decide on the number of Columns (across) and Rows
  (down) you require and highlight that number of
  cells in the open window OR you may prefer to
  select Table from the menu bar at the top of the
  page and then Insert Table.

17
Tables (cont.)
A window similar to the one on the right will
open. Here you may choose your number of Rows
and Columns (Size). The Table this text and the
graphic of the open window are in is 2 X 2. Each
"box" is called a cell, thus this table is 2
cells across and 2 cells down. In Layout you
have the options of placement on the page
(Center, Left, Right). Border Size - the border
around this table is 5. For NO border type
0. Experiment with Cell Padding and Spacing to
discover what changes do here.
18
Tables (cont.)

• Width refers to the width of the web page the
  table is placed in. This table for example is 80
  of the width of the page - thus it may be bigger
  or smaller in actual pixels depending on the
  width of the actual page or even the screen it is
  shown on.
• To make alterations to your table select Table
  Properties (or Cell Properties) from the Menu
  Table. Here you can adjust width, alignment,
  border size, colour etc. You can do similar with
  each and every single cell in Cell Properties.
• TIP Mac users may not be used to having to click
  on APPLY as well as OK..
• Do this where-ever it shows up!

19
Inserting and Deleting Cells

• You may also insert cells, rows, columns or even
  whole tables inside other tables, cells etc.See
  under Table (note the cursor must be inside the
  table, cell you wish to adjust for the menu to
  show)
• To delete a cell, column, row or table, place the
  cursor inside the cell or table etc, choose
  Select Cell etc - it will be highlighted allowing
  you to delete it by pressing the Delete key.

20
Homework 2

• Create a home page with the content for your
  site. Write an intro to the reader. Welcome to
  Daras Flowers, Annas books, etc.
• Think about color. Do not forget color makes a
  statement about your brand.
• Before the next class, you should have completed
  the index.html (Welcome) page and the interests
  page (to be named interests.html).
• If you did not bring images in today, you must
  have it for next week in order to insert them
  into your site.