|
 |
|
|
|
| Thread title: Making a new website |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
05-05-2011, 10:17 PM
|
#1
|
Status: I'm new around here
Join date: Jan 2011
Location: San Diego
Expertise: Design
Software: Adobe
Posts: 7
|
 Making a new website
Hello forum,
I was hired recently to make a simple website, and like always, I always browse through random websites in search of new ideas. I came up to this simple looking website that grabbed my attention ( http://www.ociodesigngroup.com/) and I looked everywhere for tutorials on how to build something similar. I had no luck.
I will be building this website using html5. Can anyone give me any good tips, on how I can make this website work? I am trying to have a background song looping on the background, and when a link is clicked I don't want the song starting over. So I basically want to have links that change only the content.
Early Thanks.(I know this forum is very helpful)
I would also appreciate if someone could post a cool website with good html5 & jquery tutorials.
|
|
|
|
05-06-2011, 05:26 AM
|
#2
|
Status: I'm new around here
Join date: Apr 2011
Location:
Expertise:
Software:
Posts: 16
|
You can search free webdesign templates in google. Lots of site available in search engine for free templates. w3schools is a good site for tutorial. Good luck.
|
|
|
|
05-12-2011, 11:51 AM
|
#3
|
Status: Junior Member
Join date: May 2011
Location:
Expertise:
Software:
Posts: 36
|
For tutorials, w3schools.com is very good.I was also following it while learning.The thing you asked is quite relative.The choice depends on you.So, better search in Google for getting idea which is suitable for you.
|
|
|
|
05-13-2011, 01:04 PM
|
#4
|
Status: I'm new around here
Join date: May 2011
Location: Australia
Expertise: design, programming
Software:
Posts: 4
|
Hello,
I know this isn't similar to what you are after, but I constantly go back to this tutorial. I love it. For me, it was the moment where I "got" what CSS is all about. It just might help you recreate what you are after. Alternatively, as the previous posters suggested you could always look for free web templates. As far as the music looping is concerned, I would possibly look up some JQuery plug ins. Just be mindful of the size of your website where audio is concerned - you don't want a slow loading site to scare off your potential web users! 
http://www.subcide.com/articles/crea...-from-scratch/
|
|
|
|
05-17-2011, 01:30 PM
|
#5
|
Status: I'm new around here
Join date: May 2011
Location: The Netherlands
Expertise: Design
Software: Photoshop, Dreamweaver
Posts: 11
|
This is the monthly free item on themeforest.
This month it's a nice looking template.
Just edit it with Dreamweaver and upload it to you're host.
If you would like some more tutorials about Dreamweaver just try to search on youtube for it.
http://themeforest.net/item/slideo-b...-colors/109947
|
|
|
|
05-18-2011, 09:03 AM
|
#6
|
Status: I'm new around here
Join date: Dec 2010
Location: Houston, USA
Expertise: SEO, Design, Programming
Software: Dreamweaver & Notepad++
Posts: 22
|
... its made with framesnot a good SEO practice, these are what you call minimalists sites. They're simple yet elegant, all you need is a good idea and the rest can be done in css
|
|
|
|
05-31-2011, 10:40 AM
|
#7
|
Status: Junior Member
Join date: May 2011
Location:
Expertise:
Software:
Posts: 36
|
You can have lots of better ideas by searching for the new web sites.For codings also you can do that.The codings are different for the different website.Some sites are using the templates for their design.So, I think you better search fro the codes also.You can get better ideas from there.
|
|
|
|
06-03-2011, 08:11 PM
|
#8
|
Status: I'm new around here
Join date: Jan 2011
Location: San Diego
Expertise: Design
Software: Adobe
Posts: 7
|
Thanks for all the tips, the website is actually looking pretty good, I will show it as soon as I am done. I needed one more thing, I've searching for quite a while with no luck, I needed to have a picture at the bottom right corner, about 50x50 in size that scrolls with the page. Anyone knows what I am talking about?
|
|
|
|
06-03-2011, 08:24 PM
|
#9
|
Status: I'm new around here
Join date: Jan 2011
Location: San Diego
Expertise: Design
Software: Adobe
Posts: 7
|
|
|
|
|
06-10-2011, 08:12 AM
|
#10
|
Status: I'm new around here
Join date: Dec 2010
Location: Houston, USA
Expertise: SEO, Design, Programming
Software: Dreamweaver & Notepad++
Posts: 22
|
According to their stuff, which is actually quite simple...
the CSS
Code:
#socializethis{background:#CCC;border:solid 1px #666;border-width:1px 0 0 1px;height:15px;width:260px;position:fixed;bottom:0;right:0;padding:2px 5px;overflow:hidden;-webkit-border-top-left-radius:12px;-moz-border-radius-topleft:12px;border-top-left-radius:12px;-moz-box-shadow:-3px -3px 3px rgba(0,0,0,0.5);-webkit-box-shadow:-3px -3px 3px rgba(0,0,0,0.5);box-shadow:-3px -3px 3px rgba(0,0,0,0.5);}
#socializethis a{float:left;width:32px;margin:3px 2px 2px 2px;padding:0;}
#socializethis span{float:left;margin:2px 3px;text-shadow:1px 1px 1px #FFF;color:#444;font-size:12px;}
The HTML
Code:
<div id="socializethis" style="opacity: 0.7; height: 35px; display: block; width: 260px;">
<span>
<div id="sicons">
<a id="twit" title="Share on twitter" href="http://twitter.com/home?status=make%20an%20image%20move%20when%20the%20page%20scrolls%20%20http://csscreator.com/node/28676#comment-125403">
<a id="facebook" title="Share on Facebook" href="http://www.facebook.com/sharer.php?u=http://csscreator.com/node/28676#comment-125403">
<a id="digg" title="Share on Digg" href="http://digg.com/submit?phase=2&url=http://csscreator.com/node/28676#comment-125403&title=make%20an%20image%20move%20when%20the%20page%20scrolls%20">
<a id="stumbleupon" title="Share on Stumbleupon" href="http://stumbleupon.com/submit?url=http://csscreator.com/node/28676#comment-125403&title=make%20an%20image%20move%20when%20the%20page%20scrolls%20">
<a id="delicious" title="Share on Del.icio.us" href="http://del.icio.us/post?url=http://csscreator.com/node/28676#comment-125403&title=make%20an%20image%20move%20when%20the%20page%20scrolls%20">
<a id="buzz" title="Share on Buzz" href="http://www.google.com/reader/link?url=http://csscreator.com/node/28676#comment-125403&title=make%20an%20image%20move%20when%20the%20page%20scrolls%20&srcURL=csscreator.com">
</div>
This is used for informational purposes only, if you do decide to replicate any copyright action, if any, i ma not responsible for, this was to show you how they did it
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
| Thread Tools |
|
|
| Display Modes |
 Linear Mode
|
|
|
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed