Introduction to Web Design and Computer Principles

Framesets are HTML pages that let you “embed” other HTML pages inside of them. This technique was commonplace in the late 1990′s but has since fallen out of favor for a number of reasons, including browser support, mobile device issues and the inability to (easily) link to a page within a frameset.

With that said, here’s how to create a frames page in Dreamweaver:

1. Draw out your frameset on a piece of a paper before you start and make a note of how many frames you will be creating as well as their placement.
2. Create a new HTML page for each frame you will be creating. Name these frames something you will easily remember. For example, if you are creating a frames page with a sidebar and a content window you can create files named “frames_sidebar.html” and “frames_content.html”. Save these files in your Dreamweaver site.
3. Next, create a new HTML page but don’t save it just yet. This page will serve to “bring together” the pages you created in step 2. Click on View -> Visual Aids -> Frame borders. A black outline will appear around the edge of the canavs of your page.
4. Position your mouse near the edge of your page until you see a double arrow. Click and hold your mouse to drag a new frame border into your page. You can adjust the size and position of this frame border after you’ve created it.
5. If you’d like to further sub-divide your frames you can click in the panel of any of your frames and then select Modify -> Frameset -> Split Frame Up / Down / Left / Right to split your frame.
6. Next, open up the Frames Panel (Window -> Frames) – you should see a visual indicator in this panel that shows the layout of your frameset.
7. Click in a frame in the frame panel. Then go to the Properties panel at hte bottom of the screen and click the Browse button next to the “source frame” field. Browse and find the HTML file that you want to initially appear in that frame. Repeat this process for each frame on your page. Here’s a quick video that goes through this entire process.
8. Finally, click on the outside border of your frameset in the Frames panel. This will draw a thick black box around your entire frames page. With this visible, click the Save button and save your frameset as a new file (i.e. “frames.html”)

Frames and Hyperlinks

Hyperlinks behave differently inside a frameset. Unless instructed to do otherwise, hyperlinks will open up inside their contianing framset. You can override this behavior by setting up “names” for your frames and using the “target” attribute of the hyperlnk tag to control where the hyperlink will open. Here’s how to get started:

1. Make sure the Frames panel is open and that you are viewing your frame page in Dreamweaver.
2. Click on a frame in the Frames panel
3. In the properties panel fill in the “name” blank for this frame
4. Repeat this process for each frame
5. When you create hyperlinks you can select the name of your frames from the dropdown list under the “target” attribute. This lets you tell the browser what frame should open up the link in question.
6. If you want to create a link that overwrites the entier frame (i.e. takes the user away from your frames page) you can use the “_top” target.

Tables

1. You might have noticed that is can be fairly difficult to align and arrange content on a page using just HTML (i.e. <p> <br />)
2. Since the inception of the web, designers have searched for a way to easily arrange and position content in HTML so that elements appear in a pre-defined position when viewed in any kind of web browser. Tables initially filled this need since they are fairly easy to conceptualize and build. However, table based layouts can be difficult to maintain and update as a site grows larger and more complex.
3. Creating Tables in Dreamweaver
   1. Insert -> Table (window pops up)
      1. Define rows & columns
      2. Border thickness (a zero border thickness allows you to create invisible tables that can be used for positioning content without having to see the structure of the table)
      3. Padding (inside cell)
      4. Spacing between cells
      5. Accessibility options (the table’s header row will be read first to users who are utilizing a screen reader to access your page)
   2. Once a table has been created you can resize it by doing the following:
      1. Click upper left side of table to select it
      2. Grab the anchors that appear and drag your table visually
      3. You can select rows by mousing over the left edge of your table
      4. You can select columns by mousing over the top of a column
      5. Click and drag to select cells
      6. Command click non adjacent cells
   3. Altering a table (adding rows / columsn)
      1. Click on cell
      2. Insert -> Table Object
      3. Right click -> Table -> Insert Column / Row
   4. Merging cells (useful for creating grid structures in which cells can have different sizes)
      1. Highlight cells
      2. Right click, table, merge cells
      3. Example:
         

         Header
         Menu	Content

   5. Splitting cells
      1. Right click on a cell, table, split cells
   6. Using the properties panel on a table
      1. Select table, define table width.  You can use pixels or percent of the window.
      2. Setting the alignment (center, left, right) – note that you can’t wrap text around a table
   7. Using the properties panel on a cell
      1. Select a cell
      2. Horizontal text alignment
      3. Vertical text alignment (valign=”top” is your friend!)
      4. Background color
   8. Importing tabular data from an external source
      1. Example from class: contact congress site (http://www.contactingthecongress.org/downloads.html)
      2. Download CSV file
      3. File -> Import -> Import Tabular Data
      4. Sorting: commands -> sort table
   9. Exporting tabular data
      1. File -> Export Table
   10. You can also create tabular layouts from Photoshop or almost any other Adobe package. Here’s how:
       1. Create a new canvas in Photoshop (800 x 600)
       2. Construct a new layout visually using graphics, layers, effects, etc
       3. Use the slice tool to cut apart your design. The slice tool is under the same tool family as the “crop” tool
       4. Save for Web And Devices, maing sure to export Images and HTML
       5. Copy the HTML file you create along with the “images” folder that gets created into your Dreamweaver director

Rollover images

1. You can construct a basic rollover image for use on your site by doing the following:
   1. Construct a rollover PSD file in Photoshop. This file should contain both versions of your image (i.e. the image as you want it to look when the mouse is over the image as well as when it isn’t over the image)
   2. Save two copies of your image, calling one “image1_noroll.png” and the other “image1_roll.png”
   3. Import both images into Dreamweaver
   4. Click on Insert -> Image Object -> Rollover Image. Select your two images from your asset library when prompted.
   5. Note that your rollover image will only work when you preview your site in a browser

Framesets

1. Framesets are a very old-school way of laying out content on a page. They allow you to essentially create multiple web pages that are wrapped inside of “frames” that can be viewed at the same time.
2. Analysis
   1. + Easy navigation
   2. + Quick setup
   3. + Logical construction
   4. - Difficult to link to specific pages inside of your site
   5. - Accessibility issues
   6. - Difficult to style
   7. - Considered to be a very old / antiquated technique. They do carry a bit of a stigma in the larger web design world.
3. Steps to create a frameset page
   1. Create content as separate pages. Save each page indpendetly in your site.
      1. Header.html
      2. Welcome.html
      3. Navigation.html
   2. Create frameset page (the page that pulls all of your content pages together)
      1. Create new page
      2. Save it as “framepage.html”
      3. Draw frames
         1. View -> Visual Aids -> Frames
         2. Drag frames into position to create
         3. Modify -> frameset -> Split Frames to split frames
         4. Use the Frames panel to select the frames we created
         5. Assign them their initial HTML documents
         6. Give them all names
         7. Save & Test
   3. Hyperlinks and frames
      1. Use the target attribute when creating a hyperlink to specify where you want your link target to appear
   4. No Frames content
      1. Modify -> Frameset -> No Frame Content (will be rendered in browsers that don’t support frames)

Dreamweaver is a WYSIWYG (“What you see is what you get”) editor that assists you in writing HTML and CSS code. During our introductory session we covered the basics of using Dreamweaver, including:

1. We began by taking a tour of the Dreamweaver interface, which looks a lot like Photoshop with its extended panel layout on the right side of the screen. I mentioned that you could “reset” your panel layout in case you accidentally closed a panel or two by clicking on Window -> Workspace Layout -> Designer.
2. One of the most useful features of Dreamweaver is its ability to seamless switch between “code” view and “design” view. You can freely work in either or both views depending on the task at hand. You can switch between views using the “Code”, “Split” and “Design” buttons at the top left side of every Dreamweaver document.
3. Dreamweaver contains an integrated FTP client that is simliar to the Fetch application that we have been using to publish our work to the i5 server. You can use Dreamweaver’s built-in site management feature to create and manage your websites by clicking on the Site -> Manage Sites menu option. From there you can set up a new site using the following information:

   

   i5 server settings

4. Once you’ve set up a site you can use the “Files” panel (bottom right side of the screen) to view and edit your files. You can then use the “synchronize” button to quickly update your website using the most recent versions of your files (this works in both directions — you can synchronize and copy down your entire website to your computer, and you can also synchronize to send newer copies of your files to the server)
5. You can create new HTML documents using File -> New. Dreamweaver has a ton of built in templates, but for the purposes of the intro lecture we focused mainly on creating new blank HTML documents. If you have a site open your documents will automatically save into your site folder and will appear in the “Files” panel at the bottom right side of the screen.
6. Dreamweaver has a powerful “Properties” panel at the bottom of the screen. This panel is “contextual” meaning that it will change based on what is selected or clicked on. The properties panel allows you to apply basic formatting to text as wella s changing “Page Properties” (background color, default size for the H1 – H6 tags, etc)
7. Hyperlinks are easy to set up in Dreamweaver — simply highlight the text that you want to turn into a link and fill in the “link” text box in the Properties panel. You can also use the small “target” button to “point” to a file in your Files panel to visually create hyperlinks between documents.
8. Dreamweaver has a “Preview in Browser” feature under the File menu. This feature lets you test out your page in any of the installed browsers on your computer.