Embed Size (px)
Citation preview
©Charlotte F Czepluch • [email protected]
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitio-nal//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>ToyStory Separated</title> <link href=”toystorystyle.css” rel=”stylesheet” type=”text/
css”/></head>
<body background=files/baggrund.gif>
<img src=”files/legemand.gif” align=right> <img src=”files/logo.gif” align=top>
<p class=”center”>Halli Halli Halli</p> <p>Hallo Hallo Hallo</p>
<ul> <li>FREE <a href=”files/husk.htm”>Birthday rememberer</
a></li> <li>HERE & NOW <a href=”files/anbefales.
htm”>Recomendations</a></li> <li>SHIP AN E•MAIL <a href=”mailto:charlotte@theslyfly.
com”>Charlotte, please help ...</a></li> <li>CONSULT <a href=”files/konsulter.htm”>The ToyMan</
a></li> <li>BUY <a href=”http://shop.lego.com/en-DK/”>OnLine
Shopping</a></li> </ul>
<h3 class=”center”>GREAT toys from days of YONDER</h3> <br /><br />
<a href=”page1.htm”>This is a link for PAGE 1</a> <br />
<a href=”page2.htm”>This is a link for PAGE 2</a>
</body>
</html>
tags u just need 2 know
Header, Meta, Title:<head> <title>put title here</title></head>
CSS include (place below title tag): <link href=”filename.css” rel=”stylesheet” type=”text/css”/>
Link for internal page: <a href=”filename.htm”>put text above link for internal page here</a>
Link for external page: <a href=”http://URL/”>put text above URL for external page here</a>
Link for e-mail address: href=”mailto:mailaddress@URL”>put text above mail address here</A>
Link for images: <img src=”folder/filename.filetype” align=right>
Download Dreamweaver(test version)
NOW
Please :-)
<html>
<head> <title>internal</title>
<style type=”text/css”> h1 {text-align: center; color: red;} h2 {font-style: italic; text-align: right; color: magenta;} </style> </head>
<body> <p> <h1>h1 overskrift</h1> <h2>h2 overskrift</h2> <br />... stadig med horisontal linje:<hr /> </p> </body>
</html>
<html>
<head> <title>inline</title> </head>
<body> <p> <h1 style=”color:red;”>h1 overskrift</h1> <h2 style=”color:blue;”>h2 overskrift</h2> <br />... stadig med horisontal linje:<hr /> </p> </body>
</html>
<html>
<head> <title>external</title> <link rel=”stylesheet” type=”text/css” href=”external.css”></style> </head>
<body> <p> <h1>h1 overskrift</h1> <h2>h2 overskrift</h2> <br />... stadig med horisontal linje:<hr /> </p> </body>
</html>
h1 {text-align: center; color: red;} h2 {font-style: italic; text-align: right; color: magenta;}
inline internal / embedded external
©Charlotte F Czepluch • [email protected]
©Charlotte F Czepluch • [email protected]
browser view index-file css file
root
organising yourself
overwriting vs overriding This is a discipline you need to master in order to get the most out of WordPress child themes ... well, to get to most out of tweeking any CMS ... actually: to get the most out of anything that has to do with online code production. Period.
Chris Courier: Override Inline Styles with CSS
Beautiful HTML codeKiller CSS
Killer CSS ResetsMore Killer CSS Resets
For the bored ones:javascript / Codecademy
©Charlotte F Czepluch • [email protected]
exercise binternal CSS
• copy the code from EXERCISE A to a new doc• replace inline styling with internal CSS and:• make the background black• change text (and head lines) to white• save as internal.html • holler, and I’ll come have a look :-)
exercise cexternal CSS
• copy the code from EXERCISE B to a new doc• move the css styling to an external stylesheet• save as external.html and external.css• put both files in a folder called root_yourname • holler, and I’ll come have a look :-)
exercise dOverwriting & Overriding
• copy the ‘root_yourname’ folder from EX C• name the new folder ‘root_yourname2’• Turn h1 pink by overwriting the CSS code• Turn h2 yellow by overriding the CSS code• Overwrite ’... stadig med linjeskift ...’ to green• Override ’... stadig med horison...:’ to silver• save, holler and I’ll come have a look :-) • psssst: want to override inline styles from an
external stylsheet? Follow this link ...
exercise ainline styling
• open a text editor• set up a site containing: • title: inline • a hearder 1 saying: h1 header • a hearder 2 saying: h2 header• now, using INLINE styling ONLY:• make h1 blue and centered• make h2 red, italic and right aligned• save as inline.html• holler, and I’ll come have a look :-)
the fast & furiousHelp your classmates – or check out this link ...
css still a mystery?Go 2 w3School and chew through it :o)Check if Russ Weakley ’speaks to you’ – if he does, you can buy his pamphlet at libris.dk
<html> <head> <title>inline • internal • external</title> </head> <body> <p> <h1>h1 header</h1> <h2>h2 header</h2> <br />... still with a horisontal line:<hr /> </p> </body></html>
• the css include is • not placed in header element • misspelled• index and css files are not placed in the same
folder• Smart quotes are used (maybe because the text
is copied from a PDF-file)• a colon is used in stead of a semicolon – or vice
versa• something is missing (colon, bracket or similar)• there’s one too many of something (colon,
bracket or similar)
nb! nb! nb!typical rookie mistakes ...
©Charlotte F Czepluch • [email protected]
dreamweaver • basics exercise i • from scratch• Open DW• Create New Site via one of these 4 possibilities: - the Welcome screen - Menu > Site > New site - the Application Tool Bar or ... - the Files Panel• Create new project – name it ‘Scratch’• Create root – name it ‘root_yourname_scratch’• Place on desktop• Create new index.html file• Create underpages• Link to underpages• Create External links
exercise ii • draw in old• Find root_yourname folder (on your desktop)• Create new DW project – call it OLD• Point your new DW project towards this folder• Double click index-file and take a look• Take a look at the css files (if you’ve got any)• Try working on your files for a shot• rearrange and rename files & folders according
to available rules, regulations and guide lines• Save – and take a look at your work ...© Charlotte F Czepluch
naming• no (white) spaces (use underscore)• keep it short• no special characters• no upper case letters (i.e. noCameling)• htm from now on, please
©Charlotte F Czepluch • [email protected]
dreamweaver • structure
’Web sites, by their very nature, rely on understanding where other files are’, – James Williamson, lynda.com
exercise iii • organize• Create a new root – call it NEW• Create a new site: Menu > Site > New Site
make sure to point it at the folder NEW• Create a a new page: Menu > File > New or Cmnd / Ctrl N• Doc type XHTML - don’t attach CSS• Save as ‘index.html’ (in NEW)
Import text• Go find some text on the internet about CMSes• Drag this text through a cleaner – one of the
more efficient is the WordPress one, which you got aquinted with earlier 2day
• Tag • Tag • Tag • Tag • Tag • Tag • and • Tag •• Make sure, that all paragraphs and headlines
are tagged properly• Use the tag selector + your common sence• Fool around with CSS• ... i.e. create new rules and stuff
Prepare • Plan • think out a Strategy• Draw up a SiteMap knowing that:• You are constructing a brand new site targeted
UI designers / professionals
Handle links• Split up in under pages, place some sort of
menu at the top • ... an unordered list is fine :-)• Handle external links (look right: feel free to use
some of these links)• Go Google / get some photos• Place and handle these too• Place a few e-mail links
New Page
The Hard Way
New Site
The High Way
same directory<a href=”index.htm”>Home</a>up one directory<a href=”../index.htm”>Home</a>down a directory<a href=”_assets/photos/gallery.htm”> Gallery</a>
©Charlotte F Czepluch • [email protected]
dreamweaver • css
id selectorwritten in .css sheet like this: ....call from .htm-doc looks like this: #somethingNB: There can be only one!
class selectorwritten in .css sheet like this: ....call from .htm-doc looks like this: .somethingNB: Whereas this is for the masses (ha-ha)
tag selectorwritten in .css as per abovecall from .htm-doc: <’tag’ style=something>...</’tag’>NB: Behave!© Charlotte F Czepluch
div tagwritten in .htm like: <div style=something></div>NB: Block level
span tagwritten in .htm like: <span style=something >...</span>NB: Behave!
©Charlotte F Czepluch • [email protected]
Tag selector... where am I ...?
Nice to know before you start changing stylingNice to have when checking tags
© Charlotte F Czepluch
Tag along!In order for you – and especially your team – to live happily ever after in Cyber Space, you need to tag your project properly. It’s as simple as that
InLine• Is done ’in HTML’• Does not disturb ’site-wise’ or ’site-wide’• But beware ...
Lists – ul & ol & nesting & so on & so forth ...
