|Jean LeLoup & Bob Ponterio
© 2008, 2012
HTML Introduction: Making your first WWW page
Adobe Dreamweaver is an excellent web site editor (still my favorite) that, unfortunately is quite expensive for beginners. You can get versions for the Mac or Windows environments. Be sure to look into lower cost deals for educators. The following information is based on the Dreamweaver CS4 version.
Before you start, you need to read the information contained in a few of the basic links on the Beginning WWW page. Just get a feel for what they are talking about in a few of these sites. If you have not done this, STOP! Do not pass go, do not collect $200, you are in BIG trouble. Go back and do your homework by examining some of those pages; then return here.
Before you begin construction, you also need to have a general idea of what you want your page to look like, what it is intended to do, how someone will get around inside it, and, consequently, how you will organize it. Below are some basic things to consider when planning your first web page/site:
- What's the purpose of the page? Are you providing a service, a product, information, entertainment?
- Who is your intended audience? What do they know? Why are they looking at your site? What do they expect to see? Knowing your readers helps you shape the information content and pick a consistent voice to address them.
- How do you intend to structure the information? For multiple page projects or sites, it is common to see at least two levels of hierarchy: a top level index and second-level pages. Put clear, quickly grasped content toward the top of a page so that the reader immediately knows what's going on. This way, even the casual reader can quickly see the sort of information you're presenting, and that may be just the hook to keep the person interested. For your first page, this will not be such an issue, but the principle still holds.
Time to roll up our sleeves. Open Dreamweaver. Go to File/New/Blank Page (HTML). From the variety of options available, you can see that Dreamweaver is a very powerful program, and you'll probably never need more than 5% of what it can do so we'll only look at things we really need for now. Voilà, the bare bones of your first WWW page! You are now in Dreamweaver's user-friendly HTML editor.
You can use the default DESIGNER menus.
Or you could choose the CLASSIC menus by selecting from the drop-down menu on the right.
We will focus on the default Designer menus. Across the top, you see the Menu Bar (File, Edit, View, Insert, Modify, Format, Commands, Site, Window, Help). As in your favorite word processor, File is mostly for opening and saving your work. Edit has a useful Undo command and commands for copy and paste, find and replace. Under View, you will see two very different views of a page: Code and Design are both very useful. Insert is important for inserting Images, Tables, and various other HTML objects. Modify is mostly for editing various objects, including those images and tables. Format controls text & paragraph formatting. Commands has a spell checker. Site is useful for multi-page web sites. Window will show you a number of different tools in small windows on the right.
In addition to the pull-down menus across the top, which function just like regular computer menus, the Classic Toolbar provides icon shortcuts to the more useful composition commands for your page. You can find out more about items in the toolbar by looking at the pop-up text that appears when you move your mouse over each icon. There are several different groups of icons (common, layout etc.). The one you see and also the one you will most often use is the Common Toolbar with these and a few other icons:
Hyperlink: Inserts a link to a another file or page. This can be a relative link to a file name within the same web site or an absolute link (full http://... address) to a page on a different server.
Email Link: Sets up a link to your email address so people can easily send you email. This may not be a good idea because of SPAM.
Named Anchor: Allows you to jump not only to a page, but to a particular spot on that page.
Horizontal Rule: Inserts a horizontal line across the page.
Table: Create a table. Tables are a good way to control the placement of items on your page.
Images: Insert various kinds of images (a drop-down menu lets you choose among these).
Media: inserts various kinds of media such as Flash, applets, ActiveX controls, so this is not important for now.
Date: Should be self-explanatory.
Comment: These are notes to yourself that won't appear to others, it helps you remember how something is set up on your page when you come back to edit it in five years.
Templates: A great time saver if you often make pages following a certain format. You can really use any page you make as a template for a similar new page.
Tag chooser: Allows you to insert HTML tags in the code view. But you'll probably prefer to use the design view.
The icons in the document window toolbar allow us to view the document in Code View, Design View, or split between both. Most of the time, the design view will be all that you need. Splitting the view between code and design view can be a good way to learn how the codes work together to make you web page appear the way it does. For instance, here is a design view image and associated code:
= <img src="first-www-04.jpg" width="28" height="28" align="absbottom">
Dreamweaver does a good job of giving you access to the properties of the objects that you put on your web page without having to edit the codes. In fact, if you edit something in the code view, you might introduce errors that could prevent your page from displaying properly. It is MUCH safer to edit an object's properties in the properties window.
Moving across the web page toolbar options:
Title: Always give your web page a title. The title appears in the blue bar at the top of your browser window. Don't confuse the page title with the file name. They are two completely different things.
Errors: A great tool that checks your page for HTML errors and shows you where they are.
File management: Don't worry about this for now.
Preview/Debug in Browser: Opens your page in your web browser so you can see the results.
Refresh: Refreshes the design view after you change something in the code view. Clicking anywhere in the design view area automatically refreshes, so you don't really need this button.
View Options: Adjust various aspects of your view of the page as an aid in editing.
Use Dreamweaver Help and the sites below for additional information.
Generally, you are better off using the Properties Window for any object to make changes. Just click on an object in design view to see and edit its HTML, image, table, CSS, etc. properties (more about properties of different kinds of objects later). Here, for instance, are the HTML and CSS properties of a text:
Notice here that for any text you can change the font, the size, the color, the bold or italic style, centering, indentation, list properties and even the hyperlink.
For more about Dreamweaver: