当前位置:首页>> >>


_摄图网网页设计.rar

收藏

资源目录
    文档预览:
    编号:20181030004040327    类型:共享资源    大小:3.12MB    格式:RAR    上传时间:2018-10-30
    尺寸:148x200像素    分辨率:72dpi   颜色:RGB    工具:   
    18
    金币
    关 键 词:
    摄图网 网页 设计
    资源描述:
    《Web 基础实训》课程设计报告摄图网网页设计姓 名:李文嫣班 级:1704学 号:2115170058完成时间:2018.7.12淮阴师范学院计算机与信息科学学院2018-7-121 总体设计1.1 功能模块设计系统从功能模块的角度上划分为以下几个功能模块:用户登录功能、首页功能、作品展示功能、购物篮功能四大部分,系统模块图1.1.1 网站材料网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图像资料,Flash 动画和网页特效等,用以得来更加具有说服力的页面。想要做好自己的网站,就要尽量搜集材料,搜集材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。图片网页浏览系统用户登录用户注册首页封面用户登录工具栏模块首页超链接添加商品删除商品购物篮模块1.1.3 课程设计步骤素材、风格、模版都设计好以后,下一步就是具体的制作网页。制作网站时,首先要做到站点的规划,建立一个本地站点“我的梦幻网” ,建立的各个页面都应该放在本地站点中,在网页制作时所需的各个元素都进行统一的管理,建立统一的文件夹放同一类型的文件,我在制作时建立了“images”文件夹存放图片专用的,网页中的 CSS 样式文件也统一管理,做到有条理。以下是各个模块具体实现功能介绍:1.用户登录功能(1)注册用户信息:包括添加用户的用户名,登录密码,性别,联系方式,地址等信息。(2)用户登录信息:用户根据自身账号登录网页2.首页功能(1)首页工具栏包括有用户登录、网站最新动态、作品展示、个人中心等,设置有多个超链接,主要功能一应俱全,方便用户浏览。(2)首页包括了网站名称、图标,展示网站的主风格3.图片展示功能(1)图片信息:图片展示栏包含网站的所有图片,并根据所有类型分类,便于用户寻找所求图片。(2)图片选择:用户在选择好想要的图片后,可直接点击添加至购物篮进行下载。4.购物车管理功能(1)添加图片信息:包括图片的名称,图片样式,总下载量,购买的总价等。(2)删除图片信息:包括图片的名称,图片样式,总下载量,购买的总价等。(3)通过购物蓝下单:包括图片的名称,图片样式,总下载量,购买的总价等。2 系统实现1.1 用户登录模块的实现本页面为用户提供登录功能,用户登录提交之后,可详细浏览网站,选择图片并下载。 1.1 用户登录界面,如图所示:代码如下:#container{ background-color:#555555; } #header{ width:100%; height:20px; background-color:#555555; margin:0px auto; } #header_topRight{ float:right; margin-right:300px; font-size:11px; } #header_topRight a:link{ text-decoration:none; color:white; } #header_topRight a:visited{ color:white; } #header_topLeft{ float:left; margin-left:300px; font-size:90px; } #header_topLeft a:link{ text-decoration:none; color:white; } #header_topLeft a:visited{ color:white; } #header_Center{ width:100%; height:100px; background-color:#555555; } #header_Center img{ margin-top:6px; margin-left:40px; } #list{ width:100%; height:45px; background-color:#808080; font-size:20px; font-weight: bold; color:white; } #list ul{ list-style:none; margin:0px; padding:10px; } #list ul li{ float:left; } #list a:link{ text-decoration:none; color:white; } #list a:visited{ color:white; } #list a:active{ color:white; } #first{ width:7%; height:45px; padding-left:28% } #second{ width:10%; height:45px; padding-left:5%; } #third{ width:12%; height:45px; padding-left:3%; } #last{ width:35%; height:45px; } #main{ width:100%; height:100%; background-color::#555555; } #main img{ margin-left:400px; margin-top:-10px; } #main_welcome{ clear:both; width:950px; height:85px; margin:0px auto; } #main_welcome img{ width:25%; margin-top:6px; margin-left:133px; } #main_chapter img{ margin-top:6px; margin-left:900px; } #main_form{ width:100%; margin:70px 0px 0px 850px; } #button { height:15%; margin-left:921px; margin-top:600px; } #footer{ height:50px; background-color:#555555; color:white; text-align:center; } function emm() { alert(“登录成功“) } 首页|登录 摄图网 首页 作品展示 登录 账号 密码 www.meitu.com/ 摄图网 1.2 首页模块:主要分成工具栏和封面两大部分,工具栏包含多个超链接网页。代码如下:摄图网#header{ width:100%; height:20px; background-color:#555555; margin:0px auto; } #header_topRight{ float:right; margin-right:300px; font-size:20px; } #header_topRight a:link{ text-decoration:none; color:white; } #header_topLeft{ float:left; margin-left:300px; font-size:60px; } #header_topLeft a:link{ text-decoration:none; color:white; } #header_topLeft a:visited{ color:white; }
    展开阅读全文
    1
      金牌文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    0条评论

    还可以输入200字符

    暂无评论,赶快抢占沙发吧。

    关于本文
    本文标题:_摄图网网页设计.rar
    链接地址:http://www.gold-doc.com/p-255500.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服客服 - 联系我们
    [email protected] 2014-2018 金牌文库网站版权所有
    经营许可证编号:浙ICP备15046084号-3
    收起
    展开