Week 3ART239 Web Design I

Class Notes for Monday 2/4/19 & Wednesday 2/6/19

Agenda

Download the Class Presentation PDF

Web terminology

css
Cascading Style Sheets - used to define the design of a web site.
dns
Domain Name Server - converts IP addresses into domain names. When someone types a domain name into a web browser, the DNS translates the domain name to the IP address and points the browser to the correct web server.
domain name
The name that identifies a computer or computers on the Internet. These names appear as a part of a Website’s URL. It allows people to enter the easier-to-remember domain name, instead of having to remember the IP address. For example, apple.com is the domain name in the URL http://www.apple.com. Domain extensions include (there are many, many more):
.com
Commercial (for-profit) websites
.net
Network-related domains (Internet service providers, Web-hosting companies, etc.)
.org
Non-profit organizations
.edu
Educational institutions in the US
.gov
US government entities
.mil
US military use
.biz
small business Web sites
.info
signifies a resource web site
ftp
File Transfer Protocol - FTP allows you to copy or send files from one computer to another via the Internet.
html
HyperText Markup Language - markup language for describing web documents (web pages).
http
Hypertext Transfer Protocol - a standard method used to transfer information on the internet.
ip address
Internet Protocol - refers to the actual number that a web address name translates to. The IP number is the real address, which is a unique string of numbers separated by periods that identifies each computer. For example: 172.18.254.1.
isp
Internet Service Provider - it’s the company that provides you with access to the Internet.
seo
Search Engine Optimization - refers to the practice of tweaking website coding and content to achieve the highest possible ranking in search engine result.
url
Uniform Resource Locator - used to specify addresses to pages or elements on the World Wide Web, for example: http://www.adobe.com or an extended version to get to the Dreamweaverapplication would be: https://www.adobe.com/products/dreamweaver.html.

Basic HTML structure & tags

<html>
HyperText Markup Language, represents the root of an HTML document - defines the whole document
<head>
Represents a collection of metadata for the document - this is the information in a web page people do not see
<title>
Represents the document’s title or name
<style>
Allows authors to embed style (design) information in their documents
<body>
Represents the content of the document - this is the information in a web page people see
<h1>
Represents headings for sections. These tags have a rank given by the number in their name. Think of these as a way to break up your outline - heading tags are like you indents. The <h1> tag has the highest rank, <h2> the second highest, <h3>, the third highest and so on. Two tags with the same name have equal rank. Only ever have a single <h1> tag on your page
<p>
Represents a paragraph
<a>
anchor
Represents a link
href
hypertext reference
Specifies a link’s destination. The specific link address is indicated in the href attribute, for example:href="http://www.example.com"
<br>
Inserts a single line break. It is an empty tag which means that it has no closing tag img represents an image
<div>
Defines a division or section
<span>
Used for grouping and applying styles to inline elements.
The span tag is like the div tag - it has no meaning at all and is mostly used for styling by using a class. The difference between the two is that a div is a block element, it is on a separate line (normal document flow) while the span is an inline element, meaning that it can be on a line with other elements - it surrounds what is to be changed

Root folder setup

Basic site structure is important for organizing file. Follow the model below to have a clean, organized site structure:

Site structure
css folder
Stores all external CSS files
images folder
Stores all images used in the site
js folder
Stores all javascript fils for the site (used for added functionality)
index.html file
Webpages sit in the "root" of your site folder. The index.html page is always your default/home page

Adding a site to Dreamweaver

Add a new site to Dreamweaver by selecting the SITE menu, then NEW SITE (Click the folder icon next to "Local site folder" and navigate to the folkder you just made):

Dreamweaver Site Add Window

This will now set up your Dreamweaver Site palette with your files for easy access

Dreamweaver site palette

Hyperlinks

<a>
defines a link
href
defines the link address
target
defines where toped the linked document

Absolute links are referenced with a fully qualified URL and are typically on a site different than the referrer site. Also called “External” links. Typically use target=“_blank”.

<a href="http://google.com">Absolute Link</a>

Relative links are referenced in relation to the document itself. Also called “local” links. Rarely use target=“_blank”

Link target attribute

_blank
Opens the linked document in a new window or tab. Useful to keep users from permanently leaving your page
_self
Opens the linked document in the same window/tab as it was clicked (this is default)
_parent
Opens the linked document in the parent frame. Useful for when you’ve created a new window with a link (_blank) and want to target the referrer page.
_top
Opens the linked document in the full body of the window. Useful when used with frame sets (don't use framesets)
<a href="next-page.html">page in the same directory</a>
<a href=""/index.html">Will go to the root</a>
<a href=""../index.thml">will go 1 directory up</a>
<a href=""../../index.thml">will go 2 directories up</a>

Paragraph and Line breaks

Bold and Italic