Designing Websites

1
Designing Websites

• Using HTML and FrontPage

2
A Typical Webpage
View Source
A webpage is a text file containing instructions
to tell a computer how the page should look.
3
Creating Webpages

• You can create a page by hand, using a
  text-editor like Notepad
• You can use web-based tools, eg Blogging/Content
  Management Systems to store your data and
  present it in different ways.
• You can use website authoring software,eg
  FrontPage, Dreamweaver to create a page, and
  upload it when you are ready

4
HTML and FrontPage
FrontPage is an editor that enables you
to create the HTML code used to make webpages
5
The HTML for our first page
HTML tags are usually in pairs
Between the ltheadgt and lt/headgt tags, you find
information about the page
Between the ltbodygt and lt/bodygt tags, you
find instructions for displaying text, pictures
etc...
6
Adding text to our first page
Paragraph styles
We can use different heading sizes from lth1gt
Heading 1 (the biggest) to lth6gt Heading 6 (the
smallest) to make our headings stand out
7
Using HTML to format our text
To format our text quickly, we can use a
cascading style sheet (CSS) page
8
Creating a blank stylesheet
We can choose a ready-made template, or we can
make our own...
9
Selecting styles to modify
The computer displays a sample to show how
the text will look, as well as the instructions
it uses for the web browser.
We can look at two lists of styles. The original
tags, and the ones we have changed.
10
Changing formatting for a style
We can change several different attributes for a
paragraph style
11
The Font Tab
As well as the size, style and colour of a
font, there are other effects we can choose...
For the background, border, line-spacing and
alignment, other tabs can be selected
when modifying a style.
12
A CSS file
Clicking on the Style toolbar allows you
to continue modifying styles
13
Linking to a CSS file
To use a CSS file, you must first link to it from
your HTML file...
14
Multiple stylesheets?
If you needed to, you could link to more than
one stylesheet!
15
Linking code for stylesheets
The code for linking to a CSS file is added to
the ltheadgt by FrontPage
16
Previewing a page
The page preview tab will automatically show our
page with all the new CSS formatting
17
Adding a picture
The ltimg srcgt tag will display a picture in
our page. It can be modified by using height,
width, border and alt within the tags.
18
Picture Preview
One way to change a page's layout is to use tables
19
Adding a hyperlink
Hyperlinks make a webpage much more useful than
a printout
20
Absolute and Relative URLs
We don't have to link to just web pages.
For a page in the same directory as this file,
just the filename would be enough but watch
out for upper/lower case letters!
21
Following links
You can test your page to see if the links you
have made actually work
22
Tables!
A table doesn't have to be used just for
tabular data. We can also use it to arrange
items on a page to look more interesting.
23
The table so far...
You can drag and drop text just like you would
with a word-processor
24
Modifying a table
Once a table is made, you have complete control
of the way both the entire table, or individual
cells are displayed.
25
Table Properties
26
Our HTML code
27
A final preview of our page