Website Development

1
Website Development Management
MIS 3353 -- Fall 2003

• Creating Web Pages with Visual Studio

Instructor John Seydel, Ph.D.
2
Student Objectives

• Use Visual Studio .NET to create and edit web
  pages
• Get started working locally with Visual Studio
• Work in either edit mode
• Design view
• HTML view
• Create HTML documents containing
• Hyperlinks
• Images
• Headings
• Lists
• Resolve questions and problems with previous
  exercises

3
Administrative Chores

• Preserving original files (copy/rename)
• WebList
• How it works (MIS3353-L_at_astate.edu)
• Who hasnt received a message yet?
• MIAs check on no-shows (enrolled?)
• Beard
• Hamilton
• Thielemier
• Vasquez
• Assignment for Tuesday see website
• Now, tonights quiz . . .

4
Questions, Clarifications, . . . ?

• Separate disks (or folders)
• Data disk
• Files from text website
• Dont store on server
• Solutions disk exercises
• Folder structure (solutions disk server)?
• Referencing (hyperlinks, images, etc.)
• Absolute only if at another site
• Relative use if files are on same server
• Capturing files from the web
• Settings for Windows Explorer
• Details view
• Show file extensions

5
Microsofts Visual Studio .NET

• What is Visual Studio
• An integrated development environment (IDE) for
  creating Windows and Web-based applications
• For now, its mostly a glorified page editor
• IDE helps programmers
• Develop programs
• Display multiple windows for different tasks
• Visual Studio Start Page is the default home page
  for the Visual Studio .NET Web browser

6
Visual Studio Projects Solutions

• A project is a set of related files comprising an
  application
• The Solution Explorer window lists all solutions
  that are currently open in the IDE
• A solution consists of one or more projects 
• When a new project is created on the Start Page,
  the IDE automatically creates a new solution
• New projects can be added to an existing solution
  
• That said, we wont be working at the project
  level for several weeks
• Well simply be creating essentially independent
  files one at a time

7
Exercise Preliminary Work

• Login using ASU domain ID
• Open
• Windows Explorer
• Internet Explorer
• In Windows Explorer, create folder structure
• MyDocuments
• Chapter2
• Demo
• Images
• Browse in IE to Handouts page for MIS 3353
• Capture LogoASU.gif, torch.gif
• Save in Images folder

8
Exercise Starting Visual Studio

• Start Visual Studio .NET
• Close all windows except Browser
• Configure options
• Tools Options Text Editor HTML/XML
• General only navigation bar checked
• Format
• Only Insert attribute quotes checked
• Select lowercase for Capitalization
• HTML All checked
• XML All checked

9
Exercise Web Page Template

• File New HTML page
• Click on tabs to change view
• Design view (blank page)
• HTML view
• Note
• Document declaration (DOCTYPE)
• Main elements for document (html, head, body)
• Also ltmeta /gt tags
• Click Format button (left end of third row)
• Save as homepage.htm
• View in browser File Open . . .

10
Exercise Rebuilding Your Page

• Work in HTML view
• After ltbodygt press Enter (on same line)
• Create
• One empty lth1gt element
• Two empty lth2gt elements
• Add content to headings name, Welcome!,
  Contents
• View work in progress in Design view
• Back to HTML view
• Add aligncenter attribute to lth1gt element
• Add ltemgt to lth2gt elements
• Save, view in browser (refresh)

11
Exercise Enhancing the Page

• Switch to Design view
• After Welcome! press Enter
• Changes
• Set format to Normal (in Format box)
• Turn off Italics
• Type at least three lines of general info,
  including Arkansas State University
• Click on HTML tab
• Reformat code (click on Format button )
• Save, then view in browser

12
Exercise Adding an Image

• Switch back to Design view
• After name, press Shift-Enter
• Select Insert Image and browse to logo
• Click on HTML tab
• Note the absolute reference for the image
• Change that to a relative reference
• In Design view
• Right-click on blank space then select Properties
• Change
• Selected object to Document
• Background to torch.gif (browse to it)
• In HTML view, change background image reference
  to relative

13
Exercise Adding a Hyperlink and a Horizontal
Rule

• In Design view
• Select Arkansas State University
• Click on Insert Hyperlink
• Provide URL (http//www.astate.edu)
• Save and then view in browser
• Switch to HTML view
• Press Enter at end of second lth2gt
• Add lthr width90 size 5 /gt
• Save and then view in browser

14
Exercise Including the List

• Still in HTML view
• Press Enter at end of second lth2gt
• Create a blank list
• ltulgt
• ltligtlt/ligt
• ltligtlt/ligt
• ltligtlt/ligt
• lt/ulgt
• Add content Personal, Exercises,
  Guestbook
• Add ltstronggt to make list bold
• Add link to personal.htm in same folder
• Switch to design view to preview
• Save and then view in browser

15
Exercise Wrapping It Up

• If time permits
• Add additional links (to exercises and guestbook)
• Otherwise, do this as an exercise
• Use FTP to copy homepage.htm to root folder on
  AITP server
• Refer to overview of our development environment

16
Summary of Todays Objectives

• Use Visual Studio .NET to create and edit web
  pages
• Get started working locally with Visual Studio
• Work in either edit mode
• Design view
• HTML view
• Create HTML documents containing
• Hyperlinks
• Images
• Headings
• Lists
• Resolve questions and problems with previous
  exercises

17
Appendix
18
Local Folder Structure (Projects)
19
Local Folder Structure (Tutorials)
20
Folder Structure on Server
21
Our Development Environment

• Browser windows (view web pages)
• Local solutions disk
• Server
• File manipulation windows
• Windows Explorer (solutions disk)
• Internet Explorer / FTP server
• Works best when these windows are cascaded rather
  than full-screen or minimized
• Source code editors
• NotePad
• Visual Studio

22
Applications Involved
23
Working Within the Environment

• Locally
• Create pages with NotePad or Visual Studio
• View pages in local browser window
• Create/maintain folder structure using Windows
  Explorer
• At the server
• Use Internet Explorer / FTP to create same folder
  structure as on local machine
• Copy files (pages) from local machine (via
  Windows Explorer) to server (via FTP)
• Drag and drop (or copy/paste)
• Works also in reverse (i.e., copying from server
  to local machine)
• Note the local folder structure should be
  developed with the ultimate server structure in
  mind