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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- site and layout design guidance 2
- website planning worksheet
- school pioneer middle school website design rubric
- basics of web design edu
- school district website requirements checklist
- edit sample website brief
- a design and implementation of web based project based
- web designer s success guide kevin airgid
- introduction to the internet and web page design
Related searches
- introduction to java programming and data structures
- convert web page to jpg image
- html web page design examples
- how to save web page as pdf
- introduction to leadership concepts and practice
- forward web page to email
- add web page to desktop
- the internet and higher education
- introduction to the stock market
- web page to desktop windows 10
- introduction to the teaching profession
- an introduction to the theory of dissonance