What's Included We have a great collection of web templates and resources for every project. One purchase. Lifetime Use. You can preview how the designs appear on desktops, tablets and smart phones by browsing our template gallery and if the templates will meet your requirements. They are not mobile applications or responsive layouts responsive layouts are designs that change their appearance and layout for mobile devices such as smart phones so the website looks different on smaller screens.
Web design app Microsoft Expression Studio 4 Web Professional I also like the fact that Expression Web costs less than half the price of Dreamweaver. I sometimes think Expression Web is Microsoft's best-kept secret. Microsoft Expression Studio 4 Web Professional Web is a full-featured professional tool for designing, developing, and publishing compelling. Best Price Microsoft Expression Studio 4 Web Professional. 7. 0. 53 PC Microsoft Expression Studio 4 Web Professional, ThreatFire Publishers.
Expression Web Tutorial: 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. Don't panic if the name of the downloaded file says it is a "trial"; it's not. After you install it, you will find that it is the fully featured version that does not expire. Note that since the software is no longer supported or updated which is why it's free now , I'm not sure if Expression Web will work in future versions of Windows.
At the time I wrote this, their site says that it works in Windows XP, Windows 7 and 8, and other Expression Web users have said that it works fine on Windows 8. A domain name is essentially the address of your website. For example, the domain name of the website you're reading is "thesitewizard.
A web host is a company that has one or more computers specially configured so that a website placed on it can be viewed on the Internet by anyone connecting to your domain. If, at this point, you don't have the above two things, please read the article How to Create a Website for more information on how you can get them.
If you are a student reading this tutorial as part of a course, you may not need to get a web host or a domain name. Your lecturer or teacher will probably give you details about the web host that you should use. Often, this will not be a commercial web host but some space on your university's or school's computer where you are to publish your site. As such, you can ignore this particular requirement, although I still recommend that you read How to Create a Website to get a bird's eye view of the whole web creation process.
Start up Microsoft Expression Web. If this is the first time you have run the program, a dialog box with the words "Microsoft Expression Web is not currently your default Web page HTML editor. Would you like to make it your default editor? In other words, just do whatever you want here. Your action has no impact on this tutorial. If you're afraid of changing things, then click "No", which will leave things at their current settings, whatever they may be.
You will then see a blank web page in the centre of the editor and a number of panels on its left and right. Ignore all these for now. Click "Site" on the menu bar, followed by "New Site From this point onwards, for the sake of brevity, I shall refer to this sequence of clicking menu items as clicking "Site New Site For example, if I were to say, click "File Save", it means to click "File" on the menu bar, followed by the "Save" item in the menu that drops down.
It's just an illustration. A dialog box with the title "New" will appear. By default, the word "General" should be selected in the leftmost column. If not, click the "General" line. If you're not sure, click it anyway. In the centre column, click the line "Empty Site".
The "Description" box on the right will say "Create a new site with nothing in it". The "Location" field near the bottom of the dialog box should say something like "C: The exact words will differ depending on which version of Windows you have and your user name, so it will not be identical to what you see on your computer. This is where your website files will be saved on your own computer. Change the "mysite" portion to your website's domain name.
For example, I changed mine to "C: Note that you don't actually have to do this if you don't want to, but it's handy in the long run for your sanity if you create multiple websites.
You don't want to have to spend time, in the future, looking at the name "mysite" and wondering which of your many sites it refers to. If you change "mysite" to something else, that name will also appear in the "Add to Managed List" field below.
When you're done, click "OK". A message will briefly appear saying that the editor is creating the website files. When it is done, the screen will change to show you the files in your website folder. At the moment, it should be empty. Click "Tools Page Editor Options A dialog box with the title "Page Editor Options" will appear. You should see a row of tabs at the top of the dialog box. Click the tab with the word "Authoring". The content in the main portion of the dialog box should change.
Remove the ticks for ". The byte order mark is unnecessary for such files, and may cause problems with some software. Click the "OK" button to accept the changes and dismiss the dialog box.
Introduction to the Home Page The first page that you will be creating is known as the "Home page". This is the front page of your website. For example, you can see the home page of this site by typing "thesiteward. 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 and services on your site , you should probably mention your most important products or even all your products if you only sell a few things on that page. You should also link to the other pages on your 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 personal or hobby site. While you may not have products to sell in such a case, you should nonetheless give your users an idea of what they can find or do on your site, and link to the interior pages where they can do what you want them to do. Otherwise visitors reaching your main page will be at a loss as to how 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 allows you to put less essential but useful information in the side column while concentrating your main content in the main column.
The familiarity of the format to your visitors means that it is automatically user-friendly since they know how to find their way around the page. You can see an example of this layout in action on thesitewizard. By this, I mean that your web page will not automatically adapt to a modern smartphone's small screen, with the result that your visitors will have 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 Internet using a mobile phone, we will instead use the Layout Wizard to produce the page we need.
Don't worry. It's free. And it produces a mobile-friendly web page using a method nowadays referred to as responsive web design , which is just a jargon-laden way of saying that your web page will automatically adjust itself to fit the different screen 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 recommend that you highlight the step that you're currently reading each time you reach it, otherwise it's easy to accidentally skip a step.
Just drag your mouse over one or two words in that particular step to highlight it, so that you can locate where you were when you switch back. Doing this will save you the frustration of having to redo this entire section because you missed a few steps.
Many of the steps are similar, so it doesn't take much to get confused. Using your web browser, go to the Layout Wizard. Click the link in the previous sentence to go there. Do not close Expression Web — just leave it running while you surf to that page in your browser. You will see something similar to the picture below. Scroll down to "Step 1 of 2", and click on the button for "Two columns with the side column on the left, a header on top, and a footer at the bottom" in the "Choose a Layout" section see picture below.
Nothing, of course, prevents you from choosing whichever layout you like. However, for the purpose of this tutorial, I will assume that you have selected the one I mentioned above. If you choose a different one, you will have to adapt my instructions to your site in the chapters that follow. For complete novices, you may want to just follow my instructions for now, since it will be less confusing for you.
You can always go back and redo things when you are more familiar with Expression Web and website designing. Click the "Go to Step 2" button. The wizard will show its "Step 2 of 2" page.
Most of the items here can be left at their default values, since you can change things you don't like later in Expression Web itself. In reality, this step is probably unnecessary for most people.