cis-linux2.temple.educis-linux2.temple.edu/~sallyk/tutorials_dreamweaver...  · Web viewLab 2: Posting Your Resume to your Web Site. Contents. Visit Your Web Site (on Temple’s

Lab 2: Posting Your Resume to your Web Site

ContentsVisit Your Web Site (on Temple’s “astro” Server)........................................................................................1

Prepare Your astro Account For Your Web Site...........................................................................................2

Create a Folder for your Web Site on your Flash Drive................................................................................4

Create a Site in Dreamweaver – Local Info..................................................................................................5

Create a Site in Dreamweaver – Remote Info..............................................................................................6

Save your Dreamweaver Web Site Settings.................................................................................................7

Test your Dreamweaver Web Site Settings.................................................................................................8

Use Dreamweaver to Create Your Home Page (index.html)......................................................................10

Publish Your Home Page (index.html) to the Web Host (astro).................................................................13

Copy your Resume to your Web Root, Save as a Web Page and as PDF....................................................14

Homework Submission..............................................................................................................................15

Visit Your Web Site (on Temple’s “astro” Server)

Open up a browser and put this URL into the browser’s address box, but enter your own TUMail username after the tilde ~.

astro.temple.edu/~YOUR_TUMAIL_USERNAME

press enter and see what you get – probably a message that says your website is not set up yet…

1

Prepare Your astro Account For Your Web Site

1. Telnet is a program that lets you log in to another computer remotely. Secure Shell is a more secure version of this program/functionality. Look on your desktop for the "telnet to Astro" icon. Double click on the icon and log onto your account. If you can’t find this, click on start – programs, then look for SSH Secure Shell or Secure Shell Client.

Press the space bar (as it suggests at the bottom of the screen), and you’ll see this window.

Enter astro.temple.edu for Host Name. Enter your TUMail username for User Name.

Then click on the connect button.

When it asks for your password, enter your TUMail password.

2

Then you should see a unix menu which you should exit by typing 4 then pressing enter. THIS IS AN EXAMPLE OF AN OPERATING SYSTEM WHICH DOES NOT HAVE A GUI (Graphical User Interface).

2. You will now be at the "UNIX prompt" which displays of the name of the unix server (astro) and then a “%”.

3. Final Warning - if you already did this in class (or if you’ve already uploaded files to your website that you want to save), don’t do it again or you may overwrite the files on your website. At the UNIX prompt, type the following - do not use any spaces!

cisweboutline (then press the enter key…)

4. You should see a message like "installing files now..." If you see a message like "index.html file already exists" and "do you want to overwrite the file?",

type "Y" for yes and press the ENTER key.

The files will install and you will be taken back to the UNIX prompt.

5. This next command sets permissions for your site. At the UNIX prompt, type the following - use only one space between the two words!

fixwebperms public_html (then press the enter key…)

3

If you see this message, then you have done this correctly,

Fixing permissions for directory: public_htmlDone...[astro] ~ %

otherwise, check your spelling and try again… If you are still having trouble, ask the instructor for help.

6. Click on File – Disconnect.7. Then click on File – Exit to close out the program.

8. Now, let’s see what (if anything) has happened to the homepage of your website. Enter this URL into a browser’s address box (but enter your own TUMail username) and see.

astro.temple.edu/~YOUR_TUMAIL_USERNAME (then press enter)

Create a Folder for your Web Site on your Flash Drive

To open Windows Explorer, right click on the start button, then select explore (or left click and select Windows Explorer (not Internet Explorer).

Click on the drive letter of your flash drive. This will probably be E but it might be F.o If it is F, then you should back up whatever is on your flashdrive (e.g,. to your home

computer), then go to the tech center and ask them “to remove the U3 software from your flashdrive”. If you don’t do this, you’ll probably have a lot of trouble moving your Dreamweaver work from one PC to another.

To create your own local web root folder on your flash drive, select (From the Windows Explorer menu) File – New – Folder. Please name your folder with your name in it, e.g., “sallyrootfolder”. (Putting your name into the folder name will prevent problems later on.) I think other labs may have all students use the same folder name…

4

Create a Site in Dreamweaver – Local Info

The next two sections tell you how to set up your site in Dreamweaver. Basically, you need to tell Dreamweaver where you are keeping your development web pages (on your flash drive) and where you wish to publish your web pages (to Temple’s astro server). “Video 1” from this web page (http://isc.temple.edu/cis1055/labs/p_lab2.html ) is excellent and provides very thorough instructions about how to do this. If you have any trouble with the next two pages, please watch this video and then try again.

From the Dreamweaver menu, select Site – New Site. Click on the Advanced Tab. Make sure “Local Info” is highlighted on the left. Create a site name that has your name in it (e.g., sallysite). Browse to the folder you created (on your flash drive) to hold your web site files. This is the folder

you should have named something like “sallyroot” or “sallyrootfolder” on your E drive. For HTTP address, substitute your TUMail username for mine (which is sallyk). Don’t Click OK (you haven’t finished yet).

5

Create a Site in Dreamweaver – Remote Info Still under the Advanced Tab, click on “Remote Info” (left side of screen). Your screen will not have

much on it at this point. Into the Access pick list, select “FTP” and then the screen will fill up with more questions. Enter “astro.temple.edu“ as your FTP host (the name of your web server). Specify “public_html” as your web root folder on the host Enter your TUMail username for “login” (where I put “sallyk”) and enter your TUMail password for

password. Click on “use Secure FTP”, then click on the “Test” button. Hopefully this will say “successful”. Click on OK (to save your site specification information) Click on Done (to get out of New/Manage sites)

6

Save your Dreamweaver Web Site Settings

When you save site settings, you are ONLY saving the last two screenfuls of information – you are not exporting your website or anything like that. We want to save the two screenfulls of information we just entered (about the local site and the remote site) – so that we don’t have to type this in every time we use Dreamweaver.

From the Dreamweaver menu, select Site – Manage Sites. Click on the site name you previously created.

Then click on the Export button, and click on OK.

7

It’s OK to accept the default file name (e.g., sallysite.ste) and location (right in your local web root folder on your flash drive. Click on “done”.

Test your Dreamweaver Web Site Settings

Now let’s test to see if you exported your site settings OK or not. Switch computers with your neighbor.

Click on the Import Button (you want to import your site settings so that you do not have to retype those two pages full of settings).

Browse until you find the site settings file (e.g., sallysite.ste) that you saved in your local web root folder (e.g., sallyroot), then click on the Open button.

This should bring your site settings back (like this)…

OR it may ask you to find your local web root folder (e.g., if your flash drive is mapped as a different letter on this new PC).

8

Finally, click on the done button.

STOP !!!

Check under the Files tab (upper right corner of the Dreamweaver Screen) and see if it looks like below (e.g., shows “sallysite” or “your name site”). If you DO NOT see your site here (and instead you just see the desktop and the C drive, etc.) , you will NOT be able to push files up to your web server. THIS IS THE MOST COMMON PROBLEM THAT STUDENTS HAVE. IT CAUSES STUDENTS TO LOOSE WORK (because they are not be able to publish files to their web site) !!!

Videos 2 and 3 from “prior to Lab2” http://isc.temple.edu/cis1055/labs/p_lab2.html are both excellent, providing very thorough instructions saving your Site settings. If you have any trouble with the next two pages, please watch this video and then try again.

9

Use Dreamweaver to Create Your Home Page (index.html)

Open Dreamweaver (click on Start – Dreamweaver, which may be stored under “Macromedia”). Click on File – New – and leave the default Page Type (html). (Yes, you could pick other fancy

templates, but I want you to start out with plain vanilla so you understand what you are doing.)

Click on the Create button (lower right). Click on File – Save As and enter EXACTLY “index.html” for file name. Do use any capital letters

and do not use just .htm as the file extension.

10

Click on View – “Code and Design” so that your screen will look as below (the HTML code on the top half of the screen and how it will render in a browser on the bottom half).

Click in the bottom half and enter “Welcome to the web site of YOUR NAME”. (Substitute your own name…)

11

If you want to change the appearance, you can use the icons on the bottom left of the screen (e.g., bold, center, font, size). You can also change the page color by pressing on the Page Properties button (also on the bottom) and selecting a background color. If you are having trouble with this, you do not have to change the appearance right now (it’s not important).

ALSO, you are only allowed to use the formatting buttons below for THIS FIRST lab. (In future labs, we will not use this – we will use something better.)

12

Publish Your Home Page (index.html) to the Web Host (astro)

Single click on your file index.html in the right pane (under “Local Files”) so that it is highlighted in blue. Then click on the blue up arrow icon. This should upload selected file to your website on the astro server.

Once again, if you DO NOT SEE “sallysite” under the files tab, then your files will NOT go up to your web server. So, always make sure to import your site settings properly before starting ANY work.

Now, go to your browser and see your new home page: (Enter astro.temple.edu/~YOUR_TUMAIL_USERNAME in the browser’s address bar). If you did upload your new home page (index.html). you should see a message “Welcome to the web site of Your Name”.

13

Copy your Resume to your Web Root, Save as a Web Page and as PDF

Open your resume in MSWord. Click on File – Save As and save your resume as “myresume” (make sure the file type pick list says

“Word document (*.docx)” – not “Word 97-2003 document (*.doc)”. (This will make the file show up with a .docx extension when you look at it from Dreamweaver in your web root folder (e.g., E:\sallyroot).

Then to save your resume as a web page, click on File – Save As and select “web page” as file type (close to the bottom of the list of file types). Name the file myresume and make sure to select your local web root folder (e.g., E:\sallyroot). Then click on the Save button.

Then save your resume as a pdf file. Click on File, hover over the “Save As” and select PDF from the menu. Then, make sure the file is named “myresume.pdf” and that you are saving to your local web root folder and click on the Publish button. This should bring up your resume in the acrobat reader (you can close this acrobat window).

Now, back in Dreamweaver, you should see new files in the right pane (under “local files”), myresume.html and myresume.pdf (as well as myresume.docx). If not, click on the refresh button (blue circular arrow just above the words “local files” in the right pane – as circled in red below).

14

Now, we want to put two links on our index page – to point to the three versions of your resume. Enter some text which will become links: “resume (web page)”, “resume (pdf)”, and resume (word) as shown below.

Highlight “resume (web page)”, then click on the “Point to file” icon (circled in red in the bottom pane), then drag your mouse to your resume web page (resume.html) under the local files pane (also circled in red).

Do the same for your second link. Highlight “resume (pdf)”, then click on the “Point to file” icon (circled in red in the bottom pane), then drag your mouse to your resume pdf file.

MAKE SURE TO CLOSE MSWORD RIGHT HERE (or your files will not get pushed to the server).

Push ALL your files to the web host by clicking on your site folder (under local files), then click on the blue up arrow. When it asks “do you want to put the entire site?”, click on OK. If it says “file .. has been modified. Do you wish to save the file before putting?”, answer “Yes to All”.

Now test your website by entering astro.temple.edu/~YOUR_TUMAIL_USERNAME in your browser’s address bar. Hover your mouse over one of the links (e.g., “resume - web page”), see the link that will be invoked (bottom left of your browser), then click on the link. If it works, you should see your resume. Then click on your browser’s back button and check the other link.

15

Homework Submission – Please do not email me anything. Please check blackboard (assignment lab 2) for homework submission instructions.

16