INP 140 DAY 3

1
INP 140 DAY 3

• Introduction to Dreamweaver Setting up site
  definitions
• instructor Ross Johnson

2
Review of HTML Tags

• Understanding HOW tags work is important.
• Tag formula
• opening bracket ( lt )
• tag name/label
• attribute name
• Equals
• Open quotation
• Attribute value
• Close quotation
• Close bracket ( gt )

3
Review of HTML Tags

• ltp aligncentergt Content lt/pgt

4
What is wrong with this HTML?

• ltp aligncentergtThere is something wrong here,
  what is it?lt/pgt

5
What is wrong with this HTML?

• lth1 aligncentergtThere is something wrong here,
  what is it?lth1gt

6
What is wrong with this HTML?

• ltp aligncentergtThere is something wrong here,
  what is it?lt/pgt

7
What is wrong with this HTML?

• ltp aligncentergtWhat is wrong here?lt/pgt

8
Domains

• In building a website sooner or later you will
  have to manage, register, or work with a domain.
• Domains consist of the following formats
• name . extension
• subname . name . extension
• Sometimes people type www.name.extention, however
  www is no longer necissary in most cases.
• Domains and Web Addresses are how we can access
  web pages online.

9
How Domains Work

• In order to obtain a domain you must first
  register it.
• Domains are registered at Registrars
• There are lots of different places you can
  register a domain, the key items to look for are
• Pricing
• Ease of interface
• What types of TLDs the register offers. (.com,
  .net, .edu, .tv, .org, etc)

10
How Domains Work

• After you register a domain, you point it to your
  hosting account by setting its NAMESERVER.
• Your hosting company will tell you what to put in
  as the name servers, and often they are in this
  format
• Ns1.domain.com
• Ns2.domain.com
• Ns3.domain.com

11
How Domains Work

• Nameservers simply tell browsers what server to
  connect to when someone types in your browser.
• For example
• You type in www.youtube.com, the registered
  nameserver for the domain is dns1.youtube.com and
  dns2.youtube.com.
• The nameservers tell your browser the IP Address
  (essentially an address of any computer on the
  internet) of the host/server

12
How domains work

• The browser connects with the host/server and
  your webpage is loaded.
• This whole process takes a few seconds at most.

13
Where should I register my domain?

• Lots of hosting companies also let you register
  your domain through them as a service offering.
• PROS
• Often times it is easier to setup, handle the
  configuring of the nameservers automatically.
• Easier to have everything in the same place.

14
Registering domains...

• CONS
• If you decide to switch hosting at some point the
  domain will still be controlled at the previous
  registrar, or you will have to transfer it to a
  new registrar.

15
Introduction To Dreamweaver

• Opening Dreamweaver Demo
• Sections you need to know in Dreamweaver / Demo
• Insert Bar
• Document Toolbar
• Panel Group
• Property Inspector
• Panel

16
Folders and Files

• All pages and files of a website are stored on a
  server. This includes images/movies/audio/etc
• Because of this we must make a root folder
• The root folder is a folder on our desktop which
  will contain all the files and pages that we will
  put on our website.

17
Folders and Files (cont)

• This makes uploading the site easy, because it is
  all in one location.
• What you end up with is a root folder on your
  desktop and a matching root folder on the server
  itself.

18
Files and Folders

• If you go to http//www.domain.com/ you are
  actually accessing that sites root folder
• You can have folders with in your root folder,
  they end up looking like this
• http//www.domain.com/foldername/

19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
Demo of creating a root folder
23
Exercise 1 Create a Root Local Folder

• On your desktop create a new folder and label it
  INP140
• Do this by right clicking the mouse on the
  desktop, and going to NEW gt FOLDER
• After the folder appears you can type the name
  in, or you can right click on the folder and
  select rename

24
Defining a site

• One of the great things about Dreamweaver is it
  allows you to define a site.
• By defining a site dreamweaver will know where
  all of the files, pages, etc that related to any
  number of web sites that you create.
• This can be done by opening dreamweaver, and
  clicking on Site gt New Site on the top
  navigation bar.

25
Demo Practice

• Goto rosspjohnson.com/inp140 and click on the
  Exercise 1 link.
• Save the file into your INP140 / site1 folder.
• Double click the downloaded file inside the
  folder, it will expand itself.
• Create a site definition as demonstrated in class
  with the site1 folder as a root folder.
• Page 32 as reference (Exercise 1)

26
Relative vs Absolute URLS

• Anytime you want to link to another page, insert
  an image into your page, or link to another file
  you will have to enter the URL of that file.
• The URL will tell the browser where the file is
  located.
• You can tell the browser where the file is
  located relative to the page you are on, or the
  absolute location where the file is.

27
Relative URL

• You have a page named aboutus.html , located in
  your root folder. You want to link to
  contactus.html, a contact information page.
• contactus.html is located in the same folder as
  aboutus.html, so the relative URL would be
• contactus.html
• If it was in a different fold called
  contact-info it would be
• contact-info/contactus.html

28
Absolute URLs

• Absolute URLs incorporate the whole address
• The same two previous URLs, would be the
  following
• http//www.greatcompany.com/aboutus.html
• http//www.greatcompany.com/contactus.html
• http//www.greatcompany.com/contact-info/contactus
  .html

29
Why do one or the other?

• If the files are hosted on the same server,
  relative URLs are the common solution.
• Because they are on the same server you dont
  need to include the full URL, you can just
  specify where the file is relative to the current
  one.
• If you are linking to a page, file, image, etc on
  a DIFFERENT host you MUST use an absolute URL
  including the http//

30
Demo 2

• Observing Links to Relative and Absolute URLs.
• Chapter 3 example (page 38)
• RossPJohnson.com example

31
Demo 3 Moving Files Around

• What happens if we move files around in the
  Dreamweaver site view?
• Page 40 (Exercise 3)

32
Demo 4 Inserting images

• What happens if we insert a logo into one of the
  pages?
• What URL path does dream weaver create?
• Page 42 (Exercise 4)

33
URL Path Structures (cont)

• Foldername/ - tells the browser to find folder
  foldername relative to the current document.
• /about.html - If there is a / before a URL it
  means find the page relative to the root of the
  site.
• If you had a page that was at www.chase.com/info/p
  age.html and linked to /about.html it would
  actually point to
• www.chase.com/about.html

34
URL Path Structures (cont)

• ../ - two dots before the slash mean one folder
  before
• www.chase.com/info/page.html linking to
  ../about.html would actually link to
• http//www.chase.com/about.html
• Page 45 has a reference

35
QA Where would these links point to?

• The domain is http//www.cnn.com
• Page http//www.cnn.com/information
• Linking to
• About/submit-news.html
• ../about-us.html
• /contact.html
• downloads/
• home.html

36
Demo Adding Files

• Adding a services.html page
• Adding an image from the desktop
• Refreshing

37
Exercise

• Create a new site definition
• Add a folder called images
• Add two pages, call one of them index.html and
  one of them services.html
• Add a second folder called information
• Create a page called edit.html and move it into
  the information folder.

38
Exporting a site definition

• Site gt Manage Site
• Highlight your site definition
• Click Export
• Save the site definition in your INP140 gt Site1
  folder
• Copy the folder onto your flashdrive

39
Exercise

• Create a new folder within INP140 called site2
• Create a new site definition with in the folder
• Add a folder called images
• Add two pages, call one of them index.html and
  one of them services.html
• Add a second folder called information
• Create a page called edit.html and move it into
  the information folder.
• Export the site definition into your site2
  folder