| week 2 |
| Step 1> Setting up the site folder and defining your site in Dreamweaver |
|
|
Create a desktop folder, call it workshop_1. When you are working with websites, always keep all of your files in one folder. Do not move files from that folder unless you are using Dreamweaver. Open your new site folder and create another 3 folders: graphics, pages and raw. Save this image to your graphics folder (right click and choose download image) |
Open Dreamweaver CS3/CS4. Because these are computers that are used by many students the default configuration of Dreamweaver will probably always be different. Always spend some time and configure the Dreamweaver space. Try and make it familiar. If you are unsure just start click around and experimenting. This is called your SITE window. Choose SITE>MANAGE SITES, from the top main menu. From there choose, SITE>CREATE NEW SITE The next line is titled: LOCAL ROOT FOLDER. It is asking you to tell it where your site is. Click on the folder icon there and browse to the folder that you created on your desktop. Click ok. |
| Create a new file: FILE>NEW FILE> HTML. it will be called index.html. |
|
|
| Step 2> setting up the page |
|
|
| CONTROL>CLICK the page and choose PAGE PROPERTIES - appearance HTML - from the menu. Set all margins to '0' with a background colour o #333333. Name your page, whatever. Click OK. You should be looking at a black page with a title of whatever. Save your page. |
|
|
| Step 3 > setting up the tables |
|
|
| If not already open, choose WINDOWS>OBJECTS on the objects pallet choose INSERT TABLE. We want to make a table with 1 row, 1 column and 760 pixels wide. '0' to all border and buffer options. |
| Use your mouse to highlight the table (hover your mouse over an edge of the table until your cursor changes, then click. With the table highlighted, on the Property Inspector, choose ALIGN>CENTER |
| Click inside of the table, on the Property Inspector choose BG COLOR>white |
| Click inside the table and choose, INSERT>TABLE from the OBJECT PALETTE. This table is to be set to 8 rows, 1 column, 760 pixels, all the rest are set to '0'. |
| Set each of the rows to the following heights in the property inspector. To do this, click into the row and set the H in the Property Inspector: |
| Row 1 > 44 |
| Row 2 > 125 |
| Row 3 > 4 (once you have set all the tables come back to this one, in code take out the ) |
| Row 4 > 20 |
| Row 5 > leave |
| Row 6 > 4 (once you have set all the tables come back to this one, in code take out the ) |
| Row 7 > 44 |
| Row 8 > 7 (once you have set all the tables come back to this one, in code take out the ) |
| TABLE ROW BACKGROUND COLOURS > BG color setting in the property inspector |
| Row 1 > #F2F1EC |
| Row 2 > leave for now |
| Row 3 > #000000 |
| Row 4 > #770D0D |
| Row 5 > leave for now |
| Row 6 > #000000 |
| Row 7 > #F2F1EC |
| Row 8 > #000000 |
| NESTED TABLES > insert tables within the rows of the following..well, rows. |
| Row 1 > 1 row, 2 columns, 760 pixels wide, all others to '0'. set left cell to 500p, right to 260p. Table to 25p high |
-- Set the right column to CENTER>MIDDLE on the Property Inspector |
| Row 2 > inset image>banner.jpg |
| Row 3 > leave |
| Row 4 >1 row, 7 columns, 760 pixels wide, all others to '0', set the cells to the following: |
| Cell 1 > #666666 160px x 20px high |
| Cell 2 > #8A8A8A 100px x 20px high |
| Cell 3 > #CCCCCC 100px x 20px high |
| Cell 4 > #666666 100px x 20px high |
| Cell 5 > #8A8A8A 100px x 20px high |
| Cell 6 > #CCCCCC 100px x 20px high |
| Cell 7 > #666666 100px x 20px high |
Row 5 > 1 row, 2 columns, 760 pixels wide, all others to '0'. set left cell to 169p. height to 250p |
Cell 1 > Insert another table into the left column Set this one to > 1 row, 2 columns, 169 wide, 250 high (the height will be set in the property inspector and not the table creation pop-up box). |
| Cell 2 > Right column > 22pixles, BG #333333 (Insert another table here, 2 Row, 1 column, 591 pixles, 0 border, 0 cell spacing, 10 cell padding. |
| Row 6 > leave (take out if still in code) |
| Row 7 > 1 row, 2 columns, 760 pixels wide, all others to '0'. set left cell to 500p, right to 260p. Table to 25p high |
| Row 8 > set BG to #000000 |
|
|
| Should be looking like this |
| TEXT > CSS - Cascading Style Sheets |
| In ROW 1, in the right-most column, type in id)INTERACTIVE DESIGN |
| In your PROPERTY INSPECTOR, you will see two 'buttons at the far left - one says HTML and the one below it says CSS. Click the one that reads CSS. |
| The top-most dropdown on the PROPERTY INSPECTOR reads Targeted Rule, click the dropdown menu and choose <NEW CSS RULE> |
| click the button below that reads EDIT RULE |
In the box that pops up, make sure that it says that class can apply to any HTML element below that it asks you to name your style. type a name here that makes sense to the page. For example: header, body text, navigation et cetera. Type in the name subheader for this class - click ok |
| in the box that pops open - put in: |
| Verdana, size 13, #333333 - click OK |
| In the second last row (Row 7), in the right-most cell type in id)INTERACTIVE DESIGN again. | a
| In the dropdopwn box beside TARGETED RULE, you should see the name 'subheader' - as that is what you named it. Making sure that the text that you just typed in is highlighted, click and choose subheader from the dropdown box, and the text formating will change to the presets that you punched in earlier. |
|
| Repeat the above procedure to create a CSS style for all of the text on your site. When you are done, it should be looking like this: |
| SITE WITH TEXT STYLES |
| You should creat a unique STYLE for: - navigation - body text - sub navigation - header - subheader |
| The large body of text that is on the page in LATIN is called LOREM IPSUM, it is the standard text placeholder for web and print a like. Here is the site that you can copy and paste this holder text from. |
| http://www.lipsum.com/ |
