当前位置:文档之家› web网页设计报告

web网页设计报告

web网页设计报告
web网页设计报告

web网页设计专业物流工程学院

班级物流1301

姓名李维源

学号

2016年5月4日

第一部分:实训目的

21世纪是一个信息时代,Internet已经进入人们生活与工作的各方面,而网页作为Internet信息传递的重要载体,其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力,并且上传到网上去,让更多人认识我,更好的宣传自己。

第二部分:实训准备

通过一个学期的web网页设计课程的学习,我终于明白我们浏览的每个漂亮的网页是怎么做出来的,我也想自己亲手来做自己的个人网站。在做个人网站之前,我做以下准备:理清自己的思绪,想清楚自己的网站设计,做模板,找素材,进行站点的规划和素材、资料的收集,要按照制作网站的步骤一步一步来完成。

第三部分:实训要求

1、主题鲜明、内容充实;颜色清新、舒适、结构合理;

2、导航清楚、栏目合理、层次分明、使用方便

3、设计8至15个页面。内含:用户注册,登录系统,留言系统、统计在线人数,设为首页、加为收藏等动态网页内容。

第四部分:个人网站的总体规划和步骤

1.设计的思路

我的个人网站主要是以绿为主,以淡色为辅。主要是希望所有的朋友看到这个空间能一种和谐、安宁、充满生机的感觉。得到心灵的慰藉!

2.绿色网站的意义

我设计的这个网站主要是给人轻松舒爽、赏心悦目的感觉,让人们置身于一种美丽大自然的意境中,明快而错落的绿,让人仿佛来到青山翠谷。

网站的总体风格

网站的总体风格主要是以绿色为主,以淡色为辅,充满活力,生机。具有个性色彩。

网站的布局其实很简单,主要是做好一个模版,模版做好框架了,那网站就初步形成了,虽然主要框架做好了,但是也不要高兴得太早哦,但是你也要想清楚怎样把整个界面搭配得更具有个性化。首先,在框架的最top要插入一个能体现你个人网站的主图。然后在主图的下面插入按钮导航条,之后下面就插入自己想要的风格,虽然用模版做出来的风

格都非常相似,但是各个页面都具有各自的特色,让我们感受到自己的空间的个性。

绿色网站的内容结构也很简单,分类清楚。页面链接的层次也很明确,访问者可以很明确的感受到制作网站的人的心情和性格。

绿色网站的主要色调是以绿色为主。鲜艳的绿色是一种非常美丽、优雅的颜色,它生机勃勃,象征着生命。绿色宽容、大度,几乎能容纳所有的颜色。绿色的用途极为广阔,无论是童年、青年、中年、还是老年,使用绿色决不失其活泼、大方。以淡色为辅,两种颜色的结合更体现出了青春与活力。

淡绿色网站主要采用的是环型结构,每一个页面连接另一个页面,使各个页面能方便的跳转。

4 网站的分析与设计

设计一个个人网站,主要需要考虑两个方面的因素:

1.速度:反应出用户访问网站页面的速度。主页是经常被访问的页面,最好把每页的风格统一起来,例如:导航部分最好放在每页相同的位置,便于在每个页面中的跳转。

2.布局:是个人网站具有吸引力的根本所在,它主要说的是信息显示的视觉效果。5.规划站点

站点规划是设计站点前的一个重要步骤。合理地规划站点对以后站点的设计甚至网站的制作会有事半功倍的效果。

4.1导航草图的制作有利于理清思路,避免在制作网站的过程中乱了方寸。如图4-1所示就是个人粉色网站的初始导航草图。

图4-1 导航图

在导航草图中,网站首页下面有6个二级网页。各网页主要内容如下:

首页:总述。 我的简介:个人资料。

相册:包括了我自己的相册,家人相册、朋友相册、明星相册和漫画图片。

留言板: 是访问我的朋友其中可以写上姓名、联系方式和对我的

网站的看法。让朋友给我留言,增进彼此的了解与交流。

日记:是用框架素材的,有我的作品,最新自己日记,我收藏的文

章,动画效果,文字飘动,供访问者观赏。

音乐:有我最喜欢的音乐,我收藏的音乐,可以播放,带歌词,下相册 留言板 日记 我的简

介 首

页 李杰鹏网站的首页

我的音

载,有飘动图片,共访问者分享。

4.2创建站点文件夹

合理地创建站点文件夹可将网站文档分门别类,井井有条地放置其中,这对以后网站的制作是极其有利的。创建“绿色”网站的站点文件夹的具体操作如下:

步骤1 在本地磁E盘创建一个文件夹,该文件夹在创建动态站点时将作为站点的根目录。这里在E盘下创建一个名为黄裕福个人网站的文件夹。

步骤2 在黄裕福个人网站文件夹内创建不同功能的文件来,文件夹分别命名为图片素材库,按钮素材,我的主页,我的档案,登陆注册,相册,日记,音乐8个文件夹,并将对应的素材放到各自的文件夹中。

4.1创建站点

步骤1 进入Dreamweaver 8工作界面后,选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。

步骤2 在该对话框中的“基本”选项卡中的“您打算为您的站点起什么名字?”文本框中输入 hyfu

步骤2 单击“下一步”按钮,在弹出的对话框中选中“是,我想使用服务器技术”,在“哪种种服务器技术?”下拉列表中选择“ASP VBScript”。

步骤3 单击“下一步”按钮,在弹出的对话框中选择在开发过程中如何使用文件,这里选中“在本地进行编辑和测试”,在“你将把文件存储在计算机上的什么位置?”文本框中输入F:\ index\

步骤4 在弹出的对话框的“您应该使用什么URL来浏览站点的根目录?”中输入 ,输完后,单击“测试URL”按钮。如果这时它提醒你URL前缀测试成功,点击“确定”按钮,你就可以进入下一步了,否则的话,你再按照前面

的步骤检查站点出现的问题。

步骤5 单击“下一步”按钮,在对话框中选择“否”。

步骤6 单击“下一步”按钮,点击“完成”按钮即可完成本地站点的创建,这时,创建的站点就显示在“文件”面板中了

如图所示

4.4首页的布局

步骤1 选择“布局模式”,将页面布局为如图4-3所示

图4-3

步骤2 在第1行第1列里插入一张主要的图片。

步骤3 在第2行第2列里面插入导航条。

步骤4 在相应的位置插入相应的图片的Flash影片。

步骤5 在第2行第1列中插入一个表单,在表单中插入一个4行2列的表格,输入相应的信息如图4-4所示

图4-4

步骤6 新建一个数据库文件,在其中输入用户名和密码,在设置一个主键保存退出(注意:再创建服务器行为时必须把数据库关闭,否则会出现错误)步骤7 还有就是创建一个注册动态网页如图4-4所示

4-5

步骤8 先添加数据源,在登陆界面创建一个登陆用户的服务器行为,之后在

注册界面中创建一个插入记录服务器行为。

步骤9 在相信的地方插入几张可爱的漫画,之后在创建它的滚动方式,代码为(“marquee ondirection=”right”>)还要加一个结束标记()注册登录与留言板提交的工作流程图

首页就完成

4.5制作其

它页面

和制作

其他首页一

样,在布局

模式中进行布局,插入相应的图片或flash。

4.6制作留言板

留言板的设计比其它几个网页都要复杂一点,如果没有搞好的话就会出现差错,其中自己做留言板的时候就出现过很多差错不是预览不出就是跳转不过来,最后经过老师的提点终于把一个一个的错误给找出来了。

步骤1 插入模板,在模板的第1列第1行插入一个主要图片

步骤2 在第2行第2列插入导航条

步骤3 在第3行第2列插队入一个表单,在表单中插入一个5行2列的表格

步骤3 做完了相应的操做之后就保存,保存完之后再另存为一个一模一样的网页,改一下名字,点击确定

步骤4 创建一个数据库文件,其中输入姓名、性别、电话、E-mail、QQ 留言,在姓名的字段中添加一个主键,单击保存。

步骤4 在留言板中添加数据源,在添加插入记录的服务器行为

步骤5 在另外一个留言板中,添加记录集和绑定服务器行为。

步骤6 在插入菜单-应用程序对象形字-记录集分页,插入一个记录集分页

4.7设为首页、我的信箱、加为收藏夹

步骤1 在index1中输入设为首页、我的信箱、加为收藏夹的字样

步骤2 选中设为首页字样,在链接处输入一个空链接,切换到代码视图,在代码视图中输入代码,代码如下:

步骤3 选中加为收藏夹字样,在链接处输入一个空链接,切换到代码视图,在代码视图中输入代码,代码如下:

制作在线人数

步骤1 新建一个网页,在代码视图中插入代码,代码如下:

步骤2 在网页中,在相应的位置输入在线人数为:

步骤3 在网页中,在代码视图中插入代码,代码如下:

<%=application("sum")%>

4.9制作聊天室

步骤1 新建一个动态页面插入一个表单,在表单中插入一个3行2列的表格输入相应的文安,插入相应的按钮和文字安段。

步骤2 “文件”/“保存”,在弹出的对话框中输入login1保存

步骤3 “文件“/”新建“在弹出的对话框中选则常规中选择”框架集“,选中”下方固定“的框架集单击”创建“

步骤4 “文件“/”框架集另存为“分别保存main1、sponse1 、display1“

步骤5 在display1网页中输入”欢迎进入我的聊天室“

步骤6 在“插入“/”HTML“/”水平线“

步骤7 在到代码视图中插入代码,代码如下:

<%

(application("show"))

%>

步骤8 切换到sponse1网页,在网页中插入一个表单在输入“我要发言”,在插入一个文本字段,在添加两个按钮

步骤9 在到sponse1的代码视图中输入代码,代码如下:

<%

if ("message")<>"" then

message1=trim("message"))

()

xm3=session("xm2")

application("show")=xm3 & "在" & "说:" & message1 & "
"_

&application("show")

()

end if

%>

步骤10 切换到main1网页中,在代码视图中输入代码,代码如下:

<%

if ("xm1")=""or ("mm")="" then

("对不起,你的资料不全!请返回重填" )

else

session("xm2")=trim("xm1"))

end if

%>

制作音乐播放效果

音乐页面如图4-7

在站点下新建一个音乐文件夹作为播放网页,在播放网页中插入所需的背景音乐,代码设计为:

在播放页中插入方框素材,设置方框大小,将相对应的歌词插入方框中,给歌词设置为向上移动效果;并且设置移动位置大小和速度。

代码为:

明天你是否依然爱我

曲:童安格词:杨立德

午夜的收音机

轻轻传来一首歌
………………………

.

播放图为4-8

五.实验结果

在这次的实训中,老师要求我们在网站中实现的功能,我都完成了,通过思考综合运用制作出音乐播放效果。我觉得我完成很成功,在这次实训中,我收获了不少,以前不知道做的现在全知道做了,我也有了做网站的经验,虽然经验不足,但是收获很多,让我从中学到了不少,虽然在做网站的过程中出现过很多的错误,但是经过老师的指点和同学的指点,错误全都没有了,现在整个网站链接很浏畅,所以这次实训我觉得我完成得很成功,从中也学到了不少。

六实训中的错误和怎样解决的

在这次实训中出现了很多的错误,出现的最多的错误就是把代码输错,还有就是做的网页不能正常预览,由其是在主页中出现的错误,特别是网页布局设计视图是好的,但是预览图就走位了;在留言板也反复做了好多遍才做出来,那可真是一波三折。,之后复制到机房里面去就运行不了,之后找了很多的原因,才找出来,首先要在你放的那个的文件夹,站一个web 共享,在

新建一个站点,这样才能正常的运行,还有就是那个数据库就是要重新添加数据源才可以,不然就会出现错误,遇到问题时我努力查阅资料,查阅代码。七实训心得

一连上了一个星期的网页实训课,可以说学到很多以前没有学到的东西。感觉这一个星期学到的远远比以前学一个学期的要多,要丰富。在这期间,首先是网页素材的准备,在网上查看一些网页背景和背景颜色搭配,让我了解到网页的颜色不能多过3种色彩。接下来的几天再结合自己的网页来进行策划,在做首页之前,先用图纸把网页的结构画出来,内容和结构都想清楚用Fireworks把网页设计出来,再切割图片,把它们导成Html格式在Dreamweaver中进行进一步的编辑。

通过这个实训我学到了很多,也发现自己的不足,一周的实习结束了,至于总体的感觉只能用八个字来概括虽然辛苦,但很充实。在这一周里,我学到了很多有用的知识,我也深深地体会到IT行业的辛苦和伟大,随着科学的迅猛发展,计算机行业发展更快了,新技术的广泛应用,会有很多领域是我们未曾接触过的,只有敢于去尝试才能有所突破,有所创新。所以搞好一次实训,是我今后走上社会的一种财富,所以努力搞好实训才是最要的,打高分不是最重要的,最重要的是你在这次实训中你学到了什么,因为这就是你今后走上社会的一种定贵的财富。学习的能力很重要,特别是对一个站长来说,因为网络的发展太快,新的技术,新的模式,新的思维方法每天都在出现,如果不学习,很快就会跟不上形势。做网站虽然辛苦但是让我知道:“千淘万漉虽辛苦,吹尽黄沙始到金!”

网页设计及制作实习报告.

网页设计及制作 【实习目的】 熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。 过网页设计理论联系实际操作,巩固所学的知识,提高处理问题的能力。 充分学习 网页设计实践中的操作理论,提高自己网页设计水平,并为能顺利与社会环境 做准备。 【实习时间 【实习地点 未来路锦江国际花园9栋501室 【实习单位】 郑州市托斯卡纳餐饮有限公司 【实习内容和过程】 实习内容: 我在托斯卡纳餐饮公司旗下的56网络蛋糕店一个月的实习,我的工作就 责设计整个网站的页面部分。为其一个月的实习,使我第一次亲身感受到了 识与实际的应用,作为一个网站美工除了要求网页三剑客,ps,这些必会的 软件以 外, 还要对Html 用的很熟,对ASP 或PHP 或jsp 要有初步的了解。 通过这 次实习,进 步巩固和深化所学的理论知识,为以后的工作打好基础。 以下是我做的一些实习过程中的经验总结 (1表达一定的艺术效果 接轨 2012年2月 15日至2012年3月15日 是负 所学知

一个成功的网站应该把网页设计得吸引人,同时又要传达设计思想和情感。网页作为一种媒体,它必须具有一定的艺术感染力,一个平淡无奇、杂乱无章或毫无 美感的网页很难会有浏览者喜欢,更不要说让浏览者去注意它的内容了。(2使页面 结构清晰可读性强 经常可以看到这样的页面,上面堆砌了许多内容,却没有考虑它的空间框架 人看了无法知晓哪些内容才是最具发言权的。没有流畅的视觉流程,这是典型 的没有注意到编排清晰度、可读性的表现。 (3实现不同的功能 在网络这条信息高速公路上,网页最主要的功能就是一种传递信息的手段。 此,它一切内容都是为了这个目的而服务,都是要围绕这个中心进行设计的。然而,要实现这个功能,网页的美工设计和内容都必须有针对性。所谓针对性,就是指对不同类别的网页要求采用不同的美工艺术效果。 (4网页的内容 网页设计人员美化网页,增加网页设计的艺术感,都是为了网页设计的内容服务的。一般来说,网页的几项基本内容:标题、网站标志、主体内容、导航、广告栏等。 (5确定网站的类型 在设计网页之需要做大量的准备工作,需要思考以下几个问题:1、网站的类型: 站点属于新闻、娱乐、商务类的综合站点,还是个人主页; (6确定网站的风格 如果浏览者主要是年轻人,页面就要设计得基调明快,活泼富有朝气;如果针对的群体是政府工作者或科学工作者,那么页面就要设计得严谨、严肃、理性、科学;如果针对的群体是妇女儿童,页面则要设计得温馨、友爱、轻松;如果针对的群体是恋人或从事艺术工作的人,页面就要设计得浪漫并有艺术感 (7确定网页之间的链接关系 在网站的总体规划列出来后,就必须要考虑各个网页之间的关系,是星型、树型、网型还是直线链接。

Web网页设计实验报告

WEB系统开发 综合实验报告 题目红尘客栈网上订房页面 专业计算机科学与技术(信息技术及应用) 班级计信2班 学生蒋波涛 重庆交通大学 2013年

目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (4) 五、设计过程 (7) 六、实验心得 (10) 七、实验总结 (11)

一、设计目的 在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素质。学会和团队配合,逐渐培养做一个完整项目的能力。 二、设计题目 《红尘客栈》 三、结构设计 选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。首先,做好需求调研。调研方式主要是上网查阅资料,在图书馆里翻阅相关书籍。 然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。 我们选做的主题是个人主页,并且选定题目为“红尘客栈”,其目的是做一个简单的网站,介绍酒店概况,提供一定的资讯信息。 四、技术分析 (一)建立布局 在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器,也是众多入门者的捷径。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。 1.点击“ALT+F6”键,进入布局模式,插入布局表格。建立一个大概的布局。 2.使用背景图片:选中该项,按浏览可以插入一幅准备好的图片作为表格的背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。 (二)网页中的图像

网页制作实验报告

网页制作实验报告 页制作实验报告 实验一:站点设置 一、实验目的及要求 本实例是经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域,同时接入国际互联。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装页三剑客(dreamweaver mx;flash mx;fireworks mx)等页设计软件; 三、实验原理 经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 四、实验办法与步骤 1)执行“站点\治理站点”命令,在弹出的“治理站点”对话框中单击“新建”按钮,在弹出的快捷菜单中挑选“站点”命令。 2)在弹出的“站点定义为”对话框中单击“高级”选项卡。 3)在“站点名称”文本框中输入站点名称,在“默认文件夹”文本框中挑选所创建的站点文件夹。在“默认图象文件夹”文本框中挑选存放图象的文件夹,完成后单击“确定”按钮,返回“治理站点”对话框。 4)在“治理站点”对话框中单击“完成”按钮,站点创建完毕。 五、实验结果 六、讨论与结论 实验开始之前要先建立一具根文件夹,在实验的过程中把站点存在自己建的文件夹里,如此才干使实验条理化,别至于在实验后寻别到自己的站点。在实验过程中会浮现一些选项,计算机普通会有默认的挑选,最后别要去更改,假如要更改要先充分了解清晰该选项的含义,以及它会造成的效果,否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。 实验二:页面图像设置 一、实验目的及要求: 本实例的目的是设置页面的背景图像,并创建鼠标经过图像。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域,同时接入国际互联。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装页三剑客(dreamweaver mx;flash mx;fireworks mx)等页设计软件; 4、安装acdsee、photoshop等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 设置页面的背景图像,并创建鼠标经过图像。 四、实验办法与步骤 1) 在“页面属性”对话框中设置页面的背景图像。 2) 在页面文档中单击“”插入鼠标经过图像。 五、实验结果

网页制作课程设计报告

网页制作课程设计报告 学院: 专业班级: 姓名: 学号: 成绩: 阅卷教师:

目录 1.设计目的 (1) 2.设计思想 (1) 2.1网站整体结构规划思想 (1) 2.2 主页设计思想 (1) 2.3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (2)

1.设计目的 阐述该个人网站的设计意图和创意,简单介绍自己的个人网站。 2.设计思想 阐述网站的整体设计思想,包括: 2.1网站整体结构规划思想 要求阐述网站整体结构的选择、设计的思想,绘制网站结构草图。 2.2 主页设计思想 要求对主页的布局思路进行阐述和分析。 2.3子页的设计思想 要求对子页的设计以及网页对象的选取思路进行阐述和分析。 3网页详细设计分析 要求选取一张网页,对网页的设计实现过程进行阐述和分析,详细说明制作该网页的步骤,所使用的网页对象以及该网页对象的操作方法。

4结论 对整个设计报告做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。 一、设计目的 本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素

网页设计实验报告 实验一

昆明理工大学信息工程与自动化学院学生实验报告 (201 —201 学年第一学期) 课程名称:Web设计技术开课实验室:年月日年级、专业、班学号姓名成绩 实验项目名称网页设计简介、HTML基础介绍、文字与 段落、列表指导教师 教师 评语教师签名: 年月日 注:报告内容按实验须知中七点要求进行。 一.打开记事本,编写第一个页面。 (1)打开记事本:单击“开始”→“程序”→“附件”→“记事本”。 (2)输入下面代码: 欢迎你! 我的朋友. 当你进入HTML编程世界的时候,你的
感觉是全新的!
(3)单击“文件”→“选择”→“保存”菜单项,选择文件类型为“所有文件”,文件名输入“index.html”并选择文件保存地址(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)。 (4)用浏览器打开这个文件,看看效果吧! 二.用HTML语言编写符合以下要求的文档:标题为“班级主页”,在浏览器窗口用户区显示“欢迎来到我们的班级主页”,完成后效果如图: 代码: 班级主页 欢迎来到我们的班级主页

《网页设计与制作》课程设计报告

《网页设计与制作课程设计》 实验报告 院系名称:管理学院专业班级:电子商务XXX 学生姓名: XXX 学号: XXXXXXX 2016年 06 月 一、实验目的 本实验属于设计性实验,在学习完《网页设计与制作》课程的基础上,通过实验学习网页制作的步骤与方法,使用CSS+DIV制作一个简单的网站,能够对网站有一个清晰的认知和规划。进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构。将理论与实践相结合,加深对本课程的理解。 二、实验步骤 1、进行网站整体规划,包括网站主题、栏目以及界面的构思,确定网站结构,形成初步设计思路。 2、设计网站的主页以及栏目,利用CSS+DIV制作网站主页和弹出式导航条菜单,利用JavaScript制作动态效果,并用firework软件对主页进行切图。 3、设计并利用CSS+DIV制作列表页,并用firework软件对列表页进行切图。 4、设计并利用CSS+DIV制作内容页,并用firework软件对内容页进行切图。 5、进行调试和修改已形成最终实验结果。 三、网站设计思路 1、参照“唯品会”“折800”等电商网站,确定网站主题为“轻奢电商”。 2、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分类等七个一级栏目。其中美妆、服饰、零食、母婴四个栏目含有二级栏目。

3、首页设置品牌热卖、限量抢购等图片展示,并利用Javascript设置用户名和密码的表单验证,在图片之下设置一个新闻列表提供有关网站的最新消息,右侧设置账户、密码的表单验证,并在网页结尾处写上官方微信和版权信息。 4、由主页导航栏上的的在售分类引出列表页,在列表页中采用新闻列表样式具体展示本企业的全部商品分类并设置超链接。 5、由列表页中美妆|女士护肤|洁面弹出具体的内容页面,主要由图片以及相应的文字介绍组成。 四、网站的核心代码 1、主页 轻奢电商