Week 3ART239 Web Design I

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


Download the Class Presentation PDF

Web terminology

Cascading Style Sheets - used to define the design of a web site.
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):
Commercial (for-profit) websites
Network-related domains (Internet service providers, Web-hosting companies, etc.)
Non-profit organizations
Educational institutions in the US
US government entities
US military use
small business Web sites
signifies a resource web site
File Transfer Protocol - FTP allows you to copy or send files from one computer to another via the Internet.
HyperText Markup Language - markup language for describing web documents (web pages).
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:
Internet Service Provider - it’s the company that provides you with access to the Internet.
Search Engine Optimization - refers to the practice of tweaking website coding and content to achieve the highest possible ranking in search engine result.
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

HyperText Markup Language, represents the root of an HTML document - defines the whole document
Represents a collection of metadata for the document - this is the information in a web page people do not see
Represents the document’s title or name
Allows authors to embed style (design) information in their documents
Represents the content of the document - this is the information in a web page people see
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
Represents a paragraph
Represents a link
hypertext reference
Specifies a link’s destination. The specific link address is indicated in the href attribute, for example:href="http://www.example.com"
Inserts a single line break. It is an empty tag which means that it has no closing tag img represents an image
Defines a division or section
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


defines a link
defines the link address
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

Opens the linked document in a new window or tab. Useful to keep users from permanently leaving your page
Opens the linked document in the same window/tab as it was clicked (this is default)
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.
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