Hope you can answer this question. I am using Dreamweaver MX2004 and want to include an image as a background in page properties. I don’t want the image tiled and I think there is a way to do that by using CSS, but I sure can’t find it in the Help section.

Can you point me in the right direction? By the way, I think CS4 and CS5 are far more difficult to use for those of us who only occasionally build a web page.

Thanks in advance,
Pete

Hi Pete,

I understand your reluctance to upgrade to a more complex version of Dreamweaver, but you won’t find the options you’re looking for in MX2004. To add a background image that does not tile, you’ll need to use Cascading Style Sheets, and those features were not included in the Page Properties in MX2004.

You can create your own style sheets in that version if you learn CSS and can write the code yourself, but believe me, that’s a lot more complicated. If you upgrade, you’ll find that the Page Properties features in later versions of Dreamweaver make it easy to control how a background tiles and the program generates the necessary CSS code for you.

You’ll find many free tutorials on the CSS features in later versions of Dreamweaver on my site at www.DigitalFamily.com.

Hope that helps,
Janine

I wonder if you could help me with the following: I’m new to building Web sites (I started 3 days ago!) and the problem I have is small but annoying. When defining rules for links, I am able to change the “hover” color but not the link color. When previewed in IExplorer, the link color insists on being purple when I’ve defined it as blue. Can you tell me what I’m doing wrong?

Hope to hear from you.
Regards,
Justin

Hi, Justin,

I’m guessing you’re seeing the visited link color in IE because you’ve already “visited” those links.

There are four color settings for links and you need to change all four. And keep in mind that you can use the same color for both active and visited links if you don’t want the color to appear to change after someone has visited the page.

On my website, you’ll find a tutorial on how to use CSS to create styles for links formatted in an Unordered List, which is a popular way to create navigation bars. Follow this link to the tutorial, where you’ll find more details about how to define styles for each of the four link states.

Best regards,
Janine

I have tried everything under the sun to get my site to look proper in IE on the PC. Every other browser looks fine, but in IE there is always a “gap” between the top div and the middle. The bottom looks fine.

Any suggestions?

Thanks in advance!

Sincerely,

Ronnie

Hi Ronnie,

Unfortunately, CSS differences in IE are a frustration for most Web designers. Microsoft just hasn’t followed the rules the way other browser makers have. As a result, to get your designs to look exactly the same in most Web browsers, you’ll have to move on to some advanced CSS techniques.

On my site, you’ll find links to a few places where you can continue your training. You’ll find instructions there to get you started with CSS and how to edit a CSS layout in Dreamweaver — they are designed to look good in many browsers from the start and can help you avoid problems.

If you really want to learn the best and latest, advanced CSS, I recommend AListApart.com for high-level CSS tips, but you won’t find much help with Dreamweaver there.

You may also appreciate my article about online browser emulators, which can help you compare your site on different browsers and even different versions of the same web browser.

I wish you all the best with your CSS,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

First of all I would like to say that your books Dreamweaver CS3 For Dummies and Web Sites For Dummies are excellent and have provided me with very useful information.

I am new at using Dreamweaver CS3 and on my first time creating a Web site. I’m attempting to build a Web site for my church and have some initial design questions. I’m using the fixed two-column/header/footer predesigned sample in DW and my question is how do you adjust the height of the banner area? I’m finding that the space is too small and most Web sites seem to have a larger space.

What height do you recommend and how do I adjust the predesigned sample to accomplish this?

I’m doing this task on a volunteer basis and would like to get the Web site up and running soon. I’ve followed your planning instructions and I’m ready to go.

Thank you so much,
Margie

Hi Margie,

Thanks for the note. This tutorial on my site should walk you through the process of customizing many aspects of a CSS layout: http://digitalfamily.com/dreamweaver/css-tutorials/editing-CSS-layouts.html

Hope that helps and I wish you all the best with your site,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

My links now seem to have a broken-lined rectangular box around them when you select a link. The line is the same colour as the link itself, but this was not there yesterday. Do you think I have a fault with the Dreamweaver application or is there another explanation?

Regards
John

PS It takes a bit of time to get your head around Dreamweaver CS3 Advanced but Janine is getting me there!!!

Hi John,

If the links are actually broken, you need to reset them in Dreamweaver to fix them and should check to make sure you’ve completed the Site Set Up process first.

If it’s just that they look different, you probably have a style for the ‘visited link’ that is different from the main link style. In HTML you can have up to four different styles for the four different states of links. The visited link style appears after you’ve clicked on a link, so your links will look one way the first time you view a page in a web browser, and then they will change to the visited-link style after you’ve clicked on them. That would explain why they look different today than yesterday.

To fix this, look for a style in the CSS Styles panel with the name a:visited. You can also choose Modify Page Properties and then click on the Links category to change the style. You can use the same color for all four settings or a different color for each, depending on whether or not you want your links to look different once a visitor has clicked on them.

Hope that helps and I wish you all the best,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

I’ve found your Dreamweaver CS3 tutorial extremely helpful and easy to understand, I highly recommend them to everyone.

I have one question: My menu and links have an outline (a dotted line) only when clicked. . . not the kind that’s fixed by using Property Inspector. After checking the digital family Web site I noticed it also happens with all your links and buttons. Is there any way I can remove it? It’s not that noticeable on the digital family Web site, but my Web site has a black background and the outlines that appear are white. I would greatly appreciate any insight you could offer.

Thank you,

Sandra

Hi Sandra,

Thanks for the kind words about my videos.

If your menu and links have an outline only when clicked, you may be able to adjust the corresponding CSS style. You can edit most of the link styles by choosing Modify –Page Properties and then changing the styles for the links, but if you have an outline around a link, that you’d have to edit in the CSS Styles Panel.

First, choose Window CSS Styles (to open the panel).

In the CSS Styles panel, select the All tab at the top and then look for the link styles, which should be named as follows:

a:link – controls how the link looks when the page first loads

a:visited – controls how the link looks after someone has clicked on the link

a:hover – controls how the link looks when someone rolls a cursor over it

a:active – controls how the link looks when someone is actively clicking on the link

Double-click the name of any style in the CSS Styles panel to open it in the CSS Rule Definition dialog. There you can click on the Border category and add or remove a border by adjusting the settings.

I hope that helps you solve your problem and I truly appreciate that you recommend my videos.

All my best,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

I just finished your Total Training DVD and I have really enjoyed it. I do have two questions.

I’m new to Dreamweaver and CSS, and after going through the training, I returned and worked a design for a web site I’m working on for a client. I’ve gone through it step by step as you described, and everything turned out great except for the alignment of the images. They all want to stay to the left of the page unless I set the left margin to around 100. Is that the only way to center images on the page? I’ve attached an example. I’d appreciate any suggestions you might have.

Also, can you recommend a good resource book for Dreamweaver?

Thanks for your help (both on the DVD and via this email),
Mike

Hi, Mike,

Thanks for the kind words about my video.

Like most things in Web design, there are many ways to handle this, but if you want to center all of the images at once and all of the text as well, as you have them in the design you included, you can simply add an alignment setting to the style for the div that contains the content. To vary the alignment, use different divs for different sections of the page and adjust the alignment as desired in the corresponding style.

Here’s how to align the contents of a div: I assume you already have a style associated with the div if you’ve been following my most recent trainings. So, for example, you might have an ID style called #mainContent that already surrounds the content you want to center.

You want to edit that style by double-clicking on it in the CSS Styles panel to open the CSS Rule definition dialog.

In the CSS Rule dialog, click on the Block category on the left, and then choose Center from the drop-down menu next to Text-align.

Click Apply to view the results in the design window. Click OK to close the dialog and save the change.

As for a book, you’ll find my Dreamweaver books along with many free tutorials in the Dreamweaver section on my site at www.DigitalFamily.com.

Hope that helps,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Thank you,
Jonathan W.

Hi, Jonathan,

The Active X warning appears in Internet Explorer anytime users check a site that uses a scripting language, such as JavaScript, on their local computer. That’s a security feature in IE designed to help warn users about potentially malicious programs. Once they have uploaded the page to the server and viewed it online, that message should disappear (unless they are using the most protective settings in IE).

In designing your site, you can, however, avoid this completely now and create rollover link effects by using CSS (instead of using rollover images with JavaScript). This approach has many benefits, including being more search-engine friendly and more accessible. You’ll find a free tutorial on how to create links like this on my site at:

http://digitalfamily.com/dreamweaver/css-tutorials/css-navbar.html

All my best,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

I picked up your training video for EW2 after playing through the introductory version that came bundled with EW2.

I’ve diligently worked my way through the first 6 chapters thus far and am totally blown away by the quality and depth you’ve covered. You’ really done a fantastic and amazing job. I find myself “grieving” that the information is rapidly coming to an end.

My background: I was a software designer for some 25 years, including the final 11.5 of those at Microsoft (working in the Complex Scripts part of the International part of Office). I happily left about 4.5 years ago to pick up a camera full-time instead. My wife and I are both shooters, a two-person team, and having an awesome time. We’re both huge animal lovers as well, so using your wildlife templates for the learning has been great.

I picked up EW2, as we’re expanding to offer simple, limited-scope websites for small businesses. The need is clearly out there, especially in the current economy. From a design point of view, we’re talking about very static sites, 4 or 5 web pages, and no information capture from website viewers. We may expand that role at a future date, but not with our initial efforts.

One of the things I’ve been particularly impressed with — I’m no stranger to HTML, at least how it was typically used 5+ years ago (lots of tables ? ghaaaa!). At that time, CSS was becoming more popular but I had no exposure to it; most of my work was with enabling the Office apps to support complex languages such as Hebrew, Thai, Arabic, Mongolian, the Indic family, and so on for client-side apps (lots of C++, C#, etc.).

So the design tips you pass along are all received under the scrutinizing eye of an old dev, and you’ve truly done a great job. I was constantly amazed at how perfectly your video examples exactly matched what I was seeing in EW2. That just doesn’t happen with most training I’ve seen or worked with. I did have to be very careful in many places to just click on the right portions of a given lesson (e.g., tags vs. content, ensuring the right context menu was showing), but being careful made everything work exactly as you explained. How many times have we encountered tutorials that miss a step, and then everything just falls apart?

Again: fantastic and so very well done!

Questions for you:

1. What would you recommend to continue my CSS education? I’m assuming there’s lots more to be learned, but I have very little time as a business owner to try a lot more varieties of training — if there’s anything more even out there. I’m very much a hands-on learner, so I prefer video tutorials.

2. Similarly, is there any training or learning resource you’d recommend to get up to speed for SEO?

3. I may be needing to purchase templates to correspond to some of our future clients. Can you recommend any providers? In particular, we’ll likely need certain medical/dental “looks.”

4. I need to ensure that sites we create will look good on mobile devices (PDAs, phones, etc.). I’d greatly appreciate any design best practices you could recommend.

Again, thank you for creating such a great product, and I’m hoping you can guide me with the questions I have posed.

Best wishes,
Jerry

Hi Jerry,

First, let me thank you for your kind, kind words about my videos.

Here are some of my favorite places to become more advanced with CSS:

http://digitalfamily.com/dreamweaver/css-tutorials/css-resources.html

SEO is a huge topic. Although I work at it, it’s not my specialty, but one popular site on the topic is www.SearchEngineWatch.com

You can also learn a lot just by exploring what Google says on its site.

As far as templates are concerned, there are many, many template sites out there and I don’t endorse any one over another. I generally create my own designs.

I’m also working on creating sites that will look good on mobile devices. I hope to add more resources to my site in the future about designing for mobile.

Hope that helps and I wish you all the best with your sites and your wonderful photography,

Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

My question: I designed a page in Dreamweaver 8, using layers, which I will convert into a template for the rest of my website. I used three layers: a header, a middle section (with two inserted layers for nav bar and text content section), and a footer. How do I keep the layers together so when I add more text to a page, the nav bar and content section expand in length and still stay attached to the footer? Right now the text section expands, but not the footer and the nav bar.

Thank you,
Shirley from Maine

Hi, Shirley,

Thank you for your kind words about my training. I haven’t stopped teaching Web design, but things have changed quite a bit since I created that Dreamweaver 8 video.

You ask a good question and you’ve clearly discovered some of the limits of designing sites with layers. Today most Web designers no longer use layers to create site designs because they lack the flexibility of other approaches to CSS. Indeed, in the latest versions of Dreamweaver, the Layer button was removed because of this trend.

My best advice is to upgrade at least to Dreamweaver CS3 (version CS4 just came out so version 8 is now two versions old – that’s a lot of dog years on the Web).

If you want to test the new version of the program, you can download it for a free 30-day trial by visiting www.Adobe.com/dreamweaver.

You’ll also find several free, written tutorials on using CSS with Dreamweaver CS3 and CS4 on my site at www.DigitalFamily.com/dreamweaver.

I hope that helps you to create the kind of design you want for your Web site and I wish you all the best,
Janine

I’m even more impressed with you for answering my email! Thank you for the information. (No need to reply.)

Shirley

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

]]> http://www.digitalfamily.com/dreamweaverblog/2008/12/how-can-i-make-layers-expand-in-length-with-text-while-retaining-my-design/feed/ 0