Basic Web Development @ Fullerton College

Basic Web Development @ Fullerton College Introduction FC Net Accounts Obtaining Web Space Accessing your web space using MS FrontPage Accessing your web space using Macromedia Dreamweaver Accessing your web space using an FTP application District Web Policy Web Shares Campus VPN software Additional Q & A Introduction Welcome to Academic Computing Technologies (ACT) Basic Web Development training. The focus of the training is to provide general information about creating on campus web sites and Academic Computing Technologies services. FC Net Accounts Staff Accounts o To Obtain an account, you must fill out http://inside.fullcoll.edu/fcnet/accountapplication.cfm o H: drive o Available Space is 75 MB o Located on fcstaff.fullcoll.edu o Typically a file server o Scheduled backed ups o Accessible through FTP or Directory Share (H drive) o NOT YOUR WEB SPACE or WEB DRIVE o Accessible when your account is generated o Email o Available Space is 50 MB o Located on exchange.fullcoll.edu o Accessible through MS Outlook or the web @ http://exchange.fullcoll.edu o Accessible when your account is generated o W: drive o Available Space is 50 MB o Located on staffwww.fullcoll.edu o Accessible through FTP, Directory Share (W drive), or the web o Typical staff URL is http://staffwww.fullcoll.edu/[accountname], i.e. http://staffwww.fullcoll.edu/brippe o Web Space must be requested through the campus web portal.

Hourly Staff Accounts o To Obtain an account, you must fill out http://inside.fullcoll.edu/fcnet/accountapplication.cfm o H: drive o Available Space is 75 MB o Located on fcstudent.fullcoll.edu o Typically a file server o Scheduled backed ups o Accessible through FTP or Directory Share (H drive) o NOT YOUR WEB SPACE or WEB DRIVE o Accessible when your account is generated o Email o Available Space is 50 MB o Located on exchange.fullcoll.edu o Accessible through MS Outlook or the web @ http://exchange.fullcoll.edu o Accessible when your account is generated o W: drive o Available Space is 50 MB o Located on hstaffwww.fullcoll.edu o Accessible through FTP, Directory Share (W drive), or the web o Typical hourly staff URL is http://hstaffwww.fullcoll.edu/[accountname], i.e. http://hstaffwww.fullcoll.edu/brippe o Web Space must be requested through the campus web portal. Hourly staff accounts expire every 30 days, but can be renewed indefinitely by your supervisor. Department Accounts o To Obtain an account, you must fill out http://fcnet.fullcoll.edu/deptacct.htm o H: drive o Available Space is 50 MB o Located on fcstaff.fullcoll.edu o Typically a file server o Scheduled backed ups o Accessible through FTP or Directory Share (H drive) o NOT YOUR WEB SPACE or WEB DRIVE o Accessible when your account is generated o Email o Available Space is 50 MB o Located on exchange.fullcoll.edu

o Accessible through MS Outlook or the web @ http://exchange.fullcoll.edu o Accessible when your account is generated o W: drive o Available Space is 50 MB o Located on staffwww.fullcoll.edu Folder departments/[loginname] o Accessible through FTP, Directory Share (W drive), or the web o Typical department URL is http://[loginname].fullcoll.edu, i.e. http://admissions.fullcoll.edu o Accessible when your account is generated o Department web sites that have not been updated for 12 months will be deleted. Tutorial 1 - Creating Web Space on the Fullerton College Web Server To create web space on the Fullerton College web server, you must first have a Fullerton College Network account. Staff and faculty accounts can be created upon request by filling out the form at http://inside.fullcoll.edu/fcnet/accountapplication.cfm. Once the network account has been created, you will be able to log into any of the computers in the computers labs, use the email system, and disk space for your home drive and web space. To create web space, you will need to start Internet Explorer and go to the campus home page, http://www.fullcoll.edu. You should see a page similar to the page below.

Click the login link on the lower left hand corner of the page. The link will take you to the campus portal (see below) where you can use your network account information to log into the site. Staff members, login with their network account, usually your first initial and last name and your network account password (the same password used to login to email or your office computer).

(Campus Portal Home Page) Once logged into the portal you should see a screen similar to the following screen:

All student and staff members are given a default layout for the portal view. The tabs consist of smaller views known as channels. Each channel provides you with information. The Print/Web tab provides access to the print and web channels. Next, you should see a screen similar to the screen below that contains a button to request web space, Create My Web Space button. Click the Create My Web Space button. Once you have clicked the button, your web space will be queued for creation. Please note that creation does not happen instantaneously. Once the space is requested, it can take 15 30 minutes for the web space creation process to complete.

Once the button is clicked, you should see the following screen which explains that your web space has been requested and displays the url where your web site is located. In this case, the staff member s site is located at http://staffwww.fullcoll.edu/mengle. Again, you will have to wait approximately 30 minutes before you will be able to access the site. If you already have web space available, you will also see the following screen indicating that you do not need to request space.

After the process has completed, you should be able to request the site from the url provided in the channel. You can do so by clicking the link for your site or typing it in the browser s address text field. By doing so, you should see a temporary page that looks as follows:

Now you can use FrontPage or Dreamweaver to add, delete, and update files in your web site. For more information on accessing your site through FrontPage, please see http://webhelp.fullcoll.edu, the section on Accessing my web site with FrontPage.

Tutorial 2 - Accessing your web space using MS FrontPage Once your web space has been created, you can access the space by different methods, FTP, Directory Share, or HTTP. In this tutorial will use MS FrontPage which uses HTTP to transfer files to the server. To begin you need to start MS FrontPage by clicking Start, then scrolling over Programs, Microsoft Office, then clicking on Microsoft Office FrontPage 2003. Once the application starts up, you can connect to your web space by clicking File, Open Site. Notice, there is an Open and an Open Site. You want to modify the site, so Open Site is the appropriate action. By doing so, you can modify the entire site and not just one page.

Next you should receive a dialog box prompting for the site you would like to open. For staff, a typical staff URL is http://staffwww.fullcoll.edu/[accountname], i.e. http://staffwww.fullcoll.edu/brippe. For hourly staff a typical hourly staff URL is http://hstaffwww.fullcoll.edu/[accountname], i.e. http://hstaffwww.fullcoll.edu/brippe. For department accounts a typical department URL is http://[loginname].fullcoll.edu, i.e. http://admissions.fullcoll.edu. Next, type the appropriate url for the site you want to connected to and click Open. FrontPage will prompt you again, this time it prompts for your authentication credentials. This is your Fullerton College network username and password (If you are connecting to a department account, you need to use the department account to connect to the site). Since I m connecting to http://staffwww.fullcoll.edu/brippe, I use my username, brippe and my network password. Some versions of MS FrontPage have an additional field for

Domain and others do not. In either case, the Domain is fc. MS FrontPage 2003 does not prompt for this information, thus, you need to add it to the beginning of your username. So the username brippe should be entered as fc\brippe. However, if you are using a version of MS FrontPage that does prompt for Domain, you need to enter just your username and NOT fc\username. Once logged into the site, FrontPage will give you a list of the folders and files in your web space. You should notice the index.htm file in your space. This is the current home page. By default, the web server serves either an index.htm or default.htm page when a page is not requested. So, requests to http://staffwww.fullcoll.edu/brippe will receive the index.htm file in my web space. If you double click the index.htm file, FrontPage will open the file in what s known as Page View. Page View allows you to view the page and modify it similarly to MS Word.

Modifying Text using FrontPage Open the index.htm file by double clicking on the file. You should see the following view in FrontPage: From the Page View you can modify any text by selecting the text and typing your new text. Highlight the text that reads This is a temporary page! by moving the cursor next to the T in This. Next press the left mouse button, while holding down the button, drag the mouse across the text and release it when all the text is highlighted. Now type Your Name s Home Page (Brad s Home Page). You can save the page by clicking on the save icon in the toolbar, or by pressing Ctrl+S. Once the document is saved its changes are accessible via a browser. Start Internet Explorer and in the address bar type your web site s url, (http://staffwww.fullcoll.edu/username) and you should see your changes. In addition to changing text you can also modify its appearance. You ll notice that there is a toolbar that contains fonts, sizes and styles similar to MS Word. You can modify the appearance by using this toolbar and saving the document. Adding links To add links to a web page, you need to highlight the text that you want for the title of the link, then clicking the insert hyperlink from the toolbar and typing in the url of

the site you want to link to or by selecting a file in your web space that you want to link to. Let s create a link for the FC Web Help site. In the index.htm file, highlight the text http://webhelp.fullcoll.edu and click the Hyperlink icon in the toolbar. Once you click the Hyperlink icon, a Hyperlink dialog box will be displayed. Type url for Web Help (http://webhelp.fullcoll.edu) if it doesn t already appear. Then click OK. You ll notice in the dialog box that you can type the fully qualified url (http://webhelp.fullcoll.edu) to link to an external site or you can select files from your web site to create internal links. Since the web site currently contains one file (index.htm) there aren t any additional files to create links.

To preview your new link, you ll notice in the lower left-hand corner of the right-hand pane tabs in FrontPage. which change how the page is displayed Design View displays the page in a manner that makes it easy to modify the page by showing tables, images and text. Split view displays the page in a combination of two views, design and code. Half the view will be the design view and the other half will be the HTML code view. Code view displays the page as its html code. Preview View displays the page as it would appear in the browser. Next click the Preview tab. You ll notice that the borders of the tables have disappeared. Now move your mouse over the text http://webhelp.fullcoll.edu. You ll notice that the cursor changes into a hand, denoting that the text is now a link. Again to make your changes accessible to users of your site you need to save the file. FrontPage Folders All web sites on the FC web server use FrontPage extensions for web creation even if you never use FrontPage the extensions are enabled. From FrontPage s Folder List you ll notice a directory called _private. This directory is used by FrontPage for hiding files you don t want users to see. FrontPage creates other directories that begin with the _ underscore which is used for FrontPage functionality. DO NOT DELETE these directories. If you do delete them, there is a possibility that FrontPage will not function properly, deny you access to the site, or simply won t save files. Adding files to your web FrontPage provides the facility to add additional files to your web space by importing them into the space. You can import files by clicking on the File menu, then Import.

Note: if the you do not see the sub-menu item Import, move your mouse over the double arrows at the bottom of the menu. This will expand the menu completely. Next the Import dialog is displayed. From this dialog click the From Site button. Now a file dialog appears and you can navigate to any file that you want to add to your site. Typical files are html, Word documents, pdf, and image files. You can add files from your local computer or external sites. Once you click the From Site button the following dialog should appear:

In the text field titled Web Site Location type http://webhelp.fullcoll.edu/templates/courseweb/images/book.jpg, then click Next. In the next dialog make sure that Add to current Web site is check and click Next. In the last dialog make sure that none of the options are checked and click Next. This screen limits the files that will be downloaded. If you were importing an html file that had links, FrontPage would try to import all those files too. This screen limits the amount of files that are imported. Since you are importing an image file book.jpg, you don t have to worry about this feature. Finally, click the Finish button. When FrontPage finishes the import, you should see the file in your folder list.

The book.jpg file is located in the root directory because that was the directory selected in the folder list when you chose to import the file. If you select another folder before importing the file, the file will appear in the selected folder. Moving Files To move a file you can simply select the file and drag it to the new location. In the last example you imported a file called book.jpg into your root directory. Drag and drop the file and into the images directory. Typically, web sites use an image directory to store images and keep the site uncluttered. When you re done the site should look as follows from the folder list. Notice that the book.jpg file is now located in the images directory. Inserting images To insert images into an html file, open your index.htm (if its not already open, then make sure you re in Design view). Place your cursor after the e in Fullerton College in the last paragraph, then press Enter. From the toolbar click the insert image icon. Next, the Picture dialog will be displayed, double click the images directory, then click the book.jpg file, then the Insert button.

In the Page View, you should see the book image in your html document. To save the changes, press the Save icon in the toolbar or Ctrl+S. Creating an Instructor s Web Site Now that you ve modified html documents, inserted images, and added documents to your web space, you re ready to create your own instructor s web site. You ll use a preconstructed group of templates from the http://webhelp.fullcoll.edu site for an instructor s web site. These templates have a similar look and feel to the Fullerton College campus web site. Before you begin, let s rename your current index.htm file to index_old.htm. You can rename files by right clicking on the file and from the popup menu clicking Rename.

The file should be highlighted, then type index_old.htm. FrontPage will prompt to make sure that you want to rename your home page. Click Yes. Now you can begin the importing process of the instructor templates. To get the files, you need to import them from the Web Help site. You can do so by clicking File, Import as you did above. Next, type http://webhelp.fullcoll.edu/templates/courseweb in the Web Site Location, and then click Next.

In the next screen, make sure that the Add to current Web site is checked and click Next.

In the next screen, check the box next to Import the home page plus linked pages, then type a 2 in the levels deep and click Next. In the final screen, click the Finish button.

You should receive a notification that FrontPage is about to overwrite your existing book.jpg file. You can click No to replacing this file. At this point, you should have a complete web site loaded into your space. You will have to modify content, add any links, images, and/or documents that help your site achieve its goals. Content can be copied and pasted from Microsoft Word documents or other documents to suit your needs. Your site should now look similar to the following screenshot.

The directories are as follows: _private images css assignments lectures hides any files you don t want users to view contains image files. contains the site s style, css (cascading style sheet). contains a location for assignments. Currently one file, index.htm - contains a location for lectures. Currently one file, index.htm Creating a New Page Using the Import technique described above, import the file http://webhelp.fullcoll.edu/templates/courseweb/template.htm. This time DO NOT check any options to import links. Only import the page.

When you finish the process, you should be prompted to overwrite some of the image files that are already located in your site. You may click No for replacing all images. Now you should have a template.htm. This is a blank html file with the look and feel of the rest of the web site. You can keep this file for creating new html files. To create new file, right-click the template.htm file and click Copy.

Now below the template.htm file right click again and click Paste from the popup menu. FrontPage will make a copy of the file and name it template_copy(1).htm. You can rename this file by right clicking on it and clicking rename from the popup menu. Try to rename the file to grades.htm. Your folder list should look as follows: To create a link to grades.htm, open your index.htm file by double clicking on the file. Highlight the assignments link and the horizontal break below it. This can be done

by clicking your left mouse button before the a in assignments and dragging the cursor to the end of the horizontal break. If done correctly, your document should look as follows: Now move your mouse over the link assignments and right-click, then click Copy from the popup menu. Press the right arrow key on the keyboard ->. Your cursor should have moved to the end of the horizontal break. Now press Ctrl+V (Ctrl+V is a shortcut for Paste). FrontPage should have pasted a new assignments link in your index.htm file. Highlight the new assignments link (this can be done by double clicking the link) and right-click over the link. This time click Hyperlink Properties from the popup menu.

FrontPage will display an Edit Hyperlink dialog. Now select grades.htm file in the dialog, change the text in the Text to display field to read grades, and click OK. Your index.htm you now have a new link to the grades.htm file that you just created.

This new link can now be copied and placed into the other htm files if need be. To save the document, press Ctrl+S. Once the file is saved, users will be able to view your changes. Modifying a Page s Title Every html file has a title. The title is displayed in the user s browser in the upper lefthand corner of the browser when the file is viewed and is descriptive of the content. Furthermore, search engines use this as the displayed text in a search query of pages. To modify a page s title, from Page View right-click on the file and select Page Properties. A properties dialog should be displayed with the Title field highlighted. You can change this text to the appropriate text of the page and click OK. Now you need to save your document in order for the changes to appear.

In this tutorial, you ve modified html documents, imported files from an external web site, created links, inserted images, modified text, and created new web pages. The hope is that this tutorial gives you enough examples on modifying html documents that can

continue exploring and creating new web documents for the Fullerton College community. For additional information on web development @ FC, please see http://webhelp.fullcoll.edu. Tutorial 3 - Accessing your web space using Macromedia Dreamweaver This tutorial the focus will be on connecting to an FC site with Macromedia Dreamweaver. Since some of the techniques are similar to MS FrontPage, they are left for you to explore and discover on your own. To begin you need to start Dreamweaver by clicking Start, then go to Programs, Macromedia, then click on Macromedia Dreamweaver MX 2004.

When Dreamweaver starts you need to create a new site definition for your staff or department account. Click the Manage Site link from the left-hand panel of Dreamweaver. If you do not have this view you can access the manage site feature from the top menu under Site. Next, Dreamweaver displays the Manage Sites dialog, this is where all your site definitions are located, click the New button and select Site. Dreamweaver displays the site definition dialog for your local site information. Note, the Advanced tab is selected; this provides a little more flexibility when defining the site. Now you need to fill in the following:

Site name: Staff Web Local root folder: (use the default) this is the location on your local computer where the files will be stored. Unlike Microsoft FrontPage, Dreamweaver works with ftp and not http. This means that Dreamweaver must store local copies of your files that can be modified on your computer and then sent to the server. Refresh local file list automatically: Checked HTTP address: http://staffwww.fullcoll.edu/[yourusername] Cache: Enable cache checked Once you have filled out the local information click Remote Info from the category panel on the left. From the Access menu, select FTP. Then fill in the appropriate information for your FTP connection:

Access: FTP FTP host: staffwww.fullcoll.edu (for staff and departments) / hstaffwww.fullcoll.edu (for hourly staff) Host directory: (blank for staff) / departments/[yourdepartmentaccount] (for depts) Login: fc\[accountusername] Password: (the account password) Use passive FTP: Checked Once the dialog has been filled out, click OK. You will go back to the Manage Sites dialog, click Done. Dreamweaver will save the settings and set the new site as the active setting. To connect to the server click the connect icon remote files appear in the left-hand panel.. You should see the

Dreamweaver has two views that you should be concerned with, Remote View and Local View. If you toggle between the two views you will see your remote files (the files you created with the FrontPage tutorial) and the local files which should be empty. To bring all of your remote files to your local machine, select the root directory. In the screenshot this is the 00005520 directory, your root directory should be a directory with your first initial and last name. Then click on the green down arrow to Get the files. Dreamweaver will ask if you if you re sure, click OK.

Now from the Files panel, select Local View from the View menu. You should see a local copy of all your files. Double click on your index.htm file. Dreamweaver will load the index.htm file into its Page View so you can modify the document. Next, modify any text on the document and press Ctrl+S to save the file. Now you have a modified version of the file on your local computer. However, you need to send this file to the web server. Make sure your index.htm file is selected in Files panel and click the blue up arrow to put the file on the web server. Putting files on the server will overwrite the current index.htm replacing it with the index.htm with your most recent changes.

This is how you get files on and off the server using Macromedia s Dreamweaver. Adding links, images and new pages are similar to the MS FrontPage, so there are left for the remainder of the session. Tutorial 4 - Accessing your web space using an FTP application To FTP into your staff web account: 1. Make sure you have an active network account, i.e. you can login to a lab computer. 2. Make sure you have a web directory. See instructions on creating a web directory. 3. Download or if already installed, use an FTP (File Transmission Protocol) program to transfer your files on the the FC server. Start the program, you will see the following screen (example uses WS-FTP LE): Click New and fill the text fields with the appropriate information.

Host Name/Address: staffwww.fullcoll.edu User ID: use your FC account prepended with "fc\" For example - fc\brippe ** IT IS EXTREMELY IMPORTANT TO USE A BACKSPACE "\" AND NOT A FORWARD SLASH "/" AFTER "FC" Password: use your fc account password. 4. Once your username and password are verified, you will be able to transfer files from your local computer to the FC server by selecting the file(s) you want to send to the server and clicking on the arrow to the right, "->". The FTP program will verify that the transfer was successful or not.

5. To view your pages, open a web browser, Internet Explorer or Netscape Navigator, and type the url in the address text field. ** Note, you will need an active account before you can save files on the server.

FTP programs can be found at: http://www.download.com/, search on FTP or WS_FTP can be found at: http://download.cnet.com/downloads/0-10064-100-914912.html?tag=st.dl.10001_103_1.lst.titledetail District Web Policy BP 3740 Web Sites - http://www.nocccd.cc.ca.us/policies/pdfs/3740.bp.final_032904.pdf AP 3740 Web Sites http://www.nocccd.cc.ca.us/policies/pdfs/3740.ap.final_032904.pdf 3.0 All official home pages must include: 3.1 The name and logo of the appropriate college, or the School of Continuing Education. 3.2 The North Orange County Community College District name or the abbreviation of the name with a link to the District home page. The District logo may be incorporated if desired, but is not required. 3.3 Disclaimer statement or link to a disclaimer statement. 3.4 Notification when a link is a non-supported District, college or School of Continuing Education link. 4.0 All official web pages and personal pages (faculty, staff and student) must include: 4.1 The name of the appropriate department or division and the name and logo of the appropriate college, or the School of Continuing Education. 4.2 The author of the page, with contact information, such as a mail to html tag. 4.3 The most current modification date. 4.4 Disclaimer statement or link to a disclaimer statement. 4.5 All web pages must have links to the appropriate Home Page (CC, FC, SCE, or District).

4.6 Notification when a link is a non-supported District, college or School of Continuing Education link. Web Shares In addition to FTP and HTTP access to your web site, ACT provides directory shares to all web drives. When using an on campus computer you can locate your web drive from My Computer where it will be listed as your W drive. You can drag and drop files and create directories as you would on any other network drive. If you do not have a web drive, following instructions will demonstrate how to map to your web space from a campus computer. From your desktop, right-click My Computer and click on Map Network Drive from the popup window. Next you will get a Map Network Drive dialog. Fill in the appropriate information to map to your web share. Drive: Select an available drive letter (usually W) Folder: type \\caesar2\[youraccountname]$ (my web share is located @ \\caesar2\brippe$) All web shares are located on the caesar2 web server Reconnect at logon: checked if you are using your office computer otherwise unchecked Click Finish.

Next you ll receive a window with all your web data. You ll notice the directories that start with _ an underscore. These directories are used by MS FrontPage, so DO NOT delete these directories.

**Note: if you are using FrontPage technologies, surveys, themes, etc. it is best to modify your web site from within FrontPage. Using your web share to modify documents and directories can corrupt or destroy some of the files that FrontPage uses to manage your site. Campus VPN software The campus provides VPN (Virtual Private Network) to all staff members from home. What does this mean? This means you can access your web share, your home drive and email from off campus. In order to do so, you need to download the VPN software from the campus portal. This software will allow you to log into the FC network and thus providing access to the mentioned services. 1. To download the VPN software, open your browser (Internet Explorer/Netscape/Other) and go to the campus web site (type http://www.fullcoll.edu in the address bar and press enter). 2. From the home page, click on the login link in the lower left-hand menu.

3. This will send you to the campus portal, My FC. You need to log into the portal with your FCNet username, password, and click the Login button. 4. Once logged into the portal you will see a list of tabs at the top of the page. Click the very last tab named view all available tabs). (You may need to scroll the page to your right to 5. You will see a security notice from Thawte Consulting asking for permission to run the installation applet. Click Yes.

6. Scroll down the page till you see a list of the Available Installers. Right click the link titled Download (16.5M) and click on Save Target As

7. From the Dialog box select your desktop and click the save button. The application will download and appear on your computer s desktop. Once the download has completed you may continue with the following instructions. 8. Double click the install.exe icon to start the installation process.

9. This window will pop up. 10. Click Next on the Introduction screen to continue.

11. Keep the Default Folder (recommended) or choose another location and click Next.

12. Keep the default or choose where to place the VPN Icons. Click Next to continue.

13. View the Pre-Installation Summary. Click Install to start the actual installation. 14. This screen will appear while installation is in progress.

15. Click Done. IMPORTANT: Reboot your computer before attempting to connect to the Fullerton College Network.

Connection Procedure 1. Locate the VPN Client icon, and double click. 2. Highlight Staff VPN Connection, and either double click on it, or single click on the Connect icon.

3. Enter your FCNet User Name and password. Click on OK.

4. Click Continue. The VPN Client Banner window will minimize. 5. The minimized icon will be located in the System Tray

Termination Procedure 1. Double click the minimized icon in the System Tray 2. Double click the Disconnect icon in VPN Client Version 4.0.3 (C) to terminate the Staff VPN Connection.

Additional Q & A Feel free to email brippe@fullcoll.edu Brad Rippe Additional Resources can be found @ http://webhelp.fullcoll.edu http://fcnet.fullcoll.edu