web design 1 - CGR C/062 - spring 2003
Philip van Allen -
vanallen@artcenter.edu
room 133, thursday 1:00pm-4:00pm
all materials on this web site © copyright 2003, Philip van Allen
 
week 01b - servers & clients, file naming, html intro

dreamweaver intro


Dreamweaver is an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript ) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application (e.g. GoLive or BBEdit).

Because web pages are made up of HTML text, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Netscape rather than Dreamweaver. As a result, it's best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop, Flash, Peak, or other applications to create images, sounds, etc.



creating a web page : 
To create a new web page in Dreamweaver, do the following:
  • Select FILE>NEW
  • Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It's necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
  • Select FILE>SAVE and give the file a name. This name should be all lower case, and have no spaces between words.
  • There are two views to use when creating web pages. To see both at the same time, click on the center button in the upper left hand corner of the document window.

    From left to right:
    • Code View - This shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this view, and any changes you make will be reflected in the Design view when you insert the cursor in the design view, press F5, or perform a Save (control-s for PC or command-s for Mac).
    • Design and Code View - This view splits the document window with the code view at the top, and the design view at the bottom.
    • Design View - This shows you what the web page will look like - more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML view.

 

 
previewing in a browser : 

Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Design View. But Dreamweaver is not always perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Netscape or Explorer. When you've built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>NETSCAPE (or Explorer). Alternatively, you can simply press the F12 function key.

You may need to configure the Preview function if browsers have not been set up in your machine's version of Dreamweaver. To do so, follow the directions below:

 

 
browser preview prefs : 

You can configure Dreamweaver to use any browsers for the Primary (F12) and Secondary (Shift F12) preview.

  1. Select FILE>PREVIEW IN BROWSER>EDIT BROWSER LIST...
  2. Select +
  3. After finding and selecting a browser application, click the PRIMARY BROWSER checkbox for one browser, and SECONDARY BROSWER for the other. It is essential that you check your web pages in both Netscape and Explorer.
  4. After putting away this dialog box, you will then be able to use F12 for the primary browser, and Shift F12 for the secondary broswer

 

 

HTML introduction

 

 

 
why learn HTML? :

Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask "why learn HTML?" There are several reasons:

  • Dreamweaver does not always do what you want. To get the page to look right, you often need to hand code some HTML.
  • You will get paid more if you know HTML. It is a simple fact. Web design companies want people who can hand code HTML. This is because you will be a more flexible employee if you can do lots of things. In addition, larger web site projects often require that the pages have special HTML codes inserted into the web page, and tools like Dreamweaver won't be able to do this.
  • If you want to use JavaScript, you need to know HTML. The most interesting web pages often use JavaScript to make them interactive. Before you can learn JavaScript, you need to understand HTML and be comfortable coding.

 

 

tags : 

HTML stands for Hypertext Markup Language, and uses the concept of tags. An HTML tag is always contained between a left angle bracket "<" and a right angle bracket ">". These tags are special instructions designed to mark or "tag" a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag "<tag>" and an ending tag that has the same name as the starting tag but with a forward slash at the beginning "</tag>". The text in between the starting and ending tags is the only text affected by the tags.

For example, to make some text bold, the HTML would be written as follows:

Here is some text, and <b>this text will show bold</b> when displayed in a browser.

 

 

HEAD & BODY sections : 

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

 

 
basic HTML

A simple example of a web page

<html>
<head>
<title>HTML Example</title>
</head>

<body bgcolor="#FFFFFF">

Some text for a web page that <b>demonstrates</b> the basic form of HTML in a web page.


</body>
</html>

 

 
HTML coding style

The format of your HTML code does not affect how the page will be displayed in a browser.

 

 
 

For example, this example of poor HTML style:

<html>
<head><title>

a title</title>

</head><body>
Example of Bad
HTML Coding style
<ol type="A"><li>item #1</li>
<li>item #2</li></ol></body></html>

Displays exactly the same as this example of good HTML style.

<html>
<head>
<title>a title</title>
</head>
<body>

Example of Good coding style

<ol type="A">
   <li>item #1</li>
   <li>item #2</li>
</ol>

</body>
</html>

 

 
exercise : 

In the Dreamweaver Code View window, type in the HTML for a simple web page. Use the example above in the basic HTML section. Do not copy and paste the html--you will only learn if you actually type in the code!

 

all materials on this web site © copyright 2003, Philip van Allen

top