Web Topics. Working with Web Pages. Color Theory for Web Page Design. Languages Used in Web Design. Creating Personal and Business Web Pages

Transcription

1 Web Topics Working with Web Pages Coor Theory for Web Page Design n As for presentation side design, coors for Web pages shoud be seected according to accepted principes of coor theory. Designers often seect one of three basic coor themes: A triadic coor theme uses three coors that are equidistant on the coor whee. A compementary coor theme uses coors that are opposite each other on the coor whee. An anaogous coor theme uses coors that are next to each other on the coor whee. n Another option is a monochromatic coor theme, which uses one coor aong with tints or shades of that coor. n Coor 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. Generay speaking, bright coors draw attention whie darker coors can ead to a more muted response from viewers. n Coor theory aso assigns particuar emotiona responses to specific coors that a Web designer shoud be aware of. Red, for exampe, conveys power, passion, and importance. Green may be used to denote growth, stabiity, or an environmenta approach. Acquiring Graphics for Web Pages n Web pages require images for visua interest. Images are generay saved in JPG format and may be acquired by scanning existing photos, taking pictures with a digita camera, or downoading images from reputabe onine sources such as stock photo vendors. n You may aso purchase images, both photos and cip art, on CD or DVD. This is a good way to acquire speciaized images such as scros, symbos, or pictures that reate to particuar topics. Languages Used in Web Design n Basic Web pages are constructed using HTML (Hypertext Markup Language) coding. This anguage is sufficient for pacing text and graphics on a page. n To simpify the process of storing and sharing data over different types of patforms, Web designers often use XHTML (extensibe Markup Language). XHTML is HTML in XML syntax. XHTML is stricter then HTML in that it does not aow the user to have any apses in coding and structure. n A designer may use DHTML (Dynamic HTML) to add interactivity and animation to a Web site. DHTML combines HTML with a scripting anguage such as JavaScript to run dynamic content after a Web page has oaded in a browser. Animation can aso be added by embedding Fash objects in a Web page. n Other high-eve anguages such as Python and Per can be used to create Web site content. Per is especiay usefu for processing arge amounts of data for heaviy used Web sites. n You can earn more about computer programming from onine tutorias and sites such as code.org. Creating Persona and Business Web Pages n Before you begin the process of creating Web content, you may find it hepfu to create a storyboard of your Web site. A storyboard is a map or pan that defines the ayout, organization, and navigationa structure of the site. n A Web page usuay contains inks to other pages; it shoud incude visua eements such as graphics, tabes, and ists; and it shoud effectivey use fonts and background eements. The text on a Web page shoud aways be free from errors. n You have a number of options for creating your Web pages. For a simpe Web site, you can enter HTML code directy into a text editor such as Notepad, or you can save a word processing document in HTML format. You can aso use an HTML editor such as HomeSite or BBEdit. These programs feature text editing and an easier way to add HTML tags. 1

2 2 Web Topics Web Topics 2 n WYSIWYG Web page editors are sophisticated editing programs that et you create a page without entering tags yoursef. (WYSIWYG stands for What You See Is What You Get. ) These appications are amost as easy to use as a word processor and feature many of the same kinds of editing and formatting toos. You set up the page to ook the way you want, incuding graphics or hyperinks, and the appication automaticay handes the HTML coding for you. Adobe Dreamweaver is an exampe of a program that automates the process of formatting documents for the Web. Microsoft Expression is a WYSIWYG editor you can downoad for free. n Some WYSIWYG editors wi aso hep you to create dynamic Web content such as rotating banners and roover buttons using DHTML coding and work with XHTML content by creating XSLT (Extensibe Styesheet Language Transformations) pages. n Create visua interest on your Web pages by adding graphics such as pictures, charts, iustrations, tabes of data, or diagrams. To prevent your pages from being too static, and therefore du, you can buid in animation of various sorts. Incude pictures that transition from one to another, menus that cascade, buttons that change appearance when you position the mouse over them or cick on them, videos to deiver content visuay, animated graphics such as those you can create using Fash, and so on. Figure 1 A Web editor such as Microsoft Expression ets you see the content as you buid the code.

3 Web Topics 3 Appy 1 In this activity, you have the opportunity to use what you have earned about Web page design to pan, design, and deveop 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 wi create the Web site for. You may want to conduct onine research to see how simiar businesses have designed their Web sites. 2. Use storyboarding techniques to hep you ay out the pages and pan how they wi be inked. 3. Seect the toos you wi use to deveop the site. For exampe, wi you use HTML, DHTML, or XHTML editors? Wi you need to convert from one to another? 4. Use the principes of design and coor theory to make sure the pages in the Web site are consistent, appeaing, and readabe. Make sure that the fonts and backgrounds are used consistenty. If possibe, incude a ist or tabe on your site. 5. Acquire image fies by scanning or saving a photo from a digita camera and insert one or more images on your pages. 6. If your Web page editor aows, try working with dynamic content using DHTML. 7. Pubish your Web site to a host and invite comments from your peers. Take turns examining the HTML/XHTML code of pages created by your cassmates. Communicating on the Web n There are a variety of ways to communicate with others onine, ranging from instant messaging with friends to expressing yoursef on socia networking sites and bogs, and sharing photos and video cips. Chatting and Messaging n Internet Reay Chat (IRC) is an Internet service that enabes users to join chat groups, caed channes, and enter into ive, or rea-time, conversations. In addition to IRC channes, most ISPs offer chat forums as we. Chat channes can aso be found within onine video games. n Every channe has a moderator who can remove a sender from the channe for any reason. The standards of behavior differ from channe to channe, so it is best to practice respectfu onine behavior. n Instant messaging is when you send rea-time messages to another Internet user. Instant messaging is ike a chat room, except you get to choose your chat partners. Photo and Video Sharing n Photo and video sharing is using the Internet to send digita photos or video cips to another Internet user. These photos and videos can be shared privatey or pubicy on Web sites and apps, such as Instagram and YouTube. Socia Networking n Sites such as Facebook and LinkedIn et you connect famiy, friends, and business coeagues by inking your own persona profie to those of others. Most socia networking sites are free, athough you have to register an account. n On Facebook, as with other socia networking sites, you can taior your profie to add as much or as itte persona information as possibe, as we as upoading photos, posting messages, and inking to other sites. n Twitter, another popuar socia networking site, ets you create 140-character messages, caed tweets, to keep others up to date on what you are doing or thinking about. You upoad messages to the Twitter.com Web site, where they can be read by anyone who is interested.

4 4 Web Topics Web Topics 4 n Take care to use socia networking appropriatey and responsiby. Remember that everything you do and say is onine for others to see. Aways 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 feeings. n Tips such as the foowing can hep to ensure that your socia networking communications are safe ones. Bogging Do not add just anyone as a friend. Check your settings. Learn how to change your status to invisibe, so others do not know you are onine, or visibe, so they do know you are onine. Remember that your posts and profies can be easiy tracked onine. Don t write or post anything onine that you woud not want your grandparents or teachers to see or that you woud not want posted about yoursef. Never give out private information such as your phone number or address. Never agree to meet a new onine friend in person. n A bog or Webog is a type of Web page diary. Peope create bogs to share their thoughts and opinions. n A bog is stored on a Web server, ike a Web page, and the owner usuay updates it on a reguar basis. Anyone with access to the Internet can read the bog. Bogs are not restricted to ony text. Photo bogs consist soey of digita photographs. n Often, bogs provide a way for readers to comment on the bog content. Using Coaborative Toos for Fie Sharing n Coaborative software enabes peope work together more cosey. With coaborative software, users can share caendars, work on a document together, or even hod meetings through the network. Coaborative software is aso caed groupware. n Many Internet sites offer coaborative capabiity. Microsoft s OneDrive aows a user to post content and then invite other users to share those documents. Googe aso aows users to coaborate by sharing documents, worksheets, and sides. A user who shares content using these sites can specify whether a person can view ony or view and edit content. Using Listservers n LISTSERVE is a commercia product that aows a person to e-mai content to an entire ist of recipients at the same time. Such maiing ists are usuay organized by common interest, and the members of the maiing ist must often petition to join the ist. n Pushing content through a maiing ist can be a very efficient way to communicate the same materia to many interested recipients at the same time.

5 Web Topics 5 Figure 2 An Internet site such as OneDrive aows you to share documents, music, and pictures with peope you invite.