Before We Get Started

1
Before We Get Started

• You need to have a public_html folder
• If you dont please go to http//www.ischool.utex
  as.edu/technology/tutorials/start/account/
• Please download the two sampletext files by
  right clicking on the file in the link below and
  choosing save as
• www.ischool.utexas.edu/lea/shortcourses.html

2
Creating a Web Presence

• Introduction to
• HTML
• and Dreamweaver
• with Megan and Lea

3
HTML

• Hypertext Markup Language
• Tags used to format text and graphics for web
  browsers

4
Tags

• Most tags have two parts
• An open tag and a close tag
• There are a few tags that do not require a close
  tag, but they are the exception.
• Tag order

5
Basic Tags

• - start and finish of markup
• - encloses metadata
• - identify content of document
• - denotes body of document
• - paragraph
• - bolds text
• - italicizes text
• -adjusts size of text (use s 1-6)
• 
  - line break

6
Links

• Create an external link in HTML using the
  following
• Text to be displayed

7
What does it look like?

• Leas Website
• This is the text of Leas
  website.
• click

8
Sample Text

• Using notepad, open the text file sampletext
  that you downloaded earlier
• Use the tags we have learned so far to mark up
  the text
• create a title for the page
• italicize where needed
• bold actor names
• split text into paragraphs
• create a hyperlink

9
Save your Markup!

• Click on file
• Save as
• Title the document sampletext1.html
• Change the type from txt to all files
• Open your browser
• File ? Open ? choose sampletext1.html
• See your work!

10
Sample Text before Markup
11
Sample Text with Markup
12
Preview in the Browser
13
Confused?
Overwhelmed?
14
Here we come to save the day!
15
Dreamweaver Does it For You
Or at least, most of it

• Dreamweaver An HTML editing and web page
  construction tool
• Create a folder on your desktop where you will
  save your files until you are ready to post them
  online.
• Open Dreamweaver (Under Macromedia in the
  Programs List)

16
Getting Started with Dreamweaver

• From the main toolbar choose  
• Site Manage sites
• A new window will open - we will be creating a
  new site

17
Other settings

• Next, give your site a name - this creates a
  folder in My Documents for your files
• Opt to not use server technologies at this point

• You are next asked how you want to work with your
  files during the web development process.

18
Set up the rules for connection

• Next, you will tell Dreamweaver how to connect to
  your iSchool server space
• Test the connection before you continue...typos
  are frequent and easier to deal with in the
  moment, than later when you are trying to
  understand why you can't connect.

19
Check in / Check out

• Dreamweaver also has capabilities to facilitate a
  site on which multiple people are editing and
  authoring files.  
• "Check in" and "check out" should not be used if
  you are the only person working on your website.
   
• If you're working with a group, it can be very
  helpful.   "Check in" and "Check out" will allow
  only one team member at a time access to a file.

20
Done With That

• The final page of the wizard displays a summary
  of your website setup preferences -- check that
  these are correct and click DONE!
• After you set up your site, the following window
  will appear

21
Creating Your Page

• There are two ways to get started with
  Dreamweaver
• Select a new HTML file
• OR
• Open a new document by going to File -- New, and
  select HTML, and click Create.

22
The Interface
23
Lets revisit that example

• Open the sample text
• Paste into the Design portion of the screen and
  edit as you would in a Word document
• As you edit the text, notice the changes in the
  Code screen

24
Working in Dreamweaver
25
The Title of the Page

• Dont forget to add the title of the page at the
  top of the document
• Find Untitled Document and replace with
  whatever you want to appear in the browser

26
Preview

• Allows you to see your website as others will
• Select the World icon at the top of the document
• Select your browser

27
Creating links

• Two types of links
• Absolute provides the full URL
• For example http//www.filmsite.org
• Always include the complete link (including http)
• Relative internal
• For example WBpic.jpg
• This file is in my public_html folder
• Wherever I move that folder, this picture will go
  with it

28
Posting

• Go to the Site window.
• Highlight the .html file(s) you would like to
  post
• Click the blue arrow that reads "put file(s)"
  when you mouse over it.
• A window will appear asking if you would like to
  include dependent files. Dependent files are
  images or pages linked in your html document.
  Click YES.
• Now your files should appear on the left-hand
  side of the site window in your remote
  folder.(You can change the view to see this
  folder.)
• To check your work, open a web browser and type
  http//www.ischool.utexas.edu/your_user_name.

29
References

• World Wide Web Consortium
• http//www.w3.org/MarkUp/
• This is a great place to find more tags and color
  codes!
• iSchool Tutorials
• www.ischool.utexas.edu/technology/tutorials
• Dreamweaver Support Center
• http//www.adobe.com/support/dreamweaver/