ES 101 Module MS Front Page Tutorial and

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 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 Front. Page • Adds the interactive parts of a Front. Page web – Server Tool Set (STS or Sharepoint 1) • Released for use with Front. Page 2002 – Windows Share. Point Services (Sharepoint 2) • Released for use with Front. Page 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” pages – These count towards your total of 10 sub-pages

Main Frame • The contents of this frame will vary from frame-to -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 • 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 Share. Point 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 Front. Page” – 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……