Advise for a new front page design.

  • Quartzman
  • Newbie
  • Newbie
  • Quartzman
  • Posts: 10

Post 3+ Months Ago

I built a website several years ago and it has grown over the years. I would love to redesign the front page (entry page). I have been using a rather outdated Dreamweaver 4 programme. I have so many pages on the site it’s getting a bit messy. I have 16 buttons on the front page, I would like to know how to get additional links from these main ones so pages will be easier for visitors to find the way round the site. I call these sub links from each main button. I have just looked through some of the websites that are shown on your “Site Review pages” this one has button links of the type I am thinking about :- http://www.indigitalworks.com/ Would something like this be possible or would I need a greater knowledge of HTML and even another software programme. Some advise will be appreciated.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

try with this one.

if you don't like it, a google search for 'css menu dropdown submenus' or such will turn out thousands of hits.
  • Quartzman
  • Newbie
  • Newbie
  • Quartzman
  • Posts: 10

Post 3+ Months Ago

Thanks celadine, It will give me something to look at during the week, I will report back when I loosew my way.

Thanks
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

ha ha ha no worries, we'll set you straight every time. just remember - it always works in the end!! :D stick with it.
  • Quartzman
  • Newbie
  • Newbie
  • Quartzman
  • Posts: 10

Post 3+ Months Ago

Hi Celandine
I took your advise and visited your link. The first thing I did was to create a new file called ddm1.html using my Dreamweaver 4 programme.

I then created menu with sub-menu as recommended . I did not have any problem with that.
How can I send you a copy of the html file? I am a bit new to this forum site. I don’t want a vertical menu, but would like a horizontal one.

I want to have this menu on my front page as a series horizontal line of boxes (perhaps 2 rows if not enough space)

My end result for my front page is to have a series of four or five small imagers at the top. (Thank I can change on a regular basis) under that the name of the club (full width), under that the menu bar as enclosed. Under that the main pages as selected from the menu. Do I have to use frames? As I currently do? The example on the page you suggested seems to be working towards vertical menu bar. Not exactly what I want. What would you recommend?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

humm let's see...... try expanding this part of your current css file:
Code: [ Select ]
ul li {
       position: relative;
}
  1. ul li {
  2.        position: relative;
  3. }

to read like this:
Code: [ Select ]
ul li {
       position: relative;
       display: inline;
}
  1. ul li {
  2.        position: relative;
  3.        display: inline;
  4. }

That might do the trick. Alternatively, instead of
Code: [ Select ]
display:inline;
try
Code: [ Select ]
float:left;


If all else fails, try here for similar instructions for a horizontal menu.

If you still run into trouble, feel free to post a link to your file (put it up online somewhere) so we can all look at your code... you could just send me the html/ css files by mail, but it's much better if you put them up, because then all the other forum members can try to help you as well. Good luck!!
  • Quartzman
  • Newbie
  • Newbie
  • Quartzman
  • Posts: 10

Post 3+ Months Ago

Hi Celandine, Sorry for delay in getting back to you. I told you I would have problems. I have tried everything but I need to go back to basics to try and understand the relationship between css and HTML I am using with Dreamweaver 4.

I have gone back to the beginning and have created a test website using two frames. I think I have created what I want in a css file (actually in HTML at this stage). I just can see how to link the two together what I need to do. I have created a web link that will take you to four pages I have created. Can you look and tell me if I have done anything right.

This is the link (link removed)

I shall be around most of next week so should be able to get back to you quickly - if you can help.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

hmmm, I don't think you should be using frames.

could you send me a jpeg image of how you want your page to look, and I can probably give you a framework of one or two html pages plus your css file (yes you need only one) - this will probably be easier than me trying to explain the basics step by step.... then you can take it on your own from that framework, and just looking at it should show you how things work basically.

deal?
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

I agree, frames aren't exactly ideal.

Try and find a simple css template to get started with. Should be a single css file, some images, and a html page. (Try this actually - http://www.freecsstemplates.org/download/zip/compromise)

I find that it's alot easier to get your head around this way - rather than creating your first html/css page from scratch.

In the html page there's a link to the css page:

Code: [ Select ]
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />


The CSS page is a styling sheet - without it your website would be functional, but just plain text on a white background - not very user friendly. If you're using firefox, you can view the current website without the style - click View -> Page Style -> No Style.

This way, you can easily change the look of the whole site by just modifying the css page. For example, to change the background image, look for

Code: [ Select ]
body {
    margin: 0px;
    background: url(images/img01.gif) repeat-x left top;
...
  1. body {
  2.     margin: 0px;
  3.     background: url(images/img01.gif) repeat-x left top;
  4. ...


and change "img01.gif" if desired.

Hope this helps
  • smith21
  • Born
  • Born
  • smith21
  • Posts: 2

Post 3+ Months Ago

Quartzman wrote:
I built a website several years ago and it has grown over the years. I would love to redesign the front page (entry page). I have been using a rather outdated Dreamweaver 4 programme. I have so many pages on the site it’s getting a bit messy. I have 16 buttons on the front page, I would like to know how to get additional links from these main ones so pages will be easier for visitors to find the way round the site. I call these sub links from each main button. I have just looked through some of the websites that are shown on your “Site Review pages” this one has button links of the type I am thinking about :- http://www.indigitalworks.com/ Would something like this be possible or would I need a greater knowledge of HTML and even another software programme. Some advise will be appreciated.

i think you should try w3school tutorial for doing your job it will be useful for you.so go ahead.and do you job perfectly.
  • Quartzman
  • Newbie
  • Newbie
  • Quartzman
  • Posts: 10

Post 3+ Months Ago

Alex89 & Smith21, Thanks guys I have had some good advice and thanks to Celandine I am at last moving ahead - slowly. I expect I will be back when I get stuck again.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Did you get a bit more comfortable with manipulating the CSS to alter the appearance of the page? Getting used to that concept is really the key............ you saw how simple the HTML of that test page I sent you was - all style was in the CSS. Feel free to come back with more problems :D

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 36 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.