Research Blog 12: Information about insert images and content

-

Image insert

    Pictures on the web page have to provide information, display works, decorate the web page, show the role of personal sentiment and style. The image formats used by users in web pages mainly include GIF, JPEG, and PNG, among which GIF and JPEG are the two most widely used formats.

     In adding pictures and GIFs, I found information from w3schools and youtube to adjust it to the appropriate size and add photos and text.

    The most important thing to insert an image into the website is the <img>tag. The height and width properties of the tag set the size of the image.

    If I set these properties, it can save space for the image when the page loads. Without these attributes, the browser has no way of knowing the size of the image, so it can't reserve the right space for the image, so when the image loads, the layout of the page changes.

     At the beginning of the page, I used the height and width properties to scale the image. If the height and width attributes are used to shrink the image, then the user must download a large volume of the image (even if the image looks small on the page). So I use software such as Photoshop to get the image to the right size before I use it on the web.

image insert

   When I need to add a background image to a web page, I need HTML and CSS together. The first step is to create an image folder to hold the HTML files and images together.  After that, I have to create and name a folder on my computer so I can find it later. Use short, single words to name files in the folder.




Open the Dreamweaver and create a new file. Save the file as index.html.

Add the background image address in the site root folder. Find "background-image: URL(" ");" in the index.html file. For this line, move the cursor between the brackets and enter the background image filename. And the background image should be in the CSS file and it can link to the HTML pages.




gif insert

Adding an animated banner to a website should be the same as adding an image

<div id="banner"><img src="images/gif.gif" width="995"></div>



Content

In HTML, each paragraph is defined by the<p>element tag.
<br>  is a newline in paragraph

Useful Link for adding the images and gif on w3schools and youtube

https://www.w3schools.com/cssref/pr_background-attachment.asp



评论

发表评论

此博客中的热门博文

Research Blog11：Motion Graph exercise(animated banner)

-
图片
Image chose for motion graph   I chose the most famous landscape of Shanghai as the picture of my GIF choice. It shows some of the best-known buildings in Shanghai. The most famous and prominent Shanghai scenery is selected in the caption picture, allowing visitors to see the city at first glance. I used Photoshop to adjust the image's size to convert between dark and bright colors and move the text. I also summarize a slogan on a motion graph that reflects the essence of the website. The first image of my banner        Using photoshop to adjust the color of the images, Make the overall feeling of the photo dark, and create a contrast with the last photo. Create a sense of dusk and morning. Gifs can be given a more layered feel. After Effects  Firstly to create a new layer (1920*1080)    port the material Into After Effect  in AE It is to move the graph at the position keyframe, and then use the expression loop, the background there to use the mask, the principle is the same as cha
阅读全文

Reasearch Blog 6:Design of the website

-
图片
How would I arrange each page of the site？       The layout of my website is mainly four pages. For the first page. I will insert two pages and some content. On the first page, I will add a picture of the building and adjust it to the right size. For the second page, I will add a piece of architecture about the historical style of Shanghai. On the third page, I will add an element of architecture about Shanghai's historical style. The text will add the architecture and information provided to the visitors at the top of the picture. On the fourth page, I will introduce the buildings that embody Shanghai's modern and historical sense. Selection of images        In selecting pictures, I will choose a relatively high definition and distinctive images so that people watching the website will have more intuitive resonance and visual impact. See the title may want to a site to choose a picture is not difficult. With the improvement of the current bandwidth, the use of large images in
阅读全文

Research Blog 7 :Images prepared for website

-
图片
 What background image will be used for the cover of the website？       I chose a photo with the most urban features as the cover of the photo, and a photo at night can bring some visual appeal to the site. I can also better know the subject content of my website through the photos. The night view of the city building can increase the visual site.       The requirements of pictures are related to the content of the page, so the pictures used are some pictures related to urban buildings. Hope to attract the attention of netizens, can play a very good advertising effect, coupled with the use of Photoshop modification and production of pictures, so it can design a better webpage How will these pictures be distributed？ I want the site's images to be evenly and easily distributed across each page.  Home page For the first page of my site. I will choose the two photos that best express the image of Shanghai. “The Oriental Pearl TV Tower and the World Financial Center are two skyscrapers.
阅读全文