Beginner web designer needs help with Dreamweaver CS4

**morea** · 08-07-2009, 10:51 PM

Hi Scott, welcome to GDF.

When you have a few moments, please take a look over the threads posted here. These explain our forum rules and policies which probably differ a bit from other forums that you've visited.

I'm a print designer and can't help you with Dreamweaver, but I am sure that someone will be along shortly to help you with that.

Landshark · 08-08-2009, 12:45 AM

Thanks for the heads up, I just read through the guidelines and rules.

**morea** · 08-08-2009, 12:47 AM

thanks for that. I knew I liked you.

There are a few of us who check in "after hours", but most people flew out the door at around 4:58pm for the weekend.

Don't be discouraged if you don't see a lot of response before Monday morning, and don't be afraid to bump the thread then if you haven't had an answer.

CkretAjint · 08-08-2009, 01:01 AM

hmmm... You are talking about loading the content into the designated window/space without having the page reload the header and left navigation. Correct?

Landshark · 08-08-2009, 01:02 AM

Ahh, ok cool thanks for that tip. I browsed around the net for a bit trying to find a decently active forum for web design help. I saw a lot of very well answered questions here so thought I'd post up.

My question isn't really urgent since right now web design is just a hobby I'm starting. I can usually figure stuff out, but sometimes I over-complicate the basic things and need help getting my brain straightened out again. haha

Landshark · 08-08-2009, 01:05 AM

Originally posted by CkretAjint View Post

hmmm... You are talking about loading the content into the designated window/space without having the page reload the header and left navigation. Correct?

Yep, that is correct.

Specifically I want to know how to designate the frame that will be loading the new content as a target that links on the navigation bar will link to.

Example: I have the 'blog' link on the left frame and it opens up the page sharkonland.com/blog

I want the blog page to load up into the existing content frame (so the navigation and title frame don't move, but the content frame loads the new content). I understand the idea of how it works and how to set a target frame for the blog link. The problem is when I create the frames from scratch, the content frame doesn't show up in the 'target' drop-down menu. That is the thing I want to know, how to make the content frame show up in the target drop-down menu.

tZ · 08-08-2009, 01:15 AM

Frames raise numerous accessibility and usability problems. Its in your best interest to learn design and client-side programming without resorting to frames. A more productive way to spend your time would be to learn everything you can about HTML.

Considering your more interested in the coding side of things semantic web standard HTML is a must. HTML it self can be learned with little to no design knowledge. Its much more light weight then a programming language, but its a good place to start considering your interest in front-end development.

I highly recommend closing Dreamweaver and opening a text editor. Then looking at the resource thread at the top of this forum to some great links to start you on your way.

A good exercise might be to take certain pages of the site you created and write them in semantic, valid mark-up (HTML). W3C Schools has some good beginner material on writing HTML as well as HTML dog. SitePoint is also a good place visit considering its vast array of books, articles and helpful forum members.

I'd answer your actual question but I haven't used frames in about 5 years…

tZ · 08-08-2009, 01:31 AM

home page made with semantic and valid HTML:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Landshark's Home on the Internet</title>
</head>
<body>

<div id="container">

	<h1>Landshark's Home on the Internet</h1>

	<div id="content">

		<div id="sidebar">

			<dl id="nav-main">
				<dt>Navigation</dt>
				<dd><a href="#">Home</a></dd>
				<dd><a href="#">Blog</a></dd>
				<dd><a href="#">MyPics</a></dd>
				<dd><a href="#">MyVideo</a></dd>
				<dd><a href="#">MyFiles</a></dd>
				<dd><a href="#">MyStuff</a></dd>
			</dl>

			<dl id="nav-external">
				<dt>External Links</dt>
				<dd><a href="#">Landshark on Myspace</a></dd>
				<dd><a href="#">1stMI Gaming website</a></dd>
			</dl>

		</div> <!-- end of #sidebar -->

		<div id="page">

			<p>Welcome to Landshark's Home on the Internet.</p>
			<p>This is a pretty quick and basic page used to navigate 
			around my site content. Here you'll find my blog, links to 
			raw data such as my pictures and other files, videos, etc.</p>
			<p>Use the navigation page on the left to find what you are looking for.</p>

		</div> <!-- end of page -->
	
	</div> <!-- end of #content -->

</div> <!-- end of #container -->

</body>
</html>

CkretAjint · 08-08-2009, 01:40 AM

tZ, would one use dl/dd tags for the navigation? or ul/li tags?? I thought that the SEO guys preferred ul/li tags. Plus, they display as a nice list if your css doesn't load correctly.

tZ · 08-08-2009, 02:44 AM

Originally posted by CkretAjint

tZ, would one use dl/dd tags for the navigation? or ul/li tags??

I've recently begun using a definition list when something has a heading, but it doesn't quite seem right to use a heading. If that makes any sense…

The "headings" Navigation and External Links are directly related to content. So if its not absolutely necessary to use a heading tag a dl is a cleaner and more semantic way to mark up such content.

The only downside is SEO. If content is important to SEO then using a definiton list wouldn't be appropriate. However, here it doesn't quit seem like that is case. I wouldn't feel right making External Links and Navigation headings.

Unless I could use a generic heading tag like in the XHTML2 where the heading is relative to encapsulating element rather then the entire page. In HTML 5 this could also be done using a section element. However, that isn't the case with HTML 4. In HTML 4 headings are relative to the page. Navigation and External Links aren't all that important to the page to get a heading tag.

HTML Code:

<ul>
	<li><h2>Navigation</h2>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">MyPics</a></li>
			<li><a href="#">MyVideo</a></li>
			<li><a href="#">MyFiles</a></li>
			<li><a href="#">MyStuff</a></li>	
		</ul>
	</li>
</ul>

The proper heading level is ambiguous here and I don't believe the "proper" heading level can really be determined. Besides using a definition list results in less code. The ul requires 3 levels and the dl only requires one. In actuality the entire thing could probably be placed in a single dl to compact the code even more.

HTML Code:

<dl id="nav-main">
	<dt>Navigation</dt>
	<dd><a href="#">Home</a></dd>
	<dd><a href="#">Blog</a></dd>
	<dd><a href="#">MyPics</a></dd>
	<dd><a href="#">MyVideo</a></dd>
	<dd><a href="#">MyFiles</a></dd>
	<dd><a href="#">MyStuff</a></dd>
	<dt>External Links</dt>
	<dd><a href="#">Landshark on Myspace</a></dd>
	<dd><a href="#">1stMI Gaming website</a></dd>
</dl>

The only problem there though is that the encapsulating element separating each nav is lost. Which may not be a problem or it could be a gigantic problem depending on the complexity of the design.

Originally posted by CkretAjint

I thought that the SEO guys preferred ul/li tags. Plus, they display as a nice list if your css doesn't load correctly.

It wouldn't make a difference. The only problem with using the definition list is that a heading can't be nested in the term (dt). That is why using them is generally not a very good idea. However, if the content doesn't absolutely need a heading or it wouldn't feel right using a heading then a dl is the way to go. It results in less code and a more semantic relationship - definition term relates directly the definitions (dd).

You could also do something like this if you think the extra tags will be useful for presentation purposes.

HTML Code:

<dl id="nav-main">
	<dt>Navigation</dt>
	<dd>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">MyPics</a></li>
			<li><a href="#">MyVideo</a></li>
			<li><a href="#">MyFiles</a></li>
			<li><a href="#">MyStuff</a></li>
		</ul>
	<dd>
	<dt>External Links</dt>
	<dd>
		<ul>
			<li><a href="#">Landshark on Myspace</a></li>
			<li><a href="#">1stMI Gaming website</a></li>
		</ul>
	</dd>
</dl>

Using definition list here avoids the need to decide the appropriate heading level. When… there really isn't one.

With the above code now the sidebar div could even be removed.

tZ · 08-08-2009, 03:02 AM

This may not be perfect for presentation reasons, but the whole page can be written in only 31 lines. if you haven't noticed I'm a fan of doing as much as I can with as little as possible,lol.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Landshark's Home on the Internet</title>
</head>
<body>

<h1>Landshark's Home on the Internet</h1>
<dl id="nav-main">
	<dt>Navigation</dt>
	<dd><a href="#">Home</a></dd>
	<dd><a href="#">Blog</a></dd>
	<dd><a href="#">MyPics</a></dd>
	<dd><a href="#">MyVideo</a></dd>
	<dd><a href="#">MyFiles</a></dd>
	<dd><a href="#">MyStuff</a></dd>
	<dt>External Links</dt>
	<dd><a href="#">Landshark on Myspace</a></dd>
	<dd><a href="#">1stMI Gaming website</a></dd>
</dl>
<div id="content">
	<p>Welcome to Landshark's Home on the Internet.</p>
	<p>This is a pretty quick and basic page used to navigate 
	around my site content. Here you'll find my blog, links to 
	raw data such as my pictures and other files, videos, etc.</p>
	<p>Use the navigation page on the left to find what you are looking for.</p>
</div> <!-- end of content -->

</body>
</html>

Besides with a CSS reset all the styling is removed any way. That is generally what I use and add only the styles that I absolutely need. That way everything gets normalized and less bug hunting has to go on later if all default styling has been removed.

CkretAjint · 08-08-2009, 03:13 AM

Great stuff tZ! Thanks!!!

Whenever I new my new site up I will make sure I PM you the link to check out and get your honest opinion (If you don't mind). The validation site says that the code is green (good), but I still feel like I am over doing a few of my layout techniques with my divs. We shall see though!

Landshark · 08-08-2009, 05:15 AM

Hey, TZ and everyone else, thank you very much for your insightful input! Don't worry, I'm humble enough to take advice from those who know more than me.

Obviously I'm very much a beginner at this stuff. My first goal for my personal site was simply to make it function and do so as quick as possible. That part worked out fine (albeit, it's ugly, lacks character and design, but it works).

I'll definitely step back and take another approach at this (not using frames). I appreciate you helping head me in the right direction. I'm also a fan of doing more with less.

tZ · 08-11-2009, 04:05 AM

Originally posted by CkretAjint

Whenever I new my new site up I will make sure I PM you the link to check out and get your honest opinion (If you don't mind). The validation site says that the code is green (good), but I still feel like I am over doing a few of my layout techniques with my divs. We shall see though!

Wouldn't mind taking a look at it all. Send me the link when it gets up and I'll be glad to take a look at it CkretAjint.

Originally posted by Landshark

Hey, TZ and everyone else, thank you very much for your insightful input! Don't worry, I'm humble enough to take advice from those who know more than me.

No worries, we all need to begin somewhere. You should have seen my first website…

Beginner web designer needs help with Dreamweaver CS4

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment