Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information.

Similar documents
WebDev. Web Design COMBINES A NUMBER OF DISCIPLINES. Web Development Process DESIGN DEVELOPMENT CONTENT MULTIMEDIA

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites

A network is a group of two or more computers that are connected to share resources and information.

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab

Figure 1 Properties panel, HTML mode

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

Foundation of Web Goal 4: Proficiency in Adobe Dreamweaver CC

Web Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Chapter 1 Introduction to HTML, XHTML, and CSS

Web Design. Basic Concepts

Seema Sirpal Delhi University Computer Centre

All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal

Professional Diploma in Web Designing

HALTON SKILLS COMPETITION WEBSITE DEVELOPMENT SCOPE SECONDARY LEVEL Coordinator: Ron Boyd,

Adobe Web Authoring using Adobe Dreamweaver Exam and objectives

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Understanding the Web Design Environment. Principles of Web Design, Third Edition

Creating your own Website

1D CIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist Apr 2018

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

CIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist. ( Add-On ) 16 Sep 2018

Working with Images and Multimedia

Adobe Web Communication using Dreamweaver CS5 Curriculum/Certification mapping

Beginning HTML. The Nuts and Bolts of building Web pages.

Training Sister Hicks

Lesson 1: Dreamweaver CS6 Jumpstart

ACA Dreamweaver Exam Notes

Using Dreamweaver To Edit the Campus Template Version MX

CompuScholar, Inc. Alignment to Utah's Web Development I Standards

CS474 MULTIMEDIA TECHNOLOGY

Java Applets, etc. Instructor: Dmitri A. Gusev. Fall Lecture 25, December 5, CS 502: Computers and Communications Technology

Objective % Select and utilize tools to design and develop websites.

Internet programming Lab. Lecturer Mariam A. Salih

The Structure of the Web. Jim and Matthew

Mobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE

HTML5 and CSS3 for Web Designers & Developers

Course Syllabus. Course Title. Who should attend? Course Description. Adobe Dreamweaver CC 2014

Interactive Media CTAG Alignments

Basics of Web. First published on 3 July 2012 This is the 7 h Revised edition

ADOBE Dreamweaver CS3 Basics

Hypertext Markup Language, or HTML, is a markup

This document provides a concise, introductory lesson in HTML formatting.

Reading How the Web Works

Web Development IB PRECISION EXAMS

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

How to lay out a web page with CSS

Unit 4 The Web. Computer Concepts Unit Contents. 4 Web Overview. 4 Section A: Web Basics. 4 Evolution

Dreamweaver CS4. Introduction. References :

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

Adobe Dreamweaver CS5

Dreamweaver Domain 6: Evaluating and Maintaining a Site by Using Dreamweaver CS5

MRK260. Week Two. Graphic and Web Design

Chapter 12 Creating Web Pages

Tennessee. Trade & Industrial Course Web Page Design II - Site Designer Standards. A Guide to Web Development Using Adobe Dreamweaver CS3 2009

Creating and Building Websites

How to lay out a web page with CSS

Adobe Dreamweaver CS3 English 510 Fall 2007

11/5/16 WEB DESIGN. Branding Fall 2016

Page 1 of 4. Course Outline by Topic: Web Design Fall 2009 Instructor: Mr. O Connell Room 117

Lesson 5: Multimedia on the Web

Adobe Dreamweaver CS6 Digital Classroom

Your computer, the internet, and the web. A brief overview

Introduction to Elements of Web Design: WYSIWYG WYSIWYG. What You See Is What You Get

MARKET RESPONSIVE PRESTASHOP THEME USER GUIDE

Beginning Web Site Design

Advanced Dreamweaver CS6

Introduction to web development and HTML MGMT 230 LAB

Adding your One-Step PHP database to a Wordpress themed website. by Ron Miller

Dreamweaver is a full-featured Web application

In this third unit about jobs in the Information Technology field we will speak about software development

How to lay out a web page with CSS

5/19/2015. Objectives. JavaScript, Sixth Edition. Introduction to the World Wide Web (cont d.) Introduction to the World Wide Web

VTEM SLIDES INSTRUCTION MANUAL COPYRIGHT DISCLAIMER. Instruction Manual FOR INFO, UPDATES, REQUESTS & CONTACT

Planning and Designing Your Site p. 109 Design Concepts p. 116 Summary p. 118 Defining Your Site p. 119 The Files Panel p. 119 Accessing Your Remote

Languages in WEB. E-Business Technologies. Summer Semester Submitted to. Prof. Dr. Eduard Heindl. Prepared by

Lecture 5. Digital Media Components Markup and Scripting Languages Multimedia Tools Facilities Provided by the School Suggested Reading

WORLDSKILLS SINGAPORE 2016 TECHNICAL DESCRIPTION. WEB DESIGN (Information for Contestants)

ThingLink User Guide. Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon

Using Dreamweaver CS3 to Create and Publish Simple Web Pages

Introduction to the Internet and World Wide Web p. 1 The Evolution of the Internet p. 2 The Internet, Intranets, and Extranets p. 3 The Evolution of

MAT-225 Informational Brief & Questionnaire

Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design.

Dear Candidate, Thank you, Adobe Education

DRESSSHOP RESPONSIVE PRESTASHOP THEME USER GUIDE

Full file at DW Chapter 2: Developing a Web Page

STRANDS AND STANDARDS

1Site Development Foundations Objectives and Locations

Dreamweaver Primer. Using Dreamweaver to Create and Publish Simple Web Pages. Mark Branom, Stanford University, Continuing Studies June 2011

Want to add cool effects like rollovers and pop-up windows?

Dreamweaver MX The Basics

NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS

Table of contents. DMXzone Nivo Slider 3 DMXzone

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production

The diverse software in the Adobe Creative Suite enables you to create

Building Websites for Lake Organizations

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.

How to Control and Override CSS by Including a CSS Link

ICT IGCSE Practical Revision Presentation Web Authoring

Transcription:

Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information. WWW: (World Wide Web) A way for information to be shared over the internet. It is unique in that it allows documents to be linked to one another via hypertext links (text displayed on a computer display with links to other text) thus forming a huge web of connected information. Website: each page of a website is one plain text word document written in a computer language known as HTML. XML: (extensible Markup Language) is not a specific language but a robust set of rules for creating other languages. HTML: (HyperText Markup Language) a markup language used to create web pages. HTML files have.html file suffixes, or file extensions. CSS: (Cascading Style Sheets) styles that describe how content looks.

JavaScript: A scripting language that accesses the HTML on a page and adds interactivity (transitions, animations, interactions). JQuery: A library of simplified JavaScript. Server-Side Programming: Advanced functionality such as forms, shopping carts, content management systems, databases, and so on. Serverside means it runs off the server to be more secure than running off a person s machine. PHP is a server-side scripting language used for account management. Java: Complex programming language typically used for developing large applications. Overkill for most web site needs. Small Websites: Often written just using HTML and CSS, possibly some use of JQuery Plugins, and simple PHP. Large Websites: Use HTML, CSS, Javascript, PHP, and possibly Java.

Hobbyist: Learn Adobe Dreamweaver. Professional Web Designer: Learn HTML, Style Sheets (CSS), and possibly basic JavaScript knowledge. Web Design Department: Large-scale websites are almost always created by a team of people.

Information Architect: Creates and organizes the content for a website logically. Content Strategist: Makes sure that every bit of text on the site supports the brand identity.

User Experience Designer: Focuses on how people interact with products, brands, and layouts within digital interfaces. They leverage usability testing and user feedback to create wireframes that will be used to design a website, app, or other type of digital experience. User Interface Designer: Takes those wireframes and designs the interactive elements that are needed to navigate through the website. This includes everything from buttons, dropdown menus, and site navigation. Interaction Designer: Makes the site as easy, efficient, and delightful to use as possible. Web or Graphic Designer: Designers create the look and feel of the site to ensure that the site makes a good first impression and is consistent with the brand and message of the organization it represents. Typically they generate sketches of how the site might look.

Development: Developers handle the creation of the files, the code. Backend Development: Focuses on the server, including the applications and databases that run on it. Some programing languages that collect form data include: PHP, Ruby, and Python. Frontend Development: Refers to any aspect of the design process that relates directly to the browser. That includes HTML, CSS, and JavaScript.

Authoring: The process of coding with HTML. Marking up the content with HTML tags that describe the content on the web. HTML (HyperText Markup Language) is the authoring language used to create web page documents. Styling: Styling Developers add CSS to the page. Cascading Style Sheets (CSS) describe how that content should look or appearance of the page in the browser. Scripting: Web programmers work with dynamic content and web scripts. They use a JavaScript language that makes elements on web pages do things like add behaviors.

SEO Specialists: A website isn t much good if nobody knows it exists, so it is crucial that a site be easily found by search engines. Search Engine Optimization (SEO) is a discipline focused on tweaking the site structure and code in a way that increases the chances it will be highly ranked in search results. Multimedia Producers: Multimedia producers add multimedia elements to a site, including sound, video, animation, and flash movies for interactivity.

Rich Text: (RTF) Microsoft Word. Formatting breaks the page code. Plain Text: No formatting. TextWrangler (Mac), Notepad (Win), Coda. Web Page Authoring Program: Adobe Dreamweaver (WYSIWYG: what you see is what you get, the ability to directly manipulate the layout of a document without having to type code). Mac Text Editors: TextWrangler, Coda, Brackets, Sublime Text PC Text Editors: Notepad++, Aptana Studio, Microsoft Visual Studio Graphic Software: Adobe Photoshop for image creation. To sketch your designs: Adobe Illustrator, Adobe InDesign, Adobe XD, Sketch, Figma, and UXPin Multimedia Tools: Adobe Flash (animation, sound, interactive effects), Adobe Final Cut Pro (advanced video editing).

Browser: a software that requests websites. The most popular browsers for designers and developers are Firefox and Chrome. Some other browers include: Opera, Safari, Internet Explorer (PC only), and Microsoft Edge (PC only). Internet Tools: Use a variety of browsers because each browser interprets and renders the website or HTML code a little differently. You ll want to test your pages on as many browsers as possible. IP Address: (Internet Protocol Address) every computer or device that connects to the internet is assigned a unique identifying number or IP Address, for example 208.201.239.37. Domain Name System: Human-readable name associated with a numeric IP address, for example oreilly.com. The IP address is useful for computer software, while the domain name is accessible to humans.

HTML Pages: are uploaded to a computer called a web server so other viewers can access the website files. Server: software (not a computer) that serves up a website upon request. When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server. Web servers are constantly connected to the Internet. Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site.

Process of Viewing a Web Page: 1. When you enter a URL in your browser, the computer or device sends a request to the IP address of the web server for that page, requesting that all the content found there be sent back. 2. Once the web server receives that request it uses the Domain Name to look for the page. If the server finds the page, it sends the page content back to the IP address of the computer asking for it. If there is not a particular page, just a domain name, it looks for a default document named index.html. 3. The web browser then translates that content into text, pictures, links, videos, etc. Each browser interprets the website a little differently.

URL: (Uniform Resource Locator) is also a unique address that every web page on the internet is assigned. URL s state the exact location of a file. URL s are generally made up of three components: Hypertext Transfer Protocol, Name of Site, and Absolute Path. For example: http://www.oreilly.com/images/samples.html Hypertext Transfer Protocol: Requests files. http:// (method browser uses to get into web mode) Name of Site: Locates the server. Domain Name: oreilly.com (suffixes:.com,.net,.edu, and.co.uk) Absolute Path: Locates the files. Directory Path: /images/ (slashes separate each folder) Document Name and Extension: samples.html

Filename: Many addresses do not include a filename, but simply point to a directory: http://www.oreilly.com When a server receives a request for a directory name rather than a specific file, it looks in that directory for a default document, typically named index.html. So when someone types http://www.oreilly.com into her browser, what she ll actually see is this: http://www.oreilly.com/index.html

Speed: Amazon.com showed that reducing page load times by just 100ms resulted in a 1% increase in revenue. Other studies show that users expect a site to load in under 2 seconds, and nearly a third of your audience will leave your site for another if it doesn t. Furthermore, those people aren t likely to come back. The following list only scratches the surface for site optimization: Optimize images to the smallest file size without sacrificing quality. Avoid unnecessary levels of nested elements. Remove extra character spaces and line returns in documents. Keep JavaScript to a minimum.

Purchasing Hosting and Domain Names: For a monthly fee, a web-hosting service offers you storage space for uploading your HTML pages. The hosting service owns and maintains the physical servers that stores your website files (HTML documents, images, and so forth). You have the option to select your own domain name. You should pick a domain name that is unique, relevant, and easy to remember and spell. You cannot buy a domain name that is already taken, and you should not buy a domain name that misrepresents your identity or is too close to the name of an existing company.

Free Hosting: Some companies offer free hosting. The hosting is free because ads are shown on every page that you put online. This method of hosting creates an unprofessional website and is confusing. Shared Hosting: For personal and small business use, purchase a shared hosting plan. Shared means you share the server or IP Address where your website resides with many other websites. You will still have a unique Domain Name so the server can locate your exact website. The number of websites on the server has no effect on your website. Suggested Web Hosts: Media Temple, Bluehost, Hostmaster, Go Daddy, Dreamhost, HostGator. Domain Name Purchases: Network Solutions or web hosting service. FTP: (File Transfer Protocol) a tool used for transferring files to a server. You can use either FileZilla, Cyberduck, or Coda.

Users with Disabilities: Vision impaired individuals may use the zoom function. Mobility impaired individuals may need special devices to navigate. Auditory impaired individuals may need subtitles to view audio files. Cognitive impaired individuals will need simple designs to navigate. User Preferences: Users settings will override yours, the end user has ultimate control over the presentation of the information. They may change the font face and size, background and text color.

Monitor Resolution: You have no idea how big your page will be: as large as user s monitor or smaller according to personal preferences. Most commercial web sites are designed to fit in a 1024w x 768h pixel monitor, allowing for menus that leaves a canvas area or graphic area of 960w x 600h pixels. It is also common to use a width between 900 and 980 pixels. Usually a height is not suggested, but a height longer than 600 pixels will force the visitor to scroll. Mobile Web: Cell phones has resulted in web browsers squeezing into the coziest of spaces.