1. Visual Page: Getting started There are lots of HTML editors –MS FrontPage –Adobe PageMill –GoLive Cyberstudio Feel free to use any of them you wish We chose Symantec Visual Page because: –It’s very easy to use –Lots of features –It does NOT include lots of Microsoft specific bells and whistles that only work with Microsoft servers and browsers

2. Why not just use Word? You can “publish as HTML” from the MS Word File menu Several problems with this: –It is terribly slow –You can’t easily preview your work –You can’t manage several linked pages (a whole web site) –You can’t do frames –You need to use FTP to publish your work –Worst of all, MSWord inserts dozens (potentially hundreds) of extraneous HTML tags into your page that you must remove one by one, by hand, if you want to make changes to the HTML If you have a document in Word already, fine. But don’t plan on making Word you main web editor.

3. Plan your site first! Article distributed in class provides much more detail… Plan your general layout before you start editing –Who is your audience? What are their needs, interests, skill level? –What content do you want? –How can it be organized into separate pages that make it easy to find and navigate? –Look at other sites.. What do you like or not like? –DRAW YOUR PAGE(S) ON PAPER. USE PENCIL! Then sit down at the computer to get started

4. A typical personal web site Audience –could be anyone who visits (friends, employers, FBI…) –Need to keep it clean & legal Overview page can be quite simple –perhaps with your picture –Address info, etc. Links to other pages –Resume –Favorite sites –Family sites –Projects you are proud of… or whatever

5. Visual Page: General Strategy FIRST create the individual HTML documents that will go into your site. You can use: –Existing documents (e.g., in MSWord) –New documents (created in Visual Page) –Files you download from the web (watch copyright) Your “home page” MUST be called “index.htm” –PILOT requires that your home page have this name. Keep all HTML files and images in a single folder (with sub-folders, if necessary) “Build ugly” at first, don’t worry too much about links, images, etc. because you can edit them later

6. Visual Page: Publishing a web site Create a new “project” when most of your individual pages are drafted Use the Project Wizard to –define your home page –identify where you want to publish your web site (www.msu.edu/user/YourPilotID) Add the documents to your project Link the individual HTML files to each other Edit the pages until you are satisfied Publish the whole project (which is a collection of linked HTML documents) with a single mouse click

7. First create your documents You can start from a clean slate in Visual Page

8. Save your files in one folder Make a new one if you need to Name them clearly! Files MUST be “.htm” which is the default.

9. Home page must be “index.htm” I plan to have lots of linked pages, but I need to create them before I can link to them Just type this part Insert Table for this part

10. Making tables is easy Your basic 2x2 table. Tables can be “invisible”, and can be used to locate objects (images, text, etc.) on your page...

11. What about the HTML? Use the “View Source” to see and edit your HTML directly. Once you learn it, you will find this VERY useful

12. When you type this... VP writes HTML automatically Visual Page generates this...

13. You can edit either window Typing this here... Shows up here...

14. Here are my files…all saved in one convenient folder

15. Adding links between pages You can add links now, but it’s easier when the files are all part of a project A Visual Page Project (“.vpp”) organizes your web site –Designates the server and URL where the site will be published –Facilitates nearly automatic publishing –Display various kinds of links within your site So let’s create a project file now.

16. Create a new project with the Project Wizard

17. Your “Home page” MUST be called “index.htm” to work If you already have an “index.htm”, then click here to locate it Otherwise, click on “new”

18. Select your home page (index.htm)

19. Select your site folder See why this was so important?

20. Name your project file (“.vpp”) By default, this is called “Project.vpp” No need to change it unless you want to.

21. Designate the FTP server info This is the last step. Click on Finish! Just put the word “web” -- “web” is a subdirectory in your AFS file space

22. FTP server information details HOST: this will be “pilot.msu.edu” for everyone in this class who wants to use PILOT to host their site DIRECTORY: just enter “web” Your real DIRECTORY is /user/p/e/pentlan2/web/ First letter of your pilot ID Next letter of your pilot ID Your pilot ID (not mine)

23. Add your files (and you can always add more) Shift-click to select them all at once

24. Import files from Word For example, save your resume as HTML

25. Don’t be surprised if Word screws it up a little

26. CSS file controls the look of your site You can specify “cascading style sheets” (“.css” files) to change the look of your entire site (Project menu>options)

27. This is the “neon” CSS file Note that the “styles” may not cascade to documents created in MSWord (not sure why)

28. Now let’s add some links Type in the file name or browse to find it... Highlight the text and right-button

29. Links look different

30. Take a look at the HTML!

31. Previewing your work “Preview” allows you to see your work, click on links, etc., but it is NOT the same as viewing your work in a browser –Links always open in a new window, regardless of their properties –To see how it really works, you have to “open in viewer” WARNING: You will get confused and try to EDIT your page while in “Preview” mode. THIS IS NOT POSSIBLE. You have to switch back to the “Page” view Note that in “Preview” mode, all the icons on the toolbar are greyed out, indicating that you can’t edit...

32. Preview lets you test your links Click here in preview mode And it opens this window… All files have the same “NEON” look because I assigned neon.css to the whole project

33. Oh-oh -- a bad link

34. Examine all your links at once Red links with question marks are “bad”

35. The project window does a lot Double click on any page to edit it. View links to/from any page Add new pages Upload (publish) your site Click here to publish

36. Publishing your site Click here to publish, or use the “Publish” option on the “Project” menu Make sure your site is ready When you “publish”, it FTPs a copy of ALL your files in your project at the same time

37. Want to Unpublish your site? You have three choices (& possibly more) –Use FTP to connect to your site and delete the files –Use a campus PC that has your AFS space mapped as a Win95 drive (often the “P” drive), and delete the files –Use Visual Page to publish a new version (or a blank version) of your index.htm file. It doesn’t matter what other files are on your AFS directory if they aren’t linked to your index.htm

38. Let’s try a new look /Visual Page/Style Sheets/classical.css

39. And another... /Visual Page/Style Sheets/executive.css Hey! We could burn a lot of time doing this, huh?