Today’s Agenda Course Facilitator Introduction Announcements Quiz Servers and Clients URLs Dreamweaver Setup HTML Introduction – Part 2.

Slides:



Advertisements
Similar presentations
Learning the Basics – Lesson 1
Advertisements

Creating and Editing a Web Page Using Inline Styles
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Macromedia Dreamweaver 4 Foundation Level Course.
Learning Dreamweaver Setting up a basic site. Do you have a web account in place? Check it: Enter
Building Web Pages With Microsoft Office. Introduction This tutorial is for the beginning web builder. It utilizes software that you already have, Microsoft.
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
1 Software Testing and Quality Assurance Lecture 32 – SWE 205 Course Objective: Basics of Programming Languages & Software Construction Techniques.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
HTML & Dreamweaver 101 Aman Yadav. Definitions HTTP – The Web uses a protocol called HTTP (Hyper Text Transport Protocol) to communicate between the Web.
HTML Introduction HTML
Agenda – Week 5, Day 2 Complete RoboHelp Tutorial Transition to HTML Tutorial –Warm-up – Explore HTML –Page Design – Create a page –Publishing – Make your.
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 21: Publishing Your Pages on the Web.
WEB DESIGN SOME FOUNDATIONS. SO WHAT IS THIS INTERNET.
Getting Started with Dreamweaver
Create a Website Session I Key Components Hands-on HTML.
Website Development & Management Introduction & Overview CIT Fall Instructor: John Seydel, Ph.D.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
@Ms. Masihi.  Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
1 HTML (Set Up Public Folder) Some material on these slides is taken directly from
CSS/Photoshop Layouts – Quiz #7 Lecture Code:
1 Session 1: Introduction to HTML Spring Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get.
Website Development with Dreamweaver
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
Website Development & Management Creating Web Pages CIT Fall Instructor: John Seydel, Ph.D.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
CIS 205—Web Design & Development Dreamweaver Chapter 1.
Dreamweaver An introduction to Dreamweaver by a beginner who can show you the rudiments of quickly and easily creating a web site. An attempt to offer.
15.1 Fundamentals of HTML.
Web Design (2) Brackets - introduction. Brackets Brackets is a web design code editor It is an open-source project initiated by Adobe (creator of Dreamweaver)
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
Macromedia Dreamweaver 8 Revealed DREAMWEAVER GETTING STARTED WITH.
JavaScript – Quiz #9 Lecture Code:
CSS - Quiz #4 Lecture Code:
XP New Perspectives on the Internet, 4e Tutorial 2 1 Browser Basics Introduction to Microsoft Internet Explorer and Netscape Navigator.
HTML: Hyptertext Markup Language Doman’s Sections.
Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.
January 2006Colby College ITS Setting Up Course Pages.
PART 2 INTRODUCTION TO DYNAMIC WEB CONTENT AND PHP.
1 After completing this lesson, you will be able to: Get around the Internet with your browser. Connect to the Internet. Print Web pages. Save Web pages.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Session 1: Introduction to HTML Fall Today’s Agenda Talk about the functions of the Internet Cover useful terminology for today’s session HTML,
Navigating the Course 1. Course Materials 2 Software: Notepad (or TextEdit on a Mac) – comes with operating system Internet Explorer Web Browser FireFox.
1 An Introduction to Dreamweaver and PHP Part C: Setting Dreamweaver up to handle file transferring FTP.
COSC 2328 – Web Programming.  PHP is a server scripting language  It’s widely-used and free  It’s an alternative to Microsoft’s ASP and Ruby  PHP.
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Finally getting to html and CSS… Tim Berners-Lee, the writer of the software program that makes him the inventor of the WWW, defines the Internet as a.
Getting Started with Dreamweaver
Introduction to HTML.
4.01 How Web Pages Work.
Objective % Select and utilize tools to design and develop websites.
Chapter A - Getting Started with Dreamweaver MX 2004
Learning the Basics – Lesson 1
بسم الله الرحمن الرحيم.
Objective % Select and utilize tools to design and develop websites.
Getting Started with Dreamweaver
CGS 3175: Internet Applications Fall 2009
Dreamweaver.
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Today’s Agenda Course Facilitator Introduction Announcements Quiz Servers and Clients URLs Dreamweaver Setup HTML Introduction – Part 2

About the Instructor Programs Photoshop Flash Dreamweaver ImageReady Languages HTML CSS JavaScript (Vanilla, Prototype, Scriptaculous) PHP SQL (MySQL, PostgreSQL, SQLite) Ruby (Ruby on Rails) ActionScript 2.0 & 3.0 Python C Java Scheme Bash Machine, Assembly, … Alexander Wong (3 rd Year EECS Major) Freelance Web and Graphics Designer Self-taught Recently: Exploring Ruby on Rails Looking into: Internet startups

Previous Work iForged International and DTM Kreuz French Bros. Comfort Suites (Power of CSS) BearStartup (Flash vs. JavaScript)

Announcements DeCal website Profile picture Instant messaging Roll Submitting HW Enrollment Update Software Seekers Mini Project #1 released

HTML - Quiz #1

Servers and Clients Client Server Browser Web Server DNS Lookup google.com = /logo.gif logo.gif

URLs Protocol Hostname DomainPrefix Path File Name Extension URLs specify the location of files on the web. Root ( is the base directory pointed to by the domain namehttp://

Absolute vs. Relative URLs and Absolute URL Root Relative URL /IMAGES/ABOUTUS/IMAGES/a.gif Relative URL IMAGES/ABOUTUS/IMAGES/a.gif

Dreamweaver Setup 1.Create “WDD Site” folder on Desktop 2. Create “IMAGES” sub-folder

Dreamweaver Setup 3. Start Dreamweaver 4. Click Site>Manage Sites… on top bar 5. Click New>Site

Dreamweaver Setup 6. Enter “Web Design Decal” in site name. Click the folder icon next to “Local root folder” and navigate to “WDD Site” on Desktop. Click the folder icon next to “Default images folder” and navigate to “IMAGES” sub-folder 7. Enter industries.com/cs98_xx/ industries.com/cs98_xx/ For “HTTP address”

Dreamweaver Setup 8. On the left side click “Remote Info” and select “FTP” from the “Access” dropdown menu 9. Enter “decal.aw-industries.com” for “FTP host”. Enter “/public” for “Host Directory”. Enter “cs98-xx” for “Login”. Enter your password. Check the box marked “Use passive FTP”. Check the box marked “Automatically upload files on save”.

Dreamweaver Setup 10. Click “Test”. You should see the message above. If you don’t please check your steps. 11. Click “OK” on the dialog and “OK” on the configuration window to save your settings. Dreamweaver is now properly configured and will upload all working documents to the web server on save. You can view your publically accessible pages via

Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall HTML Introduction – Part 2

HTML Document Structure Untitled Document

Doctype Tells the browser what type of document it is and by which rules to follow when rendering the page XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset Not an actual HTML element

html Element xmlns is a required attribute and should be set to what appears above Later versions of xhtml may allow custom namespaces

head Element Place for meta data And tags Description Keywords Title of page Content Type Text/html Image/jpeg Video/mpeg

body Element Where actual website content goes. All the tags from our last lecture should be used here.