PART II 10.04.2007 dmfd. Digital Media: Communication and DesignF2007 Comments Remember: make a...

PART II

10.04.2007dmfd

Digital Media: Communication and Design F2007

Comments

Remember: make a homepage using CSS Next Tuesday: guest lecture on Web 2.0


Goals of the lecture

See some other panels in DW Understand an example of CSS layout


Index

CSS panel Example of layout Results panel


The workspace

Insert bar

Document bar

Code window

WYSIWYG window

Property inspector

Results panel

Tag selector

CSS panel

Files panel

Coding toolbar


CSS Panel


Index



Example of layout with CSS

container

header

content

maincol

subcol


CSS layout: absolute


CSS layout: structuring divs<body><div id="container">

<div id="header"><div id="title">...</div><div id="nav">...</div>

</div><div id="content">

<div id="maincol">...</div><div id="subcol">...</div>

</div></div></body>


CSS layout: container

#container {position: absolute;width: 750px;left: 50%;margin-left: -375px;

}

Center hack


CSS layout: header

header

title

nav


CSS layout: header II<div id="header">

<div id="title"><h1>The rhythm of the war drums</h1>

</div><div id="nav">

<ul><li><a href="index.html">Home</a></li><li><a href="cv/cv.html">CV</a></li><li><a href="links/links.html">Links</a></li>

</ul></div>

</div>

#header {position: absolute;top:0px;width:750px;

}


CSS layout: header III#title {

position: absolute;top: 0px;width: 100%;margin: 0px;height: 100px;

}

#nav {position: absolute;top: 100px;left: 0px;width: 100%;height: 20px;

}

#nav ul {list-style-type: none;padding: 0px;margin: 0px;border: solid #ccc;border-width:0 1px;

}

#nav li {display: inline;

}

Title (logo)

Navigation barusing a list


CSS layout: content

content

maincol

subcol


CSS layout: content II<div id="content">

<div id="maincol"><h3>Counting bodies like sheep</h3><p><img src="images/logo.jpg" alt="logoAPC" class="logo" />Don't fret precious, I'm here<br />Step away from the window<br />And go back to sleep<br />

...

</div>

<div id="subcol"><ul>

<li>1</li><li>2</li><li>3</li>

</ul></div>

</div>


CSS layout: content III

#content {position: absolute;top:120px;width:750px;

}

#maincol {position: absolute;left: 0px;width: 595px;background-color: #c8956f;padding: 0 0 0 5px;

}

#subcol {position: absolute;right: 0px;width:150px;background-color:#a77b5b;

}


Example of layout: relative


CSS layout: structuring divs<body><div id="container">

<div id="header"><div id="title">...</div><div id="nav">...</div>

</div><div id="content">

<div id="maincol">...</div><div id="subcol">...</div>

</div></div></body>


CSS layout: container

#container {position: relative;top: 0px;width: 80%;margin: 0 auto;

}


CSS layout: header

header

title

nav


CSS layout: header II<div id="header">

<div id="title"><h1>The rhythm of the war drums</h1>

</div><div id="nav">

<ul><li><a href="index.html">Home</a></li><li><a href="cv/cv.html">CV</a></li><li><a href="links/links.html">Links</a></li>

</ul></div>

</div>

#header {position: relative;width:100%;

}


CSS layout: header III#title {

float: left;width: 100%;padding: 0;margin: 0px;

}

#nav {position: relative;width: 100%;

}

#nav ul {list-style-type: none;padding: 0px;margin: 0px;border: solid #ccc;border-width:0 1px;

}

#nav li {display: inline;

}

Title (logo)

Navigation barusing a list


CSS layout: content

content

maincol

subcol


CSS layout: content II<div id="content">

<div id="maincol"><h3>Counting bodies like sheep</h3><p><img src="images/logo.jpg" alt="logoAPC" class="logo" />Don't fret precious, I'm here<br />Step away from the window<br />And go back to sleep<br />

...

</div>

<div id="subcol"><ul>

<li>1</li><li>2</li><li>3</li>

</ul></div>

</div>


CSS layout: content III

#content {position: relative;width: 100%;

}

#maincol {float: left;width: 80%;background-color: #c8956f;padding: 0 0 0 5px;

}

#subcol {float: right;width: 18%;background-color:#a77b5b;

}


Index



Property inspector

Changes depending on the selected object


Validator

Results panel, Validation tab


Browser check

Results panel, Target Browser Check tab


Preview in browser


Default DTD for new document


Questions?

Date post:	22-Dec-2015
Category:	Documents
View:	217 times
Download:	0 times

PART II 10.04.2007 dmfd. Digital Media: Communication and DesignF2007 Comments Remember: make a...

Documents