网页制作课程设计

网页制作课程设计学号：姓名：日期：1、实验目的：通过本次试验回顾网页开发环境尤其是Dreamweaver，以及本学期学到的技能和技巧，并能够熟练运用。2、实验环境：WindowsXP、Dreamweaver3、实验内容：综合所学知识使用Dreamweaver制作自己的网页。4、实验过程：我的网站是为18到30岁爱美的女性来设计，因而整个网站为粉色系，其中包括了衣服，包包，鞋子，配饰等相关产品。一、网页结构二、实现步骤（1）打开Dreamweaver，选择菜单栏中的“站点”|“新建站点”命令，出现“站点”，如下图：(2)创建首部网页---head.html预览效果如下图：a.首先用PS制作logo图标，设置css样式，然后利用css+div布局。本网页的色系同一为#f992e2。Logo图片插入div中，如divclass=wrapperahref=class=logoimgsrc=images/logo.jpg//a/div。b.在“衣服”选择按钮上设置超链接，连接到“衣服”页面——list.html，aclass=btnbtn-infobtn-mlhref=list.htmltarget=_parent衣服/a，在其它按钮上也设有超链接。c.设置注册与登录链接——login.html，spanstyle=display:blockahref=#class=btnbtn-primarybtn-lg注册/aahref=login.htmltarget=_parentclass=btnbtn-primarybtn-lgdata-toggle=modaldata-target=#myModal登录/a/span(3)创建登录页面---login.html(1)在登录页面的左上方插入聚美优品logo图标，在姓名与密码后插入表单，再设置两个按钮。inputtype=submitname=subid=sendvalue=提交inputtype=resetname=resid=resetvalue=重置/div/form（4）创建尾部网页---foot.html预览效果如下图：在尾部设置友情链接，方便浏览其它友情网站。divclass=tab-contentdivclass=frend-listahref==_parent百度/a/div/divdivclass=tab-paneid=profiledivclass=frend-listahref==_parent淘宝/a/div/div（5）创建首页---index.html预览效果如下图：a.首先加入head.html文件，iframename=toppagewidth=100%height=30%scrolling=nomarginwidth=0imarginheight=-70src=head.html/iframeb.在网页的左侧设置一个导航栏，显示物品的分类，分别加入链接，鼠标经过时字体颜色边为红色。c.在网页上边的中间利用javaScript设置动态图，每隔1秒变换图片，吸引眼球。右侧设置图片链接栏。divclass=main-sliderdivclass=flexsliderdivid=carousel-example-genericclass=carouselslidedivclass=carousel-innerdivclass=leftboxdivclass=view-hoverdivid=pwSlidePlayerclass=pwSlidecconMouseOver=pwSlidePlayer('pause');onMouseOut=pwSlidePlayer('goon');divid=Switch_0ahref=#target=_blankimgsrc=img/A.jpg//a/divdivid=Switch_0style=display:none;ahref=#target=_blankimgsrc=img/B.jpg//a/divdivid=Switch_0style=display:none;ahref=#target=_blankimgsrc=img/C.jpg//a/divdivid=Switch_0style=display:none;ahref=#target=_blankimgsrc=img/D.jpg//a/divdivclass=pwSlide-bg/divulid=SwitchNav/ul/divscript~function(){varTimer=null;varCurScreen=MaxScreen=1;varpics=document.getElementById('pwSlidePlayer').getElementsByTagName(DIV);pics[0].style.display=;varMaxScreen=pics.length-1;window.pwSlidePlayer=function(action,index){clearTimeout(Timer);switch(action){case'pause':clearTimeout(Timer);break;case'goon':clearTimeout(Timer);Timer=setTimeout('pwSlidePlayer();',3000);break;case'play':CurScreen=index-1;default:if(CurScreen=MaxScreen)CurScreen=0;for(i=0;iMaxScreen;i++){pics[i].style.display=none;}if(pics[CurScreen]){pics[CurScreen].style.display=block;}varNavStr=;for(i=1;i=MaxScreen;i++){if(i==CurScreen+1){NavStr+='liahref=javascript:;target=_selfclass=sel'+i+'/a/li';}else{NavStr+='lionclick=pwSlidePlayer(\'play\','+i+');ahref=javascript:;target=_self'+i+'/a/li';}}document.getElementById(SwitchNav).innerHTML=NavStr;if(MaxScreen1){CurScreen++;Timer=setTimeout('pwSlidePlayer();',2000);}}}}();/scriptscriptpwSlidePlayer('play',1);/script/div/div/divd.在网页的中间设置快速浏览栏，利用div分栏，分为“限时优惠”与”新款展示“。e.在网页中间的右侧，设有搜索栏，可以搜索品牌、款型、筛选，然后提交信息。这部分利用了表单，divclass=form-grouplabelclass=sou-zi类型/labelselectclass=form-controlinput-smname=series_namevolistname=seriesid=voptionvalue=皮尔卡丹/option/volist/select/div（6）创建衣服页面---list.html预览效果如下图：a.首先加入head.html文件，iframename=toppagewidth=100%height=30%scrolling=nomarginwidth=0imarginheight=-70src=head.html/iframeb.利用css+div编写本网页。（7）创建货品网页当点击商品时，跳转到相应的商品挑选购买页面，如下图点击商品跳转到atarget=_blankhref=goods.html独家定制秋冬女装新品毛绒套装/a5、实验总结：网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常重要。生活中我每天上网都要接触到网页，原来没有留意过网页的设计，但是经过这段时间的学习了解，现在我打开一个网页都会习惯性的先看看排版、布局和色彩运用。通过老师的讲解和对课本的翻阅，我学习到了一些关于建设网站和制作网页的知识，对网页制作的基础知识也有了一定的掌握。通过Dreamweaver制作网页，我用到了一些基本的功能：图片插入和对齐设置；文字的格式、颜色、背景颜色的设置等。但是在自己尝试着做的时候，总是出现这里那里的问题。不是图片不能固定在自己想要的位置，就是滚动文本的显示区域不知道为什么撑过了页面，还有就是不同分辨率、不同浏览器都会对浏览网页产生影响。而且在CSS方面，我总是不太熟悉各种代码是控制哪些东西的。除了查找解决问题我还总结了经验。在这个过程中，我同样认识到网页设计不是一门学科的独秀，而是多种课程的综合，它是Flash、Photoshop等网页软件的综合应用。通过这次综合性实验更是让我了解了自己在网页制作方面还有哪些不足，在以后的运用和实践中我更应该努力学习，弥补自己的不足，完善自己的认识和能力。