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