MAKING PAGES IN THE WEB WORKSHOP 


It's easy to create Web pages in a page-view editor -- but a look at the formatting codes sometimes helps. 



 


 overview   -  web page editors  -  getting started  -  resources  -  test drive


 




 


General Basics  ~  Dharma Haven Guidelines  ~  Dharma-Haven Pages


 




 


Making Pages  ~ Guidelines  ~  Weblication  ~  Weblicity  ~  Training 


 




 


WEBSHOP HOME  SYSTEMS WEBPAD  WEBLISHING   SITE KEEPING 


 



OVERVIEW

This overview summarizes the various sections of this page. Other Webshop pages related to this one discuss the software used for making Web pages, guidelines for pages intended for the public Web, putting pages up on the Web, keeping them up to date, and letting people know about them. 

TOPICS IN MAKING PAGES

Special Programs for Web Page Making covers two different ways to work with Web pages, Page View Editors and Code View Editors; and the three Web editors we use, AOLpress, Arachnophilia. and Netscape's Composer

Getting Started looks at three ways to start a Web page: Starting from Scratch, Converting Word Processor Documents and Using Models from the Web

Page-Making Resources points to a host of different helpful sites for graphics, Java and Javascript techniques, forms, tables, multimedia, and more. 

Test Drive Your Pages talks about the fact that you must, absolutely must, make an effort to look at your pages the way others will be looking at them, if you want to put them up on the Web.
 
 

Top of Page


 



RELATED TOPICS ON OTHER  WEBSHOP PAGES

Software: Building basic Web pages requires several kinds of  programs -- a Web page editor to create the pages, browsers to view the results, and possibly some kind of  graphics software. Finally, another type of  program puts the pages up on the World Wide Web.  (Sometimes two or more of these functions are integrated into a single software package with a single name.)  Selecting inexpensive software tools of good quality is the topic of our Webware page. 

With a Web-page editor and a browser installed on your system, you can develop Web pages without actually being connected to the Internet. You can write, test, and modify your pages before making them public on the World Wide Web.  When your pages exist only on your local disk; you can browse them, but no one else can -- so it's a good way to develop skills or work out difficulties with a design, without having to worry about an audience. 

In fact, on our Web Notepad page we suggest that people who don't even have an internet connection may find Web pages to be an excellent way to  use the power of hypertext in research and writing projects.  We also point out a way for people who have limited access to the Internet to publish pages on the Web . 

 Our Guidelines page focuses on getting pages ready for the public Web. 

Pages can go up on the Web in many ways (practically speaking) -- we point out some of the options on our Connections page -- and once the're published there's still more work to do.  Our Weblishing page looks at getting pages onto the Web, and keeping them up to date, while our Weblicity page discusses the problem of how to let people know about them. 

This page is about how we actually make Web pages. 
 
 

 Top of Section  Top of Page 


 




 


Special Programs for Web-Page Making 


 




Page View Editors  -  Front Page Express  -  Netscape's Composer

Code View Editors  -  Arachnophilia 


PAGE-VIEW WEB-PAGE EDITORS

Page-view Web page editors let you manipulate text and images directly, on a display that shows something like what one would see in a browser. These programs work like word processors, and can be used without knowing anything about HTML (HyperText Markup Language), the formatting language used for writing Web pages. Code-view editors let you work with the HTML code directly -- many provide easy ways to insert the necessary formatting codes (called 'tags'). 

Page-view editors are often called WYSIWYG editors.  That acronym, for "What You See Is What You Get," is misleading when applied to Web editing. Since WYSIWYG is also unpronouncable without special training, and incomprehensible to the uninitiated -- we've decided to call them 'page-view editors.' 

Page-View editors are easier to learn, though not necessarily easier for an experienced user to work with (and certainly not faster) than code-view editors. Many expert Web authors prefer to use a code-view editor, for several reasons.

We use both.

Some page-view editors, like Amaya and Netscape Composer (formerly Netscape Navigator Gold), more or less successfully integrate a browser with the editor. Others, like FrontPage Express (which is included with Wiindows 98) require that you use an external browser.

Netscape Composer  is the Web editor from Netscape's Communicator suite (replaces Netscape Navigator Gold.)  Browse pages in Navigator and edit them in Composer.  Lets you work with HTML directly using the text editor of your choice. (Windows; Macintosh; Unix; free.) 


WORKING WITH HTML CODES

HyperText Markup Language is the language used for writing Web pages. Code-view editors let you work with the HTML code directly -- many provide easy ways to insert the necessary formatting codes (called 'tags'). 

ADVANTAGES OF ARACHNOPHILIA'S CODE-VIEW EDITOR

Arachnophilia, distributed free of charge; available for Windows 95 systems only.  An excellent tutorial is provided as part of the on-line help system. 
 

  • Test the result of your work at any time with up to six user-identified Web browser programs.
  • Color coding makes the HTML code easy to follow. 
  • Cut, Copy and Paste, or Drag-and-Drop within or between Arachnophilia documents and between Arachnophilia and other Windows applications.
  • Global search-and-replace option operates across all open pages, as many as you care to open.
  • Flexible toolbars: Change any commandís contents, add and remove commands, even create complete new toolbars.
  • Multiple levels of Undo and Redo make experiments inexpensive.
  • Automatically convert wordprocessor documents (saved in Rich Text Format) into HTML code, keeping fonts and font colors, sizes, styles such as bold and italic, and other formatting.
  • Automatically upload pages to the Web, sending only those you have changed.
  • Program doesn't crash. 
The main disadvantage of Arachnophilia is that it is only available for Windows 95 / NT.  Free code-view Web editors are available for other systems, but we don't know enough about them to recommend one.  See the section on Software Reviews on our Webware page. 
 


Top of Section - Top of Page 


 



Getting Started Making Pages 


Models from the Web  - Converting Word Processor Documents

Starting from Scratch  - HTML  -  Snooping Pages 


STARTING WITH MODELS FROM THE WEB

Saving pages and images from the Web: Many Web pages are based on other pages from the Web. Browse to a Web page on the Internet and edit a copy on your own machine:  Keep the format, and use your own text, images, and links. 

AOLpress downloads pages whenever you surf to them.  To edit the active page (the one you see in the window) you begin by saving a local copy, on your hard drive, using the "Save As" function from the "File" menu. To download an entire Web page in Navigator Gold, click the "Edit" button on the toolbar, or select "Edit Document" from the "File" menu. For learning work with the pages, there is a good Tutorial in the "Help" menu. 

Before beginning to download programs, think about where you're going to put them. Where did MY Files Go? is a clear introduction to basic hard-disk mamagement.  "When you press 'Save,' where is the file being saved? You should know -- you should make a conscious decision to place files of a particular kind in a particular place."  For Web pages, we use the main (directory) folder "Web Pages," with a "Temp" subfolder for the pages being downloaded from the Web.   Don't give each page it's own folder. 

(If you do this, try it in a temporary directory first - you get all the text and the images and can really make a mess by downloading a lot of web pages into the wrong directory.) 

Most of the images on the Dharma Haven pages were downloaded from the Web. Most browsers provide a way to do this.  For example, In Netscape Navigator, just right-click on the image and select "Save Image As..." Cropping and resizing of images, and some adjustment of colors, and so on, are done in an image editor (discussed in the Graphics section of our Webware page). 


CONVERTING WORD PROCESSOR DOCUMENTS

Your word processor documents can be easily converted into Web pages. Recent versions of  many word-processing programs provide an option for saving the document as an HTML page.  Word processors that don't offer to convert the document directly to HTML will probably let you save the document in the standard Rich Text Format (RTF), and if you drop an RTF document onto the Arachnophilia program window, Arachnophilia will turn it into a web page for you. 

To find out how to create an HTML-format copy of a word-processor document, look up "HTML" in your word processor's Help index.  If there is no entry for HTML, look for "RTF" to find out how to save the file in a format that can be converted to HTML by Arachnophilia. 


STARTING FROM SCRATCH

To use Arachnophilia to create a blank document that includes the basic structure of HTML, choose "File" and then "New HTML Document." The "HTML Page Setup" dialog allows you to choose text and background colors and an optional background graphic as well as other options.  For details see "Creating Your First HTML Page" under "Help Topics" on the "Help" menu. 

In AOLpress, to start from scratch, open the "File" menu and select "New;" then choose "New Page." There is a good Tutorial in the "Help" menu. 

In Netscape Composer, to start from scratch with a blank page, open the "File" menu and select "New;" then choose "Blank Page." 

Whatever program you're using, you'll need to give the new file a name and tell the program where to put it, using the "Save" or "Save As" functions from the "File" menu. 

Before beginning to save pages, think about where you're going to put them. Where did MY Files Go? is a clear introduction to basic hard-disk mamagement.  "You should make a conscious decision to place files of a particular kind in a particular place."  For Web pages, we use the main folder (directory) "Web Pages," with subfolders for each major category of pages ("Workshop," "Tibetan," etc.)   Don't give each page it's own folder. 
 

Do give each page a title.  In AOLpress there is a separate title bar for this purpose.  Arachnophilia gives you a chance to enter a title for your page as the first option in the "HTML Page Setup" dialog. In Netscape Composer, select the "Format" menu and choose the "Page Colors and Properties" option.  Under the "General" tab, enter your Title in the "Title:" field. 

The title will show up on the title bar of you browser and editor windows, and if you publish the page on the Web, the title will appear at the beginning of the listing for your page in Web search services like Alta Vista and Web directories like Yahoo!  It will also serve as the bookmark label when people bookmark your page. 


HTML BASICS

For working directly with the formatting codes of Web pages, some basic knowledge of HTML is required.  Since HTML is a simple, straightforward notation system, it is easy to learn enough to start making pages with links to other pages. 

Arachnophilia's clear, brief HTML Tutorial should be enough to get you started.  Another very clear introduction is the Guide to Html from the New Mexico Tech Computer Center -- or try HTML 4 Rookies.  For information on more advanced features, see the links provided in the HTML section of our Guidelines page. 

SNOOPING PAGES

One good way to learn how various things are done in HTML is to look ar the HTML source of a page that has that feature. Web browsers typically provide a way to display the HTML code for the page you are currently viewing.  In Netscape Navigator, for example, you open the "View" menue and select "Page Source." 
 
 

AOLpress has a particularly convenient feature: When you highlight something in your page and leave your mouse cursor motionless over the selection for a couple of seconds, the program shows the HTML code behind the selection, in a pink popup window. . 
 
 

Top of Section - Top of Page 


 



Page-Making Resources

The more involved you get in making pages, the more likely you are to need something- or- other, or wish you had it, anyway. Today I needed an image with a text label for use as a button - the colors had to be appropriate for a particular page. 

First I jumped to Searches and Stuff, which is a tool I use ten times in a typical one-hour work session.  Looking down to the third line, COMPUTER STUFF:, I jumped to the web-lishing section, to the links for page-making resources. 

Selecting the Web Developer's Virtual Library leads to a menu with Graphics as the obvious choice for this problem. Looking down the resulting page we find Graphics Tools and Collections -- getting close now! "These tools will be particularly useful for web developers. Some are online and can be used by filling in a form; they either create images from scratch or manipulate existing images."

What I want is something that will let me make a couple of small button images, and choose The Banner Generator -- I've never used it before, but it looks promising. (If it turns out to be unwilling to make images as small as I want, there are several options to try, but I start with this one.)  I pick "Make a Banner," and in a few minutes I'm looking at my first creation. 

Exploring some of these sites is a rainy day activity that will richly reward one with ideas of what is available for free on the Internet, and with reviews and instructions for obtaining and using various software tools. 



Want to putting audio on the Web? Many methods are available, and the Web Audio Guide covers the advantages and disadvantages of many of them. They also offer a Multimedia Guide.
 
 

Top of Section - Top of Page 


 



Test Drive Your Pages
 

Pages made for public consumption on the World Wide Web require special care, right from the beginning.  The author must go to some lengths to experience the pages the way visitors will experience them, and this aspect of the work can't be left till a final check before the pages are published.  The sooner you begin getting a sense of what your various visitors will be seeing, the sooner you can be confident that much of the work won't have to be redone. 

The sources of potential problems are many:  Visitors to a page on the Web can use any of several different browser programs, on computers with different modem speeds, screen sizes, color settings, and so on.  For example, did you know that many experienced Web users turn off the automatic loading of images, because pages load much faster that way? Authors are often shocked when they see how their pages will look to some of their visitors. 
 

Different Web browsers display the same pages differently, so you have to look at your pages using all of the common browsers if you want to understand what various visitors are seeing.  You'll at least need to use both Netscape Navigator and Microsoft Internet Explorer.  This is discussed in detail in the Web Browsers section of our Webware page. 

Other differences are important too.  Did you know that Mac users and PC users typically see Web pages differently, even if they use the same browser?  Mac systems often have a screen that is longer, top to bottom, than it is wide (like the pages in most paper documents), while PC screens tend to be wider than they are long. 

With all these options in use among your visitors, you can't really expect to explore all the combinations of variations, especially not if you have very many pages to evaluate.  You can, though, get a good idea of the range of  possibilities. 

One way to get a look at your pages as they would appear at different screen sizes and resolutions is to use the Web Page Monitor Tester.  Choose a size and new window will appear opened at the specified size. You can use this new window to view your web page designs. 

Perhaps the most valuable tool you could give yourself, to help in this effort, is a 17 inch or larger monitor.  That will make it relatively easy to view pages in nearly all of the various combinations of variables that are in common use. 

Then you have to try to remember that most of your visitors do not have 17 inch monitors.  We try todo most of our work with the browser window set to 640 by 480 pixels, which is what most visitors will be using. 


Test Driving Your Site: "It's imperative to test out your site before you announce it to the world at large." 


WHY WYSIWYG IS A MISLEADING TERM
 WYSIWYG: What does it mean on the Web?  "no editor can guarantee that what you produce will look the same on anyone's computer but yours." 

 The Great WYSIWYG Debate. "some advantages, some disadvantages, and tips on deciding if WYSIWYG is right for you 



 
 



Top of Section - Top of Page


 


 



Your Comments and Suggestions
workshop-weblish@dharma-haven.org
Dharma Haven Home Page



 


Revised on December 27, 1997


 




 


Copyright © 1997, Dharma Haven 


 




 


Top of This Page