School of CS Western Illinois UniversityIS 524, Assign#4 Amaravadi

INTRODUCTION TO WEB SITE DESIGN

OVERVIEW OF THE PROJECTThis assignment will use Microsoft Publisher to create part of a corporate web site. Generally a web site consists of a number of pages which are stored in publisher format (“.pub”). You are already given a template (classic.pub) for the web site. You need to save it as “yourstore.pub” (e.g. guitar.pub). Then you can edit it just like a word document. When you are done, you have to generate a “.htm” file i.e. classic.htm. It also creates a directory called <classic_files> These two files are sent to your ecom account via the internet using an open source communications utility called “winscp.” Your account should have/or you should create a “http” directory and ship the files there (see the diagram below). You need to send both files to this directory. See figure below. The “classic.htm” is your index/home page. You can view site by typing www.wiu.edu/users/yourecomusername/storename.htm (e.g. www.wiu.edu/users/mfc101/classic.htm).

.

.http classic.htm < classic_files>

DESIGN THE COMPANYThink of a company that you would like to have, we will call this yourstore . Do not have spaces in the or caps in the file name-- could potentially cause problems in loading e.g. “befit”, “hockey.” Short names are preferable. For grading purposes, all sites must have some tangible items to sell: books, CDs, Toys, furniture, guitars, sports equipment etc

SET UP THE ENVIRONMENTCreate a new directory (folder) using the windows menu (“Start”, “MyComputer”, “File” and “New”). Give it a name that corresponds to your store e.g. “Classic.” Download the template from the course website (“classic.pub”) into this directory. (You may need to set the download option in your browser to prompt you for a file destination every time you download otherwise it may download to mydocuments). Open this in MS Publisher (2013).

Open “classic.pub” and save it as “yourstore.pub” where “yourstore” is the name of your store. It could be “guitar.pub”. When you open it, you will see the template as in the second diagram below. Now you can edit the web pages.

SET THE BUSINESS INFORMATIONGo to “Files” and “Info” and type the business information (as per your concepts!)

2

WORK ON HOME PAGE AND PRODUCT PAGEA web site consists of a number of individual web pages. Here you can select the page you want to work with by selecting and clicking on the page as shown in the left panel. For the home page you will have to change the images (simply click or right click to insert new image), change the text etc. Unwanted images are deleted by simply selecting and pressing the “del” key. You will do this just as you would edit a word document. You have to add products on the product page (the second page) and change prices also.

You will select this page and directly change the images, product names, SKUs, descriptions and prices. You can preview your web site by going to “web page preview” from main menu.

CREATE CURRENCY CONVERTER PAGECreat a third page in the template. When you are on the second page, click “Insert” “Page” and “ Duplicate page”. The third page in the template is a currency converter. Rename it to Currency

3

Converter.

The third page is a duplicate of the second page. You need to get rid of the content in the main part of the page and relabel the Product List menu item on the left side of the page (see above). When you are done this is what you will see.

4

CREATE A HTML VERSION OF YOUR WEB SITEGo into Main menu, and “File”, “Save”, “Export” and “publish html.” Select “publish html” under “advanced options”. It will prompt you for a file name (“classic.htm” or “yourstore.htm” where yourstore is the name of the your site). Make sure you save it in your directory. In the example below it is “classic”. Press “save.”

System should generate yourstore.htm (e.g. classic.htm) and <yourstore_files> (.e.g <classic_files> as shown below. Note that “classic.pub” is your source file. See if you can use windows explorer/file explorer to see if it created the files. You will need to send the two files (“classic.htm” and “classic_files” folder) to your ecom account using winscp. But first we need to enter the code

ADD JAVASCRIPT CODE FOR CURRENCY CONVERTER

We will open up one of the html files (3rd page of web site) created by Publisher and enter code.Go into your computer folder and find the “classic_files” folder (if you did guitars, it would be “guitar_files”.

5

click on ‘Page407.htm’ to make sure it is the currency converter page. Load it into notepad (should be under accessories). When opening the file, make sure notepad is looking for “all files” rather than “.txt” only. Find the text “To contact us, call:” insert the following code as shown in the screen shot below.

<script language="JavaScript">function euroConverter(){document.converter.dollar.value = document.converter.euro.value * 1.470document.converter.pound.value = document.converter.euro.value * 0.717document.converter.yen.value = document.converter.euro.value * 165.192}function dollarConverter(){document.converter.euro.value = document.converter.dollar.value * 0.680document.converter.pound.value = document.converter.dollar.value * 0.488document.converter.yen.value = document.converter.dollar.value * 112.36}function poundConverter(){document.converter.dollar.value = document.converter.pound.value * 2.049document.converter.euro.value = document.converter.pound.value * 1.394document.converter.yen.value = document.converter.pound.value * 230.27}function yenConverter(){document.converter.dollar.value = document.converter.yen.value * 0.0089document.converter.pound.value = document.converter.yen.value * 0.00434document.converter.euro.value = document.converter.yen.value * 0.00605}

</script><form name="converter"><table border="0"><tr><td>Euro: </td><td><input type="text" name="euro" onChange="euroConverter()" /></td></tr><tr><td>US Dollar: </td><td><input type="text" name="dollar" onChange="dollarConverter()" /></td></tr><tr><td>British Pound:</td><td><input type="text" name="pound" onChange="poundConverter()" /></td></tr><tr><td>Japanese Yen: </td><td><input type="text" name="yen" onChange="yenConverter()" /></td></tr><tr><td colspan="2" align="center"><input type="button" value="Convert!" /></td></tr></table></form>

6

Note: This part is hit or miss – I will not be able to provide any help on this part of the assignment. Publisher used to have a separate menu for inserting code, now due to version changes this feature is no longer available and code has to be manually inserted, as we have tried to do. I will deduct only one point if you are not able to get this to work.

After completing your assignment, your web page will look like shown below, but first you will need to upload the files using winscp. You can check if it is working by simply double clicking on the html file – it should open in Firefox.

7

UPLOADING THE FILES1. You need to check the lab if they have Winscp (it may be listed under “FTP” or “LAB”).

2. If you don’t have Winscp, go to GOOGLE and search for WINSCP download.

3. You need to download the “Portable executable.”

4. You need to save the zip file and run the executable – you are left on your own here. Note that you will not be able to install it on university computers.

5. You are presented with the WINSCP login panel (see below). You need to enter sftp.wiu.edu for host name and your wiu username and password. It may ask you again for user name and password.

6. Now you should be in the main menu (see screen below). Find your directory by clicking on the

8

appropriate directory on the left side of the panel. You can find your thumb drive by opening up the menu in the top left hand side (where it says “C:Windows7”).

7. In the right side panel of Winscp you should have a “http” directory – you will drag and drop

your directory files and your .htm file (e.g. classic.htm). If you don’t have a subdirectory, you need to create one. Position the cursor on the folder on the right side panel, then go into application menu on top, “Files” and “New” and create a directory (see below). Call it “http” without the quotes (not shown). Now click on this and send the files over by dragging and dropping from your hard drive or thumb drive into this directory.

8. Go into the http directory by clicking on it to see if you transferred the files correctly over. Then go back up so you can see the “http” directory. Select “http” and right click and open properties. You should see something like the permissions screen given in the second screen below. You need to give permissions for others to view your web site. Please note that ‘RWX’ permissions have to be set for each of two files that are sent over (e.g. “classic files” folder). R – read, W – Write, X – execute.

9

9. View your “web site” by typing your account address (e.g. “mumi3” without the quotes) as in http://www.wiu.edu/users/ account /mywebesite.htm . Print the first page. If you cannot view it, you need to go back and a) experiment with the permissions b) check if the files are under http directory or not – if they are not, you need to re-export them.

10. What I need simply is the URL of your web site, not the path to your folder! (-2 points in this

case + resubmit).

SUBMISSION & REQUIREMENTSYou are now the proud owner of an electronic store!

The web site should be tailored to your store, all images and text needs to be different.

View your “web site” by going to a browser and typing your account address as in http://www.wiu.edu/users/ account /yourstore.htm where account is your account e.g. “mujm32” and yourstore.htm is the name of your main file, such as classic.htm. Print out the first page of the web site after it is loaded in your account and submit that!

COMMON PROBLEMS1. “Forbidden your client is not allowed to access the requested object.” This error comes because of

insufficient permissions. You can experiment with the web site permissions or you can go toto guava https://www.wiu.edu/guava/index.sphp : a) login by providing user name and passwordb) go to “web site” and c) select “fix web site permissions.” Wait a minute before trying the site again. Good luck!

2. The web site appears, but pictures do not show. You have not sent the directory files over e.g. <classic_files>. If you did send them over, make sure you delete them (in the destination folder). One caution is that you already modified the 722.htm file. You will need to save that separately. Then republish the web page along with directory files and resend both again. Make sure the 722.htm file is uploaded separately (note that it can be 9xx.htm also) You might also have to check the permissions on image files in the subdirectory. You can set them all at once by selecting them and right clicking to open up properties.

10