1stwebdesigner

Posted by | Posted on 17:55

1stwebdesigner


30 Cool Large Photo Background Website Designs

Posted: 11 Nov 2010 01:00 PM PST

Web design is taking a plunge into photography and digital arts. Making large photos as a background is getting trendy.  Hence, putting up a catchy photo never misses to attract the audience attention. It says a lot about the website as well as the developers.  It also helps the designer create aura, a color palette  and signify the substance and objective of a website.

But of course the texts, search engines and web contents are the most essential parts to consider for web designing. The key is typography control. It does require complex photo manipulation, and because resizing the image based on the browser size is not that easy, using exceptional CSS or, in some cases, Flash to get everything looking at their best.

I have compiled examples of cool large photo background website designs, hopefully to inspire you!

1. Paul Smith Menswear

This layout looks fashionable and trendy. The photo background showcases their products at the same time it makes the page look nice.

2. Campanino Golf Club

By the background itself, golf enthusiasts and athletes get excited of what this site could offer.

3. Raven at Lora Bay

This layout showcases the cozy feel of  the golf club. The scenic view on the background tempts the audience to come over and enjoy the amenities.

4. Bently Reserve

The strong background describes much about the site’s foundation and the kind of service they offer.

5. DOJO

As cool as the site is, this background is pretty catchy and innovative.

6. Old Loft

The fun & colorful background gives you that welcoming feel.

7. Creative People

The unique background simply implies the content of this website.

8. Medis

This background picture holds the mere idea of the site which is wining and dining.

9. MacAllan Ridge

The large foggy background matches the template and goes well with the color scheme.

10. Alexarts

I love the great concept being put into this background. And with the additional customized thought bubble  buttons you can’t help but be impressed.

11. USAY

Color schemes and template goes well with the photo background. Added with a little touch of proper positioning of buttons and contexts.

12. Museum of Science + Industry

The cool outer-space background says it all. It’s very science fictional and creative.

13. Food Inc. Movie

The big cow on the background is very attention catching. It makes you want to read more about the site.

14. Julliana Barros

The great photo background has a very good composition. Templates are positioned very well and the typography is just right.

15. Electricurrent

The creative background is very compound and it delivers the objective of the website perfectly.

16. Gavin Castleton

This amazingly edited background makes you curious as to what the website is about. Using minimal typography, the site concentrates on the story behind the picture.

17. Vivo Group

This background contributes in acquiring that happiness filled-aura that the website is implying on the audience. Very bright colors are used and typography is minimal.

18. Viget Inspire

This example illustrates a lot about the developers of the site. Their creativity and uniqueness oozes out from this catchy background.

19. Upstruct

This one is simple yet bold. Gives you that strong impression about the site. The great color combination of color schemes and customized templates compliments everything.

20. Hasse Bronten

Basically, the photo background introduces who the site is about and what it contains. This one has really cool templates and concept.

21. RingV Media

This is a perfect example of simplicity with a kick. It is very brilliant how the object in the image worked well with the layout.

22. Club Manche Attractivite

Landscape photos are challenging because you need to match it with the right amount of color and design. This example pulled it off by putting smaller images in the middle that would compliment the background.

23. Davida Int

Talking about being minimalist, this design makes the background completely pop out.  They showcase their product and make it the center of attention without losing the texts on the side.

24. August

This is a tricky landscape background, applied with a good blend of color scheme, templates and positioning.

25. Travis and Presley

A collage photo effect like this is quirky. You need to compose the layout with great color matching and positioning so that it wont look messy and over crowded.

26. Ines Papert

This one is really striking. The angle of the photo background is remarkable & gave the layout a good view.

27. Orca Bay Seafoods

This is a great example of adding flash to the background. It is very customized and unique.

28. Maurice Krijtenberg

Another one of those good flash backgrounds. This one however, is a very edgy serious aura.

29. Kalinowe Pola

I like this one because the photo background tells a story which makes it interesting. Put together with great color scheme and positioning of templates it looks really good.

30. Mellow Mushroom

I always save the best for last. For me, this is what I found very impressive so far. It’s cutting edge flash effects and the background photo compliments each other. Worked even better because of the color scheme.

As you can see from the following examples, website designs with large photo backgrounds are very appealing to the viewers’ eyes. It makes it unique and interesting. Especially the ones with additional flash effects. A great composition of photography, flash, and exceptional CSS skills will get you a very unique layout that will surely make your website standout.

PHP for Beginners: Part 1 – Introduction & Displaying Information

Posted: 11 Nov 2010 02:00 AM PST

Up until recently, scripting on the Internet was something which very few people even attempted, let alone mastered. Recently though, more and more people have been building their own websites and scripting languages have become more important. Because of this, scripting languages are becoming easier to learn and PHP is one of the easiest and most powerful yet.

What Is PHP?

PHP stands for Hypertext Preprocessor and is a server-side language. This means that the script is run on your web server, not on the user’s browser, so you do not need to worry about compatibility issues. PHP is relatively new (compared to languages such as Perl (CGI) and Java) but is quickly becoming one of the most popular scripting languages on the Internet.

Why PHP?

You may be wondering why you should choose PHP over other languages such as Perl or even why you should learn a scripting language at all. I will deal with learning scripting languages first. Learning a scripting language, or even understanding one, can open up huge new possibilities for your website. Although you can download pre-made scripts from sites like Hotscripts, these will often contain advertising for the author or will not do exactly what you want. With an understanding of a scripting language you can easily edit these scripts to do what you want, or even create your own scripts.

Using scripts on your website allows you to add many new ‘interactive’ features like feedback forms, guestbooks, message boards, counters and even more advanced features like portal systems, content management, advertising managers etc. With these sort of things on your website you will find that it gives a more professional image. As well as this, anyone wanting to work in the site development industry will find that it is much easier to get a job if they know a scripting language.

What Do I Need?

As mentioned earlier, PHP is a server-side scripting language. This means that, although your users will not need to install new software, you web host will need to have PHP set up on their server. It should be listed as part of your package but if you don’t know if it is installed you can find out using the first script in this tutorial. If you server does not support PHP you can ask your web host to install it for you as it is free to download and install.

Writing PHP

Writing PHP on your computer is actually very simple. You don’t need any specail software, except for a text editor (like Notepad in Windows or excellent and free Notepad++). Run this and you are ready to write your first PHP script.

Declaring PHP

PHP scripts are always enclosed in between two PHP tags. This tells your server to parse the information between them as PHP. The three different forms are as follows:

< ? Your PHP Code Is Here ?>  < ?php Your PHP Code Is Here php?>  <script language="php"> Your PHP Code Is Here </script> 

All of these work in exactly the same way but in this tutorial I will be using the second option (< ?php and ?>). You must remember to start and end your code with the same tag (you can’t start with < ? and end with for example).

Writing Your Very First Script

The first PHP script you will be writing is very basic. All it will do is print out all the information about PHP on your server. Type the following code into your text editor of choice:

< ?php phpinfo(); ?> 

As you can see this actually just one line of code. It is a standard PHP function called phpinfo which will tell the server to print out a standard table of information giving you information on the setup of the server.

One other thing you should notice in this example is that the line ends in a semicolon. This is very important. As with many other scripting and programming languages nearly all lines are ended with a semicolon and if you miss it out you will get an error.

Finishing and Testing Your Script

Now you have finished your script save it as phpinfo.php and upload it to your server in the normal way. Now, using your browser, go the the URL of the script. If it has worked (and if PHP is installed on your server) you should get a huge page full of the information about PHP on your server.

If your script doesn’t work and a blank page displays, you have either mistyped your code or your server does not support this function (although I have not yet found a server that does not). If, instead of a page being displayed, you are prompted to download the file, PHP is not installed on your server and you should either search for a new web host or ask your current host to install PHP.

It is a good idea to keep this script for future reference.

Let’s move on to Displaying Information & Variables Section.

Printing Text

To output text in your PHP script is actually very simple. As with most other things in PHP, you can do it in a variety of different ways. The main one you will be using, though, is print. Print will allow you to output text, variables or a combination of the two so that they display on the screen.

The print statement is used in the following way:

< ?php print("Hello world!"); ?> 

Let’s explain the above line:

print is the command and tells the script what to do. This is followed by the information to be printed, which is contained in the brackets. Because you are outputting text, the text is also enclosed inside quotation marks. Finally, as with nearly every line in a PHP script, it must end in a semicolon.

The result will look like:

Hello world! 

Variables

As with other programming languages, PHP allows you to define variables. In PHP there are several variable types, but the most common is called a String. It can hold text and numbers. All strings begin with a $ sign. To assign some text to a string you would use the following code:

$welcome_text = "Hello and welcome to my website."; 

This is quite a simple line to understand, everything inside the quotation marks will be assigned to the string. You must remember a few rules about strings though.

  • Strings are case sensitive, so $Welcome_Text is not the same as $welcome_text.
  • String names can contain letters, numbers and underscores but cannot begin with a number or underscore.
  • When assigning numbers to strings you do not need to include the quotes.
$tut_number = 1234; 

Outputting Variables

To display a variable on the screen uses exactly the same code as to display text but in a slightly different form. The following code would display your welcome text:

$welcome_text = "Hello and welcome to my article."; print($welcome_text); 

As you can see, the only major difference is that you do not need the quotation marks if you are printing a variable.

Formatting Your Text

Unfortunately, the output from your PHP programs is quite boring. Everything is just output in the browser’s default font. It is very easy, though, to format your text using HTML. This is because, as PHP is a server side language, the code is executed before the page is sent to the browser. This means that only the resulting information from the script is sent, so in the example above the browser would just be sent the text: Hello and welcome to my article.

This means, though, that you can include standard HTML markup in your scripts and strings. The only problem with this is that many HTML tags require the ” sign. You may notice that this will clash with the quotation marks used to print your text. This means that you must tell the script which quotes should be used (the ones at the beginning and end of the output) and which ones should be ignored (the ones in the HTML code).

For this example let’s change the text to the Arial font in red. The normal code for this would be:

<font face="Arial" color="#FF0000"> </font> 

*Note Never use inline styles in your projects! I wrote these just for example.

As you can see this code contains 4 quotation marks so would confuse the script. Because of this you must add a backslash before each quotation mark to make the PHP script ignore it. The code would change to:

<font face=\"Arial\" color=\"#FF0000\"> </font> 

You can now include this in your print statement:

print("Hello and welcome to my article."); 

which will make the browser display:
< ?php print(“Hello and welcome to my article.”); ?>

because it has only been sent the code:

<font face="Arial" color="#FF0000">Hello and welcome to my article.</font> 

This does make it quite difficult to output HTML code into the browser but later in this tutorial I will show you another way of doing this which can make it a bit easier.

Conclusion

In this part I have introduced you to the basics of writing and running PHP. By this time you should now know if your host supports PHP and should have a basic understanding of how PHP scripts are structured. In the second part of the tutorial i have explained you how to print out information to the browser.

Comments (0)

Post a Comment