Embed Size (px)
Citation preview
Designing Websites
Using HTML and FrontPageUsing HTML and FrontPage
A Typical Webpage
View SourceView Source
A webpage is a text file
containinginstructions to tell a computer how the page should look.
A webpage is a text file
containinginstructions to tell a computer how the page should look.
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
HTML and FrontPage
FrontPage is aneditor that
enables you tocreate the
HTML codeused to make
webpages
FrontPage is aneditor that
enables you tocreate the
HTML codeused to make
webpages
The HTML for our first page
HTML tags areusually in pairs
HTML tags areusually in pairs
Between the <head> and </head>
tags, you find information about
the page
Between the <head> and </head>
tags, you find information about
the page
Between the<body> and </body>
tags, you findinstructions fordisplaying text, pictures etc...
Between the<body> and </body>
tags, you findinstructions fordisplaying text, pictures etc...
Adding text to our first page
Paragraph stylesParagraph styles
We can use different heading
sizes from <h1> Heading 1
(the biggest)to
<h6> Heading 6(the smallest)to make our
headings standout
We can use different heading
sizes from <h1> Heading 1
(the biggest)to
<h6> Heading 6(the smallest)to make our
headings standout
Creating a blank stylesheet
We can choose aready-made template, or
we can make ourown...
We can choose aready-made template, or
we can make ourown...
Selecting styles to modify
We can look attwo lists of styles.The original tags,and the ones we have changed.
We can look attwo lists of styles.The original tags,and the ones we have changed.
The computer displays a sampleto show how thetext will look,as well as theinstructions ituses for the
web browser.
The computer displays a sampleto show how thetext will look,as well as theinstructions ituses for the
web browser.
Changing formatting for a style
We can changeseveral different
attributes fora paragraph
style
We can changeseveral different
attributes fora paragraph
style
The Font Tab
As well as the size, styleand colour of a font,
there are other effectswe can choose...
As well as the size, styleand colour of a font,
there are other effectswe can choose...
For the background, border, line-spacing
and alignment, other tabscan be selected whenmodifying a style.
For the background, border, line-spacing
and alignment, other tabscan be selected whenmodifying a style.
A CSS file
Clicking on the Styletoolbar allows you to
continue modifying styles
Clicking on the Styletoolbar allows you to
continue modifying styles
Linking to a CSS file
To use a CSS file,you must first link to itfrom your HTML file...
To use a CSS file,you must first link to itfrom your HTML file...
Adding a picture
The <img src> tag willdisplay a picture in ourpage. It can be modifiedby using height, width, border and alt within
the tags.
The <img src> tag willdisplay a picture in ourpage. It can be modifiedby using height, width, border and alt within
the tags.
Picture Preview
One way to changea page's layout is
to use tables
One way to changea page's layout is
to use tables
Adding a hyperlink
Hyperlinks make awebpage much more useful than a printout
Hyperlinks make awebpage much more useful than a printout
Following links
You can testyour page
to see if the links you have made
actually work
You can testyour page
to see if the links you have made
actually work
Tables!
A table doesn'thave to be usedjust for tabulardata. We canalso use it to arrange itemson a page tolook moreinteresting.
A table doesn'thave to be usedjust for tabulardata. We canalso use it to arrange itemson a page tolook moreinteresting.
The table so far...
You can drag and droptext just like you
would with a word-processor
You can drag and droptext just like you
would with a word-processor
Modifying a table
Once a table ismade, you have
complete control of the way boththe entire table,
or individual cellsare displayed.
Once a table ismade, you have
complete control of the way boththe entire table,
or individual cellsare displayed.
Table Properties
Our HTML code
A final preview of our page
