_饕餮之旅美食网站.rar

收藏

资源目录
    文档预览:
    编号:20181030004040366    类型:共享资源    大小:3.49MB    格式:RAR    上传时间:2018-10-30
    尺寸:148x200像素    分辨率:72dpi   颜色:RGB    工具:   
    18
    金币
    关 键 词:
    饕餮 旅美 网站
    资源描述:
    《Web 基础实训》课程设计报告“饕餮之旅”美食网站的设计与实现姓 名:张玄曼班 级:1704学 号:2115170081完成时间:2018.7.12淮阴师范学院计算机与信息科学学院2018-7-12一、 总体设计1.1 功能模块设计网页从功能模块的角度上划分为以下几个功能模块:“首页” 、 “产品展示” 、 “新闻动态” 、 “留言板” , “关于我们” 、 “联系我们”六大部分。由于时间有限,在本次实训中,只设计及实现其中四个功能页面:“首页” 、 “留言板” 、 “关于我们”和“联系我们” 。以下是该网页的功能模块图见下图(1):图(1) 网页功能模块图以下是各个网页具体实现功能介绍:1.首页(1)公司简介:对公司创办时间、公司规模、秉承宗旨、公司管理做了详细介绍;(2)美食菜单:通过图片展示的形式,对部分菜品进行分类展示。2.产品展示:图文并茂,给人以视觉盛宴之享受,垂涎欲滴之感受。3.导航:(1)联系我们:客服在线咨询,为网站访问者提供方便快捷的咨询服务;(2)工作时间;饕餮之旅美食网站首页产品展示新闻动态留言板关于我们联系我们公司简介美食菜单文章列表产品列表姓名电子邮件联系电话留言内容地图具体信息导航(3)联系方式;(4)新闻摘要:最近美食领域重要的新闻动态。4.新闻动态文章列表:列出近期在食品领域发生的大小事件,给予网站访问者对美食方面一定的了解,增加访问者对此美食网站的好感度。5.留言板(1)姓名;(2)电子邮件;(3)联系电话;(4)留言内容。5.关于我们:公司管理经营的详细介绍以及其创办宗旨。6.联系我们(1)地图:公司具体位置,通过地图形式标出来,使访问者及顾客能准确找到位置,给予顾客方便,亦提高了公司的行政效率;(2)具体信息:公司注册名称及其具体地址、电话、传真、邮箱。 二、 网页设计及实现1、基本框架网站名称:饕餮之旅美食网站运用语言:HTML、CSS图(2)分析页面的分块结构,形成 HTML 组织结构,实现框架如图(2):(Header 顶部:)饕餮之旅美食网站a{text-decoration:none;color:black;}a:hover{text-decoration:underline;color:red;}#header{height:110px;background:#FFFAF0;background-repeat:no-repeat;margin-top:50px;margin-bottom:0px;}#header_link{float:right;margin-top:50px;margin-right:100px;font-family:verdana;font-size:20;color:red;}#header_link a:link{text-decoration:none;color:red;}#header_link a:visited{color:red;}#header_link a:hover{background-color:#FF6347;color:white;}(main:主体部分:)#main{height:1000px;width:1306px;background-color:white;}#main_top{height:370px;width:954px;background-image:url(picture/舌尖上的终极美味.png);background-repeat:no-repeat;margin:0px auto;}#header img{margin-top:28px;margin-left:170px;margin-bottom:8px;}#main_title{width:500px;margin:0px auto;}#main ul{list-style:none;margin:0px;padding:0px;}#main ul li{float:left;}#liLeft{width:192px;height:32px;background-repeat:no-repeat;text-decoration:none;padding-left:173px;padding-top:5px;}#border{border:1px solid #B3B3B3;}#liRight{width:210px;height:32px;padding-left:10px;line-height:35px;}#main_form{width:100%;margin:15px 0px 0px 100px;}#main_form input{width:250px;}#footer{background-color:#5E5E5E;}#container{width:1306px;margin:0px auto;}其中图(2)中的脚网页设计如下,如图(2)(Footer 底部:)div{text-align:center; margin:0px auto;}#header{margin:0px auto;font-size:15px;}#safer{margin:0px auto;}a{TEXT-DECORATION:none}首页 ┆关于我们┆联系我们©2018 餐饮 AllRights Reserved 技术支持:凡卡科技 |手机版 |管理登录 2、网页具体细节设计及实现Header 顶部:A. 导航图(3)首页 ┆产品展示┆新闻动态┆留言板┆关于我们┆联系我们图(4)导航中超链接:未点击、访问后、鼠标悬浮时各种样式:#header_link{margin:0px auto;margin-top:50px;margin-right:0px;font-family:verdana;color:#444444;}#header_link a:link{color:#BBBBBB;}#header_link a:visited{color:black;}#header_link a:hover{background-color:#FF6347;color:white;}B. 插入图片图(5)Main 主体部分:A. 导航图(6) 图(7)(图(6):)新闻动态 百胜称中国肯德基销售持平······2013-12-12 ............................................市民质疑牛奶跟风涨价······2013-12-12............................................南京民国清真老店······2013-12-12(图(7):)产品分类 中餐 _______________________西餐 _______________________甜点 _______________________饮料联系我们在线客
    展开阅读全文
    1
      金牌文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    0条评论

    还可以输入200字符

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

    关于本文
    本文标题:_饕餮之旅美食网站.rar
    链接地址:http://www.gold-doc.com/p-255504.html
    收起
    展开