Web Services
Creating New Web Pages
Creating a New Page
Creating a new page is a relatively simple process that involves a few steps. The advantage of copying an existing page is that the new page will adopt the links, styles, and formatting and general page appearance of the other page. To copy an existing page, go to the Local Files window and select a file to copy. If possible, choose a page that doesn't have too much content on it since you will have to delete the content and replace it with the content for the new page. To copy the file, right click on the file you wish to copy and select Edit > Copy:
If you wish to create a new folder in which to place the file, right click on the root folder (Your Site ) and select New Folder. Give this folder an appropriate name (Remember: the name of this folder you are creating will be reflected in the Web site address. For example, a new folder named "news" would be accessed by going to http://www.csuchico.edu/yourSite//news).
You will want to paste the copied file in the folder in the same folder you copied the file. To do this, right click on the folder and select Copy > Paste. It will automatically be named "Copy of ..." Once you move the file you will rename it.
Next, move the new file over the folder in which you want the file to reside. Simply click on the file and drag it into the appropriate folder. The reason for doing this is because Dreamweaver will recognize any links and automatically ask if you wish for those links to be updated. It is important that you choose to update the links. Not doing so may cause pages to display incorrectly and may break links.
You can now rename the file and edit it.
Adding the New Page to the Navigation Menu
If you want your newly created page to show up on the navigation menu, you must must add it to the navigation include file. To do this, open up the file titled "leftnav.html" in the "_include" folder in the site files window.
This should open up a page containing a bulleted list of links with no formatting. It should look something like the following. Note how the links in the list correlate to the links displayed on the left-navigation of your Web site. Notice how a corresponding page looks as compared to the leftnav.html file:
You will need to add a new link to the list for the page you created. To do this, left click on the link which you want to be before the new link. Scroll to the end of the line and press the "Enter" (or "Return" on a Macintosh) button on your keyboard. This will automatically create a new "list item" below that line. You can now add the new link to the list item you just created. Give the link the appropriate name.
Next, link the new item to the appropriate page. To do this, select the link you have just created, and then select the location of the new page by clicking on the folder next to the "Link" box in the "Properties" section at the bottom of your Dreamweaver screen.
The new list-item should now link to your newly created page.
Next you must assign the new link an "id." The purpose of this "id" is so you can choose to accent it by making it appear bold when people visit pages, giving the user a better sense of what page they are on. Giving the link an 'id" makes this easy. You will need to assign the new link an "id" from within the source code of the "leftnav.html" page. In order to view the source code, Dreamweaver must be set to "Split" view.
Highlight the link. You should see the corresponding code in the upper half of the screen highlighted as well. This tells you where your link is located within the code and where you assign an "id" to the link. The new link should look identical to the other links except that it does not have an "id."
Notice the other links and their corresponding "id's." From within the <li> tag proceeding your link, assign the link its "id" by following the same format as the other links. Assign it an appropriate name. Keep it simple, short, and make sure it contains no spaces.
You have now created a new link in your left-navigation and assigned it an "id." The new link should now show up on all of your pages in the left navigation. There is one thing left to do. You can choose the pages in which your new link will be bold. (Having the link bold tells the user they are in that specific section of your Web site.) You will once again need to alter the code of the Web page for this to happen. Open up the newly created page. In the code view, scroll to the "styles" section within the <head> tab. The styles begin after the <style type="text/css" media="screen"> tag.
The following two styles will be the ones you must alter in order for your newly created link to become bold. Notice that the "id" of the page from which you duplicated your current page is present in the two styles. For example, if I created my new page by duplicating the staff page, these two styles will have the staff page "id."
All you have to do is substitute the current "id" with your new link's "id" for the two styles.
The link on the left-navigation associated with that "id" should now be bolded.
Getting More Help
If you would like more help, User Services offers training courses to CSU, Chico faculty and staff for Web site creation. If you are interested in signing up for one of these courses or for general questions, visit the User Services Web site or call 898-6000. You can also contact TLP at 898-6167 for specific one-on-one help with your website.