Image Map

In addition to using text to hyperlink, I switched it up a little and used an image map with hotspots; this located in Board Members page of my site.  The photo I chose was suppose to be tongue and cheek.  Since the theme was Old Time Photography, I used a photo of some old time photographers to graphically represent the trustees of the club's board.  If you hover your mouse over some of these gentlemen and then click, it will send you to their bio on the same page. 

My New Web Site

I just finished my Web site. Although I am using the same domain name, the site has totally been reconstructed. Please visit and poke around a bit.  Also use the Membership application form to leave a comment about the site. I will write some subsequent posts on the technical aspects of building the site.  


I do want to begin by writing about how I got to the theme of the Web site.  I really was not too happy with my first idea, which was the chronicling of a novice Web designer using specific software. For this reason, I decided to use the previous site as a way to complete the tutorials and then start all over with a new Web site for my project. 


After a week or two, I came up with the idea of a group of people wanting to preserve an art form that is becoming extinct and this is film photography. Kodak's January 2012 bankruptcy claim is the testament that this art form will to die off soon since the largest film manufacturer will no longer be there to support it. However, I have a great deal of respect and admiration for diehards not wanting to relent to pixels, so here it is the  theme of my Web site; a film photography club. I am just sorry that this is fictional.  I have not been in a darkroom for over twenty years and would really like to pick it up again ( I still have my stainless steel developer cans and my Nikon FM10 SLR).  I wish there were such a club in my town.  Maybe when I retire I can start one.  


Well anyway please visit and here is the link:  http://www.vlayag.com/ .  

Godzilla Files

I loved the idea of being able to make animated graphics with Flash, although I have only made two so far.  One the button which worked great providing I don't add the doorbell chime and the other was the pencil.  The button was killing me and I could not leave it alone and double checked my code as Katy's suggested.  So far it is still not working.  I have abandoned this for now and moved on.


So off to the next tutorial, which was how to make a video for the Web with Flash.  Super cool since I wanted to incorporate a video in my blog. This was going  to be a 4 minute presentation  heavy with graphics and other videos and some text and a soundtrack of me narrating.


I used Prezi, a presentation software to create the show and then used Jing to record the slideshow presentation with a soundtrack.  I really liked the way it turned out, but the file was huge 182MB large and it would not play smoothly on my blog.  I thought maybe it was the photos, but Prezi automatically compressed the images into smaller file sizes.  I found out from a friend that SWF are typically mega-large and are really not Web friendly for videos.  Now off to make the file smaller and optimize it for the Web.  I thought since Flash creates SWF files it might open them to make it editable.  It did not UGHHH!!!!  I scouted around for free software and found one that I was able to reduce the size to 30 MB.  Wow...now that's compression.


Here are the links to Prezi and Jing.   They are super neat tools that help with incorporating neat features to your blog or Web site.

Prezi Presentation

Jing Screen Capture

An Interactive Feature-The Feedback Form

Click on this link http://www.vlayag.com/ to see my Web site progress.  Also, it would be great if you can fill out a feedback form.

The Most Annoying Button

I just added sound to my button.  The problem I am having is that it will not sync with the event handler  Mouse Click Event.  The bell begins to ring as soon as the test window opens and does not wait for a mouse click.  In addition, the sound plays differently from the original file and repeats itself.  Eventually it does end.


Below is an example of what I just described.  I think I may have just annoyed everyone here at home including my cat.  He usually sits with me while I do my homework. If anyone has any suggestions please write back.  Thanks.

Hyperlinking

Sorry about last week, it was hairy at work and I had to work too many hours!!! Thankfully this week was a little easier, and I was able to complete the “make your Web site somewhat dynamic lesson.” I am very excited since hyperlinking is how the World Wide Web works. To find what we want, we jump from one Web page to another Web page using hyperlinks. In this exercise I used both absolute and relative URLs. 

Take a look at the properties panel and you will find the Target field.
For this link I wanted the new page to  open up
either in a new tab in Chrome or in a new window in Explorer.

I added the absolute URLs in the logo image and two of the four text links in the navigation pane. The addition of the link for the logo image was pretty straight forward. Since, I wanted to credit Microsoft for the image used on my site, I linked the MS Image Web page to the logo image field. As for the navigation links, I edited the text first and then added the links. I also played around with the Target field located in the properties panel. The target controls how the link page should behave when called. There are five choices in the drop-down field; I discovered that three of the five behave the same way; the linked paged replaced the current page.  The other two, _new and _blank opened the linked page onto a new tab in Chrome and a new page in Explorer.  

The relative URL needed a little more work and was not as straight forward as the absolute. Here I had to direct the hyperlink to exactly where the file for my pencil project slide show is saved. In this case the folder is labeled animations; I also created folders for images and another for background.  This may seem too much organization, but as I add multiple pages to the site this will allow me to easily locate elements for the individual pages of my site. The image on the left shows my simple folder structure in Dreamweaver.  I will most likely add more folders as I add more elements to the site. 

Note:  Follow my Web site (www.vlayag.com) progress and read my breaking news for March 11, 2012.  

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

Section 1: Welcome to Flash

I knew that Flash was a major contributor to many Websites’ interactivity, and there are Websites that display some pretty heavy duty interactive features. After taking an HTML class that touched on some JavaScripting, I had some trepidation about taking this class. My fingers bled as did my eyes as I typed what seemed like thousands of lines of code just so that I can add a countdown clock on my Website. After watching the introductory section of Flash, I am looking forward to creating interactive features into a Website project. I did not realize how this application makes a typically laborious task easier while producing results that are professional looking. 

The first section introduces the user to what Flash does and its uses as well as giving us a tour of the interface and workspace. Although there were parts that appeared over simplified, I really appreciated that they did take this much time to go over what is often an overlooked part in many other training environments, the Welcome Screen.

This is what you see when you first execute Flash.

Above is a screenshot of what the user will see when they first open Flash. From here the use can navigate to what task they want to employ; for our first lesson we were instructed to choose ActionScript 3.0. However, this view also gives you the option to open previous projects, other scripting languages, and templates. I would highly recommend that a beginner not disable this feature yet.  

Default View with Essential Workspace chosen.

Veronica's Work space view.

This second screenshot displays the default view. Please note that the workspace is named Essential (located in the upper right hand of the tool bar) and only show the most commonly used panels and tools. In the next screenshot, I customized my workspace and named Veronica Work Space. 

In addition to the work space and interface, the first section covered the type of file extensions that can be used for Flash documents including open standards such as gif, jpg, and html.  With this knowledge, we will make a go at it and see what we can create.  

Basic HTML in Dreamweaver

I took an HTML class last year and used NotePad++, a free text editing application, to write the HTML code for our project Web sites. It displayed line numbers and assigned text colors that identify what type of HTML code is being written. In addition, it allowed the code writers to preview the page in a variety of browsers. Dreamweaver takes this concept and gives it an extra mega shot of vitamin B12. I know we were learning to write basic HTML, but I would love to have been able to use this application as well. 

This is some powerful Web authoring tool. Below is my screen shot of the two ways the basic HTML page can be displayed in Dreamweaver. Please note that I did my writing in the design view.  This WYSIWYG (What You See is What You Get) feature is the feature that probably attracts many Web designers to use Dreamweaver.   

For me, I was able to focus on the content of what I was writing rather than making sure that I used the correct tags and that they were opened and closed appropriately. The default view has the version of the HTML used in the document, the initial elements, and the start and end <body> element tag already written in.  All I had to do at this point is to type in the design panel. The code panel was being populated with the elements that I was adding to the page. Because I did have some HTML training, I can also make some editing to the page by using the code view if necessary.  

Screen Shot of Code and Design View in Dreamweaver

My First Blog Post

Hello all and welcome to my first blog.  This is the first week of class and I found myself already behind .  I am typically more organized than this, but there were a few glitches in my life that disrupted my typically prepared self.


Well anyway, what I learned this week though is getting this blog set up is not as hard as I thought.  I love to read blogs, but have not considered setting one up (I have never been one that shares thoughts, ideas, and feelings outside of my small circle of friends and family). Since this blog is for sharing with my classmates and Professor, I hope that we can use this forum to collaborate and inform each other about this class and the projects we will be engaged in.  I am looking forward to working with all of you.


If anyone is experienced in this forum and can offer suggestions, I would welcome it.