Creating a Web Page with Dreamweaver
If you want to use a different web page editor, you are welcome to do so, such as NVU, Front Page, etc. )
NVU is a free open source and you can download the program by doing a google search. Hint; do not download from the nvu.com site.
Some items to keep in mind prior to starting
-
Please read the Web Portfolio prior to starting this assignment.
-
When creating a Web site, you will need the following...
- work, normally created by a web page editor such as NVU, Dreamweaver and etc.
- server or host (the sample will use geocities.com, because it is free, but feel free to use any host)
- domain name or commonly known as web address (if using geocities, they will provide one for you, normally it will be http://www.geocities.com/username)
-
When you upload your work and you make changes to your page (example, index page), you will need to save your work and then upload the file again. Afterwards, go back to your web site and if it does not reflect the new work, you will need to refresh or reload your browser.
1) Open Dreamweaver – a blank document will be created. Set the title of
the document by going to modify>page properties . Add a title; the other information is not necessary.
Step 1
Click on Modify>Page Properties... |
Modify>Page Properties Choose the Title/Encoding on the left side and next to title, place whatever you want to appear on the top of the browser window. |
Step 2
2) Saving your work, create a folder and save all of your work in that folder, example, you can have a folder labeled 'web.' Once you have a folder, go and save your file. If this is your first page, you should use “index.html”. Other file names should be relatively short with only letters and numbers (some things to keep in mind regarding file names, 1. do not use spaces in your file name and do not use uppercase your file name).
3) Add text to your page by clicking, typing and formatting (just like a word processor). To change the background color select Modify>Page Properties . Click on the background color square that is next to the text and a color palate will show. Choose any color.
Modify>Page Properties
|
4) You can add tables for more formatting options (e.g. three columns). Click
on the Insert>Table. Select the number of
rows and columns. If you want an invisible table, place a 0 for Border thickness.
Step 1
Insert>Table... |
Select the type of table that you want, the example above is a 8X3. |
Step 2
5) To make a link, select the text or image and then go to the properties menu (if the properties menu isn't on the screen, go to Windows>Properties). If you are creating a link that will take you to another page within your site, then click on the folder icon located right of the text link (it is in the upper right hand corner). Then choose your file and it will be linked. If you are linking to a website on the web, type in the url (remember that it needs to start http://)
6) To add a picture, you need to find a picture and save it as a separate file (e.g. mypict.jpg). Put this picture into the appropriate location in your web site. This could be in the same location as your html page, or in a folder called “images” or “graphics”. Then select Insert>Image. (keep in mind that if you are using the free geocities account as your host, you will NOT want to create a separate folder for your images.)
Step 1
Insert>Image...
|
7) Save your work (often) and take a look at what it looks like in a browser by clicking on the Browse button.
8) Uploading to the site? TBA – when you are ready copy all your files
to their same relative locations on your udrive in the folder public_html
To create an e-mail link, you will need to type in the text field, "mailto:tae.chang@csun.edu).
Some Web sites that will be of assistance,
http://flamingtext.com/, http://www.animfactory.com/, http://www.google.com/ (and select the image
icon).
In this assignment, you will have.
A homepage saved as 'index'
Text on the index page should include information about you, your teaching philosophy, this class and more. On your portfolio page, you should have a thorough description of each of the assignments.
Three graphics from the Internet on each page, and
Hyperlinks, 1) linking all
of your pages and 2) email.
Hints: your file name should all be in lower case and you should not leave a space between any file names. (examples of a good file names, "index," "daily_notes," "teaching_philosophy," and etc.)
Some recommendations to make your pages look outstanding, font, background, tables and etc.
II. Server, using Geocities, feel free to use any host such as CSUN or another
Go to Geocities.com and sign up for a free account.
After you have sign up for an account, you will see a page that looks similar to the following...
once you see a page similar to the one above, click on Build your web site now! (keep in mind that you have already built your site, you are now ready to upload your work.)
Once you see this page, there are a few tabs across the top, you will want to select the Manage tab.
Once you are in the Manage section, you will want to select Easy Upload
Once you select easy upload, then the following page will appear and it is similar to sending an email attachment. Here, you will want to select Browse... and then locate your file and then hit the Upload Files button. Go to your site to see your work. To find out your web address, type in http://geocities.com/userid. (whatever your userid is for geocities or yahoo, that is what you would place instead of userid)
Items to keep in mind...
Opening up a NV-U page
Please keep in mind that you will not be able to open your public_html folder and click on your file, (ex., index.html or portfolio.html) and expect it to open where you will be able to edit or work on. Instead, you will need to open up NV-u and then go to file and open. Then choose your file and it will open the file in NV-u where you can work.
If you go to your web site and it states 'forbidden' (if using CSUN as your server)
click on this link
If your ASSIGNMENT comes up 'forbidden,' complete the following... (if using CSUN as your server)
-If your Web site works (you are able to view your homepage and portfolio page), but the assignment links from the portfolio page doesn't work, you will need to do one of the following.
Option 1...
- open up your udrive and get to the screen that has your assignment(s). Once you see your file, drag that file from your udrive onto your desktop. It should make a copy to your desktop. Now, you should have the same file in two locations, on your desktop and on your udrive.
- Click on the file that you recently dragged on to the desktop once and then go to 'File' and choose 'Get Info.'
- Click on the triangle next to 'Ownership & Permissions.' The triangle should be facing down.
- You will see another triangle next to 'Details' and that triangle also needs to be facing down. Now that both those triangles face down, look where it states 'Access'
- If next to access, it states 'No Access,' then click on the drop down menu and change the setting to 'Read & Write.'
- Once you have change the access, you will want to get the file that is on your desktop and drag it over to your udrive and drop the file where the exact same file is located. Once you drop this file, it will ask you if you want to replace, because it contains the exact same file name and you will select 'Replace.'
- Go to your portfolio page again and hit 'Refresh' or 'Reload' and check the link. It should be working now.
Option 2...
- take your file and copy it to the desktop
- once your file has been copied to the desktop, then delete it from the public_html folder
- open the file that is located on the desktop
- once the file is open, re save the work (example, go to file and choose save as)
- save the file back into the original location in the public_html folder and that should work.
- go to your web site and refresh the page and try the link
-If you complete an assignment from another computer and then
want to
place it into your u-drive, please do the following...
- open your file in the application that it was created in
- next, you will need to re save the file, example, go to file and save as
- save the file over the original file.
Backing up your work
Keep in mind that you will always want to save your new work over the older version
When you back up your work from the u-drive to your storage device, no problem, simply open up your u-drive and open your public_html folder. Keep your public_html folder open and open your storage device. You should have two windows open, public_html folder and your storage device and select any or all assignments from your public_html folder and drag them onto your storage device.
When you back up your work from your storage device to your u-drive, you will need to make sure NOT to have your userid on the window. Instead, when your userid is showing, go inside your public_html folder and if public_html is on top of the window, then it is ok to move your work from your storage device to your public_html folder.
