Web Topics Working with Web Pages Color Theory for Web Page Design

Languages Used in Web Design

n

n

As for presentation slide design, colors for Web pages should be selected according to accepted principles of color theory. Designers often select one of three basic color themes: l A triadic color theme uses three colors that are equidistant on the color wheel. l A complementary color theme uses colors that are opposite each other on the color wheel. l An analogous color theme uses colors that are next to each other on the color wheel. n Another option is a monochromatic color theme, which uses one color along with tints or shades of that color. n Color can be used to focus attention on a part of the page you want to emphasize, such as a box containing contact information or recent news. Generally speaking, bright colors draw attention while darker colors can lead to a more muted response from viewers. n Color theory also assigns particular emotional responses to specific colors that a Web designer should be aware of. Red, for example, conveys power, passion, and importance. Green may be used to denote growth, stability, or an environmental approach.

Acquiring Graphics for Web Pages n

Web pages require images for visual interest. Images are generally saved in JPG format and may be acquired by scanning existing photos, taking pictures with a digital camera, or downloading images from reputable online sources such as stock photo vendors. n You may also purchase images, both photos and clip art, on CD or DVD. This is a good way to acquire specialized images such as scrolls, symbols, or pictures that relate to particular topics.

n

n

n

n

Basic Web pages are constructed using HTML (Hypertext Markup Language) coding. This language is sufficient for placing text and graphics on a page. To simplify the process of storing and sharing data over different types of platforms, Web designers often use XHTML (eXtensible Markup Language). XHTML is HTML in XML syntax. XHTML is stricter then HTML in that it does not allow the user to have any lapses in coding and structure. A designer may use DHTML (Dynamic HTML) to add interactivity and animation to a Web site. DHTML combines HTML with a scripting language such as JavaScript to run dynamic content after a Web page has loaded in a browser. Animation can also be added by embedding Flash objects in a Web page. Other high-level languages such as Python and Perl can be used to create Web site content. Perl is especially useful for processing large amounts of data for heavily used Web sites. You can learn more about computer programming from online tutorials and sites such as code.org.

Creating Personal and Business Web Pages n

Before you begin the process of creating Web content, you may find it helpful to create a storyboard of your Web site. A storyboard is a map or plan that defines the layout, organization, and navigational structure of the site. n A Web page usually contains links to other pages; it should include visual elements such as graphics, tables, and lists; and it should effectively use fonts and background elements. The text on a Web page should always be free from errors. n You have a number of options for creating your Web pages. For a simple Web site, you can enter HTML code directly into a text editor such as Notepad, or you can save a word processing document in HTML format. You can also use an HTML editor such as HomeSite™ or BBEdit™. These programs feature text editing and an easier way to add HTML tags. 1

2

n

Web Topics

Web Topics

WYSIWYG Web page editors are sophisticated editing programs that let you create a page without entering tags yourself. (WYSIWYG stands for “What You See Is What You Get.”) These applications are almost as easy to use as a word processor and feature many of the same kinds of editing and formatting tools. You set up the page to look the way you want, including graphics or hyperlinks, and the application automatically handles the HTML coding for you. Adobe® Dreamweaver® is an example of a program that automates the process of formatting documents for the Web. Microsoft Expression is a WYSIWYG editor you can download for free.

Figure 1

n

Some WYSIWYG editors will also help you to create dynamic Web content such as rotating banners and rollover buttons using DHTML coding and work with XHTML content by creating XSLT (Extensible Stylesheet Language Transformations) pages. n Create visual interest on your Web pages by adding graphics such as pictures, charts, illustrations, tables of data, or diagrams. To prevent your pages from being too static, and therefore dull, you can build in animation of various sorts. Include pictures that transition from one to another, menus that cascade, buttons that change appearance when you position the mouse over them or click on them, videos to deliver content visually, animated graphics such as those you can create using Flash, and so on.

A Web editor such as Microsoft Expression lets you see the content as you build the code.

2

Web Topics

3

Apply 1 In this activity, you have the opportunity to use what you have learned about Web page design to plan, design, and develop a Web site for a business. You can do these steps on your own, with a partner, or with a group. 1. First, decide which business you will create the Web site for. You may want to conduct online research to see how similar businesses have designed their Web sites. 2. Use storyboarding techniques to help you lay out the pages and plan how they will be linked. 3. Select the tools you will use to develop the site. For example, will you use HTML, DHTML, or XHTML editors? Will you need to convert from one to another? 4. Use the principles of design and color theory to make sure the pages in the Web site are consistent, appealing, and readable. Make sure that the fonts and backgrounds are used consistently. If possible, include a list or table on your site.

5. Acquire image files by scanning or saving a photo from a digital camera and insert one or more images on your pages. 6. If your Web page editor allows, try working with dynamic content using DHTML. 7. Publish your Web site to a host and invite comments from your peers. Take turns examining the HTML/XHTML code of pages created by your classmates.

Communicating on the Web n

There are a variety of ways to communicate with others online, ranging from instant messaging with friends to expressing yourself on social networking sites and blogs, and sharing photos and video clips.

Photo and Video Sharing n

Chatting and Messaging n

Internet Relay Chat (IRC) is an Internet service that enables users to join chat groups, called channels, and enter into live, or real-time, conversations. In addition to IRC channels, most ISPs offer chat forums as well. Chat channels can also be found within online video games. n Every channel has a moderator who can remove a sender from the channel for any reason. The standards of behavior differ from channel to channel, so it is best to practice respectful online behavior. n Instant messaging is when you send real-time messages to another Internet user. Instant messaging is like a chat room, except you get to choose your chat partners.

Photo and video sharing is using the Internet to send digital photos or video clips to another Internet user. These photos and videos can be shared privately or publicly on Web sites and apps, such as Instagram and YouTube.

Social Networking n

Sites such as Facebook and LinkedIn let you connect family, friends, and business colleagues by linking your own personal profile to those of others. Most social networking sites are free, although you have to register an account. n On Facebook, as with other social networking sites, you can tailor your profile to add as much or as little personal information as possible, as well as uploading photos, posting messages, and linking to other sites. n Twitter, another popular social networking site, lets you create 140-character messages, called “tweets,” to keep others up to date on what you are doing or thinking about. You upload messages to the Twitter.com Web site, where they can be read by anyone who is interested.

4

Web Topics

n

Take care to use social networking appropriately and responsibly. Remember that everything you do and say is online for others to see. Always think about what you are going to write before you post it. You do not want to post content that may embarrass you or hurt another’s feelings. n Tips such as the following can help to ensure that your social networking communications are safe ones. l Do not add just anyone as a “friend.” l Check your settings. l Learn how to change your status to invisible, so others do not know you are online, or visible, so they do know you are online. l Remember that your posts and profiles can be easily tracked online. Don’t write or post anything online that you would not want your grandparents or teachers to see or that you would not want posted about yourself. l Never give out private information such as your phone number or address. l Never agree to meet a new online friend in person.

Blogging n

A blog—or Weblog—is a type of Web page diary. People create blogs to share their thoughts and opinions. n A blog is stored on a Web server, like a Web page, and the owner usually updates it on a regular basis. Anyone with access to the Internet can read the blog. Blogs are not restricted to only text. Photo blogs consist solely of digital photographs. n Often, blogs provide a way for readers to comment on the blog content.

Web Topics

Using Collaborative Tools for File Sharing n

Collaborative software enables people work together more closely. With collaborative software, users can share calendars, work on a document together, or even hold meetings through the network. Collaborative software is also called groupware. n Many Internet sites offer collaborative capability. Microsoft’s OneDrive allows a user to post content and then invite other users to share those documents. Google also allows users to collaborate by sharing documents, worksheets, and slides. A user who shares content using these sites can specify whether a person can view only or view and edit content.

Using Listservers n

LISTSERVE is a commercial product that allows a person to e-mail content to an entire list of recipients at the same time. Such mailing lists are usually organized by common interest, and the members of the mailing list must often petition to join the list. n Pushing content through a mailing list can be a very efficient way to communicate the same material to many interested recipients at the same time.

4

Web Topics

Figure 2

5

An Internet site such as OneDrive allows you to share documents, music, and pictures with people you invite.