[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to Jazz up my site?

Posted on 2005-04-22
13
Medium Priority
?
262 Views
Last Modified: 2010-04-25
im working on a website at the moment and my design is very plain and boring.
http://web.1asphost.com/irishbloke/bum_clan/template.asp

im using ASP and i have a template page but as you can see its very plain looking, how do i make it look better?

ive been looking at some websites and how they look design-wise.  i cant figure out how to have the "rounded" table effect you see on this site and on these sites;

http://www.tripod.lycos.co.uk/
http://www.macromedia.com/support/documentation/

How is it done? in dreamweaver? fireworks or other software?
0
Comment
Question by:gerrymcd
  • 5
  • 2
  • 2
  • +1
11 Comments
 
LVL 33

Expert Comment

by:humeniuk
ID: 13845392
You can see exactly how it's done by looking at the source code.  In IE, click 'View' -> 'Source'.  In Firefox, click 'View' -> 'Page Source'.

Typically, the rounded effect that you see is a background image used to simulate a rounded table or container.  In the case of the lycos site, you can see the background image itself here - www.tripod.lycos.co.uk/img/global/topcurve.gif.  Also, you should note that it's not a rounded table as the site design doesn't use tables, but rather uses CSS and CSS positioning, which is a much more efficient and effective way to create a page layout.

Anyway, once you see how something like this works, you should be able to duplicate it using an HTML editor from a high-end WYSIWYG editor like Dreamweaver to a something basic, like Notepad.
0
 
LVL 2

Author Comment

by:gerrymcd
ID: 13846061
So how do i go about doing it in dreamweaver / MX 2004?
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 13846416
The outline of the content area (the 'rounded table') is comprised of these three background images:

www.tripod.lycos.co.uk/img/global/topcurve.gif
www.tripod.lycos.co.uk/img/global/globalcontent_back.gif
www.tripod.lycos.co.uk/img/global/bottomcurve.gif

The content and the internal layout is placed overtop of this background - primarily the middle/globalcontent_back.gif part, which repeats to fill the length of the page.  And behind the content area background is the page background:

www.tripod.lycos.co.uk/img/global/bluesky_back.jpg

How do you do it in Dreamweaver?  First you get an understanding of how the page is constructed using HTML and CSS.  Once you understand that, you can use Dreamweaver (or another tool) to create something similar.  The biggest hurdle is to learn what you want to do.  After that, figuring out how to do it is much easier.  To better understand how this page is constructed, you can copy the source code into Dreamweaver to see how it is all put together.  Remember that you need the external style sheets (css) as well if you to get the whole picture.  This is a handy way to see how things are done, but remember that should be used for information purposes only, ie. you shouldn't use someone else's source code.
0
Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

 
LVL 1

Expert Comment

by:alinax
ID: 13849096
I saw site today. Looks better but
I must tell you that the correct use of .css is using stylesheets separatedly, not inside html.
You have this:
<style type="text/css">
<!--
body {
      background-color: #000000;
      background-image: url();
}
a:link {
      color: #0099FF;
}
a:visited {
      color: #990000;
}
.style4 {font-size: 10px}
.style7 {font-size: 10px; color: #FF0000; }
.style8 {
      color: #FFFFFF;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 9px;
      font-weight: bold;
}
.style9 {color: #666666}
.style10 {font-size: 12px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style11 {font-size: 12px; font-style: normal; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style12 {font-size: 9px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
-->

</style>
and you haven t used the power of DW in making your own stylesheet. On the right side of DW screen you have a tab for css. You click on add css, give it a name and attach it to the html. You can open notepad and copy the code as I did and save it as "name you choose.css" This css will work for all the html if you attach it to them.
When it is atached look between <head> </head> some place must appear text like this:
<link href="name you choose.css" rel="stylesheet" type="text/css">
0
 
LVL 2

Author Comment

by:gerrymcd
ID: 13850273
the problem with the site at the minute is ive made a background image in fireworks and put a layer over it in dreamweaver, which is so awkward as when i move the menu a bit it all moves out of place.

i have used stylesheets, just not every feature of them as i dont know much about them.  i still cant fugure out how to make a "table" have the rounded border effect. it seems its some kind of layer with a small corner picture but i cant figure out how to do it.
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 13850438
As explained above, it's not a small corner picture, it's a combination of three larger pictures that collectively form the background and simulates a table-like container.

The best way to do this is to use a css-based layout as was done in the example site.  However, without understanding basic HTML and CSS, you will have difficulty getting Dreamweaver to create this for you.  Dreamweaver is just a design tool, not a designer.
0
 
LVL 1

Expert Comment

by:alinax
ID: 13952780
Do you have the tabla round-border done?
If you do, try this
1)Use slices in Adobe photoshop
2) Make them appear as you like to be seen on your html
save them with save for the web. They´ll be saved in a folder  (it must be in the site folder)
3) Now use them as insert image in each part of the table.
4) Notice that this is not a final solution case they´ll be images and no text will be allowed over them.
5) This only will work meanwhile you study a little html and css.
6) I must tell that layers are not valid html. If you intend to validate you html with w3c.validator it won´t work.
7) As I gave you the css complete don´t know what else to say. Hope this helps for a while.
Alina
0
 
LVL 33

Accepted Solution

by:
humeniuk earned 375 total points
ID: 13964813
I think you're better off with CSS, but if you want to do rounded corners in a table-based design, here are a couple of tutorials from another thread that give step-by-step directions how:

www.dreamweaversites.com/tutorials/roundedcorners.htm
www.freewebmasterhelp.com/tutorials/corners

(suggestions courtesy of funhyun1 in www.experts-exchange.com//Q_21417422.html)
0
 
LVL 2

Expert Comment

by:funhyun1
ID: 13966556
If you have Dreamweaver MX 2004 just launch the program and from the CREATE FROM SAMPLES choose PAGE DESIGNS (CSS) and pick HALO LEFT NAV or anyone you want to explore in how a rounded corners are made using tables and CSS.  This is pretty much how the MAcromedia's website is made in a nutshell. I learned so much dissecting these provided templates from Dreamweaver. Hope this helps.
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 14396907
Good info here - probably a split between all three contributors is best.
0
 
LVL 2

Expert Comment

by:funhyun1
ID: 14397442
I agree.
:)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question