Editing the layout of a template?

Kesava

New Member
I have no experience with HTML or CSS and I recently downloaded a web template which consisted of an index page, a css stylesheet and an images folder. If I open the index page in Dreamweaver, I can edit the text on the website and I know how to edit the images and so on, but I am not sure how to edit the actual layout of the page.

Would I need to edit the stylesheet in order to do so? If not then how can I change the layout?

Thanks :)
 

PixelPusher

Super Moderator
Staff member
Depending on the extent of your layout changes you will need to edit the css and possibly the markup (HTML). If you have no experience in either of those I would suggest you check out W3 schools or some site like that to get a basic understanding of the languages.
 

Kesava

New Member
I have looked at the basics of both HTML and CSS on that website. I'm sure if I know what I need to do then I can figure the rest out myself.

What do I need to do to make basic changes to the layout?

Although I'll test this out myself in a minute, can I copy and paste bits of code in the HTML section so that for example I can move something that is in the header into the footer? Would that work or is there more to it than that?

Also can you explain to my in basic terms what HTML and CSS do? From my understanding, HTML is basically for the content and CSS is for telling the content how to be formatted. Is that somewhat how it works?

Thanks
 

constanthosting

New Member
you certainly can copy and paste code from here to there and such. just make sure if you copy a <div> then to get the ending </div> and so on and so forth with other elements... If the change doesn't work you can always undo it. Poking around like that is a great way to learn.

it really depends on how the template is already set up about how one would go about changing the layout and all. for the most part each thing is unique in itself built upon a bunch of common stuff. :) got a link to what you have so far? :D
 

Kesava

New Member
Right now I am throwing around a few ideas for a website so for now I'm just trying to learn skills rather then design my final website.

www.medsols.com

I found a random template which looked interesting to edit. I'll find a nicer one when the time comes. I'll do some work on it tomorrow to get the background to fit.

For my first change I would like to move the banner down and have the box that is currently in the top left moved to the top right, above the banner.

Do you think that I'd be able to do that by editing the HTML code? Or would such a big change usually need more skill? I understand that when I do that the colours and so on aren't going to match up, but I can do all that later.
 

Kesava

New Member
I have decided to try something different. Does anyone have experience with Dreamweaver? What I want to do is have a picture in Dreamweaver that I can write text on, like with the template I linked to in my previous post. When I open that templates html file with Dreamweaver I can edit the text in the top left box the same as I would in a word processor.

How can I make this happen with a new picture?

Thank you
 

PixelPusher

Super Moderator
Staff member
Not sure I understand what your asking? When you say picture are you referring to a photograph image? if so there is not a photograph with text written over it in site you linked to.
 

Kesava

New Member
I appologise if I'm not being clear. I will ask one thing and then while I am waiting for a reply I'll be trying other stuff and end up going down a different road. So I'm never replying from the same angle as when I asked the question. If that makes any sense.

EDIT: For example: Right now, when after replying to this I actually managed to create image hotspots using Dreamweaver.
So now I am able to make anywhere on an image link to somewhere else.

Now the question I need to ask is, how do I layout the website. Lets say that I get all my pictures together, such as a banner, links bar etc... What do I do after that? Can I just arrange them all in live view in dreamweaver? Or do I need to have a css file that tells everything where it needs to be?

Thanks
 
Last edited:

PixelPusher

Super Moderator
Staff member
Your right, you do jump around a little, :D but in answer to your question (at the end of your last post)...

When you say "live" view, I assume you mean the "Design" view in DW. Don't use that view. It is very unreliable. Use the "Code" view and preview your changes in a web browser.

To build the site you are going to have to use markup (HTML). This is your base, your building block, your corner stone. You then manipulate this markup through the use of CSS--colors, font types and sizes, positioning, etc.

Think of the markup as the canvas and the CSS as the paint. A plain canvas is dull and unappealing, and paint is useless without a means to apply it.
 

Kesava

New Member
Yes I did mean design view. Ok, well I have worked out how to use hotspots in Dreamweaver that link to other parts of the website. Now if I want to start working on the CSS, what do I need to do?

I will research all I need to soon, but for now I'd just like to know what exactly I have to do to create a CSS file that is linked to my HTML page in Dreamweaver. Once I have done that I guess I can research what I need to do to work with CSS and add to the file later. But if you could help me set it up then that would be helpful.

Thanks
 

Kazoo

New Member
Just flicking through the forum here and found your last question.
I am just trying to establish the root meaning of your last particular question. Are you asking how to link pages within your site?
First of all HTML and CSS are different elements of a site or page. HTML is Hypertext Markup Language, this is a language or code that a server can read as it cannot read for example text that is italicised or bolded for example, in the same way it cannot read imagery. So you have to use Markup. CSS on the other hand means Cascading Style Sheet, as the title suggests it means just that..the style or layout of your sheet or page.

To link these pages together in dreamweaver, simply locate the page you want to link and open it in "split" view (i reccommend this as you can learn about what is going on behind the scenes of both worlds). Now go down to your "page properties panel" and you should find a "link" section that should display the page name e.g something.html. To the right of that you should find an icon that says "point to file" click on that icon and drag the arrow and point to the corresponding page in your file panel i.e something.html or whatever logical page you choose. This will link pages of your site together.

Hope this answers your question
 
Last edited:
Top