RACC WEB 115 Class #2 Lecture
Quiz on Figure 1-2, Figure 1-3, and/or Table 1-1.
Any questions on installing Macromedia Dreamweaver at home?
Any problems downloading the textbook's source files at home?
Any problems subscribing to the class mailing list?
How many students have Dreamweaver installed at home?
Install the textbook's source files from an enclosed floppy or
download
the files to your classroom PC. On your computer in our classroom, I recommend
making a folder named "WEB115Minich" where your last name is substituted
for Minich. Then, create the folder structure as specified by the textbook and
place the downloaded source files in the appropriate folders.
C:\WEB115Minich\Chapter1
\images
Chapter2
\images
Chapter3
\images
Chapter4
\images
Chapter5
\images
Chapter6
\images
Chapter7
\images
Chapter8
\assets
\images
\movies
\sounds
Chapter9
\images
Chapter10
\images
Chapter11
\images
Sites
\lbc
\assets
\images
\movies
\sounds
\ch1practice
\images
\ch2practice
\images
\ch3practice
\images
\ch4practice
\images
\ch5practice
\images
\ch6practice
\images
\ch7practice
\images
\ch8practice
\assets
\images
\movies
\sounds
\ch9practice
\images
\ch10practice
\images
\ch11practice
\images
Review the Dreamweaver environment being able to identify, close, and reopen various panels. Use the Edit/Preferences/Change Workspace command to set up the Dreamweaver 4.0 interface rather than the Dreamweaver MX interface.
Use the Modify/Page Properties menu command to change various properties of a new, blank page and then examine the changes in the code & design views.
Use selected tools on the toolbar to toggle between the code & design views, to preview the page in a web browser, to search for reference information, and to view available display options.
Follow the tutorial on pp. 23+ to create La Bonne Cuisine web page. Save this file as C:\WEB115Minich\Sites\ch1practice\ch1practice.htm (with your name substituted for the Minich)
Follow the tutorial on pp. 27+ to add hyperlinks to this web page.
Follow the tutorial on pp. 34+ to insert images and a table to this web page
Use the Modify/Page Properties menu command to change various properties of a new, blank page and then examine the changes in the code & design views.
Create a simple Web page or open ch1practice1.htm. Use selected tools on the toolbar to toggle between the code & design views, to preview the page in a web browser, to search for reference information, and to view available display options. Observe the relationship between highlighting a segment of HTML in the code view and then observing the selected portion of the WYSIWYG design view. Also, discuss the use of the Preview in Browser toolbar button or the equivalent F12 key.
Add a hyperlink to this Web page or open ch1practice2.htm and add another hyperlink to it with the Property Inspector. You can manually type absolute or relative URL's in the Property Inspector or you can click the Browse for File button. Note that planning your while site before creating any of the web pages in Dreamweaver is advised so that you know the exact filenames of other web pages within your site. Observe the corresponding code in the code view that was created when we added these hyperlinks.
Add an image to the simple Web page or open ch1practice3.htm and add another image. First make sure that the images are copied locally from the downloaded textbook files to your ch1practice site folder. I personally prefer using the Insert/Image menu command to insert images rather than the Common Objects panel. Observe the properties of a selected image that can be manipulated with the Property Inspector. Change the size of the image by changing the Width and Height properties within the Property Inspector as well as with your mouse. Briefly discuss the differences between the gif, jpg, and png graphic formats.
Add a table to the simple Web page or add another table to ch1practice3.htm. I prefer using the Insert/Table menu command. Discuss the importance of tables in page layout. Discuss the choice between defining a table to be 90% of the width of a page (relative) versus 700 pixels or so (absolute). Practice manipulating various properties of a table as well as individual cells. Practice inserting and deleting new rows and columns.
Any questions on La Bonne Cuisine web page tutorial on pp. 23, 27, & 34 ( C:\WEB115Minich\Sites\ch1practice\ch1practice.htm )? Show selected student examples to the class.
Review the resume Case Project on p. 42 and the additional requirements as our Assignment #1. Show selected student examples to the class. Draw & discuss various layouts that use tables to arrange the information.
To cause a linked page to open in a new browser window, type _blank in the Target area on the Property Inspector.
(if time) Begin Ch. 2 Lecture
Fireworks
- BEWARE: Fireworks version 4 that is used in the textbook will be different from Fireworks MX that we have installed in class and at home
- Introduction to the Tools panel of Fireworks
- Creating a new, blank document
- size
- resolution
- canvas color - transparent or not?
- saving/exporting your work
- as a .png (pronounced "ping") file
- as a .gif or .jpg file
- I recommend that you save original png files in a separate folder (not in your assets or images folder)
- using the Colors panel and palettes in Fireworks
- using the Layers panel
- using the Text tool
- (if time) using the Frames panel to create animated gif
Homework Assignment: