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

Transcription

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

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

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

4 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 look at Windows Explorer and prepare our folders so we know where to put everything. Let s go! 4

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

6 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

7 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

8 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

9 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 think about how your pages will look. Pause here and start your first page. When you have it, go to the next page of this tutorial. 9

10 Your homepage Module 1 Naming Did you make your homepage? The name always starts with the word index. The last part depends on the type of file. Name yours index.html Save that page in the 4thFloorAptB folder you just created. I save my page often so my hard work is safe if my computer crashes. 10

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! 11

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 12

13 Module 1 Module 1 You learned how to: Parts of Windows Explorer Set up the file structure Name files appropriately 13

14 Module 2 Module 2 How to Upload to the server. You will learn how to: Download Filezilla How Filezilla works Connect to the server Locate your files to move Upload your files View your website online 14

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 our judges can see it. 15

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 apartment. Let s download FileZilla now. 16

17 Downloading FileZilla Module 2 FileZilla 1. Go to 2. Click on the download the Client Version. 17

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. 18

19 Fake download links Module 2 FileZilla Watch out for fake links that look like the real Download button. They ll fake you out to get you to download other junk. 19

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. 20

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 move files from our local drive on the left to the server on the right. First, we will use our user ID and password to log in and connect to the server. 21

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

23 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. 23

24 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 24

25 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. 25

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

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

28 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. 28

29 Upload the files Module 2 Uploading Files To move the files to the server: 1. Select the files 2. Right-click 3. Select Upload l l l l l l l 29

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

31 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 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 If you had your own server, the address of your website would be HOWEVER 31

32 Viewing your website online Module 2 Viewing The MCWT uses a hosting company to manage its virtual apartment building, so the address is a little different. MCWT will send you your user ID and password to upload your site to the server. You will also get a link that will allow you to see your site. It will look something like this: /f thFloorAptB/ You will replace the 4thFloorAptB with YOUR username. 32

33 A finished website! Module 2 Viewing 33

34 You ve done it! Module 2 You learned how to: Download Filezilla How Filezilla works Connect to the server Locate your files to move Upload your files View your website online 34

35 View your website online Module 2 Viewing Let s clarify your virtual address where you will put YOUR files for the competition. The MCWT uses a hosting company to manage its virtual apartment building, so the address is a little different. MCWT will send you your user ID and password to upload your site to the server. You will also get a link that will allow you to see your site. It will look something like this: Just fill in the X s with your Username. Here s an example: 35

36 Ready to go! We covered the basics of creating a website to get you started. If you get stuck along the way, review the course, check the next page called Troubleshooting, the W3C website, and YouTube to help you. Now go create your website and win our competition! 36

37 Troubleshooting My page doesn t look like that. 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. 37

38 Resources Gigantor list of free graphics: ources is a copy of the master wikipedia page at Meta, which lists a number of sources of public domain images on the Web. Tutorials has dozens of video tutorials. Use the Search Box to find help on any topic. For example type in: KompoZer tables tutorial. Tutorials that cost $$ has over a thousand tutorials on a variety of topics FileZilla File Transfer tutorials: 38

39 Resources The ultimate resource: The World Wide Web Consortium (W3C) is the organization that develops protocols and guidelines for the Web. It brings you new technologies and tutorials, and is the professional web developer s Go-To resource. Websites: (reveals common and not-so-common HTML codes) -tutorial site for writing code - All about Web Design - Frequently asked questions about copyright 39

40 Credits for this tutorial Brenna Bigelow and Marissa Howard Copyright 2012 Patricia Howard All Rights Reserved 40