I am urgently looking for a dynamic web design report. urgent! ! ! ! ! ! ! ! ! Please help me, brothers and sisters. Email 904013391@qq.com

"Website Design and Web Page Production" Design Instructions

Course Name: Web Design

Design Title: My Hometown

Department : Department of Building Information Engineering

Professional Class: Computer 0901

Student Name:

Student ID: 200913190

Instructor: Xu Meixia

Start and end dates: December 20, 2010 to December 24, 2010

Page 1*** 13 pages

My hometown webpage production process

1. Introduction to the purpose and functions of website development

With the development of network technology and the popularization of the Internet, website construction and web page production have become increasingly important for all walks of life and individuals to promote themselves. Favorable tools, websites are used by more and more people for publicity in today's era. Through the production of websites, teachers, classmates and friends can better understand themselves and what others want to know. What I am doing now is about me. My hometown provides a platform for others to understand themselves more deeply. The main function of this website is to let more people know about me and my hometown

2. Website design

2.1 Name of the website: My hometown

2.2 Division of website columns

According to the content and functions of this website, it is divided into: my heartfelt words, navigation links, and introductions to various places , pictures reflecting hometown, copyright statement, etc.

(1) My heartfelt words - six introductions to our dormitory, prompting comparison with the theme of the website to reflect our hometown; (2) Navigation link - link to the web page set by each of their respective hometowns ; (3) Introduction to each place - a brief introduction to our respective hometowns and understanding of the knowledge and culture of our hometowns; (4) Pictures - a list of representative pictures of each place, showing different styles in another way ; (5) Copyright statement - declares the builder of the website

The details are shown in the figure:

2.3 Website navigation should be applied to all pages to improve the operation friendliness of the website.

2.4 Website style and color selection: The page is mainly light green and light yellow. Light green reflects vitality, and the practical light brown and faint gray fonts give people a clear and stable feeling. All pages have the same color tone and similar layout.

2.5 The website directory structure is reasonably designed: different materials are stored separately in different folders. For example, pictures are placed in the image

folder, flash is placed in the flash folder, completed homework is placed in a folder named after yourself, etc.

3. The production process of Liaocheng homepage

3.1 Home page layout:

Home page, navigation links, content, web links

3-1

The entire page is divided into four The first part uses a flash file to display dynamic pictures, mainly to highlight the website; the second part is the navigation bar; the third part is the detailed content, in which the text in the web page is arranged neatly and compactly, so as to give people a sense of A comfortable feeling. Add some pictures in appropriate places on the web page, and add some different text descriptions for each picture to make the web page look more beautiful; the fourth part is the links to each web page. The main purpose of using this layout is to give viewers a simple, clear, and clear feeling and make the website uniform.

The specific layout is shown as follows:

3-2

3.2 Production process:: The production of this web page is divided into three parts: the top part is made with flash Created page header. The middle part is divided into two parts: left and right. The left is a brief introduction and links to my hometown. The dynamic pictures produced use the timeline to automatically play the pictures, and the pictures slid down from the top are automatically looped. The right is the insights of various scenic spots in my hometown. . I also set a background image for the web page and used the image added by the spry tab at the end.

4. Liaocheng Homepage Production Process

4.1 Create a new page and name it Liaocheng Homepage (index)

4.2 Set the four-sided margins in the appearance of the page properties is 0, the text color is set to: #9900CC, the size is set to 18 pixels; the underline style in the link is set to: underlined; the link color is: #0000FF.

4.3 (1) Home page (index) production

Use styles to define the height and width of each part, and set ./image/195911NM-10.gif as the background image.

The header image is Water City Pearl.jpg. Set the flash animation to orange on the left and right. The swf code is as follows:

The design code of the header image: (picture 3-2 above)

lt; div id="Layer3" style="left: 30px; top: 34px; width: 186px; height: 175px;"gt;lt;span class="STYLE3"gt;lt;a href="liaocheng.html"gt; lt;img src="../image/201042717165.jpg" name="Image1" width="186" height="174" /gt;lt;/agt;lt;/spangt;lt;/divgt;

lt;a name="dingbu" id="dingbu"gt;lt;/agt;

lt;table width="967" height="817" border="1" align="center" bordercolor="#000000"gt;

lt;trgt;

lt;td height="190" colspan="2" valign="top" bgcolor ="#FFFFFF"gt;lt;img src="../image/水城Pearl.jpg" width="956" height="202" /gt;lt;/tdgt;

lt; /trgt;

The Flash animation setting code is as follows:

lt; div id="Layer2"gt;

lt; script type="text/javascript" gt;

AC_FL_RunContent('codebase','/pub/shockwave/cabs/flash/swflash.cab#version=7, 0, 19, 0', 'width', '957', 'height ', '210', 'src', '../FLASH/left and right orange', 'quality', 'high', 'pluginspage', '/go/getflashplayer', 'wmode', 'transparent', 'movie ', '../FLASH/left and right orange' ); //end AC code

lt;/scriptgt;

lt;noscriptgt;

lt ;object classid="clsid：D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7，0，19，0" width="957" height= "210"gt;

lt; param name="movie" value="../FLASH/left and right orange.swf" /gt;

lt; param name=" quality" value="high" /gt;

lt; param name="wmode" value="transparent" /gt;

lt; embed src="../FLASH /Left and right orange.swf" width="957" height="210

" quality="high" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"gt;lt;/embedgt;

lt;/objectgt;

lt;/noscriptgt;

lt;/divgt;

(2) Jingyanggang (jyg) page design

This web page Some codes are used to implement the text scrolling code: lt; td width="213" lt; td width="213" height="363" bgcolor="#FFFFFF"gt; lt; marquee direction="left" width= "310" height="620" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()"gt;

lt;pgt;lt;span class= "STYLE21"gt; Jingyanggang is located 18 kilometers east of Yanggu City. In the middle of the top of Shagang, there is a national-style temple, commonly known as "Wusong Temple". It is said that it was built in the mid-Ming Dynasty and was later destroyed. The existing ancient temple was built in 1958. In front of the temple, there is a stone tablet engraved with the three characters "Jingyang Gang", which was inscribed by Shu Tong, a famous contemporary Chinese calligrapher. Two or three hundred meters east of the temple, there is a monument with the words "Wu Song". The inky jade-colored stone tablet where the tiger was killed. Since 1973, after many test excavations by the provincial archaeological team, Jingyanggang has been identified as one of the first batch of AAA-level scenic spots in the country for the "Longshan Culture" site, an important scenic spot on the Water Margin tourism line, and Wu Song's Tiger Hunt. Everyone knows that not everyone has been to the place where Wu Song fought tigers. The Jingyanggang Scenic Area covers a total area of ??33.3 hectares.

In the scenic area, there are undulating sand dunes, overgrown grass, and trees blocking out the sun. The main attractions: In front of the left front of the Shanshen Temple, which has a history of more than 200 years, there is a "Jingyanggang" stone tablet inscribed by Shu Tong, the former Secretary of the Shandong Provincial Party Committee of the Communist Party of China. On the right front, there is a 3-meter-high stele with the character "Tiger" written by the famous calligrapher Yang Xuanting; a stone stele with the word "Where Wu Song Killed Tigers" erected in the Southern Song Dynasty; a door plaque of "Wusong Temple" written by Zhao Puchu; The hexagonal single-eaves Tiger Roaring Pavilion inscribed by Liao Jingwen; the relief stone statue of "Wu Song Fighting a Tiger" created by the famous painter Liu Jiyao; and the stone that is said to be the incarnation of the tiger Wu Song killed - the "No. 1 Tiger in the World". Three bowls are not enough. Hotel Gang...lt;/spangt;lt;br /gt;

lt;/pgt;

lt;/marqueegt;

The header picture is Liaocheng.jpg Set up flash animation to travel through the starry sky.swf, fireworks bloom.swf code is as follows:

lt; trgt;

lt; td height="186" colspan="3" valign ="top"gt;lt;img src="../image/Liaocheng.jpg" width="1016" height="224" /gt;lt;/tdgt;

lt;/trgt ;

Flash file code:

lt;div id="apDiv1"gt;

lt;script type="text/javascript"gt;

lt; p>

AC_FL_RunContent('codebase','/pub/shockwave/cabs/flash/swflash.cab#version=9, 0, 28, 0', 'width', '991', 'height', '217 ', 'src', '../FLASH/Across the Stars', 'quality', 'high', 'pluginspage', '/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode', 'transparent' ,'movie','../FLASH/Across the Stars' ); //end AC code

lt;/scriptgt;lt;noscriptgt;lt;object classid="clsid:D27CDB6E-AE6D-11cf -96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9, 0, 28, 0" width="991" height="217"gt;

lt;param name="movie" value="../FLASH/Crossing the Starry Sky.swf" /gt;

lt;param name="quality" value="high" /gt;

lt;param name="wmode" value="transparent" /gt;

lt;embed src="../FLASH/Crossing the Starry Sky.swf" width="991" height= "217" quality="high" pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"

wmode="transparent"gt;lt;/embedgt;

lt;/objectgt;

lt;/noscriptgt;

lt;/divgt;

lt;/objectgt;

lt;/noscriptgt;

lt;/divgt;

lt; p>

lt;div id="apDiv2"gt;

lt;script type="text/javascript"gt;

AC_FL_RunContent( 'codebase', '/pub /shockwave/cabs/flash/swflash.cab#version=9, 0, 28, 0', 'width', '390', 'height', '211', 'src', '../FLASH/Fireworks bloom ', 'quality', 'high', 'pluginspage', '/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode', 'transparent', 'movie', '../FLASH/Fireworks Bloom' ); //end AC code

lt;/scriptgt;lt;noscriptgt;lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs /flash/swflash.cab#version=9，0，28，0" width="390" height="211"gt;

lt; param name="movie" value="../ FLASH/Fireworks bloom.swf" /gt;

lt; param name="quality" value="high" /gt;

lt; param name="wmode" value= "transparent" /gt;

lt; embed src="../FLASH/Fireworks bloom.swf" width="390" height="211" quality="high" pluginspage="/shockwave/ download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"gt;lt;/embedgt;

lt;/objectgt;

lt;/noscriptgt;

lt;/divgt;

The completed effect is as follows

3-3

(3) Phoenix Garden (fhy) web design

To highlight the characteristics of Phoenix Garden, the web design of Phoenix Garden uses the more prominent products of Phoenix Garden to reflect the technology of Phoenix Garden (cactus, Japanese fig, etc...). The flash used is Left and Right 5.swf and Butterfly Feifei.swf. This webpage inserts a picture made by flash to realize the scrolling of the picture from right to left. It uses the method of scrolling text in the webpage above and uses the code

（lt;div id="apDiv7"gt;

lt;td width="213" height="363" bgcolor="#FFFFFF"gt;lt;marquee direction=" l

eft" width="1020" height="150" scrollamount="10" scrolldelay="1" onmouseover="stop()" onmouseout="start()"gt;

lt;pgt;lt ;span class="STYLE29"gt; Liaocheng Fenghuangyuan Agricultural Science and Technology Park has introduced more than 100 famous and rare fruit tree varieties at home and abroad, more than 20 poplar varieties used for greening and national paper industry, and has bred more than 6 million trees. Seedlings to meet the needs of adjusting the agricultural planting structure and developing efficient rural economy in this city and surrounding areas

The main varieties are as follows:

(1) Japanese Fairy Peach King: The peaches are as follows. Distinguished features: extra large, with an average fruit weight of 500 grams and a maximum of 1,350 grams; excellent quality, all red in appearance, crispy meat, sweet and refreshing, with a sugar content of up to 23%; extremely resistant to storage and transportation, and can be stored at room temperature It can be stored for 20 days and can be stored in a constant-temperature warehouse for 3 to 4 months. It is really a good treat for Mid-Autumn Festival and New Year's Day. The fruit-bearing period on the tree is long, from late August to late September, and can be gradually released on the market. This is unique to any other peach variety. Incomparable.

(2) Korean famous early-maturing peach: In Fenghuangyuan District, it matures at the end of June, is completely red, bright and beautiful, and the weight of a single fruit can reach 300 grams. It has crispy flesh, rich sweetness and juicy texture. , extremely high-yielding, with excellent flavor compared to other early-maturing peaches, and promising market development prospects

(3) Famous Korean peaches: grown by Korean farmers, mature in late September, with an average fruit weight of 350 grams. It has a strong fragrance, juicy taste and extremely sweet taste. It is semi-soluble, resistant to storage and transportation, and has a bright red appearance. It is the main late-maturing variety in Korea.

(4) American almond: 86-1, 86-2, 86. -9 is one of several superior lines bred from American almonds. The kernel yields of 86-1 and 86-4 are both above 45%, and 86-9 is the best pollinated variety. American almonds are also called American almonds. , with the characteristics of drought resistance, barrenness resistance, strong adaptability, and tolerance to extensive management. It usually bears fruit three years after planting, and achieves large-scale output in five years. During the high-yield period, the yield of large almonds per mu is 500 kilograms, and the current price in the domestic market is 56 yuan/kg. The benefits are extremely considerable. . American almond is an ideal tree species for development in deserted areas and for farmers to get rich.

(5) June Snow Pear: It is the earliest variety of pear developed in my country and matures 20 days earlier than Emerald. The average fruit weight is 180 grams, with fine white flesh, no stone cells, crisp, sweet and juicy. Through observation in our park, this variety has a high fruit setting rate, extremely high yield, and is resistant to scab.

(6 ) Virus-free strawberry series: Phoenix Garden introduced the virus-free strawberry series from the National Fruit Tree Research Institute: Meixiangsa introduced from the Netherlands. It is the trump strawberry variety that monopolizes the early spring market in Europe and the United States today. It matures very early, has hard fruit, good flavor, and has the largest single fruit weight. It can reach 118 grams. It is fragrant and rich. It is suitable for semi-cultivation and floor cultivation. It will be an ideal variety for efficient agricultural development. There are 18 other strawberry varieties, including Gui Nu Gan, Jiu Xin Tang, Xin Hani, and All Star. lt;/spangt;lt;br /gt;

lt;/pgt;

lt;/marqueegt;

lt;/divgt;)

Change the scrolling direction of letters to the left to achieve scrolling that is different from the previous webpage. The setting of the header flash is the same as that of the previous webpage.

The completed renderings are as follows

(4) Guangyue Tower (gyl) and Dongchang Lake (dch) are completed with the same design.

5. Summary of design technology

In order to make our website more practical and rich in content, we use a lot of technologies on the website, including flash photoshop and other image processing and animation, using Relevant knowledge in dreamweaver to create various special effects such as layer application, timeline application, etc.

5.1 In the collection and processing of materials, I spent a lot of time processing website animations, real photo collection, and personal information. For example, use PHOTOSHOP to process photos as a whole.

Scroll animation was created using flash.

5.2 Text scrolling effect, the code is as follows:

lt;td width="213" height="363" bgcolor="#FFFFFF"gt;lt;marquee direction="up " width="179" height="150" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()"gt;

lt;pgt;contentlt ;br /gt;

lt;/pgt;

lt;/marqueegt;

6. Internship experience

This website It mainly uses the knowledge learned this semester to layout applications and create animation effects. Through this website design, the knowledge learned this semester is used. This not only reviews some knowledge learned this semester, but also deepens what has been learned. In terms of knowledge content, this webpage production has taught me a lot about how to collect information, how to use the fastest method to collect information, how to collect effective information, how to organize information, and how to make my downloaded information easy to find. I learned how to create web pages, how to use special effects on web pages, and what kind of special effects can highlight the theme of web pages. In the process of making the website, I also encountered a lot of things that I didn't understand and solved many problems with the help of teachers and classmates. Through step-by-step learning, I slowly completed the construction of this website. Although the web page I made this time It’s not very good-looking and has shortcomings, such as the production of dynamic pages, the use of scripts, the use of some effects, etc. are not flexible enough. At the same time, the layout of the web page is not very perfect, but I spent a lot of time to complete it, so, It will be of great help to me when making web pages in the future. I also learned a lot in the process of making a web page, so from my heart I am very satisfied with my experience. At the same time, I would also like to thank the teacher for arranging such an internship week. Why? Because during the production process, I not only learned things that are not in the book, but also cultivated my ability to think independently. At the same time, it also strengthened the friendship of solidarity and mutual help among classmates. Therefore, no matter from which perspective, the task assigned by the teacher this time is the only time that knowledge has been put into practice since I entered college. Thank you again, teacher. In short, this design was completed in the continuous learning process of "find the problem - gt; solve the problem - gt; discover the problem again - gt; solve the problem again - gt;". In the future I will continue to work hard to achieve the goal.