Login | Live Chat & Podcast at 1:00PM Eastern on Sunday! |
 Web Design & Development |
 Search | |
| |
20-Aug-2010, 04:01 PM
#1 | ||||||
| Dreamweaver help!!! |
| |
20-Aug-2010, 10:01 PM
#4 | ||||||
| Sorry for not being more clear.  I meant that it sounds like you want a fluid page layout that fills the browser's viewport (the part of the browser window that shows the page) yet you want to restrict the height to 768px tall, due to the images you're using which are created with a 1024x768 resolution in mind. That sounds a bit confused to me. So, first if you want the page to fill the browser viewport, regardless of its size, you'll need to design the page with that in mind. I have no problem with your using Illustrator to create the look of the site but to make that "perform" as a live HTML page that behaves the way you want, you'll need to do some additional design work in DreamWeaver. You can have a div that is sized to 1024x768 max dimension that scales based on the browser window size or you can have a div that takes the full height and width of the browser window. By making the background gradient the background of the body element, you can get more flexibility with the content that overlays it. If you do this right, you won't have the 768px height restriction you have now. You can position your nav pane on the left side without having to used a fixed position. Depending on the page structure you come up with, you can use an absolute position or a relative position. So, I think you should decide upon a page layout first (outside of your Illustrator work) and then incorporate your Illustrator work into that layout rather than trying to keep the Illustrator work "intact" and forcing the HTML to work around it. Again, as for the blurry images, that's due to images being scaled to sizes larger than their natural dimensions. Using max-width and max-height can prevent the blurring of images (IE issues not withstanding). Peace... |
20-Aug-2010, 11:03 PM
#5 | ||||||
| AHHH i understand. Sorry i have never used dreamweaver before so ive just been fiddling and looking at tutorials. Ok so if i redesign it should i design it to the maximum resolution i want. I wouldnt mind the panel on the left being fixed. Should i code it so that the panel would have a z-index of lets say -1 and the background= -2 (within the body) and the content=1? And should i set up my site in a table within a div? and then insert the images one by one? because when illustrator saves the slices it saves it as a html file as well, this is what i have been working from. i open the saved html page and try to import my background that way. The reason for this is because i am not that familiar with dreamweaver . i would ultimately like my home page to be fixed with everything fitting the browser (fluid), and for other pages the nav bar should remain the same but the content would be scalable. But currently the navagation bar has my copyright bit at the bottom which for some reason is lower than the 100% width and height of my background and the panel. So it looks like the content is larger. I am not sure but could it be because the navagation bar images are not in percentages but the content which are buttons are? I havent made the navigation bar in percentages because they are rollover images which shouldnt be distorted as they are text. Thank you very much youve been a great help. I am just unsure as to how to start of my whole website and implement the design within it. |
21-Aug-2010, 12:48 PM
#6 | ||||||
| I understand. Illustrator won't "know" about things like a fluid page layout, etc. If you wanted the page to be a fixed size, we could easily put the slices Illustrator created in a div and center that on the page, etc.You can still make use of your Illustrator work since that provides an image of your ultimate design goal. Depending on how the slices were carved, they might be of direct use. Otherwise, you might have to recreate some of the images you'll want to use so they will work better/easier on the site. You shouldn't have to do much layering of content via z-index and if you get the sections of the page carved out right, the nav menu can remain in a fixed position and with fixed dimensions while the surrounding content repositions and/or scales as the browser window size changes. I suggest starting out with a "wire frame" page, that consists of the DIVs you want with colored borders defined so you can see where you content will be displayed fairly easily. EDIT: Here is an example of what I mean: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Wireframe</title>
<style type="text/css">
body { width: 100%; height: 100%; margin: 0; padding: 0; }
#navigation {
border-right: 1px solid red;
border-bottom: 1px solid red;
float: left;
height: 400px;
width: 150px;
padding-left: 10px;
}
#footer {
border-top: 1px solid red;
height: 75px;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
font-style: italic;
font-size: small;
}
#content {
padding: 10px;
border: 1px solid green;
margin-left: 160px;
}
#header {
border-bottom: 1px solid black;
text-align: center;
height: 75px;
}
</style>
</head>
<body>
<!-- Header -->
<div id="header">
<h1>Page header goes here</h1>
</div> <!-- End Header -->
<!-- Page body -->
<div id="pageBody">
<!-- Nav menu -->
<div id="navigation">
<p>Navigation menu</p>
</div> <!-- End Nav menu -->
<div id="content">
<p>Page content goes here</p>
</div>
</div> <!-- End page body -->
<!-- Page footer -->
<div id="footer">
<p>The footer goes here</p>
</div> <!-- End page footer -->
</body>
</html>
Peace... Last edited by tomdkat; 21-Aug-2010 at 12:57 PM.. |
21-Aug-2010, 02:50 PM
#7 | ||||||
| ok i see, i understand that divs are used to contain material i just didnt know how to organise my page so that i can insert all my slices and position them as i wanted. If i wanted to make my home page fixed but still scale according to different screen resolutions so that all the content would be within the page, how would i go about this? My main aim is to get everything within the browser window for as many resolutions as possible. This way on the home page the user wont have to scroll. Then for my actual project pages i can have scrollable content with a fixed navigation bar. However, i dont know what resolution to design my page to. Whether to design it at the maximum resolution and then have it scale to the smaller resolutions accordingly or to design it at the smallest resolution and have it scale larger which at the moment is making some of my slices lose quality. Thank you for your example im starting to understand it a little. Could i ask how you organise your divs into different areas? and should i make all the seperate divs for example the navigation div and content div within a main div which gives the page dimensions? |
21-Aug-2010, 03:10 PM
#8 | ||||||
| Quote:
Quote:
Quote:
Quote:
Quote:
In my example, there are 5 areas: header, footer, pageBody, navigation, content.Save my example HTML above to a file on your computer and load it in your browser and in DreamWeaver. Seeing it might shed some light on what's going on. Peace... |
21-Aug-2010, 03:29 PM
#9 | ||||||
| ok so how else would i make my website if i dnt use slices? because thats the only way i have been taught lol ok so if i make my design on illustrator to my highest resolution i think that will help. and then i will need to make everything scale down to 1024x720 pixels. The thing is that my slices arent photographs they are images which i have edited to make rollovers etc on illustrator. So that is why i designed it all on illustrator. Is there no way i can position all my images within the html page you have given me? i have removed the header and footer as my site only needs the left panel and the main content. the left panel works as my navigation and header where my logo is on the top left. Thank you for you help again. Your a lifesaver |
21-Aug-2010, 03:37 PM
#10 | ||||||
| From what I understand, in Illustrator you make your "page" as a single image. Then, Illustrator will "slice" that big image up into smaller images and it will generate a HTML table that will piece the "sliced" images together to reform the "main" image. I'm saying it's ok to use Illustrator to design the page so you'll know what you're after but instead of using the "sliced" images, as generated by Illustrator, use the graphic components as images you put on the page. For example, the background gradient. That should be a very smaller (and tall) image that you can make the background of the body element. You won't need a "slice" for that and there will be a "slice" that has some other image overlaying the background gradient. By keeping the image components that make up the "master" image as separate parts, you can more easily design the page to behave the way you want and be fluid. Illustrator will generate a static sized image for you and you want to make that image effectively behave in a non-static fashion. Peace... |
21-Aug-2010, 05:00 PM
#12 | ||||||
| If you have ALL of the graphic components as separate images, that makes things much easier since you can put those images on the page where you want and not have to worry about the current restrictions you're dealing with now. As for screen resolutions, the idea behind designing with the "smallest screen" in mind is to make sure your content will appear properly on smaller screens, possibly without the need for scrolling left or right or up and down. Then, as the screen resolution increases, the content should move around properly, provided the styling rules governing the positioning of the content are correct. Since your background image is a separate image, you should be able to assign it as the background of the body element. This will make the entire viewport fill with the background image. I'll attach a ZIP file with the above sample HTML, edited to remove the header and footer DIVs and to have some content, including images in a fake navigation menu. Of course, this is intended to be a proof of concept. The background image would be the image you created in Illustrator and the navigation images would be the ones you created in Illustrator. I used a CSS Sprite in my example, mostly because I need the practice, but you don't need to use Sprites. I can make a version that doesn't use Sprites if that would help. Save the HTML file and the images in the same folder and then you can open the HTML file in your browser. Peace... |
21-Aug-2010, 05:22 PM
#13 | ||||||
| wowww yess that would be great. all it really is is a div on the left which holds the nav bar, the right a div which holds all the content images. The slices are saved as separate images so it should be fine if i just place them wherever i need to. also there is a gradient behind the navigation bar so it makes it easier to see. This is why i assigned z-index values because technically there are three layers. One is all the content including the nav bar and then there was the panel gradient behind it and then the background gradient behind that. Sorry for being a nuisance, but you have been very helpful. I find it difficult to position my images within the divs as u cant move them freely without using code, should i create a table within the div to hold my separate images? Also the reason i changed my site resolution was the same as what you mentioned about people with smaller resolutions being able to see the website completely and without horizontal navigation bars, and larger resolutions would do the same so everything fits within the window. thank you |
21-Aug-2010, 05:35 PM
#14 | ||||||
| Quote:
In my example, the body has the gradient at its background so naturally, ANYTHING displayed on the page will have the gradient as it's background. My navigation DIV is a "peer" to the content DIV and it's positioned to the left side of the page body. The content DIV isn't "stacked" on top of anything at all. Scollbars will appear depending on the amount of content on the page combined with the viewer's screen resolution (which influences the browser window size). Quote:
Quote:
Peace... |
 |
| |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| |
|
Similar Threads | ||||
| Title | Thread Starter | Forum | Replies | Last Post |
| Flash - Dreamweaver Problem - Help Please. | artari | Web Design & Development | 0 | 07-Oct-2009 04:53 PM |
| Point and Click for sound to play in Dreamweaver problem | phoenix27ca | Web Design & Development | 4 | 07-Jan-2009 10:32 PM |
| Dreamweaver issues | tjschuring | Web Design & Development | 14 | 11-Oct-2008 05:41 PM |
| Dreamweaver 8 Issues | tech.jk | All Other Software | 0 | 24-Sep-2008 05:38 AM |
| Adobe Dreamweaver CS3 | Gopaldaas | All Other Software | 0 | 20-Sep-2008 09:02 AM |
| You Are Using:  |
Advertisements do not imply our endorsement of that product or service. All times are GMT -4. The time now is 01:05 AM. Copyright © 1996 - 2011 TechGuy, Inc. All rights reserved. |  |
Facebook
Twitter
TechGuy.tv
TSG Mobile