Basics of CSS and Templates

Hello
I'm currently working with CSS and Templates and have
limited experience. Does anyone know of some good resources to get
me up to speed quickly?
Thanks.

CSS -
http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Templates -
Here, or here -
http://www.dreamweavermx-templates.com
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"merffe" <[email protected]> wrote in
message
news:ecdesc$o33$[email protected]..
> Hello
> I'm currently working with CSS and Templates and have
limited experience.
> Does anyone know of some good resources to get me up to
speed quickly?
>
> Thanks.
>

Similar Messages

External CSS and Templates

I am fairly new to using CSS and Dreamweaver having finally taken the plunge and dropped Micromumble mumble... I am wondering about external CSS and templates. When I assign a template to the external CSS does the CSS also translate down to the documents that are attached to the template or do each of them need to be attached to the CSS itself to work as well? Thanks for any help offered.

Just to clarify, if I have a class to define the color of my links in the template that is used in the uneditable regions but I also use the links in the editable regions, do I need to attach the CSS to the child as well?
Need to clarify the terms here.
How is the class defined and what do you mean by attached the CSS?
Probably easier to explain by example.
Can you paste the code here?

CSS and Template availability in WebI Report

Hi All,
Does WebI provides facility to import CSS Stylesheet for using those settings in report?
Can we create Templates in WebI?
Our requirement is to decrease the manual task by using single CSS Stylesheet and Templates for creating multiple/many Reports.
Regards,
Arjun

Hi,
yes, it is possible in BOEXI:
You just have to edit the related defaultConfig.xml file on the BO Server:
Windows based BO installation:
<BO folder\Tomcat55\webapps\AnalyticalReporting\webiApplet\AppletConfig\defaultConfig.xml
Unix based BO installation:
/<BO_install_folder>/bobje/bobje/enterprise120/warfiles/WebApps/AnalyticalReporting/webiApplet/AppletConfig
Can we create Templates in WebI?
In XI R2 there is no support for Webi templates as there is with Deski. We worked around this by creating a Webi report with all of the standard components, header, footer, etc. and saved that to a templates folder. The report was marked read-only so no one could change it and any new reports were created by copying the template report.

Css or template

New to this forum and new to Dreamweaver
MX2004……so please be gentle.
I am in the process of teaching myself to use Dreamweaver
MX2004 with a view to producing a website to display a range of my
photographic work and possibly selling some images.
I need to produce a very simple site consisting of a home
page, a biography page, a contact page and a gallery. I want to
have a black background with white text on each page.
I have read about CSS and Templates. Is it best to define the
look/appearance i.e. font/text colour/background colour of each
page using CSS or a Template ? Any advice would be much

Define the look of the page using CSS. Control the content of
the page
using Templates. Build the layout of the page using HTML.
Each of these
has a separate function and a separate purpose.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"TurtonBlue" <[email protected]> wrote in
message
news:e8eio1$kc9$[email protected]..
> New to this forum and new to Dreamweaver MX2004??so
please be gentle.
>
> I am in the process of teaching myself to use
Dreamweaver MX2004 with a
> view
> to producing a website to display a range of my
photographic work and
> possibly
> selling some images.
>
> I need to produce a very simple site consisting of a
home page, a
> biography
> page, a contact page and a gallery. I want to have a
black background with
> white text on each page.
>
> I have read about CSS and Templates. Is it best to
define the
> look/appearance
> i.e. font/text colour/background colour of each page
using CSS or a
> Template ?
> Any advice would be much
>

Dw, css, and a template, what is the best way to create a 20 page website with a different header in each page?

dw, css, and a template, what is the best way to create a 20
page website with different header content on each page? i am
trying to insert a specific image and background color for each
header on every page. what is the easiest or best way to do this?
thanks, bryan

"mediastream13" <[email protected]> wrote in
message
news:f47bes$9om$[email protected]..
> ok, murray, here is the site.
http://www.helphotline.org
> in I.E. 6 i can't see the background color behind the
header images,
I'm seeing a hot pink background (which is my browser default
- so that I do
remember to declare a background color). You need to add:
body { background-color: white;} to your stylesheet, or into
the imbedded
styles on your page.
In Firefox, the very top black section, #headertop is hidden
behind the
header image.
> background of the date/time isn't stretching the full
length of the
> screen, and
> the margins aren't working in the main content area. how
can i put a
> background
> color behind the header images?
I can see the header image stretching right across the page..
so not sure
what color is missing there.
> is there anyway to download i.e. six on my computer if i
already have
> i.e.7? i
> just want to be able to preview the site before i upload
the changes. it
> seems
> everything works in i.e. 7.
Yes, I used this and it works really well.
http://tredosoft.com/Multiple_IE
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au

Calling css and js file in webcenter portal template

Hi All,
I stored all js and css file in wcc.I want to invoke css and js file in webcenter portal template .How can i invoke by direct link?
First question, to get the direct link for the css file in webcenter content

Copy Download URL of selected css file by Right click on the css file from Space => Documents and click on 'Get Links' in the popup menu. Copy the link for later use.
FYI, Assuming files are uploaded to WCC via WebCenter Portal -> Spaces/Portal -> Document Explorer taskflow.
In the similar lines, I wrote the following article titled "Using FusionCharts in Oracle WebCenter Portal" in which I upload the js files and swf files to WCC via Document Explorer taskflow. Later I made use of the direct link of js files to render charts using FusionCharts js files/swf files.
https://blogs.oracle.com/nandakishorkn/entry/using_fusioncharts_in_oracle_webcenter
Once you've direct link to css / js file(s), you can use af:resource tag like :
<af:resource type="css" source="url" />
<af:resource type="javascript" source="url" />
See also :
Creating and using Page Templates in Oracle Webcenter Portal Applications (Refer Slide#1-22)
http://www.oracle.com/technetwork/middleware/webcenter/portal/learnmore/pagetemplates-1438595.pdf
Run custom javascript when ADF page loads
http://www.ateam-oracle.com/run-custom-javascript-when-adf-page-loads/
I hope it helps!

Can I include both CSS and HTML codes in one Open HTML Editor.

Somehow Cell phones are not properly reading css codes. Is there any way to include both CSS and HTML codes in one Open HTML Editor?

Hammad, their code is fairly mobile friendly. Per my other discussion with you ( http://topliners.eloqua.com/thread/8532 ), Eloqua's code is responsive for the most part. Most of their issues lie with the styling of the email where you will get different fonts and different sized fonts throughout the email and some other minor display issues.
What you are trying to accomplish is extremely difficult to do because you do not have the access to the HTML to better control how the responsive template works which is why the Eloqua templates (and most ESP templates) stick to the more basic side of emails.
If you want to use Eloqua's WYSIWYG to make their responsive email you can do so, but I would recommend deleting all their body text before editing anything because of the inconsistencies in their code. Otherwise, I think you would be better off coding the emails outside of Eloqua using a 3rd party editor whether it's something more robust like Dreamweaver or Coda, or whether you feel comfortable working in a more text environment with programs like Notepad++ or Brackets.
At the end of the day remember you are paying Eloqua for these and if you choose to stick with the WYSIWYG and you are not getting the results you expect you need to tell Eloqua through your support channels.

CSS and text formats

hello in dreamweaver there is basically paragraph , h1, h2,
and preformatted. I was wondering what people do if they want to
use more than those titles do they manual code uptop new names or
can I add my custom tags in the format box.
I am a newbie at css and I am just learning today. I mean to
use one css file and running out quick of things to call text to
get different size an dcolor effects etc.
Just any little tips on whats the norm as I teach myself
msessing around

<h#> tags go up to <h6> in HTML. DW does HTML.
> Also you can apply classes to the tages such as <p
class="bluefont"></p>
This would be a last resort, and usually leads to
unmanageable bloat of your
CSS files, as they become loaded with custom classes. Learn
how to use
descendent selectors and let CSS's cascade do the heavy
lifting for you.
And, frankly, if you are running out of things to style your
text, I'd say
you are using too many styles on the page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"andy_forbes" <[email protected]> wrote in
message
news:e5mhi0$qqr$[email protected]..
>I think H tags go up to H5 in DW don't they? Also you can
apply classes to
>the tages such as <p class="bluefont"></p>
> then have a style sheet:
> .bluefont { styles }
>
> Andy

I need help with CSS and floating

Okay, I know I need to get up on CSS and get rid of tables in
my sites.
However, I'm running up against a problem, and after banging
my head
against it for a while, I realize I need help. I've stripped
this down
so as to only show the area where I'm having difficulty.
What I want is a page that has everything down the center,
taking up no
more than 750 pixels and no more than 550 pixels of width. No
problem there.
After the header and the top content, I'd like to have two
"columns",
each in it's own separately-colored box. I would like the
right-side
column/box to be a static size, while the left-side
column/box sizes
dynamically.
Where I'm having problems is that when one column is boxed,
it's fine,
but whenever I wrap each column in its own box, the
fixed-size box
either jumps below or above the other box (depending on which
one has
been floated and which order the div's appear in the code).
Here are the links:
CSS:
http://www.afice.org/stylesheet/floatmestyles.css
ex 1:
http://www.afice.org/floatme1.html
ex 2:
http://www.afice.org/floatme2.html
Before sending, I took a look again, just to see if I was
missing
anything. I did notice that it doesn't seem to be that the
box is
jumping down so much as it is that it's getting written over.
Anyway, sorry for the long-winded explanation. I hope I've
managed to
explain what I'm trying to do well enough that someone can
tell me where
I'm going wrong.
Thanks,
--Kevin

Do you want something like this:
http://www.pmob.co.uk/temp/spointfooter.htm
You will need to look at the code to see how it was done.
Otherwise, there are different examples here on Pauls' site:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
"Kevin D-R" <[email protected]> wrote in
message
news:[email protected]...
> Okay, I know I need to get up on CSS and get rid of
tables in my sites.
> However, I'm running up against a problem, and after
banging my head
> against it for a while, I realize I need help. I've
stripped this down so
> as to only show the area where I'm having difficulty.
>
> What I want is a page that has everything down the
center, taking up no
> more than 750 pixels and no more than 550 pixels of
width. No problem
> there.
>
> After the header and the top content, I'd like to have
two "columns", each
> in it's own separately-colored box. I would like the
right-side column/box
> to be a static size, while the left-side column/box
sizes dynamically.
>
> Where I'm having problems is that when one column is
boxed, it's fine, but
> whenever I wrap each column in its own box, the
fixed-size box either
> jumps below or above the other box (depending on which
one has been
> floated and which order the div's appear in the code).
>
> Here are the links:
>
> CSS:
http://www.afice.org/stylesheet/floatmestyles.css
>
> ex 1:
http://www.afice.org/floatme1.html
>
> ex 2:
http://www.afice.org/floatme2.html
>
> Before sending, I took a look again, just to see if I
was missing
> anything. I did notice that it doesn't seem to be that
the box is jumping
> down so much as it is that it's getting written over.
>
> Anyway, sorry for the long-winded explanation. I hope
I've managed to
> explain what I'm trying to do well enough that someone
can tell me where
> I'm going wrong.
>
> Thanks,
>
> --Kevin

I have a question on paths and templates

I have a question on how I should structure my site
At my root directory on my server I have this set up.
index.html
/pages
     page1.html (all of these were created from my own template)
     page2.html
     page3.html
     and so on....
/webReadyGraphics
/css
/library
/templates
     genericTemplate.dwt
Each folder has their own respective files in it.
The problem I'm bumping into is relative and absolute paths in my DW templates/assest. I will do my best to explain.
I've create a menu with text that links to various pages. An example would be a home button which always returns you to the index.html. I turned that home button into an asset. I've placed that asset into my genericTemplate.dwt. The link attached to the home button is a relative path and looks something like ../index.html.
I have used my genericTemplate to create all my pages, even index.html. So on my index page is my home button which tries to link to a parent directory ../index.html. I decided to use absolute paths instead which is great on my local machine but when I go to upload to my server won't this be a problem? As browsers will be looking for a local absolute path?
How should I structure my website? I've been thinking about putting all my pages at the root directory but that just gets mess looking.
I hope I explained that well. My understanding of web theory is a bit novice.
Thanks!
-Dweinin

How do I do that? The pages which have the asset (button) have different paths to get to the index.html... some paths would be ../index others would be ../../index.html
I don't know how to explain this. I have 1 button. that button is on 15 webpages. Those pages are located at various directories from within my website. So all their paths would be different but I only have 1 button. So how do I put a relative path in there?
I can put all the pages in 1 location so the button path would be the same. That's not a problem BUT! I also have that button on my index.html page which is at the root of my site.
All of my pages would be located at root/pages/______.html. The button would have a relative path of ../index.html
The index is located at root/index.html and that SAME button would have an incorrect path of ../index.html and return an error saying page not found.
I want to keep the button an asset since I will likely be changing it's destination in the future or may want it to link a different page. So I made the button an asset so that I when I do want to change it I only have to do it once and it updates across all my pages.
Does that make sense? Should I just put all my pages at the root? Is that normal to do? My root would start to look pretty mess with 15-20+ html pages.
-Drew

Dreamweaver can't see my css or template files

I'm sure this is a simple problem with a simple answer, but it's baffling me...
I'm currently setting up a new site with a new local root folder. I'd like to make some pages for this new site based on my existing css file and templates. I put these files into my new site's local root folder, then clicked through the usual 'Page from template' procedure and created a new page from one of my templates in the normal way.
Trouble is, as soon as I try to save the page I've created, I get an error message: "This document uses the following files not in this site -" Dreamweaver then lists my css file and various image files. But all the files show up as present and correct in my new local root folder!
The error message box gives me the option to copy the files to the local root folder of my new site - although, as I've said, as far as I can see from a glance at the Files panel, they're all there already. In any case, if I click the "Copy" button, I get another error message: "Making this change would require changing code that is locked by a template or a translator. The change will be discarded."
I can upload the page, but it comes up with no formatting - here it is: http://www.nemesis.to/testpage.htm
Looking at the code, I see that the css file is linked like this:
<link href="file:///Macintosh HD/Users/michaeljohnson/Documents/newpagestyle.css" rel="stylesheet" type="text/css" />
I suspect that might be where the problem is. I would expect that line of code to look more like this:
<link href="newpagestyle.css" rel="stylesheet" type="text/css" />
But I have no idea why that's happening, or where to go from here. I suppose I could re-write that line of code by hand, but that doesn't amount to fixing the problem. I'd like the whole thing to work normally from the first click!
Have I got my css file and/or template files in the wrong place? What do I have to do so Dreamweaver can find the files?
All advice welcome - thanks for any wise words you might have. Sorry if this all seems very simple, but I really don't know enough about this stuff to make progress from this point.

Oh, yes, I think it's all ludicrously over-complicated! The thing is, I've been using my templates without any trouble for ages. The problem only came up when I created a new local root folder, copied my template and css files into it, created pages using those templates and - suddenly I've got no formatting.
Everything in the old local root folder is still working fine. I can make new pages from the template files in that folder and it's all good. It does look like the copy/paste process broke the essential links, but how could that happen?
I suppose I could create new templates from scratch in the new local root folder, but that seems unnecessary when I've already got template files that work perfectly - in the *other* local root folder!
Anyway, here comes the code...
This is the page_layout.dwt file as it appears in my old local root folder. This is the file as it appears in my old local root folder - the one that that works!
Note the link to the css file, which I've made bold here:
<!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>
<link rel="shortcut icon" href="/miscpix2/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Photos - </title>

<link href="../newpagestyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>


<meta name="Description" content="Misadventures in modern music: punk, post-punk, new wave, goth, rock, indie, plus all manner of tangents and diversions." />
<meta name="Keywords" content="Punk, Post-punk, new wave, indie, goth, rock, music, live, gigs, photos, reviews, interviews, CDs, vinyl, downloads, music, webzine, zine, blog" />
<meta http-equiv="imagetoolbar" content="no" />
</head>
<body>
<a name="pagetop" id="pagetop"></a>
<div id="container">
<div id="header">
    <div id="masthead"><img src="../imagesissue9/graphicsissue9forward/generic_masthead.jpg" width="525" height="250" alt="Nemesis To Go" /></div>
    <div id="topadbox">
      <script type="text/javascript">
</script>
      <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
    </div>
</div>
<div id="header2">
    <div id="navigationbox"><a href="http://www.nemesis.to">Home</a> | <a href="http://www.nemesis.to/live.htm">Live</a> | <a href="http://www.nemesis.to/records.htm">CDs/Vinyl/Downloads</a> | <a href="http://www.nemesis.to/photos.htm">Photos</a> | <a href="http://www.nemesis.to/int.htm">Interviews</a><br />
      <a href="http://www.nemesis.to/archive.htm">Archive</a> | <a href="http://www.nemesis.to/about.htm">Information and Contacts</a> | <a href="http://www.nemesis.to/links.htm">Links</a></div>
    <div id="buttonbox"><img src="../imagesissue9/graphicsissue9forward/linkbuttons_definitive.jpg" width="222" height="41" border="0" usemap="#Map2" />
      <map name="Map2" id="Map2">
        <area shape="rect" coords="-1,0,41,42" href="http://nemesis_to_go.livejournal.com" target="_blank" alt="LiveJournal" />
        <area shape="rect" coords="46,1,87,40" href="http://twitter.com/uncle_n" target="_blank" alt="Twitter" />
        <area shape="rect" coords="91,1,131,41" href="http://www.myspace.com/nemesis_to_go" target="_blank" alt="MySpace" />
        <area shape="rect" coords="134,2,175,39" href="http://www.last.fm/user/Uncle_Nemesis" target="_blank" alt="Last FM" />
        <area shape="rect" coords="181,-1,223,39" href="http://www.facebook.com/misadventures.in.modern.music" target="_blank" alt="Facebook" />
      </map>
    </div>
</div>

<div id="maincontent"> <img src="../imagesissue9/graphicsissue9forward/920photos.jpg" width="920" height="44" alt="Photos" />
    <p><span class="specialheading2">Nemhain</span><span class="datedetails"><br />
Borderline, London<br />
        Wednesday September 8 2010</span></p>
    <table width="900" border="1" cellspacing="4" cellpadding="4">
      <tr>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <table width="880" border="1" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="123"> </td>
        <td width="723"> </td>
      </tr>
    </table>
    <table width="841" border="1" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="264"> </td>
        <td width="549"> </td>
      </tr>
    </table>
    <table width="824" border="1" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="837"> </td>
        <td width="49"> </td>
      </tr>
    </table>
    <table width="868" border="1" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="124"> </td>
        <td width="710"> </td>
      </tr>
    </table>
    <table width="844" border="1" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="443"> </td>
        <td width="367"> </td>
      </tr>
    </table>
    <table width="900" border="0" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="125"><table width="825" border="1" cellspacing="4" cellpadding="4">
          <tr>
            <td width="137"> </td>
            <td width="654"> </td>
          </tr>
        </table></td>
        <td width="741"> </td>
      </tr>
    </table>
    <table width="900" border="1" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="62"> </td>
        <td width="804"> </td>
      </tr>
    </table>
<p class="supportband">Pussycat And The Dirty Johnsons: <a href="http://www.myspace.com/thejohnsonsno1" class="supportband">MySpace</a> | <a href="http://www.facebook.com/thedirtyjohnsons?ref=ts&sk=wall#!/thedirtyjohnsons?sk=wall" class="supportband">Facebook</a></p></div>

<div id="footer">
    <div id="bannerbox">
      <script type="text/javascript">
</script>
      <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
    </div>
</div>
<div class="searchsection">
    <form method="get" action="http://www.google.com/search">
      <div style="border:0px solid black;padding:0px;width:auto;">
        <table border="0" align="center" cellpadding="2">
          <tr>
            <td width="291" align="right" valign="middle"><input type="text"   name="q" size="35"
maxlength="255" value="" /></td>
            <td width="102" align="right" valign="middle"><input type="submit" value="Google Search" /></td>
            <td width="247" align="center" valign="middle"><input type="checkbox" name="sitesearch"
value="nemesis.to" checked />
              <span class="searchtext">Search Nemesis To Go</span></td>
          </tr>
        </table>
      </div>
    </form>
</div>
<div id="footer2">
    <div id="creditsbox">Page credits: Photos and construction by <a href="http://www.nemesis.to/about.htm">Michael Johnson</a>. Nemesis logo by <a href="http://www.antonyjohnston.com">Antony Johnston</a>. Red N version by <a href="http://www.rimmell.com">Mark Rimmell</a>.</div>

    <div id="creativecommonsbox"><a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/"><img src="http://creativecommons.org/images/public/somerights20.png" alt="Creative Commons License" border="0" class="floatleft" style="border-width:2" /></a><span xmlns:dc="http://purl.org/dc/elements/1.1/" property="dc:title">Words and photos in Nemesis To Go</span> by Michael Johnson are licenced under <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/">Creative Commons</a>. You may copy and distribute this material, or derivations of it, provided that you give a credit to Michael Johnson and a link to <a href="http://www.nemesis.to">Nemesis To Go</a>. Where material from other sources is used, copyright remains with the original owners. All rights in the name 'Nemesis To Go' and the 'N' logo are retained.</div>
    <div id="backtotopbox"><a href="#pagetop"><img src="../imagesissue9/graphicsissue9forward/arrer_sml_up.gif" alt="Back To Top" width="40" height="40" border="0" class="floatleft" /></a><a href="#pagetop">Back To Top</a></div>
</div>
</div>
</body>
</html>
And here is the file as it appears after I'd copied it into my new local root folder. This is the version that won't give me any formatting. Note the link to the css file has changed. This surely must be the problem, because I can't see anything else that's different - but how could that line change simply by copying the file into another local root folder?
<!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>
<link rel="shortcut icon" href="/miscpix2/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Photos - </title>

<link href="file:///Macintosh HD/Users/michaeljohnson/Documents/newpagestyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>




<meta name="Description" content="Misadventures in modern music: punk, post-punk, new wave, goth, rock, indie, plus all manner of tangents and diversions." />
<meta name="Keywords" content="Punk, Post-punk, new wave, indie, goth, rock, music, live, gigs, photos, reviews, interviews, CDs, vinyl, downloads, music, webzine, zine, blog" />
<meta http-equiv="imagetoolbar" content="no" />
</head>
<body>
<a name="pagetop" id="pagetop"></a>
<div id="container">
<div id="header">
    <div id="masthead"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue9/graphicsissue9forward/generic_masthead.jpg " width="525" height="250" alt="Nemesis To Go" /></div>
    <div id="topadbox">
      <script type="text/javascript">
</script>
      <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
    </div>
</div>
<div id="header2">
    <div id="navigationbox"><a href="http://www.nemesis.to">Home</a> | <a href="http://www.nemesis.to/live.htm">Live</a> | <a href="http://www.nemesis.to/records.htm">CDs/Vinyl/Downloads</a> | <a href="http://www.nemesis.to/photos.htm">Photos</a> | <a href="http://www.nemesis.to/int.htm">Interviews</a><br />
      <a href="http://www.nemesis.to/archive.htm">Archive</a> | <a href="http://www.nemesis.to/about.htm">Information and Contacts</a> | <a href="http://www.nemesis.to/links.htm">Links</a></div>
    <div id="buttonbox"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue9/graphicsissue9forward/linkbuttons_definiti ve.jpg" width="222" height="41" border="0" usemap="#Map2" />
      <map name="Map2" id="Map2">
        <area shape="rect" coords="-1,0,41,42" href="http://nemesis_to_go.livejournal.com" target="_blank" alt="LiveJournal" />
        <area shape="rect" coords="46,1,87,40" href="http://twitter.com/uncle_n" target="_blank" alt="Twitter" />
        <area shape="rect" coords="91,1,131,41" href="http://www.myspace.com/nemesis_to_go" target="_blank" alt="MySpace" />
        <area shape="rect" coords="134,2,175,39" href="http://www.last.fm/user/Uncle_Nemesis" target="_blank" alt="Last FM" />
        <area shape="rect" coords="181,-1,223,39" href="http://www.facebook.com/misadventures.in.modern.music" target="_blank" alt="Facebook" />
      </map>
    </div>
</div>

<div id="maincontent"> <img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue9/graphicsissue9forward/920photos.jpg" width="920" height="44" alt="Photos" />
    <p><span class="specialheading2">Genuflex</span><span class="datedetails"><br />
Underbelly, London<br />
       Friday November 26 2010</span></p>
    <table width="900" border="0" cellspacing="4" cellpadding="4">
      <tr>
        <td width="124"> </td>
        <td width="742"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex13.jpg" width="604" height="404" alt="Genuflex" /></td>
      </tr>
    </table>
    <table width="880" border="0" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="123"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex1.jpg" alt="Genuflex" width="604" height="443" align="right" /></td>
        <td width="723"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex7.jpg" alt="Genuflex" width="254" height="379" align="left" /></td>
      </tr>
    </table>
    <table width="841" border="0" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="264"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex11.jpg" width="254" height="366" align="right" /></td>
        <td width="549"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex6.jpg" alt="Genuflex" width="604" height="404" align="left" /></td>
      </tr>
    </table>
    <table width="824" border="0" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="837"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex5.jpg" alt="Genuflex" width="250" height="411" align="right" /></td>
        <td width="49"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex9.jpg" alt="Genuflex" width="504" height="406" align="left" /></td>
      </tr>
    </table>
    <table width="868" border="0" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="124"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex8.jpg" alt="Genuflex" width="604" height="441" align="right" /></td>
        <td width="710"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue10/genuflex12.jpg" alt="Genuflex" width="254" height="379" align="left" /></td>
      </tr>
    </table>
<p class="supportband">Genuflex: <a href="http://www.genuflexmusic.com" class="supportband">Website</a> | <a href="http://www.myspace.com/genuflex" class="supportband">MySpace</a> | <a href="http://www.facebook.com/#!/pages/Genuflex/122544001105597" class="supportband">Facebook</a></p></div>

<div id="footer">
    <div id="bannerbox">
      <script type="text/javascript">
</script>
      <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
    </div>
</div>
<div class="searchsection">
    <form method="get" action="http://www.google.com/search">
      <div style="border:0px solid black;padding:0px;width:auto;">
        <table border="0" align="center" cellpadding="2">
          <tr>
            <td width="291" align="right" valign="middle"><input type="text"   name="q" size="35"
maxlength="255" value="" /></td>
            <td width="102" align="right" valign="middle"><input type="submit" value="Google Search" /></td>
            <td width="247" align="center" valign="middle"><input type="checkbox" name="sitesearch"
value="nemesis.to" checked />
              <span class="searchtext">Search Nemesis To Go</span></td>
          </tr>
        </table>
      </div>
    </form>
</div>
<div id="footer2">
    <div id="creditsbox">Page credits: Photos and construction by <a href="http://www.nemesis.to/about.htm">Michael Johnson</a>. Nemesis logo by <a href="http://www.antonyjohnston.com">Antony Johnston</a>. Red N version by <a href="http://www.rimmell.com">Mark Rimmell</a>.</div>

    <div id="creativecommonsbox"><a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/"><img src="http://creativecommons.org/images/public/somerights20.png" alt="Creative Commons License" border="0" class="floatleft" style="border-width:2" /></a><span xmlns:dc="http://purl.org/dc/elements/1.1/" property="dc:title">Words and photos in Nemesis To Go</span> by Michael Johnson are licenced under <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/">Creative Commons</a>. You may copy and distribute this material, or derivations of it, provided that you give a credit to Michael Johnson and a link to <a href="http://www.nemesis.to">Nemesis To Go</a>. Where material from other sources is used, copyright remains with the original owners. All rights in the name 'Nemesis To Go' and the 'N' logo are retained.</div>
    <div id="backtotopbox"><a href="#pagetop"><img src="file:///Macintosh HD/Users/michaeljohnson/Documents/imagesissue9/graphicsissue9forward/arrer_sml_up.gif" alt="Back To Top" width="40" height="40" border="0" class="floatleft" /></a><a href="#pagetop">Back To Top</a></div>
</div>
</div>
</body>
</html>
Sorry for the big wedges of code - and sorry for this being such a stupid problem. I'm almost ready to scrap the whole idea of creating a new local root folder!

CSS and Spry not displaying

Hi, I have recently created a website using Dreamweaver. I don't know much coding at all so I did it using the design view. It is a very basic site. Just one page, styled with CSS and with Spry Tabbed Panels to reveal 4 different 'pages'
I have uploaded my website folder to the server via ftp but none of the CSS, images or spry are displaying.
I uploaded one folder which contained 2 subfolders and one html file
-SubFolder 1: Spry Assets
-SubFolder 2: Images
-index.html (with internal .css)
I can see that the folders have been uploaded but for some reason they are not being read. I would really appreciate some help as my web host says they can't help me. I can send you the html file or whatever you need if you would like to take a look. It really is a very simple website so i'm sure it wouldn't take one of you geniuses very long to figure it out!
Cheers

Thanks for your quick responses guys! Hopefully I can reach a solution with this.
In answer to your questions:
- Yes, I defined a local site folder in Dreamweaver. That is the folder I uploaded via ftp.
-Am I working with valid code? I don't know. I have not touched any of the code. I used 'design view' in Dreamweaver. Previewed in Firefox, Safari and IE and it works with no problems.
Below is the code for index.html and below that is the css code for spry tabbed panels.
index.html:
<!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>DMH Window Cleaning</title>
<style type="text/css">
.main {
    background-color: #0e414f;
    height: 480px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
.right {
    background-color: #FFF;
    float: left;
    height: 440px;
    width: 460px;
    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: #0e414f;
    margin-top: 20px;
.logo {
    float: left;
    border-right-width: 20px;
    border-left-width: 20px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #0e414f;
    border-left-color: #0e414f;
    margin-top: 20px;
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main"><img src="images/DMHLogo.png" width="440" height="440" class="logo" />
<div class="right">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">HOME</li>
        <li class="TabbedPanelsTab" tabindex="0">SERVICES</li>
        <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
        <li class="TabbedPanelsTab" tabindex="0">CONTACT</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <h1>DMH Window Cleaning is your local window cleaning service for Ipswich, Martlesham and Kesgrave. </h1>
          <p> </p>
          <p>DMH offers an interior and exterior window cleaning service for domestic and commercial properties. </p>
          <p>We have been providing a professional, reliable and regular window cleaning service to hundreds of happy customers for the past 16 years. </p>
          <p>            Just use the links above find out more, alternatively <br />
          send us an email or request a free quote</p>
          <h2> </h2>
</div>
        <div class="TabbedPanelsContent">
          <h1>We offer a range of services to domestic and commercial properties</h1>
          <p>Services: </p>
          <ul>
            <li> Window Cleaning Interior and Exterior</li>
            <li> Guttering</li>
            <li> UPVC Cleaning</li>
            <li> Conservatories          </li>
            <li>Domestic Properties </li>
            <li> All sills included free</li>
          </ul>
<p> </p>
<p><span class="servicesHeading"><strong>Domestic Properties<br />
</strong></span>
- Services offered on a once a month basis          </p>
<p><span class="servicesHeading"><strong>Commercial Properties<br />
</strong>          </span>
          - Services offered on a weekly, two weekly or monthly basis.</p>
        </div>
        <div class="TabbedPanelsContent">
          <h1>We have been providing a professional and reliable window cleaning service for the past 16 years</h1>
          <p class="quoteboxes">"DMH has been our window cleaner for many years and<br />
I would have no hesitation in recommending him. David<br />
is quick, reliable and does a great job!"<br />
<strong class="QuoteName">Ruth Carley, General Manager, Punch and Judy, Ipswich</strong></p>
          <p class="quoteboxes">"David works to a high standard and is professional, he<br />
cleans the inside and outside of Jamie Cann House. David <br />
is punctual and reliable"<br />
          <strong class="QuoteName">Teresa Page, Jamie Cann House, Ipswich</strong></p>
</div>
        <div class="TabbedPanelsContent">
          <h1>Request a free, no obligation quote<br />
          </h1>
<p>If you would like to request a no obligation quote then please do so by email or phone. </p>
          <p>email: [email protected]<br />
            phone: xxx</p>
          <p><strong>Payment</strong></p>
          <p>Please make cheques made payable to:<br />
            'DMH Window Cleaning'</p>
          <p>and post to:<br />
            6 Bramley Hill<br />
            Ipswich<br />
            IPX XXX</p>
          <p>We also accept cash in person. Details will be posted through your door once the job has been completed.</p>
        </div>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Then I also have a separate 'Spry Assets' folder which has 2 files in it.
1. SpryTabbedPanels.js
2. SpryTabbedPanels.css
the css code for tabbed panels is:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    background-color: #0e414f;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    background-color: #d7df25;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    text-align: center;
    width: 115px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #0e414f;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    background-color: #0e414f;
    color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    background-color: #EEE;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
    overflow: hidden;
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible .quoteboxes strong {
    padding-top: 5px;
.QuoteName {
    padding-top: 20px;
    line-height: 20px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
.TabbedPanelsContent h1 {
    color: #0e414f;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #d7df25;
    padding-bottom: 10px;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #d7df25;
    padding-top: 10px;
li {
    color: #0e414f;
.servicesHeading {
.TabbedPanelsContent h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
.quoteboxes {
    background-image: url(../images/quotebox2.png);
    height: 105px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    width: 400px;
.quoteRight {
    background-image: url(../images/quoteboxright.png);
    background-repeat: no-repeat;
    height: 100px;
.TabbedPanelsContent P {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
    overflow: hidden;
    zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
    overflow: visible !important;
.TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
.TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
.TabbedPanelsTab {
     overflow: visible !important;
     display: block !important;
     clear:both !important;
h1 {
    font-weight: bold;
.bottomBox {
    background-color: #0e414f;
    width: 1020px;
    margin-right: auto;
    margin-left: auto;
.box {
    background-color: #0e414f;
    width: 900px;

Basic HTML concepts and how they relate to eachother

I am a grad student working on a project to visualize how the HTML markup is translated into a webpage in a browser. I am not a programmer, and thus am confused by how all the following concepts relate to one another. The goal lis to list them in a logical order and describe how one concept leads to the next in a sequential manner.
I’d like to create a hierarchal list of all these terms and their definitions as a start. Here’s what I have so far.
Tried to start with the most basic, and work my way up Any help would be appreciated. Any errors?
SPECIFICATIONS
WC3 / WHTWG Specification
Defines the semantics, structure, syntax, and rendering of HTML code
elements in HTML5 (tags)
any element in the HTML namespace (as per the doctype declaration) - refers to all tags and their attributes - these tags are used to describe the meaning of the content they contain
    content model types     (tags can fit in one ore more of these categories of model types)
        metadata - content that sets up the presentation or behavior of the rest of the content
        flow - elements that would be included in the normal flow of the document (fits in the HTML body tag)
        sectioning - defines the scope of heading and footers - create new sections in document
        heading - defines the header of a section, which can either be explicitly marked up with sectioning elements or implied by the heading content itself
        phrasing (similar to inline in HTML 4) - the text of the document, as well as elements used to mark up the text within paragraph level structures
        embedded - any content that imports other resources into the document
        interactive - any content that is specifically interacted for user interaction
Outline Algorithm (definition)
    Definition in the HTML5 spec of the rules that user agents should use when parsing code in order creating an outline of section content elements in an HTML     document
                he outline (based on their ranking)
AUTHOR
HMTL5 Document - the document contenting HTML elements and authored content
Document Semantics - the meaning associated with each HTML element Tag
    the collection of tags with meaning form the semantic structure of the HTML document
Document Structure (combination of ordered semantic elements) - the order and nesting of tags, and the associations associated with the levels of nesting (ranking) create the document structure
    understanding the W3C outline Algorithm helps the author decide how and when to chose which elements to properly structure content
        understanding the process that HTML5 uses to outline documents will help in this decision
USER AGENT (BROWSER)
User Agent (browser)-
    the browser (application that user operates to interact with HTML documents
    parsing algorithm (executed) - the rules the browser uses to parses (walks through) the elements in order to establish its structure and add to the outline using     a parsing engine
        examples: webkit (safari) and gecko (firefox)
            body is established as the outline root (beginning)
    the result of the parsing is a Document object Model (DOM) and the Document Ouline
Document outline - the nested, hierarchical outline created by the browser parsing the html document’s structure and content
    each part of the outline is considered a node
        (relationships in the node are described with family tree terms like parent, child, and sibling.)
    sectioning and heading elements are used to define the outline
    sectioning elements are containers - so any elements contented within a a section is nested as a child in the parent’s section
DOM -
    The DOM is the structure created by the DOM API in which CSS and Javascript interact with and modify the HTML
    based on an object structure that closely resembles the structure of the documents it models.
    structure similar to that of a tree - in which every element is a node
    similar to the document outline, but instead of a hierarchical list, the DOM is a tree diagram
OUTPUT
Final webpage

As a rule of thumb, avoid all swing components (just use awt) because they are only available in 1.2. You can use all enhancements and bug fixes to awt components that are available in 1.4 (even 1.5).
;o)
V.V.

Activity Journal - Creation of template type and template

Hello Experts,
we need to create a template type and template because we can not use the standard template to see product information in the Activity Journal.
Where in Customizing can i define template type and template and which are the steps to do it. For our activity journal we need to see only the fields:
1. Product ID
2. Product
3. Notes
The rest of the information is not necesary. The SAP Note 1261860 describes exactly the problem we have but we are not able to generate template and template type.
Best Regards
Oliver Schultze

Hi there
For generation of template for Activity so that you can see the Product info,u just need to generate the Index in SPRO
Go to IMG and there within the transaction types you can locate the index i am speaking about to generate.
Here is the path-->IMG->CRM--->Transaction ->Basic Settings->Settings for Activites->Activity Journal--->Activity Standard Template Type
Here you give your desired language in which you want your template to be created.
As soon as you genarte that you will be having product info on your Activity screen
See this arrangement is client specific only so if you are say in sandbox or dev or qual or prod.u need to do this setting seperately in each client.
Hope you got what i said.
Cheers
Ashish

Basic of IDOC and ALE

Hi All,
I am beginner of ALE IDOC.
Please tell me in details whats is Control Records, Data Records and Status Records in details.
Thnks in Advance,
awards will be given.
Ulhas

Hi,
Data Creation in Idoc
IDocs are text encoded documents with a rigid structure that are used to exchange data between R/3 and a foreign system. Instead of calling a program in the destination system directly, the data is first packed into an IDoc and then sent to the receiving system, where it is analyzed and properly processed. Therefore an IDoc data exchange is always an
asynchronous process. The significant difference between simple RFC-calls and IDoc data exchange is the fact, that every action performed on IDocs are protocolled by R/3 and IDocs can be reprocessed if an error occurred in one of the message steps.
While IDocs have to be understood as a data exchange protocol, EDI and ALE are typical use cases for IDocs. R/3 uses IDocs for both EDI and ALE to deliver data to the receiving system. ALE is basically the scheduling mechanism that defines when and between which partners and what kind of data will be exchanged on a regular or event triggered basis. Such a set-up is called an ALE-scenario.
IDoc is a intermediate document to exchange data between two SAP Systems.
*IDocs are structured ASCII files (or a virtual equivalent).
*Electronic Interchange Document
*They are the file format used by SAP R/3 to exchange data with foreign systems.
*Data Is transmitted in ASCII format, i.e. human readable form
*IDocs exchange messages
*IDocs are used like classical interface files
IDOC types are templates for specific message types depending on what is the business document, you want to exchange.
WE30 - you can create a IDOC type.
An IDOC with data, will have to be triggered by the application that is trying to send out the data.
FOr testing you can use WE19.
How to create idoc?
*WE30 - you can create a IDOC type
For more information in details on the same along with the examples can be viewed on:
http://www.netweaverguru.com/EDI/HTML/IDocBook.htm#_Toc8400404
http://help.sap.com/saphelp_erp2005/helpdata/en/0b/2a6620507d11d18ee90000e8366fc2/frameset.htm
http://www.sappoint.com/presentation.html
http://www.allsaplinks.com/idoc_search.html
http://www.sapgenie.com/sapedi/idoc_abap.htm
http://www.erpgenie.com/sapedi/idoc_abap.htm
To Create Idoc we need to follow these steps:
Create Segment ( WE31)
Create Idoc Type ( WE30 )
Create Message Type ( WE81 )
Assign Idoc Type to Message Type ( WE82 )
Creating a Segment
Go to transaction code WE31
Enter the name for your segment type and click on the Create icon
Type the short text
Enter the variable names and data elements
Save it and go back
Go to Edit -> Set Release
Follow steps to create more number of segments
Create IDOC Type
Go to transaction code WE30
Enter the Object Name, select Basic type and click Create icon
Select the create new option and enter a description for your basic IDOC type and press enter
Select the IDOC Name and click Create icon
The system prompts us to enter a segment type and its attributes
Choose the appropriate values and press Enter
The system transfers the name of the segment type to the IDOC editor.
Follow these steps to add more number of segments to Parent or as Parent-child relation
Save it and go back
Go to Edit -> Set release
Create Message Type
Go to transaction code WE81
Change the details from Display mode to Change mode
After selection, the system will give this message u201CThe table is cross-client (see Help for further info)u201D. Press Enter
Click New Entries to create new Message Type
Fill details
Save it and go back
Assign Message Type to IDoc Type
Go to transaction code WE82
Change the details from Display mode to Change mode
After selection, the system will give this message u201CThe table is cross-client (see Help for further info)u201D. Press Enter.
Click New Entries to create new Message Type.
Fill details
Save it and go back
Check these out..
Re: How to create IDOC
Check below link. It will give the step by step procedure for IDOC creation.
http://www.supinfo-projects.com/cn/2005/idocs_en/2/
ALE/ IDOC
http://help.sap.com/saphelp_erp2004/helpdata/en/dc/6b835943d711d1893e0000e8323c4f/content.htm
http://www.sapgenie.com/sapgenie/docs/ale_scenario_development_procedure.doc
http://edocs.bea.com/elink/adapter/r3/userhtm/ale.htm#1008419
http://www.netweaverguru.com/EDI/HTML/IDocBook.htm
http://www.sapgenie.com/sapedi/index.htm
http://www.sappoint.com/abap/ale.pdf
http://www.sappoint.com/abap/ale2.pdf
http://www.sapgenie.com/sapedi/idoc_abap.htm
http://help.sap.com/saphelp_erp2005/helpdata/en/0b/2a60bb507d11d18ee90000e8366fc2/frameset.htm
http://help.sap.com/saphelp_erp2005/helpdata/en/78/217da751ce11d189570000e829fbbd/frameset.htm
http://www.allsaplinks.com/idoc_sample.html
http://www.sappoint.com/abap.html
http://help.sap.com/saphelp_erp2004/helpdata/en/dc/6b835943d711d1893e0000e8323c4f/content.htm
http://www.sapgenie.com/sapgenie/docs/ale_scenario_development_procedure.doc
http://edocs.bea.com/elink/adapter/r3/userhtm/ale.htm#1008419
http://www.netweaverguru.com/EDI/HTML/IDocBook.htm
http://www.sapgenie.com/sapedi/index.htm
http://www.allsaplinks.com/idoc_sample.html
http://www.sapgenie.com/sapgenie/docs/ale_scenario_development_procedure.docs
go trough these links.
http://help.sap.com/saphelp_erp2004/helpdata/en/dc/6b835943d711d1893e0000e8323c4f/content.htm
http://www.sapgenie.com/sapgenie/docs/ale_scenario_development_procedure.doc
http://edocs.bea.com/elink/adapter/r3/userhtm/ale.htm#1008419
http://www.netweaverguru.com/EDI/HTML/IDocBook.htm
http://www.sapgenie.com/sapedi/index.htm
http://www.sappoint.com/abap/ale.pdf
http://www.sappoint.com/abap/ale2.pdf
http://www.sapgenie.com/sapedi/idoc_abap.htm
http://help.sap.com/saphelp_erp2005/helpdata/en/0b/2a60bb507d11d18ee90000e8366fc2/frameset.htm
http://help.sap.com/saphelp_erp2005/helpdata/en/78/217da751ce11d189570000e829fbbd/frameset.htm
http://www.allsaplinks.com/idoc_sample.html
http://www.sappoint.com/abap.html
http://help.sap.com/saphelp_erp2004/helpdata/en/dc/6b835943d711d1893e0000e8323c4f/content.htm
http://www.sapgenie.com/sapgenie/docs/ale_scenario_development_procedure.doc
http://edocs.bea.com/elink/adapter/r3/userhtm/ale.htm#1008419
http://www.netweaverguru.com/EDI/HTML/IDocBook.htm
http://www.sapgenie.com/sapedi/index.htm
http://www.allsaplinks.com/idoc_sample.html
http://http://help.sap.com/saphelp_erp2004/helpdata/en/dc/6b835943d711d1893e0000e8323c4f/content.htm
An IDoc is simply a data container that is used to exchange information between any two processes that can understand the syntax and semantics of the data...
1.IDOCs are stored in the database. In the SAP system, IDOCs are stored in database tables.
2.IDOCs are independent of the sending and receiving systems.
3.IDOCs are independent of the direction of data exchange.
The two available process for IDOCs are
Outbound Process
Inbound Process
AND There are basically two types of IDOCs.
Basic IDOCs
Basic IDOC type defines the structure and format of the business document that is to be exchanged between two systems.
Extended IDOCs
Extending the functionality by adding more segments to existing Basic IDOCs.
To Create Idoc we need to follow these steps:
Create Segment ( WE31)
Create Idoc Type ( WE30)
Create Message Type ( WE81)
Assign Idoc Type to Message Type ( WE82)
imp links
http://www.allsaplinks.com/idoc_sample.html
http://www.sapgenie.com/sapedi/idoc_abap.htm
www.sappoint.com
--here u can find the ppts and basic seetings for ALE
http://sappoint.com/presentation.html
www.sapgenie.com
http://www.sapgenie.com/ale/index.htm
WE30 - you can create a IDOC type.
An IDOC with data, will have to be triggered by the application that is trying to send out the data.
Try this..Hope this will help.
SAP ALE & IDOC<<<<
Steps to configuration(Basis) >>
1. Create Logical System (LS) for each applicable ALE-enabled client
2. Link client to Logical System on the respective servers
3. Create background user, to be used by ALE(with authorizaton for ALE postings)
4. Create RFC Destinations(SM59)
5. Ports in Idoc processing(WE21)
6. Generate partner profiles for sending system
The functional configuration(Tcode: SALE)
u2022 Create a Customer Distribution Model (CDM);
u2022 Add appropriate message types and filters to the CDM;
u2022 Generate outbound partner profiles;
u2022 Distribute the CDM to the receiving systems; and
u2022 Generate inbound partner profiles on each of the clients.
Steps to customize a new IDoc >>>
1. Define IDoc Segment (WE31)
2. Convert Segments into an IDoc type (WE30)
3. Create a Message Type (WE81)
4. Create valid Combination of Message & IDoc type(WE82)
5. Define Processing Code(WE41 for OUT / WE42 for IN)
6. Define Partner Profile(WE20)
Important Transaction Codes:
SALE - IMG ALE Configuration root
WE20 - Manually maintain partner profiles
BD64 - Maintain customer distribution model
BD71 - Distribute customer distribution model
SM59 - Create RFC Destinations
BDM5 - Consistency check (Transaction scenarios)
BD82 - Generate Partner Profiles
BD61 - Activate Change Pointers - Globally
BD50 - Activate Change Pointer for Msg Type
BD52 - Activate change pointer per change.doc object
BD59 - Allocation object type -> IDOC type
BD56 - Maintain IDOC Segment Filters
BD53 - Reduction of Message Types
BD21 - Select Change Pointer
BD87 - Status Monitor for ALE Messages
BDM5 - Consistency check (Transaction scenarios)
BD62 - Define rules
BD79 - Maintain rules
BD55 - Defining settings for IDoc conversion
WEDI - ALE IDoc Administration
WE21 - Ports in Idoc processing
WE60 - IDoc documentation
SARA - IDoc archiving (Object type IDOC)
WE47 - IDoc status maintenance
WE07 - IDoc statistics
BALE - ALE Distribution Administration
WE05 - IDoc overview
BD87 - Inbound IDoc reprocessing
BD88 - Outbound IDoc reprocessing
BDM2 - IDoc Trace
BDM7 - IDoc Audit Analysis
BD21 - Create IDocs from change pointers
SM58 - Schedule RFC Failures
Basic config for Distributed data:
BD64: Maintain a Distributed Model
BD82: Generate Partner Profile
BD64: Distribute the distribution Model
Programs
RBDMIDOC u2013 Creating IDoc Type from Change Pointers
RSEOUT00 u2013 Process all selected IDocs (EDI)
RBDAPP01 - Inbound Processing of IDocs Ready for Transfer
RSARFCEX - Execute Calls Not Yet Executed
RBDMOIND - Status Conversion with Successful tRFC Execution
RBDMANIN - Start error handling for non-posted IDocs
RBDSTATE - Send Audit Confirmations
FOr testing you can use WE19.
There are two filtering in IDoc.
Segment Filtering:
Segment filtering can be achieved using T/Code BD56. Here you can suppress a whole segment irrespective of data inside it . You have to give Message Type / Sender Prrtner / Receiver Partner.
Data Filtering:
Data filtering can be done in dustribution model (BD64) where you can restrict whole IDOCS or partials IDOCS to be send based on data in fields inside IDOC depending on whether the segment in which you filter is at the highest level or at a lower level. For example in MATMAS if you put a filter of E1MARCM for a particular plant , only data for this plant will go and other plants will be ignored.
Please check this link for more information.
http://help.sap.com//saphelp_470/helpdata/EN/0b/2a611c507d11d18ee90000e8366fc2/frameset.htm
Regards,
Shiva Kumar

Basics of CSS and Templates

Similar Messages

Maybe you are looking for