Getting Started with Web Page Creation

Download Report

Transcript Getting Started with Web Page Creation

Getting Started with Web
Page Creation
for Fuqua Authors
Spring 1999
What’s here?
 An overview of Fuqua’s web creation &
publishing software
 What you need to know about HTML
Creating a web page: What’s
involved?
 Software
Fuqua has selected “DreamWeaver” from
Macromedia as its standard web page editing
software.
DreamWeaver lets you create and edit a web
page almost as easily as you’d create a
document in a word processor, like Word.
More about DreamWeaver
 To see what DreamWeaver is about…
visit the Macromedia web page at this URL:
http://www.macromedia.com
On Macromedia’s page, select “Products”.
On the “Products” page, select
“DreamWeaver”.
On the “DreamWeaver” page select “Feature
Tour”.
Publishing a web page: What’s
involved?
 If you’re on the faculty
you have space on the faculty web server
publish your personal web page files by
locating the files in the public_html folder that’s
on your network H: drive
the URL for that space is:
http://faculty.fuqua.duke.edu/~username
 If you’re on the staff
If you’re on the Fuqua staff and publishing a
department or area page, you’ll use Fuqua’s
special version control publishing software.
This software helps keep the latest copy of a
document available and helps avoid
“overwrites”.
Contact Fuqua’s IT group for information
about using this software. (as of 2/99)
If you’re a Fuqua student
You’ll publish your web pages to Duke’s web
server, called “acpub”
See this URL for information about publishing
to acpub:
http://www.duke.edu/websrv/
For more info
 See this web page for links to:




web page creation tutorials
info on copyright and the web
info on math symbols and web publishing
how to publish on Duke’s web server
http://faculty.fuqua.duke.edu/~pecklund/WebPage/Resource.htm
About HTML
 Even if you’re using a sophisticated web editor
like DreamWeaver, it helps to know a little
about HTML
 Hyper Text Markup Language
 HTML lets you format a document so:
 a web browser knows it’s a web page
 the document looks the way you want it to look
when viewed online
HTML
 There are 2 basic varieties of HTML code:
 Required Structural Codes
• Must appear in every web page.
• Let the browser know to display your document
as a web page.
 Optional Formatting Codes
• Use to format the page the way you want.
The required, structural codes
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
…..
…..
</BODY>
</HTML>
Required codes define
your document to the
browser as a web page.
Codes appear in angle
brackets. Most codes are
paired. The second code
in a pair has a slash.
For example:
<HTML> and </HTML>
The optional codes
<HTML>
<HEAD>
<TITLE>A sample</TITLE>
</HEAD>
<BODY>
<h1>A Sample Header</h1>
<i>This is my sample
web page.</i>
</BODY>
</HTML>
Use optional codes to
format the text and objects
on your web page.
Optional codes control
things like spacing,
typeface, and colors.
In this example, codes
establish a header and
italicize text.
Linking codes
….
….
This is a link to another page
that has the name
<A HREF=“Page2.htm”>
Page 2</A>.
….
….
Links are the key to a web
page. Linking is
accomplished using codes.
This example shows an
“anchor code” that links
this page to another web
page.
The reader of the page sees:
This is a link to another
page that has the name
Page 2.
A download link
….
….
This is a link to a Word file
that has the name
<A HREF=“MyFile.doc”>
MyFile.doc</A>.
….
….
You may want to distribute
files via your web page.
This example shows a
download type of link.
The file named in the
link isn’t an HTML file.
The browser won’t try to
display this file as a web
page. The reader can
download it instead.
Displaying an image
….
….
Here’s a picture of Fuqua’s
logo:
<IMG SRC=“FuqBan.gif”>
….
….
….
You can display graphics
called “inline graphics”
in your web page.
This example shows a
link to a .gif-format
graphic file.
When the browser
encounters this code and file
it displays the graphic in the
web page.
Learn from others
 If you see a web page you like, study
the code used to create it.
 Most browsers let you view the code
for any page you display.
 For example, in Netscape 4.5, click the
menu commands View, Page Source.
Document your HTML file
 This is what a comment line looks like
in HTML:
<!-- Don’t be afraid to use comments! -->
Naming your file (if publishing to Duke’s web server)
 To publish on Duke’s server, save your
HTML file using these file naming rules:




8 characters or fewer for the name
no spaces
“.htm” as the file extension
Case is important, e.g.• MyFile.htm isn’t the same as mYfiLe.HtM
End