Louisa Lambregts, Louisa Lambregts

Slides:



Advertisements
Similar presentations
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
Advertisements

Authoring Languages and Web Authoring Software 4.01 Examine web page development and design.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Computing Concepts Advanced HTML: Tables and Forms.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Chapter 14 Introduction to HTML
Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.
Louisa Lambregts, What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations.
Web Design Basic Concepts.
Dobrin / Keller / Weisser : Technical Communication in the Twenty-First Century. © 2008 Pearson Education. Upper Saddle River, NJ, All Rights Reserved.
Chapter 12 Creating and Using XML Documents HTML5 AND CSS Seventh Edition.
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Webpage design for researchers Dr Jim Briggs 1.
CS 299 – Web Programming and Design Introduction to HTML.
Styles with Cascading Style Sheets (CSS) Web Design – Section 4-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design.
NetTech Solutions Working with Web Elements Lesson 6.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
Dreamweaver MX Unit B CIS 205—Web Site Design and Development.
How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.
Web Application Programming Presented by: Mehwish Shafiq.
 Computer use language to communicate  A web browser will read these tags and translate it into what you actually see  Viewing Code of ESPN WebsiteESPN.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
Jozef Goetz, STEM Summer Camp Dr. Jozef Goetz.
Louisa Lambregts, Louisa Lambregts
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
University of South Asia Course Name: Web Application Prepared By: Md Rezaul Huda Reza
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
Louisa Lambregts, Louisa Lambregts
Louisa Lambregts, Louisa Lambregts
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
Dreamweaver is an XHTML editor that allows you to: Create a site Create external Cascading Style Sheets (CSS) to store the styles used in your pages Create.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
Introduction. Internet Worldwide collection of computers and computer networks that link people to businesses, governmental agencies, educational institutions,
COMP 143 Web Development with Adobe Dreamweaver CC.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Basic in Photoshop Tools in Photoshop Simple templates design menu in Photoshop different navigation bar image effects Design your portfolio page Design.
Alabama Educational Technology Conference
Web Basics: HTML/CSS/JavaScript What are they?
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
4.01B Authoring Languages and Web Authoring Software
Chapter 1 Introduction to HTML.
Project 1 Introduction to HTML.
Unit 2, Lesson 5 Website Development Tools
Objective % Select and utilize tools to design and develop websites.
Section 10.1 YOU WILL LEARN TO… Define scripting
Unit 2, Lesson 5 Website Development Tools
Web Programming– UFCFB Lecture 9
4.01B Authoring Languages and Web Authoring Software
Overview of Dreamweaver
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Common Page Design Elements
CIS 133 mashup Javascript, jQuery and XML
Web Programming– UFCFB Lecture 9
Presentation transcript:

Louisa Lambregts,

Louisa Lambregts

Discussion Questions ? Why are you taking this course: personal interest, training for your job, transitioning to new career What do you hope to learn from this course? (Be as specific as possible). Do you have any web design or HTML experience?

PlanDevelopPublishMaintain

PlanDevelopPublishMaintain -concept -wireframe of layout -navigational structure

PlanDevelopPublishMaintain -interface design -design template -build pages -add content -build/embed features -user testing

PlanDevelopPublishMaintain -review content -upload to server -get web host -get domain name

PlanDevelopPublishMaintain -set up content maintenance plan -set up content owners with Contribute -set up administrative settings (e.g. versioning, check files in and out)

College Computer Store Educational version Bundles are available

From the Web  Firebug  Free Web Sites Weebly: Wix:  Free CSS Templates (inspiration only!)

In the beginning... There was html.

Layout was dominated by Text formatting Layout via tables Frames Javascript: Roll-over buttons Animations Splash page Flash

nge.html

And then came CSS and Flash. Example of a site that uses: 1) Dreamweaver Templates and Contribute for site management and publishing 2) Formatted with mostly CSS 3) Uses javascript for the menu and the slideshow Example of a site that uses: 1) Flash as an introductory page 2) Also, still uses tables for layout

Acronym for...

Acronym for … Hyper Text Mark Up Language

Basic Page Layout My first Web Site Your content

Syntax Content Nesting -having open and close tags

Syntax Only element without an end tag

 HTML was designed to display data Formatting  XML (Extensible Mark Up Language) was designed to transport and store data.  XHTML: HTML + XML Stricter version of HTML (tighter syntax)

What was CSS designed to do? How does it work?

Format separated from content  Different style sheets for different outputs  Can change look and feel of site by linking to a different style sheet Flexibility of layout

Red Text In HTML, would code in page: Red Text

In CSS, could do: Red Text

In CSS, could define all body text to be red: body {color:red;}

I want this paragraph to be red. And the next paragraph too! In CSS, could define one section to be red: I want this paragraph to be red. And the next paragraph too!

w3schools Try the interactive tutorials related to HTML Get a Head Start on the Technical Basics