电商网站设计实验报告.docVIP

实验报告 系 别 交通运输管理学院 学生姓名 余东阳 专 业 信息管理与信息系统 学 号 2220123771 实验课程 电子商务网站设计 指导老师 贺琳 填制日期：2013年12 月25 日 实验一 网站设计 一、实验目的与要求 设计并实施一个网站。 网站主题自选，但风格、色彩、布局等需要统一。 要求网站至少由5个页面构成。 页面遵循HTML4.01 或XHTML 1.0 strict 标准。 页面的表现由CSS文件描述。 页面的布局要求用CSS文件描述。 页面的行为由Javascript文件完成。 二、实验内容与步骤及结果展示 2.1实验内容 2.1.1 主页 绘制出网页的框架 设计第一步就是页面功能结构分析，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是构思好的界面布局图。本次实验的基本页面构想图(图1)。 图 1 2 页面结构设计 构思页面整体布局，设计出总体框架，写出如图2. 3 写入整体层结构与CSS 接下来我们在桌面新建一个文件夹，命名为“电子商务实验课”，在文件夹下新建两个空的文档。 homepage.htm homepage.css 用Dreamweaver打开已经建立好的站点endpage。打开“home page.html”，在head/head标签对中写入： link href=homepage.css rel=stylesheet type=text/css /， body/body标签对中写入设计好的DIV的基本结构(如图二) 用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。 4、填充基本结构 HTML HEAD TITLE#27773;#36710;#19990;#30028;/TITLE META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=iso-8859-1 !-- ImageReady Preload Script (index.psd) -- SCRIPT TYPE=text/javascript !-- function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images (preloadFlag == true)) { for (var i=0; ichangeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; } } } var preloadFlag = false; function preloadImages() { if (document.images) { company_over = newImage(images/company-over.gif); products_over = newImage(images/products-over.gif); accessories_over = newImage(images/accessories-over.gif); support_over = newImage(images/support-over.gif); news___events_over = newImage(images/news-%26-events-over.gif); contacts_over = newImage(images/contacts-over.gif); preloadFlag = true; } } // -- /SCRIPT 2.1.2其他页面 其他页面的设计方法，基本和主页相同只是形式与颜色还有部分布局的细节不同，在这里就不在赘述设计过程。 资料页面（以表单为主） 图像页面，（以浮动的DIV为主） 文档