lecture 7-web design-joe khalifeh

8/2/2019 Lecture 7-Web Design-Joe Khalifeh

1/32

Web Design

COE 201- Computer Proficiency Mr. Joe Khalifeh


2/32

Outline

Introduction

What is FrontPage

Part 1: Basics

Pages and Webs

Views

View Modes

Page Properties

Part 2: Objects

Pictures

Bookmarks and Hyperlinks(Hyperlink View)

Tables

Part 3: Frames

Creation

Modification

Hyperlinks

Part 4: Advanced Objects

Dynamic Effects

Hit Counter

Photo Gallery

Part 5: Publishing

Online Providers

META Tags

Publishing Techniques

Demonstration

Conclusion


3/32

FrontPage: Pros/Cons

P r o s

What You See Is What You Get(WYSIWYG)

Complete Web Design

Publishing Features

Frame Creation

Hyperlink Verification

Cons

Too much Microsoft

oriented

Perfect for the basics not theadvanced.


4/32

Web Site Organization

The website should be organized hierarchically using thefollowing (or any similar) scheme:


5/32

The FrontPage Interface

View Mode


6/32

Pages and Webs


7/32

Organizing your Website You can use the Folders

View to drag and drop files from and

to your website


8/32

View Modes Design is for editing your page in WYSWYG mode

Code shows you what gets actually written on the page. Split is a combination of the above twomodes

Preview shows you how the page willlook like in your default browser.


9/32

Page Properties

Accessible under File

Page Properties


10/32

Inserting Objects

Most of the insertion operations are located under the Insert

menu


11/32

Inserting Pictures IM POR TA N T

Make sure to put yourpictures in your Web folderor they will not display properly when you post your files online


12/32

Inserting Bookmarks Write down the bookmark name and click on Ok. The bookmark can be calledusing Hyperlinks.


13/32

Inserting Hyperlinks Select the text or object that you want to include in your

hyperlink

Go to Insert Hyperlink

Write down the address of the hyperlink.

Note the Bookmark button to indicate a bookmark rather thana hyperlink

Another local page

Ex: bio.html Another addressEx: http://www.google.com


14/32

Verify your Hyperlinks You can use the Hyperlink

shortcut under Views

to verify

your sites Hyperlinks

Always make sure that you DO NOT have any unlinked or broken links


15/32

Using Tables

Use tables whenever you need to center text irrespective of theclients screen size


16/32

Style Sheets

Used to standardize the way your pages look

Define one style sheet file and apply to all your pages Works like a template


17/32

Frames Creation


18/32

Frames Creation R em em b er : You have a total of n+1 frames

The extra frame is the one that binds the n

framestogether!


19/32

Inline Frames

Insert an Inline

frame inside a frame Same procedure as standard frame.


20/32

Hyperlinks in Frames

Initial steps like a normal

hyperlink

Click on Target Frame; and write or visually select thetarget frame for yourhyperlink.

The hyperlinked page willdisplay accordingly


21/32

Background

Format Background

Change: Background color Hyperlink color Text color


22/32

Advanced Components

Under Insert

Web Component

Several default

components are already installed. Others can be downloaded from the Microsoft Site of any

third-party.


23/32

Marquees

Creates a scrolling text line that follows a certain motion pattern

Note:Marquees can be hyperlinkable.


24/32

Interactive Buttons

Special kind of Hyperlinks, animates a button

W a r n in g :Using such components involves copying a set of extra files that

appear in your Web directory the first time you use it..


25/32

Hit Counters

Places an incrementing counter of your choice on a specific web

page


26/32

Photo Gallery Creates a page containing a photo

gallery of you choice

Use the menu to select: The picture list The layout of the page

FrontPage creates thumbnails forevery picture

Once a thumbnail is clicked, the

real-sized picture appears


27/32

Other Controls

You can insert other objects:

Applets Flash Movies JavaScript


28/32

HTML Optimization

HTML optimization compresses

your HTML code, reducing the filesize Faster download/upload


29/32

Publishing your Website!


30/32

The Tags


31/32

Before you publish Checklist

1.

Make sure that the index.html

file exists

2.

Make sure that all your pages (at least the main ones) have aproper title (and not a generic name like untitled

or new page.

3.

Make sure that you do not have any broken

hyperlinks (use theHyperlink feature)

4.

Make sure that your average page loading time does not go beyond 30-40 seconds on a 28.8KBps connection (use theFrontPages indicator located at the bottom right, in theFrontPage window)

5.

Update your tags!


32/32

Any Questions?

lecture 7-web design-joe khalifeh

Documents