You can always polish it later. In fact, many people find it easier to start with a rough copy and modify 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 have acquired the additional knowledge you need to change it correctly. If you want a sub-heading for some of the sections on your page, like the "Featured Products" in my example text 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 new paragraph, and type the words that will become the sub-header on that new line. You may need to hit the ENTER key again after typing the header so that the line stands on its own and is not joined to the next paragraph. Then select the line that you just typed.
In computer jargon, selecting a line means 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 the picture below if you can't locate it. For those wondering, "Heading 1" is meant to be used for the title of your entire page, while "Heading 2" is for the sub-headers. If you have sub-sections within your main sections, you can use "Heading 3" for those sub-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 how to put text in bold and italics, as well as change text size and fonts in chapter 3. Click somewhere in the footer among the words "Placeholder content for the footer [etc]" to place your text 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 also put the date I wrote or updated the page here. But you are under no obligation to follow this. Write whatever you like. If you are wondering about how you can copyright your page, see my article Copyright Issues Relevant to Webmaster. Then click the "Close" button to get rid of the dialog box. 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 an unexpected power failure or software crash will not cause you to lose everything you have done so far.
Even though you have not actually finished designing your home page, you can and should take a look at 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 browser from 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 is not overkill, as some of you may be thinking. As your web page becomes more complex, you may find that different 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 in the browser nor a mistake you made. Expression Web added those borders to its workspace so that you can see the 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 just started, and this chapter's focus was on getting a basic two column layout and putting your content onto 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 mistakes on 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 the browser window. Once it drops below 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 that browser will not otherwise allow you to resize the window to mobile phone sizes.
Select "x" in the Responsive 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". 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 mobile screens 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. In the next chapter, you will begin the process of making your home page look presentable, by adding pictures and a site logo. All rights reserved. Top » Getting Started with Your Website ». Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form. To link to this page from your website, simply cut and paste the following code to your web page. Switch to your web editor's HTML source mode before pasting. Featured Products Expression Web Website: Get your very own example website, carefully created using thesitewizard. This page was last updated on 27 October Search This Site.
Link to Us. No Spam Policy. Privacy Policy. Site Map. Getting Started. Web Design. Search Engines. Revenue Making. Web Hosting. This section will show you how to setup the program so you get started on the right foot.
It then takes you through the step-by-step proces of creating your first website. This section offers tutorials on how to accomplish various tasks in Expression Web and more detail on various parts of the program. Included are such things as:. This section will offer articles and tips on web deisgn in general and includes such things as working with forms, and working with lists and tables.
A few of the subjects covered include:. Expression Web Add-ins are programs you install on your computer that add functions to EW that were not part of the original program. Some of the Add-ins are free and some are commercial products available for sale. Some of the new add-ins are being released that will work with all versions of Expression Web.
Some will only work with specific versions. This section of the site includes css based layout Expression Web Dynamic Web Templates or DWT's in both fluid and fixed width layouts you can use for your design needs. The are well commented and a good way to get a head start on your site design. Expression Web uses its own standard rendering engine, which is different from Internet Explorer's Trident engine.
In the following chapters of this tutorial, we will look closely at Microsoft Expression Web and learn how it works. This tutorial has been prepared for aspiring web designers to familiarize them with the interface and features of Microsoft Expression Web. After completing this tutorial, you will gain sufficient knowledge on Microsoft Expression Web from where you can take yourself to the next level.
Jerry, EW is a professional development tool, unlike FrontPage, any version. That will give you an idea of the differences, and of what is the minimum expected of those migrating. It is not a matter of learning the program, like FP, but of learning the principles of the markup languages the program is designed to manipulate. Good luck! Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
0コメント