Additional design elements

Today I added some additional design elements to the home and services pages. A before and after image of the home page is displayed above. By now this technique of creating the folder style graphics in css has been used on through out the web using a variety of techniques.

The technique I used in creating the header elements involved creating the rounded sections in Photoshop and positioning them before and after the header tag. Then using a style in the header tag I added the background color used in the rounded corners and added the additional margin style to the header tag to shrink the background area to the edge of the right corner graphic.

Below is a sample of my code used creating the header tabs on the home page.

<h2 style="color:#0066FF; margin-left:15px; margin-right:118px; background-color:#333333;"><img src="images/left_tab.gif" width="10" height="18" alt="left tab" /> System Protection <img src="images/right_tab.gif" width="10" height="18" alt="right tab" /></h2>

For the rounded gradient section below the header tab, I just created the graphic in Photoshop and positioned it in css as a background image. The folder images created on the services page were a little more difficult. The required a table to line the multiple images up on top of each other. The technique is very similar to the above example. Here is a sample of the code I used on the services page.

<table width="325" height="182" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<h2 style="color:#0066FF; margin:10px 203px -7px 15px; padding-bottom:5px; background-color:#333333;"><img src="images/left_tab.gif" width="10" height="18" alt="left tab"><a href="services_hst.php"> Hosting </a><img src="images/right_tab.gif" width="10" height="18" alt="right tab" /></h2>
</td>
</tr>
<tr>
<td style="background-image:url(images/service_main_square2.jpg); background-position:left; background-repeat:no-repeat;">
<p style="margin-top:5px;">Whether you're just starting and looking for a simple web hosting or you're an advanced website developer looking to integrate e-commerce and databases into your site, you'll find that we have the services, tools and staff to help you every step of the way. <br /><br /></p>
</td>
</tr>
</table>

This website can be found at http://www.pryzemedia.com/goode

Flash screen added

Today I updated the home page of the Goode Technical Solutions website (http://www.pryzemedia.com/goode) to include an animated flash title screen. Below is a screen shot of part of the title screen's intro.

I am also thinking about doing a small redesign to help make additional enhancements to the site. Some of the changes may include additional flash title screens on the main categories, some additional style changes on many of the text and headers, and a background image or color change up in the white emptiness surrounding the site.

More posts will come as I continue to update my websites.

Site Update

I have recently updated this site to fix previously incompatibly issues between Mozilla and IE as well as converted the website into PHP. The website can be found on my website at http://www.pryzemedia.com in the Digital section. The direct link to the site is http://www.pryzemedia.com/goode .

When I get some extra time, I will post some additional information about this site including some of the processes and changes I made when converting the site to PHP.

week 11

My site for this class is complete and on-line at.
http://www.pryzemedia.com/goode

I will probably add to it over the break and depending on how the 3rd scripting language class is structured, I plan on picking it back up and adding additional functionality to it. One thing that I could add to it would be to make the search engine actually work through using a database with mysql and php. Maybe even add more depth to the computer section by creating a mock shopping cart. Another thing that I would have to add before making it a portfolio piece is to replace the graphics with my own. So maybe later on, I could actually use this for portfolio, but for now it is my final project for this class.

Week 9 Progress

Well so far I have 11 of the 15 pages completed for this class and I feel like I have a real handle on CSS now. One thing that I've found to help along the way was to create a prototype of each page in Illustrator and use it as a template to measure where every element will go. The prototypes may take longer in the beginning by having to figure out all the text and where every element goes, but in the final stages I think helps move things along. I just have 4 pages left to complete for next week and I will be finished with my final website for the class.

This Weeks Progress

Well I have completed my next 4 pages and I am getting pretty comfortable using CSS. The only problem that I have is that what looks perfect in Firefox looks screwed up in IE and vise versa. I have a feeling that I will have to design this site in both a Firefox and IE version before I go into the portfolio classes. Even though IE is out-dated, there is still a vast majority of people who use it. Oh well, I know in Javascript that there is a method that can check the browser that the user is using and from there I could use a simple if statement to determine which version of my site to display.

Creating Rounded Tabs In Css

After spending hours of searching and testing I have found the best and easiest way to create the rounded tabs using Css.

The site www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml was the best resource for me on creating tabs the rounded tabs. The site uses small corners 10px X 10px to use as the rounded upper part of the tabs. They also make good use of both the div and the span tags to attach the rounded 10px X 10px tabs into the background of the menu.

I strongly recommend this site as a resource for anyone trying to create tabs. One of the many sites that I came across for creating rounded tabs in Css only, didn't allow the tabs to change color when rolled over and was a lot more complicated in trying to understand what they did.