e-Commerce: Introduction to Web Development 1 Dr. Lawrence West, Management Dept., University of Central Florida Topics What is a Web Site Server Directories Web Files The HTML File Creating a New Web Site with Visual Studio.NET Creating and Saving a Web Page Organizing a Web Site Hyperlinks Miscellaneous

e-Commerce: Introduction to Web Development 2 Dr. Lawrence West, Management Dept., University of Central Florida What is a Web Site? A web site is a collection of files: –having certain properties –located is special directories –available on a web server You will develop your web site on a local hard drive running Microsoft’s Internet Information Server –PWS or IIS and a computer make a server, even if the computer isn’t connected to the Internet Later you will move your site to a real server

e-Commerce: Introduction to Web Development 3 Dr. Lawrence West, Management Dept., University of Central Florida Web Server Architecture Web Servers Application Servers Database Servers Internal Users

e-Commerce: Introduction to Web Development 4 Dr. Lawrence West, Management Dept., University of Central Florida Server Directories When you install any web server you designate a physical directory on the server to be the root directory of your web sites By default, PWS creates c:\inetpub\wwwroot as the root directory for your web sites –You may override this location at installation time –Only recommended if you need to use a different physical drive Web ‘sites’ are created directly under this host directory in the physical directory structure Web servers operate using similar principles

e-Commerce: Introduction to Web Development 5 Dr. Lawrence West, Management Dept., University of Central Florida Server Directories (cont.) All web servers have a base URL such as, – is also a valid path for IIS on your local computerhttp://localhost The physical location of your server directories and files work with your URL The file c:\inetpub\wwwroot\mysite\default.htm has the URL or

e-Commerce: Introduction to Web Development 6 Dr. Lawrence West, Management Dept., University of Central Florida Server Folders in Visual Studio Development Environment The Visual Studio development environment does not require that you host your project in a server directory (including virtual directories) Your project may go anywhere in the computer’s file system When you deploy the project to a server you will need to deploy to a valid directory Be careful of program resources that are outside the project folder (such as images) as they may be disconnected when the project is deployed

e-Commerce: Introduction to Web Development 7 Dr. Lawrence West, Management Dept., University of Central Florida Web Files Web files are files located in server directories and ‘have certain properties’ –Files with.html or.htm extensions are automatically recognized as web pages to be served up –Files with.asp or.aspx extensions are recognized as files containing web content and script to be executed –.jpg and.gif files are recognized as images to be included in.htm or.asp pages (or served up separately) –Other file extensions may be served up by the site but browser must be configured to handle them

e-Commerce: Introduction to Web Development 8 Dr. Lawrence West, Management Dept., University of Central Florida Structure of an HTML/HTM File New Page 1 This is a simple web page with no formatting applied HTML tag begins content used by the browser Head section contains data about the document (optional) Body contains content displayed by the browser All of this content (except text above) was created automatically by the FrontPage editor

e-Commerce: Introduction to Web Development 9 Dr. Lawrence West, Management Dept., University of Central Florida Creating a New Web Project w/ VS.Net Start Visual Studio Select the File | New | Web Site… menu Select ASP.NET Web Site Rename default application name (very tough to do later!!) Click OK

e-Commerce: Introduction to Web Development 10 Dr. Lawrence West, Management Dept., University of Central Florida Creating a New Web Project w/ VS.Net (cont.) New project is created First blank page is displayed (default.aspx) Tools may be exposed or docked depending on VS settings –Toolbox –Server Explorer –Solution Explorer –Help

e-Commerce: Introduction to Web Development 11 Dr. Lawrence West, Management Dept., University of Central Florida Creating a New Web Project w/ VS.Net (cont.) Solution Explorer contains initial project elements –Solution (name matches web name when new solution was selected) –Web site with same name –Several pages used by the site (more later) –Initial page (Default.aspx) You build your application by adding more elements and giving them properties and capabilities

e-Commerce: Introduction to Web Development 12 Dr. Lawrence West, Management Dept., University of Central Florida Creating a Web Page Add new web pages (as well as other items—later) by –Right click the web app –Select Add New Item… –Select item (Usually Web Form) –Name the form in the dialog –Keep.aspx extension for forms New form appears in Solution Explorer

e-Commerce: Introduction to Web Development 13 Dr. Lawrence West, Management Dept., University of Central Florida Set Key Page Properties bgColor: Background color Background: Image Text: Color of text on page Link & VLink: Colors of unvisited and visited links on page Don’t be goofy with colors Set most colors in Master Pages (later) Title

e-Commerce: Introduction to Web Development 14 Dr. Lawrence West, Management Dept., University of Central Florida Demonstration—Adding Content to Web Pages Text Controls Viewing page in design and HTML views Topics for later –Tables –Images –Hyperlinks

e-Commerce: Introduction to Web Development 15 Dr. Lawrence West, Management Dept., University of Central Florida Organizing the Web Site Use Folders to organize your web site –Keep similar items together Make maintenance easier Find folders easier Keep folders uncluttered –Put home page in the web site’s root Home page must be called default.htm or default.aspx If only a folder is specified by the browser with no file then default.htm, default.html, or default.aspx will be displayed if they exist in that folder

e-Commerce: Introduction to Web Development 16 Dr. Lawrence West, Management Dept., University of Central Florida Organizing the Web Site (cont.) Add new folders like you would a new page Files may be moved between folders by dragging and dropping –Unlike working in FrontPage, relative hyperlinks are not automatically updated when dragging and dropping between folders –Hyperlinks created in code are also not updated automatically –Plan folder structure early to avoid extensive rewriting

e-Commerce: Introduction to Web Development 17 Dr. Lawrence West, Management Dept., University of Central Florida Organizing the Web Site (cont.) Files and folders may be moved within the web site by dragging to new locations in the folder view Images –Images used throughout the web (or that could be used in multiple locations) should go in the Images directory –Images that are distinctly tied only to individual pages should be kept with that page –You may create images directories within other subfolders (nothing magical about them) –More on images later

e-Commerce: Introduction to Web Development 18 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks The essence of web-based information is the ability to create hyperlinks from one document to another Hyperlinks are created in VS using a dialog Before attempting to create a hyperlink to a page in the application, ensure that the target page already exists and is saved There are three types of hyperlinks –Jumps Internal – within the same web site External – to a document on another site (or server) –In-line hyperlinks (most often used for images)

e-Commerce: Introduction to Web Development 19 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks (Creating Internal Jumps) Creating Internal Jumps –Edit the page on which the link will reside –Type in the text you want displayed in the link or add an image –Select text or image –Activate the hyperlink dialog Type Ctrl-L Use the Format | Convert to Hyperlink menu –Select Browse… button

e-Commerce: Introduction to Web Development 20 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks (Creating Internal Jumps) Select folder and file to be target of hyperlink Select URL type –Change to “Document Relative” for relative hyperlink Select OK Select OK again There is also a hyperlink control that can have properties set in code at run time as well as at design time

e-Commerce: Introduction to Web Development 21 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks (cont.) 1.The hyperlink HTML consists of an anchor tag with the target 2.The text or image that will be displayed and respond to the click 3.The closing tag Hyperlink Text 123

e-Commerce: Introduction to Web Development 22 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks (cont.) Hyperlinks can be Relative, Root Relative, or Absolute –A relative or root relative hyperlink is only good for links to pages in the same web site Shows the path starting from the current location or the web site root –Absolute hyperlinks can be to internal or external pages Show entire path to the page, including the header, machine address, folder, and page name –Always use relative hyperlinks for links to the same site Allows site to be moved in total from one machine to another without rewriting

e-Commerce: Introduction to Web Development 23 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks (Relative Hyperlinks) Target located in the same directory Target located down one directory Target located up one directory Target located up one directory and then down two

e-Commerce: Introduction to Web Development 24 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks (External Jumps) Create external jumps by entering the complete URL in the hyperlink dialog –Type in from memory –Navigate using your browser and copy the URL to the clipboard and paste

e-Commerce: Introduction to Web Development 25 Dr. Lawrence West, Management Dept., University of Central Florida Hyperlinks (cont.) We will return to hyperlinks later –In-line hyperlinks will be covered with images –We will also cover bookmarks to hyperlink to a specific point in a document (including within the same document as the link) –We will also see how to use images as a hyperlink instead of text –Use of hyperlink controls to enable dynamically setting hyperlink properties in code –Use of hyperlinks in grid or repeater controls

e-Commerce: Introduction to Web Development 26 Dr. Lawrence West, Management Dept., University of Central Florida Misc You can test your website by hitting F5 or clicking the Run button –Always starts default application page (Note:) You can test individual pages by entering –You don't need to close the page you are editing in order to test it. Just save it –You will probably need to use the Refresh button on your browser to see the updated page Close your web site by saving any files being edited and closing VS