Web Design Competition File Upload Tutorial

Web Design Competition File Upload Tutorial Designed for use by the Michigan Council of Women in Technology Copyright 2016 Patricia Howard All Rights Reserved

Welcome. We ll start with a quick overview of the process. 2

Just Kidding! Module 1 What you need to know before you upload Module 2 Moving your site to the internet 3

Some basics Intro Before we jump in, when you see text highlighted in Green it means it is the name of some thing like a button, menu, or a step to do. Pink means it is really important. Now let s prepare our folders in Windows Explorer so we know where to put everything. Let s go! 4

Module 1 Module 1 We will cover the Basics of how to: Identify the parts of Windows Explorer Set up the file structure Name files the right way 5

Windows Explorer Module 1 Structure Windows Explorer shows the structure of the files on your computer. Working on the Desktop Set the View to Details We will make this folder 6

Set up the file structure Module 1 Structure All the pages, images, audio, video, animations and all other item you put in your website are considered files. We need to organize these files so we know where to find them when we need them. Let s create a folder on your desktop where your files will reside. 7

Set up the file structure Module 1 Structure Let s create a folder on your desktop: 1. Right-click on the desktop 2. Select New 3. Select Folder 4. For today s tutorial, name the folder: 4thFloorAptB Put no spaces in the name. Now create a second folder: 1. Name it images 2. Drag it to the first folder to put it inside. Do not capitalize the name images 8

Set up the file structure Module 1 Structure The name 4thFloorAptB is actually the address where your website will live on the internet, but we will get to that later. Just remember to put all your images in your images folder. Now it s time to make the homepage of your website! 9

We ll wait for you Now think about how your pages will look. Pause this tutorial here and create your first page. When you have it, go to the next page of this tutorial. Remember to save and back up your work often! 10

Your homepage Module 1 Naming Did you make your homepage? The page is always named index. Name yours index.html Save that page in the 4thFloorAptB folder you just created. Did you save a copy of your site as a back-up? 11

When naming files Module 1 Naming Always Name pages and images descriptively Use lowercase letters Name the first page of your index.html Never Put spaces in the name Use periods in the name Name with characters other than letters and numbers We will use.html for all our pages. *If the names have spaces, periods or special characters the pages might not show up in the browser correctly or at all! 12

Where to save your pages Module 1 Browse to the Desktop for the 4thFloorAptB folder you made earlier. Save the page as index.html 13

Module 1 Module 1 You learned how to: Identify the parts of Windows Explorer Set up the file structure Name files appropriately 14

Module 2 Module 2 Now you will learn how to upload to the server. You will learn how to: Download FileZilla Explain how FileZilla works Connect to the server Locate your files to move Upload your files View your website online 15

Let s move your website Module 2 Server to the web In Module 1 we learned to set up the structure of the files and where everything goes. Now we are ready to use the free software FileZilla to move our website to the Web Server so that your website can be seen by the judges and by you! 16

What s a Web Server? Module 2 Server A Web Server is like a virtual apartment building. The MCWT rents space on a server owned by a hosting company. It is the same as renting a floor in someone else s building. Our space is one of many on that server. Your website is just one of the many apartments on our floor. Just like an apartment has an address, so does your website. We ll come back to your apartment a little later. First we need to download the software that helps you move in to that new apartment. Let s download FileZilla now. 17

Downloading FileZilla Module 2 FileZilla 1. Go to http://filezilla-project.org/ 2. Click on the download the Client Version. Be careful! It isn t.net or.com! 18

Choosing a version Module 2 FileZilla Click on the latest version of the software to download. In this picture the version selected is for a Windows PC. If you use a Mac, scroll down and select that link. 19

Fake download links Module 2 FileZilla Be certain you are clicking the correct Download button. There are similar ones that download other stuff you don t want. 20

Where to save the program Module 2 Download 1. Click the Save button, then browse to your Desktop. 2. Click OK. Be sure your computer is set to accept the download. If you use IE you may have to click the message bar at the top of the screen to select the option to accept the download. The computer will save the application to your desktop and display the FileZilla icon. 3. Double-click the icon to start the program. 21

Using the FileZilla interface Module 2 FileZilla Using FileZilla is a lot like moving files from one folder to another in Windows Explorer. It is easy to copy files from your computer ("local site") to the MCWT host site ("remote site") on the right. Your list of folders and files on the left will be copied to the right side of the FileZilla interface screen. First, we will use our user ID and password to log in and connect to the server. 22

Uh-oh an Error Message Some schools and businesses have firewalls that block you from downloading FileZilla and uploading your site. There are a variety of messages. Talk to your teacher or IT Tech for help. Be prepared to save your files to a thumb drive so you can upload them from a non-school computer. Make sure to download FileZilla onto that non-school computer. 23

Connecting to the server Module 2 Connecting 1. Open the application. 2. Enter the Host name mcwtwebdesign4girls.net 3. Enter your Username and Password. Your team has a unique User ID and Password that is emailed to you from the MCWT Contest Administrator. You do not need a Port number. For this lesson with Jane s portfolio, we will use 4thFloorAptB. 4. Click Quickconnect. 24

We re in! Module 2 Connecting When the Status reads Directory listing successful you have connected to the server. Next let s find our files on our home computer that we want to upload to the server. 25

Files on the Desktop Module 2 Locating Files To see the folders on your Desktop: 1. Scroll to the top of the window on the left side. 2. Click on the Desktop icon. Desktop icon Use this to scroll to the top 26

Locating the files to move Module 2 Locating Files Double click the folder named 4thFloorAptB to see the files we have created for our website. 27

We found our files! Module 2 Locating Files And here they are on your local drive! Now let s see how and where to put them on the server. Next, FileZilla shows us our local drive and the server. 28

Local and Server files Module 2 Locating Files The left side of the screen is your local computer and the right is the server. Your Local Computer Remote Server 29

Images folder and index.html Module 2 Uploading Files On the server there is already an empty images folder and an index.html page as placeholders for you. Be sure your index.html file and images folder are in the bottom left pane before you move the files to the server side. 30

Upload the files Module 2 Uploading Files To move the files to the server: 1. Select the images folder and all the html pages 2. Right-click 3. Select Upload l l l l l l l 31

Ta-da! Module 2 Uploading Files The files are there. Now let s go look at them. 32

Viewing your website online Module 2 Viewing Lets go back to our server as your virtual apartment building. Every building has an address. Our server s address is www.mcwtwebdesign4girls.net Every apartment has an address. For this course your folder is named 4thFloorAptB Every room in your apartment has a name. Your main room is named index.html Therefore, the address of your website is www.mcwtwebdesign4girls.net/4thflooraptb/index.html 33

A finished website! Module 2 Viewing 34

You ve done it! Module 2 You have learned how to: Download FileZilla Explain how FileZilla works Connect to the server Locate your files to move Upload your files View your website online 35

View your website online Module 2 Viewing Lets clarify your virtual address where you will put YOUR files for the competition. The MCWTF server has the same building address we used: www.mcwtfwebdesign4girls.net Instead of 4thFloorAptB, your apartment address is the same as the Username you received in your team packet. Your main room is still named index.html Therefore, the address of YOUR website is: www.mcwtfwebdesign4girls.net/xxxxxxxx/index.html Just fill in the X s with your Username. 36

Ready to go! If you get stuck along the way, review this tutorial, check the next page called Troubleshooting, the W3C website, and YouTube for help. 37

Troubleshooting My page doesn t look right. What do I do? Confirm you are looking at the right page by checking the file path in the URL address bar. Check that the page name in the link is exactly the same as the page. Be sure all pages are named with the.html suffix. Be sure you saved the page after your last edit. Refresh your browser window. 38

Troubleshooting What is YOUR Username? Earlier in this tutorial we used 4thFloorAptB but you will enter the one you received in an email. 39

Troubleshooting What if I made my homepage with a suffix of.jsp or.php? Advanced competitors sometimes create pages in jsp or php. That is fine. Name it index with the appropriate suffix but you MUST email us to let us know. 40

Resources HTML Editors: Download KompoZer editing software (freeware for PCs) at: http://www.kompozer.net/ Watch a 7 minute Google tutorial about KompoZer: https://www.youtube.com/watch?v=lafzdi0ayam Graphic Editor: Free online photo editor no download required: http://pixlr.com/ Audio Editor: Download Wavepad at: http://download.cnet.com/wavepad- Free/3000-2170_4-75742513.html File Transfer software: Free http://filezilla-project.org/ 41

Resources A huge list of free graphics: https://en.wikipedia.org/wiki/wikipedia:public_domain_image_re sources is a copy of the master wikipedia page which lists a number of free image sources. Tutorials -free www.youtube.com has dozens of video tutorials. Use the Search Box to find help on any topic. For example type in: KompoZer tables tutorial. Lissa Explains it All. She starts at the very basics of how web pages and HTML work. http://www.lissaexplains.com/basics.shtml Tutorials that cost $$ http://www.lynda.com/ has over a thousand tutorials on a variety of topics 42

Resources The World Wide Web Consortium (W3C) is the organization that develops rules, regulations, and guidelines for the Web. It has new technologies and tutorials, and is the professional web developer s Go-To resource. You can find tutorials here: http://www.w3schools.com/ 43

Credits for this tutorial http://all-free-download.com/free-vector/ http://www.clker.com/ http://www.freedigitalphotos.net/images/people_g40.html http://www.sxc.hu/category/9002/3 http://www.iconfinder.com/ Brenna Bigelow and Marissa Howard Copyright 2016 Patricia Howard All Rights Reserved 44