There is an urgent need for a dynamic web design report. Urgent! ! ! ! ! ! ! ! ! Please help me. E-mail 90401339 1@qq.com

Design instructions for website design and webpage production

Course Name: Web Design

Design theme: My hometown

Faculty: Department of Building Information Engineering

Specialized course: Computer 090 1

Student name:

Student ID: 2009 13 190

Instructor: Xu

Start and end dates: 2065438+0065438+February 20th to 2065438+0065438+February 24th.

Page1* *13

My hometown web page making process

Brief introduction to the purpose and function of website development

With the development of network technology and the popularity of the Internet, website construction and webpage production have increasingly become favorable tools for all walks of life and individuals to promote themselves. Nowadays, more and more people use websites. Through website production, teachers, classmates and friends can better understand themselves and what others want to know. What I am doing now is about my hometown, providing a platform for others to know more about themselves. The main function of this website is to let more people know about me and my hometown.

Second, the design of the website

2. 1 Website name: My hometown

2.2 Website column division

According to the content and function of this website, it is divided into: my heart, navigation links, introduction of various places, pictures reflecting my hometown, copyright statement, etc.

(1) My heart-six profiles of our dormitory, it is suggested to reflect my hometown according to the theme of the website; (2) Navigation links-links to the respective hometown of each set webpage; (3) Brief introduction of each place-briefly introduce our respective hometowns and understand their knowledge and culture; (4) Pictures-List the pictures of representatives from different places to show different styles in another way; (5) Copyright notice-stating the founder of the website.

Specific as shown in the figure:

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

2.4 Style and color selection of the website: the pages are mainly light green and light yellow. Light green reflects vitality, and practical light brown and light gray give people a clear and steady feeling. All pages have the same color tone and similar layout.

2.5 Website directory structure design is reasonable: different materials are stored in different folders. If the picture is placed in the image.

Folders, flash memory in flash memory folders, completed jobs in folders named after themselves, etc.

Third, the production process of Liaocheng homepage

3. 1 homepage layout:

Home page, navigation links, table of contents and web page links.

3- 1

The whole page is divided into four parts. The first part uses flash files to display dynamic pictures, mainly highlighting websites. The second part is the navigation bar; The third part is the details. The words in the webpage are arranged neatly and compactly, which can give people a comfortable feeling. Add some pictures to the appropriate place of the webpage, and add some different text descriptions to each picture to make the webpage look more beautiful; The fourth part is the links of various web pages. This layout is mainly used to give visitors a simple, clear and clear feeling, so that the website is unified.

The specific layout is as follows:

3-2

3.2 production process:: The production of this webpage is divided into three parts: the top is a page header made of flash. The middle part is divided into two parts, the left part is a simple introduction and link of hometown, the dynamic pictures produced use the time axis to automatically play pictures, and the pictures sliding down from the top are automatically played circularly; On the right is the scenery of various scenic spots in my hometown. I also set a background picture for the webpage, and finally I added a picture using the spry tab.

Fourth, Liaocheng homepage production process

4. 1 Create a new page and name it Liaocheng Home Page (Index).

4.2 In the appearance of page attributes, set the margin of four sides to 0, the text color to #9900CC, and the size to 18 pixels; Set the underline style in the link to: underline; Link color: #0000FF.

4.3( 1) Homepage (Index) Making

Use styles to define the height and width of each part, and set. /image/195911nm-10.gif as the background picture. The picture at the top of the page is the Pearl of Shuicheng. Jpg, and set the flash animation to left and right orange. The swf code is as follows:

Title picture design code: (as shown in Figure 3-2 above)

& ltdiv id = " layer 3 " style = " left:30px； top:34px； Width:186px; Height:175px; ”& gt& ltspan class="STYLE3 " >& lta href = " liaocheng.html " & gt& ltimg src= "../image/20 10427 17 1 65 . jpg " name = " image 1 " width = " 186 " height = " 174 "/>& lt/a & gt； & lt/span>。 & lt/div & gt；

& lta name = " dingbu " id = " dingbu " & gt& lt/a & gt；

& lttable width = " 967 " height = " 8 17 " border = " 1 " align = " center " border color = " # 000000 " >

& lttr & gt

& ltTD height = " 190 " colspan = " 2 " valign = " top " bgcolor = " # FFFFFF " >。 & ltImg src= "../image/Shuichengmingzhu.jpg " width = " 956 " height = " 202 "/> & lt； /TD & gt；

& lt/tr & gt；

Flash animation setting code is as follows:

& ltdiv id="Layer2 " >

& ltscript type = " text/JavaScript " & gt；

Ac _ fl _ runcontent ('codebase '，'/pub/shock wave/cabs/flash/SW flash . cab # version = 7，0， 19，0 '，' width '，' 957 '，' height '，' 2 10 '。 Quality',' high',' plugin page',' /go/getflashplayer',' wmode',' transparency',' movie',' ../flash/left and right orange'); //End communication code

& lt/script & gt；

& ltnoscript & gt

& ltobject classid = " clsid:d 27 CDB 6 e-AE6D- 1 1cf-96b 8-444553540000 " code base = "/pub/shock wave/cabs/flash/SW flash . cab # version = 7，0， 19，0 " width = " 957 " height = " 2 10 " >；

& ltParam name = "movie" value = "../flash/left and right orange . swf swf "/>

& ltparam name = " quality " value = " high "/& gt；

& ltparam name = " wmode " value = " transparent "/& gt；

& lt embedded src = "../flash/leftrightorange.swf" width = "957" height = "210" quality = "high" pluginpage = "/go/ getflash player " type = " application/x-shock wave-flash " wmode = " transparent "。 & lt/embed & gt；

& lt/object & gt；

& lt/noscript & gt；

& lt/div & gt；

(2) Jingyanggang (jyg) page design

This page uses some code to realize the scrolling code of text:

& LTP>< span class = "style21"> Jingyanggang is located in the east of Yanggu 18km, at the top of Shagang. There is a national temple, commonly known as "Songwu Temple". It is said that it was built in the middle of the Ming Dynasty and was later destroyed. The existing ancient temple was built in 1958. There is a stone tablet in front of the temple, engraved with three Chinese characters "Jingyanggang", which was inscribed by Shu Tong, a famous contemporary calligrapher in China. Two or three hundred meters east of the temple, there used to be a black jade stone tablet engraved with "the land where Song and Wu killed tigers". Since 1973, Jingyanggang has been identified by the provincial archaeological team for many times as the first batch of AAA-level scenic spots in the country of "Longshan Culture" site, and it is an important scenic spot on the tourist route of Shuihu. Everyone knows that Wusong kills tigers, but not everyone has been to Jingyanggang Scenic Area, with a total area of 33.3 hectares. In the scenic area, sand dunes are undulating, weeds are overgrown, and trees cover the sky. Main attractions: Mountain Temple with a history of more than 200 years, the "Jingyanggang" stone tablet inscribed by Shu Tong, secretary of Shandong Provincial Party Committee, and the 3-meter-high "Tiger" stone tablet inscribed by famous calligrapher Yang Xuanting. The stone tablet of "Fighting Tigers in Song Dynasty" established in the Southern Song Dynasty; Song Wu Temple written by Zhao Puchu; A pavilion with six corners and one eaves inscribed by Mrs. Xu Beihong and calligrapher Liao; The relief stone statue of "Fighting Tigers in Song Dynasty" created by the famous painter Liu Jiyou; It is said that it is the incarnation of the tiger killed by Song Wu-the stone of "the first tiger in the world", and three bowls can't pass the gang hotel. ...

& lt/p & gt；

& lt/marquee & gt；

The picture at the top of the page is Liaocheng. jpg。 Set flash animation to cross the starry sky. Swf and fireworks bloom. The swf code is as follows:

& lttr & gt

& ltTD height = " 186 " colspan = " 3 " valign = " top " >& ltImg src= "../image/liaocheng.jpg " width = " 10 16 " height = " 224 "/> & lt； /TD & gt；

& lt/tr & gt；

Flash file code:

& ltdiv id="apDiv 1 " >

& ltscript type = " text/JavaScript " & gt；

Ac _ fl _ runcontent ('codebase '，'/pub/shock wave/cabs/flash/SW flash . cab # version = 9，0，28，0 '，' width '，' 99 1 '，' height '，' 2 17 '。 Quality',' high',' pluginspage','/shockwave/download/download.cgi? P1_ prod _ version = shockwave flash',' wmode',' transparent',' movie',' .../flash across the starry sky'); //End communication code

& lt/script & gt； & ltnoscript & gt& ltobject classid = " clsid:d 27 CDB 6 e-AE6D- 1 1cf-96b 8-444553540000 " code base = "/pub/shock wave/cabs/flash/ SW flash . cab # version = 9，0，28，0 " width = " 99 1 " height = " 2 17 " >；

& lt param name = "movie" value = "../flash/across the starry sky.swf swf swf "/& gt；;

& ltparam name = " quality " value = " high "/& gt；

& ltparam name = " wmode " value = " transparent "/& gt；

& lt Embedded src = "../ Flash across/across the starry sky. swf " width = " 99 1 " height = " 2 17 " quality = " high " plugin = "/shock wave/download/download . CGI？ p 1 _ Prod _ Version = shock wave flash " type = " application/x-shock wave-flash " wmode = " transparent " & gt； & lt/embed & gt；

& lt/object & gt；

& lt/noscript & gt；

& lt/div & gt；

& ltdiv id="apDiv2 " >

& ltscript type = " text/JavaScript " & gt；

Ac _ fl _ runcontent ('codebase '，'/pub/shock wave/cabs/flash/SW flash . cab # version = 9，0，28，0 '，' width '，' 390 '，' height '，' 2 1 1 '。 Quality',' high',' pluginspage','/shockwave/download/download.cgi? P1_ prod _ version = shockwave flash',' wmode',' transparent',' movie',' .../flash/fireworks bloom'); //End communication code

& lt/script & gt； & ltnoscript & gt& ltobject classid = " clsid:d 27 CDB 6 e-AE6D- 1 1cf-96b 8-444553540000 " code base = "/pub/shock wave/cabs/flash/ SW flash . cab # version = 9，0，28，0 " width = " 390 " height = " 2 1 1 " >

& ltParam name = "movie" value = "../flash/fireworks . swf swf "/& gt；

& ltparam name = " quality " value = " high "/& gt；

& ltparam name = " wmode " value = " transparent "/& gt；

< embedded src = "../ flash/fireworks. swf " width = " 390 " height = " 2 1 1 " quality = " high " plugin = "/shock wave/download/download . CGI？ p 1 _ Prod _ Version = shock wave flash " type = " application/x-shock wave-flash " wmode = " transparent " & gt； & lt/embed & gt；

& lt/object & gt；

& lt/noscript & gt；

& lt/div & gt；

The effect after completion is as follows

3-3

(3) The website design of Phoenix Garden (fhy)

The homepage of Phoenix Garden is designed to highlight the characteristics of Phoenix Garden. The outstanding products of Phoenix Garden are used to reflect the science and technology of Phoenix Garden (cactus, Japanese fig, etc ...). flash is the head, which means 5.swf, butterflies are flying. Sovereign wealth fund. A picture made of flash is inserted into this webpage, which realizes the right-to-left scrolling of the picture, and makes use of the text scrolling method and code used in the above webpage.

(& ltdiv id="apDiv7 " >

& ltTD width = " 2 13 " height = " 363 " bgcolor = " # FFFFFF " >。 & ltmarquee direction = " left " width = " 1020 " height = " 150 " scrollamount = " 10 " scroll delay = " 1 " onmouseover = " stop()" onmouseout = " start()" & gt；

& ltp>& ltspan class="STYLE29 "> Liaocheng Fenghuang Garden Agricultural Science and Technology Park has introduced more than 20 varieties of famous and rare fruit trees 100 at home and abroad, and cultivated more than 6 million seedlings in greening and national paper industry, which has met the needs of agricultural planting structure adjustment and rural efficient economic development in this city and its surrounding areas.

The main varieties are as follows:

(1) King Xiantao, Japan: This kind of peach has the following remarkable characteristics: extra large, with an average fruit weight of 500 grams, and the maximum can reach 1350 grams; Excellent quality, full red appearance, crisp meat, sweet and refreshing, and the sugar content can reach 23%; Extremely resistant to storage and transportation, it can be stored for 20 days at room temperature and 3 to 4 months at constant temperature. It's really a good treat for Mid-Autumn Festival and New Year's Day. The fruiting period on the tree is long, from late August to late September, and it can be listed one after another, which is incomparable to any other peach variety.

(2) South Korea's famous early-maturing peach: in Phoenix Park, it ripens at the end of June, full red, bright and beautiful, with a single fruit weighing 300 grams, crisp and juicy, and extremely high yield. Compared with other early-maturing peaches, it has excellent flavor and promising market development prospects.

(3) Korean famous peach: it is a late-maturing main variety in Korea, planted by Korean farmers and matured in late September, with an average fruit weight of 350 grams, rich fragrance, extremely sweet juice, semi-solute, storage and transportation resistance and bright red appearance.

(4) American almonds: 86- 1, 86-2 and 86-9 are several excellent strains selected from American almonds, and the kernel-bearing rates of 86- 1 and 86-4 are all above 45%, and 86-9 is the best variety for pollination. American almond, also known as American almond, has the characteristics of drought resistance, barren resistance, strong adaptability and extensive management. Generally, it bears fruit three years after planting and produces large-scale output in five years. In the high-yield period, the yield of almonds per mu is 500 kg, and the current domestic market price is 56 yuan/kg, which has considerable benefits. American almond is an ideal tree species for wasteland and surrounding development, and it is also an ideal tree species for farmers to get rich.

(5) June Sydney: It is the earliest pear variety developed in China. 20 days earlier than emerald, the average fruit weight is 1.80g, and the meat is white, stone-free, crisp, sweet and juicy. Through the observation of high grafting in our garden, this variety has high fruit setting rate and high yield, and is resistant to scab.

(6) Virus-free strawberry series: Virus-free strawberry series introduced by Phoenix Garden from the National Fruit Research Institute: Meixiangsha introduced from the Netherlands is the ace strawberry variety that monopolizes the early spring market in Europe and America, with extremely early maturity, hard fruit and good flavor. The flesh is red, and the maximum single fruit weight can reach 1 18g. It is rich in fragrance, suitable for semi-facilitated cultivation and ground cultivation, and will be an ideal variety for efficient agricultural development. Other strawberry varieties, such as Ghost Nugan, Jiuxin Sugar, New Hani, All-Star, etc. 18.& lt/span>。 & ltbr/>；

& lt/p & gt；

& lt/marquee & gt；

& lt/div & gt； )

Change the scrolling direction of letters to the left to realize scrolling different from the previous page, and the setting of header flash is the same as that of the previous page.

The completed renderings are as follows.

(4) Guangyue Building (gyl) and dongchang lake (dch) are designed by the same design.

A summary of verb (verb's abbreviation) design technology

In order to make our website more practical and rich in content, we use many technologies in the website, including image processing and animation such as flash photoshop, and make various special effects such as layer application and timeline application by using the relevant knowledge in dreamweaver.

5. 1 I spent a lot of time on material collection and processing, dealing with website animation, real photo collection and personal information. For example, PHOTOSHOP is used to process photos as a whole. Rolling animation is made with flash.

5.2 text scrolling effect, the code is as follows:

& ltTD width = " 2 13 " height = " 363 " bgcolor = " # FFFFFF " >。 & ltmarquee direction = " up " width = " 179 " height = " 150 " scrollamount = " 1 " scroll delay = " 1 " onmouseover = " stop()" onmouseout = " start()" & gt；

& ltp> content

& lt/p & gt；

& lt/marquee & gt；

Sixth, internship experience

This website mainly uses the knowledge learned this semester to lay out applications and make animation effects. Through this website design, I used what I learned this semester, not only reviewed some knowledge I learned this semester, but also deepened the content of what I learned. This webpage making made me learn a lot about how to collect information, how to use the fastest way to collect information, how to collect effective information, how to organize information, how to make the downloaded information easy to find, and how to make a webpage. In the process of making the website, I also encountered many unknowns and solved many problems with the help of teachers and classmates. I slowly completed the website construction through step-by-step learning. Although the webpage I made this time is not very beautiful, there are still some shortcomings, such as the production of dynamic pages, the use of scripts, the use of some effects and so on. And the layout of the web page is not perfect, but it took me a lot of time to complete, so it is of great significance to my future web page. I also learned a lot in the process of making this webpage, so from the bottom of my heart, I am very satisfied with my experience, and I also want to thank my teacher for arranging this internship week. Why? Because in the process of making, I not only learned something that is not in the book, but also cultivated my ability of independent thinking, and at the same time enhanced the friendship of unity and mutual assistance among my classmates. Therefore, no matter from which angle, the task assigned by the teacher this time is the only opportunity for me to put my knowledge into practice since I went to college. Thanks again. In->, this design is constantly "finding problems->; Solve the problem->; Rediscover the problem-> then solve the problem-> This learning process is completed. I will continue to work hard in the future.