Getting Ready for Dreamweaver
(excerpted from a page created by Iowa's "Information Arcade")

How does the WWW work?

    1. What is a web page?
      1. HTML coding = instructions to the user’s computer
        1. HTML: HyperText Markup Language
        2. HTML is not the same as word-processing
          1. With word-processing images are embedded…what you see really is what you get
          2. With HTML, you’re only providing instructions to the users’ computers regarding what to display and how to display it…images are not embedded in the page.

    2. What is a server? What is a client?
      1. Server: a computer that holds your web pages and sends them out to users (also known as web host or web server)
      2. Client: the user’s computer (the one displaying your web page)
      3. Other terms:
        1. User: the person looking at your web page
        2. URL: Uniform Resource Locator (also known as "web address); "http://www.blahblahblah.com"
        3. ISP: Internet Service Provider (example: AOL, Earthlink, AT&T, anybody who gives you access to the Internet)
      4. How do they interact?

      5. Why is it important for me to know?
        1. Understanding the server-client relationship will help you to understand how the web works. Knowing how the web works will help you design better pages, and understand more advanced concepts.

    3. What is a domain name?
      1. What do they mean and how do they work?
        1. .com= commercial
        2. .edu = education
        3. .net = network
        4. .org = organization (typically not-for-profit)

  1. Layout and Design Issues
    1. Important note: designing a web page is not like desktop publishing: WYS is not always WYG
    2. Web color palate
      Only some colors work with the web. You may choose a color and try to implement it, only to find that the color displays differently.
    3. Fonts
      1. HTML = instructions to the user’s computer for how to display your web page. If you tell the user’s computer to use a font that isn’t on the user’s hard drive, the computer will select another font to use.
      2. Some fonts are standard, like Courier or Times New Roman. If you use a font that isn’t common, chances are that your text will display in a font that is more common. If you use a really rare font, your page may display as strange characters, rather than text.
        1. The error: using a rare font with nothing to fall back on, so the font displays as a default font or as different characters.
          1. The solution: use a common font, with backups (select several and use them all…if a user doesn’t have the first on, the second will display).
          2. The second solution: If you want to use an uncommon font for design reasons, create a small graphic, rather than chance it with text.
    4. Monitor issues
      1. Resolution
        1. Some people have large monitors capable of high resolution. On these computers, everything will look smaller.
        2. Design for the least common denominator-- 800 x 600 is usually best. Dreamweaver will allow you to see what your page looks like at various resolutions, but you can reset your monitor resolution to a lower resolution.
          1. Note: in 1999, a study done by www.statmarket.com found that 55% of computer users had 800x600 resolution, while 25% had 1024x768. Only 2% of computer users had 1280x1024, though this number is expected to rise in the year 2000. Still, until we see stats that indicate otherwise, design for 800x600.
      2. Gamma
        1. If you design on a Mac, the graphics will appear slightly darker on a PC.
        2. If you design on a PC, the graphics will appear slightly lighter on a Mac

    5. Spaces, Tabs, and Line Breaks
      1. Spaces: only one space at a time, no more than one space allowed
      2. Tabs: Nope
      3. Line Breaks: If you hit "Enter" in Dreamweaver, you’ll get a double space line break. If you insert a line break (shift-Enter, in Dreamweaver), you’ll get a single-space line break. In HTML, if you’re editing the raw code, hitting Enter does nothing, but including the HTML tag <br> provides a single line break.

    6. Images
      1. Loading time
        1. The error: big images = long loading time
          1. The solution: optimize images in Fireworks!
        2. You have about 2 seconds to get the attention of your audience. Make sure your images don’t take more than 2 seconds to load on the index page, and 5 seconds to load on other pages, or you’ll lose your audience.
      2. Resolution
        1. The error: hi-resolution images = bigger files = long loading time
          1. The solution: scan images at 72 dpi or reduce resolution.
      3. Coding problems = broken links to images
        1. Common problems:
          1. Linking to the hard drive, rather than the server
            1. Make sure you link to the server, rather than the hard drive. A good way to avoid the problem is to use "relative links", where you link to "image.jpg" as opposed to "http://www.page.com/image.jpg". Relative links are also be helpful if you decide to relocate your page. Dreamweaver generally uses relative links for you.
          2. Failing to upload images to the server
            1. Since your html page is just a set of instructions, the images are not automatically embedded within the page. You must upload the image files, as well as the html files, for your page to display properly. Dreamweaver will ask you if you want to upload the "dependent files" when you upload an html document. The "dependent files" are the image files associated with the web page.

    7. Netscape vs. Explorer and Mac vs. PC
      1. Different browsers and different platforms may display differently occasionally
        1. Nature of the HTML Beast: designs look different on different browsers and different platforms.
        2. Internet Explorer defaults to opening a larger browser window, so you have more real estate available. If you don’t look at the page you’re designing in Navigator, too, you’ll design with more real estate in mind than Navigator will typically show on opening.
        3. The error: not examining the site in multiple browsers and on multiple platforms, so sites display differently.
          1. The solution: Technology is a lot like language: figure out who your target audience is, and what language they speak. If the majority of your audience uses Macs, design on a Mac. If they use mostly PCs, design on a PC. If you have a mixed audience, plan to test your page cross-platform.
          2. The second solution: Write a simple JavaScript to identify the users’ browser and platform and provide either an alert or redirect the user to another page designed for their platform or browser.