商务网页课程设计报告Word下载.docx
- 文档编号:8404280
- 上传时间:2023-05-11
- 格式:DOCX
- 页数:27
- 大小:661.60KB
商务网页课程设计报告Word下载.docx
《商务网页课程设计报告Word下载.docx》由会员分享,可在线阅读,更多相关《商务网页课程设计报告Word下载.docx(27页珍藏版)》请在冰点文库上搜索。
电子商务、开发设计、Dreamweaver
cs5
目录
一、综述4
二、版式设计4
2.1建立布局4
2.2搜索页面5
三、链接逻辑关系设计:
7
3.1网站最终网页效果图:
3.2页面的链接关系图:
10
四、开发实现:
11
五、相关代码12
1.首页代码(子页面代码类似)12
2.相关css规则代码:
18
六、总结:
26
参考文献27
一、综述:
尽管现在许多可视化的网页编辑软件,都可以极大地提高Web设计人员编辑网页的效率,但作为Web页面的基础组成部分,掌握HTML(超文本标签语言)和XHTML(可扩展超文本标识语言)的基本知识是非常有必要的,这些知识对精通网页设计与制作也有很大帮助。
本次课程设计是使用的Dreamweaver
cs5,实验目的是以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例,理解并初步掌握运用Dreamweaver
Dreamweaver
cs5等软件的的操作和应用。
增强动手实践能力,进一步加强自身综合素质。
二、版式设计
2.1建立布局
主页面包含网站的logo、导航、产品搜索框、个人帐号链接、产品分类、部分产品推荐以及广告位等栏目。
最终效果图如下:
这次网页设计中用到大量的布局,所以怎么样建立布局是关键。
cs5是大多数人设计网页的称手兵器,也是众多入门者的捷径。
特别是其在布局方面的出色表现,更受青睐。
2.2搜索页面
搜索页面是访问在搜索栏输入关键字后,通过系统搜索找出符合条件的产品列表页面。
点击页面中相关链接,将会在页面间转换。
“宇泽鲜花网”主页面最终效果
产品详细信息页面查看具体产品时显示的页面,在此页面中还将增加相似产品列表信息,以便访问者选择合适的产品。
子页面产品详细信息列表页面
通过使用Dreamweaver
cs5软件,各页面最终效果如下图:
网站首页
子页面一child.html
子页面二child1.html
子页面三child2.html
可以通过首页导航中的页面及相关链接跳转按钮,可以调整到相应的页面通过href=””方式跳转。
其余子页面间的跳转,点击右下角页数行的相应数字。
四、开发实现:
首先明白自己需要做的网站,然后设计好布局,创建div以及css规则,然而,其中却出现了很多问题。
例如,css规则名称因大意而写错,导致网页中规则没有应用到,达不到自己想要的效果;
对div的插入也不熟练,又是位置插入错误,而导致网页中布局一片混乱;
div宽度、高度、间距等,也时常出现错误,而导致div框架容纳不下子div,或者多个div重叠在一起;
更是对知识理解得不够深刻,掌握得不够牢固,操作不够熟练,导致div框架、内容出现混乱。
最后通过查找资料、上网查看了一些知名的网站开发出的网页,一步步查找自己代码中的错误,并加以改正。
如图等问题:
首先要把制作这个网站所要用到的素材找出来,整理,放在相应的文件夹。
布局:
根据网页布局分析网站总体上可看成上中下三个部分,上边设计导航条,中间的主体部分底部做了链接,下边为注释部分。
其中,中间部分插入的div框架较多,容易混淆,所以更要集中精神,注意。
对于相应的div,应用对规则后,效果将如下下图:
导航应用css规则后的效果图
应用了相关css规则后的效果图
最终网页效果图:
五、相关代码
1.首页代码(子页面代码类似):
<
body>
divid="
main_container"
>
header"
logo"
imgsrc="
../images/logo.gif"
width="
182"
height="
85"
/>
/div>
<
top_right"
>
ahref="
#"
我的账户<
/a>
span>
|<
/span>
付款方式<
配送范围<
帮助中心<
订花热线:
400-686-1234
big_banner"
../images/banner_top.jpg"
728"
90"
border="
0"
/>
main_content"
menu_tab"
ulclass="
menu"
li>
index.html"
class="
nav"
首页<
/li>
child.html"
鲜花<
果篮<
花卉<
高档鲜花<
自选鲜花<
联系我们<
/ul>
crumb_navigation"
当前位置:
left_content"
divclass="
title_box"
鲜花分类<
ul>
a>
原花材分类<
a>
红/百/粉玫瑰<
对象分类<
恋人/母亲/父亲/客户/老师/病人<
用途分类<
节日分类<
多数分类<
今日推荐<
border_box"
title"
12朵爱的玫瑰/爱的奇迹<
img"
../images/p1.jpg"
94"
71"
price"
¥154<
行业资讯<
inputtype="
text"
name="
newsletter"
class="
newsletter_input"
value="
your_email"
join"
订阅<
banner_adds"
../images/bann2.gif"
167"
center_content"
oferta"
center_title_bar"
最新款式<
prod_box"
center_prod_box"
product_title"
title="
百合5支/佳人有约"
target="
_blank"
百合5支/佳人有约<
../images/n1_s.jpg"
¥215<
prod_details_tab"
加入购物车<
详细信息<
child1.html"
99朵执着"
99朵执着<
../images/n2_s.jpg"
¥520<
child2.html"
粉玫瑰"
粉玫瑰<
../images/n3_s.jpg"
¥220<
atitle="
百合6支/称心如意"
百合6支/称心如意<
../images/n4_s.jpg"
¥310<
百合2束/天意"
百合2束/天意<
../images/n5_s.jpg"
¥260<
99朵玫瑰/2013款式/爱你"
99朵玫瑰/2013款式/爱你<
../images/n6_s.jpg"
¥540<
热卖鲜花<
31根玫瑰"
31根玫瑰<
../images/h1_s.jpg"
¥319<
33朵玫瑰/清纯女人"
33朵玫瑰/清纯女人<
../images/h2_s.jpg"
¥290<
66朵玫瑰/韩式"
66朵玫瑰/韩式<
../images/h3_s.jpg"
¥230<
right_content"
title_box"
鲜花搜索<
keyword"
shopping_cart"
我的购物车<
car_details"
购物车2个<
br/>
spanclass="
border_cart"
合计:
price"
cart_icon"
"
../images/shoppingcart.png"
35"
特价专区<
product_title"
11支玫瑰/一生最爱<
img"
../images/tejia.jpg"
¥99<
常见问题<
liclass="
odd"
1.我怎么付款<
even"
2.我最快什么时候能收到花?
3.可以滑到后付款吗?
4.购买的话与图片相同吗?
5.不满意,能退货吗?
6.夜间能下单吗?
7.可以电话订购吗?
8.可以开发票吗?
../images/banner1.jpg"
pagination"
上一页<
currentpage"
1<
2<
3<
4<
尾页<
下一页<
footer"
Copyright2010-2012AllRightsReservedICP备10011234号<
p>
注:
7*24小时均可网上订花,支持先送花后付款,我们提供的付款方式有网上银行、银行转账、支付宝、Paypal当天17:
00以后预定的鲜花在次日安排配送<
/p>
/body>
body
{
background:
url(../images/bg.jpg)repeat-x#e4e9ectop;
padding:
0;
font-family:
Arial,Helvetica,sans-serif;
font-size:
12px;
margin:
0pxautoautoauto;
color:
#000;
}
p{
2px;
0px;
#main_container
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 商务 网页 课程设计 报告