Unit 1 - Intro to Dreamweaver

My name is Peter MacFarland. I have only been using HTML and CSS for the past few months since I took IMED1318 in the Fall of 2013. Here is a link to the web page I created in that class: www.peteymac.com

First Website Contents

The website consists of several sections:

  1. A Poetry Section that contains some poems I wrote for a creative writing class.  Each poem has an accompanying picture that I programmed using the HTML5 canvas tag.
  2. A Tarot Section that gives an overview of the 78 cards in the Tarot deck, some basic spreads for predicting the future and finally, by using javascript, three cards are selected at random to predict the readers fortune.
  3. A Canvas Art section that uses an HTML form and the canvas tag to create canvas art that the reader can design themselves.  There is also two pages of galleries (one is frames based and the other is javascript).
  4. A "Fun" section that was my first attempt at using javascript.
  5. Finally, there is a link to my old site with pictures of my dogs.  The "Lolly" pages were built using Yahoo Site builder whilst the "Maggie" and "Zooey" pages were created while I was playing with Dreamweaver this weekend.
First Experience with Dreamweaver

My first experience with Dreamweaver was last weekend after I first downloaded CS6 to my computer and I was playing around with it to see how it worked. I created these two pages: Maggie and Zoeey. These are basic pages with just a couple of photographs which I did in 10 minutes. You will also see that I made a mistake and overwrote an existing "maggie" page because the link in the new website overwrote the existing "maggie" page. Ooops!

Root Folder

The "root folder" is a local folder on your computer that contains all of the files and images for a website that are setup in an organized manner. Defining a root folder allows for Dreamweaver to assist with the management of the site. A good example of an organized root folder would be the root folder containing the index.html and a number of folders organized like this:

  • A "CSS" folder containing the web page's style sheets.
  • An "images" folder containing the web page's pictures.
  • A "pages" folder containing the other web pages for the site other than the index page.
  • A "scripts" folder containing the web page's javascript or other scripting language code.
  • A "raw" folder that would contain unedited data for the page - an example being if I had a large picture on the site, I would store it here and then save the edited version in the images folder.
Site Management

Here are a few important points on Site Management:

  1. Dreamweaver will automatically update file paths and file names if a file name should be changed or moved to a new place within the site.
  2. Dreamweaver will issue a warning if a file is being deleted that will result in a broken link within the page.
  3. Dreamweaver can easily publish a site by simply dragging and dropping the files from your local directory to your remote directory, or by using the "put" option.
  4. When a new page is created, Dreamweaver will know where to save it.
  5. Dreamweaver can go through all the links within a site and will advise which links are broken and that allows the web master to easily correct them.
Videos and More Videos

The first videos I watched on Dreamweaver were from the Adobe help site. This was the one I found the most useful as it takes you through a step by step processing of building a website in Dreamweaver. How to make and style a web page in Dreamweaver This tutorial which I am using to build this site, takes you step by step from setting up the site in Dreamweaver, adding the text and images, then finally formatting the pages using Dreamweaver. There is even a download with a sample web page and sample CSS.

Some of the things I learned from these videos include:

  • How to set up a site in Dreamweaver.
  • Using the "Insert" menu to add tags, links, images and lists.
  • Using the "Properties" menu for changing the look of the page with formatting tags and CSS.
  • Using the CSS Designer to add an external style sheet.
  • Using Manage Fonts to add a web font to a page.

So, I have been using "split" mode to build this page. I am trying to type in the "design" side and watch as the code gets built. However, I am so used to hand coding, I keep finding myself in the "code" side typing in the content between my paragraph tags. I am trying hard not to go into the code view and add the HTML codes which is what we did in Notepad++ in IMED1318.

I also watched three videos on youtube by Mike Sloan who teaches marketing and uses Dreamweaver to build sites. He spends a lot of time talking about how to organize your files in Dreamweaver. It was his idea to use the "raw" folder. He also advises his students to get pre-built CSS templates at freecsstemplates.org which look a lot like wordpress blog templates. One of the good things about his videos is that he goes along pretty quickly and makes mistakes which he shows how to correct after Dreamweaver finds them for him. I have embedded the first of the three videos here if you want to watch it.

Design View

I don't use "design" view to see what my site will look like with a browser. Design view includes dotted guide lines where different HTML elements are blocked. "Live" view shows how the website should appear in Google Chrome. As different web browsers may render HTML code differently, it is best to click on the world icon (next to the "Live" button) and a drop down menu appears where the website can be viewed in different browsers including Google Chrome, Internet Explorer and Mozilla Firefox.

New Pages in Dreamweaver

The page has three additional pages I created in an attempt to learn Dreamweaver. The links are at both the top of the page along with in the footer. I got the idea for the footer from the videos I saw by Mike Sloan above.

  1. Jewelry - A collection of images of jewelry created by Pim. I used "figure" to insert the pictures and then tried using caption as a text are which as not a good idea.
  2. Cookies - A page about store brand cookies with links - Another attempt to use "figure" I found that adding the links in Dreamweaver is much easier than hand-coding.
  3. Dames - Bio's on all my favorite English Dames knighted by the Queen. This time I used "image" to insert the pictures and was able to get the text to float around the images much easier.

I have also added two additional pages where I took two short stories I had written for my Creative Writing class and added pictures and made them web friendly. One of the stories is about a Tarot Card reading and the other is about my dog, Lolly Cakes, who died of cancer.

Hope you enjoyed this page.

-Peter