Web Design Tips

Web Authoring Tools

In the Libraries (for CSU Libraries Staff only)

• Web authoring procedures: FrontPage, Dreamweaver, and Libraries templates
• Drupal authoring procedures
• General tips

At CSU

• Computer Applications Training handouts (login with your eID; includes Dreamweaver, Photoshop and InDesign)
• Web hosting services provided by Academic Computing and Networking Services

On the Web

• W3Schools: concise web authoring tutorials including HTML, CSS, JavaScript, Flash, PHP and SQL
• Free HTML/Web Editors
• Web page WYSIWYG editors
  • Adobe Dreamweaver
    • Adobe Dreamweaver CS6 new and improved features - fluid grid layout, CSS3 transitions, Live View, Multiscreen Preview, mobile development, and Business Catalyst site integration
    • Adobe Dreamweaver CS6 video tutorials
  • Nvu: a free open-source editor for Linux, Windows and Macintosh
  • KompoZer: unofficial bug fix and update of Nvu
  • Amaya: a free open-source editor/browser from W3C
• Web page HTML/code editors for Windows
• HTML-Kit: free
• Notepad++: free
• notepad2: free
• TextPad: 30-day trial
• Eclipse and NetBeans are Java editors that can edit HTML and PHP files with suitable plugins.
• WinDiff: find differences between two files (similar to Unix diff command)
• Linux text editors (the following are installed on our Web servers)
  • Nano - a simple editor for Unix beginners (commands are listed at the bottom)
  • Vi - for Linux system administrators (installed on all Unix systems)
  • Vim - an improved version of Vi for programmers
  • Emacs - a powerful editor for programmers
• Internet Explorer Developer Center
  • Developer Toolbar (Internet Explorer 7)
  • F12 Developer Tools (Internet Explorer 8+ )
  • Change Browser or Document mode to IE7-9, compatibility view or quirks mode, validate HTML, CSS, feeds or links, inspect HTML or CSS, disable images or CSS, resize, color picker
• Firefox add-ons for web developers
  • Web Developer - Adds a menu and a toolbar with various web developer tools.
    Disable JavaScript, CSS or images, view and edit CSS and HTML, view cookies, view element information, resize window, view generated source, validate HTML, CSS, feeds or accessibility, and view CSS and JavaScript errors
  • Firebug - Development tools to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • View Formatted Source - Displays formatted and color-coded source for each element.
  • View Source Chart - Draws a color-coded chart of a Web page's source code
  • CSS Viewer - View CSS properties
  • Link Checker - Checks validity of links on any page
  • ColorZilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other color tools.
  • MeasureIt - Draw out a ruler to get the pixel width and height of any elements
  • Greasemonkey - Customize the way a web page displays using small bits of JavaScript.
  • Total Validator - Check HTML (even XHTML5), accessibility, links, spelling, and CSS.
  • FlagFox - Website physical location, safety checks, translation, validation, etc.
• Google Chrome
  • Chrome extensions for web developers
    • Some popular extensions include: Stylish, Screen Capture, Firebug Lite, Web Developer, Alexa Traffic Rank, SEO for Chrome, YSlow, PageRank, PageRank Status
  • Chrome Developer Tools
    • Right-click any element and click Inspect Element to see and edit its HTML and CSS.
    • Click the Network tab and refresh to see file sizes and load times of all files for the page.
• Webmaster Tools
  • Google Webmaster Central
  • Yahoo! Site Explorer
  • Microsoft LiveSearch Webmaster Center
• Web Developer Tools
  • Google Code
  • Yahoo! Developer Network
  • Microsoft TechNet
  • Microsoft Developer Network
• Mobile emulators
  • Downloaded emulators give more realism than online simulators, but testing real devices is best.
    
  • http://www.mobilexweb.com/emulators
    
  • http://mobiforge.com/emulators/page/mobile-emulators
    
  • http://help.adobe.com/en_US/devicecentral/cs/using/ - Adobe DeviceCentral – not accurate?
    
  • http://www.opera.com/developer/tools/mini/ - Opera Mini online simulator
    
  • http://www.opera.com/developer/tools/mobile/ - Opera Mobile emulator
• Free Web Hosting and Web-Based Site Design
  • Google Sites
  • Yahoo! Geocities
  • Microsoft Office Live
  • Lycos Tripod
• Commercial Web hosting
  • Windows Web hosting
    • Discount ASP.NET - hosting for .NET developers
  • Linux Web hosting
    • Top 10 affordable Linux hosting providers
    • Rackspace
  • Windows/Linux Web hosting
    • GoDaddy - cheap but usability problems
    • WordPress hosting
• HTTrack - Free GPL software to download a mirror copy of a website for offline viewing
• DynamicDrive FavIcon Generator
• Web development cheat sheets - printable quick references