Feb 07, 2015 I've tried Expression Web 4 with Windows 10, just now. It is working fine. Some CSS Styles will look different from Dreamweaver, but in Browser it will work as it should be. Microsoft should give update with Bootstrap and other technologies as CSS 2.1 is showing. Expression Web 4 Add-in Builder. Expression Web 4 Add-in Builder by Microsoft (FREE) EW 4.0. Install the Add-in Builder within Expression Web 4 directly via the Tools - Add-ins menu! Click the Install button and choose the.xadd file you just downloaded. This add-in lets you generate XML and all the associated content files simply and easily. Dec 20, 2012 If you have already purchased a full version of Expression Design 4, you do not need to install this free version. The convenience and ease of editing vector graphics in Expression Design can be a cornerstone of your Windows Presentation Foundation (WPF), Microsoft. Expression Web 4 Tutorials EBook 2nd Edition. Updated April 2014 with some minor editorial revisions. Free Expression Web 4 Tutorials EBook 2nd Edition by Pat Geary Microsoft MVP Expression Web. The EBook is a great resource for beginners and newbies to Expression Web. Expression Web Tutorial: How to Design a Website with Microsoft Expression Web (Chapter 1) How to Add Images and a Site Logo to Your Website with Microsoft Expression Web (Chapter 2) How to Change Fonts, Text Size and Use Bold and Italics in Expression Web (Chapter 3) How to Change the Background of a Website with Expression Web (Chapter 4).
Chapter 1: How to Create a Mobile Friendly Two Column Web Pageby Christopher Heng, thesitewizard.com
Expression Web is the latest of Microsoft's brief foray into the world of WYSIWYG ('what you see is what you get') web editors,succeeding its obsolete FrontPage software. Although it's now available free of charge, it was formerly sold by its developer,and thus sports the spit and polish and extra features that are usually only found in commercial web editors.
Overall Goals of This Tutorial Series
By the end of this tutorial series, you will have designed and published a fully functional and multi-page website,including a home page, a site map, a feedback form and other pages that you choose to create.
Goal of This Chapter
In this chapter, you will create a two column web page that will serve as your website's home page. The web pagewill work on both desktop/laptop computers as well as smartphones and tablets.
Prerequisites
How to Set Up Your Website in Expression Web's Site Manager
Before you start designing anything, you should first set up your site in the Site Manager.
Introduction to the Home Page
The first page that you will be creating is known as the 'Home page'. This is the front pageof your website. It is what your visitor sees when he/she types your domain name intotheir browser without any additional filename. For example, you can see the home page of this site bytyping 'thesiteward.com' into your browser's address bar.
In terms of function, the home page of a website is analogous to both the cover of a magazine and its'Contents' page. Like the cover, it should give your visitors an idea of what your website is all about.And like the 'Contents' page, it should provide links to the important pages or sections of your site.It is the means by which you help your users get to the parts of your website where they want to go.
What this means in practice is that if you are running an online shop (ie, you're selling goods andservices on your site), you should probably mention your most important products (or even all yourproducts if you only sell a few things) on that page. You should also link to the other pages onyour website where your visitors can find out more about those products and place an order.
The same principle also applies if you're creating some other sort of website, such as a personalor hobby site. While you may not have products to sell in such a case, you should nonetheless giveyour users an idea of what they can find or do on your site, and link to the interior pages where theycan do what you want them to do. Otherwise visitors reaching your main page will be at a loss as tohow to proceed from there.
How to Create a Two Column Web Page
For the purpose of this tutorial, your home page (and the rest of your site) will have a two column layout.This layout is used by many webmasters because it is both space-efficient and familiar to visitors. It allowsyou to put less essential (but useful) information in the side column while concentrating your main content inthe main column. The familiarity of the format to your visitors means that it is automatically user-friendly sincethey know how to find their way around the page. You can see an example of this layout in action onthesitewizard.com, indeed on this very page you are reading, where I put the site logo, search engineand main navigation menu in the left column and the article proper on the right.
![]()
While Expression Web can generate such a layout from its 'File | New | Page..' menu,the page generated is not mobile-friendly. By this, I mean that your web page will notautomatically adapt to a modern smartphone's small screen, with the result that your visitors willhave to zoom into the different parts of your web page just to be able to read your content.
Since this is not really desirable in a modern age where more and more people surf the Internetusing a mobile phone, we will instead use theLayout Wizardto produce the page we need. Don't worry. It's free. And it produces a mobile-friendly web page using a methodnowadays referred to asresponsive web design,which is just a jargon-laden way of saying that your web page will automatically adjust itself to fit the differentscreen sizes of (say) mobile phones, tablets and desktop computers.
Generating a Two Column Format
Since you will be switching between two web browser tabs and the Expression Web window in this section, I recommendthat you highlight the step that you're currently reading each time you reach it, otherwise it's easy to accidentallyskip a step. (Just drag your mouse over one or two words in that particular step to highlight it, so that you canlocate where you were when you switch back.) Doing this will save you the frustration of having to redo this entiresection because you missed a few steps. (Many of the steps are similar, so it doesn't take much to get confused.)
The Layout of Your Web Page
Before you do anything else, let me explain some of the common terms that webmasters use to referto the different sections of your web page. This will make it easier for you to understand me when Irefer to those things throughout this tutorial series.
At the top of your page, you should see the words 'Placeholder content for your header section [etc]'.This section, which spans both the left and right columns, is sometimes referred to as the headersection or the masthead. In chapter 2, you will be placing your website's logo here.
Below that are the two columns of your site. The left column is narrower, and functions as the'side column'. It is also variously referred to as the 'side bar' or 'navigation column'.You will be placing your navigation menu (like the buttons you see at the side of thesitewizard.com)here in a later chapter.
The right column is where your main content will be placed. It is sometimes referred to as the contentor main column. You will be working on this portion of the page in this chapter itself.
At the bottom of the page is another section that spans both columns. This is the footer of the page.Webmasters typically place their copyright notice here. Websites that don't put a navigation menu inthe side column also sometimes put a list of links here that function as a navigation menu.You will also be replacing the words in the footer in this chapter.
Note that although the page looks similar (but not identical) to how it will appear in a web browser, with the links underlinedin blue, remember that Expression Web is not actually a browser but a web editor. As such,even if you are curious about the things mentioned in the placeholder text, clickingthe links there will not take you to the destinations of those links. You'll only be placing yourtext cursor at those locations. Try it now. (That is, click one of the links.) Don't worry.Nothing bad will happen. In fact, it's a good idea to get familiar with how the editor works even if you thinkthis is very trivial exercise.
Changing the Title of Your Page
Before you start writing your actual content, the first thing you need to do is to set the title.
Click 'File | Properties' from the menu.
A dialog box with the title 'Page Properties' will appear.
Notice that the 'Title' field has the words 'Insert web page title here'. Replace this with the title thatyou want for your page. Since this is your home page, it should start with the name of your site.You can also, if you wish, append a brief phrase about what your site is all about after that name.For example, at the time I write this,Amazon.com'shome page has its name in its title, followed by 'Online shopping' and a brief list of thetypes of things they sell.
Note that this 'title' is not actually displayed in the user-visible portion of your web page. Itis, nonetheless, very important that you set it, since it is used by the search engines to listyour page in their results. If you don't change it, Google and Bing will list your site as'Insert web page title here'. The title is also displayed in the web browser's title bar or tab(depending on which browser you use and how you configure it).
For those who don't know what to write here, just type the name of your website. For example, if your siteis called 'Example Co', type 'Example Co' (without the quotation marks) into the 'Title' field, replacingthe existing text. Alternatively, you can also put your domain name there.
The other useful field in the dialog box is the 'Page description' field. It is optional, butif you like, you can put a brief description of your page there. The text is not displayed on your page,but may be shown by the search engines underneath your page's title in the results.
Ignore the other fields, including theuseless Keywords field,and click the 'OK' button when you're done.
Writing the Content for Your Home Page
The technical aspect of writing your content is actually easy. In this respect, Expression Webworks a lot like Microsoft Word and otherword processing software.Whatever you type will appear at the location where your text cursor is, and the Backspace and Delete keys onyour keyboard do the expected thing of removing text. You can also move the text cursor around with the arrow keyson your keyboard.
The more demanding task is actually figuring out what to say on your page. I suggest that youstart by replacing the word 'Welcome' at the top of the page, which at presentfunctions as a sort of heading for the entire page. Change it to the name of your site.For example, if your website is called 'Example Co', replace 'Welcome' with 'Example Co'.As implied by the first paragraph of this section, you can replace the word by clicking your mouse pointersomewhere within the word 'Welcome', using your arrow key to move the text cursor to the end of the word,and then hitting the Backspace key to delete the letters one by one. Then type in your new heading.
This will be the first appearance of the name of your website in the user-visible portion of your web page.Remember that the Title field that you set earlier only appears in the browser's title bar or tab, soif you don't put the name of your site somewhere on your home page, your website will appear to haveno name to your human visitors.
Note that if you plan to have your site name appear in your logo (which you will create and insert intothe header section in the next chapter), it's possible to get away with not repeating it here. In this case,either replace 'Welcome' with some other word (or words), or just get rid of it.
Once you have settled this user-visible title, move on to replace the text in the rest of the right column.Review what I said earlier about some ofthethings that should go into a home page if you're not sure how to proceed. Those who are completely stuckcan take a look at my example for a fictitious company in the box below. You won't be able to use the words verbatim,since your company is unlikely to be selling the same goods, but it can serve as a framework to get youstarted on the sort of things you may want on your own page (eg a list of your products).
Example Co.
Example Co. is the planet's leading business selling examples. If you have heard, seen or read anexample somewhere, or even just dreamt about one, we probably have it in our stock. Our selectionof examples is so extensive that we even have examples of examples. For example, this example thatyou're reading about this very moment is available in our online shop too.
Featured Products
Expression Web Website: Get your very own example website, carefully created using thesitewizard.com'sExpression Web tutorial. As you know, thesitewizard.com's guide takes the new user through all thesteps needed to create a fully-functional website. Think of all you can do with your own example website!
Rejected Manuscripts: Are you a budding author, faced with the unrelenting barrage of rejection slips frompotential publishers for your magnum opus? Now you can comfort yourself by getting examples of rejected manuscriptsfrom other wannabe authors. As you know, misery loves company.
Don't worry about changing fonts, putting words in bold or italics, changing the text size, or adding picturesfor now. These will be dealt with in later chapters. For now, just work on your content. If you are experiencingwriter's block, it may be because you're subconsciously trying to come up with the perfect set of words.One possible solution is to just dump your words unceremoniously onto the page, even if they sound utterlymundane. You can always polish it later. In fact, many people find it easier to start with a rough copy andmodify it over time than to stare at a blank page, hoping for inspiration to wax lyrical about their products.
Leave everything in the left column alone. You will come back to it in a later chapter when you haveacquired the additional knowledge you need to change it correctly.
How to Make a Sub-Heading in Expression Web
If you want a sub-heading for some of the sections on your page, like the 'Featured Products' in my exampletext above, you'll need to do the following.
Type your sub-heading on a line of its own. (Use the ENTER key on your keyboard to make a newparagraph, and type the words that will become the sub-header on that new line. You may need to hit theENTER key again after typing the header so that the line stands on its own and is not joinedto the next paragraph.) Then select the line that you just typed. In computer jargon, selecting a linemeans to highlight it. You can do this by dragging your mouse pointer over the words on that line.
With the highlighted text still on the page, click the drop down box that currently has the word'Paragraph' in it. It should be next to the drop down boxes with the words 'Arial, Helvetica, sans-serif'and '(Default Size)'. You can find these boxes among the line of icons just underneath the menu bar. See thepicture below if you can't locate it.
A list of options will appear. Click 'Heading 2' from the list.
The words you selected will now probably look bigger and use a bold font.
For those wondering, 'Heading 1' is meant to be used for the title of your entire page, while 'Heading 2' isfor the sub-headers. If you have sub-sections within your main sections, you can use 'Heading 3' for thosesub-sections. As you may have guessed, if you have sub-sections to those sub-sections, you can use 'Heading 4'for those. And so on, until 'Heading 6'.
Do not use these headings as a way to put your text in bold. Use them only to mark headings. You will learn howto put text in bold and italics, as well as change text size and fonts in chapter 3.
Changing the Footer
Click somewhere in the footer among the words 'Placeholder content for the footer [etc]' to place yourtext cursor there. Delete the dummy text and type instead whatever you want.
As mentioned earlier, many webmasters use this space to put their copyright and other notices. I alsoput the date I wrote (or updated) the page here. But you are under no obligation to follow this. Writewhatever you like.
If you are wondering about how you can copyright your page, see my articleCopyright IssuesRelevant to Webmaster. You can insert the copyright character, '©', by clicking'Insert | Symbol..' from the menu. In the dialog box that appears, click the '©' symbolfollowed by the 'Insert' button. Then click the 'Close' button to get rid of the dialog box.
Save Your Work
Now save your page. You can do this by clicking 'File | Save' from the menu. In fact,you should make it a habit of saving your work frequently as you work on your page, so that anunexpected power failure or software crash will not cause you to lose everything you have done so far.
Testing Your Page in Your Browser
Even though you have not actually finished designing your home page, you can and should take a lookat your progress so far in a real web browser.
A simple way to do this is to click 'File | Preview in Browser' from the menu, and select a browserfrom the list that appears. If you only have one browser, select that browser. If you have multiple,it is probably a good idea to take a look at your site in all of them. Note that this isnot overkill, as some of you may be thinking. As your web page becomes more complex, you may find thatdifferent browsers may display it in slightly different ways, either because of bugs in the software,or because of mistakes you make in designing your page that cause it to be interpreted differently by those browsers.
Microsoft Expression Design 4 Tutorial Deutsch Englisch Translation
The absence of lines (dotted or otherwise) around your columns on your actual web page is neither a bug inthe browser nor a mistake you made. Expression Web added those borders to its workspace so that you can seethe outer limits of each column (and paragraph) as you design your site, so that you don't have to work blind.There are no lines on the real page by default, unless you add them.
Don't be disappointed that your page looks plain. That is to be expected. After all, you have only juststarted, and this chapter's focus was on getting a basic two column layout and putting your contentonto the home page. You will get a chance to polish its appearance from the next chapter onwards.
In the meantime, take the opportunity to proofread your page: it's sometimes easier to spot mistakeson a page displayed in a web browser than in a web editor.
If you are curious as to how your site looks on a smartphone, resize the horizontal width of thebrowser window. Once it drops below 630 pixels (horizontally), your page will appear in a single column.
If you use Firefox, you will need to use 'Tools | Web Developer | Responsive Design Mode' from its menu since thatbrowser will not otherwise allow you to resize the window to mobile phone sizes. Select '320x480' in theResponsive Design Mode to see your page as displayed on models of Android phones that have that resolution.To return Firefox back to its normal mode, click 'Tools | Web Developer | Responsive Design Mode' again.
Note that this resizing trick will only work in a real web browser. Expression Web's internal rendering (ie, display)engine is slightly dated and does not support some of the modern features which websites use to adapt to mobilescreens (namely, the facility known as 'media queries' in technical parlance). It doesn't really matter though,since you can always fire up a browser to look at your page.
Next ChapterExpression Blend 4
In the next chapter, you will begin the process of making your home page look presentable, byadding picturesand a site logo.
Copyright © 2016-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top »Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide »List of All Expression Web Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Copyright © 2016-2019 Christopher Heng. All rights reserved. thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng. This page was last updated on 2 May 2019. Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |