Visual Page: Getting started There are lots of HTML editors –MS FrontPage –Adobe PageMill...

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

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.

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

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

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

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

First create your documents

You can start from a clean slate

in Visual Page

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.

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 Tablefor this part

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

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

When you type this...

VP writes HTML automatically

Visual Page generates this...

You can edit either window

Typing this here... Shows up here...

Here are my files…all saved in one convenient folder

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.

Create a new project with the Project Wizard

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”

Select your home page(index.htm)

Select your site folder

See why this was soimportant?

Name your project file (“.vpp”)

By default,this is called“Project.vpp”

No need to change it

unless you want to.

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

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)

Add your files (and you can always add more)

Shift-click to select

them all at once

Import files from Word

For example,save yourresume as

HTML

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

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)

This is the “neon” CSS file

Note that the “styles” may not cascade to documents created in MSWord (not sure why)

Now let’s add some links

Type in the file nameor browse to find it...

Highlight the text and right-button

Links look different

Take a look at the HTML!

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

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 assignedneon.css to the whole project

Oh-oh -- a bad link

Examine all your links at once

Red links with question marks are “bad”

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

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 inyour project at the same time

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

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

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