Website Tools â€“ Part 2 of 3 â€“ â€œSimply Greenâ€ â€“ A Two Button SEO Ready Landing Page CSS Template

Pye — Mon, 31 Aug 2009 10:06:00 +0000

Welcome to part two of our landing page tutorials and templates. Hopefully, most of you will have read part one “The Photo Stack” – A One Button SEO Ready Landing Page CSS Template as it is a primer to this guide. To see a preview of this landing page, click here.

Each template guide (Part 1, 2 and 3) is organized into two main parts. The first portion is a simple customization and installation guide that will get you up and running in less than 1 hour. The second portion will go into more depth and detail regarding CSS for those of you that are interested in learning a bit more. Keep in tuned as Part 3 will not only include a 3 button design along with a text area, but will also include an advanced editing section solely on SEO preparation.

For those of you wanting to learn more about CSS and SEO, we highly recommend that you read Part 1 “The Photo Stack” as this article will build upon previously discussed topics.

So, without further adieu, let’s jump right in to steps 1 – 5 which are the customization and installation of the landing page.

Step 1 – Downloading the Files

The first thing you will want to do is download the files for the Photo Stack landing page by clicking here.

Step 2 – Understanding the Files

The files are organized into the following:

/design_files – These are the files used in the design process. We used Adobe Illustrator to create the layout, and thus we have included the .AI file in case any of you want to take the editing one step further and customize the design further. There is also a screenshot so you can quickly see the template design without loading it in the browser.

NOTE – there are no files in the /design_files folder that are actually used by the website. So you don’t need to upload it when uploading your website to your server.

/images – These are the image files that are used by the website code. You will need to upload these to your server when you have finished customizing your site.

index.html – This is the actual landing page itself. It contains all of the content of the page. It is named index.html because it is going to be the first page viewed when a user types in your website URL.

splashcss.css – This is a CSS (Cascading Style Sheet) file that is used to stylize the index.html page. It basically defines the look, placement and location of elements, colors, etc inside of the index.html file.

Step 3 – Customizing the Site

Before you can upload your landing page, we need to customize it so it is for your studio rather than for Lin and Jirsa Photography! Don’t worry though, we are going to walk you through each step, and once you finish you are going to revel in your new HTML editing skills!

i. Open the index.html for editing – You can open the index.html file in any standard text editor such as Notepad or Wordpad, or a code editor such as Adobe Dreamweaver. If you do open the file in Notepad or Wordpad, just make sure that you don’t change the file extension (.html) when you save the file. It should always read index.html

ii. Understanding the web page structure – To avoid repeating previously discussed material, please see Part One to get an understanding of the web page structure.

iii. Customizing the section - There are three areas you are going to customize in the of the document. Each are marked in the index.html file by comments. Comments are descriptions and explanations in the code that are marked so they are not displayed by the browser. HTML comments are denoted by anything that goes within the . The three areas you will edit are discussed below:

Title (Line 10) – The tag is a short piece of text that will be displayed on top of the browser window and is the most important tag within the <head> of your document for SEO (Search Engine Optimization). So you want to make sure it is brief, descriptive and under 70 characters in total length. To edit this section, simply place your title text in between the <title> tags. An example could be “Lin and Jirsa Wedding Photography and Engagement Photography.”

Meta Description (Line 13) – Yet another tag for SEO, the tag is mainly used by search engines as the little bit of text copy that describes your site. For example, in Google, if you typed in Lin and Jirsa Photography, the text description that shows up below each search result is pulled from the meta description tag when declared. So, it is important that this section contain a brief little summary of your studio and services. Google only reads the first 150 characters, so we advise you keep it under 150 characters in length. To edit this section, simply place your text between the ” ” marks after content =

Meta Keywords (Line 16) – While not as important today for SEO as it was in the past, the tag is used by search engines to categorize what your site is all about. Today, search engines such as google place much more emphasis on your site along with the actual content contained in your site in order to properly categorize and index your website. In this section, you want to place about 10 keywords or less that describe your website and studio services. For example, “wedding photography” , “wedding photojournalism”, etc. Remember, less is more. If you exceed 10 keywords, search engines may ding you for “spamming” keywords. To edit this section, simply place your keyword text between the ” ” marks after the content = Ok, good news, you are almost half way there already! We just finished the <head> of the document, and now we just need to edit a little of the <body> of the document and then we are done! iv. Customizing the <body> section – The only thing we need to change in the <body> of the document is the URL link that will point to your site, but we are going to need to change it in 4 places. If you desire, you can also change the text portion of the links as you go through this portion to fit your site better. Line 63 <a href> – <a href> is an HTML tag that stands for an Anchor Hypertext Reference, or otherwise known as a link/URL (yeah, seriously, why didn’t they just call it a link to begin with?). Currently, all of the links point to a dummy location which is http://www.YOURSITEGOESHERE.com. I wrote it that way so that it would stand out =). So, as most of you have guessed by now, you want to place the link of the site that you want this portal page to link. To do so, simply replace the http://www.YOURSITEGOESHERE.com with wherever you want it to link. Line 73 – Same change as above, this time it applies to the second button. Line 81 – Same change as on Line 73, this time it applies to the text “PORTFOLIO.” Once you finish editing the HTML link you can also edit the text to better fit your site. Simply change the text in between the <a> </a> to whatever you deem appropriate. Line 88 – Same change as on Line 81, this time it applies to the text “THE BLOG.” Once you finish editing the HTML link you can also edit the text to better fit your site. Simply change the text in between the <a> </a> to whatever you deem appropriate. Now, all of your links should be pointing to the right location. OPTIONAL – On each of our landing pages we included a tiny link in the footer that gives SLRLounge and Lin and Jirsa Photography a little bit of link love. We mention it here because we don’t want to seem sneaky by hiding things from you. The link text is very small and virtually unnoticable, so we ask that you keep the link on the site. However, if you must remove the link, then we ask that you add the following code snippet to any one of your sites. You can do it in a blog entry, or on a remote resource page somewhere on your site, it really doesn’t matter. This will help us to keep providing you with these free, professional tutorials and resources for free. Here is the link code: <a href=”http://www.slrlounge.com” target=”_blank” description=”Wedding photography tutorials, tips and resources”>Photography Tutorials, Tips and More at SLRLounge</a> a website by <a href=”http://www.linandjirsa.com” target=”_blank” description=”Los Angeles Wedding Photography”>Lin and Jirsa Los Angeles Wedding Photography</a> Great job! We are now done editing our HTML and the only thing we have left to do is customize the images and change the colors if you desire. v. Customizing the Button and Logo Images - Obviously you don’t want to use our pictures and logo for your site, so here is how to change it. Be warned, this is so easy that it might just confuse you. Replacing the Logo – To replace the logo, simply create your logo and size it to 180×54 (180 pixels wide by 54 pixels tall). Save the file as logo.png and replace the current logo.png file contained in the /images folder. Viola! Now your logo is on the site. NOTE – If you save the logo file as a .jpg you will need to change the code on line 78 to read images/logo.jpg rather than images/logo.png. Otherwise your image will not be displayed. Replacing the Button Images – There are two images for each button. The image defaults to a light black and white version of the image and then switches to a nice color version when the mouse is moved over the button. So, in order to replace the images we need to change both of them. To replace the black and white version of the first button, simply create a light black and white version of whatever image you like and size it to 100×100 (100 pixels wide by 100 pixels tall). Save the file as “front-picture-image-bw-light.jpg” and replace the current version of the “button-one-image-bw-light.jpg” file with your new one! Next, take your same design file and make it a color version with the same 100×100 dimensions and save it as “button-one-image.jpg” and replace the old file with your new one. Do the same steps with the second button images named “button-two-image.jpg” and “button-two-image-bw-light.jpg” and replace the current files with your new ones. vi. Customizing the Background Colors – There are two main background colors on the site, to change them, simply open the stylesheet.css file and do the following: Changing the <body> background color – Most of the CSS attributes that you may want to change will be placed at the top of the document. To change the background color of the <body> of the document, simply replace the hexadecimal color value on line 46 with the color of your choice. Changing the rectangle background color – If you are going to change the <body> background color, you probably want to go ahead and change the background color of the #rectangle_area container as well so that it matches your new color scheme. To do so, simply replace the hexadecimal color value on line 52 with the color of your choice. Step 4 -Revel in Your Awesomeness That’s right, you just customized your own landing page by editing HTML! You can preview it by double clicking on the index.html or loading it into your preferred browser. <div class="wppi_section_header">Step 5 – Upload the Site to Your Server</div> Now that we are done customizing, all you need to do now is upload the site! If you are unfamiliar with this process, keep reading. i. Connect to Your Site - Connect to your site by using your browser web admin panel, or using an FTP software. If you need FTP software, we recommend using FileZilla as it is quite reliable, and best of all FREE! You can download it by going to Downloads.com or by clicking here. Your FTP connection information can be found in your server’s control panel, or by calling your hosting company. ii. Upload the Files - After you have connected to your site, simply upload everything but the /design_files folder to the servers root directory. Usually, the root directory will be the default directory that your FTP will connect to. Make sure that you keep the file structure the same though. The images need to be within the /images folder and the index.html and splashcss.css file need to both be in the root directory. iii. Check Your Homepage – If everything went well, then you are live! Go check out your site by typing in the URL to your homepage. <div class="wppi_section_header">Step 6 – Do Your Victory Dance!</div> No explanation neeeded here, you should all know what this dance is since we did it in Part One. <div class="wppi_section_header">Step 7 – Advanced Editing: CSS Placement</div> OK, so for all of you interested in getting a little more into CSS, this section is for you. Now remember, we are building on what we discussed in <a href="http://www.slrlounge.com/2009/08/website-tools-photo-stack-a-one-button-splash-page-css-template/">Part One</a>, so make sure you are caught up before reading on. In Part One we discussed the basics of CSS and how it applies to HTML tags, so let’s get a little more advanced and start to discuss placement and positioning of CSS elements in Simple Green. While there is a lot about CSS that we haven’t discussed, knowing some CSS attributes and positioning along with HTML tag organization will give you a good basic foundation and help you get started creating custom sites of your own. <div class="wppi_section_header">Step 8 – Blocking Out the Design in CSS</div> The first step in writing out the CSS to a newly designed webpage is to block out the major elements in the page. Now, we aren’t going to go over every item in the CSS file, but we are going to cover all the major elements. The illustration below will show you the major block elements of our Simply Green landing page. For a larger version, please download the <a href="http://www.slrlounge.com/slrlounge_downloads/simply-green-two-button-splash-template.zip">Simply Green files </a>and look in the design_files/ directory. Each design is separated into major block pieces. The easiest way to block out a design is to start with the largest element and work your way down. So, let’s start from the top with the body of the document. i. The <body> – The body of our page is going to contain the entire site. Therefore, it makes sense that the body of the site fills the entire browser window. So, we have set the following attributes in the our Simply Green CSS file on line 66. body { width:100%; height:100%; } Setting the width and height both to 100% will allow the body element to fill the entire browser window. In addition, any additional attributes (such as the background-color set on line 46) that we set in the body element will apply through every child element contained within. ii. The #page_area – The next thing we are going to define is the #page_area of our document. This is the element we will use to define the general area of the page, mainly the width and height of the actual page content as shown below (line 77 of the stylesheet.css file) #page_area { margin:auto; width:480px; height:100%; } Setting the margin to auto will ensure that the #page_area element will be centered within the body element. In addition, since the body element is set to 100% width, the #page_area will always stay centered regardless of the size of the window. iii. The #content_area – Within the #page_area parent element is the #content_area child element. Now remember, the terms “parent” and “child” are only relative. While #page_area is the parent of all the elements within, it is still the child of the body element. The #content_area element is going to contain our portal area content. Therefore, we are going to need to define the size, as well as give it a background as shown below (line 88 in the stylesheet.css) body { width:100%; height:100%; } #content_area { width:480px; height:200px; display:block; background-image:url(images/content-background.png); position:relative; float:left; } There are a few attributes shown here that we haven’t discussed yet. I will give a brief explanation here, but I encourage you to read each item in more detail at <a href="http://w3schools.com/css/default.asp" target="_blank">W3Schools</a>. display:block; – Setting the display to block simply means that the browser will treat this element as a block element meaning any elements afterwards will be displayed below, rather than on the same line. It is similar to saying “I want a hard return after this line of text” forcing the next element down onto the next line. background-image:url(images/content-background.png); - I wanted to have a nice little rectangular button area with rounded corners and a drop shadow as shown below: So, I needed to use an actual image for the background since there is no way (presently) to create that look with CSS alone. So, the background-image attribute simply assigns a background image to the element. However, remember that the background will only be revealed to the extent of the content within. Meaning, if you asign a background to an element without a set height and width, the background will only be shown to the extent that the content within fills the element (this will make more sense when you start practicing with the background-image attribute). position: relative; – Setting the position to relative means that its positioning will be in relation to whatever element it is contained within. It simply makes custom and unique positioning more simple and customizable. Using relative positioning allows you to use floats, which are described next. float: left; - Once you have set the position to relative, you can use floats to position an element in a specific spot within the element. Floating an object left, means that it will be left-aligned to whatever object is directly in front of it. iv. #rectangle_area – Now, because I wanted to have a rectangle with a different color inside of the #content_area I created another element within called the #rectangle_area. To do so, we simply set the color and size of the element as shown below. #rectangle_area { margin:20px; width:440px; height:160px; position:relative; float:left; background-color:#D8EFE0; } Hopefully, you are beginning to see the pattern here. We are simply defining each element according to our design. It is going to be the organzation of the HTML that will give our design form as you will see shortly. v. Buttons and Logo Elements – The only other major elements in our design are going to be the positioning and sizing of the button and logo elements. Most everything will be the same as our previous elements, so I am only going to discuss the noteworthy portions below. #portal_button_one { position:relative; float:left; margin:20px 0px 0px 10px; border:1px solid #fff; } #portal_button_two { position:relative; float:left; margin:20px 0px 0px 0px; border:1px solid #fff; } There are two noteworthy items in our button elements. Each are discussed below: margin: 20px 0px 0px 10px; – The margin attribute is simply used to create a margin between it and its parent element. It is shown in both button elements in shorthand, each item defines the top right bottom and left margins in that specific order. So, for button one we specified that we wanted a 20px top margin, no right or bottom margins and a 10px left margin. border:1px solid #fff; - The border attribute simply applies a border to the element. Again, it is shown here in short hand which specifies that we want the border to be 1px in thickness, styled as a solid line (as opposed to a broken or dotted line) and set to the color white (#fff). #logo { position:relative; float:left; height:90px; margin-top:50px; margin-left:10px; } The logo element uses attributes we have already discussed. It is worth noting the long hand margin attributes. The same attribute could have been set by using the shorthand version as such: margin: 50px 0px 0px 10px; <div class="wppi_section_header">Step 9 – Organizing the HTML elements</div> While we have discussed how to define the CSS elements according to our design, you are probably noticing that we really didn’t define anything that has to do with the actual positioning of each element. Why? Because this step actually comes in the organization of the HTML code itself. Now, remember that all we need to do with the HTML is simply place each child container in its parent container as shown in our blockout image. So, if we were to remove all the actual text and image content in the HTML file, this is what the organization of the containers within the body would look like. Just an FYI, I have removed all the containers that we haven’t discussed to keep it simple and straightforward. <body> <div id=”page_area”> <div id=”content_area”> <div id=”rectangle_area”> <div id=”portal_button_one”> </div> <div id=”portal_button_two”> </div> <div id=”logo”> </div> <div id=”portal_button_one_text”> </div> <div id=”portal_button_two_text”> </div> </div> </div> </div> </body> Before analyzing this snippet of code, let’s talk a bit about what we are looking at. We discussed HTML tags in Part One as different elements that had a specific purpose, some are predefined, others are custom, however all of them can be styled with CSS. You know that the <body> tag is simply the HTML tag telling the browser where our page content begins and ends. We stylized our <body> tag in our CSS to ensure that it fit the entire browser window. Next, a <div></div> tag is simply a container in HTML. What does it contain? Anything you want! It can be text, an image, a script, anything really. Each <div> container is given an “id” which is assigned to the CSS attribute that defines its respective style. So, let’s talk about the organization and how it all comes together. Our highest level parent object is the <body> which is also the HTML tag that defines the content area, so it makes sense that it comes first. Next, we place our page_area container within the <body> because it is the first child element of the <body>. Within the page_area container, is the content_area container followed by the rectangle_area container. How does the browser know that these elements are contained within eachother? Well, its simple, because we didn’t end one container before starting the next. We opened the body tag, then the page_area div, then the content_area div, then the rectangle_area div before closing anything. This means that each container is contained within the prior and each container has the styles and attributes applied to them as defined in our CSS file and assigned with the “id”. Now, inside the rectangle_area div container is where our buttons and logo are actually placed. So, you will notice that the portal_button_one is started first. Inside, is the button image and content. Then, portal_button_one is closed and portal_button_two is started. These elements are placed right next to eachother since the CSS defines their positioning as floating left. This means that when button one ends, button two will be placed right next to it left aligned. Then, when the container for button two is closed, the logo is placed next to that. From there, we begin to close each container begining with the last first. So, we close the rectangle_area div container, then the content_area, then page_area, and last the body. So, by organizing how our div containers are placed within one another, as well as assigning sizing and attributes in CSS we can flesh out an entire design and get it ready for the web! Hopefully this all made sense, if not, read a bit more at <a href="http://w3schools.com/css/default.asp" target="_blank">W3Schools</a> practice with some simple sites, and you should be up and sprinting in no time! Those of you familiar with SEO will note that there isn’t all that much on the flash page to prepare for SEO! So, our final article, Part 3 of this template series will be a three button landing page with a heading and text area for you to keyword up. In addition, this tutorial concludes the CSS training portion of the template series. The final series will have an advanced section that teaches you strictly about preparing your landing page for SEO. So, stay tuned! If you have any questions, or comments please list them below in the comments. </article> <article> <h1>Website Tools – Part 1 of 3 – “The Photo Stack” – A One Button SEO Ready Landing Page CSS Template</h1> Pye — Fri, 07 Aug 2009 07:03:56 +0000 Your landing page is not only the first thing clients see, it is also the first thing search engines see! It is crucial to create a landing page that not only looks great, but is also well equipped and SEO (Search Engine Optimization) prepped. This is the first entry of a three part blog series on creating your own SEO ready CSS landing/portal page using our templates. Each entry in this series will get a little deeper in functionality and SEO allowing you to have more portal buttons and more text. To see the “Photo Stack” template in action <a href="http://www.slrlounge.com/templates/one-button-splash-css-template/index.html" target="_blank">click here.</a> So, for those of you that just want a simple, customizable one button, SEO ready portal page, then simply download the files, do a tiny bit of simple editing completing steps 1 – 5, and you are good to go. While this article may seem long, the estimated time to complete steps 1 -5 for a complete beginner is less than 1 hour. So you have no excuse! However, for those that are interested, these tutorials will also go one step further to help all of you DIY photographers out there learn a bit more about web design, CSS, and HTML coding and most importantly SEO (steps 6 – 9). Good news, though, it is really much more simple than it looks and sounds. So, without any further adieu, let’s jump right in. <div class="wppi_section_header">Step 1 – Downloading the Files</div> The first thing you will want to do is download the files for the Photo Stack landing page by <a href="http://www.slrlounge.com/slrlounge_downloads/photo-stack-one-button-splash-page-template.zip">clicking here</a>. <div class="wppi_section_header">Step 2 – Understanding the Files</div> The files are organized into the following: /design_files – These are the files used in the design process. We used Adobe Illustrator to create the layout, and thus we have included the .AI file in case any of you want to take the editing one step further and customize the design further. There is also a screenshot so you can quickly see the template design without loading it in the browser. NOTE – there are no files in the /design_files folder that are actually used by the website. So you don’t need to upload it when uploading your website to your server. /images – These are the image files that are used by the website code. You will need to upload these to your server when you have finished customizing your site. index.html – This is the actual landing page itself. It contains all of the content of the page. It is named index.html because it is going to be the first page viewed when a user types in your website URL. splashcss.css – This is a CSS (Cascading Style Sheet) file that is used to stylize the index.html page. It basically defines the look, placement and location of elements, colors, etc inside of the index.html file. <div class="wppi_section_header">Step 3 – Customizing the Site</div> Before you can upload your landing page, we need to customize it so it is for your studio rather than for <a href="http://www.linandjirsa.com" target="_blank">Lin and Jirsa Photography</a>! Don’t worry though, we are going to walk you through each step, and once you finish you are going to revel in your new HTML editing skills! i. Open the index.html for editing – You can open the index.html file in any standard text editor such as Notepad or Wordpad, or a code editor such as Adobe Dreamweaver. If you do open the file in Notepad or Wordpad, just make sure that you don’t change the file extension (.html) when you save the file. It should always read index.html ii. Understanding the web page structure – Webpages are broken into two main parts, the first being the <head> of the document, which is everything located inbetween the <head> </head> tags and the second being the <body> which is everything located between the <body></body> tags. The <head> of the document is going to contain information that is used by the server, browser, search engine, etc which are for the most part not visible to the person browsing the site. In fact, your first step in SEO is actually writing out the content within the <head> of your document. In addition, style information, scripting languages, meta tags, and more are going to be contained in the head of your html document. All of which are considered “under the hood” and won’t be viewable by the person browsing the site. The <body> of the document is going to contain all of the content which your viewers will see and read. Your images, text content and everything else you want viewers to see goes within the <body> of your page. iii. Customizing the <head> section - There are three areas you are going to customize in the <head> of the document. Each are marked in the index.html file by comments. Comments are descriptions and explanations in the code that are marked so they are not displayed by the browser. HTML comments are denoted by anything that goes within the <!– and –>. The three areas you will edit are discussed below: Title (Line 16) – The <title> tag is a short piece of text that will be displayed on top of the browser window and is the most important tag within the <head> of your document for SEO (Search Engine Optimization). So you want to make sure it is brief, descriptive and under 70 characters in total length. To edit this section, simply place your title text in between the <title> tags. An example could be “Lin and Jirsa Wedding Photography and Engagement Photography.”

Meta Description (Line 9) – Yet another tag for SEO, the tag is mainly used by search engines as the little bit of text copy that describes your site. For example, in Google, if you typed in Lin and Jirsa Photography, the text description that shows up below each search result is pulled from the meta description tag when declared. So, it is important that this section contain a brief little summary of your studio and services. Google only reads the first 150 characters, so we advise you keep it under 150 characters in length. To edit this section, simply place your text between the ” ” marks after content =

Meta Keywords (Line 12) – While not as important today for SEO as it was in the past, the tag is used by search engines to categorize what your site is all about. Today, search engines such as google place much more emphasis on your site along with the actual content contained in your site in order to properly categorize and index your website. In this section, you want to place about 10 keywords or less that describe your website and studio services. For example, “wedding photography” , “wedding photojournalism”, etc. Remember, less is more. If you exceed 10 keywords, search engines may ding you for “spamming” keywords. To edit this section, simply place your keyword text between the ” ” marks after the content = Ok, good news, you are almost half way there already! We just finished the <head> of the document, and now we just need to edit a little of the <body> of the document and then we are done! iv. Customizing the <body> section – The only thing we need to change with the <body> of the document is the URL link that will point to your site, but we are going to need to change it in 4 places. Line 32 <a href> – <a href> is an HTML tag that stands for an Anchor Hypertext Reference, or otherwise known as a link/URL (yeah, seriously, why didn’t they just call it a link to begin with?). Currently, all of the links point to a dummy location which is http://www.YOURSITEGOESHERE.com. I wrote it that way so that it would stand out =). So, as most of you have guessed by now, you want to place the link of the site that you want this portal page to link. To do so, simply replace the http://www.YOURSITEGOESHERE.com with wherever you want it to link. Line 39 – Same change as above, this time it applies to the picture sitting on top of the picture stack. Line 42 – Same change as on Line 32, this time it applies to your logo. Line 51 – Same change as on Line 32, this time it applies to the text “ENTER FLASH PORTFOLIO” Now, all of your links should be pointing to the right location. Also, keep in mind that if you don’t want the text to say “ENTER FLASH PORTFOLIO” simply change it to whatever you do want it to say! Such as “ENTER WEBSITE” or whatever floats your boat! OPTIONAL – On each of our landing pages we included a tiny link in the footer that gives SLRLounge and Lin and Jirsa Photography a little bit of link love. We mention it here because we don’t want to seem sneaky by hiding things from you. The link text is very small and virtually unnoticable, so we ask that you keep the link on the site. However, if you must remove the link, then we ask that you add the following code snippet to any one of your sites. You can do it in a blog entry, or on a remote resource page somewhere on your site, it really doesn’t matter. This will help us to keep providing you with these free, professional tutorials and resources for free. Here is the link code: <a href=”http://www.slrlounge.com” target=”_blank” description=”Wedding photography tutorials, tips and resources”>Photography Tutorials, Tips and More at SLRLounge</a> a website by <a href=”http://www.linandjirsa.com” target=”_blank” description=”Los Angeles Wedding Photography”>Lin and Jirsa Los Angeles Wedding Photography</a> Great job! We are now done editing our HTML and the only thing we have left to do is customize the images. v. Customizing the Images - Obviously you don’t want to use our picture and logo for your site, so here is how to change it. Be warned, this is so easy that it might just confuse you. Replacing the Logo – To replace the logo, simply create your logo and size it to 200×60 (200 pixels wide by 60 pixels tall). Save the file as logo.png and replace the current logo.png file contained in the /images folder. Viola! Now your logo is on the site. NOTE – If you save the logo file as a .jpg you will need to change the code on line 42 to read images/logo.jpg rather than images/logo.png. Otherwise your image will not be displayed. Replacing the Top Image – To replace the image on top of the picture pile, simply create whatever image you like and size it to 420×200 (420 pixels wide by 200 pixels tall). Save the file as front-picture-image.jpg and replace the current front-picture-image.jpg file with your new file! <div class="wppi_section_header">Step 4 -Revel in Your Awesomeness</div> That’s right, you just customized your own landing page by editing HTML! You can preview it by double clicking on the index.html or loading it into your preferred browser. <div class="wppi_section_header">Step 5 – Upload the Site to Your Server</div> Now that we are done customizing, all you need to do now is upload the site! If you are unfamiliar with this process, keep reading. i. Connect to Your Site - Connect to your site by using your browser web admin panel, or using an FTP software. If you need FTP software, we recommend using FileZilla as it is quite reliable, and best of all FREE! You can download it by going to Downloads.com or by clicking here. Your FTP connection information can be found in your server’s control panel, or by calling your hosting company. ii. Upload the Files - After you have connected to your site, simply upload everything but the /design_files folder to the servers root directory. Usually, the root directory will be the default directory that your FTP will connect to. Make sure that you keep the file structure the same though. The images need to be within the /images folder and the index.html and splashcss.css file need to both be in the root directory. iii. Check Your Homepage – If everything went well, then you are live! Go check out your site by typing in the URL to your homepage. <div class="wppi_section_header">Step 6 – Do Your Victory Dance!</div> No explanation neeeded here, you all know what this is. <div class="wppi_section_header">Step 7 – Advanced Editing</div> For those of you that want to get a little more in depth and do some CSS editing, this section is for you. <div class="wppi_section_header">Step 8 – Understanding CSS and How it Works</div> Cascading Style Sheets or CSS for short looks a little complicated, but it isn’t bad at all. In fact, it is simply a document that contains descriptions of how you want certain html elements to look, and where to be placed. For the most part, the CSS file is quite intuitive and readable. But, here is a little crash course on CSS to get you started in editing your landing page (for more detailed information on all the different attributes and styles, <a href="http://www.w3schools.com" target="_blank">W3 Schools</a> is a great free CSS learning resource). <div style="margin: 0px 0 20px 25px;"><script src="http://www.bluehost.com/src/js/slrlounge/CODE126/620x203/bh_620x203_05.jpg" type="text/javascript"></script></div> i. CSS applies to HTML tags – CSS works by simply defining style attributes that get assigned to HTML tags. For example, if you open and view the splashcss.css file in any text or code editor, you will notice that each CSS attribute has the following format: name { property:value; property:value; } The “name” is simply the name of the HTML tag you wish to affect (referred to properly as a “selector”). For example, on line 54 of the file you will see body { } which assigns styling to everything in the HTML <body> </body> tags. After declaring the name, you start with a { which denotes the begining, and end with a } which denotes the end of the styling for the “name” selector. All of the attributes you then want applied to the “name” tag would go between the { and }. Each styling attribute is referred to as a property and is followed by its given value. On line 59 you will see p { } which assigns styling to text inside the paragraph tags On line 48 you will see * { } the asterisk means that you want to assign those styling attributes to the entire document denoted by the * So, if we want all of the text inside of the <body> tag to default to Times New Roman and be 10px Tall you would type the following into the CSS: body { font-family: “Times New Roman”; font-size:10px; } Now, all text within the <body></body> tags in our HTML will default to 10px Times New Roman. You can see how powerful CSS can be because instead of changing describing the font/size and other attributes multiple times throughout the HTML file, we can do it once in our CSS document and apply it to every page throughout an entire site! ii. Why Cascading? – So what does the Cascading in Cascading Style Sheets mean? Well, this is the most difficult concept in CSS to understand, and be happy because it really isn’t all that difficult. Cascading simply means that each style rolls down from parent to child in your HTML. In other words, above we changed the text located within the <body> tag to 10px Times New Roman. This means that every element that is contained within the <body></body> tags will also have that same default style applied. So <body> is the “Parent”, and anything inside is the “Child.” Child elements are also considered Parents though to whatever elements are contained inside of them. So, anything applied to a Parent applies to the Child within. If you want to change the style of the Child, then you need to create another CSS style attribute that applies to the child. IMPORTANT NOTE – Styles that are applied to a Child element override any styling that cascades down from a parent element. To help clarify, here is a snippet of HTML code: <body> <div id=”text”> This is our test paragraphy </div> <body> Before explaining, let me just note that a <div> is simply a container for something in HTML. So, in this example <body> is the Parent of the <div> named “text” and <div> is the Parent of the paragraph element . What does that mean? That means anything applied to <body> applies to the <div> called “text” and also to the paragraph element ; Anything applied to the <div> element applies to the paragraph element and anything applied to the paragraph element only applies to itself. So, what if I want most of the text in the <body> to be in Times New Roman except for that tiny piece inside of the “text” <div> container. Well, I would write the following in my CSS: body { font-family: “Times New Roman”; } #text { font-family: “Arial”; } Now, all text in the document will be Times New Roman, except for whatever is within the “text” <div> as assigned by the #text CSS code. Don’t worry too much about syntax right now. The goal for now is to simply understand the CSS, and be able to edit it, rather than create it on your own. Ok, so now you should have a basic understanding of how CSS elements “cascade” from parent to child elements. You can also start to see how effective and powerful this form of styling can be. iii. Studying splashcss.css: So now, let’s go look back at our CSS file splashcss.css. You will notice that I have placed attributes for items that users may likely want to change at the very top of the document. The rest of the attributes are located below from line 44 on down through the document. So, a quick explaination of the first few items to help you get started. The * { } on line 8 applies a site wide style (denoted by the *) to set the font to first Arial, if Arial is unavailable, then it chooses Helvetica, and if Helvetica is unavailable it will choose any sans-serif font. The a { } on line 18 applies a site wide style to every anchor tag (URL) <a href=”"></a> to change the decoration, weight, color and size of the link text. The a:hover { } on line 32 applies a site wide style to every anchor tag (URL) when being hovered by a mouse. So, when hovered, all links on the site will be underlined. <div class="wppi_section_header">Step 9 – Going One Step Further</div> You should now have a basic understanding of how CSS works and how it applies to your HTML document. Now, its time to read a little more and start playing around. Remember, CSS styles can not only affect the looks of an element, but also the positioning. We recommend reading through the CSS tutorials at <a href="http://www.w3schools.com/css/default.asp" target="_blank">W3Schools</a> and start playing around on your own. Simply make a copy of the files you downloaded on this tutorial, and start playing around. Don’t worry if something breaks, you can always go back to the original, or download everything again from here. If you found this article useful, share the love! Tweet us, comment below, send us a link, Digg us, it’s all good! If you would like to help us keep SLR Lounge alive, please include this link code anywhere on your site: <a href=”http://www.slrlounge.com” target=”_blank” description=”Wedding photography tutorials, tips and resources”>Photography Tutorials, Tips and More at SLRLounge</a> a website by <a href=”http://www.linandjirsa.com” target=”_blank” description=”Los Angeles Wedding Photography”>Lin and Jirsa Los Angeles Wedding Photography</a> By: <a title="Lin and Jirsa Photography" href="http://www.linandjirsa.com/" target="_blank">Lin and Jirsa Wedding Photography</a>, Los Angeles and Orange County Wedding Photographers _______________________________________________________________________________ If you’ve found this article informative, please consider donating below: <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="7147549" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" /> </form> _______________________________________________________________________________ </article> <article> <h1>3 Site Simplistic Editable CSS Splash Page Template Version 1</h1> Pye — Wed, 05 Aug 2009 02:22:26 +0000 Most photographers have at least 2 sites (a portfolio and blog) if not more. Thus, our websites require a splash/portal page that allows our clients to access any of our sites with ease. While we have a good foundation in web programming, we realize that this may be a daunting process for those of you starting your own photography companies. So we went ahead and created a simple, SEO ready, customizable splash/portal page that you guys can easily implement on your own website. While it is more simple than the <a href="http://www.linandjirsa.com" target="_blank">Lin and Jirsa Los Angeles Wedding Photography home page</a>, this template is nice and elegant and will give you a great start in getting hands on with HTML and CSS programming. If you guys like this template, then we will go ahead and create more, so let us know in the comments! This template has been tested in Explorer, Firefox and Chrome. Feel free to use this template on your site, customize it, study the code, or do whatever else you like. However, since we are providing these tools for free though, we do ask that you don’t remove the virtually unnoticeable link to our site in the page footer. <div class="wppi_section_header">Customization Instructions</div> Before you get around to installing the page on your server, you will want to customize the page and add in all your text and images. So, here is how to get started. 1) Download the files by clicking here 2) Unzip the files to any folder and open the index.html file in a simple text editor such as Wordpad, Notepad, or a code editor such as Dreamweaver. 3) In the code, you will notice instructions on how to fill everything into the page. Instructions are located in the comments which are denoted by the text in between the <!– and –> . Keep in mind that anything inside of brackets such as these <> is actually HTML code and you want to make sure you understand HTML before you go editing it. 4) First section you will want to edit is the text within the <head> </head> of the document. This section is mainly used to help search engines, such as Google, better index and classify your site. So complete your DESCRIPTION, KEYWORDS and TITLE section and then move on to the <body> </body> of the html document. 5) Everything in the <body> </body> tags of the document is where everything visible to users will appear. So, in this section you want to modify all of the text to properly promote your studio. Again, to quickly find the areas you need to modify, look for the instruction text placed in between the <!– and –>. 6) The images currently placed in the site are just placeholders. You will want to replace these images with your own. To do so, simply replace each image named button-image-one.jpg, button-image-two.jpg and button-image-three.jpg in the /images folder with the appropriate image. Remember to size your image to 200×200 pixels to make sure it fits within the template. <div class="wppi_section_header">CSS Customization</div> The CSS document splashpage.css is where all the style information is contained for the splash page. CSS is quite easy and intuitive to understand. However, it is beyond the scope of this tutorial. If you do wish to edit the CSS, we recommend that you do a little bit of reading at <a href="http://www.w3schools.com/css/default.asp" target="_blank">http://www.w3schools.org</a> on CSS before proceeding. We made the CSS document very easy and clear to edit, to find the section you are looking to edit, simply look to the comments denoting each section as marked by the /* and */ characters. <div class="wppi_section_header">Installation Instructions</div> Once you have properly edited all the text, links and images within the index.html file you are going to upload the files to your server. To do so, simply do the following. 1) Connect to your server using your preferred FTP client. A good free client is FileZilla which can be downloaded at <a href="http://download.cnet.com/FileZilla/3000-2160_4-10308966.html?tag=mncol" target="_blank">http://www.downloads.com</a> 2) Once you have connected, transfer all the files into the desired location on your server. If you want the splash page to be the first page that shows up when clients type in your URL, then you need to place the index.html file into the root directory of your server. Both the splashpage.css file and the images folder needs to also be within the same folder as the index.html file to properly work. If you already have an image folder, transfer the images contained in this tutorial’s image folder to the folder on your site. 3) Viola! If everything worked correctly, you should be able to type in your URL and see your new, customized, and SEO ready splash page! If you like this article, and would like to see more articles on website tutorials, please let us know in the comments below! By: <a title="Lin and Jirsa Photography" href="http://www.linandjirsa.com/" target="_blank">Lin and Jirsa Los Angeles Wedding Photography</a>, Los Angeles and Orange County Wedding Photographers _______________________________________________________________________________ If you’ve found this article informative, please consider donating below: <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="7147549" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" /> </form> _______________________________________________________________________________ </article> </main></body></html>

Free Photography Tips Tutorials Reviews and Wordpress Themes » CSS Resources

Website Tools â€“ Part 2 of 3 â€“ â€œSimply Greenâ€ â€“ A Two Button SEO Ready Landing Page CSS Template

Website Tools â€“ Part 2 of 3 â€“ â€œSimply Greenâ€ â€“ A Two Button SEO Ready Landing Page CSS Template