Teach Yourself VISUALLY Adobe Dreamweaver CS6

The World Wide Web

The World Wide Web — or simply the web — is a global collection of documents located on Internet-connected computers. You can access the web by using a web browser, such as Internet Explorer, Safari, Chrome, or Firefox. Web pages are connected to one another by hyperlinks that you can click.

A Website

A website is a collection of linked web pages stored on a web server. Most websites have a home page that introduces the site and provides a place where visitors can start their exploration of the site’s information. A good website includes links that make it easy to find the most important pages.

Dreamweaver

Adobe Dreamweaver is a program that enables you to create and edit web pages with hyperlinks, text, images, multimedia, and more. You can design web pages on your computer and then, when you are finished, use Dreamweaver to transfer the finished files to a web server where others can view them on the web.

HTML, HTML5, and XHTML

HTML is the formatting language that is used to create web pages. The Extensible Hypertext Markup Language (XHTML) is a stricter version of HTML that meets today’s web standards. HTML5 is the newest version, but it has not yet been finalized by the World Wide Web Consortium (W3C), which sets standards for the Internet, and the Web Hypertext Application Technology Working Group (WHATWG), which has been working to create HTML5 as the “living standard.” You can use Dreamweaver to create web pages without knowing HTML because Dreamweaver writes the HTML code for you behind the scenes.

A Web Server

A web server is a computer that is connected to the Internet and has software that serves web pages to visitors. Each web page that you view in a browser on the World Wide Web resides on a web server somewhere on the Internet. You do not have to run your own web server to create a website because there are many web hosting companies that provide web server space for a small monthly fee. When you are ready to publish your pages on the web, you can use Dreamweaver to transfer your files to such a web server.

A Web Browser

A web browser is a program that interprets HTML and other code and then displays the web page text and any associated images and multimedia described in that code. You can download most popular web browsers for free, including Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, and Google Chrome.

Text and Images

Dreamweaver makes it easy to insert text and images into your web pages. You can then use Dreamweaver to change the size, color, and font of the text; to organize your text into paragraphs, headings, and lists; and to change its alignment. However, if you want to create a more complex design, you need to use one of the other options described in this section.

Multimedia

Websites can include audio, video, and animation files, collectively called multimedia. You can use Dreamweaver to add these files to web pages. Some of the “flashiest” sites on the web have been created using Adobe Flash, a vector-based design program. Although Flash has been popular for years, many designers no longer use it because the .flv and .swf files that it creates are not visible on the Apple iPad or iPhone. Using a video hosting service, such as YouTube or Vimeo, is a better way to add video to your web pages today.

Tables

Tables used to be a popular choice for creating page designs. By merging and splitting table cells and turning off the border setting, you could create complex page layouts. Today, designing with Cascading Style Sheets is the best option, and tables are recommended only when you are formatting tabular data, such as the kind of information you would find in a spreadsheet program or a database.

AP Divs

Dreamweaver’s AP Divs, called layers in earlier versions of Dreamweaver, use absolute positioning to create “boxes” that you can use to position images, text, and other content on a page. AP Divs are very intuitive to use: You just click and drag to create a box anywhere on a web page. However, AP Divs have many limitations, among them that you cannot center a design created with AP Divs, which is a popular trick for making your design appear to float on the page on different screen sizes. Another limitation is that, although they seem to give you precise design control, their display can vary dramatically from browser to browser.

CSS Layouts

Many professional web designers today recommend creating page layouts using CSS. Although AP Divs are technically created with CSS, they receive very special treatment in Dreamweaver and have very significant limitations. In general, when web designers refer to CSS layouts, they mean designs that do not use absolute positioning — or that use it very sparingly. Using CSS is one of the most challenging web design options, but it brings some powerful benefits, such as greater accessibility and flexibility, which can help your site look better to more people on a greater range of devices. When used effectively, pages designed with CSS are also faster to download and easier to update.

Dynamic Websites

At the highest end of the web design spectrum, you can connect a website to a database, Extensible Markup Language (XML) files, or another data source to create highly interactive sites with features such as shopping carts, discussion boards, and more. Most blogs are created using a database and a program such as WordPress, Drupal, or Joomla. Database-driven sites are especially useful when a website grows to more than 100 pages or so because they are more efficient to update.

Sample Websites

To help you appreciate the many ways to create websites and to follow along with the exercises in this book, you can find a collection of sample websites that you can download and use at www.DigitalFamily.com/tyv; follow the instructions there to find these bonus materials.

Organize Your Ideas

Build your website on paper before you start building it in Dreamweaver. Sketching out a website map, with rectangles representing web pages and arrows representing links, can help you to visualize the size and scope of your project. Use sticky notes if you want to move pages around as you plan your website.

Gather Your Content

Before you start building your web pages, gather all the elements that you want to use. This process may require writing text, taking photos, and designing graphics. It can also involve producing multimedia content, such as...