1 Assembling an Educational Website Setup Text Saving and Viewing.

11

Asse

mblin

g

an

Educational

WebsiteSetup Text Saving and Viewing

22

Asse

mb

ling

an

Website

Educational

Initial SetupLog onto computer (Mac) in ITC001 (turn on if necessary)

Connect to server: public_htmlIn finder, select GO and then Connect to ServerType smb://homex/~username where x is the first letter of your username

An icon should appear on the desktop and the word public_html should appear in the Finder window when you open the Finder (leftmost icon in the dock)

33

Asse

mb

ling

an

Website

Educational

Initial Setup (continued)

Start a new folder for this projectClick on public_html icon, then select New Folder under FileName the new folder “myweb” (the computer should default so that you can immediately type “myweb”); you will put all webpage documents in this folder

44

Asse

mb

ling

an

Website

Educational

Image• First … Start another new folder

• Click on public_html icon and then on your myweb folder - Select New Folder under File

• Name the new folder “images” (all small letters); you will put absolutely all images in this folder

>>>>>> beforebefore you put them on your website <<<you put them on your website <<<

55

Asse

mb

ling

an

Website

Educational

Initial Setup (continued)

Open DreamWeaver

Open a browser (Safari or Firefox recommended)

66

Asse

mb

ling

an

Website

Educational

DreamWeaver setup

• With Dreamweaver open, • click on NewNew under File, • then Blank PageBlank Page• HTMLHTML (middle• <none> <none> and • finally CreateCreate (bottom right)

77

Asse

mb

ling

an

Website

Educational

DreamWeaver setup

• In the upper left of the Dreamweaver screen click on “Split”

88

Asse

mb

ling

an

Website

Educational

Introduction to HTMLBasic tool: tags, e.g. <body></body>;

<table><tr><td>

• Basic to each document (DW does this for you, and more)

<html> <head> <title>Title of the Webpage</title> </head> <body>

----this is where you will enter most of your code---

</body></html>

99

Asse

mb

ling

an

Website

Educational

Introduction to HTMLBasic tool: tags, e.g. <body></body>;

<table><tr><td>

• Basic to each document (DW does this for you, and more)

1010

Asse

mb

ling

an

Website

Educational

Introduction to Fundamentals of Webpage Design for ED421

Text (think MS Word, it’s straight forward)

Images (pictures and don’t forget Photoshop)

Links (connections to other pages)

Tables (layout design)

1111

Asse

mb

ling

an

Website

Educational

Text• In DW, on the lower half of the split screen type some text, such as, “This is the Title of my First Webpage”

1212

Asse

mb

ling

an

Website

Educational

TextSave this document:

• Under File, click on • Save As; click on the little •blue square with little triangle• at the right of the name box to •see the full window and list of all folders

• Type in a name for your webpage• Click on public_html and then ED421 (the

folder you created above) and then click on Save

1313

Asse

mb

ling

an

Website

Educational

TextSave the document:

Note the recommended rules for naming webpages)• Rule #1: Always use only small lettersuse only small letters (to avoid confusion remembering if you used capitals or small letters)

• Rule #2: Do not useuse special characters or spaces (they look ugly and confusing in the URL address for your users)

• Rule #3: End the webpage name with ..htmhtm or or .html.html (always use the same ending for consistency)

• Rule #4: Use short namesshort names (this is a recommendation)Example:

first.html

1414

Asse

mb

ling

an

Website

Educational

TextView the document: Viewing your Webpages

• Click on a browser (Safari or Firefox) to open it

• Under File in the Menu, select Open File• Find your webpage (should be in public_html, in folder

myweb), select your webpage• Click on Open (or double click on the webpage name)

1515

Asse

mb

ling

an

Website

Educational


• Ah ha!

1616

Asse

mb

ling

an

Website

Educational


To view your webpage from other computers or your home computer:

• Open your browser• Type

www.wou.edu/~username/myweb/first.html (where username is your username, like jjones; myweb is the name of the folder you created earlier; and first.html is the name of your webpage you just saved)

1717

Asse

mb

ling

an

Website

Educational

TextRepeat this process with new

document File>>New>>HTML>>none>Create

Type some textSave and name; like second.html

1818

Asse

mblin

g

an

Educational

WebsiteLinks

1919

Asse

mb

ling

an

Website

Educational

Links• Links for Text or Images are very similar• Highlight Text

2020

Asse

mb

ling

an

Website

Educational

Links• Note the Link box in the Properties

• There several options at this point:• Directly type in the complete URL of another webpage, eg.

http://www.wou.edu/library• Directly type in the name of another document you have or will have in your myweb, eg.

second.html• Use the little blue folder icon to the right of the text box to browse for another one of your documents• Point to the document name in the right column

2121

Asse

mb

ling

an

Website

Educational

Links• Note the Link box in the Properties in both cases• Highlight Text

• There several options at this point:• Directly type in the complete URL of another webpage, eg.

http://www.wou.edu/library

2222

Asse

mb

ling

an

Website

Educational

Links• Note the Link box in the Properties in both cases• Highlight Text or click on an Image

• There several options at this point:

• One is to directly typetype in the name of another document you have or will have in your myweb, eg. second.html

2323

Asse

mb

ling

an

Website

Educational



• Another is to use the little blue folder icon to the right of the text box to browsebrowse for another one of your documents

2424

Asse

mb

ling

an

Website

Educational



• Thirdly you can point directly to the document in the right column

2525

Asse

mb

ling

an

Website

Educational

Links• You have mastered the technique of linking webpages

• At this point you may try several things:• Go to second.html in Dreamweaver• Highlight “Return to questions”• Create a link to first.html

• Save both documents in myweb

• Open your browser• Open webpage first.html• Click on your link• And again, and again

2626

Asse

mb

ling

an

Website

Educational

In SummaryLogon to your computer in ITC001Connect to public_html Create the myweb folder (first time only) Create the images folder (first time only)

Open DreamWeaver, create documents

Save images in the images folder (soon)

Save webpages in myweb

Open browser and open webpage, or Open browser and enter URL www.wou.edu/~username/myweb/first.html

In SummaryLogon to your computer in ITC001Connect to public_html Create the myweb folder (first time only) Create the images folder (first time only)

Open DreamWeaver, create documents

Save images in the images folder (soon)

Save webpages in myweb

Open browser and open webpage, or Open browser and enter URL www.wou.edu/~username/myweb/first.html

2727

Asse

mblin

g

an

Educational

Website

Images

2828

Asse

mb

ling

an

Website

Educational

Image• Second … Find an image

• From the Internet• Search using a search engine like Google• Download the actual image, probably to your Desktop, not a thumbnail

• From your camera• Download from your camera to Desktop

• From the scanner• Scan and move image to your Desktop

2929

Asse

mb

ling

an

Website

Educational

Image• Second … Size and modify image

• In Photoshop, open the desired image• Under Image, select Image size

3030

Asse

mb

ling

an

Website

Educational


• In Photoshop, open the desired image• Under Image, select Image size

• Adjust the size• Resolution of 72 is good for webpages• A width of 800 is almost the full page, a width of 100 is quite small, a width of about 300 is very workable

• Click on OK

3131

Asse

mb

ling

an

Website

Educational


• In Photoshop, open the desired image• Under Image, select Image size• Adjust the size

• Resolution of 72 is good for webpages• A width of 800 is almost the full page, a width of 100 is quite small, a width of about 300 is very workable

• Click on OK

• “Save for Web & Devices” under File

3232

Asse

mb

ling

an

Website

Educational


• In Photoshop, open the desired image• Under Image, select Image size• Adjust the size

• Resolution of 72 is good for webpages• A width of 800 is almost the full page, a width of 100 is quite small, a width of about 300 is very workable

• Click on OK• “Save for Web or Devices” under File

• Typically choose “jpeg”; click Save• Save in your “image” folder which is in the myweb folder which is in the public_html• Give the image a good name• SaveSave

3333

Asse

mb

ling

an

Website

Educational

Images• Back in DW, on the lower half of the split screen place your cursor behind your text and press Return, this positions your image

3434

Asse

mb

ling

an

Website

Educational

Images• Under View, select Image

• On the next screen, select your public_html folder, then your myweb folder, then your images folder, click on the name of your image, and click on Choose

3535

Asse

mb

ling

an

Website

Educational

Images• Once your image is on your webpage, you can justify its position left, right and center; you can change the size; and more (see Properties at bottom of page)

• Note the names of your images in the code portion of the screen and also in the Properties

• Type in a name or word in Alt (this word will be read by the computer of blind persons)

• See next slide for visual

3636

Asse

mb

ling

an

Website

Educational

Images

3737

Asse

mb

ling

an

Website

Educational

ImagesSave this document:

again and frequently

Under File, click on Save (or use the key stroke shortcut)

View your Webpage• Click on a browser

• Under File in the top Menu, select Open File, and find your webpage document, or

• Type your address in the URL box, eg. www.wou.edu/~yourusername/myweb/first.html

3838

Asse

mb

ling

an

Website

Educational

ImagesView this document: Ah ha!

3939

Asse

mb

ling

an

Website

Educational

Images

Congratulations!

You have the basic tools for designing a webpage.

Now we will improve the way things look using CSS and Tables

4040

Asse

mblin

g

an

Educational

WebsiteCSSCascading Style Sheets

4141

Asse

mb

ling

an

Website

Educational

CSS• CSS is a way of describing how things look, such as text color, size and position; borders and margins; backgrounds and lists

• The options are innumerable – we’re going to use only a few at first

• Start to think of patterns that repeat throughout the webpage or website, such as heading text types, paragraph text, image margins, backgrounds of small sections of the page

4242

Asse

mb

ling

an

Website

Educational

CSS• In the top Menu select Format (we will do this twice: once to create and once to apply)

• Select CCS Styles, then New

4343

Asse

mb

ling

an

Website

Educational

CSS• In the next window there are three things to do

• 1 -We’ll leave Class as it is

• 2 – We’ll give our “style” a name

• 3 – We’ll leave the “this document only” as it is

4444

Asse

mb

ling

an

Website

Educational

CSS• In the next window we will choose the features of our style, such as font family, size, color, weight, etc

• And click on OK

4545

Asse

mb

ling

an

Website

Educational

CSS• Back on your webpage in Dreamweaver, highlight text or object to which you want to apply the style

• Again, go to Format in the Menu• Choose CSS Styles• Choose the name your gave to your style

4646

Asse

mblin

g

an

Educational

WebsiteTables

4747

Asse

mb

ling

an

Website

Educational

Tables• Before we use Tables we will explore their possibilities

• Think of Tables like a page divided into squares and rectangles; bricks, if you will; or similar to an Excel spreadsheet

• With your browser (Firefox or Safari) and critically view several websites: cnn.com, google.com, wou.edu/saxowsky/tech/eden/amind/ed421/index.html, or others

4848

Asse

mb

ling

an

Website

Educational

Tables• Notice CNN.com is somewhat complex but definable • Google.com is essentially a non-table or a single cell table• My webpage has two rows and two columns; this is a great place to start. I recommend this table!

4949

Asse

mb

ling

an

Website

Educational

Tables• We’re getting close to designing the website, so in your mind, or on a scratch sheet, you can start to visualize your webpage.• Let’s practice a table first!

• In DW, under File, create a New webpage, choose HTML (middle of the page) and click on Create (lower right)

• Click on the icon in the upper left to “split” the screen.• Click your mouse in the lower half of the screen. Your table will be created where you click your mouse.

5050

Asse

mb

ling

an

Website

Educational

Tables• Click on Insert and then choose Table

• Choose the numberof rows and columns• 800 is a good width (experiment!)

• Nothing in Border implies invisible• Padding is like matting in the cell• Spacing is the distance between cells

5151

Asse

mb

ling

an

Website

Educational

Tables• The Table appears! Click in any cell and insert Text and Images as we have done in the past.

• Click on the central vertical line and drag it to adjust widths

5252

Asse

mb

ling

an

Website

Educational

Tables• Click in any cell and insert Text and Images as we have in the past

5353

Asse

mb

ling

an

Website

Educational

Tables• If you wish to modify the table, click on table under your webpage and make adjustments in the Properties!

You can changebackground colorsor add abackground imagehere also. Put the image in your “images” folderfirst.

5454

Asse

mb

ling

an

Website

Educational

Tables and beyond• One more thing: Under Modify in the menu of DW you can choose Page Properties. Here you can, and should, name your page. Here you can also change the color of all text and background.

5555

Asse

mblin

g

an

Educational

WebsiteAssignment and Strategies

5656

Asse

mb

ling

an

Website

Educational

Assignment• Create a website!

• Create an educational website:• Use the website to teach a lesson• Use the website to outline a coursework or program• Use the website to explain your class to parents/public

• Technical minimums:• Homepage, plus• Three additional pages (at least)• Links from all pages back to homepage• At least two links to other websites• At least two images

5757

Asse

mb

ling

an

Website

Educational

Assignment (strategies)• Plan ahead!!!

• Design the homepage• Plan the names* of the five additional pages• Use the website to outline a coursework or program• Use the website to explain your class to parents/public

5858

Asse

mb

ling

an

Website

Educational

Assignment (strategies)• Plan ahead!!!

• Design one (of the five) additional page(s) very well in detail including all links and colors (expect the images and text content to vary with each page)

• Save this page five times naming them the five *names

5959

Asse

mb

ling

an

Website

Educational

Assignment (strategies)•Design one (of the five) additional page(s) very well in detail including all links and colors (expect the images and text content to vary with each page)

• Save this page five times naming them the five *names

6060

Asse

mb

ling

an

Website

Educational

Assignment (strategies)• Return to each page and enter the appropriate content of text and images

• Save this page when revisions are made

6161

Asse

mb

ling

an

Website

Educational

Assignment (strategies)• Your public_html may, actually should, look something like this:

6262

Asse

mb

ling

an

Website

Educational

Assignment (strategies)• Your webpages should look something like this at minimum

6363

Asse

mb

ling

an

Website

Educational

Assignment (Congratulations)• You have met the minimum requirements and now you can go back and decorate, add fancy buttons and other interesting and intriguing features.

1 Assembling an Educational Website Setup Text Saving and Viewing.

Documents

Transcript of 1 Assembling an Educational Website Setup Text Saving and Viewing.