week 02 - file structure, ftp (file transfer protocol), Dreamweaver introduction, page weight, screen size, web-safe colors, creating links, mid-term project assignment, tables intro, Assignment 2: page layout assignment, table assignment, Quiz 2.
Setting up your file structure
When building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:
Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as midterm.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.
To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.
Uploading your site using FTP
Using the site window in Dreamweaver
Define a site in Dreamweaver
- With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
- Select NEW > SITE
- Be sure you have the “Advanced” tab selected and not the “Basic.” With LOCAL INFO selected
- Set SITE NAME to “everythingaboutweb” or “mysite”(or whatever you want)
- Set LOCAL ROOT FOLDER to where you the main folder where your files are located. Do Not set this folder to the folder where your web files are. If you do, you will be unable to move the entire folder. Always set the Local Root Folder to a folder ABOVE your project folder at least.(For example, select the projec1 folder not your midterm_yourlastname. Your “midterm” folder should contain your midterm_yourlastname folder.
- Leave HTTP ADDRESS blank
- Set the CACHE to be checked
- With REMOTE INFO selected. (It is located in the left hand side navigation)
- Set SERVER ACCESS to FTP
- Set FTP HOST to: ftp.everythingaboutweb.com
- Set HOST DIRECTORY to: (leave blank)
- Set LOGIN to : grdes66online
- Set PASSWORD to: (I will email you the password)
Please note the login and password information in the above image is incorrect. Please use the information I have given you in the text above.
Important: PLEASE BE SURE THAT YOU CHECK THE BOX THAT READS: “Use Passive FTP” located under thepassword field.
- Select OK to complete the creation of a new site.
6. CONNECT to the server using the “plug” icon
Uploading Files
To upload files to the server, click on the folder or file you want to upload, and drag it from the right side to the left side. Or you can select “put” by right clicking to upload the files. For example, you should see your entire midterm_yourlastname folder. Drag this complete folder to the top blue folder.
In most cases, you will upload the complete web site as a directory. Drag this folder to the left hand side, and drop it when you’ve placed it over the top folder .
Dropping the folder on the ” / “folder ensures that you place the folder in the correct place. If you drop a file or folder onto another folder, the file will be placed inside of that folder rather than replacing it.
If you want to move a single file up to the server, then drag this file and drop it onto the correct directory on the server (or you can drop it on top of an old version of the same file).
When you move HTML files in the Site Files window, Dreamweaver will ask if you want to Include Dependent Files? If you say yes, Dreamweaver will look in your HTML files, and copy any images in referenced in those files, even if you don’t select them for the copy. In general, if you are copying a folder of a complete site, there is no reason to copy dependent files, since you are already copying all the files needed for the site (because they are all in the folder). But if you are copying an individual HTML file, then in general it’s good to answer yes to including dependent files, to make sure that any images in that page are properly uploaded.
Once you have uploaded your folder, please view your site at the following web address: http://www.everythingaboutweb.com/grdes66online
Uploading existing files on the server:
If you need to make changes and re-upload you may do so. Please note the following:
When you upload and replace files that are already on the server, there are several issues you should note:
- Be sure you save the new file before you upload it, so your changes get to the server.
- Dreamweaver (and other FTP programs) will not ask you if you want to replace them. It will just write over the old files. Be sure you want to replace the files on the server before you upload the new files.
- After you upload the new versions of the files, you should check to make sure they are on the server. View the web pages on the Internet at their real web address, and don’t rely on the Dreamweaver preview of the local file. If the web page is already open on the browser, use the Reload/Refresh button to view the page.
- Sometimes when you replace a file and view it, you don’t see the changes. This is because the browser has cached the file, and you are looking at an old copy stored on the local computer, not the new one on the server. To fix this, try using the Reload/Refresh button. If this doesn’t work, hold the shift key and press Reload/Refresh to force a newer version. If that doesn’t work, you will have to clear the cache. This is usually in Edit>Preferences>Advanced>Cache. If this doesn’t work, you probably didn’t upload the file correctly, or to the right location.
Rules for the Shared server
Please be courteous to your fellow students by following the guidelines below:
- Be careful not to overwrite a fellow student’s files or the index file for the shared site.
- All student files are considered private and you cannot download other student’s files from the server without permission.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Video Demonstrations
I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 2 videos from the YouTube site. I have posted both videos below.
File Structure
FTP (File Transfer Protocol)
What if I’ve read through all the instructions above, and viewed the video demonstrations and I still don’t understand how to connect to the server?
Additional Resources:
1) Please read pages 14-28 in our texbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques
2) I also suggest you read the following information from Dreamweaver CS3: Hands on Training by Garrick Chow.
3) Please watch the YouTube: Dreamweaver Tutorial- Define Local Root/Site Folder located in the Media section of this site. This video covers more than you need to know for this class, but can be very helpful.
4) Post any questions you have to the Discussions section of the smconline.org site. I’ve set up a topic called “FTP” for your questions.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dreamweaver introduction
Dreamweaver is an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application (e.g. GoLive or FrontPage).
Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.
Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop or other applications to create images, sounds, etc.
Creating a new web page in Dreamweaver
- Select FILE>NEW
- Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
- Give the file a name. This name should be all lower case, and have no spaces between words.
- SAVE the file
- There are two windows to use when creating web pages:
- Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
- Code Inspector. This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).
Previewing in the browser
Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox). Alternatively, you can simply press the shift + F12 function key.
Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.
Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.
Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.
Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.
Page properties
Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:
- Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
- Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
- Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
- Page margins. There are settings which control the margin at the top and left of the page. Most designers
like to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).
The document toolbar
The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.
Of particular note are the three buttons on the left. They allow you to quickly change the window view:
- Design View – where you see how the page will appear in a browser
- Code and Design View – a split page view where you see the code at the top, and the design at the bottom
- Code View – where you see only the code that describes the page
Required Reading:
1) Please read pages 29-47 in our texbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques
2) Dreamweaver CS3 Hands-On Training by Garrick Chow: Exploring the Interface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Web page weight
Recommended page weight: total size (html/images/flash) for a web page should be around 60-100K although we often visit web site like Amazon and Ebay where page size is often much larger.
Some typical download times under ideal conditions, which rarely happen:
| Size of File | 56Kbps Modem | 256Kbps DSL | 1500 Kbps Cable |
| 20Kbyte | 3.2 secs | 0.6 secs | < 1 sec |
| 50Kbyte | 8.0 secs | 1.6 secs | < 1 sec |
| 100Kbyte | 16.0 secs | 3.1 secs | 1 sec |
| 1meg | 160.0 secs | 31.3 secs | 6 sec |
Note: s Nielsen/ NetRatings reported (Feb. 2006) that 32% of US home users have dial-up connections, and 68% have broadband.
Checking page weight
You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.
Screen size design
Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!
The situation is more complicated than simply screen resolution:
- Explorer and Safari have different amounts of space available for pages
- Macs and PCs have different amounts of space available for pages
- The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
- If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)
Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:
- In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold”. In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important articles and headlines.
- In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can design
to 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide
The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.
- Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
- Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
- Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)
Previewing page sizes in Dreamweaver
You can preview how your page will look by selecting your page size dimensions in the pull-down at the bottom-right of the document window in Dreamweaver. This will size the document window to the dimensions so you can judge your design in regard to its dimensions.
If the dimensions you want to view aren’t available by default, you can edit the defaults by selecting EDIT SIZES in the pull-down. Or, you can also simply resize the page to the right size.
Non web-safe colors
The colors in the Dreamweaver color palette are all web safe colors. But you can get to other color palettes by clicking on the side arrow.
To use non web-safe colors, you can use the eye-dropper to select any color from anywhere on the screen. And you can select the color selector (the color wheel located to the left of the side arrow) and choose one of the millions and millions of non web-safe colors.
Text formatting
Text formatting in Dreamweaver is similar to the formatting available in a word processor. You select the text you wish to modify, and then apply a style to it. For example, to make a word bold, select the word, then click on the “B” button in the Property Inspector. Alternatively, you can select the text, and use the Text pull-down menu (e.g. Text>Style>Bold).
Text characteristics can be set by Dreamweaver, including bold, italic, color, size, font, and justification. In addition, Dreamweaver has a utility to check the spelling of the selected text or the entire document (TEXT>CHECK
SPELLING).
The text inspector behaves much like the toolbars in a word processor. Note that you can do the following:
- Creating a heading with the Format pull-down
- Set the font face
- Set the font size
- Set the font color
- Make some text bold and italic
- Change the justification to left, center, and right
- Make a link to another web page
- Create a list
- Indent some text
That said, we will NOT style our text in this class using the text inspector but rather we will use Cascading Style Sheets (CSS). We will discuss the advantages of using CSS later in the semester.
Line Breaks: Note that when entering text, if you hit ENTER on the keyboard, a blank line will be inserted between paragraphs. This happens because Dreamweaver inserts a <p> tag at the beginning of the previous paragraph, and a </p> at the end. If you don’t want a blank line between paragraphs, the hold the SHIFT KEY down while you hit ENTER. This will insert a <br> at the end of the paragraph.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Working with images
Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.
A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.
To steal an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.
 gorilla.jpg |
 gorilla.gif |
Once you have an image to work with, these are the steps for putting an image in a web page.
- Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon
in the Insert palette. It will request the name of the image, which
you can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector. - Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
- Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
- Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
- Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.
Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the
lower right hand corner of the palette. Experiment with the following:
- Change the height and width of the image
- Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
- Change the alignment so text wraps around the image
- Set the alt attribute of an image
- Make the image a link
- Change the VSpace and Hspace to change the margin around an image when text if flowing around it
Required Reading:
1) Dreamweaver CS3 Hands-On Training by Garrick Chow: Learning the Basics
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mid-term Project
Music industry web site
Project due (9/17/08)
Create a web site for the music industry that has a home page and two sub pages. The focus of this project is visual and navigational design–the primary grading criteria will be for these elements. Secondary grading criteria include page download size, fitting the design on an 1024×768 display (we will talk later about what the dimensions of the site should be to fit a 1024×768 display), quality of content, and use of tables. And of course, the site must work correctly in terms of links and images.
- The home page should have a graphic treatment that strongly represents the specific music industry’s aesthetic and music. Do the best you can to represent the attitude of the company. Pay particular attention to page layout, typography, color, and visual theme.
- The home page should have navigation elements that link to 8 different parts of the web site–you will create only 2 of these content pages. The rest of the web site should be very simple placeholder pages that have just a title and name in text (see the student examples below…. this is an example of a placerholder page). Keep in mind the rules of navigation we will discuss later in the semester. I have assigned 8 links to force you to create more than one group of navigation elements on the page, since 7 links is the maximum you should have grouped together on a page.
- The two sub pages must include content (i.e. photos and text) for two different areas of the recording company site, e.g. Featured Artists and the company’s Web Radio Station.
- The two sub pages must include a navigation system that enables the user to get to the other major areas of the site without going to back to the home page. This navigation system must only provide links to 5 of the 8 sections of the site, plus a link back to the home page.
Choose interesting sub-pages for your project. Make your sub pages something other than the contact and corporate pages.
The home page must include the following links (though you may name them anything you want).
- New Releases – Featured Artists
- Company’s web radio station
- Tour Schedules
- Catalog/purchasing
- Submissions to get signed
- News
- Contact info
- Corporate information
Select any real company of your choice or better yet, make up one of your own. You may get content (e.g. text, photos, logos, etc.) from an existing site, but you must develop an original design for the web site.
Some interesting companies to look a for research :
NEW REQUIREMENT FOR MIDTERM: You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images of artists and CD covers found on other music sites. You may use your own original artwork and/or photography if you prefer.
Examples of student work from previous semester:
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tables
A grid for controlling page layout
| A cell |  an image with some text in the cell |
| cell | cel |
Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells can contain text and graphics, and have a specific or relative size specified.
You create tables by clicking on the table icon in the object palette. 
You’ll be asked to set the following attributes:
- Number of rows
- Number of columns
- Width in Percent or Pixels
- The width of the border (the beveled edge on the outer part of the table)
- The cell padding (the text margin, left, right, top, bottom)
- The cell spacing (the width of the cell walls)
Table properties
Table properties are accessible by selecting the whole table.
Table Cell properties
Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.
Table Features
The difference between percent and pixelsIf the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tables.
- Flowing text around tables
For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.
- Table format
The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.
- Border size
- The setting of the table border in pixels affects the width of the border around the edge of the table.
- Cellspacing size
- The setting of the table cellspacing affects the width of the border around each cell
- Cellpadding size
- The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom
Selecting a table- There are three ways to select the whole table.
- click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
- click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
- click anywhere inside the table, the click on the <table> tag at the bottom of the document window
Adjust the rightmost cell first
- If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.
- Row and Column Span
- Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.
| This cell has a row span of two. |
This cell has a column span of two. |
|
- Changing the style of text in multiple cells
- You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a <font> tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can’t simply put a <font> tag around the whole table–this will not change the style of the text inside the table.
- Cell alignment — horizontal and vertical
- The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.
- The contents of a cell affects its size
- Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.
- Clear row heights or column widths
- When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.
- Convert table widths to pixels or percent
- If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.
- Nesting tables
- You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.
This table is inside another
table
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Video Demonstration
I demonstrate how to re-create the tables_example.htm sample page with nested tables. In this demonstration, I have used the files found here web1_tables_example.zip to reproduce the file tables_example.htm in Dreamweaver. You can view the video demonstration in one of two ways.
1) You can download the entire demonstration in one QuickTime movie file (48MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted all three videos below.
Table Structure | Part 1
Table Structure | Part 2
Table Structure | Part 3
One of your assignments for next week will be to recreate this page. See the assignments notes at the end of this page.
More tables
Read pages 65-83 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.
Required Resources:
Please watch the lynda.com: Learning Dreamweaver MX with: Garo Green located on the lynda.com site. On the page, scroll down to the chaper named Tables > and click on “insert and modify a table.” This video covers inserting and modifying tables in Dreamweaver MX — so it is slightly different in Dreamweaver CS3, but still very helpful.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Two Assignments & Quiz (Must be posted to “Dropbox” on smconline.org site by noon on Monday, September 
1) Page layout assignment
Read part 1 & part 2 of the Adobe Tutorial: Creating your first website.
In part 1, you will learn more about setting up your site and project files. Please download the Sample file in part 1, we will continue to use these files over the next few weeks.
In part 2, you will learn how to create the page layout. (Please note this section has seven pages)
Download the set of files in part 1 and reproduce the page layout as detailed in part 2. After you have completed the layout for this page, I would like you to upload the HTML file (zipped) to the DropBox on the smconline.org site by noon, Monday, September 8.
We will continue to work with these files in the coming weeks
. . . . . . . . . . .
2) Tables assignment
I demonstrated how to re-create the sample page with nested tables in the video demonstration. I would like you to do the following:
Download the set of files web1_tables_example.zip and reproduce the file tables_example.htm in Dreamweaver. Do not copy the HTML from the example but feel free to refer to the code if you get stuck regarding how to build the page. Remember, while viewing this page in a browser window you can “view source” to see the code used to build this page.
Notes:
- Be sure to make the tables in pixels rather than relative so they stay a fixed size even if the browser changes size. The width of the main table should be 750 pixels wide.
- You do not need to include the pink border shown in the example, we will create this later in the semester when we learn more about AP divs.
- You may want to use a 2 column, 2 row table to begin with.
- Remember to merge or split cells if necessary.
- I would recommend you use a nested table for the logo and the navigation on this page.
- Set the cell vertical alignment to LEFT and TOP so the cell content aligns with the left and top of the cell rather than the default center.
- Remember you can change the width of the table cells to control positioning.
- Remember you can use vspace and hspace to control the positioning of images.
All the image files and an text file are included in the web1_tables_example.zip file. Please be sure to set up your folder structure correctly. All the images should be placed in an “images” folder and the text file should be stored in a separate folder named “source files.”
After you have completed the HTML for this page, I would like you to upload the folder with all of your files (zipped) to the DropBox on the smconline.org site by noon, Monday, September 8.
. . . . . . . . . . .
3) Quiz
Also, answer the question in the attached Quiz 2 and upload to the “Dropbox” on smconline.org site by noon on Monday, September 8. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.
copyright © 2006-2008, jamie cavanaugh
