Sep 21 2010

Tara and Matt’s wedding – Sept. 11, 2010

It was a beautiful day made even more special by Tara and Matt’s wedding. There was champagne to start the day, a beautiful ceremony and a fun reception. Kerin and I had a wonderful time capturing the images from the day. Below is a small sample of the day.


Jun 1 2010

Tara and Matt’s engagement session

The weekend before I left, Tara, Matt and I met at Valley Green to take some engagement photos. I hope you enjoy viewing them as much as I did photographing them.


Apr 3 2010

China

Not exactly a wedding post. But we thought you might appreciate some of the photos from Kerin’s recent business trip to China. The images are from Beijing, Xian, The Forbidden City, the Terracotta Army and the Great Wall.


Jan 31 2010

Finally some images!!!!

I thought it was time to put up some images. These are from the Philly Photog Shootout. Over 40 local wedding photographers came together to experiment with out techniques. It was a cold windy day in December. I am glad I didn’t have to take my coat off. My hat is off to our models. We met at City Hall and shot for about 3 hours. Here are some of my favorite images from that day.

OB1F0101blog

OB1F0074blog

OB1F0196blog

OB1F0039blog

OB1F0215blog


Dec 10 2009

Adding a Logo, Footer and Slideshow

Whew! I am glad we are through the DIVs. They are going to be an integral part of the rest of this series. If you don’t understand them, take a moment or two and go back over my previous post.

 

Today’s goal it to add a Logo image in the upper section of the page and to add a footer to the bottom of the page.

 

This will require an image for the logo and some text for the footer. You should determine the exact size of the image in pixels. I used Photoshop. Both these elements will be enclosed within DIVs. The DIVs will have an ID so that we can style those elements in the css file.

 

Here goes.

 

Create a directory called “images” (lower case) within your website directory. If you are following this tutorial from the beginning the path would be – c:\website\images

Place your logo in that directory. Create a blank page as we have done previously. Add the following code to a blank page.

 

<div id=”logotoleft”>

  <img src=”images/horizontallogo.png” width=”651″ height=”133″ border=”0″>

</div>  <!– End of Div  –>

 

The DIV ensures the logo will be placed in the upper left hand corner (my menu will occupy the upper right). The place the following code in the css file we created earlier.

#logotoleft

{

float: left;

}

 

The #logotoleft identifies the code. The float: left; places items inside the div up against the left side of the page.

 

Save the .css file and your new web page. Then run the web page. Your logo should be displayed in the upper left hand corner of the page.

 

Let’s add a footer to the page. I want my footer centered. I will use a DIV to center the text. Here is an odd thing about this DIV. I want to center the text within the DIV and not the DIV itself. I want to ensure nothing occurs before or after the DIV so I make the DIV’s width 100%. Then I align the text within the DIV with the text-align: center; statement. There is an important difference between centering the DIV on the page and centering text within the DIV. If you center the DIV and not the text your text will be left aligned.

 

#footer

{

text-align: center;

width: 100%;

}

 

That’s it. We now have a page with a logo on the left and a centered footer. You can download the zip file to see my code in the actual page and css file.

 

http://www.patrickdillonphotography.com/computer/blog/logo.zip

 

That was too easy. Let’s add a slide show to our page. I will use ProShow Gold in my example.

 

My goal is to produce a flash file that I can place on my web site. I also want ProShow Gold to produce the code to place in my web page. Here is how all of that is done.

 

I have created screenshots of each step. They can be downloaded from

 

http://www.patrickdillonphotography.com/computer/blog/proshowgoldscreenshots.zip

 

Open your slide show (Create a slide show first. Refer to their web site if you are new to ProShow Gold.)

Choose Create Output – step1.jpg

Choose Flash – Flash video for the web – step2.jpg

 

I didn’t want menus and I wanted the slide show to begin playing as soon as the web page is loaded. I choose the No Menu choice – step3.jpg.

 

From the Shows tab, I thought about having an intro slideshow but decided against it in the end. Notice the Intro Slideshow check box is not checked – step4.jpg

 

From the Options tab, slide5.jpg, I set the final options before I created the slideshow. Under Video Player Options, I knew I didn’t want controls on my page so this checkbox is unselected.

I also want to have the show loop continuously. This option is checked under the Output Options section.

Everything else on the page that I circled in red relates to output file size. I wanted to get the slideshow to load a quickly as possible. I adjusted the Size of the display, the bandwidth for which it is optimized and the Frame Rate until I go what I felt was a good balance of quality vs. speed.

 

Lastly, I choose the View Html button, slide6.jpg, to get the code to paste into my web page.

 

Once the web page is saved,  use FTP to copy the files created by the above process to my website. I copied the .pcx, .flv and the .swf files to my website. I put them in my root directory with the other html file. I was unable to get this page to run on my local machine so I did all of my testing by coping the files to the web server.  I pasted the code I copied earlier into my web page. Then I tested.

 

I wanted it centered on the page. To accomplish this I used another DIV. Actually, I requires two DIVs. This is because Internet Explorer does not fully support DIVs.

 

Some of you may wonder why I didn’t use the <center> tag. I chose not to use that tag because it is deprecated. The first DIV takes care of the IE bug. The second DIV centers the image for all other browsers.

 

<DIV id=”textaligndiv”>

  <DIV id=”centereddiv>

    <object>

       Flash object as output by ProShow Gold

    </object>  <!—End of Flash Object –>

  </div>  <!—End of id=”centereddiv”  — >

</div id=”textaligndiv”>  <!—End of id=”textaligndiv” — >

 

Css file

 

#textaligndiv

{

Text-align: center;

}

 

#centereddiv

{

width: 750px;

margin-left: auto;

margin-right: auto;

}

 

And that’s it. The slideshow page is complete!

 

As a final exercise put all three pages together into a single home.html.

Good luck. If you encounter any problems, you can ask me here on the blog.


Nov 30 2009

All about DIV s

Now we have to take a much closer look at the DIV statement. I apologize but this is going to take time. I found it very confusing the first time I tried to follow how they work. On the second time through I had a much better understanding. Writing the examples that accompany this post really solidified it in my mind. I hope you find this useful.

 

Divs define blocks on your web page. Those blocks typically contain images and text. The blocks follow each other vertically down the page. They can flow across the page. They can form columns, etc. Tables can also be used but I find div’s to be more flexible.

 

Begin by downloading the zip file and expanding it in a directory. These are example files I created that mimic the actions of the tutorial. If you try to follow the source code from the tutorial you will have a difficult time. Instead, read the tutorial then open my html and css file in what ever editor you have decided to use. The number in the name of my html and css file corresponds to the lesson in the tutorial. I suggest opening the tutorial in a separate browser/tab.

If you begin experimenting by changing my css files, be sure to save your changes to disk before trying to display those changes in a web browser.

 

My zip file

 

http://patrickdillonphotography.com/computer/blog/div.zip

 

Tutorial page

 

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

I have just a few notes to add to the tutorial.

 

First and foremost. ALWAYS comment your code. Be sure to comment where a DIV ends.

e.g.

<div id=”maindiv”>

            Lots of code and other divs go in here

</div> <!—End of Div id=”maindiv” –>

The <!– and –> define a comment in html.

If you don’t do this you WILL get lost at some point.

 

In lesson 3 my code places the div on the right but not at the top as stated in the tutorial.

 

In lesson 4, notice how the div1a is placed at the upper corner of div1. Remember div1a resides inside div1 (easy to tell if you code is commented!). The absolute positioning of div1a forces it to be placed over the text of div1. That is why the div1 text, id = “div-1” is not visible.

 

When going from lesson 7 to lesson 8 notice that I added width:100% to div1. Try it without the width property and see the difference.

 

So we didn’t add anything to the main page today. But divs can take a little time to master. Hopefully, that tutorial and my examples helped.

Next time we will add the logo and footer to a page. And if that isn’t too long of a post, we will also add the slideshow.


Nov 26 2009

OK so let’s create a Home page (part 1)….

In part one of the Home page we will create a menu.

Before you put one line of code to the page, decide on what you want. I wanted to show my work first. Then if the user wants more information they can use a menu to get it. Once I committed myself to this design, the elements of the page became clear. I would need a menu at the top, followed by a logo. Beneath that would be a slide show. I wanted to get some text on this page so I put a footer at the bottom.

 

That’s it 4 items. How hard could this be? As I found out harder than I thought but only because there are a few gottchas that are not explained very well. That’s my primary reason to share my process. I want to help you avoid these pitfalls thus making creating your web site a fairly easy process.

 

Enough theory, onto the code…

 

I built each element on it a page all by itself. I tested it in this isolated environment before I added it to the home.html file. I will work from top to bottom. Let’s begin with my menu.

 

My menu started with four elements. As you will see that it is easy to add more elements to the menu as time goes on.

Menu items are found between the Unordered list tag (ul) and individually contained in the List Item tag.

<ul>

            <li>Menu Item</li>

</ul>

Where Menu item has two parts, a link and the text that is displayed. It format is:

<a href=”home.html”>Home</a>

 

Before I share a full copy of the menu html file, let me talk about two points. First, the order of the menu must be reversed. That is html code that reads:

<ul>

     <li><a href=”home.html”>Packages</a></li>

     <li><a href=”about.html”>About</a></li>

     <li><a href=”packages.html”>Home</a></li>

    </ul>

This would produce the menu:

Packages 

About 

Home

This is the reverse order. To obtain the menu, Home  About  Packages, reverse the order.

 

The link to the complete file is:

http://www.patrickdillonphotography.com/computer/blog/menu.zip

If the link does not work when you click on it, copy the url and paste into a new browser. 

 

This will produce the menu:

Home

About

Packages

 

Not exactly what we want.

 

I wanted a horizontal menu without the underlines associated with Links (a href=XXXX). To accomplish this I had to introduce a div tag. The proper use of divs will be the most difficult topic covered in this series. And I am going to postpone a complete discussion of divs until next time. Just follow along and take it on faith that it will work as promised.

 

To format the elements of the web page such as positioning the menu on the right, removing the underline from the links, changing color of text, etc. a Cascading Style Sheet or css is used. The same formatting can be accomplished without the css file by adding the properties (color, size, margins, etc) to the tag for each item on the html page. But this quickly becomes unreadable and difficult to maintain. The best practice it to place these properties in a css file. I have included one these in the menu1.zip file.

 

http://www.patrickdillonphotography.com/computer/blog/menu1.zip

If the link does not work when you click on it, copy the url and paste into a new browser.

 

Before we get into a description of the properties in the css, unzip menu1.zip and open the menu1.html file in your browser. It looks very different than the first menu.html looked. Open both the menu1.html and the style.css in your text editor. Now we can examine the css in detail.

 

What does #nav-menu ul in the css mean? This line contains three important elements, “#”, “nav-menu” and “ ul”.  The “#” sign in a css tells us that it refers to an element ID. Switch to the menu1.html file. Look at the DIV tag. It contains id=”nav-menu”. ID is a property. The ID property is used by the css to identify this specific element on a web page. IDs should be unique. No two elements should have the same ID. The “#” identifies the section of code in the css as being a unique element on a web page.

The “nav-menu” tells the css which element is being referenced. In this instance it is anything between the <div id=”nav-menu”> and the </div> tags.

Finally the “ ul” tells the css which elements within the div tag to apply the properties.

 

Clear as mud, right? Looking at specifics should make it clear.

 

“list-style-type:none;”  - This eliminated the found bullet points in front of the list items.

“width:100%;” – This ensures that the unordered list, ul, occupies the entire width of the screen, regardless of the screen resolution. I didn’t want anything else to appear on the same line as my menu so this was important. I staked out the top line of my web page for my menu by declaring the menu would utilize 100% of the top line.

 

The next item in the css is “#nav-menu li”. Just like above this will apply to the elements contained within the div tag that has the “nav-menu” identifier. However, these properties will apply to the List Items, “ li”.

“Float:right;” – This causes the menu to be displayed across the top on the right hand side. It is also the reason you must reverse the order of you menu elements. Here is how it works. It reads the first li item from you web page, Packages, and places it at the far right hand side of the screen. The next li item is read, About, and placed as far right on the screen as it can. But Packages is already on the page so About is placed to the left of Packages. Home in a similar fashion is added to the left of About.

“margin: 8px 20px;” – This gave each menu text item a 8px top margin and a 20px right margin. Without this the menu would have read, “HomeAboutPackages”. The complete syntax for margin is “margin:Top Right Bottom Left”. If you leave a parameter off the right side, that parameter is assumed to be 0. I could have written “margin:8px 20px 0px 0px”

 

There you have it. A single level menu placed in the upper right hand portion of the page.

 

Next time we will dive into DIVs. If I can communicate that topic effectively, the rest of this will be a piece of cake. Check back in a couple of days. If you I have lost you at any point, please post your question here and I will do my best to explain.


Nov 23 2009

Getting Started – a new web site

 

It took me just over a week to create my web site. While it is now live, it is still a work in progress. I am still working on the blog section. Even though it is not finished, I wanted to share my journey to this point with those who might have an interest.

 

I have been a Visual Basic programmer for 20 years. That experience wasn’t as helpful as you might think in creating my web site. When I began using HTML, I was a beginner again. This series of blog articles is intended for those who might want to try and create their own web site but might have been hesitant.

 

Things you must do.

Have your own domain and hosting service.

Type only in lower case. Avoid capitals letters at all costs. Yes, there are places where you can use/mix upper and lower case but don’t do it until you have a lot more experience.

 

Tools I used.

Some of these tools you probably already have. Others may be new to you (I am a Windows user and I don’t know the Mac equivalents)

 

ProShow Gold – To produce the slide show and create the code for the web site.

PSG produces a Flash slide show. Alternately, you could create a slide show of your images. I looked at ShowIt but since I already owned PSG, I just used it.

 

NoteTab Pro – This is just a text editor. There is a free version. The free version is equivalent to Notepad which can be found under Start>Programs>Accessories. The Pro version adds HTML and CSS support. It’s color coding of the code makes it a little easier to find your mistakes. With any version of NoteTab I suggest you go to View>Options>Documents and uncheck Word wrap. And View>Options>General and uncheck Reload open documents. Notetab is not the only HTML editor and the best editor will be a matter of personal choice.

 

Core FTP lite – You have to get your files from your computer up onto your web site. This process is called FTP. Core FTP lite is free and works great.

 

Windows Explorer is also a fine FTP client. Internet Explorer is not. Windows Explorer can be found at Start>Programs>Accessories or a keyboard shortcut of Windows key + E ( the Windows key is located between the Ctl and the Alt key on the bottom left of your keyboard. It looks like the Windows flag.)

 

InkScape – This is a free program similar to Illustrator. It is a Vector graphics editing program. I used this to generate all the variations of my logo. Lots of YouTube tutorials. Vector graphics make it possible to resize images without the jagged lines you get in a raster program like Photoshop.

 

CS3 – enough said.

 

Design

 

Stop and think about what you want to create. Sketch each page on paper. I wanted an auto starting slideshow with my logo on the main page. I knew I wanted a menu at the top of every page. I wanted to have a Contact form. And there would be some other pages, About, Packages/Pricing and a blog.

 

Creation

Search the web for the “Hello World” program. It is just five line of text. Follow the directions and save it to your hard drive to a known location, i.e. c:\website\hello.html (lower case!!).

 

For a more in depth tutorial see, http://www.pagetutor.com/html_tutor/lesson01.html.

I found it very helpful. Some of the advanced stuff is pay to view. But I found the free stuff very helpful.

 

While this is a far cry from your final web site, now is a good time to practice uploading files to your web site. Open your FTP program (Core FTP Lite unless otherwise noted). You will need to know the administrator user name and password for your site. Be sure to uncheck anonymous. The port is 21.

If your login is successful, you will probably see some directories on your web site and directories on your home computer. If you see a folder on your web site such as public_html, double click on it. Your web files should go inside that directory.

To do the same FTP function with Windows Explorer, open two copies of Windows Explorer. Browse in one copy to the directory where the website files are located on your computer, e.g. c:\website. In the other copy type ftp://yourdomainname.com. You will be prompted for your user name and password for your domain. Remember this is not your computer logon user name and pasword. It is the administrator user name and password which is associated with your domain. You can drag and drop files from the local Windows Explorer to the FTP copy of Windows Explorer.

Most host sites have a limited number of home page names such as home.html, index.html. So before uploading your hello.html file be sure to rename it to home.html. If you don’t rename it you will have to specify the file name in the web address. That’s a pain with a long web address like mine. It is easier just to rename the file before uploading.

http://www.patrickdillonphotography.com/blog/helloworld.html

vs.

http://www.patrickdillonphotography.com/blog

 

Once the file is uploaded, open your browser and enter your web address and it should display, “Hello World”. If not stop here retrace your steps and determine what was done incorrectly.

Next time we will create the main page, menu, logo, slideshow and footer. Stay tuned!!


Nov 10 2009

The blog is LIVE!!

 

Well, sort of. I can’t post anything now. I am a bit behind in work. But expect some posts on Sat. 11/21/2009