What to do

Editing a clever website

Step 1. Copy all of the folder called "VietPan" from Student Common - ICT - PGONLINE - HTML and website development to your own user area.

You will be adding to and changing the files in this folder.

You will already have made a PowerPoint slideshow with 6 slides showing information about Japan and Vietnam.

This will be the basis of the website that you will make.

Here is my PowerPoint...

... that I will use as as example so that you can see what to do.

This is what the site looks like at the start. Double click on "index.html" to open the web page.

You are going to add the images that you have collected as part of the PowerPoint activity and the test that you found as well to this web page structure.

Open the code of the index,html page by opening Notepad and then using "File" and then "Open" to find the index page and open it.

Scroll down about a third of the way and you should find the "Thumbnail" section as shown below.

The code that will be changed is the line

<h2>Diam tempus accumsan</h2>

This needs to be the title of your first piece of information. I my case I will change the code to be

<h2>Magnificent yet tranquil temples and shrines.</h2>

as demontrated below.

Save the change to the code and refresh the page and you will have something like this:

Can you see where the text on the page has changed?

Look at the bottom left hand corner.

The next thing to do is to change the image to match.

My PowerPoint has the image of the temple on the lake, this is the image that I will use for this.

These are the images that I have saved as part of making the PowerPoint.

You will see that the image of the temple on the lake is saved as "a174".

The first picture is called "01" in the VietPan site and so you have to change the name of your first image to be 01 as well.

Click on the filename once, wait a few seconds and click again and you can change the name.

If you look closely at the image you will see that I have changed the name from a174 to 01.

Now copy and paste the 01 image into the folder called "images" then "Fulls". Look for it as part of the VietPan folder that you copied across.

You should see a message something like this ...

Click on "Copy and replace" to copy the image to the new folder.

Now refresh the page and you should see this (or something similar to it):

Drop another copy of the 01 image into the "Thumbs" folder and refresh the page and you will have this (or something like it):

The last thing to do is to add some of the facts to the page by changhing the writing on the page and your first edit to the website is complete.

You can now add more images and text to the site...

There are 12 images to change and 12 titles and pieces of text to add.

When you are finished your web page should look like this.

Recent Posts

July 24

Repairing a hyperspace window

Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus semper mod quisturpis nisi consequat etiam lorem. Phasellus quam turpis, feugiat et sit amet ornare in, hendrerit in lectus semper mod quis eget mi dolore.

July 18

Adventuring with a knee injury

Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus semper mod quisturpis nisi consequat etiam lorem. Phasellus quam turpis, feugiat et sit amet ornare in, hendrerit in lectus semper mod quis eget mi dolore.

July 14

Preparing for Y2K38

Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus semper mod quisturpis nisi consequat etiam lorem. Phasellus quam turpis, feugiat et sit amet ornare in, hendrerit in lectus semper mod quis eget mi dolore.

Spotlight

Neural Implants

The pros and cons. Mostly cons.

Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus semper mod quisturpis nisi consequat ornare in, hendrerit in lectus semper mod quis eget mi quat etiam lorem. Phasellus quam turpis, feugiat sed et lorem ipsum dolor consequat dolor feugiat sed et tempus consequat etiam.

Lorem ipsum dolor quam turpis, feugiat sit amet ornare in, hendrerit in lectus semper mod quisturpis nisi consequat etiam lorem sed amet quam turpis.