CSW 131
This presentation is the property of its rightful owner.
Sponsored Links
1 / 9

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

  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Summer 2013 Prepared by Prof. B . INDEX

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

Summer 2013 prepared by prof b index

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, w3.org has a number a free tools. We can check our web pages for proper (X)HTML code at:

    • http://validator.w3.org/

      And check for proper CSS code at:

    • http://jigsaw.w3.org/css-validator/

  • 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="http://www.w3.org/1999/xhtml"> 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: http://roadrunner.cs.wcupa.edu/~fl123456

  • 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 W3.org tools (slide 7).

  • Uploads to WCU’s server are easy (slide 8), but may only be available when on campus.

  • Login