Text Only Version of Lessons

Transcription

1 Text Only Version of Lessons Introduction to Lessons Did you realize that creating web page is not much harder than creating word documents? Contrary to what you may believe, you do not need to know HTML, (Hyper Text Markup Language) to create web page that are interesting, attractive and informative. In these lessons, you will learn the basic skills to get started on the road to web site development. Specifically, you will learn how to do the following: create a folder for your web site create and save a web page add and format text on a web page create links between your pages and other web sites (URLs) insert images create tables upload your web site (optional) Here is my plan of attack: we will go through the demonstration portion of the lesson and you will watch the projection screen at the front of the room as I explain each step. You will then have the opportunity to practice that element of the lesson on your computer before we go on to the next page of the lesson. After we complete the entire lesson, you will have time to work in your groups to put your web site together. Words for the Wise I decided to use MS Word for this activity because I knew it was readily available to most of you. If you are familiar with Word functions, these lessons will be easy for you. Word is not the best software for creating web page, however, it is a good place to start because the skills you learn are applicable to more sophisticated web authoring programs such as FrontPage or Dreamweaver. If you want to learn how to use either of these programs, I have included links to sites with FrontPage and Dreamweaver tutorials. Florida Gulf Coast University offers tutorials for FrontPage as well as other MS programs. The Dreamweaver tutorial was created by Bruce McVicker, who was an instructor here at CSUS in the Educational Technology Master s Program. Want to learn more? Now, here is some exciting news: as a student at CSUS, you can purchase FrontPage 2002 for PC for a mere $15.50 from the bookstore. Make sure it is

2 2 compatible with your computer by asking one of the nice people in the computer area on the second floor. You might also ask them for a list of other programs available to you at bargain rates because you are a student. For example, the latest version of MS Office XP Professional is available for $17; this program includes Word, PowerPoint and more. Another option is to download Dreamweaver for a 30-day trial for free! If you like it, you can buy the program by itself or you can buy the Web Design Studio version that includes 4 integrated programs Dreamweaver, Flash, Fireworks and Freehand. Visit the Macromedia web site for more information on their products. They also offer training online which I have found quite useful. In terms of other resources, if you really want a good book on how to create web page, I highly recommend, The Non-Designer s Web Book by Williams and Tollett. This is a user-friendly book for people who know very little and want the basics presented in a succinct, understandable manner. I love this book and, again, have found some of the tips very useful. It makes you realize, it is possible to explain something that seems complicated in an understandable format. One final resource is a link to another web site created by Bruce McVicker, on Web Authoring. If you click on the images link on this site, you will find links to many images that are available online for free. The other benefit to this site is access to a Dreamweaver or FrontPage tutorial. OK, enough wisdom, lets get started by clicking the link below. Go to the first page of the lesson. Lesson 1 Creating a folder for your web site The first thing we need to do is create a folder on the computers hard drive for our web site. This folder will contain every page and image for our web site. When we are ready to upload our site to the web server, we will have all of the information for the site in this one folder. We are going to create a folder in the My Documents area of the computer to store your web site. The My Documents icon is on the left side of the monitor and it looks like a file folder. This area of your hard drive is a good place to store the various files you create on your computer and folders help you keep organized.

3 3 If you double click (using the left mouse button) on the My Documents icon, a window will open like the one below. I created a folder called freudweb for my web site in the My Documents area on my computer. Let s create a folder for our web site. To create a folder, right click once anywhere in the My Documents area of the screen. This will open a dialog box where you will click New and Folder. A folder will appear on the screen called New Folder as you can see below. Next, you need to give the folder a title and this is an important step: the title of your folder should contain no capital letters or spaces. It should be a simple title that is easy to remember If your new folder is highlighted, you can simply type in the name. If is not highlighted, just right click on the New Folder icon and click Rename. As you will see, the name area of the New Folder icon is highlighted so you can type in a name for your folder. Remember, the name should contain no capital letters or spaces. I gave my folder the name freudweb because I thought I would remember that I keep the pages for my Freud web site here. (Note: this picture was taken on a computer not running the XP version of Windows). Try it, you ll like it! Lets try what you just learned: double click on the My Documents folder. Create a folder and give it a simple title using no capital letters or spaces. I suggest you use your name in the title for example, I would call my site bonniesweb. Let s create a web site about you for the individual assignment so use your name for the folder. If you have a question, signal me or ask another student for help. When you complete this task, we will be ready to proceed with the next lesson. Finished? Go to the next page of this web site Lesson 2 Creating a web page

4 4 Now, you are ready to create your first page! First, open Word by finding the icon on the monitor and double clicking on it or by clicking Start, Programs, and Word. Word opens with a New Document ready to use. We will immediately save this new document as a web page by doing the following: click on File and Save as Web page. This is another crucial step make sure you select Save as Web page. We want our new page in the web site folder, so you need to save it in your folder now. This means that you need to navigate to that folder and open it. To navigate to the folder, click on the Save in drop down menu at the top of the Save as dialogue box and find your folder in My Documents. Click on the freudweb folder to open it. Your folder should now appear in the Save in menu. I already have files in the freudweb folder as you can see. Never delete any files from this folder because Word creates files containing necessary directions for the computer and you will wonder where did that file come from? Whatever you do, don t delete these files because your pages will not open correctly on the Internet if you remove the files. Now, we are ready to give your web page a name. This is another important point: the first page of your web site needs to be given the simple name index. If you fail to do this, your web site will not open when you upload it to the server. Type the word index in the file name box. Remember, file names should contain no capital letters or spaces. Before you click save, click on the Change Title button above the File name dialogue box. This will open a window that allows you to give your web page a title. This is the title that will appear in the browser so you can give it a descriptive name if you wish. You could title the page Index or Home page or Table of Contents. I used Index just to keep it simple. Type your title in the Page title box and select OK. You just created your first web page! Any additional pages in your web site will be created just like you created this page. They will all be saved as web pages in your folder and should always contain no capital letters or spaces. The exception to this rule is your title for the page; as indicated above, the title can have capital letters and spaces. Give it a try

5 5 In the next 5 minutes, complete the activity described above open Word, click File and Save as Web page, name the file index and save it in the web site folder you created in My Documents. Finished? Now, you are ready to continue to the next page where you will learn to add and format text. Go to the third page of this web site Lesson 3 Adding and formatting text Now this is truly the fun part! Any text that you type on a web page can be modified just like you do in a word document. We call this formatting the text. This means you can choose a size, color and style of text (called fonts ) as well as where you want the text to appear on your page (e.g., centered, right, or left). So, lets say, for the sake of this activity, that you are going to create a web site about yourself. On the index page, you are going to introduce yourself and then proceed in the next few pages of the web site to describe some of your interests, hobbies, etc. The index page will be the table of contents for you and it will provide links to the other pages in your web site that describe you. We could start by typing your name on the page. (Note: the following images depict Word 2000 not XP) Next, lets experiment with formatting this text; select the name you typed on your page by highlighting it. To do this, simply place your cursor to the left of the line in the text area; when the cursor changes to an arrow, a single click of the left mouse button will highlight or select the line of text. You are now ready to do all kinds of stuff to your name. Starting with font size, let s make your name bigger. This can be done in several ways and here is one: on the toolbar, click on the font size drop down menu and select a larger font size such as 26. This looks a little better. You want the title of your page to stand out. Another way to make your name bigger is to click on the Style button in the tool bar (hint: it usually says Normal) and click Heading 1. If you name is highlighted, it will change the size of your name. To return to normal text size, you just click normal if the name is still highlighted.

6 6 If you want your name to be bold, click on the Bold button on the toolbar. Again, your name must be highlighted for this to work. To change the style of the font, click on the font button on the toolbar and you have lots of choices. I like Lucida Handwriting and Lucida Calligraphy for my main titles but I stick with something simple like Ariel or Times New Roman for the body of my text. You don t want to junk up your page with a bunch of different font styles like I just did in the last sentence. I bet you already know how to position or align your name on the page. If the text is still highlighted, you use the buttons in the toolbar to select the alignment of your text. Alignment refers to how the items on the page are lined up with one another. One little style note from The Non-Designer s Web Book (Williams and Tollett, 1998): Choose one alignment and use it on the entire page. Don t mix alignments (p 106). Oh, I almost forgot about color. If your text is still highlighted, click format and font on the toolbar. Then click on the drop down menu under font color to see your choices. By clicking on a color and OK, the color is automatically applied to your text. I like blue. Pick a color that will be visible on the page. You can also change the color of the page itself by clicking Format, Background and selecting a color. Remember, you don t want your background to distract from what is on your page. I usually don t apply a background for this type of presentation. Here is how it would look with a yellow background. The other reason for not using color in your background is that if someone printed your page, it would use up a lot of yellow ink and those printer cartridges are expensive. Give it a try Now, let s try what you just learned: on your index page, type your name and choose a text size, style, alignment and color. Finished? Ready to create a link? Go to the fourth page of this web site.

7 7 Lesson 4 Creating Links This will be really easy for you. The first thing you have to do is create a new page because a link requires something to link to as the name suggests. You may wish to refer back to page 2 or just follow these simple steps: on the File toolbar, click new and select web page and OK. Then give your file a logical name and save it in your web site folder. Remember to use, small letters, no spaces and a simple title. You will also need to change the title in the Change Title box like you did for the first page. If you are creating a web site about yourself, you could call this page Hobbies or Family or Resume or whatever would be logical given what you plan to put on the page. The title will help you remember what is on the page so you can easily create links to this page later on without opening the page and looking at it. OK, now you are ready to create a link. At the top of your new web page, type the word Back and then highlight that word. If you press the keys Ctrl and k at the same time, it will open up the window you see below that allows you to select the file you want to link to; you can also do this using your toolbar by clicking Insert and Hyperlink. Either way, this is what you will see - When the Insert Hyperlink window opens, you may need to select Browse for file to select the index file from your web site folder. Remember, you may need to navigate to this folder to open it. You will notice below that I opened my freudweb folder to find my index file. Click once on the file you want to link to the index file as this will select the file you are trying to link to from the new page you created. Select OK. You have just created a link between your 2 files! But, now you need to create a link from your index page to this new page so that you can get back and forth. Open your index file and repeat the steps above in order to link from the index page to your second page. Links can come in all kinds of forms. One simple form is to include them all at the top and/or the bottom of the page. Some people like tabs across the top or a menu bar on the side. I wanted to keep this lesson simple so I recommend the following: at the bottom of the index file, type in the name of your second page, highlight those words and insert a link to the second page by repeating the steps above.

8 8 If you scroll down to the bottom of this page, you will notice, I have called my pages intro, first and second. It doesn t matter what you call the pages as long as it makes sense to you and the viewer. For example, you could use Back Home or simply Home at the bottom your second page. Remember, to insert your hyperlink connecting the second page to the home page. URL Links Now, that you understand the principle of how to create links, you can create a link to any web site with a URL address using the same steps. On one of your pages, type the words, here s a cool site. Highlight cool site, press Ctrl and k to get to the insert hyperlink screen. You will notice that the cursor is blinking in an area that states - Type the file or web page name. This is where you will need to type in a URL or copy and paste it into this area. (Tip: if you have copied the URL, you can paste it into this area by depressing the Ctrl and V keys together). I pasted the following URL: and selected OK. I have created a link to Google. Pretty cool! Give it a try This was a long lesson, so take about 10 minutes to create your second page, link it to the index, create a link from the index to the second page, and add a URL to either page. If you have questions, please let me know or ask for help. Finished? Now, we just have images to conquer as soon as everyone is ready to proceed with the lesson. Click on the link and go to the fifth page. Lesson 5 Images and Tables Would you like to put an image on your index page? There are several ways to do this and I will start with the easy way. If you have your index page open, you can select a place you want to put the image by positioning the cursor at that place. Then you select Insert, Picture and Clip art. Now, if you look at the image above, you may think I wonder how she copied a page that looks like the screen of the monitor? I copied the screen page to my

9 9 clipboard by depressing the PrtScn key (at the top right of my keyboard). I then pasted it onto this page. You can do that with any image on your screen at any time and that is how I got the graphics for these pages. But back to our lesson, if we select Clip Art, we get the images that are available in MS Word. If we select, From File, we can insert an image that we have scanned and saved. Or we can obtain an image from the Internet. Let s try the clip art idea. Place your cursor on the screen where you want your image to appear. From the toolbar, click on Insert =Picture = Clip Art - - which brings up this screen: You can either type in a word in the Search for clips box or you can simply click on the different categories and look for an image you want to insert. Here are some of the images to choose from under the category Academic. Here is a clip art image that I selected that reminds me of you right now except you are looking at the big screen, not your monitor! The other cool thing about images is that you can size them. If I click anywhere on the picture above, it will look like this with a little box around the picture. The little box lets you know you can use your sizing tools. If you place your mouse at the corner of the box, your cursor becomes a doubleheaded arrow. If you then press the left button of your mouse when the arrow is showing, you can drag the corner of the box out or in to resize the picture. Tables If you want to place the picture in the center of your page, it is helpful to use a table for this. If you insert a table, you can paste the picture into any cell and then resize it. First, put your cursor where you want your table. Select Table and Insert Table; here is a graphic of what I mean: Then you need to choose how many rows and columns you want. If I only want to put in one picture with no text next to it, I might choose 1 for both my rows and columns as I did below. Notice how this created a long row like table that is aligned to the left - To put the table in the center, I selected the table by placing my cursor in the table and clicking Table, Select, and Table as I did below.

10 10 When I then selected the center alignment button, my table moved to the center of the page as you can see. Now, I can insert a picture in the center of the page if my cursor is aligned to the center and I can resize the picture after I move it. Now, you are thinking: I hate those lines around the picture. Simple solution: there is an icon on your toolbar that allows you to remove lines from tables. It is called Outside border and it has a box symbol on the toolbar. To remove the lines around the table, place your cursor in the table to select it, click on the drop down menu for the Outside border tool and remove all lines by selecting the table icon with no lines called No Borders. Just click on that and your lines disappear. Too bad that doesn t work on my wrinkles! You will notice that the picture still has the faint lines of the table around it but they won t show online or if you print the page. If you want to remove the table and the picture altogether, you need to select the table like you did above and then click Table and Delete Rows. This will remove the table. Phew! Was that a long lesson or what?! Let s try what we learned. Give it a try Place an image on your index page using what you just learned. For now, just use the images available in Word. Finished? Now that you know how to add images, I am going to let you experiment on this later when there is more time available. You can also find images online, download them and save them in an image file in your web site folder. To insert them, you use the Insert = Picture = From File commands and then navigate to your image and insert it. Advanced Discussion: One factor you need to consider in using images is their size. For example, if you scanned a photograph without reducing the resolution (pixel talk), it will take a long time to download. This means you need to save them at a lower resolution before you insert them on your web pages. Many programs allow you to do this (Adobe Photoshop is one of many). I use Fireworks, part of the Dreamweaver Suite of programs. This program allows me to save pictures that take less time to load. I simply open the photo file in Fireworks, select Export Preview - - and then choose JPEG smaller file.

11 11 I then Export this picture to my image file. This second version of the picture is smaller and of less quality, but it will load a lot faster so people are more likely to not get irritated when they view your web site. Let s go on to our final topic, uploading to the web, if everyone is ready to proceed. Remember, this final topic is optional and is not required for completion of the web activity. Go to the sixth page. OPTIONAL LESSON 6 Uploading folders to our WebCT site This lesson is optional; you do not need to upload your site to be able to view it on your computer or to present it in class using the overhead projector. If you already have your own web site, you would be uploading the files for the group presentation using the FTP method not the procedure described in this lesson. Let me say upfront, that it is a lot of trouble to upload files to our class web site and I do not recommend it. It is preferable to obtain a personal web page via University Computing and Communications Services (UCCS); as a student at CSUS, this benefit is available to you. If you set up a web page via UCCS, the protocol for uploading your site is different than described here. You would use the FTP program to upload your site. This is a free program and I would gladly assist students in how to use this program but not during class time as not everyone wants to know this information. If you are still with me on this endeavor, you may wish to review the WebCT Student Presentations site before you actually try to do this. I have attempted to make this easier for you by suggesting that you use a program available that will allow you to zip up all of the files in your folder so that uploading them to our site becomes one simple procedure. For instructions on how to zip up files, click on the icon of a win zip file below which will take you to the tutorial I created on this topic. Before you upload your presentation, you should make sure all the pages and graphics are in the same folder and all the links work. If you find a link is not working right, the best thing to do is actually delete the link and redo it. If you have zipped up your folder using Win zip, we are ready to proceed. After you log on to our class WebCT site, you will click on Group Projects. That will take you to this page

12 12 If you are a member of a group, you will see the option Edit Files next to your group name. Let s imagine, I am in group 08; I can select the option Edit Files. When I select Edit Files, it takes me to this screen: Under File Options, you will click on Upload a file and Go. (I am assuming that you used Win Zip to create one file to upload as indicated in the 2 nd paragraph above). This will take you to the following screen where you will need to Browse to navigate to your zip file, click on it, and then select Upload. Now, you need to unzip your folder by selecting it and choosing the option unzip and Go. Click on unzip in the next window as well: Your group web site folder should now appear under your group name. To see all the files, click on the group folder and the files should open up and look like this: If you go back to the home page, select group presentations and then click on the title Group 8 Project in the Project column. This will launch the index page of the site if you included a file called index in your folder. Take the time to go through your entire web site to make sure all the links work and all the graphics load. If everything worked correctly prior to uploading, it should work now. If it doesn t, click on the various folders to make sure all your images are there. If links don t work, correct them on your computer or disk and upload the file again. The new file will overwrite the old file and hopefully it will work now. If not, consult your teacher for assistance. GOOD LUCK!! This concludes our lessons; you are now ready to work on the game of Projection in your groups. Back to fifth page