INTRODUCTION TO THE INTERNET AND WEB PAGE DESIGN - PDF

Please download to get full document.

View again

of 20
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information Report
Category:

Reviews

Published:

Views: 10 | Pages: 20

Extension: PDF | Download: 0

Share
Related documents
Description
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
Transcript
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 ACKNOWLEDGEMENTS i ii LIST OF FIGURES iv LIST OF TABLES EXPLANATION OF TERMINOLOGY/ABBREVIATIONS ABSTRACT COPYRIGHT STATEMENT ix x xi xii Chapter 1. THE INTERNET AND THE WORLD-WIDE WEB PLANNING FOR WEB DESIGN TECHNICAL CONSIDERATIONS IMAGE EDITING AND PREPARATION BACKGROUNDS, TEXTURES AND ICONS ANIMATION WITH PHOTOSHOP HTML, XHTML AND STYLE SHEETS WEB DESIGN WITH PHOTOSHOP ADOBE DREAMWEAVER REFERENCES , 33, 49, 69, 85, 104, 135,155, 174 VITA APPENDIX iii LIST OF FIGURES Chapter Simple Network Peer-to-Peer Network Client Server Network Internet Access to a Network Monitor Pixels Chapter Kress & Van Leeuewen Model Open/Cluttered designs Icon/Index/Symbol Layout Models Rough Drawing Flow Chart Chapter Web Server Web Server ISP SUU Computer Network F: Drive Content My Computer Icon Content of My Computer Content of F: Drive Creating a New Folder Renaming a Folder public_html Folder Example of Files Names HTML Sample Web Folder Example Chapter Minimal JPEG Compression Medium JPEG Compression Large JPEG Compression GIF Image Example Animated GIF Example Solid Background GIF Images After Touch-up Photo Before Touch-up Photo JPEG Options Menu Image Size Menu iv List of Figures Continued 4.11 Crop Tool Crop on Photo Cropped Image Color Picker Menu Setting Point of Origin for Clone Stamp Using the Clone Stamp Tool Histogram Pallet Levels Menu Unsharp Mask Filter Save for Web and Devices Menu Optimizing for Web Example Optimizing for Web Example Save Optimized As menu Chapter High Resolution Monitor Low Resolution Monitor Color Picker Texturizer Filter Add Noise Filter Creating a New Layer Motion Blur Filter Hue/Saturation menu Completed Texture Crop Tool Options Cropping Navigation Bar to Shape Navigation Bar Layer Layer Style Menu Adding Text to a Button Finished Navigation Bar Renaming Layers Circular Selection Round Button Adding Button Layers Finished Up Button Optimizing the Buttons Saving the Finished Buttons Chapter Animation Frames Animated WOW Example Convert to Frames Mode v List of Figures Continued 6.4 Playing an Animation Entering a Word to Animate Changing the Display Time Looping Options Duplicating a Frame Tweening to Add Frames The Tween Menu Completed Animation Saving the Animation for Web Save Optimized Menu Flower Photo Layer Opacity Frame Example Tween Menu Timeline Menu Converts to Timeline Button Image for Timeline Animation Timeline Parts Timeline Close-up Timeline Twirl-down Timeline Expanded Menu Key Frame Marker New Key Frame Image of Text for Positioning Image with Additional Text Tmeline Layers Chapter Notepad Menu Notepad Open Menu Notepad Editing Window Web Page Example Web Page Rough Drawing Beginning HTML Code Entry Adding HTML Code to Notepad Browser Showing Page Title Browser Showing Banner Photo Additional Code Added to Notepad Browser Showing Sidebar Text Browser Showing Added Photo Notepad With More Text vi List of Figures Continued 7.14 Browser With Added Link Text Browser With Added Background Color Browser With Text Relocated Browser Showing Everything In Correct Position Complete HTML Code Style Sheet Chapter Water Tank Photo Autumn Photo Autumn Close-up Autumn Photo Close-up Save Menu Images Folder Save As Menu HTML Table Code Photoshop Window Layer Pallet Menu Slices Close-up Navigation Text Slices Slice Options Menu Text Layers Save As Menu F: Drive Directory Browser Window Photoshop Text Layers Photoshop Slices Adobe Bridge Icon Adobe Bridge Window Bridge Output Panel Close-up of Output Panel Web Picture Gallery Create Gallery Menu Chapter Dreamweaver Opening Screen Creating a New Web Page Dreamweaver Views Buttons Style Sheet Code Dreamweaver Design View Dreamweaver Title Menu Entering Titles in Dreamweaver vii List of Figures Continued 9.8 Dreamweaver Properties Panel Partially Competed Web Page Changing Photo Text Alignment Properties Dreamweaver With Photos Added CSS Styles Listing Editing CSS Rules Tag Selector CSS Styles Panel CSS Rule Definition Menu Dreamweaver New Document Menu Save Style Sheet Menu New Page in Dreamweaver New CSS Rule Icon Linking an External CSS Attaching a Style Sheet Browsing for Folders HTML Code View viii List Of Tables Chapter Internet Timeline Bit Depth Monitor Resolutions Chapter Computer Dive Letters ix Explanation of Terminology/Abbreviations Mac Computer Cmd + Key: Hold down the Command key while pressing the indicated second key. Option + Key: Hold down the Option Key while pressing the indicated second key. Windows Computer Alt + Key: Hold down the Alt Key while pressing the indicated second key. Ctrl + Key: Hold down the Control Key while pressing the indicated key Common Abbreviations/Terms Animation: A series of still image which, when displayed in rapid succession, give the illusion of motion ARPA: Advanced Research Projects Agency Browser: Software program used to display web pages (Internet Explorer) CSS: Cascading Style Sheet Code: Refers to HTML or XHTML computer language code FTP: File Transfer Protocol GIF: An image format using loss-less compression. Supports 256 colors, animation and transparent backgorunds. Used for illustrations and clip art Hexadecimal: A numbering system based on 16 units per place rather than the ten units commonly used in the base ten numbering system. Used to indicate color values in HTML HTML: Hypertext Mark-up Language HTTP: Hypertext Transfer Protocol HTTPS: Hypertext Transfer Protocol Secure. Hyperlink: A hot spot on a web page that when clicked on, causes a browser to load the specified web content Internet: A system of interlinked computers and networks. JPEG: Joint Photographic Experts Group- a lossy image format supporting 16,000,000 colors. Used for photographs Link: Same as a hyperlink SFTP: Secure File Transfer Protocol Tag: An HTML or XHTML command URL: Universal resource locator - essentially a web address WWW: World-Wide Web - The hypertext documents sent over the Internet XHTML: Extensible Hypertext Mark-up Language. x INTRODUCTION TO THE INTERNET AND WEB PAGE DESIGN Lance Douglas Jackson Dr. Jon Smith, Project Supervisor ABSTRACT The Internet is a vast resource for information and recreation yet many do not appreciate 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 necessary for the effective design and execution of web pages. Internet history including a brief discussion of computer networking and the way the Internet evolved to solve connectivity issues among research and government organizations is presented. The World Wide Web with its Hyper Text Mark-up Language was instituted as a way of interlinking hypertext documents that would then be sent over the Internet. Visual design essentials are presented and discussed as they relate to effective web page design. Various ways of implementing web content including images, animations and full page construction are presented. The use of Adobe Photoshop and Dreamweaver CS4, along with Windows Notepad are briefly presented within a context of student selfexploration of each topic. Each chapter concludes with a quiz and application section encouraging the student to apply the concepts learned. xi Introduction to the Internet And Web Page Design by Lance D. Jackson Screen shots and partial screen shots copyright by the respective software companies: Adobe Bridge Adobe Dreamweaver Adobe Photoshop Microsoft Windows XP Professional Used with permission All other text and images COPYRIGHT 2009 Lance D. Jackson ALL RIGHTS RESERVED. No part of this work covered by the copyright herein may be reproduced, copied or used in any form or by any means including but not limited to: graphic electronic or mechanical, including photocopying, recording, taping, web distribution, information storage and retrieval systems without written permission of the copyright holder. For permission to use, submit an online request including all details of the intended use to: xii Chapter 1 The Internet and the World-Wide Web 2 Chapter 1 The Internet and the Web Introduction In today s world, it is the rare person who has not had some exposure to the Internet and the World-Wide Web. According to recent research, as of the year 2004 there were only about 20% of American homes without a computer while 50% of homes had some form of high-speed internet connection 1. Many of us have not only used the Internet but have also created web content in some form or other. The purpose of this chapter is to provide you with a brief introduction to and history of the Internet and the World-Wide Web as well as computer monitor technology and to give you a basic understanding of how they work. While a thorough and technical history is beyond the scope of this work, having some idea of the history and development of the Internet and the web is helpful in understanding the design constraints imposed by the technology. For example, you may need to know why the text formatting of a web page is limited to a few sizes, basic fonts and type styles, why the resolution of a web photo is so low, why exact placement of content is difficult and why images are linked to rather than embedded in HTML documents. As you study web design, you will come to understand and appreciate why there are so many constraints and how we can work around them (or with them) - Facilitating our efforts to become good web designers. It must be said at the outset that the history of the Internet and the web is not exactly cut and dried. There are many versions of the history and many different people who are given credit for the development and continuation of these technologies. The information presented here is a compilation of many of these stories gleaned from various sources. Networks In order to understand the history and workings of the Internet and the web you first need to understand a little about computer networking. A network in its simplest form is just a series of interconnected people, operations, broadcast stations or computers. One example of a network is the old telegraph system that you may remember seeing in a western movie (Figure 1.1). The telegraph enabled communication between two Figure 1.1 Simple Network or more remote locations by using simple binary code (Morse code). A message was first converted from spoken or written language onto a series of clicks with short or long spaces between them (encoding). For example S-O-S, the familiar distress signal is encoded as --- On the 1 See for example: or edu/afs/cs/user/bam/www/numbers.html. Intro to the Internet and Web Page Design 3 receiving end, the clicks and spaces could be decoded by a trained operator into an intelligible message. When computers were first introduced, it soon became apparent that the ability to share information between them was a valuable and desirable capability. Initially, if someone wanted to share data from one computer with another, the information from the first computer had to be printed out in some manner and manually entered into the second computer. With the advent of paper punch cards, and later, magnetic and optical storage devices, the process of data transfer became easier and fewer errors occurred than when done manually. But if data could be exchanged directly between computers tremendous increases in the transfer time and operator efficiency could be realized. To facilitate this information exchange, simple computer networks, sometimes called peer-to-peer networks were developed. These networks basically allow the sharing of information among all the users equally (Figure 1.2). Each workstation can allow or restrict the sharing of specific files, folders and devices such as printers with other workstations. Where more than two computers are connected in this way, the use of a device called a hub or switch facilitates the connections among the various workstations. The computers do not need to be in the same room or even the same city, they can be connected remotely. One disadvantage to this type of network is that when a file or other resource is being shared, it tends to slow down the host computer because it may be trying to accomplish other tasks including execution of its own programs at the same time. It also takes up storage space that might be better used for other purposes. Over time, these simple networks gave way to more sophisticated ones which included network Figure 1.2 Peer-to-Peer Networks printers and file servers. These client/server networks can be found in homes, business and educational institutions throughout the world. Rather than all computers being able to access data from all the others on the network, in the client/server topology, a file server houses the data files and the individual client computers can access the data (documents, images, databases, etc.) from the server as needed. This frees the client machines from having to house shared data and allows them to run programs and processes the data much more quickly. Figure 1.3 illustrates this type of network. In larger institutions, there may actually be many smaller interconnected local area networks (LANs). A LAN is a computer network that covers a small geographic area such as a home, office or localized group of buildings. The addition 4 Chapter 1 The Internet and the Web of a specialized computer called a router to the network enables the network to communicate with other networks, or connect to the Internet (Figure 1.4). Switch Mail Server File Server a series of interconnected networks or a network of networks. If you can visualize the illustration of Figure 1.4 in which the cloud representing the Internet is composed of thousands of additional networks, all interconnected, you have a basic understanding of what the Internet Web is. These networks Server connect to each other through various means including fiber optic cable, satellite, telephone cable and microwave. Mac Computer When you connect to the Internet through a stand-alone computer either at home or some other location whether it be through wireless, dial-up, DSL, cable or satellite, you are joining a network hosted by your Internet Service Provider (ISP). You may not physically see or even know about the other computers on the network, but they are there nonetheless sharing the same Internet access which helps to explain the slowdown experienced during times of heavy use. The Internet PC Computer Figure 1.3 Client-Server Network So what is this thing called the Internet? In its simplest terms, the Internet is nothing more than Unix Computer The Internet has revolutionized the Network Printer computer and communication world. Its predecessors, radio, television, telegraph, telephone and computers helped set the stage for the integration of capabilities that has become the Internet. The first recorded description of interactions that could be accomplished through networking was a series of memos written by J.C.R. Licklider then working at MIT. In 1962 he envisioned a global interconnection of computers through which data and programs could be quickly accessed from any site. Licklider was the first head of the computer program at the Advanced Research Projects Agency (ARPA) 2. While there he convinced his succes- Intro to the Internet and Web Page Design 5 sors of the importance of his networking concept and they eventually worked to help develop the Internet. other along the same route. The path is decided upon before the transmission starts. The route is dedicated and exclusive. The path is released for other users only when the session is finished. An Meanwhile Leonard Kleinrock at MIT published the first paper on packet switching theory in July The first book on the subject was example of circuit switching is a dial-up modem using a telephone line. The path from the computer to the service provider is fixed. Data moves published in Kleinrock convinced Lawrence G. Router Internet Roberts of the feasibility of his ideas and in 1965, working with Thomas Merrill, Roberts Switch Mail Web connected a computer in Massachu- Server Server setts to a computer in California with a slow speed dial-up telephone line thus File Server creating the first wide-area computer network. They also found that circuit Mac PC Unix Network switching was Computer Computer Computer Printer totally inadequate - confirming the need for packet switching. Figure 1.4 Internet Access to a Network from the computer to the modem, from the modem to the telephone line, from the telephone Circuit switching is a way of transmitting data through a fixed and predetermined path of wires, switches and other devices. Circuit switched data is transmitted serially from one place to an- line (through a maze of wire and switches) to the service provider. The path cannot be used by anyone else whether it is for a different on-line session or a simple telephone conversation until 2 The Advanced Research Projects Agency (ARPA) changed its name to Defense Advanced Research Projects Agency (DARPA) in 1971, then back to ARPA in 1993, and back to DARPA in 1996. 6 Chapter 1 The Internet and the Web the initial session is finished and the path is released. In packet switching, computer data is broken into small chunks. Each chunk is placed in a package of data called a packet. The packet contains (in addition to the original data) the addr
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks