student website setup - austin community college district · aptana, winscp, coreftp, filezilla)....

Student Website Setup

Figure 1

IMPORTANT – To receive credit, your sites MUST function as specified in this document

In this course, students upload assignments to their websites hosted on the austincode.com server in addition to submitting to Blackboard (Bb). Each student is supplied with a password protected account to access their individual websites. Sample account credentials are supplied in Figure 1. Access your “Website Credentials” in Bb via “My Grades & Due Dates” | “Website Credentials” | and simply click the graphic. The user name is in yellow and the password is in red letters in the blue box.

The user name and password are used to access your site in two ways. First, files and directories are uploaded and maintained on the site via an FTP client (e.g. Aptana, WinSCP, CoreFTP, FileZilla). Second, sites are viewed/tested via a browser. Again, username and password credentials are required for both uploading and viewing.

The ‘FTP Host name’ line is used to access your site to upload files and directories. Instructions for using Aptana to upload to your site are provided later in the tutorial.

In the box below, the ‘HTTP URL’ line is placed in the URL box of a browser to view/test your site.

Figure 1

The steps to setup your student website are listed below. There are a number of ways to accomplish site setup. When working through this course, you should develop considerable experience with website setup and publishing. As with any set of progressive computer directions, it is imperative that the instructions be implemented correctly are depicted. Take your time, the steps can be performed in ~20 minutes. If you really want to reinforce your understanding of the concepts (which you should if you are considering becoming a professional web developer),

of 22


delete your work locally and remotely after completing the steps. Then, complete the steps again and repeat 3-5 times. After performing the steps multiple times, you should be comfortable with the essential processes contained herein.

All of the assignments in this course must be uploaded to Bb and published to your student website. See the syllabus and Bb for more assignment details and requirements.

The steps below describe using Expression Web (EW) to publish your websites. After working through the steps you may find it helpful to use a tool like WinSCP (Windows) or FileZilla (Multi-platform) to publish your sites. Those tools may be little easier to use than EW (which would still be used for coding your HTML and CSS pages).

1. Open Windows Explorer and navigate to your C:\ directory.

2. Right-click in Explorer and select New | Folder.

of 22


3. Name the folder “yourlastname_mysites”

4. Double-click to open yourlastname_mysites and create the 3 folders listed below contained within the yourlastname_mysites folder.

of 22


5. Now that we have the site structure built we are ready to create 4 sites in Expression Web. The 4 sites will be:

a. yourlastname_mywebsites b. connectup c. finalproject d. tradewinds

6. Open Expression Web (EW) and select Site | New Site.

of 22


7. The New site window opens. Click Browse and select the C:\yourlastname_mysites folder as make the settings as shown.

of 22


8. After selecting OK your Folder List and Site View should be like the next figure: The folders are just folders at this point. Our next step will be to transform them into sites.

9. Repeat the new site creation steps 3 more times for the connectup, finalproject and tradewinds sites.

of 22


of 22

10. After creating the remaining 3 sites, close EW and reopen it. The folders should now appear as individual sites (folder with the world icon).

11. In Blackboard (Bb), navigate to Resources, click on default-top-level.html to download/save it. Rename it to default.html and save it to your top-level site which is C:\yourlastname_mysites.

12. IMPORTANT – To receive credit, your sites MUST function as specified in this document: The default.html output is depicted below. Your “top-level” page (default.html) must appear like the example below (with your name of course). When the ConnectUP and TradeWinds links are selected, the appropriate ConnectUP and TraeWinds default.html page should be displayed which lists the links for Unit B – Unit P (no need to upload Unit A to your site – just submit a screen capture of Unit A to Bb).


13. Open Expression Web | Site | Open Site and select yourname_mysites to open. Double-click on default.html to open it and make the changes highlighted. Save your changes.

14. Close EW. Restart EW and open the Tradewinds site. Download a copy of default_tradewinds.html from Bb Resources (see below) to the tradewinds folder.

of 22


15. The output of default_tradewinds.html is depicted below.

16. Open default_tradewinds.html in EW to see the following. Add <a> elements for the missing units (B-O).

of 22


17. After modifications, your output of default_tradewinds.html should look like that below with the units in for the elipses (…). Change the name of the file to default.html. The default.html file sent from the web server if the user only supplies a site or directory name in the URL. For instance, when you navigate to www.facebook.com, the default.html (a.k.a index.html) page is sent from the facebook server to the browser. The same occurs if you navigate to www.facebook.com/summerfun. If there is a “summerfun” folder, AND if it has a default.hmtl in the folder, THAT is the page that will be returned from the web server to the browser. If this point is not yet clear, continue to work through this document and practice with your site until you comprehend concept. Now, you need to create the folders required for your sites and place copies of this new default.html in each of the folders (unit_a – unit_p) for both TradeWinds and ConnectUp. TradeWinds is only practice and is not required for assignments. ConnectUp and the Final Project are required.

18. Select the Site View tab, right-click in the area below, and select New | Folder. Name the folder unit_a.

of 22

http://www.facebook.com/

http://www.facebook.com/summerfun


19. Right-click on default.html | Copy then paste it in the unit_a folder. Open that default.html and modify it so it can be recognized as being in Tradewinds, unit_a. The unit_a folder is only for testing. There is no need to create the remaining folders (unit_b – unit_p) since those directories will be inserted when each of the unit_b through unit_p sites are published. That is, each unit_b-p directory will be a site (more on this below).

of 22


20. As you progress through the ConnectUp assignments (Independent Challenge #1 in each of the units) you will create a site for each unit and with the appropriate name. For instance, for the ConnectUp assignment in Unit B, create a new site and the site path would look like the following in EW: I recommend unchecking the “Add to Managed List” below to keep your “Managed Sites” list smaller. If you prefer to have all sites listed, check this box.

of 22


21. After performing the step above, open the connectup site and you will notice the unit_b site has been added.

22. IMPORTANT: Your ConnectUp site default.html page must look like that below (without Unit A). In EW, select Site | Open Site | connectup. Open default.html and modify it to look like the output below. Each of the units will be a self-contained site that you publish as you work through the EW textbook. The TradeWinds site is for local practice and publishing to your remote website is not required.

of 22


23. We are now ready to publish the sites. Publishing means uploading files and folders to a web server so the website can be accessed via the WWW. Publication can be performed with a dedicated program like WinSCP or FileZilla. In this guide, we will use Expression Web to upload our sites.

24. Open EW and open the site yourlastname_mysites. You should see the same view as that below.

25. Select Site | Publishing | or Publishing at the bottom of the window.

OR

26. Then select “Add a publishing destination…” from the middle of the page.

of 22


of 22

27. Recall Figure 1 from page 1.

28. Make the following settings in the “Connection Settings” dialog box. Be sure

to leave the password blank on public computers. Note: Naturally, your username will vary from that in the screen shots that follow. For the following screen shots, use your personalized username and password combination shown in your website credentials in Bb.


of 22

29. The “Connect to ftp.austincode.com” dialog box appears. Enter your password here and deselect the “Remember my password” checkbox on public computers. Select OK.

30. Notice the “do not enter” signs beside the site folders. By default, each site is intended to have its own publication connection. However, for our purposes, we want to publish via our ‘master site’ (yourlastname_mysites). Change the setting in the next step to “Include subsites”. You may elect later to publish to individual sites. If so, setup dedicated connections from local to remote sites.


of 22

31. Select Site | Publishing Settings… to see the Site Settings dialog box below. Check the box “Include subsites”. Select OK.

32. The “do not enter” signs disappear and we are ready to upload the 3 folders and 1 file to our student website.


33. Shift-select all 4 items on the left (local computer) and click the “upload” arrow. Be very careful to only “upload” content and never download from a “Production” site. That way, you will never make the common mistake of overwriting local content with site content. (By the way, the favicon.ico file is not required.)

Do not modify or remove system files like .htaccess or .ftpquota.


34. Congratulations! All of your sites are published. See the “remote” directory view below. It shows the student website content. However, not done yet. We must the sites via a browser to ensure proper operations. Always test your work after uploading to “Production” servers.


of 22


35. Open a browser and navigate to your site:

36. Enter your user name and password. If the option appears to remember your password deselect “Remember my credentials” on public computers. If you select that option on a public computer, other users will be able to access your site. On your own machines however, this option can be used to make accessing your site more efficient. You should also save a bookmark in your browser to your home site (yournamehere_mysites) so you can easily access your work for testing after publication.

When navigating to your site, if you see a directory listing like the example, there is an error with your configuration. To receive credit, review the setup steps to correct the issue. No credit is awarded for directory listings like that shown in the next figure.

of 22


37. your site (including links). Now you are ready to begin.

38. Side Note: Publishing from the master site like described above is one approach. After working with EW, you may elect to create “Publishing Settings” that point directly to your ConnectUp and Final Project sites. To accomplish that, create new Connection Settings and ensure the directories point to the correct location. For instance, to point and publish directly to ConnectUp, in the “Connection Settings” dialog box, change to Directory: public_html/connectup. You will now be pointing to your published ConnectUp site. Also, the only way to become more proficient with website publication and management is to practice, practice, practice.

of 22


Big picture: Your top-level site must appear as shown.

When the “ConnectUp” link is selected the page below must be displayed.

An individual site must be shown when each of the “Unit” links is selected. (Unit A is not included on your site. It is just a screen capture uploaded to Blackboard.)

IMPORTANT – To receive credit, your sites MUST function as specified in this document

of 22


Optional but vigorously recommended… Delete all work and start again. Repeat the steps until you can perform them from memory or at least very comfortably. That may seem like a formidable challenge but you will likely pleasantly surprise yourself.

of 22

student website setup - austin community college district · aptana, winscp, coreftp, filezilla)....

Documents