1

LAB SETUP Enabling file extensions in Windows Explorer Windows will hide file extensions that are known by default. It is for convenience, but it is actually confusing and dangerous because you may receive a file "essay.doc", but if you are unaware your extensions are hidden, it could really be an "essay.doc.exe" file that contains a computer virus. We will now fix that. Step 1: Click on the Windows Explorer icon located on the taskbar at the bottom of the screen. Then go to Organize à Folder and Search Options. Step 2: Click the "View" tab at the top. Step 3: Look for "Hide extensions for known file types" and make sure the box is UNCHECKED. Then click "Apply" at the bottom. Then click "OK". A. Create a Basic File Structure Step 1: Now in Windows Explorer, click on the Documents folder under Libraries.

Lab 2 CSE 3, Spring 2018

In this lab you will learn about basic file structures and advanced features of Microsoft Word. You will then use such features to create a career

resume.

2

Step 2: Open your CSE3 folder (created from HW1) and create a new folder inside called Lab2. Do not name it lab2, lab 2, or Lab 2. Name it Lab2. Make sure that the FIRST LETTER is CAPITALIZED and that there are NO SPACES. This naming format will be used for all labs and homework. Now you have created a basic file structure. In this lab, we are going to create two Microsoft Word documents: CodingBenefits.docx and MyResume.docx. Once we add these files, this file structure would be displayed visually as: USEFUL TERMINOLIGY:

• Documents, CSE3, and Lab2 are directories • CodingBenefits.docx and MyResume.docx are files

o The “.docx” at the end is a file extension NOTE: Understand these terms, as they are fair game for your quizzes and exams!! B. Pathname Notation The image above is a visual representation of the file structure. You can use pathname notation to describe the location of individual files and folders. Step 1: The pathname notation for CodingBenefits.docx is “Documents/CSE3/Lab2/CodingBenefits.docx” What would the pathname notation for MyResume.docx be? C. Microsoft Word 2016 Be sure that you are using Office 2016 and NOT any prior version (XP, Vista, 2003-2013). This is because Office 2016 has certain features not found in older versions. All the computers in B270 should have Office 2016. Step 1: We need to open Microsoft Word Go to:

Start → All Programs → Microsoft Office 2016 → Word 2016. The first time you open Microsoft Office Word 2016, your computer might want to configure it. This will take a few minutes. Click OK on any dialog boxes that show up. Choose the “Blank document” from the list of options (should be the first option icon, top-left corner).

Documents CSE3 Lab2 CodingBenefits.docx

MyResume.docx

3

Step 2: The most obvious feature of newer versions of Word (Word 2016, in our case) is the strip at the top. This is known as the Ribbon, and contains all the buttons that you used to find by navigating toolbars.

Step 3: The VERY FIRST thing we always want to do when we create a new file is to SAVE IT There are two ways to do this:

• In the very upper left-hand corner, you should see a button that looks like an old fashioned floppy disk . Click on that icon to save your file. The area that this icon is located in is known as the Quick Access Toolbar.

OR • In the upper left-hand corner, click on the word FILE. Choose “Save” from the list of

options. Click on the Browse button. In the new Save As window, navigate to your Lab2 folder. Save the file as CodingBenefits.docx in your Lab2 folder. Step 4: You might notice that the file extension for Word 2007-2016 is .docx instead of just .doc That is because Microsoft has based the new WORD file format on XML. Word 2007-2016 can read any file created in an older version of Word. Older versions of Word CANNOT read documents created in Word 2007-2016 without a converter, and sometimes not even then. D. Copying from the Web We’re going to learn a little bit about why learning to program is beneficial, regardless of your career path. Step 1: Open Chrome and in the search bar at the top, search the following: benefits of learning coding Step 2: Click on the link: Benefits of Learning Coding – Code Conquest (the URL is http://www.codeconquest.com/what-is-coding/benefits/ ). Spend a few minutes reading the site. Step 3: Now we’re going to copy some text from that webpage into our document. Copy the first the heading “Benefits of Learning Coding” and then the text starting from “Learning

coding …” down to the end of the sixth paragraph ending in “…code that all websites run on”. Copy the text by pressing Ctrl-C or right-clicking your mouse and selecting Copy.

4

Step 4: In Word, go to the Home tab on the Ribbon, and on the far left-hand side you'll see a Paste button. Do NOT click the Paste button, but instead click the arrow underneath it and choose Paste Special. It will show you a list of paste options, as you see to the right. Select “Unformatted Text”, and then click OK. Your text should be completely uniform in size and type. Note: Do NOT press Ctrl-V! If you do, it would have automatically selected “HTML Format”, which we don’t want here.

Step 5: Follow the lab lead and copy all the headings and text on the webpage, omitting the videos and links. Paste everything into your document as “Unformatted Text” (See step 4). Step 6: Without modifying the format of any of your text, you might want to go through and remove the extra empty lines that this process has left between each paragraph. Step 7: If you paid close attention, one section of text that we copied was a bullet point list. But when we use the “Keep Text Only” option, we got rid of this nice formatting. So let’s go put it back in.

a) Find the 4 lines under the “Start a Business” heading.

b) Select the 4 lines, starting with “selling software” to “selling your coding time”.

c) In the Ribbon, on the Home tab, click on the bulleted list icon d) Note that if you click on the arrow ▾ next to the icon, you can choose the bullet point shape.

However, if you would rather use the Paste button, or press Ctrl-V, notice that after you paste, a small box pops up with the paste icon, and the text “(Ctrl)”. If you then click on the drop-down arrow, or press the Ctrl key, you will find a Paste Options menu, where you can select the icon with a capital A on it to “Keep Text Only (T)”, which is equivalent to “Unformatted Text” from above.

5

E. Using built-in Styles Step 1: You have probably created your own headings in MS Word before using the Bold, Underline, and Font Size buttons in the Font toolbar. We’re going to show you an alternative way of doing it that gives you access to more preset options. Step 2: Highlight the text “Benefits of Learning Coding” that should be at the top of your screen. Because we pasted as “Unformatted Text”, it should look just like all the rest of the text on your screen. Step 3: On the Home tab of the Ribbon, you should see a group called Styles. With your text selected, choose the Title style from among your choices (if you don’t see it, click on the arrow next to the styles which will show you all your options). Step 4: Next, highlight the next heading in your document “Make Your Own Website” and choose the Heading 1 style. You may have to press the down arrow to scroll down so that you can see this option. Step 5: Finally highlight the remaining three headings “Become a Career Coder”, “Start a Business”, and “Understand How Computers Work” and set all of them to the Heading 1 style. Step 6: Now that we have formatted our document using styles, we can easily experiment with different styles. Go to the Design Tab and you can change the colors or the preset formatting of the headings.

F. Table of Contents Why bother using all these fancy styles? In addition to pre-formatting everything for you (you can change the way each style looks if you want to), using the built-in styles allows us to auto-generate a Table of Contents. Step 1: Put your cursor underneath the Title heading “Benefits of Learning Coding”.

6

Step 2: On the References tab, in the Table of Contents group, click on the Table of Contents button. Step 3: Choose whichever type of table you like most and Word will automatically generate one for you at the top of the page where your cursor is. Step 4: Now, if you hold down Ctrl and click on one of the items in the Table of Contents, it will take you G. Inserting Images We don’t want to just copy and paste images into our document because sometimes the formatting can be changed during the process. We will use two methods of inserting images: 1) Word’s Screenshot tool and 2) inserting saved images. Method 1: Screenshot Tool Notice that the first benefit listed is “Make Your Own Website.” But we already did this last week! So

let’s include a picture of our website. Go to your website at acsweb.ucsd.edu/~[your username].

NOTE: Don’t forget to put a Tilde “~” before your UCSD username! Step 1: Make sure that your personal webpage is open to full screen, and that the only other window open ON TOP of it is your CodingBenefits.docx (the document you’re creating in lab). This will make more sense in the next few steps. Read steps 2-4 FULLY before proceeding! Step 2: In the Ribbon’s Insert tab, navigate to the Illustrations group and locate the screenshot button. Step 3: Click the drop-down arrow, and then click “Screenshot Clipping” at the bottom of the menu. Once you do this, your codingBenefits.docx page will automatically minimize itself. The only page visible now should be your webpage!

Your screen will turn opaque, and your cursor will turn into a +. Step 4: Use the “+” to drag a rectangle over the area of the screen you wish to make a clipping of. Once you let go of your mouse, the clipping will automatically insert itself into your word document.

7

Step 5: You'll notice that the pictures are attached to the document so that you can't move them around. Select the image so that it has a black border with points around it. This should automatically open up the Picture Tools option on the Ribbon. In the Arrange group, you should see an icon labeled Wrap Text. Step 6: Click the Wrap Text button and select Square. Now you can move the images around the screen and place them where desired. You may experiment with different Wrap Text styles as you like.

• Put the image in the Make Your Own Website section. Step 7: When including images in a lab or design report, you may be required to add captions. Adding captions connects the images to the text, and allows for automatic reference labels (e.g. Figure 1). Right-click your webpage image in the Make Your Own Website section. In the drop-down menu, click “Insert Caption”. A window should pop up.

At the top, in the text bar under “Caption”, you will see the cursor next to the words Figure 1. Type

a small caption for the bottom of this image (e.g. Scott’s html webpage). Method 2: Insert Saved Image It is useful to know how to insert images that you find and download from the web. Step 1: Download the file cartoon-coder.jpg from the course website and save it in your Lab2 folder. In Word, choose the Insert tab, and choose Picture from the Illustrations group. Find the image you just saved in your Lab2 folder. Step 2: Using this saved image, repeat steps 5 and 6 in Method 1 above to insert it under the Become a Career Coder section. H. Inserting and Manipulating Textboxes Occasionally you will want text that isn’t in line with the rest of the text. An example would be a "blurb" about the text that really stands on its own. Step 1: Choose the Insert tab on the Ribbon. In the Text group, click on the Text Box button. A menu will pop up with many different pre-formatted text box options.

• Choose whichever one you want to use and it should appear in the center of your screen. • To move your textbox, click on the line around it and drag. • To change the text in the textbox, click anywhere inside of it and start typing.

8

Step 2: In the text box, we will be defining the word “data”. Instead of opening up a new window and searching

for the definition, we will be using Word’s Smart Lookup Tool. Read through the “Understanding How Computers Work” section

until you find the word “data”. Highlight the word and right click.

From the menu select “Smart Lookup”. This will bring up an “explore” page on the right side of your document with articles from the web about the term you highlighted – in this case, data. However, we are only interested

in the definition of the word, so instead of “explore”, click on

“define”.

Copy the definition and paste it into the text box. Remember you have the option to paste text only if you do not want to keep any of the original formatting. You might want to format the text a little, changing the font size, and making it centered for instance.

• You can format the textbox by selecting the text inside of it and formatting just like you would any other text. You can also choose a color to fill the textbox with.

• Make sure you resize the textbox when your formatting is complete so you can see all of the information in it.

9

• To resize the textbox, click on one of the white dots and drag it in the dimension you want. Corner dots allow you to resize both width and length at the same time.

Step 3: If you move your new textbox around and it is on top of the existing text, be sure to text wrap the textbox in the same way you did the images. This may or may not be a problem. Step 4: Lastly, change the border of the Textbox to anything that isn’t the default solid black line. To do this,

right-click anywhere on the existing border and select the option ‘Format Shape’. You should see a new

pane titled ‘Format Shape’ on the right-hand side. Make sure that you’re under the ‘Shape Options’ tab. Then feel free to play around with the color, dash-type, width, etc. I. Outline Format You might notice in these lab write-ups, that bullet points are frequently used to organize information. Bullet points or numbered outlines are a useful way to display certain kinds of information. Step 1: At the very bottom of your document, create a new section titled “Summary”. You can use the Style group of the Home tab to make it a Heading 1. Step 2: Underneath your new heading, create an asterisk – the little fuzzy star on top of the ‘8’ button on your keyboard (*). Step 3: If you hit the space bar, it will automatically turn it into a bullet point for you. If you hit the Tab button, the bullet will move to the right and change shape. If you hit Shift-Tab, the bullet will move back to the left. Step 4: Try to create the following mini-list:

• Benefits of learning to program o make your own website o career prospects o more independence in business o understanding the technology we use everyday

Step 5: If you right-click on your new bulleted list, you can modify the bullets or change them to a Numbering format, if you prefer. Step 6: Create a new section titled “Applying it to My Career”. Make this a Heading 2. Under this new heading write a couple of sentences about how knowing how to program could help you in your future career. It may be something indirect like improving your logical reasoning skills in order to be a better problem solver or something very obvious like gain a job as a software developer.

10

Now that you’ve added new headings, you want to update your Table of Contents. Click on your Table of Contents and choose: Update Field. (This can also be done on the Ribbon). When you see the dialog box at right, choose Update entire table as shown and hit OK. Your new Summary section should now appear along with the subsection. J. Page Numbers and Header & Footer If you have a long paper that’s many pages in length, you might want to include page numbers. Word will automatically generate these for you. Step 1: Go to the Insert tab, and click the Page Number tab from the Header & Footer group. Step 2: You will be given several choices for formatting. Choose whichever option you like. Step 3: We will also insert a header. Click on Header from the Header & Footer group. Choose the second option and type in “CSE 3, Spring 2018” for the right-most “[Type here]” field. Step 4: For the left-most “[Type here]” field of the header, we are going to be inserting the current date, along with the current time. Click on Date & Time from the Text group. Choose the option of the same format as the following example: Friday, April 6, 2018. Step 5: We are not going to be using the middle “[Type here]” field of the header so click on the middle “[Type here]” and delete it. Step 6: To close the header or footer, click on the design tab and then click the big red X at the end of the ribbon that says “Close Header and Footer”. Alternatively you can just press the Esc key in the upper left hand corner of your keyboard.

11

K. Adding a Bibliography Bibliographies are useful for managing citations. Bibliographies can be automatically managed in Word to make formatting and updating them easier. We have really plagiarized Mike’s webpage today, so we really should cite our sources. Step 1: To start click on the References tab in the ribbon and click Manage Sources under the Citations & Bibliography section. In the menu that appears click on the button named New in the middle which will bring up another menu. Under Type of Source select Web Site, check the Show All Bibliography Fields box and the Corporate Author box, and fill out the following fields as follows: Corporate Author: Code Conquest Name of Web Page: Benefits of Learning Coding Year: 2015 Year accessed: <current year> Month accessed: <current month> Day accessed: <current day> URL: http://www.codeconquest.com/what-is-coding/benefits/ Now click on OK to finish adding the web page to your list of sources. Step 2: Now to add a bibliography, first click in the location of your document you want to add the bibliography (typically at the very end of your paper). In the same Citations & Bibliography section of the References tab, click on the button labeled Bibliography. Choose either Bibliography or Works Cited (the only difference is what you want the section labeled) and it will automatically create a bibliography in whatever format you have selected under Style (e.g. MLA, APA, etc.). Step 3: Next, let’s make the link to the website clickable by creating a Hyperlink. To do this, we first need to highlight the url portion in between the brackets. Then, we need to go to the Insert tab and click on the Hyperlink button. A new small window will pop up, and make sure that the Text to Address and Address field both contain http://www.codeconquest.com/what-is-coding/benefits/ in them. After verifying, click OK and the link should now be underlined and blue. You can verify that the Hyperlink works by Right-clicking anywhere on the hyperlink and clicking Open Hyperlink. The webpage used for lab should be opened. Step 4: After you have added your bibliography, update your Table of Contents again and save your finished document in your Lab2 directory. It should look roughly like the following:

12

L. Saving as Other File Types (PDF) There are many reasons not to use Word files. People may not have Microsoft Word, or may not have the right version of Microsoft Word. Here we will consider other alternatives. The best alternate option is PDF, which is the format of the lab write-up that you are currently reading. Step 1: Select the File Button and choose Save as. Step 2: From the “Save as Type” drop down box select PDF. That’s it! You now have a PDF version of your document. You may notice that there is an option to save your document as Webpage (.html). However, the HTML formatting is not as precise as Word or PDFs, so the images get jumbled around. This is why we prefer to create our webpages using html coding, rather than by converting a Word document. In general, Word documents are good when you need other people to edit it and PDFs are good when people are just going to print it or you have very specific formatting and layout. M. Your Resume You’ve now learned how to use some of the more advanced features in Microsoft Word. It’s your turn to apply these to a potentially very important document of your own: your resume. Step 1: Create a Word document and save it as MyResume.docx in your Lab2 folder. Step 2: See the UCSD Career Services site at https://career.ucsd.edu/. Specifically, the Triton Career Guide at http://career.ucsd.edu/undergrads/gain-experience/resumes.html may be very useful. Follow the worksheet on page 6 of the guide or design your own resume.

13

Apply what we learned today: • Use the Title formatting for your name • You can use Subtitle for your personal info • Use Heading 1 for the different sections of your resume. Include the first 3 sections listed

below and any other sections that are appropriate for your resume. o Objective o Education o Coursework o Skills & Qualifications o Relevant Experience (Work/Volunteer) o Organizations o Projects

• Use bulleted lists to list courses, skills and qualifications, etc. Microsoft Word also has templates for Resumes that the Lab Lead will show you how to find. You can use one of these with preformatted headings if you prefer. Step 3: Your finished document needs to contain:

• Some sort of styled headings • At least one Bulleted or Numbered list.

Step 4: Save the file as a Word DOCX and a PDF. Your final document might look something like the picture below.

14

Step 4: Usually, the hardest part of making a resume is getting this first draft down. Don’t worry if it isn’t perfect or if you don’t have a lot to put on it. Once you have a working draft, you can take it to UCSD Career Services Center where they will give you tips to improve your resume. They have Walk-in Advising hours Monday-Friday: 10am – 3pm listed here:

http://career.ucsd.edu/individual-advising.html . N. Putting Files up on the Server Transfer the files to your web server. See Lab1 if you don’t remember how to do this Double click public_html folder on the right side Move the entire CSE3 folder to right side

REMEMBER to move it into the WHITESPACE. Click Yes to all if you are prompted to overwrite.

To see your files online, go to your personal homepage, and add /CSE/Lab2 on the end of the address in the address bar at the top of the window. Your address bar should look something like:

http://acsweb.ucsd.edu/~[your username]/CSE3/Lab2 NOTE: As always, don’t forget to put a Tilde “~” before your UCSD username! You should be able to see a list of all the documents you put online. Next week we’ll create a webpage to display your work more clearly.

Lab Checkoff: Go to your homepage (online) and demonstrate to the person checking you off that you have:

• CodingBenefits.pdf • MyResume.pdf

Do not leave until you have seen a TA/Tutor mark your name down

It is your responsibility to make sure you get credit for each lab!

Verify you received an email from autograder before you leave your lab.