Web Site Development

Web Site Development Lesson 5 — Polishing and Publishing Your Web Site

Objectives • Describe presentation design, interaction design, and information design. • Change background graphics and other properties of pages in a Web site. • Create a random access navigation system. Lesson 5 – Polishing and Publishing Your Web Site

Objectives (continued) • Test hyperlinks and page properties. • Prepare to publish a Web site. • Publish a Web site. • Create Web pages in other programs. Lesson 5 – Polishing and Publishing Your Web Site

Essential Elements of Web Site Design • The three primary elements of Web site design are • Presentation design – Concerns the look and feel of the Web site. • Also includes testing, polishing, and publishing the site. • Interaction design – Concerns how people navigate the Web site. • Also includes testing of hyperlinks. • Information design – Concerns the actual content (information) on the site. Lesson 5 – Polishing and Publishing Your Web Site

Change Page Background Properties • Professional Web designers usually use a graphic image instead of a solid color for a page background. • Graphics add a consistent look, feel, and texture to a page. • Creating an impressive background for your site is a part of presentation design. • Use the BACKGROUND= attribute of the <BODY> tag to use an image file. • <BODY BACKGROUND=“images/back1.gif”> • In a Web design program, use a Page Properties dialog box to specify an image. Lesson 5 – Polishing and Publishing Your Web Site

A Page Properties Dialog Box When using a Web site design program instead of coding HTML directly, the background is usually specified in a Page Properties dialog box, similar to this one. Click the Browse button to locate the image or type the path directly into the box. Lesson 5 – Polishing and Publishing Your Web Site

A Page with a Background Image This figure shows a Web page with a GIF image inserted as a background. You can see, however, that the image makes the text hard to read. You must often experiment with vari-ous images to find the right one that complements the other elements on the page. Lesson 5 – Polishing and Publishing Your Web Site

Page with New Background Images These figures show the same Web page as the previous slide, but with two different background images applied. Note that both make the page easier to read than the previous image. Lesson 5 – Polishing and Publishing Your Web Site

Modify Page Properties Throughout a Site • After applying a background image, you may need to adjust the color scheme used on the site to work with the background image. • Once the image and color scheme are set, you need to apply the same image and scheme to all pages in the site to achieve a consistent look. • Some design programs allow you to automatically apply the same properties from one page to other pages in the site. • In other programs, you may need to copy and paste properties from one page to other pages. • You should also specify a background color for the pages in case the browser has a problem loading the image file. Lesson 5 – Polishing and Publishing Your Web Site

Add a Random Navigation System • Site navigation is a critical element of interaction design. • A random access navigation system allows a user to jump to any page in the site from any other page. • You can create navigation bars on each page with links to other pages. • Some design programs can create this automatically, while others require you to create them manually. • Separate the links in the navigation bar with spaces or vertical bars, or create buttons for each page. Lesson 5 – Polishing and Publishing Your Web Site

Menu Page with Navigation Bar This figure shows the main menu page of a site with a navigation bar at the bottom of the page. The user can click the hyperlinks in the menu or the links in the bar. Adding the bar to each page gives the user a consistent feel for navigating the site. Navigation bar Lesson 5 – Polishing and Publishing Your Web Site

Topic Page with Navigation Bar This figure shows the navigation bar from the menu page copied to one of the topic pages. Also note the graphic link back to the menu page. You may not want all pages to have the navi-gation bar. A section of your site may require linear viewing and, in that case, only the first page in that section would contain the bar. Lesson 5 – Polishing and Publishing Your Web Site

Test Links and Page Properties • A critical area of interaction design is to test all links to be sure they function and go to the right place. • A broken link is one that goes to a non-existent page or the wrong page. • Design programs usually have some utility to check links and alert you to broken links. • This utility cannot find links to the wrong pages, however. You still should check all links manually. • While checking links, examine all pages looking for presentation design problems as well. Lesson 5 – Polishing and Publishing Your Web Site

Site Hyperlink View Web design programs have a map or hyperlink view that shows all pages and indicates links from one page to another using lines to connect the pages. If a broken link is detected, it is usually marked in red or has a special icon or symbol next to it. Lesson 5 – Polishing and Publishing Your Web Site

Prepare to Publish a Site • Publishing a site means to place the files and folders on a Web server. • Web programs use different methods to publish a site. • You need to acquire an URL for your site before you can publish it. • You need to know what protocol to use to publish the site. • You then have to tell your design program how to communicate with the Web server. Lesson 5 – Polishing and Publishing Your Web Site

Enter the Publishing Information Most Web design programs have some dialog box similar to this one where you indicate the settings for publishing your site. The Access box shows that the FTP protocol will be used and the FTP Host is the Web server to receive the files. Lesson 5 – Polishing and Publishing Your Web Site

Publish a Site • When your preparation work is done, you are ready to upload your site. • Once published to the Web server, your site can be viewed by anyone. • Design programs usually have a view that shows the local files (on your computer) and the remote (server) files. • You usually click a button to start transferring files from the local side to the remote side. Lesson 5 – Polishing and Publishing Your Web Site

Local Files in Display Mode This figure shows a site about to be published. The local files are all listed on the right side, and there is currently nothing on the remote side. Clicking the Put Files button will start copying the files from the local machine to the remote machine. Put Files button Lesson 5 – Polishing and Publishing Your Web Site

Files Copied to Web Server This figure shows the local and remote servers after all files have been transferred. The site is now on the Web server and can be viewed by entering the site URL into a Web browser. Remote server files Local server files Lesson 5 – Polishing and Publishing Your Web Site

Create a Web Page in a Word Processing Application • Many word processing programs allow you to convert a text document into a Web page. • The File menu usually contains an option to Save as Web Page or something similar. • Save the file in HTML format in your Web site folder. • You can then open the page in your Web design program and format it accordingly. Lesson 5 – Polishing and Publishing Your Web Site

Clean Up Code in Word-Processed Web Pages Word processors add unnecessary code when a document is converted to HTML because it may still have to open the page as a normal document. The figure on the left shows an HTML page with unnecessary code. Some design programs have a feature that examines a page and removes all unnecessary code. Dreamweaver’s Clean Up HTML utility Lesson 5 – Polishing and Publishing Your Web Site

Create Web Pages from PowerPoint • A presentation can be saved as a linear series of Web pages. • Sounds, movies, and other graphics can be included when converting the presentation to Web pages. • You can link to the presentation from your Web site. • Click the Save as Web Page option on the File menu. • You can click the Publish button in the Save as dialog box to refine how the presentation is saved. Lesson 5 – Polishing and Publishing Your Web Site

Create Web Pages from Excel • You can save Excel worksheets and charts as Web pages. • Click the Save as Web Page option on the File menu. • Click the Publish button in the Save as dialog box to refine what is saved. • You can save the entire workbook, one or more worksheets, or one or more charts or diagrams. • Create a link from your Web site to the saved and converted Excel pages. Lesson 5 – Polishing and Publishing Your Web Site

Saving Other Applications as Web Pages When you save an Excel, PowerPoint, or other application document as a Web page, it will create a folder to contain the files required to display the Web page properly, as well as the main HTML file itself, as shown here. Excel Web page folder Excel Web page Lesson 5 – Polishing and Publishing Your Web Site

Summary • Presentation design, interaction design, and information design are three important concepts in Web site design. • Use background graphics and change other Web page properties to add visual interest and texture to pages in a site. • You should apply page properties consistently to Web pages on your Web site. • Add a navigation bar to create a random access navigation system. Lesson 5 – Polishing and Publishing Your Web Site

Summary (continued) • You must test hyperlinks and make sure page properties are consistent before you publish a site. • You can use protocols such as FTP to upload a Web site to an Internet Web server. Before you publish, you may need to supply the correct URL, login name, and password to access the Web server. Lesson 5 – Polishing and Publishing Your Web Site

Summary (continued) • Publishing a Web site on the Internet means transferring files and folders from your local Web site to the remote server. • People with many different skills and backgrounds can collaborate to produce content for a Web site using word processing, spreadsheet, and presentation software. Lesson 5 – Polishing and Publishing Your Web Site

Web Site Development