Web Design Basics

1
Web Design Basics

• Web Design 1
• Mrs. Chamberlain

2
Folders/File Management

• A ROOT folder is the main folder in which ALL
  files for a website should be saved, either
  directly into or into a subfolder.
• An IMAGES folder should be located in each ROOT
  folder, in which all images should be saved for
  that website. If an image is saved outside of
  this folder, it may not load properly when
  viewing the website.
• Any navigation images, such as nav_bar and pop-up
  menu, should be saved in the NAV IMAGES folder
  which is saved in the IMAGES folder.
•  
• When exporting a navigation bar (nav_bar), the
  HTML file should be saved in the ROOT folder,
  while the images should be put in a subfolder,
  which should be the NAV IMAGES folder.

3
Folder Management

• EVERY site will have
• Images folder
• Root folder
• MOST sites will have
• Nav_images folder
• Only sites with songs, video, or pop-up menus
  will have
• Pop-up menu folder
• Media folder

4
WEBPAGE SETUP

• When creating a new webpage in Dreamweaver,
  choose to create an HTML file. This stands for
  hypertext markup language.
• All webpages should be saved the same, whether
  you choose .htm or .html.
•  
• A webpage has two names
• FILE NAME - this is what the file itself is saved
  as in the ROOT folder.
• DOCUMENT TITLE - this is what the viewer will see
  on the title bar and window tab in the Internet
  browser (i.e., Explorer).

5
WEBPAGE SETUP

• The file name must be LOWERCASE and not contain
  SPACES.
• All home pages MUST be saved as index.html.
•  
• The document title must be so SPECIFIC that the
  viewer knows exactly which website AND which page
  he/she is currently viewing.
•  
• AVOID using names such as Home or Index for
  document titles.

6
Dreamweaver Basics

• 3 Different Views
• CODE view shows the HTML code for the webpage
  line by line
• SPLIT view shows both the HTML and actual
  design
• DESIGN view shows the actual design as it would
  be seen by viewer
• Properties Inspector
• HTML - provides pre-determined formatting and
  linking
• CSS - provides edits to fonts and
  creating/editing rules

7
Dreamweaver Basics

• PAGE PROPERTIES - allows the user to change
  settings for the entire page, including the
  background, page font, colors, and other
  settings.
• Most Frequently Used Panels
• FILES - gives easy access to files for quick
  insertion
• ASSETS - lists all images available in specified
  folder
• INSERT - provides majority of settings
  categorized in drop-down format and can be
  personalized

8
Site Definition

• Commonly referred to as SITE DEF, the site
  definition defines the root folder and its
  contents as a website.
• When setting up a site definition, the user is
  telling the system which folder is the ROOT
  folder, in which all files for the site are
  located.
• Once the site definition is created, the user
  must EXPORT it to the SITE DEF folder, as the
  settings will be wiped out upon logging out. This
  is the only use for this folder, holding on to
  the various sited definitions.
• To access the definition when logging back in,
  the user must IMPORT the site def from the SITE
  DEF folder.

9
Navigation

• 3 Forms of navigation
• Text navigation text is linked to desired
  location
• Fireworks Navigation bar created in Fireworks
  then imported into Dreamweaver each button is
  linked to desired location
• Spry menu bar created in Dreamweaver allows
  for 3 levels of drop-down menu

10
Internal vs. External

• If sending the user
• Within the same PAGE use a in front of named
  anchor location
• Within the same SITE leave Target empty or keep
  at _top or _self
• To ANOTHER site change Target to _blank to open
  in a new tab/window
• The user should NEVER have to hit BACK to get
  back to your site from a link within your site!