동적 웹 디자인 보고서를 급히 찾고 있습니다. 긴급한! ! ! ! ! ! ! ! ! 형제 자매 여러분, 저를 도와주세요. 이메일 904013391@qq.com

"웹사이트 디자인 및 웹페이지 제작" 디자인 지침

과정명: 웹 디자인

디자인 제목: 나의 고향

학과: 건축 정보 공학과

전문 수업: 컴퓨터 0901

학생 이름:

학생 번호: 200913190

강사: Xu Meixia

시작 및 종료일 : 2010년 12월 20일 ~ 2010년 12월 24일

1페이지*** 13페이지

나의 고향 웹페이지 제작 과정

1. 웹사이트 개발의 목적과 기능 소개

네트워크 기술의 발달과 인터넷의 대중화로 인해 웹사이트 구축과 웹페이지 제작은 사회 전반에 걸쳐 점점 더 중요해지고 있습니다. 오늘날에는 웹사이트를 홍보하기 위해 점점 더 많은 사람들이 웹사이트를 사용하고 있습니다. 웹사이트 제작을 통해 교사, 급우, 친구들은 자신과 다른 사람들이 알고 싶어하는 것을 더 잘 이해할 수 있습니다. 내 고향은 다른 사람들이 자신을 더 깊이 이해할 수 있는 플랫폼을 제공합니다. 이 웹사이트의 주요 기능은 나와 내 고향에 대해 더 많은 사람들에게 알리는 것입니다.

웹사이트 디자인

2.1 사이트명 : 나의 고향

2.2 사이트 컬럼 구분

본 사이트는 내용과 기능에 따라 내 마음이 담긴 글, 네비게이션 링크, 다양한 장소에 대한 소개, 고향을 반영한 사진, 저작권 표시 등

(1) 내 마음 - 우리 기숙사에 대한 6가지 소개, 우리 고향을 반영하여 웹사이트의 주제와 비교하도록 유도 (2) 내비게이션 링크 - 각자가 설정한 웹페이지에 대한 링크; (3) 각 장소에 대한 소개 - 각자의 고향에 대한 간략한 소개와 고향의 지식과 문화에 대한 이해 (4) 사진 - 각 장소의 대표적인 사진 목록, 다른 방식으로 보여주기 (5) 저작권 선언 - 웹사이트 제작자 선언

자세한 내용은 그림에 표시되어 있습니다.

2.3 웹사이트 탐색은 모든 페이지에 적용되어 웹사이트의 운영 편의성을 향상시켜야 합니다. 웹사이트.

2.4 웹사이트 스타일 및 색상 선택: 페이지는 주로 밝은 녹색과 밝은 노란색입니다. 연한 녹색은 활력을 반영하고, 실용적인 연한 갈색과 은은한 회색의 글꼴은 명확하고 안정적인 느낌을 줍니다. 모든 페이지는 동일한 색상 톤과 유사한 레이아웃을 갖습니다.

2.5 웹사이트 디렉토리 구조는 합리적으로 설계되었습니다. 다양한 자료는 다양한 폴더에 별도로 저장됩니다. 예를 들어, 이미지

폴더에는 사진이 들어가고, flash 폴더에는 플래시가 들어가고, 자신의 이름을 딴 폴더에 완성된 숙제가 들어가는 식이다.

3. 요청 홈페이지 제작 과정

3.1 홈페이지 레이아웃:

홈 페이지, 탐색 링크, 콘텐츠, 웹 링크

3-1

전체 페이지는 4개로 나뉩니다. 첫 번째 부분은 플래시 파일을 사용하여 동적 사진을 표시하며, 주로 웹사이트의 하이라이트는 탐색 표시줄입니다. 세 번째 부분은 세부 내용입니다. 웹 페이지는 사람들에게 편안한 느낌을 주기 위해 깔끔하고 간결하게 구성되었습니다. 웹 페이지의 적절한 위치에 사진을 추가하고 각 사진에 대해 다른 텍스트 설명을 추가하여 웹 페이지를 더욱 아름답게 만드세요. 네 번째 부분은 각 웹 페이지에 대한 링크입니다. 이 레이아웃을 사용하는 주요 목적은 시청자에게 단순하고 명확하며 명확한 느낌을 주고 웹사이트를 통일되게 만드는 것입니다.

구체적인 레이아웃은 다음과 같습니다:

3-2

3.2 제작 과정:: 이 웹페이지의 제작은 세 부분으로 나뉩니다: 상단 부분은 플래시로 제작되었습니다. 페이지 헤더가 생성되었습니다. 가운데 부분은 왼쪽과 오른쪽 두 부분으로 나누어져 있습니다. 왼쪽은 간단한 소개와 내 고향에 대한 링크입니다. 생성된 역동적인 그림은 타임라인을 사용하여 그림을 자동으로 재생하며, 위에서 아래로 슬라이드한 그림은 자동으로 재생됩니다. 오른쪽은 내 고향의 다양한 명승지에 대한 통찰력입니다. 웹 페이지의 배경 이미지도 설정하고 마지막에 spry 탭에서 추가한 이미지를 사용했습니다.

4. 요성 홈페이지 제작 과정

4.1 새 페이지를 만들고 이름을 요성 홈페이지(색인)로 지정합니다.

4.2 모양에서 네 면 여백을 설정합니다. 페이지 속성이 0이면 텍스트 색상이 #9900CC로 설정되고, 링크의 밑줄 스타일이 18픽셀로 설정됩니다. 링크 색상은 #0000FF로 설정됩니다.

4.3 (1) 홈페이지(인덱스) 제작

스타일을 이용하여 각 파트의 높이와 너비를 정의하고, ./image/195911NM-10.gif를 배경으로 설정합니다. 영상.

헤더 이미지는 Water City Pearl.jpg 이며, 왼쪽과 오른쪽의 플래시 애니메이션을 주황색으로 설정합니다. swf 코드는 다음과 같습니다.

헤더 이미지의 디자인 코드: (위 그림 3-2) )

lt; div id="Layer3" style="왼쪽: 30px; 위쪽: 34px; 너비: 186px; 높이: 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;

플래시 애니메이션 설정 코드는 다음과 같습니다.

lt;

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

AC_FL_RunContent('codebase','/pub/shockwave/cabs/flash/swflash.cab#version=7, 0, 19, 0', '너비', '957', '높이', '210', 'src', '../FLASH/왼쪽-오른쪽-주황색', '품질', '높음', '플러그인 페이지', '/ go/getflashplayer', 'wmode', 'transparent', 'movie', '../FLASH/left and right orange' ) //AC 코드 종료

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/왼쪽 및 오른쪽 orange.swf " /gt;

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

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

lt; src="../FLASH /왼쪽 및 오른쪽 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) 페이지 디자인

이 웹페이지 일부 코드는 텍스트 스크롤 코드를 구현하는 데 사용됩니다. lt; td width="213" height="363" bgcolor="#FFFFFF"gt; 310" height="620" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()"gt;

lt;pgt;lt;span class= " STYLE21"gt; 정양강은 양구시에서 동쪽으로 18km 떨어진 곳에 위치해 있다. 사강 꼭대기 중앙에는 민족식 사찰이 있는데 통칭 '오송사'라 한다. 기존의 고대 사원은 1958년에 지어졌습니다. 사원 앞에는 중국의 유명한 서예가인 서통(Shu Tong)이 쓴 "정양강(Jingyang Gang)"이라는 세 글자가 새겨진 석판이 있습니다. 사원에서 동쪽으로 200~300m 떨어진 곳에 '우송(吳松)'이라는 글자가 적힌 비석이 있는데, 1973년부터 지방 고고학팀의 수차례 시험 발굴 끝에 호랑이를 죽인 곳입니다. Water Margin 관광 라인의 중요한 명승지 인 "용산 문화"유적과 Wu Song의 호랑이 사냥이 전국 최초의 AAA 급 명승지로 확인되었습니다. 오송이 호랑이와 싸웠던 곳. 정양강 풍경구의 총 면적은 33.3헥타르입니다.

풍경구에는 기복이 심한 사구, 무성한 풀, 태양을 차단하는 나무가 있습니다. 주요 명소: 200년 이상의 역사를 지닌 산신사(Shanshen Temple) 왼쪽 앞에는 " 중국 공산당 전 산동성 당위원회 서기 서통(Shu Tong)이 쓴 '정양강(Jingyanggang)' 석비, 오른쪽 전면에는 유명 서예가가 쓴 '호랑이' 글자가 새겨진 높이 3m의 비석이 있습니다. Yang Xuanting, 남송 왕조에 세워진 "Wus Song Killed Tigers"라는 글자가 새겨진 석비, Zhao Puchu가 쓴 "Wusong Temple"의 문패 Liao Jingwen이 새겨 져 있습니다. 유명한 화가 Liu Jiyao가 만든 "호랑이와 싸우는 우송"의 부조 석상, 우송이 죽인 호랑이의 화신이라고 알려진 "세계 1호 호랑이" 돌은 오직에서만 사용할 수 있습니다. 쓰리 보울스 호텔 갱...lt;/spangt;lt;br /gt;

lt;/pgt;

lt;/marqueegt;

헤더 사진은 Liaocheng.jpg입니다. 별이 빛나는 하늘을 통과하도록 플래시 애니메이션을 설정합니다.swf, 불꽃놀이 Bloom.swf 코드는 다음과 같습니다:

lt;

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

lt;/trgt ;

플래시 파일 코드:

lt;div id="apDiv1"gt;

lt;스크립트 유형 ="text/javascript"gt;

lt; p>

AC_FL_RunContent('codebase','/pub/shockwave/cabs/flash/swflash.cab#version=9, 0, 28, 0', '너비', '991', '높이', '217', 'src', '../FLASH/Across the Stars', '품질', '높음', 'pluginspage', '/shockwave/ download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode', 'transparent' ,'movie','../FLASH/Across the Stars' ) //AC 코드 종료

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/별이 빛나는 하늘 건너기.swf" /gt;

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

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

lt; embed src="../FLASH/별이 빛나는 하늘 건너기.swf" width="991" height= "217" quality="high"pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type=" 응용프로그램/x-충격파-플래시"

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', '너비', '390', '높이', '211', 'src', '../FLASH/불꽃놀이', '품질', ' high', 'pluginspage', '/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode', 'transparent', 'movie', '../FLASH/Fireworks Bloom' ) //AC 코드 종료

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; /p>

lt; src="../FLASH/Fireworks Bloom.swf" width="390" height="211" quality="high" 플러그인 페이지="/shockwave/ download/download.cgi?P1_Prod_Version 포함 =ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"gt;lt;/embedgt;

lt;/objectgt;

lt;/noscriptgt;

lt;/divgt;

완성된 효과는 다음과 같습니다

3-3

(3) Phoenix Garden(fhy) 웹 디자인

휘닉스 가든의 특징을 부각시키기 위해 피닉스 가든의 웹 디자인은 피닉스 가든의 기술을 반영하기 위해 피닉스 가든의 보다 눈에 띄는 제품(선인장, 일본 무화과 등...)을 사용합니다. 사용된 플래시는 Left and Right 5.swf와 Butterfly Feifei.swf입니다. 이 웹페이지는 플래시로 만든 그림을 삽입하여 그림이 오른쪽에서 왼쪽으로 스크롤되는 방식을 사용하며, 사용된 코드는

（lt;div id="apDiv7"gt;

lt;td width="213" height="363" bgcolor="#FFFFFF"gt;lt ;천막 방향=" l

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

lt;pgt;lt ;span class="STYLE29"gt; 요청 봉황원 농업과학기술원은 국내외 유명 희귀 과수 품종 100여 종, 녹화 및 국가 제지 산업에 사용되는 포플러 품종 20여 종을 도입했으며, 이 도시와 주변 지역의 농업 재배 구조를 조정하고 효율적인 농촌 경제를 발전시키는 데 필요한 묘목 600만 그루.

주요 품종은 다음과 같습니다.

(1) 일본요정복숭아왕: 복숭아 품종의 특징은 다음과 같습니다: 특대형, 평균 과일 무게가 500g, 최대 1,350g에 달하며, 외관이 모두 빨갛고, 과육이 바삭바삭하고, 달콤하고 상큼합니다. 당도는 최대 23%로 보관 및 운송에 매우 강하며 상온에서 보관이 가능합니다. 20일 보관이 가능하며 항온 창고에서는 3~4개월 보관이 가능합니다. 중추절과 설날을 위한 간식입니다. 열매를 맺는 기간은 8월 하순부터 9월 하순까지로, 점차 시장에 출시될 수 있습니다. 이는 다른 복숭아 품종과 비교할 수 없습니다. /p>

(2) 한국의 유명한 조숙성 복숭아: 봉황원구에서 6월 하순에 성숙하며 완전히 붉고 밝고 아름다우며, 열매 하나의 무게가 300그램에 달한다. 아삭아삭한 과육, 풍부한 단맛, 과즙이 풍부한 식감, 수확량이 매우 높고, 다른 조숙 복숭아에 비해 향이 뛰어나며, 시장 개척 가능성이 높습니다.

(3) 한국의 유명한 복숭아: 한국 농민이 재배하고, 9월 하순에 익으며, 평균 과실 중량은 350g으로 향이 강하고 과즙이 풍부하며 단맛이 매우 강하며, 반용성이며 저장 및 운송에 강하고 밝은 붉은색을 띠는 것이 주입니다.

(4) 미국산 아몬드: 86-1, 86-2, 86. -9는 미국산 아몬드에서 자란 몇 가지 우수한 계통 중 하나입니다. 커널 수확량은 86-1입니다. 86-4는 모두 45% 이상이며, 86-9는 수분율이 가장 좋은 품종입니다. 미국산 아몬드는 가뭄 저항성, 불임 저항성, 강한 적응성, 광범위한 관리에 대한 내성이 특징입니다. 파종 후 3년 만에 열매를 맺고 5년 만에 대량생산을 달성한다. 고수확기의 대형 아몬드 생산량은 뮤당 500킬로그램이고 국내 시장 가격은 56위안/킬로그램이다. 미국산 아몬드는 황량한 지역에서 개발하고 농부들이 부자가 되는 데 이상적인 수종입니다.

(5) 준설배(June Snow Pear): 우리나라에서 가장 먼저 개발된 배 품종입니다. 평균 과일 중량은 180g으로, 과육이 고운 흰색이고, 돌세포가 없으며, 아삭아삭하고 달콤하며 과즙이 풍부합니다.

(6) 바이러스 없는 딸기 시리즈: 피닉스 가든은 국립과수연구소에서 도입한 바이러스 없는 딸기 시리즈인 네덜란드에서 도입한 비장의 딸기입니다. 오늘날 유럽과 미국의 초봄 시장을 독점하고 있는 품종입니다. 매우 일찍 익고, 과일이 단단하고, 맛이 좋으며, 단일 과일 중량이 가장 크고, 향이 풍부하고, 식용에 적합합니다. 반재배 및 바닥재배로 효율적인 농업 발전을 위한 이상적인 품종이 될 것입니다. 귀누간(Gui Nu Gan), 지우신탕(Jiu Xin Tang), 신하니(Xin Hani), 올스타(All Star) 등 18가지 다른 딸기 품종이 있습니다. lt;/spangt;lt;br /gt;

lt;/pgt;

lt;/marqueegt;

lt;/divgt;) p>

문자의 스크롤 방향을 왼쪽으로 변경하여 이전 웹페이지와 다른 스크롤을 구현합니다. 헤더 플래시 설정은 이전 웹페이지와 동일합니다.

완성된 렌더링은 다음과 같습니다

(4) 광웨 타워(gyl)와 동창호(dch)가 동일한 디자인으로 완성되었습니다.

5. 디자인 기술 요약

저희 웹사이트는 보다 실용적이고 콘텐츠가 풍부하기 위해 플래시 포토샵, 기타 이미지 처리 등 웹사이트에 많은 기술을 사용합니다. 애니메이션, 드림위버 관련 지식을 활용하여 레이어 적용, 타임라인 적용 등 다양한 특수효과를 제작합니다.

5.1 자료 수집 및 처리 과정에서 웹사이트 애니메이션, 실사 사진 수집, 개인정보 처리에 많은 시간을 할애했습니다. 예를 들어, 사진을 전체적으로 처리하려면 PHOTOSHOP을 사용하세요.

스크롤 애니메이션은 플래시를 사용하여 제작되었습니다.

5.2 텍스트 스크롤 효과, 코드는 다음과 같습니다:

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

lt;pgt ;contentlt ;br /gt;

lt;/pgt;

lt;/marqueegt;

6. 인턴십 경험

웹사이트 이번 학기에 배운 지식을 주로 응용 프로그램 레이아웃과 애니메이션 효과 제작에 사용합니다. 이번 학기에 배운 지식은 이번 학기에 배운 내용을 복습할 뿐만 아니라 용어적으로도 심화됩니다. 지식컨텐츠를 통해 이번 웹페이지 제작을 통해 정보수집 방법, 정보를 가장 빠르게 수집하는 방법, 효과적인 정보 수집 방법, 정보 정리 방법, 다운로드한 정보를 쉽게 찾을 수 있는 방법 등 많은 것을 배웠습니다. 웹 페이지를 만드는 방법, 웹 페이지에 특수 효과를 사용하는 방법, 웹 페이지의 주제를 강조할 수 있는 특수 효과에는 어떤 것이 있는지 배웠습니다. 웹사이트를 만드는 과정에서 저도 이해하지 못한 부분이 많았고, 선생님과 친구들의 도움으로 많은 문제를 해결하면서 단계별 학습을 통해 천천히 이 웹사이트 구축을 완료했습니다. 이번에 만든 웹페이지는 보기에도 좋지 않고, 동적 페이지 제작, 스크립트 사용, 일부 효과 사용 등의 단점도 있습니다. 동시에 유연성도 부족합니다. 웹페이지의 레이아웃이 아주 완벽하지는 않지만 완성하는데 많은 시간을 투자했기 때문에 앞으로 웹페이지를 만들 때 큰 도움이 될 것입니다. 저도 웹페이지를 만드는 과정에서 많은 것을 배웠기 때문에 제 경험에 매우 만족합니다. 동시에 이런 인턴쉽 주간을 마련해 주신 선생님께도 감사드리고 싶습니다. 왜냐하면 제작 과정에서 책에 없는 것들을 배울 수 있었을 뿐만 아니라, 독립적으로 사고하는 능력도 키웠고, 동시에 학우들 간의 연대와 상호 도움의 우정도 강화되었기 때문입니다. 그러므로 어떤 관점에서 보아도 이번에 선생님께서 맡기신 과제는 제가 대학에 입학한 이후로 지식을 실천에 옮기는 유일한 시간입니다. 선생님, 다시 한 번 감사드립니다. 즉, "문제 찾기 - gt; 문제 해결 - gt; 문제 다시 발견 - gt; 다시 문제 해결 - gt;"라는 지속적인 학습 과정을 거쳐 이 디자인이 완성된 것이다. 앞으로도 목표 달성을 위해 열심히 노력하겠습니다.