Photoshop Gurus Forum
Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!
A (sort of) blank canvas
- Thread starter reeksy86
- Start date
besmirched
Power User
- Messages
- 221
- Likes
- 94
freaky! lol, I see what you mean though, i will be hopefully this week changing the photo to a before and after shot, possibly by flash or something, as me and the Owner had discussed the pic.
on a slightly different topic, does the webpage open up ok for you, as in do you have to horizontally scroll for links etc?
I seem to on mine, and wondered if i needed to change some parameters in dreamweaver?
on a slightly different topic, does the webpage open up ok for you, as in do you have to horizontally scroll for links etc?
I seem to on mine, and wondered if i needed to change some parameters in dreamweaver?
ChrisHPZ
Power User
- Messages
- 371
- Likes
- 61
No side scrolling for me reeksy, though I am using a 25" monitor. If you want to change some "parameters" as you call it in Dw, you can easily constrain the width of the website by creating a css rule and inserting the new rule in your HTML file. The code below will constrain the content of your website to a container. What this does is keep your website from the dreaded side scrolling. In case you don't know CSS, I'll explain this simple bit of code.
Type the following in your CSS stylesheet.
.container {
width:1100px; /*Set width to 1100 pixels across the screen*/
margin:0 auto; /*Align website to the center of the screen */
}
What the above rule does is assign a fixed width of 1100 pixels and centers the div and all content inside the div to the center of any screen. Any CSS rule that is specified as a class will have a . symbol before the class name. The benefit of using classes is that they can be used multiple times in a HTML file. The name of the div that follows the . symbol does not matter. But it is a best practice to name your rules to something that reflects what they do. In this case, it will contain hence container, everything inside to a width of 1100px.
And in your HTML file, add this code just under the <body> tag in the code view side.
<body>
<div class="container">
Now go to the bottom of your HTML file. At the bottom there will be a closing body tag that looks like </body> Just above this tag, type </div> One way to keep track of your div tags is to use something called an HTML div tag comment. Trust me that they make reading code a lot easier. You can do this by typing <!--end div "your div name here" -->
Your edited HTML file in the code view should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coffee Shop Website Template</title>
</head>
<body>
<div class="container">
The rest of the HTML in your page here.
</div><!--end div container-->
</body>
On Adobe's website, there's a wonderful tutorial series that gets beginners going with HTML, CSS, and Flash. I watched and followed along with the exercise and I must say that I learned more through 15 videos than I did in multiple college classes put together. http://tv.adobe.com/watch/classroom...tion-in-dreamweaver-cs5/part-01-introduction/
Type the following in your CSS stylesheet.
.container {
width:1100px; /*Set width to 1100 pixels across the screen*/
margin:0 auto; /*Align website to the center of the screen */
}
What the above rule does is assign a fixed width of 1100 pixels and centers the div and all content inside the div to the center of any screen. Any CSS rule that is specified as a class will have a . symbol before the class name. The benefit of using classes is that they can be used multiple times in a HTML file. The name of the div that follows the . symbol does not matter. But it is a best practice to name your rules to something that reflects what they do. In this case, it will contain hence container, everything inside to a width of 1100px.
And in your HTML file, add this code just under the <body> tag in the code view side.
<body>
<div class="container">
Now go to the bottom of your HTML file. At the bottom there will be a closing body tag that looks like </body> Just above this tag, type </div> One way to keep track of your div tags is to use something called an HTML div tag comment. Trust me that they make reading code a lot easier. You can do this by typing <!--end div "your div name here" -->
Your edited HTML file in the code view should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coffee Shop Website Template</title>
</head>
<body>
<div class="container">
The rest of the HTML in your page here.
</div><!--end div container-->
</body>
On Adobe's website, there's a wonderful tutorial series that gets beginners going with HTML, CSS, and Flash. I watched and followed along with the exercise and I must say that I learned more through 15 videos than I did in multiple college classes put together. http://tv.adobe.com/watch/classroom...tion-in-dreamweaver-cs5/part-01-introduction/
Last edited: