Code
Code is the html language that Dreamweaver writes as you work on your page. The page you are working on is the Design page.
You can see the code by clicking on the Code tab at the top left of the page. You can also see both the design page and the code at the same time by clicking on the Split tab.
If you select a part of your page and then look at the code that part of the code is highlighted.
It is possible to design a page by writing the code directly but you are more likely to only want to change parts of it.
DW puts separate bits of code in pointed brackets.
Here is an example: this is some writing
and here is the above whole line in code:
<p>Here is an example: <em>this is some <strong>writing</strong></em></p>
p in brackets marks the beginning of a new paragraph with /p at the end, marking the end; em and /em mark the beginning and end of the italics; <strong> and </strong> mark the beginning and end of the word in bold.
The actual words are not within brackets.
The beginning and end are always marked. Often there are sections inside other sections and then the lines are indented to help you find your way around.
DW also uses colour in the Code to help you identify elements. Most of the code is in blue with your writing in black.
In a page made from a template, parts you cannot change are in pale grey.
Table elements are turquoise
CSS formatting comes before the main elements of your page: names are in pink, CSS elements are in dark blue with specific formatting in blue.
Changing code:
The easiest way to experiment with changing something is, on the code page, change some of the wording that you have written.
You could already add in paragraphs or italics.
You can cut and paste code from one part of the page to another or from another page.
Some code:
remember every bit has a beginning marker and an end marker
<p> paragraph start; ( and </p> paragraph end)
<br> is a new line with no paragraph space above.
<h1>, <h2>, <h3> etc. are the ready-made headings that DW offers
<a> is a link
<tr> is a table row
<td> is a table cell
<em> is italics
code for CSS elements has a # sign in front (eg: #container)
Have a go:
Have a look at the code of some of your pages: it is fun to figure out which bits are what.
On a new page write a few lines, then look at the Code.
At the top will be the <head> this contains the Title, CSS formatting, template formatting, if any, and styles.
None of the head appears on the page, though the Title appears at the top.
After the head is the <body> this has the content of the page.
Save a copy of a page you have designed and practise changing, adding and deleting bits of code.