1. ES 101. Module MS Front Page Tutorial and Web Hosting

2. Last Lectures Cascading Style Sheets and Tables

3. This Lecture MS Front Page Introduction Web Hosting

4. 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

5. 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

6. 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

7. 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?

8. 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

9. 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

10. 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”

11. 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

12. Main Frame The contents of this frame will vary from frame- to-frame, since the purpose of each sub-page will be different

13. 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/

14. 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

15. 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

16. 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

17. 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”

18. 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.

19. 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.

20. 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

21. 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

22. New Frames Page

23. What’s Next To be continued……