INTRODUCTION TO THE INTERNET AND WEB PAGE DESIGN

INTRODUCTION TO THE INTERNET AND WEB PAGE DESIGN

A Project Presented to the Faculty of the Communication Department at Southern Utah University

In Partial Fulfillment of the Requirements for the Degree Master of Arts in Professional Communication

By Lance Douglas Jackson Dr. Jon Smith, Project Supervisor

April 2009

APPROVAL PAGE

The undersigned, appointed by the dean of the College of Humanities and Social Science at Southern Utah University, have examined the project entitled:

INTRODUCTION TO THE INTERNET AND WEB PAGE DESIGN

Submitted 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 Smith

_________________________________________ Professor Arthur Challis

________________________________________ Professor Lionel Grady

________________________________________ Mr. Mark Walton

________________________________________ Professor Suzanne Larson Graduate Director

DIGITIZATION PERMISSION FORM

I, Lance D. Jackson, give permission to the Southern Utah University Library to digitize and 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. Jackson

Date

ACKNOWLEDGEMENTS I wish to acknowledge the following individuals for their help, Support and encouragement in the completion of this project and the requirements of the Master's Degree: 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 begun to aspire to greater heights than I had previously though possible. Committee members Dr. Arthur Challis and Lionel Grady for their friendship and support. 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 to strive 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 design and execution. I especially acknowledge and thank Mr. Mark Walton, Director of Web Services at 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 improved the 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 CONTENTS

TITLE PAGE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i ACKNOWLEDGEMENTS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii LIST OF FIGURES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv LIST OF TABLES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix EXPLANATION OF TERMINOLOGY/ABBREVIATIONS . . . . . . . . . . . . . . . . . . . . x ABSTRACT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi COPYRIGHT STATEMENT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii Chapter 1. THE INTERNET AND THE WORLD-WIDE WEB . . . . . . . . . . . . . . . . . . . . 1 2. PLANNING FOR WEB DESIGN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 3. TECHNICAL CONSIDERATIONS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 4. IMAGE EDITING AND PREPARATION . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 5. BACKGROUNDS, TEXTURES AND ICONS . . . . . . . . . . . . . . . . . . . . . . . . 71 6. ANIMATION WITH PHOTOSHOP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 7. HTML, XHTML AND STYLE SHEETS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 8. WEB DESIGN WITH PHOTOSHOP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 9. ADOBE DREAMWEAVER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 REFERENCES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14, 33, 49, 69, 85, 104, 135,155, 174 VITA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 APPENDIX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

iii

LIST OF FIGURES

Chapter 1 1.1 Simple Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.2 Peer-to-Peer Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.3 Client Server Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.4 Internet Access to a Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.5 Monitor Pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Chapter 2 2.1 Kress & Van Leeuewen Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 2.2 Open/Cluttered designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.3 Icon/Index/Symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 2.4 Layout Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 2.5 Rough Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 2.6 Flow Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Chapter 3 3.1 Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 3.2 Web Server ISP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 3.3 SUU Computer Network . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 3.4 F: Drive Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 3.5 My Computer Icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 3.6 Content of My Computer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 3.7 Content of F: Drive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 3.8 Creating a New Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 3.9 Renaming a Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 3.10 public_html Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 3.11 Example of Files Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 3.12 HTML Sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 3.13 Web Folder Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Chapter 4 4.1 Minimal JPEG Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 4.2 Medium JPEG Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 4.3 Large JPEG Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 4.4 GIF Image Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 4.5 Animated GIF Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 4.6 Solid Background GIF Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 4.7 After Touch-up Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 4.8 Before Touch-up Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 4.9 JPEG Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 4.10 Image Size Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

iv

List of Figures Continued

4.11 Crop Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 4.12 Crop on Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 4.13 Cropped Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 4.14 Color Picker Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 4.15 Setting Point of Origin for Clone Stamp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 4.16 Using the Clone Stamp Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 4.17 Histogram Pallet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 4.18 Levels Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 4.19 Unsharp Mask Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 4.20 Save for Web and Devices Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 4.21 Optimizing for Web Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 4.22 Optimizing for Web Example 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 4.23 Save Optimized As menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Chapter 5 5.1 High Resolution Monitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 5.2 Low Resolution Monitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 5.3 Color Picker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 5.4 Texturizer Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 5.5 Add Noise Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 5.6 Creating a New Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 5.7 Motion Blur Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 5.8 Hue/Saturation menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 5.9 Completed Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 5.10 Crop Tool Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 5.11 Cropping Navigation Bar to Shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 5.12 Navigation Bar Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 5.13 Layer Style Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 5.14 Adding Text to a Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 5.15 Finished Navigation Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 5.16 Renaming Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 5.17 Circular Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 5.18 Round Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 5.19 Adding Button Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 5.20 Finished "Up" Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 5.21 Optimizing the Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 5.22 Saving the Finished Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

Chapter 6 6.1 Animation Frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 6.2 Animated "WOW" Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 6.3 Convert to Frames Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

v

List of Figures Continued

6.4 Playing an Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 6.5 Entering a Word to Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 6.6 Changing the Display Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 6.7 Looping Options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 6.8 Duplicating a Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 6.9 "Tweening" to Add Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 6.10 The Tween Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 6.11 Completed Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 6.12 Saving the Animation for Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 6.13 Save Optimized Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 6.14 Flower Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 6.15 Layer Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 6.16 Frame Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 6.17 Tween Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 6.18 Timeline Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 6.19 Converts to Timeline Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 6.20 Image for Timeline Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 6.21 Timeline Parts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 6.22 Timeline Close-up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 6.23 Timeline Twirl-down . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 6.24 Timeline Expanded Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 6.25 Key Frame Marker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 6.26 New Key Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 6.27 Image of Text for Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 6.28 Image with Additional Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 6.29 Tmeline Layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Chapter 7 7.1 Notepad Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 7.2 Notepad Open Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 7.3 Notepad Editing Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 7.4 Web Page Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 7.5 Web Page Rough Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 7.6 Beginning HTML Code Entry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 7.7 Adding HTML Code to Notepad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 7.8 Browser Showing Page Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 7.9 Browser Showing Banner Photo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 7.10 Additional Code Added to Notepad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 7.11 Browser Showing Sidebar Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 7.12 Browser Showing Added Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 7.13 Notepad With More Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

vi

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download