WEB DESIGN
Click here, Using Dreamweaver, for an Internet4Classrooms' online tutorial. (It uses Dreamweaver for PC's, not Macs, but it's still very useful and covers everything you'll need.) Click here, Dreamweaver tutorials, to access Macromedia's online tutorials. It's a good place to check out. Click here, Dreamweaver 4, for a Washington University online tutorial. (This one is also for PC's and not as easy to use as the above tutorial, but it's available for those who like it. Dreamweaver MX is the one we have so this one may not be as good as the above two.) And don't forget Dreamweaver's help feature. It's fantastic. |
Plan the structure of your pages
Draw a chart
Create page names to use as links
Gather information
URL’s (the web page’s address, starts with http)
Graphics
Text
When you find a cool page, map or icon you wantCopy URL (copy and paste)
Follow copyright guidelines
Building Web Pages
Build page in editor such as Dreamweaver
Convert existing documents (“Save As Web Page” in MS Office apps)
Or, Manually add codes with a word processor (the hard way)
Convert graphics to .gif or .jpg formats with Graphic Converter
Build image maps using Dreamweaver
Establish links
Hyper Text Markup Language (HTML)
A programming language that consists of programming language
<center> would start centered and </center> would stop it
www.schoolnotes.com
www.geocities.com (will have ads)
Chimacum’s website: http://eagle.csd49.org/
SOFTWARE: Macromedia
Parts of the package
Studio MX from Macromedia:
DREAMEAWVER: HTML editor to create web pages.
FIREWORKS: Graphics program that works with Dreamweaver
FLASH MX: Animation program; makes animated movies, etc
FREEHAND: A vector drawing program
DREAMWEAVER:
First time, choose Design
Go to Site or New Site
Name Site – Example: My Site (call it Tutorial)
No and Next
Select “Edit local copies on my machine, then upload to server when ready” and Where on your computer do you want to store your files?
Choose where you want to have your website folder.
Remote Server “None”: and then done;Do this for the first time:
Go to Edit in OS 9 or Dreamweaver in OS X
Go to Preferences
Edit Preferences
Go to Site: Always Show “local Files” on the “Left”; Under FTP Connection: have it unchecked
Close “Untitled Document”
Go to Site – Open Site- (If you ever need to edit a file, do it from here, especially links
Still in Preferences, go to General
Make sure “Show only Site Window on Startup” is checked.New Web Page: Go to “File” and go to “New”
Basic Page and HTML
Go to Create and you should have a blank, untitled document
Titles: You will always have two title pages; don’t number them like page1 and page2.
Saving Rules
All lower case
No spaces
Alphanumeric okay
No punctuation except .htm or .html
No symbols at all (anything over a number OR /’s – only dashes and
underscores are okay)
Save As, for example: practice_page.html
Go to Window, then choose Properties to show bar at bottom (you’ll need that bar)
Highlight your title (the one on the blank page), and then justify it from the Properties bar. You can also choose a different font and font color and font size.
To change color background: go to Modify, Page Properties; Choose a color that won’t conflict with your text; select colors and enter. You only need to choose Background, Text, Link and Visited Link colors.
To put pictures on your page, use the menu bar at the top and click on the Tree to select a picture.Cropping and Resizing
Don’t use corner to resize
Instead, to make the picture smaller, select the picture by clicking on it once; then click on “Edit” on the Properties bar below. When Find Source for Editing window comes up, say “No” every time. As a matter of fact, select Never Use Source PNG at the bottom before you click No. Then you can change the size in Fireworks by selecting Modify, Canvas, Image Size. Change either the width or the height (no need to change them both) then click on Okay. Once done, click on Done.
For cropping, use the crop tool in the tool bar and outline the part you want. When you return to Dreamweaver, after clicking on Done, click on the Reset Size button next to Edit on the bottom bar.To check what your website will look like on the web, go to the menu bar at the top of the blank page and click on the World and choose, “Preview in Internet Explorer.”Go to “File” and select “new” every time you want a new page.
LINKS:
Name your pages and save them all first.
Highlight the phrase you want to be the link and then go to the bar below; click on the folder icon next to link; choose which .htm or .html file you want to link to. The only way to test your link is to Preview in Internet Explorer (the World).
To link to another webpage on someone else’s website, highlight the web address in Internet Explorer and copy it; Go back to your practice page and paste the web address into the box called “Link”.