An Introductory Guide to Building a Website at the University of Pittsburgh at Greensburg:
A Crash Course Especially Designed for My Faculty Colleagues
by Dr. Elisa Beshero-Bondar
Assistant
Professor of English
Web Editor for the English Department
University of Pittsburgh at
Greensburg
I. BASIC NETWORK SAVVY
--Worldwide Web: From Your Computer to an Internet Server, to Computers Around the World
--Climbing Directory Trees: Carnegie Mellon, Pitt, and the AFS (Andrew’s File System)
--AFS and
--AFS is one of several ways of organizing files for distribution on the web to many different users at once—so it’s considered a “distributed file system.”
--When a file is posted on a server system, it can be downloaded, copied, and cached in many places at once, so it essentially exists in many different computer systems at the same time.
--AFS provides a way of organizing and controlling how files are shared and accessed. In simplest terms, it gives us an illusion that all our files are neatly stacked in one place, and allows us a means of updating those files. AFS provides gated access, with a username and password, to a specific set of files.
--Think of AFS as a huge directory tree. We have access to our own tiny branch within Pitt’s allocated area of the tree. When we access AFS space, we may be accessing a number of different computers, but we’re controlling the public distribution of files.
--AFS makes it appear to us like we’re working with a directory system on our own computers—almost like accessing files and folders in “My Computer” on a Windows machine. With the right software program access, you can “drag and drop” files from your computer onto the AFS tree.
FTP: File Transfer Protocol. Talks to servers, allows upload of files into AFS directory space, to a server located on the Directory Tree. Requires username and password input, that always places you in a particular “folder” position on the AFS tree.Usually accessed through a web editing program. Can be accessed independently (for example, with a program like Smart FTP, or with a UNIX account.)
How to Access YOUR Area of AFS:
* Check with Bill Martin to set up your department's webspace--distinct from your own personal webspace!
* For now, let's experiment with adding and removing files from your personal webspace, using the FTP program in Adobe GoLive.
* Open Adobe GoLive. Go to "File"--> "Server". Next to "Server," select "Connect to FTP"
* In "Nickname," enter what you want to call your webspace--something easy for you to remember.
* In "Server," enter unixs.cis.pitt.edu
* In "Username," enter your Pitt userid, the one you use to check your e-mail. (For example, I enter ebb8.)
* In "Password," enter your e-mail password.
II. BASIC WEB EDITING SAVVY
A. The Unreality of “WYSIWYG”: (“What You See Is What You Get”)
Professional web designers aim to produce sites with a universally identical appearance, using Flash Video, PDF, Cascading Style Sheets, Images of text, etc.—and don’t always succeed.
Simple, User-Friendly HTML— with all its visual inconsistencies is still the foundation of the Web, accessible to the widest possible array of computers (from old, poky modem connection to high speed DSL, etc.). HTML sets basic parameters for a document—re the placement of text and images, the appearance of text, that can be adapted to different specifications by different users.
B. A Little HTML Knowledge Goes a Long Way: (HTML=Hypertext Markup Language)
Basic Anatomy of a
Webpage:
<HTML>
<HEAD><title>This text appears in a browser
header.
</title> </HEAD>
<BODY> This text
appears in a browser window. </BODY>
</HTML>
HTML Tags—Where to Find Them, How They Work:
Save a webpage to your computer desktop, and then open it in Notepad. Look at the code!
(Or open it in Adobe GoLive and view it in Source mode to see the code!)
HTML Tags are signalled by angle brackets <>, and they usually come in pairs, a tag that opens and a tag that closes:
<b> </b>
<strong> </strong>
<blockquote></blockquote>
Anchor tags, to make links: <a href=“http://www.pitt.edu”> </a>
--A few wacky tags that don’t come in pairs:
Image tags, to insert images: <img src= “”>
Paragraph tag (doesn’t require a close tag): <p>
Nested Tags: Good HTML coding practice aims to keep tagging as simple as possible, and set up correctly from the inside out: Notice the order of these tags:
<blockquote><b><font size=+3><a href=“http://www.pitt.edu”>YOUR TEXT HERE </a></font></b></blockquote>
NOTE: Most problems with HTML involve misplacement of tags. (WYSIWYG Web editing programs often can’t tell exactly where you want a font command to stop, for example. But if you know a little about how the tags work, you can fix the problem in notepad!)
Find out More about HTML Tags:
The Bare Bones Guide to HTML: http://werbach.com/barebones/barebones.html
Helpfully
organized site.
Webmonkey: http://www.webmonkey.com/
Terrific
English-major friendly tutorials here on html, javascript, use of multimedia,
etc. Gives you basic foundations, and leads to more specialized
knowledge.
How Will YOU Edit Your HTML? Making a Webpage from Text Alone: Some people do it with
Notepad…
…and some people just tinker with tags to Correct WYSIWYG Software Errors
Spaghetti Code vs. Zen Simplicity: Choose your Editing Program with Care
Components of Good Web Editing Software: Contains a “Layout” Screen, an HTML Source Code Screen, and Preview Screen, so you can see/edit/proofread your document in three different ways. Also helpful if the software contains its own FTP program, to upload it to your server.
Elisa's Software Recommendations:
ADOBE GOLIVE: What we’re working with today. This can be installed in your office. Talk to Brad Graham if you don't have it on your computer already.
1. Get Used to your Workspace in GoLive:
Open GoLive, and open a page from the Program Website Template folder.
* Notice the page viewing screen and the different viewing modes: Layout, Source, and Preview (also PDF preview). When would you use these?
* Notice the menus and editing tools surrounding the editing screen: We'll be using the File menu, the Object Palette, the Inspector Box, and the CSS box
* I find it helpful to make the page view a little smaller ("restore down") Click on the two little grey boxes in the upper right corner of this window. This way you can surround the window with the "tool boxes" you're using.
This is a fairly standard, cluttered viewscreen in Adobe products. For plain and simple web editing, we really won't need to use most of the specialize tools and objects here. But you'll want to know where to find just a few of them to get you started on building your site.
2. Adding Links:
Type in some text and highlight it. In the Inspector Box you can type or paste in a link address. Or click on the little folder image to browse for a local file (another webpage that's part of your site).
Relative Links and when to use them: Click on the little pointer right next to the little file folder. When you've entered a file or a web address as a link, you can select "Relative" here. ONLY do this when you're linking to a page or a file that's inside of your website. "Relative" means the file is identified in its local web space "relative to" the page you're currently working on.
* When entering a website address to anywhere far away from your webspace on the AFS server, check to make sure that "Relative" is unchecked.
Removing a Link:
Need to remove a link? Notice the little "chain" links in the Inspector window: one is broken. To remove a link, highlight the linked text and click on the broken chain.
3. Adding Images:
There's more than one way to insert an image: Try right-clicking in your document at a point where you want to insert an image. Or, use the "Objects Palette": Find the Image icon, and use your mouse to click and drag it to the point where you want to place an image.
* Now, click on your image and look in the "Inspector" box, which has changed:. Notice how you browse to locate the Source of the image, just like making a relative link..
*When you post files to your webspace, don't forget to add the image files along with the html files you worked on!
Tinker with Image Tags, to control how text surrounds images. Select an image, and notice the "Alignment" option (and other options) in the Inspector Box. You can set the size parameters for an image here, too. It's best to have an image already prepared for the web before posting it. That means your images should be a small filesize and only medium resolution so they can download quickly! Edit your web images to be simple and small. (For more advice see Image Editing in Photoshop below.)
4. Tables: the old fashioned HTML way—divides a computer screen up into units. Still the most precise way to control a complex layout, to ensure that text and images don’t overlap when a viewer sees them. Our Template for UPG webpages follows a basic Table format.
Tables in HTML: Organized primarily by Rows and Cells. In most software programs nowadays you can divide them into columns, too.
You can divide a row up into as many cells as you like, and the table boundaries can be visible or invisible.
<table> (introduces a table. This tag can contain many
attributes, controlling the look and dimensions of the table, whether you see
lines defining the table or not)
<tr> (table row)
<td> (table cell)
</td> (closes the table cell)
<td>(another table cell)
</td>
</tr>(closes the table row)
</table>
For more on Table Formatting and how you can use it as a basic structure
for even a simple webpage, see Webmonkey's
excellent Tables Tutorial:
http://www.webmonkey.com/webmonkey/authoring/tables/
5. Background Colors and Font Styles: Page Properties and the CSS Window
* Go to Special --> Page Properties in GoLive and notice how you can change the Page Background and the Text Colors for Text, Link, Active Link, and Visited Link. Try clicking on one of the colors. You can select colors from lots of different palettes. I recommend the Visibone palettes for the way they organize the colors. Visibone also uses "web safe" colors that are pretty standard for most kinds of computer monitors.
You can simply select colors you'd like to use from a palette, or you can be absolutely precise and "color by number," using a color's hexademical value. When thinking about colors I want to use on a site, I like to consult the Visibone Colorlab here: http://www.visibone.com/colorlab/
* Our UPG Program Templates are already set up with a basic set of colors and text styles for you. To see your font size and style options, let's have a look at the "CSS," or Style Sheet options for the template: Locate the "CSS" window, and notice the different font styles there. Try entering text and changing the font styles, using your style sheet.
6. Posting your new files to your webspace!
* Save your work and be sure you know WHERE you are saving it, so you can browse to find your html and image files. (Go to File-->Save as and browse for a good location.)
* Use the File menu to bring up the Server/FTP window in GoLive. Connect to your AFS space.
* In your AFS space, notice you have a "public" and "private" folder. You can use "private" for your own storage purposes. "Public" is the destination for files to be posted on the web. Doubleclick to open "public" and then open "html."
* Make the GoLive window smaller so you can see your desktop behind it. Now, find where you've saved your files (use My Computer) and open up the folder. You can click and drag your new files into the html folder in GoLive.
*Now, open a web browser, like Internet Explorer, and see what you've published to the web. Your web address will look like this:
http://www.pitt.edu/~youruserid
Mine is http://www.pitt.edu/~ebb8
7. Maintaining Your Website Files: Always work with your most recent version saved in your webspace!
* Because I work on multiple computers at home and at school, I don't always remember where I was the last time I edited my site. Before I start editing, I always download the copy of the page that's currently posted in the html folder in my AFS space.
* Notice: GoLive won't let you drag and drop to download from AFS to your local computer. Instead, rightclick on the file you want to download, and browse to place it in the appropriate folder.
Image Editing: Using Photoshop to Prepare Images for the Web:
Major points to remember: Image files need to be small in filesize. And small enough in their dimensions and low enough in resolution that they don’t take up a whole screen.
Image file formats ideal for web viewing:
Gif: ideal for small, simple, cartoon-like images or logos with just a few colors
Jpeg: ideal for photographic images with lots of complex color shading
Png: (acronym for Portable Network Graphic) great for all kinds of images—often used for drawings, artistic productions
Adobe Photoshop: A few simple things to do with pictures to prep them for the Web:
Image Menu:
- Crop Images
- Reduce Image dimensions
- Reduce Resolution (especially for images from digital cameras) to ~72 dpi
Save as:
- Save for Web feature
- Simplify file names: no spaces, short words. Helps to reduce html errors!
With this basic level of understanding, you should be well equipped to start building an intelligently coded site! For more in-depth training, I highly recommend Webmonkey's concise and chatty tutorials. Happy web editing!