CFT2111
This presentation is the property of its rightful owner.
Sponsored Links
1 / 25

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle PowerPoint PPT Presentation


  • 73 Views
  • Uploaded on
  • Presentation posted in: General

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle e-mail: [email protected] The <div> element. <div> <h2>Euismod Ipsum</h2>

Download Presentation

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cft2111 introduction to website development module leader matthew mantle

CFT2111

Introduction to Website Development

Module Leader: Matthew Mantle

e-mail: [email protected]


The div element

The <div> element

<div>

<h2>Euismod Ipsum</h2>

<p>Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. consequat.

</p>

</div>

<div>

<h2>Impedit Scelerisque</h2>

<p>Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat.

</p>

</div>

  • The div element has no semantic purpose i.e. it doesn’t describe the content of the page.

  • It is used for page layout

    • We nest several different elements inside a <div> and then use CSS to target the div element

  • Often we use the float property


The float property

The Float Property

Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat.

Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspedisse augue elit consequat.

Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspedisse augue elit consequat.

Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspedisse augue elit consequat.

  • Just the same as when we did this last week with a paragraph

div{

width : 400px;

float : left;

}

Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat.

Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat.


New section elements in html 5

New Section Elements in HTML 5

  • Most web page designs have common features

    • A header section, a main content area, a footer, a navigation bar

  • In previous version of HTML there was no way to define these sections using HTML tags

    • Instead we has to use a <div> element to mark out a header section or footer section and give it a suitable id attribute

<div id="header">

<img src="logo.gif">

<h1>Welcome to the Site</h1>

<ul>

<li>About Us</li>

<li>Products</li>

<li>Contact Us</li>

</ul>

</div>

#header{

width:800px;

float:left;

}


New section elements in html 51

New Section Elements in HTML 5

<header>

<hgroup>

<h1>CFT2111</h1>

<h2>Introduction to Web Programming</h2> </hgroup>

<nav>

<ul>

<li>Module Overview</li>

<li>Term 1</li>

<li>Assignment 1</li>

</ul>

</nav>

</header>

<section>

<h1>Module Overview</h1>

<p>This course is about developing basic web programming skills and applying these skills to the creation of interactive web pages. The course has two parts. The first introduces HTML and CSS, and the techniques necessary for basic web page construction. The second explores JavaScript and the fundamental programming concepts needed to build interactive web pages.

</p>

</section>

  • The header, hgroup, nav, section, article, aside and footer tags allow us to split pages up into different sections

  • We still need the <div> element but we should use these as well


New section elements in html 52

New Section Elements in HTML 5

<header>

<hgroup>

<h1>CFT2111</h1>

<h2>Introduction to Web Programming</h2> </hgroup>

<nav>

<ul>

<li>Module Overview</li>

<li>Term 1</li>

<li>Assignment 1</li>

</ul>

</nav>

</header>

<section>

<h1>Module Overview</h1>

<p>This course is about developing basic web programming skills and applying these skills to the creation of interactive web pages. The course has two parts. The first introduces HTML and CSS, and the techniques necessary for basic web page construction. The second explores JavaScript and the fundamental programming concepts needed to build interactive web pages.

</p>

</section>

  • <hgroup>

    • Is used to group headings

    • Used when we have a heading and a sub heading

  • <nav>

    • Navigation bar

  • <section>

    • Is the most generic and simply used to define a section of the page

  • <aside>

    • Separate but related content

  • <article>

    • Is a self contained section of the page


New section elements in html 53

New Section Elements in HTML 5

  • Most browsers won’t recognise these new elements!

    • i.e. can’t apply CSS to them

    • There are ways for us to make the most popular web browsers recognise the section elements

      • Even Internet Explorer 6.0 (but this relies on JavaScript so wait until term 2)

  • For Firefox

    • We simply need to declare the section tags as block level elements

header, section, nav, hgroup{

display:block;

}


Css techniques

CSS Techniques

  • There are commonly used CSS techniques e.g.

    • Creating columned layout

    • Centering a page

    • Creating navigation bars from lists


How to go about implementing a css design

How to go about implementing a CSS Design

  • Possible workflow for building your website

    • Design interface

    • Mark-up pages using basic HTML

    • Mark out distinct areas of the page using section tags

    • Create basic layout using CSS

    • Add finishing CSS touches

    • Test!

      E.g. imagine I am going to re-design the university web site…


Step 1

Step 1

  • Design the Interface –

    • Use PhotoShop, Fireworks etc. or can be hand drawn sketches

    • Need a plan to work towards


Step 2 mark up the pages using basic html

Step 2 – Mark-up the pages using basic HTML

<a href="#">school staff</a>

</p>

<h1>Welcome to the school</h1>

<p>

<img src="jimyip2.jpeg" alt="jim yip"/>

</p>

<p>

I am pleased to welcome you to the School of Computing and Engineering at the University of Huddersfield - thank you for 'switching on' to our website and a successful future with us!

</p>

<p>

Our School is an exciting place in which to study. We believe strongly in the supportive environment we offer to all our students with friendly, helpful staff able to offer expertise in a wide range of subjects supported by state of the art facilities.

</p>

Professor Jim Yip

</p>

  • Just using <p>, <h?>, <li>, <a> etc.

  • Don’t care what the page looks like at this point

  • Validate!!!!!!

    • Fixing errors at the end may ruin later work


Step 3 mark up the page using section elements

Step 3 – Mark-up the page using section elements

  • Think about distinct areas of the page

    • headers, footers, navigation bars, columns etc.

    • Mark up these areas using section elements

    • Add appropriate id attributes

    • Validate the page again !!!!!!!!!!!!

    • You should then not need to add any more HTML!

<header>

<img src="logo.gif" alt="university logo"/><h1>COMPUTING & ENGINEERING</h1>

<h2>University of Huddersfield</h2>

</header>

<nav>

<a href="#">school home</a>

<a href="#">about the school</a>

<a href="#">course finder</a>

<a href="#">research</a>

<a href="#">business support</a>

<a href="#">school staff</a>

</nav>

<section id="maincontents">

<h1>Welcome to the school</h1>

<img src="jimyip2.jpeg" alt="jim yip"/>

<p>

I am pleased to welcome you to the School of Computing and Engineering at the University of Huddersfield - thank you for 'switching on' to our website and a successful future with us!

</p>

<p>

Our School is an exciting place in which to study. We believe strongly in the supportive environment we offer to all our students with friendly, helpful staff able to offer expertise in a wide range of subjects supported by state of the art facilities.

</p>

<p>

We aspire to excellence in all our activities having achieved the highest possible QAA quality ratings as a university and in every subject area review that we have had.

</p>…


Step 4 create the basic layout using css

Step 4 - Create the basic layout using CSS

  • Add borders on your section elements so you can see them

  • Specify the layout properties - float, width, positioning etc.

header, nav, section, footer{

border-color:red;

border-width:1px;

border-style:solid;

}


Step 4 create the basic layout using css1

Step 4 - Create the basic layout using CSS

  • I have set widths first for each section element

header{

width:700px;

}

nav{

width:140px;

}

#maincontents{

width:390px;

}

#news{

width:140px;

}

footer{

width:700px;

}


Step 4 create the basic layout using css2

Step 4 - Create the basic layout using CSS

header{

width:700px;

}

nav{

width:140px;

float:left;

}

#maincontents{

width:390px;

float:left;

}

#news{

width:140px;

float:left;

}

footer{

width:700px;

clear:both;

}

  • I then use floats and/or positioning to position the different columns next to each other

    • This example uses floats

    • The clear property prevents the footer from wrapping onto the same line as the three columns


Step 5 add finishing css touches

Step 5 - Add finishing CSS touches

nav a{

display:block;

margin-top:10px;

margin-left:10px;

padding-left:10px;

border-bottom: 1px dotted #aaaabb;

}

nav a:hover{

border-bottom: 1px solid #aaaabb;

background-image:url("tri.gif");

background-repeat:no-repeat;

background-position:center left;

}

img{

float:left;

margin-right:10px;

}

  • Add finishing CSS touches

    • Properties for colour, fonts, background images etc.


Step 6 test

Step 6 - Test

  • There are bound to be differences in different browsers

    • May need to go back and make some adjustments


Centering a page

Centering a Page

  • Designing for the web poses unique problems

    • Don’t know how big the end users monitor will be

    • Have to design for when they re-size the browser window

  • There are two basic approaches for solving this problem

    • Fixed width webpage design – e.g. bbc

    • Fluid webpage design – e.g. amazon


Fixed width webpage design

Fixed Width Webpage design

<body>

<div id="wholepage">

<header>

<img src="logo.gif" alt="university logo"/><h1>COMPUTING & ENGINEERING</h1>

<h2>University of Huddersfield</h2>

</header>

….

Through integrated study and industrial experience, our graduates leave </footer>

</div>

</body>

</html>

  • Using the previous example

  • A div element encloses the entire contents of the page

    • Opening <div> immediately after the opening <body> tag

    • Closing <div> immediately before the closing <body> tag


Fixed width webpage design1

Fixed Width Webpage design

<body>

<div id="wholepage">

<header>

<img src="logo.gif" alt="university logo"/><h1>COMPUTING & ENGINEERING</h1>

<h2>University of Huddersfield</h2>

</header>

….

Through integrated study and industrial experience, our graduates leave </footer>

</div>

</body>

</html>

#wholepage{

width:800px;

margin-left:auto;

margin-right:auto;

}

  • The div element needs to be given a width

  • The auto values for the margin means they will be re-calculated as the browser windows re-sizes


List based navigation bars

List Based Navigation bars

  • Many of the navigation bars we see on the web are constructed using HTML lists

    • The CSS changes them visually to look like the navigation bar

  • Use section elements to mark out content and navigation areas

<nav>

<ul>

<li><a href="#">Lorem</a></li>

<li><a href="#">Ipsum</a></li>

<li><a href="#">Dolor</a></li>

</ul>

</nav>

<section id="content">

<h1>Ut enim ad minim veniam</h1>

<p>

Lorem ipsum

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</section>


List based navigation bars1

List Based Navigation bars

  • Remove the bullets points by targeting the <ul> element that is nested inside the navigation <nav>

<nav>

<ul>

<li><a href="#">Lorem</a></li>

<li><a href="#">Ipsum</a></li>

<li><a href="#">Dolor</a></li>

</ul>

</nav>

<section id="content">

<h1>Ut enim ad minim veniam</h1>

<p>

Lorem ipsum

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</section>

nav ul{

list-style-type:none;

margin:0px;

padding:0px;

}


List based navigation bars2

List Based Navigation bars

  • Wrap all the list elements onto the same line using the float property

<nav>

<ul>

<li><a href="#">Lorem</a></li>

<li><a href="#">Ipsum</a></li>

<li><a href="#">Dolor</a></li>

</ul>

</nav>

<section id="content">

<h1>Ut enim ad minim veniam</h1>

<p>

Lorem ipsum

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</section>

nav li{

float:left;

}


List based navigation bars3

List Based Navigation bars

nav a{

display:block;

width:100px;

padding:10px;

text-align:center;

text-decoration:none;

margin-right:10px;

background-color:rgb(59,114,44);

}

nav a:hover{

background-color:rgb(166,155,3);

}

#navigation #chosen {

background-color:rgb(166,155,3);

}

  • Give the hyperlinks a background colour

  • We need to convert them into ‘block level’ elements first

    • So we can set their width

  • Again note the use of the contextual selector

    • Affect the hyperlinks nested inside a list that is nested inside the nav

<nav>

<ul>

<li><a href="#">Lorem</a></li>

<li><a href="#">Ipsum</a></li>

<li><a href="#">Dolor</a></li>

</ul>

</nav>

<section id="content">

<h1>Ut enim ad minim veniam</h1>

<p>

Lorem ipsum

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</section>


Other css techniques

Other CSS Techniques

  • There are other approaches to controlling page layout with CSS e.g. absolute positioning

  • Have a look in the recommended reading for the module or on one of these websites

    • http://www.alistapart.com/

    • http://www.csszengarden.com/


  • Login