Anatomy of a Website Adobe Dreamweaver. Overview When you look at a web page, you might wonder how it is made. To display a web page, your Internet browser.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Dr. Dawn Sherry Dr. Barry J. Monk Assistant Professor of.
Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.
HTML. The World Wide Web Protocols Addresses HTML.
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Chapter 14 Introduction to HTML
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
OBJECTIVES  What is HTML  What tools are needed  Creating a Web drive on campus (done only once)  HTML file layout  Some HTML tags  Creating and.
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML file format  Lesson Objective: Understanding HTML and how it is used to create web pages.  Learning Outcome:  Create a HTML page by interpreting.
Louisa Lambregts, Louisa Lambregts
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.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
COMP 143 Web Development with Adobe Dreamweaver CC.
Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Cascading Style Sheets (CSS). Learning Objectives To develop an understanding of how CSS can enhance the design of a webpage To create and apply CSS styling.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Basic concepts of web design
Getting Started with HTML
Web Basics: HTML/CSS/JavaScript What are they?
HTML basics
Objective % Select and utilize tools to design and develop websites.
CSS Layouts: Grouping Elements
INTRODUCTION TO HTML AND CSS
AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE By: RC Emily Solis
Objective % Select and utilize tools to design and develop websites.
HTML Robert McIntosh
HTML Images CS 1150 Spring 2017.
HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page
Computers and Scientific Thinking David Reed, Creighton University
Of HTML, CSS and JavaScript
Basic HTML and Embed Codes
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
INTRODUCTION TO HTML AND CSS
What is HTML?.
Introduction to HTML5.
Internet Technologies I - Lect.01 - Waleed Ibrahim Osman
HTML Images CS 1150 Fall 2016.
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Computer communications
Basic HTML Workshop.
Web Development 101 Workshop
Session 3: Basic CSS Spring 2009
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.
Presentation transcript:

Anatomy of a Website Adobe Dreamweaver

Overview When you look at a web page, you might wonder how it is made. To display a web page, your Internet browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS Dreamweaver includes features that allow you to build web pages based on the latest web standards. Let's look at how HTML and CSS work together to make a web page.

What is HTML? Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening and closing tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. The example on the right shows three common HTML tags. specifies heading text, good for page titles specifies paragraph text, good for body text displays an image specified by a src (source file

What is CSS? With HTML you've given a basic structure to your web page, but there's not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page). The example on the right shows how CSS is used to change the appearance of the three HTML elements. h1 The heading text is center-aligned. p The paragraph text is red, bold, and center-aligned. img The image is resized to 150px by 100px

Stages of Web Design Plan your content Audience?Color SchemeGraphicsContent Wireframe your design Draw diagramsWrite content Create webpage HTMLCSS Publish your site Web address

Plan your content Which project are you going to choose?

Business Website You will be coming up with your own business and starting it from scratch. You will need to come up with the following to create your online store: Business Name What will your business do or sell? Mission Statement Location Phone Number address Motto Items and Services Cost of items and services PLUS MORE!!!

Career Website You will be researching a career – What do you want to be when you get older? You will need to research the following: What they do? Work Environment How to become one? Pay Job Outlook Interview 4 people in that field PLUS MORE!!

Plan Your Content Audience – who will be your audience? Bakery – people who like sweets Lawyer – other lawyers or students who want to become a lawyer Graphics – pictures Bakery – desserts, cupcakes, brownies Lawyer – books, lawyer, glasses Color Scheme Bakery – bright colorful colors Lawyer – neutral colors (brown, cream, black) Content – words Bakery – About your company, items selling, prices Lawyer – facts about being a lawyer

Homework Plan your content on paper You will need to have this to move on