Web Site Development and Adobe Dreamweaver CS5 Part 4

Web Site Languages

Web pages are written in plain text and saved in the American Standard Code for Information Interchange, or ASCII (pronounced ASK-ee), format — the most widely used coding system to represent data. Using the ASCII format makes Web pages universally readable by different Web browsers regardless of the computer platform on which they reside.

The language of the Web is not static; it evolves just like most other languages. HTML (Hypertext Markup Language) has been the primary language of the Web and most likely will continue to be so for at least the near future. HTML is useful for creating headings, paragraphs, lists, and so on, but is limited to these general types of formatting. XHTML is a rewritten version of HTML using XML (Extensible Markup Language).

Unlike HTML, Extensible Hypertext Markup Language (XHTML) is an authoring language that defines the structure and layout of a document so that it displays as a Web page and is compatible with Web browsers such as Microsoft Internet Explorer,

Mozilla Firefox, Safari, or Google Chrome. Browser rules for interpreting HTML are flexible. XHTML, however, requires Web designers to adhere strictly to its markup language rules.

Two components constitute a Web page: source code and document content. The source code, which contains elements, acts as the program instructions. The elements within the source code control the appearance of the document content. Browsers display the document content, or the text and images. The browser interprets the elements contained within the code, and the code instructs the browser how to display the Web page. For instance, if you define a line of text on your Web page as a heading, the browser knows to display this line formatted as a heading.

All XHTML element formats and HTML tags start with a left angle bracket (< or less than symbol), are followed by the name of the element, and end with a right angle bracket (> or greater than symbol). Most elements have a start and an end element and are called two-sided elements. End elements are the same as start elements except they are preceded by a forward slash (/). Some XHTML elements, such as the one used to indicate a line break <br />, do not have an end element. Instead, the right angle bracket is preceded by a space and forward slash. These are known as one-sided elements, or self-closing elements. In some browsers, the end element can be omitted from certain elements, such as the end element for a new paragraph, </p>. Unlike HTML, however, XHTML standards require you to include both the start and end elements for all twosided elements.

Some elements can contain an attribute, or property, which is additional information placed within the angle brackets. Attributes are not repeated or contained in the end element. Some attributes are used individually, while other attributes can include a value modifier. A value modifier specifies conditions within the element, and should always be enclosed in double quotation marks. For example, you can use a value modifier to specify the font type or size or the placement of text on the page. To create and display a centered heading, for instance, you would use the following code:

In this example, h1 is the XHTML element, text-align is the attribute, and center is the value modifier. Notice that the attribute does not appear as part of the end element, </h1>.

You can use the Dreamweaver Code window and Microsoft Notepad or WordPad (text editors) to create XHTML documents. Place each element in a pair around the text or section that you want to define (mark up) with that element. Use lowercase characters when typing XHTML elements.

XHTML elements also format the hyperlinks that connect information on the World Wide Web. While XHTML elements number in the hundreds, some are used more than others. All documents, however, require four basic elements. Figure I-10 illustrates the basic elements required for all XHTML documents. Table I-2 summarizes the more commonly used XHTML elements.

Element (tags)	Structure
<html>…</html>	Encloses the entire XHTML document
<head>…</head>	Encloses the head of the XHTML document
<body>…</body>	Encloses the body of the XHTML document
Element (tags)	Title and Headings
<title>…</title>	Indicates the title of the document
<h1>…</h1>	Heading level 1
<h2>…</h2>	Heading level 2
<h3>…</h3>	Heading level 3
<h4>…</h4>	Heading level 4
<h5>…</h5>	Heading level 5
<h6>…</h6>	Heading level 6
Element (tags)	Paragraphs, Breaks, and Separators
<p>…</p>	Paragraph
<br />	Line break
<hr />	Horizontal rule
<ol>…</ol>	Ordered, numbered list
<ul>…</ul>	Unordered, bulleted list
<li>…</li>	List item, used with <ol>, <ul>, <menu>, and <dir>
<dl>…</dl>	Definition of glossary list
t> /dt .</ t>. dt <	Definition term; part of a definition list
<dd>…</dd>	Definition corresponding to a definition term
Element (tags)	Character Formatting
<b>…</b>	Bold text
<u>…</u>	Underlined text
<i>…</i>	Italic text

Table I-2 Commonly Used XHTML Elements

Element (tags)	Links
<a>…</a>	Combined with the href attribute, creates a link to another document or anchor
<a>…</a>	Combined with the name attribute, creates an anchor to which elements can be linked
Element (tags)	Image
<img />	Inserts an image into the document

Web Page Authoring Programs

Many of today’s Web page authoring programs, including Dreamweaver, are What You See Is What You Get (WYSIWYG) text editors. As mentioned earlier, a WYSIWYG text editor allows a user to view a document as it will appear in the final product and to edit the text, images, or other elements directly within that view. Before programs such as Dreamweaver existed, Web page designers were required to type, or hand-code, Web pages. Educators and Web designers still debate the issue surrounding the necessity of knowing HTML and XHTML. Technically, you do not need to know either HTML or XHTML to create Web pages in Dreamweaver; however, an understanding of HTML and XHTML will help you if you need to alter Dreamweaver-generated code. If you know HTML and XHTML, then you can make changes to the code and Dreamweaver will accept the changes.

Adobe Dreamweaver CS5

The standard in visual authoring, Adobe Dreamweaver CS5 is part of the Adobe Creative Suite, which includes Adobe Flash, Fireworks, Photoshop, Illustrator, InDesign, Acrobat, and other programs depending on the particular suite. Dreamweaver provides features that access these separate products. Some of the new Dreamweaver CS5 features include the following:

•    Integrated content management system (CMS) support

•    New rendering mode that displays the design like a standard-based browser

•    CSS inspection

•    Integration with Adobe BrowserLab, PHP custom class code hinting, and Business Catalyst

•    Enhanced CSS starter page

Dreamweaver makes it easy to get started and provides you with helpful tools to enhance your Web design and development experience. Working in a single environment, you create, build, and manage Web sites and Internet applications. In Dreamweaver, you can customize the workspace environment to fit your particular needs.

Dreamweaver contains coding tools and features that include references for HTML, XHTML, XML, CSS, and JavaScript as well as code editors that allow you to edit the code directly. Using Adobe Roundtrip technology, Dreamweaver can import Microsoft Office or other software Web pages and delete the unused code. Downloadable extensions from the Adobe Web site make it easy to add functionality to any Web site. Examples of these extensions include shopping carts and online payment features.

Instead of writing individual files for every page, you can use a database to store content and then retrieve the content dynamically in response to a user’s request. Implementing and using this feature, you can update the information once, in one place, instead of manually editing many pages. Another key feature is Cascading Style Sheets styles (CSS styles). CSS styles are collections of formatting definitions that affect the appearance of Web page elements. You can use CSS styles to format text, images, headings, tables, and so forth. Implementing and applying this feature, you can update the formatting one time across many Web pages.

Dreamweaver provides the tools that help you author accessible content. These accessible pages comply with government guidelines and Section 508 of the Federal Rehabilitation Act. Accessibility is discussed in more detail as you progress through the topic.

Dreamweaver allows you to publish Web sites with relative ease to a local area network, which connects computers in a limited geographical area, or to the Web, so that anyone with Internet access can see them. The concepts and techniques presented in this topic provide the tools you need to plan, develop, and publish professional Web sites, such as those shown in Figure I-11 and Figure I-12.

Figure I-11

Figure I-12

Summary

The Introduction to Web Site Development and Adobe Dreamweaver CS5 provided an overview of the Internet and the World Wide Web and the key terms associated with those technologies. An overview of the basic types of Web pages also was presented. The Introduction furnished information on developing a Web site, including planning basics. The process of designing a Web site and each phase within this process were discussed. Information about testing, publishing, and maintaining a Web site also was presented, including an overview of obtaining a domain name, acquiring server space, and uploading a Web site. Methods and tools used to create Web pages were introduced. A short overview of HTML and XHTML and some of the more commonly used HTML tags and XHTML elements were presented. Finally, the advantages of using Dreamweaver in Web development were discussed. These advantages include a WYSIWYG text editor; a visual, customizable development environment; accessibility compliance; downloadable extensions; database access capabilities; and Cascading Style Sheets.

Planning
Web site name	What is your Web site name?
Web site type	What is the Web site type: portal, news, informational, business/marketing, educational, entertainment, advocacy, blog, wiki, social network, content aggregator, Web application, or personal?
Web site purpose	What is the purpose of your Web site?
Target audience	How can you identify your target audience?
Web technologies to be used	Will you design for broadband, baseband, or mobile? Explain your selection.
Content	What topics will you cover? How much information will you present on each topic? How will you attract your audience? What will you do to entice your audience to return to your Web site? How will you keep the Web site updated?
Text, images, and multimedia	Will your site contain text only? What type of images will you include? Where will you obtain your images? Will you have a common logo? Will plug-ins be required?
Designing
Navigation map	What type of structure will you use? What tools will you use to design your navigation map?
Navigational elements	What navigational elements will you include?

Table I-3 Creating a Web Site

Developing
Typography	What font will you use? How many different fonts will you use on your site?
Images	How will you use images to enhance your site? Will you use a background image?
Page layout	What type of layout will you use? How many topics per page? How will text be presented: bulleted or paragraph style? Will the audience need to scroll the page?
Color	What color combinations will you use for your site? To what elements will you apply the color(s) — fonts, background, tables, other elements?
Reviewing and Testing
Review	What elements will you review? Will you use a group review?
Testing	What elements will you test? Will you use group testing?
Publishing
Domain name	What is your domain name? Have you registered your domain name? What ISP will host your Web site? What criteria did you use to select the ISP?
Maintaining
Ongoing maintenance	How often will you update your Web site? What elements will you update? Will you add additional features? Does your ISP provide server logs? Will you use the server logs for maintenance purposes?

Perform the following tasks:

1.    Download and then use your word processing program to open the Apply I-1 Web Site Creation file. With the Apply I-1 Web Site Creation file open in your word processing program, select a name for your Web site.

2.    Use a specialized search engine at one of the many accredited domain name registrars to verify that your selected Web site name is available.

3.    Answer each question in the Planning table. Use complete sentences to answer the questions. Type your answers in column 3.

4.    Save the document with the file name Apply I-1_your initials. Submit the document in the format specified by your instructor.