Web Design I. Introduction. This first exercise will cover the following concepts: Tutorial Topics

Transcription

1 Web Design I Web Enhancement XHTML/CSS Tutorial One Getting Started With the Internet Introduction Tutorial Topics This is the first of a series of tutorials to assist students enrolled in the XHTML/CSS classes of the Digital Communication Department at Houston Community College Southwest. Its purpose is to provide guided practice that augments instruction delivered in the classroom for traditional classes or online for distance education. It is not intended as a comprehensive standalone substitute for instruction. This first exercise will cover the following concepts: Understanding parts of the Internet Acquiring an FTP site Downloading Internet resources from the World Wide Web Uploading files to a server location using FTP Considering technology in the design of a Web site Developing a concept for Web site development Understanding parts of the Internet The Internet is made up of various pieces, including the following: World Wide Web (HTTP Hypertext Transfer Protocol): used to transfer data over the World Wide Web. That's why all Web site addresses begin with " Whenever you type a URL into your browser and hit Enter, your computer sends an HTTP request to the appropriate Web server. The Web server, which is designed to handle HTTP requests, then sends to you the requested HTML page. FTP File Transfer Protocol: Provides facilities for transferring to and from remote computer systems. Usually the user transferring a file needs authority to login and access files on the remote system. is part of the standard TCP/IP set of protocols. Sending messages is typically done by SMTP (Simple Mail Transfer Protocol) and receiving messages is handled by POP3 (Post Office Protocol 3), or IMAP (Internet Message Access Protocol). IMAP is the newer protocol, allowing you to view and sort messages on the mail server, without downloading them to your hard drive. Usenet/Newsgroups: Discussion group based on postings about a particular topic, including sports, cars, investing, teen problems and stuff you probably don't want to know about. Users post messages to a news server which then sends them to a bunch of other participating servers. Then other users can access the newsgroup and read the postings. Prepared by Paul Roberts Copyright 2010 by Digital Communication Department. All Rights Reserved

2 Telnet: This is a technology that allows you log in to a Unix computer via a text-based interface. If you have an account on a Telnet server, you can access certain resources on the system such your home directory, your account, FTP files, etc. The downside of Telnet is that, to use it, you need to use Unix commands, which can be a challenge. Acquiring an FTP site You need an FTP site where you will place your coursework. The Digital Communication Department provides limited space for students enrolled in its programs. One of the assignments of this tutorial is to obtain an account. Once you have acquired your FTP account, you must write down four pieces of information: Host name, user name, password and URL. Without this information, you will not be able to access your account. It is your responsibility to keep that information in a safe place. Your instructor can do little to help you. A word about qualifying for an FTP account: If you are enrolled in a class of the Digital Communication Department you qualify for an FTP account. Your application will be forwarded to your instructor, who will approve it. If you are not enrolled, you need not apply. Your attempt will not be approved. At this point, let's apply for the FTP account. Go to the following Web address: Click Apply for web space. At this point, you will be asked to read the Web Site Guidelines and Agreement. After reading it, you must click Agree in order to advance to the application form. Take care to fill out the required fields, indicated with a red asterisk (*). Also write down the essential information on the following form: HCC ID: Primary Address: Host Name: User Name: Password: URL: digicom1.hccs.edu Web Enhancement HTML/CSS Tutorial One Getting Started With the Internet Page 2

3 You will receive an message at your primary address that will verify the last four items on the above list. Write that information down and keep it in a safe place. This is your responsibility. Once you have been approved, you can start practicing the management of your FTP account. We will cover that later. In the meantime, let's move on to downloading information and objects from the Internet via HTTP. Downloading Internet resources from the World Wide Web Acquiring information and objects from the Internet is easy. However, you must be aware of copyright laws. As a rule, you can use anything for purely educational purposes. That falls under the Fair Use provision of copyright law. While this may hold true for stuff you do not publish, anything that is published as your portfolio pieces might be construed as publication. That might open you to legal problems if you use other people's work without written permission. Therefore, be prepared to ask for written permission of the copyright owner of each item you use in your portfolio. When you write for such permission, you need to explain your purpose for using the particular items and that you will limit your use to that purpose. If you do not receive a response from the owner of the copyright, you must not use it. If you receive a written denial of permission, you must honor it. If you receive written permission, you must confine your use to that specified. With that said, let's go through the hoops of obtaining information and objects off the Internet via the World Wide Web. Go to the following URL (Web address): This will put you in a place that has lots of stuff you can play with. Try checking the properties of a picture to see if you can use it: 1. Point mouse to the picture at the top of the page. Right click the mouse and select Properties from the menu. This will show the width and height of the image in pixels. Close the Properties box. 2. Assuming that the picture is what you want, right click it again and select Save Picture As (if you are using Microsoft Internet Explorer) or Save Image As (for Mozilla/Firefox/Netscape). 3. Locate or create a folder for your tutorial experiments. Place the image into that folder. You have now saved an image from the World Wide Web. 4. Now move to which is the home page for Yellowstone National Park. Web Enhancement HTML/CSS Tutorial One Getting Started With the Internet Page 3

4 5. On the File menu, select Save As (Internet Explorer) or Save Page As (Mozilla browsers). Place the files into the folder you created for this. When you check the folder, you will find the file and supporting files located there. 6. Now go for some simple text. On the Yellowstone page, click and drag across the main text of the page. Once highlighted, type CTRL+C to copy it. 7. Open Notepad or similar simple text editor and type CRTL+V to paste it. Now you the simple text from the file. 8. You can view and copy the page's code by moving to the View menu and selecting Source (Internet Explorer) or Page Source (Mozilla browsers). That is a quick rundown on downloading via HTTP. By experimenting and practicing, you might find additional methods. Uploading files to a server location using FTP Before you can display your Web projects on the Internet, you must have them on a server, a remote computer that is configured for that purpose. You have applied for an FTP account on the Digital Communication server. Now it's time to practice management of that space. Put one of the files that you downloaded on that FTP site. Follow these instructions: 1. Assuming you are running Windows XP or Vista, open Internet Explorer. In the locator bar, type ftp:// followed by the host name to your FTP account: ftp://digicom1.hccs.edu 2. Fill out the form that appears with your User Name and Password. Click Log On. This will log you onto the remoter computer, the server. 3. The window will appear as a Windows file window. Open another window and find the files you just downloaded from the Internet. Click a file in that folder and drag it onto the window that shows the remote computer. 4. Open a browser window and type the URL to that file. If my user name were "dsmith" and the file named "pic.jpg" were located in a folder called "pix," I would type the following to view that file from the server: Web Enhancement HTML/CSS Tutorial One Getting Started With the Internet Page 4

5 5. To download the file from the server, drag it from the server window to the appropriate folder on your local computer 6. To remove the file from the server, click on it in the server window and press the Delete key or drag it to the recycle bin. When you are finished, close the window to log off. 7. Practice logging onto the server. Also practice uploading, downloading and removing file to and from your FTP site. Go through the process several times until it becomes second nature to you. When you want to update files that you already have on the server, make the changes to them on your local computer, then upload them again. It is not really a good idea to edit the files directly from the server. Also, be sure that you back up your work both on the server and at a second local folder perhaps on a removable media. If something bad happens to the one you are working on, you need to have a backup to help you when you need to pick up where you started for the day. Considering technology in the design of a Web site Designing a Web site requires more than just typing some words and putting some pictures in place. You have to consider the computers your audience is using. You may have the latest and greatest, most souped-up computer available, but you are making something available to people all over the world. If you design your site to work well on your computer, you may be cutting out a huge segment of your audience. So let's take some things into consideration before we even get underway. Visitors to your Web site. You have no idea who they are. Although you might target your audience, many people will show interest in your site simply by accident. As they browse, they may run into your site and find something that attracts them. Consider modem speed as slow as 56 Kbps that many people still use. Battle for the browser. The primary Web browsers you will consider are Internet Explorer and the Mozilla group of browsers (Firefox/Netscape/Mozilla). Some Web visitors use text-only browsers. This explains why some sites give the visitor a choice between text version and graphics version. In order to capture that part of your audience, you need to design for text-only users. That your site works on one browser doesn't mean it will work on the others. You also need to be aware of Windows and Macintosh users. Monitors. Although a screen resolution of 1024 x 768 is common in the United States, Europe and Japan, in some areas such as Southeast Asia, smaller screen sizes of 800 x 600 may still be common. Flexible design helps significantly in addressing such differences. On the other hand, there are other devices (PDAs, cellphones,...) with much more restrictive screens. Although not all Web pages may need to work on cellphones, try to design with as few limitations as possible. Web Enhancement HTML/CSS Tutorial One Getting Started With the Internet Page 5

6 Window size. Most Web visitors don't like scrolling - especially horizontally. Therefore, you need to design for a window size of 800 x600 ppi. This will accommodate most users. Few people will need to feel irritated with you. Picture format. Remember that pictures must load through a telephone line and a modem. To facilitate such transfers, you need to use compressed images. The three image formats used on the Internet are JPG (JPEG for the Mac), GIF and PNG. A good rule of thumb is if the image is a scanned photograph, JPG is a better format. Here are four ways of compression: Low Smallest file; lowest resolution and lowest quality. Medium Resolution is about the same as high resolution. High Contains more information than medium, but the result is about the same. Maximum Largest file; best quality. The lower the compression, the lower the picture information and the lower the quality. Each time the picture is saved, it loses information and quality. When preparing a picture, set the resolution at 72 pixels per inch and use the RGB color model. Developing a concept for Web site development Web sites begin with a concept on how to present the information. The presentation must coincide with the expectations of the client and audience. If they expect humor, then humor is appropriate. If the subject matter is serious, then a serious motif is in order. Make sure that the presentation matches the subject. The concept comes from forethought tapping the imagination. Brainstorming with other interested parties is a common method for arriving at a concept. Seldom does a concept hatch out of the vacuum of one person's mind. It is most often the product of team effort. If you are on your own with arriving at a concept, you can visit successful Web sites of a similar nature to see what they are doing. That is one way of involving other people in the brainstorming process. Once you have the concept, you need to plan the general structure of the site. You will devise a site map as an outline. You will also use that site map on the site to allow visitors a quick reference to the contents of the site. Once the site is planned, you need a graphic design. Do not build your design around a sharp piece of artwork you find someplace. Instead, develop the artwork based on the design. Web Enhancement HTML/CSS Tutorial One Getting Started With the Internet Page 6

7 Sketch some thumbnails of each page in your plan. Some of the pages might look exactly like others in the site with only the content being different. Others will have specific qualities that are unique while maintaining the same general motif throughout the site. From those thumbnails, develop a series of sketches into a storyboard. Each storyboard needs specifications for type, spacing, color, margins, lines. Again, one sketch in the storyboard might serve several identical pages, with only the content being different from page to page. Taking time to develop the storyboard and specifications will save you a lot of time and frustration in the end. Assignment Acquire your FTP account as instructed. Upload a file to the site and send your instructor an with the URL to that file. To do so, copy the URL from the browser's locator bar and paste it in the message of the . This will indicate to the instructor that you have your FTP account. It is your responsibility to ensure that your account is working. If you have not received verification of the account in your primary , notify the instructor either in person, on the telephone or by way of that you have not received it. Important Download the student files you will need for this Web project. You can find them in a zip file at this address: Web Enhancement HTML/CSS Tutorial One Getting Started With the Internet Page 7