Dreamweaver Chapter 4

If you were to visit the homepage of my developing Web site, you may have guessed that green is my favorite color. It does not matter what hue it comes, I tend to derive a sense of peace and confidence from it. Who knows, maybe my baby nursery was green and it subliminally conjures happy and sweet memories. But whatever it is, I am glad we are at this point that we can change the background color of our Web page. 

To make the changes to the background colors, I clicked on the individual areas of the index page. For example, the first place that I edited was the area next to where my logo is located. Since I was not sure what class this area was referencing, I clicked on it and looked for the class in the Properties tab located at the bottom on the Dreamweaver page. I discovered that all its formatting rules originated from the class “header.”  I then went to the CSS Styles panel on the upper right hand corner and double clicked on header.  From there I chose “Background” under category field and looked for a new background color from the fly-out swatch that appears when you click on the down arrow. 

I poked around a bit to see which colors would work form me.  I chose #696, which is a green with a slight yellow tint. I made note of the number because I wanted to use the color again somewhere else on the index page. As it turns out I did use the color in the container and the navigation panels; this gave the page a finished and coordinated look.

I also wrote a little “Breaking News” for February 25, 2012. 

To follow my progress, here is the link to my Website http://www.vlayag.com/ .  

Pencil Animation

Okay, I could not find the tutorial for how to make the pencil stop at the end of the page.   So I thought, since we did create a third layer labeled action, there must be an action that must be scripted for the animation.  Scripting animation is something that I do not know or much less evenly remotely familiar.  However, I was determined not to have my pencil exhaust itself drawing the same line over and over again. 

What I did was locked down my line layer and then chose the action layer.   I then went to the Properties panel and clicked on the Code Snippet icon.  From the fly out window I chose Time Line Navigation and with the timeline at the last frame, I chose Stop at This Frame selection.  This seemed to do the job.  See video below.  

Dreamweaver Chapter 3

I love to play with fonts and formatting the text properties in my documents, so it makes sense that this would be the case for my Web site. Okay, Web sites can be loaded with an assortment of mixed media such as video, audio, and images as well as countless links to other utilities. Nevertheless in spite of its pretty trappings a Web site is not worth its weight unless the text is formatted in a way that it not only attracts visitors but keeps them glued to the site. The amount of time the visitor spends on the Web site is called stickiness and is an important factor in determining the site’s success. 

This week we learned to make changes to font types and text properties. I can make inline changes to the text, but I was more excited about editing the Cascading Style Sheets (CSS) to make sweeping changes to my one page site. I did this by creating a new CSS style and named it “Heading.”  This will be the style I want to use for all my headings whether they are h1 or h2. For example, I love using small caps for titles and headings. I think it distinguishes it from the rest of the text and draws readers’ attention that new subject is coming up. 

There was one issue that had me returning to my “Heading” style and that was the small caps option was not showing up in the Dreamweaver design view. I finally uploaded the new index file and the change did show up in the Web version. What I learned from this is to always check on Web preview to see if all the editing that was done looks as it should on a browser. 

Dreamweaver Design View

If you notice in the picture above, the small caps option I chose for my "Heading" CSS is not reflected on the Dreamweaver design view.  

Chrome Browser View

However, when I uploaded my changes to the Web server, it displayed the changes I made to the "Heading"  CSS.

To follow my progress, here is the link to my Website http://www.vlayag.com/ .  

Dreamweaver Chapter 2

This week we had to learn how to add an image to our Website.  For this lesson we used a logo as our image since most businesses of any type require a logo to graphically associate their business.  Again, I am not selling a particular product, what I am “selling” is a service.  I had to think of how I can take this service and assign it a graphical symbol.

I took note of the Professor’s advice that the business logo will be associated with your brand and should be original.   But for this exercise, I created my logo that incorporated part my creation and the other an image of a computer from MS word clipart library.   I like the concept and will build one similar to it, I would eventually like to use Photoshop and Illustrator to create my logo. 

The picture size was 497 x 193 and did not fit proportionately into the default logo box which was 20 x 90.  So in order to make my logo fit, I followed the directions to create a new CSS rule and made the adjustment so that my image will fit.   Web 2.0 has made Web sites more dynamic and interactive and to this end, I will be adding original images to the home page just so that it is not so text heavy.   Again, it is determining what images will work and add to the Web content (person sitting at the computer is so overdone) that is probably the most difficult part of this project.

To follow my progress, here is the link to my Website http://www.vlayag.com/ .  

Dreamweaver Chapter 1

Last week I was so exasperated trying to upload my files to the site server; I forgot to write a blog about my Chapter 1 experience.  Let me start at the end and work my way to the beginning.  After several calls to liquidweb support for help on how to upload files through Dreamweaver, they finally admitted that they were not familiar with the file transfer process in this application. I finally gave up and successfully uploaded my files through Filezilla.  However, I would still like to be able to do it through Dreamweaver; so if anyone has suggestions, please share.

Well anyway let me get back to the beginning.  Writing content using Dreamweaver was very simple.  Trying to come up with a subject for my Website was not so easy, and it took me several days to figure that out.  Finally, since I am somewhat obsessing over learning Dreamweaver and Flash, I figured that I can build a Website that will chronicle my experience with Dreamweaver and Flash and other subsequent Adobe products I may endeavor to study.  It will somewhat mirror to my blog, but with less commentary and more instructional dialogue.

In addition, I would also use videos, similar to what Professor Ferre did on Angel, as part of the instructional tool as well as instructional pdf booklets for the user to download and print if they wish to do so.   It is ambitious but I would like to make a go of this and then hopefully share it with other users at my job but with the specific applications used in the district. 

Below is a screenshot of the UI for the Filezilla FTP site.  I had to drop all my files into the “public_html” folder in order to publish my site.  

Screen shot of the Filezilla FTP site