《网站设计与开发》实验指导书

合集下载

网站开发工具的使用与网页设计实验指导书

《网站开发工具的使用与网页制作》实验指导书指导教师：蔡莉百度。

Com 云南大学软件学院综合技能实践——《网站开发工具的使用与网页制作》实验指导书指导教师：蔡莉（注意：请先简要阅读实验指导书的要求再开始做实验）一、实验目的1． 2． 3． 4． 5．认识网页构成网页的基本要素制作网页的基本工具美化网页的基本工具网页制作的基本步骤二、实验内容预习一、网页概述网页其实是在这个世界的某一个地方某一台计算机上的一个文件，通过互联网，也就是 Internet 将两个不同的地址相连，把人们的信息传达到网络世界的各个角落。

人们通过互联网，可以在世界的任何一个地方互相交流沟通。

早期的 Web 1.0 时代，大部分网页只有文字、图像信息可以浏览，这个时候最典型的互联网标志就是门户网站，如网易、搜狐。

从 2001 年开始，人们认为互联网开始进入 Web 2.0 时代，这时的网页可以包含动画、音频、视频，也可以在网页中进行交流、上传文件，使用完全交互式的程序。

互联网开始更注重个人化的网络服务，任何使用网络的人，都可以参与到网页的制作中。

静态网页的后缀通常为.html 或者.htm，例如：index.html 或者 sunny.htm。

动态网页的后缀可以为.asp，.aspx，.php，.jsp 等，例如：index.asp 或者 first.jsp 等。

二、构成网页的基本要素 1、文字第 1 页共 15 页《网站开发工具的使用与网页制作》实验指导书指导教师：蔡莉文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。

另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。

2、图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。

电子商务网站设计与开发作业指导书

电子商务网站设计与开发作业指导书一、项目背景随着互联网的快速发展，电子商务已经成为了现代商业中不可或缺的一部分。

为了满足市场需求，各种电子商务网站应运而生。

本次作业旨在通过设计和开发一个电子商务网站，使学生能够熟悉并掌握相关技术和方法，提高实战能力。

二、项目目标1. 设计一个功能完善、页面美观、用户友好的电子商务网站；2. 实现用户注册、登录、购物车、订单管理等基本功能；3. 掌握电子商务网站的数据库设计和开发技术；4. 熟悉网页前端开发和后端开发技术；5. 学会使用常见的开发框架和工具。

三、项目要求1. 网站首页设计与开发- 页面风格要符合电子商务网站的特点，色彩搭配协调，布局合理；- 包含网站logo、导航栏、搜索框等基本元素，并能够实现页面响应式设计；- 展示热门商品、优惠活动等相关信息，吸引用户浏览。

2. 用户模块设计与开发- 包含用户注册、登录、个人信息管理等功能；- 用户注册时需要验证用户输入的数据是否合法，并保证用户信息的安全；- 用户登录后可以查看个人订单、购物车、收货地址等相关信息。

3. 商品模块设计与开发- 实现商品的分类、搜索、列表展示等功能；- 商品详情页面要包括商品名称、价格、库存、商品描述、商品评价等信息；- 支持商品的购买和加入购物车操作。

4. 购物车模块设计与开发- 用户登录后可以将商品加入购物车，并实时更新购物车商品数量；- 用户可以选择结算购物车中的商品，并生成订单。

5. 订单模块设计与开发- 用户下单后生成订单，包括订单号、商品信息、收货地址、订单金额等；- 用户可以查看订单列表和订单详情，并进行确认收货等操作。

6. 后台管理模块设计与开发- 实现对商品、订单、用户信息等数据的管理和操作；- 后台管理系统需具备权限管理功能，确保只有管理员可以进行相关操作。

四、开发工具和技术1. 前端开发技术：HTML、CSS、JavaScript、Bootstrap等；2. 后端开发技术：PHP、Python、Java、Node.js等；3. 数据库技术：MySQL、MongoDB等；4. 开发工具：Sublime Text、Visual Studio Code、Eclipse等；5. 开发框架：Laravel、Django、Spring等。

2013年电子商务网站设计与开发实验指导书

电子商务网站设计一、实验目的1．掌握电子商务网站的功能结构；2．掌握网页与数据库连接、添加、删除和修改信息等前台功能实现；3．管理员对网上信息进行维护（后台建设）；4．学会如何进行网站的结构设计、站点风格的选择、网站层次规划原则和页面布局等知识。

5．能设计电子商务网站二、实验要求1. 设计要求(1) 学生在《电子商务网站设计》期间，要严格遵守纪律、规章制度，有事离校必须请假。

(2) 在设计过程中，要严格要求自己，树立严肃、严密、严谨的科学态度，必须按时、按质、按量完成课程设计。

同时，要注意锻炼自学能力，自己分析问题、解决问题的能力，自主的去寻找资料、方法解决设计难点。

(3) 独立完成规定的工作任务，不得弄虚作假，不准抄袭他人内容，否则成绩以不及格计。

(4) 小组成员之间，既要分工明确，又要保持联系畅通、密切合作，培养良好的互相帮助和团队协作精神。

2. 选题要求本次训练要求1-3人（最多3人）组成一个课题小组选择一个题目，在充分论证该网站的基础上，完成网站的前期设计工作。

课题题目类型举例：A在线分享评价类平台（类似豆丁网功能）、房地产信息在线交流平台、商业BBS类型等在线评价和交流类网站B 企业门户类网站C 团购类网站D 网上商城类E 交易平台类（类似淘宝网）3. 软件开发工具学生可根据课题的要求和实验室环境以及自己的经验进行选择，包括语言类、数据库类、综合类都可以，对此不做统一要求。

网页设计与制作课程教学大纲4. 课程设计的成果形式本课程设计的最终成果是《电子商务网站》报告和计算机软件，最后以答辩形式（可结合ppt讲述）简介设计过程。

三、实验内容实现一****电子商务网站，例如一般交易网站实现的主要功能包括：1、网站前台功能模块（1）会员注册及登录模块(登陆后可以查看订单)为了确保交易信息的有效性和网站功能拓展，购物网站需要以会员机制运作，浏览者必须成为会员，才能够在网站中购物。

该模块通过与浏览者的交互，记录浏览者的基本信息，通过后台审核确定其信息的有效性。

网页设计制作开放型实验指导书

实验项目《网页设计制作》实验指导书一、实验内容用Ｄreamweaver专业网页开发软件，设计制作静态网页。

二、实验目的本实验通过实例讲解了利用Ｄreamweaver制作静态网页的方法，步骤详细，即使是初次接触Ｄreamweaver的学生也可以轻松完成操作。

本实验最具特色的部分经过学习以后，学生能自行设计制作一个个人主页。

三、实验要求1、了解网页设计常用的几种版式；2、掌握表格的创建、结构调整与美化。

3、熟悉表格与单元格的主要属性及其设置。

4、掌握在表格和单元格中插入文字或图片。

5、掌握绘制及编辑布局表格和布局单元格；6、掌握利用布局表格的嵌套来设计较复杂的版面；7、掌握在布局表格中添加具体内容；8、掌握设置布局表格和单元格属性四、实验条件计算机，Dreamweaver软件五、实验内容利用布局表格制作如图1所示的网页。

图1知识点分解：图2由图2我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。

实验步骤：1、新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。

2、将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，如图3所示。

图33、单击布局工具栏中的按钮，进入布局模式。

4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。

单击按钮即可切换到布局模式。

切换到“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。

5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮。

6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。

7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。

综合网站开发实训指导书_网专0712

《综合网站开发课程设计》实训指导书实训性质：综合实训实训时间、学分：3周、适用专业：计算机网络技术开训学期：四一、实训目的与要求实训目的：《综合网站开发》是一门实用性和实践性都很强的课程，课程设计环节占有重要的地位。

通过课程设计培养学生具有专业网站初步的规划、设计、制作能力。

具体表现在网站内容、功能、安全等方面合理策划和规划；培养具有主页和二级页面的创意、设计、美工等方面的技术处理能力和具有强大的动态效果制作能力。

培养学生具有基于后台数据库的编程技术，实现客户—服务器端交互式动态网页的制作能力。

基本要求：整个课程设计的各个环节都要求学生自己动手；网页风格应与网站主题相符合；网站LOGO与网页风格应该协调一致；内容重点突出、网站结构应层次分明。

具体要求：1.网站的文件夹规范站点文件夹命名为:班级+学号+姓名，如：网专07101于强；站点应包含文件夹：Images （存放图片文件）Templates（存放模版文件）Library （存放库文件）素材（存放自己设计的图形、动画文件）其余视文件夹需要而添加，全部用英文命名站点文件夹中所包含文件：index （首页）*.css （样式表文件）其文件余视需要而添加，全部用英文命名2.静态页面不少于12个，结构为：3.网页设计时应尽可能多地应用各种网页设计技巧（表格布局、CSS样式、框架、模板等等）；4.文字大小控制在9-14pt，适度使用图片；5.设置方便快捷的导航系统；6.数据库可采用SQL Server或Access；7.动态部分要能完成数据库的基本操作（增、删、改、查）、网站的首页统一命名为index.html(若为动态首页命名为default.asp或default.aspx)；8.站点首页中必须包括设计者的完整信息（班级、学号、姓名、联系方式等）。

二、实训项目、内容及参考题目实训项目、内容：1. 站点的构思布局的设计，网页素材的搜集（同时编写实训日记）2. 站点的建立，主页或首页的制作3. 其他静态页面的制作4. 数据库设计及动态网页设计4. 测试5. 编写网站设计说明书参考题目：计算机系网站教师个人教学网站精品课网站电子商务网站三、实训报告要求、考核方式及成绩评定标准1．实训报告要求：本设计的实训报告在实训日记基础上整理完成的一份网站设计说明书，包括网站的主题与页面风格设计说明、网站的总体规划与网站的结构框图、网站Logo 设计说明、典型网页的设计过程与应用技术、动态网页设计说明（数据库设计）、网站测试与维护操作步骤、网站的改进意见及部分主要编码和实训总结。

《网站设计与开发》课程设计指导书 (1)

附件 3：课程设计报告书封皮 ........................................ 17
附件 4：课程设计成绩评定表 ........................................ 18
《网站设计与开发》课程设计指导书
课程设计是教学中的重要组成部分，是培养学生综合运用所学的基础理论，基本知识和基本技能，分析解决实际问题能力的一个至关重要环节。与其它教学环节彼此配合，相辅相成，在某种程度上是其他各个教学环节的继续，深化和检验。它的实践性和综合性是其它环节所不能代替的。本课程设计是学完《网站设计与开发》课程学生所必需的综合训练，在不同程度上提高各种能力，如：调查研究、查阅文献和收集资料的能力；理论分析、计划、设计和绘图的能力；上机调试、组织工作的能力；总结提高、撰写说明书的能力等。一、课程设计的目的通过课程设计，每个学生在指导教师的指导下，完成一定的任务，受到一次综合运用所学知识、独立完成某项技术工作的训练，从而培养和提高其独立工作能力，主要有以下四个方面的业务能力： 1．综合运用所学专业基本理论，提高查阅文献和资料的能力，其中包括提高阅读外文资料的能力。 2．培养学生进行方案设计，分析比较和设计、计算的能力。 3．培养学生网站开发，和调试计算机程序的能力。 4．提高学生进行技术总结和撰写说明书的能力。二、课程设计的一般步骤（参考）在指导教师的指导下，课程设计过程分：准备工作阶段、选题和资料收集阶段、分析和计划阶段、设计阶段、调试维护阶段、课程设计说明撰写阶段、课程设计批阅、复核阶段，具体内容和任务如下： 1．准备工作阶段根据教学计划，在课程设计前，由指导教师提出课程设计题目，学生根据指导教师提出的题目要求进行设计准备。 2．选题和资料收集本阶段的主要任务是对所学内容全面了解，根据指导教师提出的课题题目，选择自己所要设计的题目，选择所涉及的内容和技术资料，有针对性地进行学习，查询相关技术资料和文献，熟悉所需得开发设计工具的使用。 3．调研分析、计划阶段

网页设计与制作实验指导书

网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系2007年9月实验一网页设计基础实验一、实验目的1．掌握商务网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．熟悉页面排版，掌握网页布局的方法。

二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。

2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局⑵．“口”型（“国”字型）布局⑶．“三”型布局⑷．对称对比布局⑸．POP布局3．找出使用大色块和抽象线条构图风格的网站（至少各2个）；4．使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。

三、实验步骤与要求按“实验内容”中1～4完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：⑴．所访问各商务网站的风格及特点；⑵．各种版面布局网站的域名和所采用的版面布局形式；⑶．使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；⑷．10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。

四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、存成doc文件和html文件，上传到教师机D：\zuoye目录下实验二建立站点（2学时）一、实验目的：(1)熟悉DreamWeaverMX的界面及其操作(2)熟悉使用DreamWeaverMX建立站点，理解本地站点和远程站点的概念二、实验内容本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。

三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

网站设计开发实验报告

网站设计开发实验报告网站设计开发实验报告一、引言随着互联网的迅猛发展，网站设计与开发成为了一个热门的领域。

本实验报告旨在介绍我们小组在网站设计开发实验中的经验和成果。

二、实验目标我们小组的实验目标是设计并开发一个具有良好用户体验的网站。

我们希望通过这个实验，学习并掌握网站设计与开发的基本原理和技术，提升我们的团队协作能力和创造力。

三、实验过程1. 需求分析在开始设计与开发之前，我们首先进行了需求分析。

我们通过用户调研和市场调查，了解到目标用户的需求和偏好。

基于这些信息，我们确定了网站的定位和功能。

2. 界面设计在界面设计阶段，我们注重用户体验和视觉效果。

我们选择了简洁明了的设计风格，并采用了响应式布局，以适应不同屏幕尺寸的设备。

我们还使用了一些流行的设计元素和颜色搭配，以增强用户的视觉吸引力。

3. 数据库设计为了支持网站的功能，我们设计了一个合适的数据库结构。

我们根据网站需求，确定了数据库中的表和字段，并进行了关系建模和规范化处理。

我们还考虑了数据库的性能和安全性，采取了一些合适的优化策略。

4. 前端开发在前端开发过程中，我们使用了HTML、CSS和JavaScript等技术。

我们根据设计稿，编写了网站的HTML结构和样式，并添加了一些交互效果和动画。

我们还进行了跨浏览器和跨设备的兼容性测试，确保网站在不同环境下的正常运行。

5. 后端开发在后端开发过程中，我们使用了一种流行的服务器端语言和框架。

我们根据需求，编写了网站的后端逻辑和业务处理代码。

我们还进行了性能优化和安全防护，以确保网站的稳定和可靠。

四、实验结果经过几个月的努力，我们成功地完成了网站设计与开发实验，并取得了以下成果：1. 网站界面美观大方，符合用户期望；2. 网站功能完善，能够满足用户的需求；3. 网站响应速度快，用户体验良好；4. 数据库结构合理，能够支持网站的扩展和维护；5. 网站安全性高，能够有效防护各类攻击。

五、实验总结通过这次实验，我们小组深入学习了网站设计与开发的理论和实践。

网页设计实验指导书

3、查看重庆邮电大学网站主页的源代码，收藏到收藏夹中，将其设为主页。
4、利用记事本编辑一个页面文件名为 sy1-4.html，要求在标题栏中显示“这是我的第一个试验”，页面中显示若干段文字，字体颜色为红色，页面背景为黄色，文字不可选择，不可复制。参考实验步骤：
1．打开记事本，单击 [文件]菜单，选择[保存]命令，在打开的保存对话框中，先选择要保存的文件夹，保证保存类型选择“所有文件”，在文件名中输入：sy1-4.html，注意必须输入扩展名。
图 1-1 editplus 界面
图 1-2 新建 html 网页界面
5
2.使用 EditPlus 制作一行文字的网页使用 EditPlus 新建一个空白网页，观察网页的基本结构，了解基本结构所用标记
的作用，保存文件，在 IE 浏览器中查看网页运行效果。将<title>标记中的文本该为“单行文本”，在<BODY>标记之间添加文字“重庆邮
<H1>这里写书籍的名称</H1> <hr 标尺线属性> <P><font 这里设置字体属性>这里写作者姓名及书籍简介</font></P> <A href=”第一章文件的 url”>第一章</A>    <A href=”第二章文件的 url”>第二章</A>…… </body> </html> 注： 表示一个空格。各章文件结构如下： <html> <head> <title>这里输入标题栏内容</title> </head> <body 设置主体属性> <H1>这里写 xx 章节的名称</H1> <hr 标尺线属性> <P><font 这里设置字体属性>这里写本章第一段具体内容</font></P>…… <A href=”上一章文件的 url”>上一章</A>    <A href=”主页的 url”>返回目录</A>    <A href=”下一章文件的 url”>下一章</A> </body> </html> 【实验报告要求】

网站设计与前端开发作业指导书

网站设计与前端开发作业指导书第1章网站设计基础 (3)1.1 网站设计概述 (3)1.2 设计原则与规范 (3)1.2.1 设计原则 (3)1.2.2 设计规范 (4)1.3 设计工具与技术 (4)1.3.1 设计工具 (4)1.3.2 前端技术 (4)第2章前端开发技术概览 (4)2.1 前端开发概念 (4)2.2 HTML/CSS/JavaScript简介 (4)2.2.1 HTML (4)2.2.2 CSS (5)2.2.3 JavaScript (5)2.3 常用前端框架与库 (5)2.3.1 常用前端框架 (5)2.3.2 常用前端库 (5)第3章网站结构设计 (6)3.1 网站布局与导航 (6)3.1.1 网站布局 (6)3.1.2 网站导航 (6)3.2 网站信息架构 (7)3.2.1 信息分类 (7)3.2.2 信息组织 (7)3.3 用户体验设计 (7)3.3.1 界面设计 (7)3.3.2 内容呈现 (7)3.3.3 功能设计 (7)第4章网页视觉设计 (8)4.1 色彩与字体设计 (8)4.1.1 色彩选择与搭配 (8)4.1.2 字体设计 (8)4.2 图标与图片处理 (8)4.2.1 图标设计 (8)4.2.2 图片处理 (8)4.3 动画与交互设计 (9)4.3.1 动画设计 (9)4.3.2 交互设计 (9)第5章 HTML基础 (9)5.1 HTML文档结构 (9)5.1.1 文档类型声明（Doctype） (9)5.1.3 头部（Head） (9)5.1.4 主体（Body） (10)5.1.5 注释 (10)5.2 标签与属性 (10)5.2.1 标签 (10)5.2.2 属性 (10)5.3 表单与表格 (10)5.3.1 表单 (10)5.3.1.1 输入类型 (10)5.3.1.2 标签和字段集 (10)5.3.2 表格 (10)5.3.2.1 表格标题和表头 (10)5.3.2.2 行和单元格 (11)第6章 CSS样式与布局 (11)6.1 CSS选择器与优先级 (11)6.2 常用CSS样式属性 (11)6.3 布局方法与响应式设计 (12)第7章 JavaScript编程基础 (12)7.1 JavaScript语法与数据类型 (12)7.1.1 语法规则 (12)7.1.2 数据类型 (13)7.2 函数与对象 (13)7.2.1 函数 (13)7.2.2 对象 (13)7.3 事件处理与DOM操作 (13)7.3.1 事件处理 (13)7.3.2 DOM操作 (14)第8章前端框架应用 (14)8.1 Bootstrap框架 (14)8.1.1 Bootstrap优势 (14)8.1.2 Bootstrap使用方法 (14)8.2 Vue.js框架 (15)8.2.1 Vue.js优势 (15)8.2.2 Vue.js使用方法 (15)8.3 React.js框架 (15)8.3.1 React.js优势 (15)8.3.2 React.js使用方法 (15)第9章网站优化与调试 (16)9.1 页面功能优化 (16)9.1.1 优化资源加载 (16)9.1.2 优化页面渲染 (16)9.1.3 优化JavaScript执行 (16)9.1.4 优化浏览器缓存 (16)9.2.1 优化HTTP请求 (16)9.2.2 优化传输内容 (16)9.2.3 优化服务器响应 (17)9.3 常用调试工具与技巧 (17)9.3.1 浏览器开发者工具 (17)9.3.2 功能分析工具 (17)9.3.3 命令行工具 (17)9.3.4 代码调试技巧 (17)第10章前端工程化与部署 (17)10.1 版本控制与协同开发 (17)10.1.1 版本控制概述 (17)10.1.2 Git的使用 (17)10.1.3 团队协同开发 (18)10.2 自动化构建与部署 (18)10.2.1 自动化构建 (18)10.2.2 构建工具的选择 (18)10.2.3 自动化部署 (18)10.3 前端安全防护策略 (18)10.3.1 前端安全问题概述 (18)10.3.2 防护策略 (18)10.3.3 加密与认证 (18)第1章网站设计基础1.1 网站设计概述网站设计是指通过对网站的整体布局、色彩搭配、版面结构、交互效果等方面进行创意和规划，以实现用户界面美观、功能完善、易于使用的设计过程。

《网站设计与开发》(课程设计)教学实验大纲

《网站设计与开发》（课程设计）教学实验大纲课程代码：0801257课程负责人：孟健课程中文名称:网站设计与开发（课程设计）课程类别：集中实践教学课程学分数：2（其中实验2学分）课程学时数：4周授课对象：电子商务专业本科生本课程的前导课程：计算机基础、计算机网络、网站设计与开发等一、本课程实验教学的目的该课程设计的目的是在“网站设计与开发”课程以及相关课程的基础上，培养学生进行网站设计与开发的实践能力，将课堂所学的关于网站设计与开发的基本理论、技术、方法以及开发环境和工具应用到实际项目开发中，实践从需求分析到网站发布与维护的网站开发全过程，并培养团队合作精神，从而有助于提高电子商务人才的实践水平。

二、本课程实验教学应达到的基本要求强调以实践为主的教学方法，学生分成小组进行网站开发项目，实践从确定主题、需求分析到网站发布、推广的全过程。

在课程设计过程中，以学生实践为主，教师指导为辅，充分调动学生自主开发的兴趣与积极性，从而达到提高实践能力的目的。

三、学生应掌握的实验技术及基本技能学生应在理解和掌握课堂所学有关网页设计和网站建设知识的基础上，熟悉网站开发环境及工具的使用（包括Dreamweaver、Photoshop等），掌握运用(X)HTML、CSS进行网页设计与制作的方法，利用常用的网站开发环境及工具，通过实际网站项目的开发，实践网站开发的全过程，包括网站规划、设计、创建、测试及发布等，从而提高学生对所学知识和技术的综合应用能力。

四、实验项目的设置与选定原则实验项目的设置与选定主要遵循以下原则：1、重点性原则。

主要针对本课程要求学生掌握的重点内容设置实验。

2、操作性原则。

设置的实验项目操作性要强，能提高学生的动手能力。

3、实际性原则。

根据实验室已有条件设置实验项目。

五、需要的实验教学条件Dreamweaver，PhotoShop，JavaScript，IE浏览器。

六、实验报告与考核1.实验报告要求：每完成一次实验，要求学生提交实验报告。

《网页设计与制作》课程实训指导书

《网页设计与制作》课程设计实训指导书一、实训目的《网页制作课程设计》是电子商务专业的一门重要的专业必修课程，也是该专业的一门重点建设课程。

随着电子商务的迅速发展，网站的建设也越来越重要。

目前很多企业都在上网，开展网络营销活动，设计并制作企业自己的商务网站则是企业实现网络化经营的重要手段。

因此，作为电子商务专业的学生，学习网页的设计与制作是十分必要的。

通过课程设计的训练，使每位学生在掌握理论知识基础上，通过身体力行的实践具备网页设计与制作的相关技术及网页制作的操作技能，能独立设计小型WEB站点。

二、实训任务通过对网站的设计，使学生熟练应用网站设计软件，使学生对网站建设有一个综合系统的掌握。

在制作过程中，主要完成对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成项目作品。

具体要求是：（1）网站中网页的个数不少于10页（2）至少有一页用到表格布局（3）至少有一页用到CSS+DIV布局（4）至少有一页使用框架布局，至少有一页使用页内框架（5）为该网站设计一个调研问卷（6）适当使用图片，并把所有的图片放在一个文件夹下（7）可以借助Dreamweaver工具三、实训计划四、实训考核与评分根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。

评分参考标准如下表所示。

网站开发实训的参考评分标准作品完成情况当场验收考核，实训报告在14周上交。

附录一：实训报告内容•封面•目录•网站全名及logo 标志；•建立网站的目的、意义；•网页设计制作最突出的创意（如Amgo “俺们走”,logo 设计有特色）；•网站的栏目设计；•色彩搭配及其含义（如绿色+ 金黄+ 淡白，体现优雅, 舒适的感觉；）•网站的结构图和页面组成；•网站设计中具体实现的几个关键功能和相关技术说明（例如布局的方法：应用层、应用表格、应用模板、应用Flash 或其他脚本技术）；•对所做各网页的抓图，并做简要说明；•网站建设的心得体会和扩展性分析；•参考资料附录二：参考网站主题（1）制作教学资源网站。

网站开发的参考案例《网页设计与制作》综合实训指导书网

《网页设计与制作》综合实训指导书网站开发的参考案例1.1 规划网站1．策划网站主题我们网站是德阳嘉兴别墅设计公司．公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念，坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨，追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格，以新颖时尚的设计、规范精致的施工和热情人性的服务，为业主构筑温馨、舒适、精美、典雅的家园。

2．确定网站风格确定好站点主题后，根据该主题选择站点的风格。

所以本案例所建立的网站是别墅设计类网站。

本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格或层实现效果。

（2）背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。

（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。

3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。

本案例的“别墅设计网”的栏目结构如表17-1所示。

表17-1 “别墅设计网”的栏目结构为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展示，公司简介。

4．规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。

“别墅设计网”的目录结构，各文件夹的所存放文件类型如表17-3所示。

表17-3 网站的目录结构及其存放的文件类型网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。

本网站的链接结构采用“网状”链接结构，结构图如图17-2所示。

图17-2“网页教学网”中的链接结构5．主要页面布局设计使用表格对首页与其他几个主面导航页面的布局结构草图进行设计，主页布局结构草图如图17-3所示，两种形式的导航页面布局结构草图如图17-4和图17-5所示。

网站设计与开发试验指导书学生_百度文库

网站设计与开发实验指导书（学生用书）李皎网络与接口实验室实验一配置开发环境一、实验目的1．掌握Visual Studio 2005的安装过程。

2．掌握IIS的安装与配置方法。

3．掌握Visual Studio 2005开发网站的过程。

二、实验设备PC机一台。

三、实验内容1．完成课本25页，上机实验题1。

2．IIS的安装与配置。

四、实验要求1．在Visual Studio 2005开发环境中在完成上机实验题1，设计出第一个WEB应用程序。

通过该过程熟悉网站开发过程和Visual Studio 2005开发环境。

2．安装IIS。

3．配置IIS。

4．将设计的第一个WEB应用程序发布，并在局域网环境中访问网站。

实验二应用程序设计一、实验目的1．掌握变量的定义方法和变量类型转换方法。

2．灵活应用操作符和控制语句。

3．掌握.NET环境下应用程序的多种运行方法和查错方式。

4．掌握应用程序中常用控件的属性和事件。

5．掌握事件与事件过程的关系，把界面设计和程序设计结合起来，完成常用功能的设计。

6．异常处理的方法和应用。

二、实验设备PC机一台。

三、实验内容12．用多种循环结构计算n!。

四、实验要求1．建立应用程序，合理选择输入输出控件和控制按钮，对界面进行布局，使界面美观、操作方便。

2．在事件过程中编写分支程序和循环程序，达到题目要求。

3．对程序进行连续运行、单步运行和设断点运行，熟悉程序调试方法和查错方法。

4．对输入数据格式错或运算结果超范围的情况要有相应的提示信息。

实验三 HTML表单控件的应用一、实验目的1．了解服务器端控件的执行过程。

2．掌握常用的HTML标记转换为HTML对象的方法。

3．掌握HTML服务器端控件的属性、事件和编程控制方法。

二、实验设备PC机一台。

三、实验内容HTML控件的应用四、实验要求1．完成课本53页上机实验题2。

2．使用HTML控件设计如下网页。

使用Table对网页进行布局，并通过CSS样式表改变网页的外观。

网站设计作业指导书

网站设计作业指导书一、引言本指导书旨在帮助学生完成网站设计作业，提供一系列详细的步骤和要求。

学生需根据指导书中的要求进行网站设计，并完成相关作业。

二、项目背景（此部分主要介绍网站设计作业所涉及的背景和目的）三、项目需求（此部分详细说明学生在网站设计作业中需要满足的需求，可以列出具体要求的清单）四、设计步骤（此部分详细说明学生在进行网站设计时，应按照以下步骤进行）1. 网站定位和目标群体分析在网站设计之前，学生需要明确网站的定位和目标群体。

学生需进行调研和分析，确定网站的定位和目标群体的需求和特点。

2. 页面结构规划学生需要根据网站定位和目标群体的特点，进行页面结构规划。

学生应考虑页面间的导航、页面内容的布局、页面元素的排列等因素。

3. 色彩和图像选择学生需要选择适合网站定位和目标群体的色彩和图像。

学生可运用色彩搭配理论和图像设计原则，选取和搭配适合的颜色和图像。

4. 布局和排版设计学生需根据网站定位和目标群体的需求，进行布局和排版设计。

学生应注意页面的整体美观性、信息的清晰性以及内容的层次性。

5. 导航和交互设计学生需要设计合理的导航和交互方式，以提升用户的体验和便利性。

学生可运用导航设计原则和交互设计原则，设计符合用户习惯和心理的导航和交互方式。

6. 响应式设计学生应考虑不同设备和屏幕尺寸下的网页显示效果。

学生需进行响应式设计，以适应各种终端设备上的显示和使用。

7. 网站测试和优化学生在完成网站设计后，需要进行测试和优化。

学生可进行功能测试、兼容性测试、用户体验测试等，以确保网站的正常运行和用户的满意度。

五、作业提交要求（此部分列出学生完成网站设计作业后，应满足的作业提交要求）六、评分标准（此部分列出评分标准，包括设计质量、创意性、功能完整性等方面的评分指标）七、注意事项（此部分列出学生在完成网站设计作业时需要注意的事项和常见错误，如避免侵权、注意版权等）八、总结（此部分对整篇指导书进行总结，并鼓励学生努力完成网站设计作业）以上是对网站设计作业指导书的简要分节论述，希望能够对学生进行有针对性的指导和帮助。

网站设计实验指导书 1

实验一JSP简介一．实验目的通过本次实验教学，使学生了解JSP网站开发环境的搭建。

二．实验内容安装相关软件，搭建开发环境，进行简单测试。

三．实验步骤（1）安装JDK 7.0（2）安装Eclipse（3）Tomcat并进行环境配置。

四．实验环境PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat实验二JSP页面设计一．实验目的通过本次实验教学，使学生掌握JSP页面的基本结构以及运行原理，掌握Java 开发语言。

二．实验内容编写两个JSP页面，分别为inputName.jsp和people.jsp。

三．实验步骤（1）inputName.jsp的具体要求该页面有一个表单，用户通过该表单输入自己的姓名并提交给people.jsp页面。

（2）people.jsp页面在程序片中获取inputName.jsp页面提交的姓名，然后调用judge()创建person对象、调用addPerson方法将用户的姓名添加到成员变量person末尾。

如果inputName.jsp页面没有提交姓名，或姓名含有的字符个数大于10，就使用<jsp:forward page="要转向的页面"/>标记将用户转到inputName.jsp页面。

四．实验环境PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat实验三JSP标记一．实验目的掌握JSP指令标记、动作标记以及自定义标记。

二．实验内容编写四个JSP 页面：one.jsp 、two.jsp、three.jsp和error.jsp，one.jsp 、two.jsp和three.jsp 页面都含有一个导航条，以便让用户方便地单击超链接访问这三个页面，要求这三个页面通过使用include动作标记动态加载导航条文件head.txt。

三．实验步骤（1）在one.jsp页面输入一个1～100之间的整数，并提交给该页面；根据输入整数的不同数值跳转到不同的页面。

网站设计与开发实验报告

网站设计与开发实验报告班级：信管一班学号：**********姓名：李**实验报告一、实验题目设计符合特定要求的HTML文件（表单、表格）二、实验内容1. 用HTML语言制作一个会员登录表单，包括控件如下：用户名：密码：重复密码：职业：学生、教师、工人、公务员、军人、医生兴趣爱好：阅读、音乐、游泳、球类、烹饪等个人说明：提交按钮、重置按钮➢实验代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 会员登录表单<title>会员登录表单</title></head><body><FORM NAME = "" METHOD = "get" ACTION = "URL" ><p>用户名: <INPUT TYPE = "text" NAME = "youname" VALUE ="" SIZE = "9" MAXLENGTH = "4"><p>密码：<INPUT TYPE = "password" NAME = "password" VALUE = "" SIZE= "9" MAXLENGTH = "10"><p>重复密码：<INPUT TYPE = "password" NAME = "password" VALUE = "" SIZE= "9" MAXLENGTH = "10"><p>你的职业是：<select name="jobs"size="1" ><OPTION VALUE = "student" >学生</OPTION><OPTION VALUE = "teacher">教师</OPTION><OPTION VALUE = "worker">工人</OPTION><OPTION VALUE = "gongwuyuan">公务员</OPTION><OPTION VALUE = "doctor">医生</OPTION></SELECT><P>你的爱好是：<p><INPUT TYPE = "checkbox" NAME = "box" VALUE="reading">阅读<INPUT TYPE = "checkbox" NAME = "box" VALUE = "music" >音乐<INPUT TYPE = "checkbox" NAME = "box" VALUE = "swimming" >游泳<INPUT TYPE = "checkbox" NAME = "box" VALUE="balls">球类<INPUT TYPE = "checkbox" NAME = "box" VALUE="cooking">烹饪<INPUT TYPE = "checkbox" NAME = "box" VALUE="else">其他<p>个人说明<p><TEXTAREA NAME = "" ROWS = "5" COLS = "15" ></TEXTAREA><p>上传个人简历：<INPUT TYPE = "file" NAME = "instruction" SIZE = "10" VALUE = ""> <p><INPUT TYPE = "submit" NAME = "button" VALUE = "提交" ><INPUT TYPE = "reset" NAME = "button" VALUE = "重置" ></FORM></body></html>➢实验截图2. 设计一个如下图所示的表格➢实验代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title></head><body><table frame="box" cols="3" rows="3"><tr><th colspan="2">第1个单元格</th><th rowspan="2">第2个单元格</th><tr><th >第3个单元格</th><th >第4个单元格</th></tr><tr><th>第5个单元格</th><th colspan="3">第6个单元格</th></tr></table></body></html>➢实验截图3. 用HTML实现如下功能：在表单中，显示如下信息“您用什么方式购买证卷？网上交易、电话交易、经纪人代理”，用户只能从三个选项中选择一项➢实验代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><FORM NAME = "" METHOD = "get" ACTION = "URL" ><h1>您用什么方式购买证券？<p><INPUT TYPE = "radio" NAME = "box" VALUE = "wangshangjiaoyi" >网上交易<INPUT TYPE = "radio" NAME = "box" VALUE = "dianhuajiaoyi" >电话交易<INPUT TYPE = "radio" NAME = "box" VALUE = "jingjirendaili" >经纪人代理</h1></FORM></body></html>➢实验截图三、实验感想虽然我按时按量完成了实验任务，但是在实验时发现自己还是不太熟练，我认为自己还需要加强练习。