Text, layout, styles, and links

• Goal for today
• Reminder about URLs
• Couple of random notes
• Review of Dreamweaver components
• How to Download your web site to a different computer
• Issues involving multiple sites
• Demonstration of some formatting techniques
• Hands-on assignment

Goal for today

Download the web site you created in the last lesson. Update one or more of the pages by adding the following:

• A title
• Several layers of headings
• A background image
• A table with different color cells
• Text examples that are centered, right justified, different font, smaller sizes, larger sizes, various colors, indented, bulleted, and numbered
• Several internal named anchors and links to those anchors

Upload the page to the server. Show your mentor your finished page using a browser.

Back to the top.

Reminder about URLs

IMPORTANT: There are two different addresses that must be kept in mind (and differentiated) when dealing with a web site. There is the URL (the http:// address, such as http://cuip.uchicago.edu/~cac/junk/) and then there is the FTP address, which in this case is ftp://cuip.uchicago.edu/home/cac/www/junk/.)

You use the HTTP address for BROWSING to the site.

You use the FTP address for PUBLISHING the site, or for downloading it using an FTP program such as Dreamweaver, Fetch, or WS_FTP.

Now, tell your neighbor your two different addresses for the site you created last week, the URL and the FTP address. Check each other to make sure you have these right.

Click here for a brief diversion on Funny File Names.

Back to the top.

Couple of random notes

• If you lose your palettes off the screen, choose Window|Arrange Panels to get everything back onto the screen.
• In the Property inspector, there is an expander arrow which often hides additional properties:

  

Back to the top.

Review of Dreamweaver components

Page layout view: status bar, launcher

Palettes:

properties (note expansion arrow), objects, launcher, reference, styles

Site files view

Site map view

Define sites dialog boxes

Back to the top.

How to Download your web site to a different computer

Once you've uploaded your site to the web server, you can then DOWNLOAD it to a different computer and continue to work on it. The key is to make sure the settings in your REMOTE INFO in the "Define Sites" dialog boxes are correct. (The settings for Local Info can change as needed, to a folder on the new computer's hard drive, except the HTTP address should be the same each time.) Here's what we entered last time:

Once you've set this up, you should be able to "connect" to the remote site using the button. Then (assuming you've set up the Site correctly) highlight the highest-level folder in the remote site and click the green "Get" button: .

Back to the top.

Issues involving multiple sites

• You can use Dreamweaver to manage an infinite number of web sites. Each one is separately defined in the Define Sites dialog boxes, and will appear as a list on your drop-down menu in the Site Files view:

  

• Make sure that the Site Name and "Local Root Folder" for each site is different.
• You can define a site that is a subset of another site, by defining the Local Root Folder as a sub-directory of another site's Root Folder. You might want to do this if you're working on just a portion of a bigger site.

Back to the top.

Demonstration of some formatting techniques

Links

entering manually

(DANGEROUS--why? Because you may get confused about absolute vs. relative links. better to have Dreamweaver build the link URLs for you. Dreamweaver will also automatically change these if you move or delete files in the Site View.)

• absolute vs. relative links
• absolute links: list complete URL; required for documents on external servers; may break if pages are moved within site
• document-relative links, most often used for local links
  • for files in same directory as current page, just give file name
  • for files in "parent" folder, precede file name with ../
  • for files in another subfolder of the parent, use ../anotherfolder/anotherfile.htm
• techniques
  • use property inspector
  • type in name of file (for local file in same directory)
  • type in path to file not in same directory

using folder icon

For example, to link THIS to a file, click the folder icon on the property inspector: , then choose the correct file in the dialog box:

Dreamweaver automatically fills in the correct Document (or root) relative URL.

using file pointer



• Click and drag the cursor to the site files window; when pointing to correct file, release (COOL!!!!)

  
  

• Can also highlight text or image you want to link FROM, then hold down shift key, click and drag to filename, window, site files list:



 

• 

Back to the top.

anchors

• named anchors (also called targets) are places within a web page to link to
• to create, highlight a word or click cursor
• use Insert menu, Invisible Tags, Named Anchor, or Ctrl-Alt-A (PC) or Ctrl-Opt-A (Mac)
• type name if necessary
• appears as:
• to link TO the named anchor, type "#" and its name in the Link field
• or highlight the FROM text/image and hold down Shift, click and drag to anchor
• Use anchors to create a menu for your page; see example

email links

to create an email link (when clicked, pops up email box), type "mailto:c-cunningham@uchicago.edu" into Link field.

or use Insert menu, then Email Link

Text

justification

• left, center, or right align
• Use property inspector and
• or use Text|Align
• or use CTRL-ALT-SHIFT L, C, or R

size

Font size is always defined relatively, since each browser may have a different default font size

Can use property inspector: , and set size to 1 to 7 (which represents a scale with 3 as the browser's default), or use -1 to -7 for smaller sizes and +1 to +7 for larger sizes. (But the largest displayable size is +7. So you if set a font that is already big (say, a heading 1) to +7, the entire effect will not appear. Here's a paragraph from the Dreamweaver help that explains this better:

These numbers indicate a relative difference from the base font size. The default base font value is 3. Thus, a +4 value results in a font size of 3 + 4, or 7. 7 is the maximum sum for your font size values. If you try to set them higher, they display as 7.

Can also be defined in a Cascading Style Sheet. (Not covered in this session.) CSS's allow specific pixel dimensions (and various other font attributes) to be assigned to all instances of a given style appearing in a document. To find out more about CSS, see http://www.w3.org/TR/REC-CSS1

headings

Available headings are (from largest to smallest) Heading 1 through Heading 6. Heading 4 is the same size as regular type, but bolded and with space before and after. Use property inspector: or Text|Paragraph Format.

Can also set using CTRL-x, where x is the level of the heading. CTRL-0 sets to none. CTRL-SHIFT-P sets to paragraph format.

(NOTE: Paragraph format is different from "no format", in that space is inserted after paragraph format but not before "no format".)

fonts

Must specify a font found on the client's machine. Fonts generally fall into families, and browsers will substitute some fonts for others. Thus fonts in HTML are known as "Font Combinations" to indicate the fonts combined together into families.

Dreamweaver uses these combinations by default:

• Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif

Note that the last two and the first two are similar. Georgia and Verdana are typefaces specifically designed for the web, but still not in widespread use.

You can modify the font combinations in Text|Font|Edit Font List.

For example, for this paragraph, I made a new font combination, Agency FB, Alleycat ICG, Bauhaus 93, cursive. It may not show up on your browser as any of these, if the named fonts are not installed.

styles

Can add bold and italics using property inspector, or can add other styles using the Text|Styles menu. Can be applied in combination. Examples


underline

strike-through

teletype -- a monospaced font

emphasis -- the official version of "italic"

strong -- the official version of "bold"

code -- used for HTML or other programming code

variable -- used when listing HTML code or programs

sample -- used to display text to be entered

keyboard -- used for text that has been entered

citation -- for sources

definition -- ???

Back to the top.

colors

Dreamweaver automatically uses "browser safe" colors in its color pickers. You can override this by choosing the color wheel from any color picker and choose any color, and to add it to the custom colors available. But be warned that these colors won't usually work.

To set a text color for a specific piece of text, highlight it and use the color picker on the property inspector:

Can also use Text|Color to reach same color picker.

To change the default color for the entire page, go to Modify|Page Properties and change the Text color:



 

lists:

bullets

• Create your list, then highlight list, then use bullet button on the property inspector:
• Can also hit "enter" to go to new line, then click bullet button and start your list.
• Can also use Text|List menu selection. (NOTE: "ordered" means numbered; "unordered" means bullets.)

numbered list

3. Create your list, then highlight list, then use numbered list button on the property inspector:
4. Can also hit "enter" to go to new line, then click bullet button and start your list.
5. Can use "List item..." button on property inspector to change to square bullets, or to use letters instead of numbers, or to start list not at 1. (This list, confusingly, starts with C.) Note that this button is only available if only ONE of the list items is selected, or no text is selected but the cursor is on the list.)

indentation

Use the buttons on the property inspector, or CTRL-ALT-[ and CTRL-ALT-].

Uses nested "blockquote" tags to create indented sections of the document.

Can be confusingly additive (or not).

If your text is not aligning to the left as you suspect, then DIV tags are probably involved. (Use the tag inspector to see if there are any floating around.)

Back to the top.

Images

How to copy an image from the 'net:

• Right click (or, on a Mac, hold down mouse button)
• Pop-up menu includes "Save this image as...."
• Save as... dialog box opens; browse to the correct folder
• make sure image has appropriate extension (.jpg or .gif)
• REMEMBER where you put it!!!

To insert image into web page:

• Use Insert|Image.
• Browse to the image, click OK
• image is inserted at cursor
• to alter displayed size, change "W" and/or "H" in property inspector. NOTE: if you change both, you might alter the proportions. To avoid this, delete one measurement and change only the other. Changed sizes are displayed in BOLD.
• Enter text into "Alt" for those with images turned off while browsing.
• Images can be linked to other images or pages.
• Dreamweaver allows you easily to create image maps, with different links for different sections of the picture, and behaviors assigned to these areas
• Tables are good ways to arrange pictures on a page, as in this page.

Backgrounds/colors

Modify|Page properties

Good to include a left-hand margin in all your pages, about 10 pixels.

Default colors for text, links, visited links, active links

Color for background

background images

tracing image: used only as a guide for placing elements (I don't know what for!!!!)

Back to the top.

Tables

• Consist of rows, columns, and cells
• Tables allow careful positioning of elements on a page
• Can also use Layers to position items
• Can nest tables within tables
• To insert, use Insert|Table, then specify rows, columns, padding (within cells, between content and the border) and spacing (between cells); also specify width of table in pixels or percent of browser window, (if desired) and border width (0 for no border)
• Use Tab or arrow keys to move between cells for adding text; if you press Tab at the end of the table, a new row will be added.
• Can import data from delimited format (useful for making table from existing data created in another program)
  • for example, I've created a tab-delimited table of participants in WIT 99, available here.
  • Choose the link just above and then File|Save As..." and put it (with .txt extension) into your local root folder.
  • Then choose File|Import|Tabular Data. Make sure settings are correct for Tab-delimited, and then hit OK and voila: this table:

  • Firstname	Lastname	Department	School
    Elaine	Agusto-Laster	Library	D.H. Williams
    Kiley	Allen		Ariel Community Academy
    etc....

• Can set individual cell background colors and images, and the color of text.
• Selecting parts of a table can be tricky. Here's some relevant text from the Dreamweaver help:

  • Selecting table elements

    With a single gesture you can select an entire table, row, or column, or a contiguous range of cells within the table. Once the table or individual cells are selected, you can do the following:

    	Modify the appearance of selected cells or the text contained in them.
    	Copy and paste adjacent cells.

    You can also select multiple nonadjacent cells in a table and modify the properties of those cells. You cannot copy or paste nonadjacent cell selections.

    To select the entire table, do one of the following:

    	Click the top left corner of the table, or click anywhere on the right or bottom edge.
    	Click once in the table and choose Modify > Table > Select Table.
    	Click once in the table and choose Edit > Select All.
    	Position the insertion point anywhere inside the table, and select the <table> tag in the tag selector at the bottom left corner of the Document window.
    	Selection handles appear around the table when it is selected.

    To select rows or columns, do one of the following:

    	Position the insertion point at the left margin of a row or at the top of a column. Click when the selection arrow appears.
    	Click in a cell, and drag across or down to select multiple rows or columns.

    To select one or more cells, do one of the following:

    	Click in a cell, and drag down or across to another cell.
    	Click in one cell and then Shift-click another cell. All of the cells within the rectangular region are selected.

    To select nonadjacent cells, do one of the following:

    	Press Control (Windows) or Command (Macintosh) and click in the table to add cells, rows, or columns to the selection.
    	Select multiple cells in the table, and then press Control (Windows) or Command (Macintosh) and click cells, rows, or columns to deselect individual cells.

• Example of a completely useless but complicated table:

this column has no size attached to it	this column is 200 pixels wide	This is a table within a table the border of this table is set to 1 but spacing is set to 5 this cell border is set to red this cell has its own color and a different color border (but you can barely see it)
here's another table within a table this one also has three rows and columns but no border this table is centered within the cell	This cell has its own color. This text has its own color	this cell as an image in it
these three cells are merged (Table is set to 80% of window)

 

Back to the top.

Hands-on assignment

Goal for today (reprise)

Create a web page that contains the following:

• A title
• Several layers of headings
• A background image
• A table with different color cells
• Text examples that are centered, right justified, different font, smaller sizes, larger sizes, various colors, indented, bulleted, and numbered
• Several internal named anchors and links to those anchors
• Upload the page to the server
• Show your mentor.

Back to the top.