Transcript BuildingWebSiteLayout - lillie

Building a Website:
Layout
Fall 2013
Overall Structure:
Home Page
UNCP
Title Section
Picture
Title Frame
Math
Contact Information
Menu
Content
Footer
Overall Structure:
Home Page
UNCP
Title Section
Picture
Dr. Charles W. Lillie
Associate Professor of Computer Science
Math
Office:
Semester
Home
Courses
Previous
Telephone: Email:
Office Hours:
Class Schedule
Academic Programs
Other Information
Modified on:
Contact Web Page Owner
Set Directory Structure
• Establish project folder
– C  CSC2020  Project
• Make subfolders
– C  CSC2020  Project  images
• Populate images subfolder with all the images
you will us on your project
Starting Dreamweaver
• Edit  Preferences
– Category list
• Check General
• Use CSS instead of HTML tags
• Click OK
• Make sure Property inspector and Insert bar
are open
– Window  Property
– Window  Insert Bar
• Open CSS styles panel
– Window  CSS Styles
Starting Dreamweaver
• Open Files panel
– Window  Files
• Close Application panel – this is used for the
advanced, database driven Web site
– Right-click the empty area to the right of the
Application group tab
– Close panel group.
• Save Workspace Layout
– Window  Workspace Layout  Save Current…
– Give it a name: Lillie
Creating a Web Site
• Site  New Site
– Work in Basic tab
– Type site name: strictly for your reference
• LillieSite
– HTTP Address
• Leave Blank
– Click Next
• Server Technology:
– No
– Click Next
Creating a Web Site
• Work with files
– Edit local copies on my machine
• Where are files
– Choose file path
• How to connect to remote server
– None
• Done
Creating Web Page
• Hint
– Edit  Preferences  New Document
• Make settings
• Open a blank document
– File  New
• Basic Page  HTML
– Make sure XHTML 1.0 Transitional is selected
– Click Create
• File  Save
– Give file a name – best not to have spaces in name
Creating Web Page
• If document window toolbar not open
– View  Toolbars  Document
• In Title box change Untitled Document to name of page: Lillie
Site
• On Properties inspector, click Page Properties … button (at
bottom of page)
–
–
–
–
–
–
–
–
Used to define basic attributes of each web page create.
Page font: Verdana, Arial, Helvetica, sans-serif
Text Color: white
Eliminate Margins: 0 in left and top margin boxes
Links color field: #FFCC00
Visited Links: #FF9900
Rollover Links: #FF0000
Active Links: #FFFFCC
• Click OK
Add Content
• Insert  Image (or select image icon on Insert
bar)
• Add three images
• Add text: Dr. Charles W. Lillie
– Make it H1
• Add red box
• Add text
• Add blue line
Add Content
• Add table: 1 row, 2 columns
• Add table in left column
– 7 rows, 1 column
– Fall 2012, Home, courses, previous courses
• Add text in right column
• Add text below table
– Page footer information
Make Changes
• Change background color
– In table cells
– Overall page
• Change text color
– Overall page
– Fix text color in tables
• Add links to UNCP and MathCS images
• Add email link to email addresses
Horizontal Rule
• Add Horizontal Rule
– Insert Bar Menu
• HTML
– Select Horizontal Rule button
– Type 700 in the W field of the Property Inspector
• This makes it 700 pixels
• If you want it to span the entire with of browser
window, enter 100%
• From align menu in Property Inspector choose Left
– Horizontal Rule is normally centered, this will make it left
aligned.
Add Special Characters
• Insert Bar has Common dropdown box
• Insert Bar  Common  Text Tab 
dropdown box at end  BR  select special
character from list
Line Break
• Pressing Enter key creates a new paragraph.
Sometimes you want a new line, not a new
paragraph. A new paragraph adds spaces
between the paragraphs, a new line does not.
• Insert Bar  Common  Text  BR  select
BR (Shift + Enter)
Nonbreaking Space Character
• If you type more than one space in a row, all
but the first space will be ignored.
• Another paths:
– Insert Bar  Common  Text  BR  select
Non-Breaking Space
– Insert  HTML  Special Characters  NonBreaking Space
– Ctrl + Shift + Space bar
Adding a Date to Your Page
• To insert today’s date:
– Insert  Date
– Insert Bar  Common  calendar icon
• Select date format from options presented
– Select Day Format
– Select Time Format
– Select update automatically on save
• Updates date each time you close the document
• You can put the date at the bottom of page indicating
when page was last updated
Spell Check
• Select a Dictionary
– Edit  Preferences  General  Spelling
dictionary
• Spell Check
– Text  Check Spelling
Undo, Redo, History Panel
• Undo
– Ctrl + z
– Edit  Undo
• Redo
– Ctrl + y
– Edit  Redo
• History Panel
– Window  History
– Shift + F10
– Move slider to undo or redo
Text Formatting: Paragraphs
• New document – no paragraph formatting
– See None in Format menu in Properties
• To add paragraph formatting do one of the
following:
– Text  Paragraph Format
– Properties Inspector  Format
• Preformatted Format
– Used to display tabular data – monospaced font
Paragraph Alignment
• Click inside the paragraph
– In Property Inspector click one of the alignment
icons
– Choose Text  Align  Left, Center, Right, or
Justified
– Keyboard shortcuts
•
•
•
•
Left: Ctrl + Alt + Shift + L
Centered: Ctrl + Alt + Shift + C
Right: Ctrl + Alt + Shift + R
Justified: Ctrl + Alt + Shift + J
Indented Paragraphs
• Add space on either side of the paragraph
• Frequently used to present a long quote
• In Property Inspector
– Click the Indent button
Click Outdent button
Text  Outdent
• Choose Text  Indent
Ctrl + Alt + [
• Press Ctrl + Alt + ]
• Most browsers add about 40 pixels on the
right and left
Lists
• Bulleted and Numbered
– Unordered or bulleted lists
– Ordered or numbered lists
• Move cursor to where you want to start the list
• In Property Inspector, click the Ordered or
Unordered List button to apply the list format
• Type first item and then Enter
• Continue until list is complete
• Press Enter twice
Formatting Existing Text as List
•
•
•
•
Highlight the paragraphs to be formatted
Apply the list format
Each paragraph becomes a bullet
You can add a new item to the list
– At beginning click before first character in first
bullet, add item and press Enter
– In middle, move cursor to location and press
Enter, a new bullet or number should appear
– At end of list, move cursor to last character in last
bullet, press enter and add information
Overall Structure:
Home Page
CSC 2020 Microcomputer Programming
Description Syllabus Assignment Homework Slides Handouts
MeetingTime Meeting Days Location
Textbook:
Office: Telephone: Email:
Office Hours:
Semester
Home
Courses
Previous
Course menu