2021-06-19

最新推荐文章于 2021-11-09 20:10:55 发布

原创最新推荐文章于 2021-11-09 20:10:55 发布 · 185 阅读

CC 4.0 BY-SA版权

《Web应用基础》
学生姓名：杨广民学号：631907060327
一：网页设计内容
1：根据调查蛋糕店的经营模式以及未来的发展需求，设计一个更加方便人们节日或喜好需求的网页，以便人们可以及时的了解到蛋糕的品类以及蛋糕店的一些活动，足不出户就可以购买自己喜欢的蛋糕。
2：本网站设计的主要栏目有：“首页；蛋糕；电子卡卷；同城配送范围；企业资讯；关于美味多；积分换礼；联系我们 ”

3：cp：主要放置本网站的产品页面；
css: 主要放置本网站的主要样式文件；
html：主要防止本网站主要页面；
images：主要存放网站用到的各种图片；

4：文件夹设计
index.html美味多有限公司网站首页
cake.html美味多有限公司蛋糕页面
dzkj.html美味多有限公司电子卡卷页面
……
5：网站主要文件名和文件夹逻辑关系

图1 本网站主要文件名位置和逻辑关系图
二：开发过程
主要页面布局设计代码（html）
1、index.html代码：
主页index.html文件主要采用CSS+div设计/html5布局，代码如下：
<!doctype html>

首页

订购热线 4001-170-170

注册登录

<img src="../images/1574985629856413010.jpg" width="1170" height="500" alt=""/></div>	  
	  
<div id="section1">
<h2>------热门推荐------</h2>
</div>
 <div id="section2">
	
	 <div id="aside1"><img src="../images/timg.jpg" width="250" height="575"></br>皇冠蛋糕</br>价  格￥ 300元/个</div>
		<div id="aside2">
 <ul>
				<li><a href="../cp/xkldg.html"><img src="../images/2251_G_1563836876690.jpg" width="180" height="210" alt=""/><br/>小恐龙蛋糕<br/>价  格￥ 288元/个</a></li>
				<li><a href="../cp/bjxdg.html"><img src="../images/2248_G_1563839051246.jpg" width="180" height="210" alt=""/><br/>北极熊蛋糕<br/>价  格 ￥ 300元/个</a></li>
                <li><a href="../cp/cmgzdg.html"><img src="../images/2256_G_1570498400100.jpg" width="180" height="210" alt=""/><br/>草莓公主蛋糕<br/>价  格￥ 199元/个</a></li>
   <li><a href="../cp/hezdg.html"><img src="../images/2263_G_1570502358595 (1).jpg" width="180" height="210" alt=""/><br/>华尔兹蛋糕<br/>价  格￥ 288元/个</a></li>
 <li><a href="../cp/sdlrdg.html"><img src="../images/2467_G_1576005908669 (1).jpg" width="180" height="210" alt=""/><br/>圣诞老人蛋糕<br/>价  格￥ 270元/个</a></li>
	 <li><a href="../cp/slkxq.html"><img src="../images/2268_G_1570507920625.jpg" width="180" height="210" alt=""/></br>森林狂想曲蛋糕 <br/>价  格￥ 388元/个</a></li>
<li><a href="../cp/dhaxb.html"><img src="../images/2277_G_1574897116940.jpg" width="180" height="210"></br>大黑爱小白蛋糕<br/>价  格￥ 300元/个</a></li>
 <li><a href="../cp/kkts.html"><img src="../images/2287_G_1567106664599.jpg" width="180" height="210" ></br>可可天使蛋糕<br/>价  格￥ 360元/个</a></li> </ul>    
			
 </div>
 <P>&nbsp;</P>
  <p>&nbsp;</p>
  <P>&nbsp;</P>
  <p>&nbsp;</p>

 <div id="footer">
  <p> 19信息杨广民</p>

2.主要CSS代码 css文件夹下的index.css 文件代码如下： /*总体框架设计*/ /* CSS Document */css2.css #header{width:1200px;height:120px;border-style:none;margin:3px auto;padding:10px;} #nav{width:1200px;height:90px;border-style:none;margin:5px auto;border:1px;margin:3px auto;font-size: 20px;} #section1{width:1200px;height:45px;margin:3px auto;border:auto;} #section2{width:1200px;height:550px;margin:3px auto;} #aside1{width:200px;height:550px;float:left;} #aside2{width:1000px;height:550px;float:left;} /* CSS Document */css.css body{text-align: center;} li{float:left;list-style-type: none;padding: 30px;} #denglu{text-align:right}

#left{text-align: center width: 300px;font-size: 25px;}
#sousuo{float:center;margin-top: 50px}
.search{width: 500px;height: 40px;border-color:#B74345;;border-style: solid;}
.button{width: 65px;height: 40px;background:#B74345;;font-size: 20px;font-family: “黑体”}
#b{text-align: center}
#x{text-align: center}
#c1{font-size: 20px;font-family: “黑体”}
#d1{font-size: 20px;font-family: “黑体”}
g1{font-size: 20px;font-family: “黑体”}
3：字体和段落设计

1.字体设计：
.button{width: 65px;height: 40px;background:#B74345;;font-size: 20px;font-family: “黑体”}
产品介绍页面字体设计：
商品标题字体设计：
2. 段落设计
主页：#section1{width:1200px;height:45px;margin:3px auto;border:auto;}
#section2{width:1200px;height:550px;margin:3px auto;}
产品：#aside1{width:200px;height:550px;margin:2px auto;float:left;}
#aside2{width:1000px;height:550px;margin:2px auto;float:left;}
4：导航设计
1.主页导航设计
2.

4.
首页
5.
蛋糕
6.
电子卡卷
7.
同城配送范围
8.
企业资讯
9.
关于美味多
10.
积分换礼
11.
联系我们
12.
13.

14.

15. 产品导航设计

新品上市
经典甄选
萌宝之选
福寿双全
特色口味
青春专属
庆典时刻

5：表单设计 1.注册表单数据库zc表文件设计 usernanme cipher Email Mobile 用户名密码邮箱电话注册表单设计代码：注册页面

返回首页

<div id="h3"><b1>平台用户信息注册</b1>

	 <p>用户名：
  <input type="text" name="username" class="yh"/>

密码:

确认密码：

手机号码：

邮箱:

设计总结
Web应用设计中常常在建立连接时，找不到合适的链接，也经常发生连接出错的问题，对于设计网页时发现，现在的网页设计上很多的网页其实十分单一，套用固定的一些网页格式，然后把自己的图片等信息套用进去即可，但这对于刚入门的我们也是最好最快的学习办法，在不断的学习那些优秀的网页时，也使得自己的网页设计能力得到了进步。在遇到图片插入的问题时发现自己的图片总是插入但无法显示，查阅了资料后，才发现需要把这些图片放置到同一个文件夹中，和我们之前的代码学习过程也是一样的道理不同部分的代码都是需要整理到同一个文件夹中的。之类的问题也是一样，参照百度以及一些学习其他的网页设计，再把这些完善到自己的网页上，使得问题得以解决。对与这次web设计，也有了很多的收获，设计出自己的网页也让自己有不少的成就感，但学习也是没有止境的，还需要更多的学习才能设计出更好的网页，同时这是一个设计的过程，网页的设计也离不开个人的省美和设计专业的知识，学习一些相关的知识也能让网页设计有更大的提升。