ITS Knowledge Base

There are various ways you can edit the content of an existing website of an organization or department. Two tools that are in use at Southwestern are NVU and Dreamweaver. NVU is an open-source application that runs on both Macs and PCs and can be downloaded from http://nvudev.com/download.php Dreamweaver is a commercial product from Adobe the runs on both Macs and PCs and the educational price is around $190 at the time of this posting.

In the world of web site creation, the term “publish” is used when you want the world to be able to view your website from a brower. When you are working on your website files, changing the content and saving your work does not necessarily mean that the changes are “on your site”. Most web site design and creation software, such as NVU and Dreamweaver, publish your web site content using a protocol called ftp and need to know the location where to publish the files. ITS has created two documents to help you setup NVU and Dreamweaver to use ftp to publish your web site files.

Site Setup in NVU

Site Setup in Dreamweaver

We’ve talked about CSS in earlier articles. I wanted to show some of what it can do with an actual html file. Here’s a plain-jane html file with no styles.

It is a simple html file with a single h1 heading, four paragraphs of text with a blockquote inserted in the middle.

Now let’s make it look nice. First, we create a text file that we will call ourstyle.css. Our first rule will be for the body tag:

body {
background: #ffffff;
color: #666;
font-family: Arial, sans-serif;
font-size: 11px;
margin: none;
}

We are setting the background color; font color, size, and family; and margins.

Next will come the heading:

h1 {
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}

Click here to see the results so far.

Now let’s look at the list of food. It’s an unordered list (no numerals are used in front of each list item) of three food items:

• fajitas
• coffee
• guacamole

In our stylesheet, we add these rules to modify the appearance of the list:

ul {
padding: 0;
margin: 0;
list-style-type: none;
background: #eee;
border: 1px solid #666;
}

li {
padding: 0;
margin: 0;
color: blue;
}

What we’ve done is to remove the bullets by setting the “list-style-type” property to none. We gave our list a background and a border, as well. Then we removed any margins and padding from the list elements and colored them blue.

See the results here.

The list’s width is a problem. I don’t want it to span the width of the page, so we’ll add a width property to the ul tag.

ul {
padding: 0;
margin: 0;
list-style-type: none;
background: #eee;
border: 1px solid #666;
width: 30%;
}

The result.

Now that you’ve seen how the elements of a style sheet work together, I’ll go ahead and style this page some more. Here’s the finished result and the stylesheet. Learning all the CSS properties takes time. It’s useful to have a set of links or a printed guide as a reference when you create your stylesheets. Here are some useful links to start with:
(more…)

CSS stands for Cascading Style Sheet. If you are creating we content, you have probably come across it by now. What we’re going to do is to look at a CSS file and talk about each element in it: what it is, why it’s done that way, etc.

If you want to follow along, open Notepad (if you are using Windows) or TextEdit (if you are on a Macintosh) and create a new, blank file called “mycss.css” and save it to your Desktop. Now let’s fill this blank file with content.

A stylesheet is made up of rules. A rule is nothing more than the element we’re styling and the various style for that element. It looks something like this:

h1 {
font-family: Georgia, “Times New Roman”, Times, serif;
}

This rule affects the h1 tag. This is called redefining a tag. Here we want our h1 content to be of the Georgia, or Times New Roman, or Times, or the system’s default serif font. (Your viewer’s web browser will try the different font faces in that order.)

A rule contains two elements: a selector (the h1 in this case) and a declaration (everything inside the brackets).

First the selector: h1. The above rule will apply to every h1 in the html file using this stylesheet.

Within the declaration, you have two parts. The property and the value.

{
font-family: Georgia, “Times New Roman”, Times, serif;
}

The property here is font-family:. Properties always end with a colon. This property determines what font-face we use for the h1 tag. The value comes next, Georgia, “Times New Roman”, Times, serif;, and always ends with a semi-colon. The value states how the property works. Here, we say that the font-face we will use is Georgia. If that font’s not installed on a person’s computer, then it tries TImes New Roman, and so on.

You can have multiple properties in a declaration. Just make sure you end each property with a semi-colon. For example:

h1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 18px;
color: #999999;
margin: 5px;
}

Here we’ve stated the font-face we want our h1 tags to use, the size of the text within that tag, the color (a very dark grey), and the margins around the text in that tag.

When scanning pictures, one of the options you will encounter is what resolution to use. The resolution basically means the level of detail you want in your scan. The greater the resolution, the greater the detail. This also affects the size of the scanned image. The greater the resolution, the larger the resulting file.

So what do you use? The answer depends on the purpose of the scan. If you are scanning pictures to use in a web page or in a Powerpoint presentation, you need a resolution meant for images displayed on a monitor, or through a projector. If you are going to use the images in a printed publication: a poster, a book, a newspaper, etc., then you need a different resolution, one that would have greater detail.

Here’s a list of basic resolution numbers:

• 96 dpi: the lowest resolution that one should use. This works for images used in web pages, Powerpoint presentations, Acrobat (pdf) files.
• 200 dpi: Color or greyscale laser printers. If you are making brochures or handouts that will be printed on the average laser printer, this is the resolution to use. This resolution would also be recommended for black and white images destined for most newspapers.
• 600 dpi: Higher quality printing. Magazines or other professionally printed material: CD-ROM covers, posters, books, etc.

There may be instances where you would need a resolution that’s higher or somewhere inbetween. If that’s the case, contact the person doing the publishing of the image and discuss what is needed.

When building web pages, it’s always nice to know how the colors you choose to use will look prior to publishing the site. This color wheel makes this much easier.

We’ve already discussed the basics of Cascading Stylesheets. Let’s look at more. As mentioned in the first article on CSS, there is a concept of cascading preference, or priority. It works this way: A style embedded inside an html tag, an inline style has the highest priority. Next is a style defined in the head of an html page, an internal stylesheet. Last in priority is an external stylesheet, or .css file.

Let’s look at this idea: We’ve got a file, called page.html. It has a link to the stylesheet styles.css. In styles.css we have this style setup for the bold tag, <b>:

Every instance of <b> will now have this style. What if we have a section in our html file where we’re using a serif font? Times New Roman, perhaps? It would look a bit strange to have the font-face change that drastically. Well, we could define styles in the head of the document. The internal stylesheet would override the complimentary styles defined in the styles.css file.

Say we then have a portion of our document where we have a heading that has a bold section. We’ve defined the heading-one (<h1>) font-size as 18 point, but here we want the font-size to be 22 point. To do this in this situation, we add an inline style in the heading tag. This style would be valid for this single instance and would take precedence over the other two types of styles.

Example:

(more…)

There are two basic parts to the structure of a web page. The head and the body. There is a third piece, the DOCTYPE, or html version, information, but that usually gets discussed with the head.

The head of an html, or web, page contains the hidden information that interacts between your web browser (Safari, Internet Explorer, Mozilla, etc.) and the web server. The body contains the information that you see in your web browser.

Let’s start with the head. Here’s an excerpt from a html file’s head:

(more…)

The use of Cascading Stylesheets, or CSS, is growing as people who create and maintain web pages and sites learn more about the separation of content from design, or style. CSS is a tool for doing just that. Why is it important to separate content from design? For starters, it makes your html files smaller. You can have one or two files that contain all the styles for your site instead of having styles spread throughout all your documents. Smaller html files means pages load faster for people viewing your site. This is a very good thing.

Secondly, by having your site’s design separated from the content, you make it easier for those who have to maintain the site to focus on good content. A web site lives and dies by the content. Better content, better site. If it’s easier for people to create good content for your site, then you stand to have a better site.

Thirdly, the use of CSS enables you to make your content available to the widest possible audience. You can create a design that is optimized for various viewers and devices. One design, or set of styles, optimizes your content for a computer display, another for a PDA (Palm device), another for a printer, and so on. Proper use of CSS can even make your content readable by older browsers such as Netscape 4.
(more…)

Editing web pages can be a somewhat slow procedure if you want to get into the code of a page and edit or fine-tune it by hand. Fetch, an FTP program for the Macintosh OS, has a feature that speeds up this process.

Open Fetch and connect to ftp.southwestern.edu with your username and password (Email username and Email password). In the listing that appears, look for public_html and open that directory.

Find the html file you want to edit and click once on it. Go to the Remote menu and select Edit File with BBEdit. Fetch will pull down a copy of the file to your Desktop and open the file in BBEdit Lite (Or BBEdit if you have the full edition). Once you make your changes and Save the file, Fetch will then copy it back to the server. You can open that file in your web browser and see your changes immediately.

Netscape 7 publishes web pages in a different manner than Netscape Communicator. If you don’t have Netscape 7, you can download it here for the Mac OS and here for Windows.

These steps also work with the Mozilla 1.x browser, the open-source browser on which that Netscape 7 is based. Mozilla can be found here.
(more…)

If you want to setup a personal homepage you must create a folder in your home directory on the server. The following link will walk you through that process. https://www.southwestern.edu/cgi-bin/services/wwwsetup.cgi.
All web documents will be placed in the folder /public_html/. Consider this your personal web space.
(more…)