Introduction to Dreamweaver ASSIGNMENT After reading the following introduction, read pages DW1 DW24 in your textbook Adobe Dreamweaver CS6. Be sure to read through the objectives at the beginning of Web Site Development and Adobe Dreamweaver CS6 and complete the exercises at the end of the chapter. The Internet, World Wide Web, and Web Browsers The Internet is a global network that connects millions of computers. The most popular Internet service is the World Wide Web, often referred to simply as the Web. The Web consists of a network of servers that provides a method of communication that millions of people use to share information. The Hypertext Transfer Protocol (HTTP) enables the transfer of data from the host computers to the clients. Users access Web resources through a Web page. Web pages are identified by a Uniform Resource Locator (URL), which is referred to as the page s Web address. Web pages are viewed by a special software program, known as a Web browser, which requests the page, interprets the code, and displays the page content on your screen. The most popular Web browsers are Microsoft Internet Explorer, Safari, Mozilla Firefox, Google Chrome, and Opera. Millions of people use the Internet each day to research everything from Shakespeare to kitchen appliances. The Web is so often used to obtain information that many individuals and most businesses and corporations feel the need to create a Web presence. Since that Web presence reflects the individual, company, or organization, it s important that the information is presented in a clear, concise, current, and easily accessible format. L e s s o n 1 7
Most Web pages contain the following elements: Headings Text Images Background colors or images Hyperlinks, or simply links, which allow users to move from one Web page to another Web sites are made up of multiple Web pages and typically include a home page, which is usually the first page users come to when they access a Web site. Home pages should contain information identifying the site s purpose and content. Most Web sites also contain several subpages that are linked together. Types of Web Sites Pages DW2 DW4 explain the 10 basic types of Web sites found most often on the Internet: Portal sites, or search engines can make your time on the Internet more productive because they group many frequently visited topics in one place. A portal site can be customized to individual users preferences, including local weather, stocks, horoscopes, travel information, and so on. Three popular portal sites are Google, Yahoo!, and Bing. Social networks, such as Facebook.com or Linkedin.com, allow online community members to share their stories, photos, music, videos, and other interests. Business sites provide content that promotes or sells products or services. Informational/educational sites provide factual information or online teaching or learning opportunities. Examples are online dictionaries, sports statistic pages, and stock market information. News sites provide up-to-date information on current events. CNN and MSNBC are Internet news sites. 8 Using Dreamweaver, Part 1
Personal pages are created by individuals for their personal use. Blogs (short for Web logs ) are regularly updated Internet journals that reflect the interests and personalities of their authors. Web 2.0 sites allow users to share content, including sites like Flickr and Pinterest. E-commerce sites, such as Amazon and ebay, generate revenue through sales or auctions. Entertainment sites offer interactive music, video games, and other forms of amusement. Web Site Navigation The most important element that designers should take into consideration when designing a Web site is the navigational structure of the site. Page DW7 provides an overview of good navigation design. Designers often use a navigation chart to plan the structure of the site. Planning a Web Site To avoid the problems associated with poor design, you should understand the planning guidelines on pages DW8 DW13 of your textbook. You can t build an effective Web site without understanding the purpose of the Web site. The guidelines in your textbook will help you set realistic goals for any Web site you plan to design. When planning any Web site, you should always be clear about the site s purpose and content. Lesson 1 9
Developing a Web Site The most common elements you ll see on Web sites are text and images. Your choices of fonts, images, and layout will have a significant influence on the success of the site. Unreadable fonts or images that don t load properly will quickly discourage people visiting the site. Let s look a little more closely at two Web page elements that require your thoughtful consideration: typography and images. Typography In Web page design, typography refers to the appearance and arrangement of text on a Web page. Different fonts and colors may be used, but it s important to remember that Web browsers display fonts and colors differently. Much of what s published on the Web utilizes text. However, reading large portions of text on a computer screen can be quite difficult. In fact, many people prefer to print Web pages to read off-line. With this in mind, you may want to make your Web pages print-friendly. It may also be helpful to break up long passages of text to increase readability. Breaking up text-based information can be done by balancing the amount of content and graphics you provide, keeping your audience firmly in mind during design, and maintaining a logical flow in your writing. Images Although images play an important role in successful Web sites, it s important to realize that poor content can t be masked by slick graphics. Also, wonderful content can t overcome poorly designed or misplaced graphics. Remember that a successful site offers a good balance of well-written text and exceptional graphics. Relating content to your audience can be one of the more difficult tasks when publishing on the Web. Your text should be written with a specific audience in mind, and your graphics should support the text with that same audience in mind. For example, a Web site that s designed to provide helpful advice to the general consumer shouldn t contain heavy statistical text or detailed graphs and charts designed for a research team. 10 Using Dreamweaver, Part 1
User-Friendly Design Page layout is very important in designing a Web site. A welldesigned Web site helps visitors enjoy their experience while visiting the site and encourages them to return to the site. Text should be easily readable and content should be designed so that it can be updated easily. Read the guidelines in your text on using white space, adding color, and making your site accessible to visiters. You ll also want to understand and harness the power of social media to enhance the user s experience. Hosting a Web Site The process of making a Web site available to visitors is referred to as publishing the site. Publishing a Web site involves Obtaining a domain name Acquiring server space Uploading the Web pages Testing the pages after they ve been uploaded Obtaining a Domain Name The domain name uniquely identifies a site by assigning a name to the IP address of the Web server. See Figure I-12 for an example of a domain name, which appears in an address box as part of a longer URL. Domain names must be registered through an ICANN-accredited registrar. Some popular registrars include Go Daddy Network Solutions, Inc. Register.com, Inc. Some Internet service providers (ISPs) or Web hosts will obtain the domain name for you if you use their service to host your site. Lesson 1 11
Acquiring Server Space The same commercial ISP you use to connect to the Internet may also offer Web hosting services for an extra charge. Some companies are also strictly Web hosting providers. ISPs that offer Web hosting services include Biz.ly (http://www.biz.ly) Bravenet (http://www.bravenet.com) Webs (http://www.webs.com) Before you decide on a host, you should think about the technologies your site will incorporate, such as PHP, Cold Fusion, or ASP, and the monthly or yearly fee. Page DW15 lists some questions that will help you decide on a Web host. You can also use one of the following Web host searches to find a host that will meet your criteria: The Web Host Industry Review (http://www.thewhir.com/find/web-hosts/) FindMyHosting.com (http://www.findmyhosting.com/) CompareWebHosts.com (http://www.comparewebhosts.com/) Publishing the Web Site Publishing, or uploading, your Web site refers to the process of transmitting the Web site files from your computer to the Web server, making your site accessible to visitors. Uploading Web pages is usually done using one of the following methods. FTP applications. Software programs designed specifically for uploading and downloading files. Such programs include Fetch (Macintosh) and WS-FTP (Windows). Web-based FTP utility. Your Web hosting service will include a Web-based FTP utility accessed only through their host site. It allows you to upload, edit, and manage files online. Web authoring applications. Applications such as Dreamweaver have FTP capabilities that allow users to upload pages after they re created. Windows Web Publishing Wizard. This is the application that FrontPage uses to upload pages to the server. 12 Using Dreamweaver, Part 1
Reviewing and Testing a Web Site Reviewing and testing the site should be done throughout the development process as well as when the site is finished. Reviewing and testing your site means making sure the site is cross-platform compatible as well as cross-browser compatible. Certain elements and technologies may work on only one platform or browser and not others. It s important to make sure the site works exactly as you intend it to. It s very difficult to design Web pages that will appear exactly the same in every Web browser and on every platform. The differences may be subtle, but they ll be noticeable. In addition to browser differences, the end-user s platform or operating system can also affect the way that Web pages are displayed. An operating system can affect both the fonts and colors of Web pages. Because of the differences in styles, widths, and heights of the various typefaces, text that s displayed on a Web page can shift significantly when viewed on different platforms. When designing text for your Web pages, it s better to define the font size in terms of pixels instead of points, since a pixel is the same on any platform and on any browser whereas point sizes can vary. Colors can appear differently across various platforms since operating systems use different methods for defining colors. Maintaining a Web Site Once the site is uploaded and tested, it needs regularly scheduled maintenance, which includes updating products and information, checking links to make sure they still work, and updating the site s look. Read the section on pages DW16 17 for more information on maintaining Web sites. Lesson 1 13
Methods and Tools Used to Create Web Pages There are several options available for creating and editing Web pages, which are described on pages DW17 DW21 of your textbook. Web pages can be created using Text editors, such as Windows Notepad and Macintosh s TextEdit. Because Web pages are nothing more than ASCII text files that are saved with the.htm or.html extension, you can use the text editor available to you to enter and edit HTML or XHTML code. HTML or XHTML editors, such as Adobe HomeSite and BBEdit. HTML editors are more sophisticated and contain features that check for syntax errors and color code the tags, making it easier to spot problems. Software applications, such as Word, PowerPoint, Excel, Adobe Photoshop, and3 Publisher. Many software applications include a Save As Web Page command that will convert your document into an HTML file. The downside to using this method is that the pages may not be crossbrowser compatible. WYSIWYG editors, such as Microsoft Expression Web, WordPress, Joomla!, Drupal, and Dreamweaver. WYSIWYG editors combine a text/html editor with a graphical user interface that allows the user to view both the actual HTML code and the document as it should appear in a Web browser. HTML and XHTML Tim Berners-Lee developed Hypertext Markup Language (HTML) in 1989 as a way of porting documents between different platforms without having to deal with extraneous hardware and software issues. HTML is based on the Standardized General Markup Language (SGML), which is still widely used to create portable documents. HTML doesn t include all of the elements available with SGML, but it does have one significant feature that SGML doesn t have, which is the ability to jump from one document to another by means of a hotlink or hyperlink. 14 Using Dreamweaver, Part 1
When HTML was first introduced, it consisted of only 30 tags and there was no standard. As new versions were developed, many more tags and attributes were added as well as a new standard set forth by the World Wide Web Consortium (W3C). Many new languages used are based on SGML and HTML. One such language is XML, or Extensible Markup Language. XML was conceived as a means of regaining the power and flexibility of SGML without the complexity. Although it s a restricted form of SGML, XML still retains most of the power of SGML and all of the commonly used features without the complexity. XHTML is a version of HTML using Extensible Markup Language (XML). XHTML uses elements of both HTML and XML to define a Web site s structure and layout. The most recent version of HTML is HTML5, which makes it easier to write code. It also allows developers to create sites optimized for viewing on different output devices, such as tablets and smartphones. Web Page Authoring Programs The most popular Web authoring programs are WYSIWYG editors ( what you see is what you get ). WYSIWYG editors allow designers and developers to view Web pages as they should appear in the Web browser. Developers can edit text, images, and other elements directly in the Design view or switch to Code view in Dreamweaver and directly edit the JavaScript, HTML, or XHTML code. Dreamweaver The most popular visual authoring tool is Dreamweaver software. Dreamweaver has many integrated features that make it an outstanding tool for designing and developing Web sites. Lesson 1 15
ACTIVITY 1 Turn to page DW21 and review the instructions for planning a Web site. Think about a Web site you would be interested in designing. Then using the questions listed in Table 1-4, answer the questions for how you would address such questions for your site. Do not send your answers into the school. The exercise is for your learning skills. Think about your audience and the purpose as you design your site. For instance, the Sierra Club s Web site is geared towards readers looking for environmental news and conservation updates on a variety its programs (Figure 1). FIGURE 1 The Sierra Club web site shows the mission of the environmental club. 16 Using Dreamweaver, Part 1
ACTIVITY 2 Turn to page DW23 of your textbook and look for Lab 2. Read the problem regarding ISPs. Follow the steps to answer the questions on finding suitable ISPs that you would want to work with for your site. Do not send your answers into the school. The exercise is for your learning skills. You ll find a variety of ISPs listed and reviewed on the Web; a few are seen on the CNET Web site (Figure 2). FIGURE 2 Use a search engine to find ISPs and research their services and costs. Lesson 1 17
Self-Check 1 At the end of each section of Using Dreamweaver, Part 1, you ll be asked to pause and check your understanding of what you ve just read by completing a Self-Check exercise. Answering these questions will help you review what you ve studied so far. Please complete Self-Check 1 now. 1. Define the following terms: a. Typography b. WC3 c. URL d. Browser e. ISP 2. List the 10 basic types of Web pages. (Continued) 18 Using Dreamweaver, Part 1
Self-Check 1 3. List the guidelines for planning a Web site. 4. What are the key features in Dreamweaver CS6? 5. What three steps would you perform to publish a Web site? 6. List some of the advantages of HTML5. Check your answers with those on page 41. Lesson 1 19