Dreamweaver Assignment 7 – Adding Text Content

Photo credit: Meredith Harris, uploaded via Flickr, Creative Commons License

7.1 Typing, Copying/Pasting, or Importing Text:

Like most any application running on current operating systems, Dreamweaver supports copy and paste functions that enable one to easily transfer text from another document into one’s webpage.  One can paste text directly into the design window of a document, and the associated code is automatically inserted into the code window. 

However, we are advised that this is sometimes problematic when copying text from MS Word, as there is often extraneous code that comes along for the ride, cluttering-up one’s code window.   When copying text from Word, our tutor suggests that we take advantage of the Edit => Paste Special option, which allows us to throttle the level of formatting carried over from the Word document, or eliminate the formatting altogether and simply paste the ASCII characters into our web document.  We can then reformat our text as we see fit from within Dreamweaver, thus relieving ourselves of unnecessary hodge-podge in our html code window. 

Alternatively, there is a baked-in clean-up filter available on the Commands menu (Clean Up Word HTML), which is supposed to do the job for us, although we were not treated to a demonstration within our training video.

7.2 Setting Headings:

Here we look at the process of tagging headings on our page.  Creating a heading is more that simply making a paragraph title in bigger and bolder text.  While a human would instantly recognize big, bold text standing alone atop a paragraph as a heading for the content therein, our less sophisticated computers and software are somewhat less perceptive.  Adding a heading tag designates text as a header for the benefit of screen-reading, web-crawling and content-scraping software applications, in addition to enlarging and emboldening the text for the benefit of us carbon-based meat-bags. 

The HTML standard allows for a hierarchy of six levels of header text.  Designating text as such involves simply selecting the desired text and than selecting the appropriate header designation (h1 – h6) from the Format drop-down box in the Properties panel. 

7.3 Creating Lists:

Creating a bulleted list of items in Dreamweaver is done in much the same way that one would do so in MS Word.  The only trick is to be certain that the list of items to be bulleted each must be enveloped within paragraph tags (<p> list item </p>).  If items are separated only by a line break (<br />), they will be combined into a single bullet. 

Assuming one has properly delineated a set of list items, one may highlight said list and click on the bullet icon (unordered list) or number icon (ordered list) in the properties panel to create the list.  Note also that the increase indent and decrease indent are present in the panel as they are in Word, and function likewise.

Finally, we also note that the lower half of the properties panel contains a button labeled List Items…, Here we can choose options such as choosing between bullets and numbered lists, types of bullets or numbers, and so forth.

7.4 Bold & Italics:

To format text as bold or italic, simply select the desired text, and click on the bold or italic icons in the properties panel, or on the text tab of the insert bar.  Emboldening text adds the <strong> tag, whereas italicizing text adds the tag <em> (emphasis).  These tags are evident in the code window view, and can also be added manually if so desired.

7.5 Special Characters:

Adding special ASCII characters to page content is achieved through the insert menu or insert bar.  Characters such as copyright, trademark, or certain foreign currency symbols can be found by selecting Insert => HTML => Special Characters.  

Also in this section, we note that characters or character strings can be highlighted, then dragged and dropped about the page in either the design or code windows.