Transcription
INTRODUCTION TO THE INTERNETAND WEB PAGE DESIGNA ProjectPresented tothe Faculty of the Communication Departmentat Southern Utah UniversityIn Partial Fulfillmentof the Requirements for the DegreeMaster of Arts in Professional CommunicationByLance Douglas JacksonDr. Jon Smith, Project SupervisorApril 2009
APPROVAL PAGEThe undersigned, appointed by the dean of the College of Humanities andSocial Science at Southern Utah University, have examined the project entitled:INTRODUCTION TO THE INTERNETAND WEB PAGE DESIGNSubmitted by Lance Douglas Jackson,A candidate for the degree of Master of Art in Professional Communication,and hereby certify that, in their opinion, it is worthy of acceptance.Professor Jon SmithProfessor Arthur ChallisProfessor Lionel GradyMr. Mark WaltonProfessor Suzanne LarsonGraduate Director
DIGITIZATION PERMISSION FORMI, Lance D. Jackson, give permission to the Southern Utah University Library to digitizeand archive my capstone project entitled Introduction to the Internet and Web Page Design, submitted for the Master of Arts degree in Professional Communication.Lance D. JacksonDate
ACKNOWLEDGEMENTSI wish to acknowledge the following individuals for their help, Support andencouragement in the completion of this project and the requirements of the Master’sDegree:Dr. Jon Smith, chair of my committee for his guidance support and encouragement and for inspiring me to think out of the box. Because of his guidance, I have begunto aspire to greater heights than I had previously though possible.Committee members Dr. Arthur Challis and Lionel Grady for their friendship andsupport.Dr. Suzanne Larson, Graduate Director, for always believing in me and being supportive and for her guidance and advice.I acknowledge the help and support of the graduate faculty of the SUU Communication Department. Dr. L. Paul Husselbee has been an great inspiration tostrive for the best technically correct workmanship. His courses have been demanding,yet fair and have helped me to see the importance of being thorough in research designand execution.I especially acknowledge and thank Mr. Mark Walton, Director of Web Servicesat Southern Utah University and member of my committee and my wife, Deborah K.Jackson. Mr. Walton has provided much in the way of content editing and suggestions.His expertise and suggestions have not only been appreciated but have also improvedthe quality and usefulness of the project. Debbie has been supportive from the beginning, without her support, this project would not have been possible.ii
TABLE OF CONTENTSTITLE PAGE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .iACKNOWLEDGEMENTS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .iiLIST OF FIGURES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .ivLIST OF TABLES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .ixEXPLANATION OF TERMINOLOGY/ABBREVIATIONS . . . . . . . . . . . . . . . . . . . .xABSTRACT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiCOPYRIGHT STATEMENT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiiChapter1.THE INTERNET AND THE WORLD-WIDE WEB . . . . . . . . . . . . . . . . . . . .12.PLANNING FOR WEB DESIGN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153.TECHNICAL CONSIDERATIONS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354.IMAGE EDITING AND PREPARATION . . . . . . . . . . . . . . . . . . . . . . . . . . . .515.BACKGROUNDS, TEXTURES AND ICONS . . . . . . . . . . . . . . . . . . . . . . . .716.ANIMATION WITH PHOTOSHOP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .877.HTML, XHTML AND STYLE SHEETS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1058.WEB DESIGN WITH PHOTOSHOP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1379.ADOBE DREAMWEAVER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157REFERENCES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14, 33, 49, 69, 85, 104, 135,155, 174VITA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176APPENDIX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178iii
LIST OF FIGURESChapter 11.1 Simple Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1.2 Peer-to-Peer Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1.3 Client Server Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1.4 Internet Access to a Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1.5 Monitor Pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .234511Chapter 22.1 Kress & Van Leeuewen Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2.2 Open/Cluttered designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2.3 Icon/Index/Symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2.4 Layout Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2.5 Rough Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2.6 Flow Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202122252728Chapter 33.1 Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.2 Web Server ISP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.3 SUU Computer Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.4 F: Drive Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.5 My Computer Icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.6 Content of My Computer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.7 Content of F: Drive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.8 Creating a New Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.9 Renaming a Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.10 public html Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.11 Example of Files Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.12 HTML Sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3.13 Web Folder Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36363738393939394040414142Chapter 44.1 Minimal JPEG Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.2 Medium JPEG Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.3 Large JPEG Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.4 GIF Image Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.5 Animated GIF Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.6 Solid Background GIF Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.7 After Touch-up Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.8 Before Touch-up Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.9 JPEG Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.10 Image Size Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53535354545458585959iv
List of Figures Continued4.11 Crop Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.12 Crop on Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.13 Cropped Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.14 Color Picker Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.15 Setting Point of Origin for Clone Stamp . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.16 Using the Clone Stamp Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.17 Histogram Pallet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.18 Levels Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.19 Unsharp Mask Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.20 Save for Web and Devices Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.21 Optimizing for Web Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.22 Optimizing for Web Example 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4.23 Save Optimized As menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60606161626263636464666667Chapter 55.1 High Resolution Monitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.2 Low Resolution Monitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.3 Color Picker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.4 Texturizer Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.5 Add Noise Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.6 Creating a New Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.7 Motion Blur Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.8 Hue/Saturation menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.9 Completed Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.10 Crop Tool Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.11 Cropping Navigation Bar to Shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.12 Navigation Bar Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.13 Layer Style Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.14 Adding Text to a Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.15 Finished Navigation Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.16 Renaming Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.17 Circular Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.18 Round Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.19 Adding Button Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.20 Finished “Up” Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.21 Optimizing the Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5.22 Saving the Finished Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . er 66.1 Animation Frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 886.2 Animated “WOW” Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 896.3 Convert to Frames Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89v
List of Figures Continued6.4 Playing an Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 896.5 Entering a Word to Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906.6 Changing the Display Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906.7 Looping Options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906.8 Duplicating a Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916.9 “Tweening” to Add Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916.10 The Tween Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 926.11 Completed Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 926.12 Saving the Animation for Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 936.13 Save Optimized Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 936.14 Flower Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 946.15 Layer Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 946.16 Frame Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 956.17 Tween Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 956.18 Timeline Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 966.19 Converts to Timeline Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 966.20 Image for Timeline Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976.21 Timeline Parts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976.22 Timeline Close-up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976.23 Timeline Twirl-down . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986.24 Timeline Expanded Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986.25 Key Frame Marker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986.26 New Key Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 996.27 Image of Text for Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 996.28 Image with Additional Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006.29 Tmeline Layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100Chapter 77.1 Notepad Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1077.2 Notepad Open Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1077.3 Notepad Editing Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1087.4 Web Page Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1087.5 Web Page Rough Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1117.6 Beginning HTML Code Entry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1117.7 Adding HTML Code to Notepad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1137.8 Browser Showing Page Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1147.9 Browser Showing Banner Photo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1157.10 Additional Code Added to Notepad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1167.11 Browser Showing Sidebar Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1167.12 Browser Showing Added Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1177.13 Notepad With More Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118vi
List of Figures Continued7.14 Browser With Added Link Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7.15 Browser With Added Background Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7.16 Browser With Text Relocated. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7.17 Browser Showing Everything In Correct Position. . . . . . . . . . . . . . . . . . . . . .7.18 Complete HTML Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7.19 Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118120121122123125Chapter 88.1 Water Tank Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1388.2 Autumn Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1398.3 Autumn Close-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1398.4 Autumn Photo Close-up 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1408.5 Save Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1418.6 Images Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1418.7 Save As Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1418.8 HTML Table Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1418.9 Photoshop Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1438.10 Layer Pallet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1438.11 Menu Slices Close-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1448.12 Navigation Text Slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1448.13 Slice Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1448.14 Text Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1468.15 Save As Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1468.16 F: Drive Directory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1468.17 Browser Window . . . . . . . . . . . . . .
preciate its history or the process involved in designing and creating effective web pages. This work seeks to address both the history of the Internet and basic concepts neces
