CREATING YOUR OWN PROFESSIONAL WEBSITE

Transcription

1 First go to Google s main page ( If you don t already have a Gmail account you will need one to continue. Click on the Gmail link and continue. 1

2 Go ahead and sign in if you already have an account or click on create an account if you don t have a Gmail account. If you have an Gmail Account skip to page 4. If not continue on to page 3. 2

3 Follow the directions in order to setup up your Gmail account. After entering all of your information including your unique username (remember if you plan on using this address for professional reasons, please keep it professional) you will need to enter the scrambled looking letters into the Word Verification box, then click on the box at the bottom that states that you agree to the terms of service and your account will be activated. 3

4 After successfully signing into your go back to Google s main page ( and enter Free Google Websites into the search engine. The site should pop up as you type, if not the one you want should look like this. You can always look it up using it s webaddress: sites.google.com. Proceed by clicking on the site. 4

5 After entering the site (and as long as you are signed into your ) you will brought to this screen. Simply click on the Create New Site box to proceed. 5

6 Now that you have successfully clicked on the Create New Site box you should see the screen below. This is where you will have the opportunity to either browse through the templates or start from scratch with an blank template. See page 7 for browsing through templates and page 9 for blank templates. 6

7 If you decided to browse through the templates, after clicking on the Browse the gallery for more link, This screen will pop up. You can now scroll through all of the site templates looking for a suitable foundation for You professional portfolio. You can Always refine your search by typing Keywords into the search box, or by Selecting templates based off of Categories. For a better view of the templates just Click on the template you wish to view and proceed to page 8. 7

8 After clicking on the website template a screen that looks like this should pop up. From this screen you can click on preview template to see the full layout of the website. Then if the website Template suits your needs all You have to do is hit the select button to continue with that particular website as the Foundation for your website. If you don t like the layout, either X-out or click cancel and continue searching through The website templates. 8

9 Now if you had decided to start from scratch and use a blank template, just make sure that the Blank template box is highlighted like this. There should be a blue border surrounding the box. If you do decide to use a blank template you do have different themes that you can select From to modify the website to your liking. We ll get more in to that later. Make sure to Enter your full name in the name your site box. You may have to modify your site name in this box, if that name has already been used by someone else. Before typing in the code and clicking create click on Choose a theme and More Options. 9

10 After clicking on the Choose a theme box you will see all of the themes drop down. They should look like this. I chose the one labeled Slate which you will be able to see later. You can t preview them at this point, but after your website is created you can always change your theme at any time. After clicking on the More options box you will see some more options drop down. They should look like this. Make sure to click on Only people I specify can view this site since your resume will contain pertinent personal information, (i.e., name, address, phone #, etcetera). 10

11 Now that you have made all of your desired selections all you need to do is enter the code into the code box and hit create site. If you type it incorrectly you may be prompted to type in a new code. Keep doing that until you get it right. Remember you may also be prompted to change your URL: name if the one you selected has already been used. 11

12 After correctly entering the code and clicking the Create site box you will brought to the home page of your website. Don t worry if yours looks different or you re unhappy with the layout. You can always change the template, theme, or background colors. I would recommend using your home page content area as a cover letter for yourself. See my sample website for an example. From here your first step should be to add / create pages to your website. I ll show you later how to link these pages through your sidebar) 12

13 Type in the desired name of the page In the Name box. I would recommend that you make a separate page for your resume, References, Trainings, certifications, and anything else that you would like to post on your website (i.e., professional images of yourself in the workplace or in action such as in class). After typing your desired page name in, make sure to click on the Put page under Home circle. Then all you have to do is click on Create Page and it will bring you to a screen where you can edit your page. 13

14 After clicking on the Create Page button you automatically be brought to the page where you can start editing the page. Now there are several options you can do here. You can manually type your resume into the content box or attempt to cut and paste. It is important to note, that if you cut and past, your format will not remain the same and you will have to go in and make major adjustments. It is also important to note that if you manually type it into the content box, most of the features you have available in Microsoft Word will not be available to you, such as borders, symbols, & particular fonts amongst other things. Below, I took a resume and cut and paste it into the content box. As you can see the spacing is all messed up and some of my alignment is off as well. The only clear cut way I know how to get your resume in the content box without messing it up or having to type it manually is to insert it as an image see page (24) for information on how to do just that. Also remember that whenever you make any changes you need to click on the save key or your changes will not be saved. 14

15 After entering your resume or cut and pasting, I highly recommend that you add it as an attachment at the bottom. After clicking on Attachments a box will pop up labled Browse. Click on it and a File Upload box will appear on the screen. Browse through your files to Find your resume or whatever file you will to use as an attachment. 15

16 After successfully creating all of the pages you wish to have on your website, you are finally ready to Link them so they can easily be accessed from any page visited. Click on the link labeled Edit Sidebar and proceed. 16

17 First click on Add sidebar item located here. After clicking on the Add sidebar item a screen will pop onto your screen that looks like this. Go ahead and click on the add button under Navigation. After clicking on the add button you will be brought back to the previous screen, with the only difference being an extra navigation box added to your sidebar. Repeat this step until you have a navigation box for every page you have, including you home page. 17

18 A box that looks like the one below will pop up on the screen. Click on the checkmark here so you can link the pages yourself. It is much easier this way. I also always take off the sitemap feature, but you are free to keep it if you choose. Just simply click on it and it will be taken off. After clicking on the checkmark, the Configure Navigation screen will look like the one to the left. Type in the title, then make sure your title matches with the page you want to link it to. So if you want to link your home page to home, make sure they match up. Here my Resume page popped up as well. It s easy to fix that: Just click on it to highlight it and hit the X button and it will be automatically deleted. Now if nothing pops up in this area, you will need to click on add page and follow the steps on the next page. 18

19 After clicking on add page this screen will pop up. If you click on the + symbol you will see all of your subpages appear. After clicking on all of the + symbols You can view all of the pages you have Added to your website. Click on the one You wish to use for that specific page. Remember to try to match your navigational link with the specific webpage. So if you are trying to link your References sidebar to the created webpage, make sure they match up. Please don t forget to click on ok and remember to save any changes that you have made. 19

20 Your sidebar should look something like this now. I have included a cover letter so you can see how your home page could look if you choose to do so. Now that you have the basic foundation for how to set up the website, it s time to go in and personalize it. Click on the Edit Sidebar link again. Regardless if you chose a template or started with a blank template you can make any changes that you would like. 20

21 After clicking on the Edit sidebar link you should have been brought back to this screen. This time you will click on the Colors and Fonts feature under site appearance. After clicking on Colors and Fonts you will see a box you can scroll down. You will also see your webpage below. Begin scrolling down and making changes. All you have to do to make a change is select the category such as Page Background color and click on Custom in the red circle. 21

22 As you can see the background changed color. You can also change fonts and add images using this same feature. It is important to note, that if you chose to use an image you need to experiment with the dimensions in order for it to fit appropriately on the page. 22

23 As you can see I added an image of flowers. In order to do that I clicked on Content background image then under the custom feature I browsed through pictures I had saved to the computer. Like I mentioned before it is important to know the dimensions or pixels of the image you wish to use and if possible be able to resize the images to fit your website appropriately. Do you see how the image ends and just starts over. It is also important to note that if you take pictures from the internet, please adhere to any copyright restrictions or requests. Every computer is different so I really can t go into exact details as to how to resize pictures, but I can tell you that if you right click on the image you would like to use, a box should pop up giving you the opportunity to click on edit. As long as the computer has the software you can continue from there. As always please don t forget to click on save changes. Now if you would like to learn how to insert an image proceed to next page. If not have fun making changes and developing your website. 23

24 Inserting an image. First click on the document you wish to use as an image on your website. I will select (DA References 6). It s important to note that if you scan something onto your computer you will not need to follow these steps. Also, to do it how I am showing you, you will also need to download Adobe reader if you do not have it already. After downloading Adobe Reader (if you didn t have it) all you need to do is right click on the file you which to convert to a PDF file. After clicking on it, a screen should pop up that looks like the one above. See how it has in the Save as type box Adobe PDF files. Click on save and your file will automatically convert to a PDF file. See next page. 24

25 As you can see, I converted a simple references page into a PDF file. I can now take this file and convert it to a JPEG image that can be inserted into the content box on my website. Click on File then when the screen drops, click on Save As. After clicking on save as, a screen that looks like the one on the bottom right should pop up. All you have to do from this point is click on the drop arrow key and make sure to save it as a JPEG in the Save as type box. See how I selected JPEG (in red circle). After clicking on save, your PDF file will now convert to an image. See page

26 Depending on what type of software you have, it may be different. As you can see, my image comes up in a Windows Photo Gallery (image to the right). Since this software doesn t allow me to resize the image, I will have to open the image up Using a different program. To do this, all I have to do is click on the Open box on Windows Photo Gallery toolbar and click on my desired location. On my computer I have Microsoft Office Picture Manager. So I click on that and my image will be opened up in that program. See page

27 As you can see my image is brought up in Microsoft Office Picture Manager (right). From here I can take my image and resize the image so it will fit on my website. All I have to do is click on Picture and a screen will drop down. I selected resize and a sidebar appeared on all the way on the right. From here I can resize the picture to my desired size. From my experience it s best to keep resizing the picture until it fits your page to your liking. You may need to adjust your size multiple times before you find the exact size you are looking for. After you have resized the picture (see image below) I reduced the size of the picture by 30%. As you can see under the Size setting summary, the pixels were greatly reduced. Once you get your desired pixel amount for you website resizing images in the future may be easier. After saving the document with the changes you are ready to insert the image into you content box. 27

28 Now that you are ready to insert your image, go back to your site and click on Insert. A scroll down list will appear. You will then click on image and proceed accordingly. It is also important to note that you will first need to click on the Edit page in order for the toolbar including the insert feature to appear. Continue on to page 29 for instructions on how to select the image you wish to use on your website. 28

29 After clicking on image a screen that looks like this will pop up. All you have to do is click on Browse And a File Upload screen will pop up. Sort through your files until you find the image you wish to insert into the content area of your website. (Lower right hand corner). As you can see the document that I converted over to a PDF, then Image will appear along with the original document I started off with. From this point on, all you have to do is click on the image one (it will be the one that has a little picture next to it mine has a nice scenic theme). After clicking on the image it will upload into the browse box (above). Just click on OK and your image will be inserted into the content area of your website. See next page for example. 29

30 As you can see the document I inserted into the webpage shows up right in the content area. It is important to note that you can remove this image at anytime. All you have to do is click on Edit Page then on the image itself. A little box should appear at the bottom (circled in red). If you click on the top blue remove, the black square that surrounds the image will disappear. Now if you click on the bottom blue Remove, the entire image will disappear. 30

31 This concludes the website instructions training. If you have any questions please don t hesitate to call or ask me personally for further instructions. Charles Thurston-Snoha Employment Specialist OIC Training Academy 120 Jackson Street Fairmont, WV (304) Cthurston-snoha@oicwv.org 31