CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.

Slides:

Advertisements

Similar presentations

Introduction to HTML, XHTML, and CSS

Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

TS 313 Multimedia Applications Welcome to TS 313 Multimedia Applications There is no audio lecture associated with this set of introduction slides Refer.

Project 1 Introduction to HTML.

. Website and file organization. How websites work.

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.

Dreamweaver 8 Concepts and Techniques Introduction Web Site Development and Macromedia Dreamweaver 8.

1st Project Introduction to HTML.

Chapter 14 Introduction to HTML

Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.

HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.

Chapter ONE Introduction to HTML.

WEB DESIGN SOME FOUNDATIONS. SO WHAT IS THIS INTERNET.

Web Design Basic Concepts.

1 Introduction to Web Development. Web Basics The Web consists of computers on the Internet connected to each other in a specific way Used in all levels.

Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.

 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.

Printed by WEB PAGES Denny Stefani Ramírez and Mónica I. Adorno Josefina Barceló School, Guaynabo, Puerto Rico The purpose of this.

Chapter 1 Introduction to HTML, XHTML, and CSS

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.

Delving into the Internet and Networks. In the beginning  ARPANET – set up for the military to have another network of communication  Pre-cursor to.

First things, First Do you belong in here? – 10 – 12 – Comp. Discovery or Keyboard/Comp Apps – Do you have any experience with Web Page Design?????

Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.

Exploring Web Page Design. What is a Web Page?  A web page is a multimedia file which can be stored on a web server.  It can include text, graphics,

IT Introduction to Website Development Welcome!

Project Proposal Interface Design Website Coding Website Testing & Launching Website Maintenance.

Basic Knowledge of Web creation. Computer graphic knowledge Graphic file has 2 types Raster Graphic A bitmap or raster image are comprised of pixels in.

HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS.

The Internet  Internet Hardware connected together Creates a massive worldwide network  Hardware Computers Communication lines  Interlinked collection.

HTML. Principle of Programming  Interface with PC 2 English Japanese Chinese Machine Code Compiler / Interpreter C++ Perl Assembler Machine Code.

Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on the Web.

Here you are at your computer, but you don’t have internet connections. Your ISP becomes your link to the internet. In order to get access you need to.

Objective Understand concepts used to web-based digital media. Course Weight : 5%

Using the Internet. (WWW) and the Internet The World Wide Web (WWW) is a small part of the Internet. The Internet relates to all the hardware and software.

Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.

Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.

Web Design Basics.

Universidad Interamericana Student Research development Center Caribbean Computing Center For Excellence CCCE Alliance Pre-College Research Program Web.

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.

Multimedia and the Web.

1 Chapter 01: Introduction by Tharith Sriv. This course covers the following topics:  Hypertext Markup Language (HTML)  Cascading Style Sheets  JavaScript.

Chapter 1: The Internet تال 311 Prepared by: Mr. Hassen HAMOUDA.

Web Design. What is the Internet? A worldwide collection of computer networks that links millions of computers by – Businesses (.com.net) – the government.

Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.

HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.

Website Design, Development and Maintenance ONLY TAKE DOWN NOTES ON INDICATED SLIDES.

Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.

Introduction to the World Wide Web & Internet CIS 101.

The Internet What is the Internet? The Internet is a lot of computers over the whole world connected together so that they can share information. It.

Web Design – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components.

Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)

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.

Tutorial 1 Getting Started with Adobe Dreamweaver CS5.

Web Page Design The Basics. The Web Page A document (file) created using the HTML scripting language. A document (file) created using the HTML scripting.

CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.

Web Page Programming Terms. Chapter 1 Objectives Describe Internet and Understand Key terms Describe World Wide Web and its Key terms Identify types and.

HTML PROJECT #1 Project 1 Introduction to HTML. HTML Project 1: Introduction to HTML 2 Project Objectives 1.Describe the Internet and its associated key.

Chapter 10 Multimedia and the Web.

Project 1 Introduction to HTML.

Web Site Development and Macromedia Dreamweaver 8

Chapter 1 Introduction to HTML.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Basic Knowledge of Web creation

Project 1 Introduction to HTML.

Unit 2, Lesson 5 Website Development Tools

Unit 2, Lesson 5 Website Development Tools

Lesson 5: Multimedia on the Web

ITI 163: Web, Mobile, and Social Media Design Introduction

4.00 Apply procedures to add content by using Dreamweaver. (22%)

Presentation transcript:

CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets Usability Accessibility Metatags Open Source SEO Search Engine Optimisation -->

CM143- WEB Introduction | Page Elements | Files | FTP Who? MMA1 ( that’s you!) and Declan Tuite Room C2117

CM143- WEB Introduction | Page Elements | Files | FTP What? Producing websites. Code focused not software. (HTML/XHTML/CSS) Navigation Looking at page structure. Site Architecture Usability SEO Accessibility Getting media online. User Consideration

CM143- WEB Introduction | Page Elements | Files | FTP Where? Here, DCU Labs & anywhere. (WWW) You can develop, edit and upload from DCU Home internet café any WiFi enabled area ( Starbucks / McDonalds) No shortage of software / Tools Not only tools as in DCU but many open source tools also.

CM143- WEB Introduction | Page Elements | Files | FTP When? Here, Now and lots of work outside class too! Approx 1.5 – 2hrs needed each week outside class / lab times Overview of Weeks Weeks 1-5 Basics: Getting pages lives Linking – pages => sites Images ( how to get live and appropriate use) CSS – Cascading Style Sheets – formatting / look and feel Weeks 7-12 Detail and Higher level: Asessability, Usability, SEO Multiple platforms: Print, TV, Handheld Embedding media - More on images

CM143- WEB Introduction | Page Elements | Files | FTP How? Lectures: Principles, Demos & Q + A Lab Sessions: Basic Skills and Demos Independent Learning: time ( approx 1.5 – 2hrs per week) Assignments: x 2 1 st : Groups of 2 ‘Character Site’ 2 nd : Merged with CM144 groups of 3 “All work produced by students will be presented and maintained as live sites, which will be both viewable and accessible by the public.” Lots of trial and error – but with thinking!

CM143- WEB Introduction | Page Elements | Files | FTP Page Elements: Objects Surface Items: Text Images Space!! Color Links (text/image) Forms Beneath the surface: Html -Hypertext Markup Language Scripts (Javascript etc) CSS Embedded Objects: Flash Movies, Shockwave, Video, Applets Audio

CM143- WEB Introduction | Page Elements | Files | FTP Page Elements: Human Consideration User Experience: Aesthetics Usability Clarity Conforming to user expectations ( or not) Writing Quality Image Quality

CM143- WEB Introduction | Page Elements | Files | FTP Files Graphics Still: -JPEG – good if you have gradients ( photos ‘real’) -GIF – good for line drawings / illustrations -PNG – has ‘alpha layer’ – transparency option. Structure and Style: -HTML can either be.htm or.html -CSS Cascading Style sheets. Embedded files: Moving images: SWF, Mov, Mpg…… Video: MPG, MOV, FLV…. Interactive: SWF, Applet, DCR, ………….

CM143- WEB Introduction | Page Elements | Files | FTP Files - viewing Browsers ( a player for web files?) – lots of browsers -Firefox -Internet Explorer -Chrome -Safari -Opera -SeaMonkey -Camino Not all agreeing on just how to implement HTML, CSS etc.

CM143- WEB Introduction | Page Elements | Files | FTP Files – viewing -Lots of machines and screens. Platforms: PC, Mac, Handheld, Print……….(TV, Screen readers…) Resolution: the maximum number of pixels that can be displayed on a monitor, expressed as (number of horizontal pixels) x (number of vertical pixels) 800X × x x 1200 Connections: Broadband, Dial-up, WiFi, WiMax, Cable…. Speeds count!!!

CM143- WEB Introduction | Page Elements | Files | FTP FTP – getting it live File Transfer Protocol Or Copying from your machine to the server. ………………….a DEMO…………………..

CM143- WEB Introduction | Page Elements | Files | FTP FTP – getting it live Important notes: You need your users name and password You need a client ( in PC labs in DCU we us ‘WSCP’ / in Mac ‘Fetch’) You need to convert that address so that you can get to it through a browser and send the URL to others ( friends, very proud mom/dad etc.) …………DEMO……………..