Download Visual Page: Getting started

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”
Just type
this part
Insert Table
for this part
I plan to have lots of linked pages, but
I need to create them before I can link to them
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
VP writes HTML automatically
When you type this...
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 so
important?
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
Just put the
word “web” -“web” is a
subdirectory
in your AFS
file space
This is the
last step.
Click on
Finish!
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 your
resume 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
Highlight the text and
right-button
Type in the file name
or browse to find it...
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 assigned
neon.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
• Make sure your site is ready
• When you “publish”, it FTPs
a copy of ALL your files in
your project at the same time
Click here to
publish, or use the
“Publish” option
on the “Project” menu
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?