Overview
In this assignment, you will create your public web page. This homepage will be your opportunity to share something about yourself, your interests and your creative work with others in the Towson University community and throughout the web. This activity requires a TU user account.
This assignment uses MS Expression Web as a Web Page creation tool. MS Expression Web is a WYSIWYG (what you see is what you get) HTML generator and can display your page exactly the way it will later be seen on the World Wide Web. MS Expression Web must be used on a Windows-based PC.
To be able to publish material on the World Wide Web, we need space on a web server. At Towson University, space for your public web page is provided on the Towson University "tigerweb" server. MS Expression Web allows working directly in your account on the tigerweb server. To use this feature in MS Expression Web you must be securely logged in to the campus network with your TU user account.
For this and all subsequent web assignments, the public web page you submit is required to reside on tigerweb. Web Pages residing on other web servers will not be accepted.
You can download a trial version of MS Expression Web for use on your home computer. Download trial version here: http://www.microsoft.com/en-us/download/details.aspx?id=36179
Required Materials
·
digital photo showing you (and possibly
friends and/or family).
· one Flash animation file in .swf file format
·
MS
Expression Web software running on a Windows-based PC
References:
Procedure
If you have never worked on tigerweb, the website has to be activated first. Connect to https://tigerweb.towson.edu , click Open, log in with your username and password, and select Activate Website! The website is now ready for use (that was easy :).
1. Open your web on tigerweb. Open Start/Programs/MS Expression Web. In the main menu (on the top of the page) select Site/Open Site. In the field Location at the top of the dialog box type in the location of your web space on tigerweb: sftp://tigerweb.towson.edu and select Open. If prompted, select "Edit Live Site Now." After a little while you should see a logon box asking you to enter your username and password. Type in your TU username and password.
MS Expression Web now displays the contents of your web folder on the tigerweb server. MS Expression Web opens a blank page and allows you to compose a web page.
2. Copy additional files you plan to use into our web folder. In our case this will be our digital picture and one of our Flash Animations. Minimize the screen for MS Expression Web (click on the underscore in the upper right corner).
- Copy your digital image into your web folder. Locate your digital image, right-click on your picture file and select Copy. Switch to MS Expression Web (click the MS Expression Web application button on the task bar). In your folder list to the left of the screen, scroll up to the very first line. It should have the picture of a folder and say something like sftp://tigerweb/towson.edu/jstude1 . Right-click on this line. Select Paste. You should now see your image file listed in the folder list. If you can't see your file listed in the Folder list, press the F5 button to refresh the display.
- Copy your Flash animation into your web folder. Locate your Flash animation .swf file, right-click on the animation that you would like to show on your web page and select Copy. Switch to MS Expression Web (click the MS Expression Web application button on the task bar). In your folder list to the left of the screen, scroll up to the very first line. It should have the picture of a folder and say something like sftp://tigerweb/towson.edu/jstude1 . Right-click on this line. Select Paste. You should now see your flash file listed in the folder list. If you can't see your file listed in the Folder list, press the F5 button to refresh the display.
3. Start developing your page. Please read the following carefully. To make your page the home page (the default page users will see when they first visit your site) on the tigerweb server, the page must be named index.html. When you had your account enabled, this page (index.html) was created by Towson's Computing and Networking Services. It just contains one line of text.
4. Change the content of your index.html home page. We want the page to contain personal information and post some examples of our class work. To open the page, double-click on the file name index.html. The file opens and you see the content of your home page as it was produced by Computing and Networking Services.
5. If you already have a home page on tigerweb: Create a new page using File / New Page and save this page as cosc.html.
6. First we change the background. Lets give the page a colored background.
To add a colored background of your own choice: Click on the drop-down box next to Background in the Colors section. Select the last option, More Colors. You now see a color wheel. Choose any color of your choice for your page's background. Make sure to choose a color that does not take the reader's attention away from the text.
7. Type a header for your page. Type something like "Home Page of Joe Student" or "Welcome to Joe Student's Home Page" (without the quotes and substituting your own name).
8. Change the font of your header. Using the mouse, highlight your heading, format the heading to be bold and a large font.
9. Center your heading. With your heading still highlighted, in the formatting toolbar, look for the alignment icons and select the "Center" icon which corresponds to the <CENTER>< /CENTER> HTML code. Unselect any highlighted text.
10. Select a font and color for the rest of your page. Choose a font and font color of your choice. You find the font color to the right of the formatting tool bar (it's the underlined A). Remember that the visitor of your page depends on the fonts that are installed on the visitor's PC. It is best to choose a common font, this increases the probability that the font will be displayed as intended. An unusual font that is not present on the visitor's PC will most likely be replaced by a different font.
11. Introduce yourself. Click below the Heading. Use "Left" justified for your text alignment, and type a short paragraph introducing yourself.
12. Insert your digital image. Use the file containing your cropped digital photograph (from the digital photography assignment) or any other digital image of your choice. Choose Insert / Picture / From File. Your digital image file appears in the file list. Click on the file. Make sure that this URL box contains ONLY the filename of your image. DELETE all other characters (like file:///a:/. You should see only the filename, for example: mypict1.jpg. Click O.K. You are now prompted to enter content for the alternate text and long description attributes for the image. These attributes are necessary for certain browsers (e.g. screen readers for the visually impaired). Enter a short description of your image in the field for alternate text and a longer description in the field for long description., then click O.K. You can now adjust the size of your image. To adjust the size of your image, click anywhere on the image and drag the handles that appear until your image has the desired size. Center the image.
13. It is important to understand that inserting your image inserts a placeholder into your home page and not your actual image. Whenever your home page is displayed, your image is inserted at the particular area where you inserted the place holder. This is why your actual image file has to be present in the web folder.
14. Let's check the "work behind the scenes". While we are using MS Expression Web as a WYSIWYG tool, MS Expression Web composes our document using HTML code. You can check this HTML code by selecting the SPLIT tab to the lower right of your editing screen. When clicking this tab, the screen will split into two parts, showing the actual HTML code generated by MS Expression Web as well as the final product as it will appear on the web. To get back to regular editing mode, click on the Design tab.
15. Create a table containing information about yourself. Use the "Table" tool to insert a table. In the menu bar, select Table/Insert Table. Insert a table with 3 rows and 2 columns. Press enter 2 times to start a new paragraph. Click on the table tool and select "3 by 2 table".
Edit the table until it looks like this:
| Email:: | jstude1@towson.edu |
| Year: | Sophomore |
| Major: | Biology |
Notice that the above email address is underlined. Once the page is published and a user clicks on the email address, the browser will automatically bring up the configured email program and the user can send an email to this address. To ensure that MS Front Page recognizes an email address and links it properly, just add a space character (press the spacebar once) after typing the last character of your email address.
16. Adjust the width of your table. Right-click anywhere inside the table and select Table Properties. Unclick the "Specify width" box. The values should be grayed out. This will adjust the width of your table to the contents of the cells. To format the table with borders and headings, you can click anywhere in your table and then select Table / Modify / TableAutoformat , select a format of your choice to apply to your table.
17. Save our page. Use File / Save As to save the document again as index.html. A dialog box informs you that the file already exists. Click OK to replace the already existing file with the new, updated version.
18. Create a navigation structure (how to do this is described in the following steps, steps 19 and 20). This navigation structure should be located on the top or bottom of your page. A navigation structure gives users easy access to linked pages or other linked material you want to be accessible from your home page.
19. Create a link to the Flash Animation we downloaded in the first step. This will be your first link of several links (to come in later assignments). Type a description for the link. Enter the description below the table. This description should be something meaningful for the visitor who is looking at your page. Do NOT use the File Name for your description. Complete the description by typing the vertical bar character. The vertical bar character will separate this link from others to be added at a later point. An example description could look like the following:
Flash Greeting Card
| My Favorite Recipe
(to come later) | My Final Term Project (to come later)
20. Link the description to the actual file that visitors will see when they click on the link. Use the mouse to highlight the description. Click on the Link tool (the globe with a chain link) in the standard formatting toolbox. If you can't see the icon showing a globe with a chain link, you may have to extend your toolbar by clicking on the arrows pointing to the right). Your files appear in the file list. Click on the appropriate file. Make sure that in this URL box contains ONLY the filename is entered. DELETE any other characters. You should see only the filename, for example greeting.swf. Your description should now show in blue color and be underlined. This indicates that your description now is a hyperlink.
21. It is important to understand that inserting a hyperlink inserts a placeholder into your home page and not your actual Flash animation. Whenever a visitor clicks on the hyperlink for your animation, your animation will play. This is why your actual Flash file has to be present in the folder list. (This is why we copied the two files in the beginning of this exercise :)
22. Save your web pages again using File / Save.
23. Check your page on the World Wide Web.
You are now published on the World Wide
Web. You can look at your page using any computer with an Internet
connection. To look at your web page, open Internet Explorer and type:
https://tigerweb.towson.edu/jstude1 (replace jstude1 with your TU user
name) in the address box of the browser. Check your page.
24. File Permissions.
To ensure all pages and files have the
proper permissions and will show correctly, please use the following
procedure: Please note that sometimes permissions need to be refreshed.
You can reset these permissions at any time without harming the content
that is already published. Simply go to the address
https://tigerweb.towson.edu/ ,
log in with your TU username password, and click the button Reset
Permissions, and make sure to refresh your page in the browser.
Grading Criteria
Home Page must contain
Submitting your URL for grading:
Send an e-mail to webster@towson.edu with the Subject Heading “COSC 109: Submitting Lab Assignment #10”
The body of your e-mail should simply contain the URL of the webpage you just created
(example: https://tigerweb.towson.edu/jstude1 <replace jstude1 with your TU user name>