Download Module 10

ES 101. Module
MS Front Page Tutorial and
Web Hosting
Last Lectures
• Cascading Style Sheets and Tables
This Lecture
• MS Front Page Introduction
• Web Hosting
Overview
• In the last lectures, you should now be convinced that
coding directly in HTML using a text editor like Notepad
is tedious
• Today, we will discuss how to build your web site directly
on the EECS “webdev” server
– This will be the basis for your grade for the semester
• We will be using Microsoft’s Front Page 2003 application
as the web development environment
– This assumes that you have MS Front Page installed on your
laptop
– You are certainly encouraged to use Dreamweaver of any other
software the you like
• However, I may not be able to get you support
Overview (cont’d)
• It may be helpful to acquire a reference text on
MS Front Page
– Many are available…
• Your web site will be hosted on the EECS Web
Development (webdev) server located in FGH
– http://eecswebdev.vuse.vanderbilt.edu/projects/
• Each of you has been assigned a folder with your
last name, ie.
– http://eecswebdev.vuse.vanderbilt.edu/projects/dozier
Overview (cont’d)
• The EECS webdev server runs Microsoft’s Internet
Information Services (IIS) software with Front Page Server
Extensions (FPSE)
– You can turn these features on in your personal computer
• Please note that webdev is to be used to develop your web
site. It is assumed that you will move this site to a
commercial web host if you put it into production
• Also, be aware that IIS/FPSE has certain other features that
may not be present in other web server software
• The advantage of using IIS is that you edit your web site
on the server, rather than having to edit your site locally
and ftp the changed files to the web server
IIS Server Extensions
• There are advantages and disadvantages of using FPSE
– Advantage: editing on the server, and “extensions”
– Disadvantage: you can create a web site with certain features, and
they will not work on a unix-based web host, such as Helios
• To make things more confusing, Microsoft now has three
different sets of IIS extensions
– FPSE – Initial release used with earlier versions of FrontPage
• Adds the interactive parts of a FrontPage web
– Server Tool Set (STS or Sharepoint 1)
• Released for use with FrontPage 2002
– Windows SharePoint Services (Sharepoint 2)
• Released for use with FrontPage 2003
Is this classical Microsoft, or what?
Web Page Project Requirements
•
We will be developing a frames page for our class
project
– You may also use tables or cascading style sheets
•
The subject matter is up to you
– Any topic is fine, but it must meet Vanderbilt’s “acceptable
use” policy
– I have several Vanderbilt-related organizations that need to
develop their own webs, if you wish to do this
• This gives you the opportunity to work with a real “customer”
•
The frames page should provide the following page
“elements”
– Banner Frame
– Contents Frame
– Main Frame
Frames vs. Tables
• Frames and Tables pages allow you to divide the browser
viewing area into two (or more) sections
– They do this in different ways, with potentially different results
• Tables divide a page into fixed or static segments whose
relationship to each other cannot be changed by the viewer
• Frames are independent pages that have been allocated a
section of a single viewing window
– The viewer can change the size of a frame if allowed to by the web
designer
– The structure of the main page is controlled by a “frames page”
• “Frameset” in Microsoft jargon
Banner Frame
• This is the section at the top of your frames page
that identifies the purpose of the web page
• Using the same banner from page to page provides
an effective visual “anchor”
– If the banner stays the same when the main page
changes, the viewer knows that they are still in the
same web
• Typically, this is where you put logos and other
graphical information
– Something to “catch the eye”
Contents Frame
• The contents frame contains indices to other pages
– Typically provided by hypertext or “radio buttons”
• It may be helpful to create a “block diagram” showing the
relationship and contents of the sub-pages before you start
developing the individual sub-pages
– You can link everything later
• For this project, I expect you to create at least 10 sub pages
that are linked to the main page via the contents frame
– It is OK to have “sub-sub” and “sub-sub-sub” pages
– These count towards your total of 10 sub-pages
Main Frame
• The contents of this frame will vary from frameto-frame, since the purpose of each sub-page will
be different
Links to Other Web Sites
• It is OK to link to other web sites
• You may want to have a “Links of Interest” button
• This will refer the viewer to another page
containing all of the links of interest
– Check out http://ieeecentraltn.org/
MS Front Page Views
• MS Front Page provides the following views of the web
site:
–
–
–
–
–
–
–
Code view
Design view
Folders view
Hyperlinks view
Navigation view
Page view
Preview view
• There are others, but you will mostly be using the Folders
view, with trips to the other views for troubleshooting
Getting Started
• The procedures in the following viewgraphs assume that
you are creating a “traditional” frames page
• So, you must first open the application
• Hampton has already created a test web site for you to
build upon
– Index.htm vs. default.htm, etc.
• Try to open this now
– Get help if you need it now
– This will make the rest of the project simple
Getting Started (cont’d)
• If Hampton had not created a web page for you,
you would open MS Frontpage, and:
– Go to File-New
– Select a “one page web site”
• The site is created locally
– Go to File-Publish Site
• The “Remote web site properties” window opens
Remote Web Site Properties Window
• Make sure that the Front Page or SharePoint
services button is clicked
• Enter the remote web site location in the
appropriate window
– http://eecswebdev.vuse.vanderbilt.edu/projects/dozier
• Click “OK”
Getting Started (cont’d)
• You will then see windows with the “old and new” web
site if you had one already posted
• Click on the hypertext “Open your web site in FrontPage”
– Close the window showing both the old and new sites
• Open the default.htm file by double clicking on it, and
enter some test data in the default.htm file
– Save the file
• Now open your new web site using your browser
– http://eecswebdev.vuse.vanderbilt.edu/projects/dozier/default.htm
Note: If you don’t use the “default.htm” or “untitled.htm”
designator, your web may not work.
Browser Differences
It is recommended that you open your web with multiple browsers
when you start acceptance testing of your site to make certain that
you understand the web’s behavior before putting the site into
production.
Creating a Traditional Frames Page
• With your previous web site still open in Front Page, go to
File-New
– This opens the New Task window
• In the “New Task” window, select “More Page Templates”
– Click on the “Frames Pages” tab at the top of the screen
– Click on the “Banner and Contents” template
– Click “OK”
• You are then taken to the Frames Page View for the web
– Note the “Buttons” in the area of each page
– By clicking on “New” you can then create a new web page for that
section of the browser screen
– By clicking on “Set Initial Page” you can choose an existing web
page that will be displayed in the frame by default
Finishing Touches
• Note that you still have the same “default.htm” file present
in the web in another tab
• Create “dummy” frames sub-pages for now and save them
– Banner
– Content
– Main
• Also, save the frameset page as “default.htm”
• Go back to your browser, click refresh, and see what
happens
New Frames Page
What’s Next
To be continued……