The applications included in the Expression Studio pack by Microsoft, stand out because they are professionally focused tools that are modular and complete. For the creation of websites, we can useMicrosoft Expression Web.
Design your webpage with Microsoft's software
Microsoft Expression Web 4 is a visual debugging tool for web developers which can display the URL of your choice as though it was rendered by IE6, IE7, IE8, IE8's compatibility view and Firefox 3.6. Design compelling and responsive webpages that can adapt to screen size using a rich set of predefined templates this web design application brings What's new in Adobe Dreamweaver CC 21.0.0.15392. Microsoft Expression Studio 4 Web Professional Web is a full-featured professional tool for designing, developing, and publishing compelling, feature-rich websites that conform to web standards.
This application is compatible with all the current standards and includes a series of tools developed to make work easier while designing and also when it comes to debugging the code, by means of previewing any change in real-time.
The program's interface is very elegant and offers a space that is ideal to develop websites, because each tool is clearly differentiated, and it's possible to access any of the application's sections with a couple of clicks of the mouse.
Among the standards supported by Microsoft Expression Web we'll find PHP, HTML / XHTML, XML / XSLT, CSS, JavaScript, ASP.NET or ASP.NET AJAX, Silverlight, Flash CSS and JavaScript.
Expression Web 4.0 Tutorials from Install to Publish and More Page 7 About the Author - Pat Geary Microsoft MVP - Expression Web Expression Web Tutorials & Templates Expression Web Tips Genealogy Web Creations I have been involved with website design since the late 1990’s when I created my first genealogy website on the old GeoCities.
If you're looking for a professional tool to create websites, that offers you full compatibility, and that also has an elegant interface, try out Microsoft Expression Web today.
- This download requires .NET Framework 4.
Chapter 1: How to Create a Mobile Friendly Two Column Web Page
by 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
Microsoft Expression Web 4
Download and install Microsoft Expression Web 4 if you have not already done so. (See the box below forinformation on where to get it.) 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 Webwill 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.1 as well. I have alsoused it on Windows 10, and it seems to work fine there too.
Update (13 July 2020): it seems that Expression Web is no longer available onMicrosoft's website at
http://www.microsoft.com/en-us/download/details.aspx?id=36179.Update (27 October 2020): I was informed by a visitor that the Internet Archive has a copy of thefile, apparently directly obtained from Microsoft's site. (The Internet Archive is like a museum that preserveshistorical copies of websites that give it permission to.) You can reach the archive'sApril2019 copy of Microsoft's download page here.
For those who are interested incomparing the fileyou downloaded with the one I obtained many years ago, so as to have some assurance that what you got is legitimate,my copy has the following size andchecksums.
File name: Web_Trial_en.exe
File size: 103,542,856 bytes
MD5: d597850f62c02287cd5a6869544b3e06
SHA1: 21531996203e83575d5e61e861c147d687c57ed6
SHA256: edd13893bcff2267b3f9bb257208b8d20325db958a995abbfe5fb1fedd864194
SHA512: 969d1e16c40247fc7e27e3c5cf117a55d940a52360561d6d28d0d4717ebdb52db3e57edb72feba003d9671fd0af20c313e47019bda85f9a6761f857305ad7475For those who don't know how to find out the checksums for your copy, readHow to Get theHash (MD5, SHA1, SHA256, SHA512) of a File on Windows Without Installing Anything.
A Web Host and a Domain Name
You will also need to get a domain nameand sign up with a web host. A domainname is essentially the address of your website. For example, the domain name of the website you're reading is 'thesitewizard.com'.A web host is a company that has one or more computers specially configured so that a website placed on it can be viewedon the Internet by anyone connecting to your domain.
If, at this point, you don't have the above two things, please read the articleHow to Create a Websitefor 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 notbe 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 readHow to Create a Website toget a bird's eye view of the whole web creation process.
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.
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 isnot currently your default Web page (HTML) editor. Would you like to make it your default editor?' Clickeither 'Yes' or 'No' according to your preference, likewise checking or unchecking the 'Always perfrom this checkwhen starting Expression Web'. 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 theymay be.)
You will then see a blank web page in the centre of the editor and a number of panels onits left and right. Ignore all these for now.
Click 'Site' on the menu bar, followed by 'New Site...' in the drop-down menu that appears.
From this point onwards, for the sake of brevity, I shall refer to this sequence of clickingmenu 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.(Note: don't click 'File | Save' at this moment. It's just an illustration.)
A dialog box with the title 'New' will appear. By default, the word 'General' should be selectedin 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 willsay 'Create a new site with nothing in it'.
The 'Location' field near the bottom of the dialog box should say something like'C:UsersChristopher HengDocumentsMy Web Sitesmysite'. (The exact words will differ dependingon which version of Windows you have and your user name, so it will not be identical to what yousee on your computer.)
This is where your website files will be saved (on your own computer). Change the 'mysite' portion to yourwebsite's domain name. For example, I changed mine to'C:UsersChristopher HengDocumentsMy Web Sitesthesitewizard' since thesitewizard.comis my site's name. 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'twant to have to spend time, in the future, looking at the name 'mysite' and wondering which ofyour many sites it refers to.
If you change 'mysite' to something else, that name will also appear in the 'Add to Managed List' fieldbelow.
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 thetop of the dialog box. Click the tab with the word 'Authoring'.
The content in the main portion of the dialog box should change. Look for the words'Add a byte order mark (BOM) when creating or renaming UTF-8 documents with these file extensions' (see picture below).
Remove the ticks for '.htm', '.html', '.css', '.js', '.txt' and '.xml' in the boxdirectly below those words. 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 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.
Microsoft Web Expressions 4 Download
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.)
Using your web browser, go to theLayout 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 thepurpose 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 thechapters that follow. For complete novices, you may want to just follow my instructionsfor now, since it will be less confusing for you. You can always go back and redo things whenyou 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. However, to alignthe choices here with that created by Expression Web's default choices, click the down arrow besidethe 'HTML version to use' box and select 'XHTML 1.0 Transitional'.
In reality, this step is probably unnecessary for most people. However, it will make iteasier for you if you happen to create some pages directly with Expression Web in the future, and mix andmatch them with pages generated by this wizard. By selecting 'XHTML 1.0 Transitional', bothsets of pages will use the exact same version of HTML/XHTML, allowing you to copy and pastecode between them without having to modify anything. As I said, it's just to simplify thingsfor you in the future. Note, though, that this tutorial assumes that you have done this step.
Scroll to the section 'Terms of Use: Licence Agreement (Required)'. Read the condition(s) there,and if you agree, click the checkbox to indicate it.
Click 'Generate code'.
The Results page will appear. Switch to Expression Web. Do not close the browser window containingthe results. We're not done with it yet.
In Expression Web, click 'File | New | HTML' from the menu.
A blank page will appear. You should see a series of tabs at the bottom of the blank page saying'Design', 'Split' and 'Code'. Click the 'Code' tab.
The editor will now show you the underlyingHTMLcode for that blank page. Click anywhere on that page. (It doesn't matter where. For example, click the blank spacebetween '<body>' and '</body>' if you can't figure out where to click.) You should see ablinking text cursor at (or near) the spot you clicked.
Select everything on that page by typing 'Ctrl+A' on your keyboard. By this, I mean that you shouldhold down the 'Ctrl' key on your keyboard, and while that key is still held down, type 'a'. If youdo it correctly, you will find that everything on the page is highlighted. Now hit the delete key on your keyboard.
Everything should be erased and the portion of the screen that used to show the HTML codeshould now be completely blank.
Switch back to the browser window (or tab) showing the Layout Wizard's Results page.
Click somewhere in the box under the 'HTML Code' section of the Wizard. The code should automatically be highlighted.Right click the section (that is, click your right mouse button while the mouse pointer is hoveringover the highlighted text). A menu should appear. Click the 'Copy' line in that menu.
Switch back to Expression Web.
Click 'Edit | Paste' from the menu. The HTML code that you copied from the box in the Wizard shouldnow be pasted into the blank space.
Click the 'Design' tab near the bottom of Expression Web window. You will see a one column page insteadof the expected two columns. That is because we have not completed copying and savingall the required code from the Wizard.
While still in Expression Web, click 'File | New | CSS'. A new blank page will appear. IMPORTANT:do not skip this step. It's easy to miss it because the next few steps are similar to thoseabove, and you may overwrite your HTML code with your CSS code if you don't. This is especially the case if youhave not been highlighting the steps as you take them.
Switch back to the Wizard in your browser. Scroll down the page and click somewhere in the box in the 'CSS Code'section. The code should be automatically highlighted.
Right click the highlighted text, and select 'Copy' from the menu that appears.
Switch to Expression Web and click 'Edit | Paste' from the menu. The code you copied should appear in what waspreviously a blank area.
Click 'File | Save As...' from the menu.
A dialog box with the title 'Save As' will appear. Type 'styles.css' (without the quotation marks) into the'File name' field. Make sure you type it exactly as I stated, with no spaces or capital (uppercase) letters.And remember, it's 'styles.css' not 'style.css'.
Click 'Save' at the bottom of the dialog box. When the dialog box disappears, you will see thatthe tab at the top of your code has changed to say 'styles.css'.
Click 'File | Close' from the menu. You will now be returned to the HTML page you copied earlier.
Click 'File | Save As...' from the menu.
Type 'index.html' (without the quotation marks, as before) into the 'File name' field of the 'Save As' dialog box,replacing the default name given there. Make sure you type it as I said, without capital letters or spaces.That is, it's 'index.html' and not 'Index.html' or 'INDEX.HTML' or anything else.
Then click the 'Save' button.
When you do that, you will be returned to your web page. It should now be formatted as two columnswith some placeholder text and a heading of 'Welcome'. Don't worry about the plainness of it all. Wewill replace the dummy text with your real content and spruce up its appearance over the course ofthese few chapters.
If you do not see two columns, it may mean that you missed the steps where you saved the CSS code into 'styles.css'.If so, you should return to thestartof the section and redo everything. This time, I suggest that you highlight the steps as I mentionedin the initial paragraph, so that you do not accidentally skip anything.
Another possibility is that you saved the 'index.html' file before you saved 'styles.css'. If the latter is the case,close all files by clicking 'File | Close All'. You should now be looking at Expression Web's Site View.There should be two files listed there: 'index.html' and 'styles.css'. If there is only one, it means you missedseveral steps above. Return to thestartof this section and do everything again. Otherwise, if both the files are there, doubleclick (ie, click twice inquick succession on the same spot) 'index.html' in that pane to reopen it. It should be fine now.
If you like, you can close the Layout Wizard tab in your browser. You won't need it any more.
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.
Microsoft Expression Web Free
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 description of the site.For example, if it sells bicycles, you can add 'buy bicycles online' after the site name.
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.
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.Alternatively, choose one of the preset phone sizes from the drop down menu that says 'Responsive'.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 Chapter
In the next chapter, you will begin the process of making your home page look presentable, byadding picturesand a site logo.
Copyright © 2016-2020 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:
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 27 October 2020.