Background info: When working on a Web site, you first create and edit files in a local site folder on your computer, then synchronize that local folder with a remote site folder which sits on a Web server. After synchronizing, the remote folder should be a mirror of the local folder.

1. Create a basic folder hierarchy and Define your site on a temporary folder on the desktop, create a folder to contain your web site. Name it "290 site". Within this folder, create a folder with your "Last" name (this is your actual site folder,) within this folder create and name two more folders named "graphics" and "images"

Launch GoLive and create a new site by going to the menu File>New Site>. Click the Blank button. Locate the folder 290 site and create a site with your last name in it. GoLive will create a file called index.html. This will be the first page in your site.

2. Download several images that you are sureto use on your site from the Resources page to your graphics folder. Select at least one background image and one complete set of art image.

Define your site
Setup Dreamweaver's Site window to help you create and maintain both local and remote site files and links.

Background info: Whenever you sit down to use Dreamweaver, you must first define the location of your site. By telling Dreamweaver where your local site folder resides on your computer, and where the remote site folder is on the Web server, Dreamweaver can help organize files, prevent broken links, and easily update your "live" remote site after changes are made. The Site window behaves much like Finder in fact, after this point you should avoid opening and moving site files from within Finder.

Do this: Launch Macromedia Dreamweaver and choose Site>New Site. Click Basic tab.

• Type in a site Name to help you to identify it as yours, like "John's Site" (if your name is John.) Click Next.

• Leave the No button checked. You will not be using special server technology. Click Next.

• Leave the Edit local copies button checked, then click on the small folder icon to tell Dreamweaver where your local site folder resides. (Be extremely careful that you select and choose the site folder itself and not the images folder within it, nor its parent "Web Portfolio" folder.) Click Next.

• Change the Server Access pop-up menu to Local/Network. Click the folder icon to tell Dreamweaver where your remote site folder resides. Navigate up to the Desktop then down through the webwork volume to your class . Create a folder with your Last name (or other name as determined by your instructor.)

Note: If the webwork volume is not mounted, log-in from Finder by going to the Apple icon>Chooser>Apple Talk and logging into the Digital Arts server using your name and W number.

Click Next, Next then Done. In the site window you will see your Local site files on the right, and the Remote site files on the left. (The remote site will be empty until you synchronize, later.)

3.Open your home page (index.html) Within Dreamweaver

4. Change the name of your page One of the properties of your Web page is its Title. The title appears in the browser window's title bar and is used as an identifier when people bookmark your site. To title your home page, enter it in the title field at the top of the document window.

5. Define a background image. Click on the page property button.
When this is done the inspector window opens to include information about the page. Select the button next to the Image field. Navigate to a background file downloaded from step 2 and saved to your images folder. Alternatively, you could instead select a background color. You may also define link colors here.

Preview you page in a browser. GoLive does not provide an accurate preview of you page. For this you must view your page in a browser. Click on the show in browser icon, and select either Internet Explorer or Netscape Navigator. (If neither browser shows up as an option, you need to point GoLive to the location of the browsers.

6. Laying out your page It is not possible to position items on a Web page freely without using tables .

7. Create a table. Click and drag out a table from the object pallet for the layout of the navigational elements of your page. Type in 2 rows, 4 columns, and 20 cell spacing. Width 100%, no border. Center the table by selecting it and choosing Align Center from the Property Inspector. (To select the entire table, either grab it at the very top.)

Many Web designers use tables with invisible boarders to create a grid like structure to lay out elements on a page.

7. Duplicate your index page to create other pages for your site In Finder, make two copies of your index page to use as starting points for the other pages in your site. Duplicate index.html by selecting it and choosing File>Duplicate (command-d) two times. Rename one copy personal.html and the other artwork.html.

3. Create a new document as your home page

In this step you will:
Create a new HTML file and open it within the site window.

Background Info: Any file that is part of a Web site must adhere to strict naming rules:

• Do not use spaces, special characters or punctuation (other than a period, "." or hyphen "-")

• Use only lowercase letters (if you do use upper case, use them consistently throughout the site, e.g. for the first character in every file name)

• All files must have the appropriate extension, such as .html, .jpg, .gif…

• The home page in every site must be named "index.html".

Click in the Site window and choose Site>Site Files View>New File. (Alternatively, you can control-click in the site window and choose New File.)

Change the name of the new untitled document to "index.html".

Double-click on the index.html page icon to open the page in Dreamweaver.

Title your page by typing it into the field at the top of the document window, or choose Modify>Page Properties. Name it something like "Art 290 Portfolio".

Note: The title of each Web page appears in the browser window's title bar and is used as an identifier when visitors bookmark your site. This is not to be confused with the page's file name. HTML file naming rules do not need to be applied to the title.

4. Layout a basic grid for your page design

In this step you will:
Set your document window size
• Use Layout View to graphically arrange cells to contain text and graphics

Background Info: By default, text and graphics added to a Web page in Dreamweaver appear at the upper left and flow right and downwards, much like in a word processor. In order to arrange text and graphic elements in other areas of a page, you can create a "grid" using Layout View. This provides an intuitive, easy to manipulate table structure with which to draw, move and resize container cells. Other options include the more cumbersome insertion and formatting of tables in Standard View, or the use of floating layers, a feature of Dynamic HTML (DHTML) which can be unpredictable.

Do this: Click on the Window Size menu at the lower right of the document window, and change it to 955 x 600. This will give you an idea of what viewers with a monitor resolution of 1024 x 768 will see, so that you can design you page to minimize having to scroll around. We will design a layout table with a maximum width of 675 pixels, to accommodate viewers with smaller monitors. Generally, downward scrolling is less inconvenient than lateral scrolling.

• Click the Layout tab on the Insert panel and click Layout View. Select the Draw Layout Table tool and draw a layout table starting in the upper left, dragging to the right and down.

The width of the table will be displayed along its top, and also in the Property Inspector. Make your table 675 pixels wide by 600 pixels high, either by adjusting the side handles or by typing 675 (width) x 600 (height) into the "Fixed" field of the Properties panel. The height of the table will expand automatically as your content flows, or you can increase the height manually.

• With the Draw Layout Cell tool selected, draw a cell to contain the large header at the top of your page. Start near the top and the left margin, and drag close to the right margin. Refer to the measurements at the top and in the Properties panel to resize the cell to 575 x 70.

Click on an edge of the cell to select it and move it by dragging with the mouse on a cell edge (not a handle) or with the arrow keys so that there is a 50 pixel margin on each side of the cell.

• Again using the Draw Layout Cell tool, drag out a cell at the bottom between the guidelines that appeared when first cell was added. The resulting cell, which will contain our site navigation links, should be 575 x 25, a 50 pixel margin on each side of the cell.

5. Enter type into the layout cells and format using style sheets

In this step you will:
Enter text into layout cells
• Use Cascading Style Sheets (CSS) to format text elements

Background Info: HTML provides for several simple text formats: Heading 1 <h1> through Heading 6 <h6> denote headline hierarchies from largest (most important head) to smallest (least important head). Paragraph format <p> is used for most body copy. You can specify preferred sets of type faces, relative sizes, color and bold/italic for any text element. In this step, we will use CSS, a feature of DHTML, to globally set type styles for specific elements anywhere they occur within our site.

• In the top header cell, type:
"[Your name]" then assign heading 1 format in the Properties panel, then hit Return
"Art 900 Portfolio" (assign heading 2)

• In the bottom cell, type:
"Home | Project 1 | Project 2 | Project 3 | Email" (assign paragraph format)

• Show Window>CSS Styles. Click the Attach Style Sheet button at the bottom of the CSS Styles panel.

In the File/URL field, type in "portfolio.css".

Click Add as Link to make it available to all pages in the site. (Import would write the style sheet into that one document only.)

You will be prompted that such a file does not exist. Click Yes to create it.

• In the CSS Styles panel, click the Edit Styles button (at the top) then the New CSS Style icon at the bottom.

• Click the Redefine HTML Tag button, then choose the <body> tag. This tag controls basic text formatting and other page properties such as background color.

In the Type category, choose a type family (such as Verdana, Arial, Helvetica, sans-serif.) Set the size to 11 pixels and the line height to 130 %. Note the proper units: pixels for size, % for line height.

In the Background category, choose a pale color. (You can choose a dark color, but then your text should be changed to a light color.) Click OK.

• Select the body style in the panel list, then from the panel options menu, choose Duplicate Style. Change the Tag menu to <td>. This will allow the body attributes to work within layout (table) cells. Click OK, and note the change to the paragraph format type in the bottom cell.

• Create two more styles as above, for the <h1> tag (enter a size of 24 pixels) and the <h2> tag (enter a size of 20 pixels).

6. Draw layout cells to contain the main content of the page

Draw a Layout Cell to contain bio text, approximately 320 x 400, centered between top and bottom cells and up against the right 50 pixel margin.

Switch to Standard View to add bio text. (Entering text while in Layout View can be very slow.)

• Switch back to Layout View and draw a 3 cells along the left margin to contain thumbnail images and descriptive text. each cell should be 225 x 100 pixels.

7. Prepare thumbnail images for rollovers

In this step you will:
Copy images from a Web browser window to your disk
• Resize, prepare transparent areas and Save for Web

Place a copy of your project files into your Work In Progress folder, or if unavailable, copy the image from the Resources page, as directed.

• In Photoshop, Open your Project 1 file (or project1example.jpg if your file is not available.) Choose Layer>Flatten Image.

• Use the Crop tool, set options to 100px x 100px, 72 ppi. Select an area to represent the image as a thumbnail, then crop. Double-click the Background layer in the Layers palette and name it "original".

• Zoom in to 400%. Draw a circular marquee (hold down Shift to constrain to circle) from edge to edge (simultaneously hold down the Space bar to move the selection as you're drawing it, to be sure to align the circle to all four sides.) Choose Edit>Stroke, and apply a 4 point black stroke to the inside of the selection. Choose Select>Inverse, then Delete the background to transparent.

• Duplicate the "original" layer, and name it "rollover". Choose Image>Adjustments>Hue/Saturation. Lighten and desaturate the "over" layer.

• Hide the "rollover" layer. For the "original" layer, choose File>Save for Web. In the 4up tab, experiment with different optimization settings. Choose a GIF option and check transparency to preserve the transparency around the circle. Save to your site images folder as project1orig.gif.

• Hide the "original" layer, and for the "rollover" state do a Save for Web. Save to your site images folder as project1roll.gif.

Project 2 — Save your Project 2 Illustrator file as PDF format. Open the PDF in Photoshop, and follow the steps above to prepare the thumbnail.

Project 3 — To grab a frame from your movie (when available) to use as a thumbnail, open the movie in Flash. Hide all Guide layers. Move the playback head to the frame you wish to copy. Press shift-command-4 and drag a marquee across the stage. A Picture file will be saved to your documents folder. Open that file in Photoshop, size and Save for Web.

• In Dreamweaver, click in the cell you wish to add each rollover. Click the Rollover Image button in the Common tab. In the dialog box, browse to your original file and then to your rollover file. Repeat for all three rollovers

8. Preview your page in a browser

In this step you will:
View a more accurate rendering of your page in progress using a Web browser.

Background Info: Dreamweaver does not provide an accurate preview of your page. You must view your page in a browser.

Do this: Choose File>Preview in Browser, and select either Internet Explorer or Netscape Navigator. Your page will open in that browser.

Note: If no browser choices are present, you will need to choose File>Preview in Browser>Edit Browser List... to tell Dreamweaver the location of the browsers installed on your hard disk. Click the + button and navigate up to the Desktop, then down through Macintosh HD/Applications (Mac OS 9)/Other Applications to Internet Explorer folder, then choose the Internet Explorer program icon. Do the same to add Netscape Communicator.

9. Duplicate your index page to create other pages for your site

In this step you will:
Use the Duplicate command to make copies of index.html

Background Info: The design already laid out on your home page will become the foundation for the other project pages in your site.

Do this: Save and Close "index.html". In your Site window, control-click on index.html and choose Duplicate. rename the resulting copy "project1.html".

• Change the headline text at the top of the page to "Project 1 - Big Print". Delete the thumbnails, bio text and their respective cells from the layout.

• Using the Layout Cell tool, draw a container to hold your project image, and another for text, which will include the title of the piece, the original medium, original dimensions, sources of appropriated material, and an artist's statement.

In the example, a cell height of 455 pixels was used for the image. Widths can be adjusted once the image is in place. The cell height for the text can be expanded as necessary.

• Save and Close project1.html, then duplicate it two times, renaming the copies "project2.html" and "project3.html".

10. Prepare larger versions of images and insert into project pages

In this step you will:
Use Photoshop to resize and optimize an image for the Web.

Background info: Preparing images for Web display includes resizing to actual display dimensions and resolution, and determining the optimal file format and compression amount to minimize file size while maintaining the desired level of quality.

Do this: In Photoshop, open your Project 1 file. Choose Image>Image size and with Constrain Proportions and the Resample Image options checked, type in 455 pixel Height. Set the resolution to 72 ppi (the resolution of all Web graphics.)

Choose File>Save for Web... Click the 4-Up tab to view the original and three other versions side-by-side. Select one of the three non-original versions and alter its file format and compression options. Choose the GIF or JPEG option that yields a small file size with the appropriate level of image quality.

NOTE: The following rule of thumb should be considered when deciding to use a JPEG or GIF format: Graphics that have flat areas of solid color work best as GIFs. Photographs or continuous toned images work best as JPEGs. You can modify the level of compression (JPEG) or the number of colors (GIF) to decrease file size, but make sure the image quality does not fall below an acceptable level. GIF (and PNG) is the only format which will preserve transparent areas.

Click OK to save the modified file to your images folder located inside your local site folder.

To place the image on your project1.html page:

From within Dreamweaver, click within the cell in which to place your larger project image. Click the Insert Image button from the Common tab of the Insert panel. Navigate to the correct image within your site/images folder and choose it.

• In Photoshop, open your Project 2 Illustrator PDF. Repeat steps above to prepare a larger version of the file and insert it into your project2.html page.

• For Project 3, publish your Flash movie to a .swf file. Place the .swf file in your site images folder. (Remember, Web file names cannot have spaces or punctuation.) Use the Flash insert button, instead of the Image Insert button, to place your project3.swf file into a cell on your projectg3.html page.

11. Create links as shown in the sample site

In this step you will:
Use the Point to File feature to link to a file in your site (relative link).
• Use the Property Inspector to link to a file or some other site (absolute link).

Background Info: You can create a hyperlink from text or from a graphic. Highlight the text or select a graphic. A Link field will appear in the Properties panel. Either use the Point to File cross hairs button to link to a file in your site (relative link,) or type the URL into the field to link to a page in another site (absolute link.)

Do this: Open index.html. Arrange the document window so that you can see some portion of the Site window behind it. Highlight the word "Home" in the links cell at the bottom of the page. Drag the Point to File button next to the Link field in the Properties panel to the index.html file listed in the Site window — just drag the pointer to any part of the Site window to bring it forward, then navigate to the proper file in the list.

• Link the Project 1, 2, and 3 text to their appropriate pages.

• Select the Project 1, 2, and 3 rollover graphics and link them to their appropriate project pages.

• Select the Email text. In the Link field type "mailto:" immediately in front of an email address (such as mailto:yourname@selu.edu. Use no spaces between the prefix and the address.

• Create the links on the other pages in your site. (In this example, you can copy the link text from index.html and paste it into the other pages, replacing the non-linked text.)

Note: To add an absolute link, such as from your project text to the site where you may have obtained inspiration or an appropriated image, select the text and in the the Link field type in the full URL to that site, such as http://www.art.buffalo.edu/.

12. Synchronize (upload) and test your site

In this step you will:
Use the Synchronize command to upload your site.
• Test your site for broken links or bad formatting.

Background Info: Test your site thoroughly, in as many different browsers and on different computer platforms, if available. When you are confident that there are no broken links and that all pages display as you like, proceed to upload your site to the Web server.

Do this: At the top of the Site window, click the Refresh button to see the Remote Site files in the left panel.

Choose Site>Synchronize… and change the Synchronize option to Entire Site. Leave the Direction on it's default, Put Newer files to Remote. You may also wish to check "Delete remote files not on local drive" to clean out any unneeded files on the remote server.

Click Preview, and review the files that Dreamweaver will upload from the local site (if newly added or edited) or deleted from the remote site (if no longer being used.) Uncheck any files that you do not wish to be included, if any. Click OK.

Test your site online. Sometimes, sites behave differently online than they do on your local drive. From your browser, enter the URL <http://dac.selu.edu/webwork/art290/[your_name]
index.html]>
e>Or follow the appropriate link to webwork from the top of any page in the Art 290 Web site.

Note: If you have not defined your site correctly, you might upload unnecessary folders, which will prevent the link to your site from working. Look at the hierarchy of folders and files on the remote side after you have synchronized. You should see your site folder at the top (with your UB IT name), and directly inside that will be your index.html page, project pages, and images folder. If you see something different, or if the link to your site does not work, you probably need to redefine your site and resynchronize.