Basic Web Design UVICELL

1
Basic Web DesignUVICELL

• Week 4
• Templates and site management

2
Creating a New Site in Dreamweaver

• On the SITE pull-down menu select NEW SITE
• Name your site, only you will see this name,
  click NEXT
• Click the NO, I DO NOT WANT TO USE SERVER
  TECHNOLOGY radio button, click NEXT
• Click the EDIT LOCAL COPIES ON MY MACHINE, THEN
  UPLOAD TO SERVER WHEN READY (RECOMMENDED) radio
  button

3
Creating a New Site in DreamweaverSetting the
Local Path

• Click the folder next to the WHERE ON YOUR
  COMPUTER DO YOU WANT TO STORE YOUR FILES? and
  select the folder where you are creating your
  pages and storing your images, then click NEXT

4
Creating a New Site in DreamweaverConnecting to
the Web Server

• The next screen will ask you HOW DO YOU CONNECT
  TO YOUR REMOTE SERVER
• If you are at home and have an ISP with web site
  hosting then the answer will be FTP (file
  transfer protocol)
• If you are on a corporate LAN and your company
  has web servers in-house then the answer is
  Local/Network

5
Creating a New Site in Dreamweaver - FTP

• You must contact your ISP to obtain your FTP
  settings
• Be sure to ask for
• Hostname (address of FTP server)
• Location on server or folder
• Your username
• Your password
• If you do not have this information, enter your
  ISP name in the HOSTNAME space and click NEXT (to
  return to this window go to the SITES menu and
  select EDIT site, Name of site)

6
Creating a New Site in Dreamweaver - LAN/Network

• If you are connecting through a corporate LAN or
  network you must call your IT department or
  systems administrator for the correct path and
  permissions to access the web server directory

7
Creating a New Site in Dreamweaver - Success

• If all settings are correct you should see this
  window when you click TEST CONNECTION, click OK
  and then click NEXT
• Click NO, DO NOT ENABLE CHECK IN AND CHECK OUT,
  click NEXT
• In the SUMMARY window double check your
  information and click DONE when ready

8
Converting a Page to a Template

• Create your page and make sure everything is in
  placed where you want it
• Create links to the pages that youll be making
• You can either create blank text pages in your
  site directory with the correct name and use
  those for the links
• Or just type in the name of the link in the
  Properties Palette as page_name.html
• Save page using the appropriate page name
• If you are making the home page, name it
  index.html

9
Converting a Page to a TemplatePage 2
10
Converting a Page to a TemplatePage 3
For each button be sure to provide a link to the
page which should be displayed when the viewer
clicks on it
11
Converting a Page to a TemplatePage 4

• From the FILE MENU select SAVE AS TEMPLATE
• Close the template (you will have to click OK
  when you are prompted)

12
Creating Editable Regions in Your Template

• On the INSERTS palette select the TEMPLATES tab
• Highlight the area on your template that you want
  to be able to edit, you can also select the
  entire page if you wish
• Then click the EDITABLE REGIONS from the INSERTS
  gt TEMPLATES palette

13
Creating Editable Regions in Your Template - Page
2

• Give your EDITABLE REGION a name
• Click OK

14
Creating Editable Regions in Your Template - Page
3

• Note areas which are editable
• Select SAVE from the FILE menu and allow
  Dreamweaver to save it to appropriate location

15
Opening Your Template

• From the FILE MENU select NEW
• Click the TEMPLATES tab (top center)
• Click TEMPLATES FOR select your site and click
  on your template in the center window
• Be sure Update Page when Template Changes is
  checked!

16
Creating New Pages From Your Template - Add Title

• Always Start at the top of the page - Be sure to
  change the page title first, youd be surprised
  how many companies forget to do this

17
Creating New Pages From Your Template - Buttons
(Optional)

• Since this is the About STX page, the button
  state can be On for this page
• Delete the button, and then select INSERT IMAGE
  from the INSERTS palette
• Select the ON state for About STX button

18
Creating New Pages From Your Template - Content

• Add your content for the new page
• Save your page, FILE menu, SAVE AS,
  about_stx.html (your page name here)