Understand the Anatomy of a Website
When you look at a web page, you might wonder how it is made. To display a web page, your Internet browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS.
The World Wide Web Consortium (W3C) defines the web standards, or specifications, for these languages. It is important to understand web standards to ensure that the different web browsers display your pages accurately. Dreamweaver includes features that allow you to build web pages based on the latest web standards. Let's look at how HTML and CSS work together to make a web page.
The World Wide Web Consortium (W3C) defines the web standards, or specifications, for these languages. It is important to understand web standards to ensure that the different web browsers display your pages accurately. Dreamweaver includes features that allow you to build web pages based on the latest web standards. Let's look at how HTML and CSS work together to make a web page.
What is HTML?
Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening <element> and closing </element> tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. The example shows three common HTML tags.
- <h1> specifies heading text, good for page titles
- <p> specifies paragraph text, good for body text
- <img> displays an image specified by a src (source file)
What is CSS?
With HTML you've given a basic structure to your web page, but there's not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page).
The example shows how CSS is used to change the appearance of the three HTML elements.
The example shows how CSS is used to change the appearance of the three HTML elements.
- h1 The heading text is center-aligned.
- p The paragraph text is red, bold, and center-aligned.
- img The image is resized to 150px by 100px.
Demonstrate knowledge of page layout design concepts & principles
Follow the stages of web design:
Whether designing your own site, or working as a team, the process of bringing a website to the web can be deconstructed into manageable phases.
1. Plan your content
Planning good content is arguably the most important phase in web design. This is also the stage that can take the longest amount of time, but it is worth doing it well. A good content plan will increase the presence and usability of your site as well as speed up web development.
Some key points to keep in mind are to know your audience, short and concise is usually better, think about how others will search for your site, and organize content logically.
Some key points to keep in mind are to know your audience, short and concise is usually better, think about how others will search for your site, and organize content logically.
2. Wireframe your design
A wireframe is a blueprint, or an abstract visual representation, of a website that makes it easier for you and your team to collaborate during the design and planning stage. Wireframes can be simple diagrams drawn by hand for quickly getting ideas down wherever you are, or they can be a more complex definition of a website's navigation and functionality.
A variety of wireframing tools are available to you including pen and paper, free or commercial wireframe software apps, or even other Creative Cloud apps such as Photoshop. Choose the method and level of detail that work best for you and your team.
A variety of wireframing tools are available to you including pen and paper, free or commercial wireframe software apps, or even other Creative Cloud apps such as Photoshop. Choose the method and level of detail that work best for you and your team.
3. Create web pages
Now it's time to put that great design and planning into action. To bring a conceptual plan to life, it is important to understand the languages of web design. The main focus for this series will be on HTML and CSS with a sneak peek into JavaScript.
HTML, or Hypertext Markup Language, is used to create the overall structure and content of the pages in your website. CSS, aka Cascading Style Sheets, is used to style visual properties of website's content and customize the layout. JavaScript is a popular language you can use to add functionality and interactivity to web pages.
HTML, or Hypertext Markup Language, is used to create the overall structure and content of the pages in your website. CSS, aka Cascading Style Sheets, is used to style visual properties of website's content and customize the layout. JavaScript is a popular language you can use to add functionality and interactivity to web pages.
4. Publish your website
Once you are ready to publish your website for the world to see, you'll need a few things. First, you'll have to get a domain name, or web address. You will also need dedicated space on a web server and the connection details – FTP is a common way to connect to a web server. If you are creating a website for your company, you can get this information from your IT web admin. If you are publishing your own site, you can get this information from a web host provider.
You can then use the Sites feature to connect to the web server and publish your site straight from Dreamweaver.
You can then use the Sites feature to connect to the web server and publish your site straight from Dreamweaver.