Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to

Slides:



Advertisements
Similar presentations
Very quick intro HTML and CSS. Sample html A Web Title.
Advertisements

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Diliev.com & pLOVEdiv.com  DIliev.com.
Unit 20 - Client Side Customisation of Web Pages
آموزش طراحی وب سایت جلسه هشتم – طراحی یک تمپلیت تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.
CS4370/6370 Web Development Cascading Style Sheets (CSS)
CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
Web Design & Development Cascading Style Sheets (CSS)
The Viewport body element w/ bg image body element w/ bg image wrapper.
Cascading Style Sheets Cyndi Hageman. Applying a Style Sheet  In-line style – used within the HTML tag  Embedded Style Sheet – located in the HTML document.
Cascading Style Sheets – Block Level. Block Level Style So far we have done text-level CSS With block level CSS, we used a generic container tag Similarly.
Cascading Style Sheets Example
Cascading Style Sheets CS3505. What are CSS? Method for adding style attributes consistently to HML tags Cascading because styles are applied in order.
Cascading Style Sheets Billy Toy Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties.
CSS Dvijesh Bhatt.
HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.
LING 408/508: Programming for Linguists
Principles of Web Design 6 th Edition Chapter 10 – Data Tables.
Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.
Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:
Web Development & Design Foundations with XHTML
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
CSS Best Practices By Peter Funk 1. Web development since 1996 Senior Front-end web developer at Ancestry.com Proficient at CSS, HTML, and native JavaScript.
Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.
Cascading Style Sheet Bayu Priyambadha, S.Kom. Definition Cascading Style Sheets (CSS) form the presentation layer of the user interface. –Structure (HTML)
CHAPTER 3 CSS & CSS3 อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
COMP213 – Web Interface Design
CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.
Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.
Movable Type 3.2 Structure Main Index Template In the following sheets you will find: The div-structure of the Main Index Template The default HTML code.
Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.
CSS WORKSHOP Design Principles for Web Standards.
>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.
Week 8 – Part 2 Page Layout Basics Key Concepts 1.
CSS with XHTML Please use speaker notes for additional information!
LING 408/508: Programming for Linguists Lecture 10 September 30 th.
Internet Technology Dr Jing LU Updated Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS properties for margin  CSS properties for dimensions (width,
3.2 Cascading Style Sheets. 2 Positioning Elements Normally, elements are laid out on the page in the order that they are defined in the XHTML document.
Microsoft Expression Web-Illustrated Unit F: Enhancing a Design with CSS.
AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.
CSS – Cascading Style Sheets
5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS.
 HTML, CSS, JavaScript – enormously successful  SASS has all the tools we need! INTRO.
JavaScript and CSS
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo.
Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web.
Week 5.  Normal document flow  Affecting document flow with float and position properties using CSS  Using these properties to create layouts.
Cascading Style Sheet Fix the Errors Lesson 4. / Pat Learner / h1, h2, h3, h4 { font-family: tahoma, arial, helvetica, sans-serif text-align: left; }.skyblue.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,
PERSPECTIVES: TUTORIAL 4 CREATING PAGE LAYOUTS WITH CSS.
03 CSS (Cascading StyleSheet) Р.Жавхлан МОНГОЛ УЛСЫН ИХ СУРГУУЛЬ Мэдээллийн технологийн сургууль Интернэт технологийн үндэс 2015 Намар.
1 Copyright © 2013 Lee, Kim & Park, Life & Power Press 1 를 이용한 레이아웃.
Chapter 7.  Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize.
CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.
1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)
Welcome To Website Design, Hosting And Management Prepared By Webdev Solution ip ,223,96.
HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,
Unit 3 - Review. Topics 1. Tag, Attribute, Value 2. CSS Rule Syntax + link 3. Categories of Selectors 4. Inline vs Block Tags 5. CSS Layout 6. CSS Box.
... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning.
Presentation transcript:

Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to Grab the banner image and place as background in #header

Hints! You need: #container { } #header{ } #navcontainer { } #content { } #footer { } Place appropriate styles in each section

Container #container { margin-left: auto; margin-right: auto; border: 1px solid #000; width: 760px; margin-bottom: 5px; padding: 0px; background-color: #BEDBA5; }

Header #header { background-color: #fff; background-image: url(bannerp.png); background-repeat: no-repeat; height: 150px; margin-left: 0px; }

Navcontainer #navcontainer { float: left; width: 140px; margin-top: 5px; margin-bottom: 0px; margin-left: 5px; text-align: center; }

Navcontainer: h1 #navcontainer h1 { color: #C7E8AA; font-family: arial; text-transform: uppercase; display: block; font-size: 10pt; border-top: 1px solid #000; border-bottom: 1px solid #000; background-color: #5B7247; margin-left: 10px; margin-bottom: 0px; }

Navcontainer: ul #navcontainer ul { padding: ; list-style-type: none; font-size: 8pt; font-family: arial; height: 15px; margin: 0px; }

Navcontainer: a #navcontainer a { display: block; background-color: #ABCE8D; font-family: arial; height: 15px; color: #3E4C32; margin-left: 10px; }

Navcontainer: hover #navcontainer a:hover { display: block; background-color: #8AA574; color: #ABCE8D; font-family: arial; font size: 9pt; }

Content #content { background-color: #D3D3D3; min-height: 500px; margin-left: 160px; }

Content: p #content p { color: #000; font-family: arial; font-size: 8pt; padding: 5px; text-align: justify; margin-top: 0px; }

Footer #footer { background: url(footer.png) #8AA574 no-repeat; text-align: right; border-top: 1px solid #627552; font-family: arial; font-size: 8pt; padding: 40px 5px 0px 0; }