Building a Website: Layout Fall 2013

Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information

Overall Structure: Home Page Title Section Dr. Charles W. Lillie Associate Professor of Computer Science Picture UNCP Math Semester Home Courses Previous Class Schedule Academic Programs Other Information Modified on: Contact Web Page Owner Office: Telephone: Office Hours:

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 link to 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  Non- Breaking 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 Choose Text  Indent Press Ctrl + Alt + ] Most browsers add about 40 pixels on the right and left Click Outdent button Text  Outdent Ctrl + Alt + [

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 Semester Home Courses Previous MeetingTime Meeting Days Location Textbook: Office: Telephone: Office Hours: CSC 2020 Microcomputer Programming Description Syllabus Assignment Homework Slides Handouts Course menu