Upload
faris-halteh
View
215
Download
0
Embed Size (px)
Citation preview
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
1/32
Web Design
COE 201- Computer Proficiency Mr. Joe Khalifeh
8/2/2019 Lecture 7-Web Design-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
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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.
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
4/32
Web Site Organization
The website should be organized hierarchically using thefollowing (or any similar) scheme:
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
5/32
The FrontPage Interface
View Mode
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
6/32
Pages and Webs
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
7/32
Organizing your Website You can use the Folders
View to drag and drop files from and
to your website
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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.
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
9/32
Page Properties
Accessible under File
Page Properties
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
10/32
Inserting Objects
Most of the insertion operations are located under the Insert
menu
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
12/32
Inserting Bookmarks Write down the bookmark name and click on Ok. The bookmark can be calledusing Hyperlinks.
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
15/32
Using Tables
Use tables whenever you need to center text irrespective of theclients screen size
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
17/32
Frames Creation
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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!
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
19/32
Inline Frames
Insert an Inline
frame inside a frame Same procedure as standard frame.
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
21/32
Background
Format Background
Change: Background color Hyperlink color Text color
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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.
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
23/32
Marquees
Creates a scrolling text line that follows a certain motion pattern
Note:Marquees can be hyperlinkable.
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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..
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
25/32
Hit Counters
Places an incrementing counter of your choice on a specific web
page
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
27/32
Other Controls
You can insert other objects:
Applets Flash Movies JavaScript
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
28/32
HTML Optimization
HTML optimization compresses
your HTML code, reducing the filesize Faster download/upload
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
29/32
Publishing your Website!
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
30/32
The Tags
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
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!
8/2/2019 Lecture 7-Web Design-Joe Khalifeh
32/32
Any Questions?