Skip this Video
Download Presentation
Summer 2013 Prepared by Prof. B . INDEX

Loading in 2 Seconds...

play fullscreen
1 / 9

Summer 2013 Prepared by Prof. B . INDEX - PowerPoint PPT Presentation

  • Uploaded on

CSW 131 Free MS Software (MSDNAA) MS Visual Web Developer W3 / Mozilla Code Validators Uploading Your Website. Summer 2013 Prepared by Prof. B . INDEX. Download & Install.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Summer 2013 Prepared by Prof. B . INDEX' - lacy-reynolds

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

CSW 131 Free MS Software (MSDNAA)MS Visual Web DeveloperW3 / Mozilla Code ValidatorsUploading Your Website

Summer 2013

Prepared by Prof. B.


download install
Download & Install
  • Visual Web Developer (VWD) is a web page and site development and management environment, enabling easy uploads to WCU’s server.
    • Just ONE of Microsoft’s program that are similar to Adobe Dreamweaver
    • FREE Microsoft programs available to WCU students currently enrolled in at least one computer science course
  • This program is loaded on the UNA 141 PCs
  • Optional: link to download VWD for use on your own PC is on the class website “Hot!” page and slide 9.
  • This program requires a Windows OS
  • If you choose to keep it, you must register the product (free)

Back to Summary (and Index)

starting the program opening a web site
Starting the Program & Opening a Web Site
  • Select Start | All Programs | Microsoft Visual Web Developer 2010 Express Edition
  • Insert your flash drive
  • Click File | Open Web Site…
  • Click Class_work folder in your flash drive | Open

Back to Summary (and Index)

working with a web page in a web site
Working with a Web Page in a Web Site
  • In Solution Explorer open index.html within ch05 in your Class_workfolder
  • To show line numbers:
    • click Tools | Options | General, check Line numbers, then click OK
  • Note the color coding: some examples are:
    • <tags>
    • selector{property:value;
    • notation / comments
    • general text
  • At the bottom of the VWD screen, click:
    • Split to see both code & WYSIWYG
    • Design for WYSIWIG view only
      • An approximation only; testing is still needed!
    • Source for code only
    • Try the buttons at the bottom of the screen

Back to Summary (and Index)

adding a new web page in a web site
Adding a New Web Page in a Web Site
  • Within Class_work, Chapter 05,click File | New File…
  • From Add New Item window select HTML Page, name it test.htm (or test.html – be consistent), then click AddORRight-click the top level under Solution Explorer, and select Add New Item, then select HTML page
  • Notice the new page has been added to your folder and the default Source code to start has been inserted.
  • Experiment with this file
  • When done you can delete it within Solution Explorer
    • Right click test.htm (or test.html)
    • Click Delete
    • Click OK

Back to Summary (and Index)

creating a new web site
Creating a New Web Site
  • Create a folder on your flash drive for websites, e.g.,csw131\websites
  • From within VWD program click File | New Web Site…
  • From New Web Site window, with Visual Basic highlighted under Installed Templates, select ASP.NET Empty Web Site, name it TestWebon your flash drive, e.g.,CSW131\Websites\TestWebthen click OK
  • You can add new web pages per the previous slide and delete web.config, which is not needed.

Back to Summary (and Index)

validating your code
Validating Your Code
  • With Mozilla, has a number a free tools. We can check our web pages for proper (X)HTML code at:

And check for proper CSS code at:

  • Go to the 1st link, click the By file upload tab, use the Browse… to select index.html from index.html within ch05 in your Class_workfolder, then click the Check button.
    • Errors and warnings (if any) will appear. Use VWD to editline 2:<html xmlns=""> and on a new line after </title> type <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, save and recheck.
  • Next try the 2nd link for both index.html and styles.csswithin ch05 in your Class_workfolder. Selecting and checking files works as above.
    • Again, errors and warnings (if any) will appear and you can make any needed changes within VWD, Save, then Check again.
  • Note: Using UTF-8encoding “internationalizes” your website.

Back to Summary (and Index)

copying a web site to your wcu server location
Copying a Web Site to Your WCU Server Location
  • Within VWD, and E:\csw131\project\(your web site open), in Solution Explorer(top right of screen), click Copy Web Site icon
  • Click the Connect icon
  • Click the FTP Site icon
  • Server: ftp://[email protected]/e.g., fl is for Fran Lowe followedby a WCU student ID number
  • Username:fl123456
  • Password: fl123456 (may needto be entered twice)
  • Click Open button and MAKESURE html_public is selected on right
  • Highlight files & folders to uploadon left side of screen
  • Click right arrow symbol and pages are uploaded
  • See web site online:
  • Note:These uploads may ONLY be done WHEN ON CAMPUS!Note2: Create uploading.txt withyour server & URL information; Now!






Back to Summary (and Index)

summary and index
Summary (and Index)
  • WCU CSC students can get free MS software (slide 2).
  • VWD is a web page and site development and management environment, enabling easy uploads to WCU’s server (slide 2).
    • VWD is loaded on UNA 141 PCs, is easy to use (slide 3), and can be downloaded freefor use on any Windows PC.
    • Coding is color keyed (slide 4)
    • Three coding environments (slide 4) are:
      • Source (code only)
      • Design (WYSIWYG)
      • Split (both code & WYSIWYG)WYSIWYG is an estimated appearance: always test!
    • Creating new web pages (slide 5) or websites (slide 6).
  • Validate your XHTML & CSS with tools (slide 7).
  • Uploads to WCU’s server are easy (slide 8), but may only be available when on campus.