Web Design Competition

Tutorial

Designed for use by the Michigan Council of Women in TechnologyCopyright © 2019 Patricia Howard All Rights Reserved

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

2

Just Kidding!

3

Module

1

Module

2What you need to know before

you upload

Moving your site to the internet

Some basicsBefore 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.

4

Intro

Let’s go!

Module 1

5

We will cover the Basics of

how to:

• Parts of Windows Explorer

• Set up the file structure

• Name files the “right way”

Module

1

Windows Explorer

Windows Explorer shows the structure of the files on your computer.

6

Set the View to Details

Working on the Desktop

We will make this

folder

Module 1

Structure

Set up the file 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.

7

Let’s create a folder on your desktop where your files will reside.

Module 1

Structure

Set up the file 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

Module 1

Structure

9

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.

Set up the file structureModule 1

Structure

Your homepage

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.

10

I save my page often so my hard work is safe if my

computer crashes.

Module 1

Naming

When naming files

Always

• Name pages and images

descriptively

• Use lowercase letters

• Name the first page of

your index.html

11

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.

Module 1

Naming

*If the names have spaces, periods or special characters the pages might not

show up in the browser correctly!

Where to save your pages

Browse to the Desktop for the 4thFloorAptB folder you made earlier.

Save the page as index.html

12

Module 1

Module 1

13

You learned how to:

• Parts of Windows Explorer

• Set up the file structure

• Name files appropriately

Module

1

Module 2

14

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

Module

2

Let’s move your website

to the webIn Module 1 we learned to set up the structure of the files and where

everything goes.

15

Now we are ready to use the free software

FileZilla to move our website to the Web

Server so our judges can see it.

Module 2

Server

16

What’s a Web 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 manyapartments 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.

Module 2

Server

Let’s download FileZilla now.

Downloading FileZilla

1. Go to http://filezilla-project.org/

2. Click on the download the Client Version.

17

Module 2

FileZilla

Choosing a version

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

Module 2

FileZilla

Fake download links

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

Module 2

FileZilla

Where to save the program

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.

20

The computer will save the

application to your desktop and

display the FileZilla icon.

3. Double-click the icon to start

the program.

Module 2

Download

Using the FileZilla interface

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

Module 2

FileZilla

Connecting to the server1. 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 emailed 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

Module 2

Connecting

When the Status reads Directory listing successful you have connected

to the server.

23

We’re in!

Next let’s find our files on our home

computer that we want to upload to

the server.

Module 2

Connecting

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.

24

Files on the DesktopModule 2

Locating

Files

Use this to scroll to the

top

Desktopicon

Double click the folder named 4thFloorAptB to see the files we have

created for our website.

25

Locating the files to moveModule 2

Locating

Files

We found our files!

And here they are!

Now let’s see how and where to put them on the server.

26

Next, FileZilla shows us our local drive and the server.

Module 2

Locating

Files

Local and Server files

The left side of the screen is your

local computer and the right is the server.

27

Local Computer Server

l

l

l

l

l

l

Module 2

Locating

Files

Images folder and

index.htmlOn 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

Module 2

Uploading

Files

Upload the files

To move the files to the server:

1. Select the files

2. Right-click

3. Select Upload

29

l

l

l

l

l

l

l

Module 2

Uploading

Files

Ta-da!

The files are there. Now let’s go look at them.

30

Module 2

Uploading

Files

Viewing your website online

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

31

If you had your own server, the address of your website would be

www.mcwtwebdesign4girls.net/4thFloorAptB/index.html

HOWEVER…

Module 2

Viewing

Viewing your website online

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:

32

Module 2

Viewing

http://s1075320.instanturl.net/mcwtwebdesign4girls.net/

2019/f231542.4thFloorAptB/

You will replace the 4thFloorAptB with YOUR username.

A finished website!

33

Module 2

Viewing

You’ve done it!

34

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

Module

2

View your website onlineLet’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:

35

http://s1075320.instanturl.net/mcwtwebdesign4girls.net/2019/XXXXXXXX/

Just fill in the X’s with your Username.

Here’s an example:http://s1075320.instanturl.net/mcwtwebdesign4girls.net/2019/f231542.850WeQ7yv/

Module 2

Viewing

36

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!

Ready to go!

37

Troubleshooting

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

My page doesn’t look like that. What do I do?

38

ResourcesGigantor list of free graphics:

✓ http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources is a copy of the master wikipedia page at Meta, which lists a number of sources of public domain images on the Web.

Tutorials

✓ 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.”

Tutorials that cost $$

✓ http://www.lynda.com/ now part of LinkedIn, has over a thousand tutorials on a variety of topics

FileZilla File Transfer tutorials:

✓ http://wiki.filezilla-project.org/Using

39

ResourcesThe ultimate resource:

The World Wide Web Consortium (W3C) www.w3c.org 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:

✓ https://www.thewebmonkeyacademy.com/ (reveals common and not-so-common HTML codes)

✓ http://www.w3schools.com/ -tutorial site for writing code

✓ http://www.lissaexplains.com/basics.shtml - All about Web Design

✓ http://www.chillingeffects.org/copyright/faq.cgi - Frequently asked questions about copyright

Credits for this tutorial• http://all-free-download.com/free-vector/

• http://www.clker.com/

• http://www.freedigitalphotos.net/images/People_g40.html

• https://www.freeimages.com/

• http://www.iconfinder.com/

• Brenna Bigelow and Marissa Howard

40Copyright © 2019 Patricia Howard All Rights Reserved