《Web前端开发》-实验指导书

实验一网站主页版面的设计一、实验目标1、要求学生掌握网站设计基本知识。

2、如何规划网站。

3、熟悉Photoshop软件的使用。

二、实验内容1、学生自行下载素材，设计某网站主页版面。

三、实验参考步骤（一）画布处理1、启动软件，新建一个画布大小为1002pxX810px，颜色模式：RGB，分辨率72.2、渐变工具：淡蓝-白色，从上向下垂直线形渐变填充整个画布。

、3、为进行网页的布局比例，按“视图”选择“标尺”，设置相应标尺，已被布局使用（二）、创建上方的TOP和导航条、LOGO1、将素材图片“top”插入到画布的最顶端，与标尺对齐；TOP（此背景及建筑可自由进行合成，使用抠图命令进行合成处理）由素材TOP1、TOP2合成处理完成：使用了魔棒工具进行选取白色区域，工具属性栏，填加到选区，补充选区其他白色区域。

选择菜单-反选，选择建筑物区域选择移动工具，编辑菜单-拷贝将选区内容粘贴到TOP2背景中。

再使用移动工具进行位置调整。

2、在图片上用文本工具在图片中间插入文字“品质成就价值专业成就品质”，使用华文行楷，30号，3、制作公司LOGO；新建48*52点画布，前景色使用蓝色填充，新建图层组，继续新建图层：使用椭圆选取工具制作一个椭圆选区，进行描边2象素白色使用动作命令及文字工具制作LOGO：打开动作调板：窗口菜单-动作，，新建动作，开启动作记录，，复制椭圆图层编辑菜单-自由变换，旋转+30°，回车应用，动作停止记录，选择动作1，点击播放按钮进行复制播放输入文字COME使用移动工具将LOGO放入合适位置4、导航条制作：使用圆角矩形工具绘制一个圆角的长方形，两个图层进行颜色渐变，颜色和效果如下具体：使用工具箱圆角矩形工具，设置半径45象素，绘制圆角矩形双击属性工具栏上的，调出渐变编辑器，进行线性渐变编辑填充按CTRL单击矩形选区图层取得圆角矩形选区，通过选区布尔减选区运算制作选区新建图层2填充白色、降低图层部透明度5、文字效果，使用横排文字工具，输入文字，并设置为加粗插入文字后的效果为6、素材图标制作：圆角矩形、描边：橘色；正方形通过变形制作成菱形描边：红色，输入文字，使用移动工具调整合适位置。

计算机专业Web应用开发实习大纲及指导书计算机教研室2013.06一、实习目的1. 通过本课程实习及其前后的准备与总结，复习、领会、巩固和运用基于Web设计课堂上所学的基于Web开发方法和知识，初步掌握开发一个基于Web的系统分析、系统设计、系统实现、系统维护的方法，特别是快速原型开发、面向对象分析与面向对象设计。

2.了解软件工具与环境对于项目开发的重要性，并且重点深入掌握好一、两种较新或较流行的软件工具或计算机应用技术，为综合应用本专业所学习的多门课程知识（如：软件工程、程序设计语言、操作系统、数据库、网络编程等）创造实践机会。

3.通过参加小组团队的开发实践，为毕业后适应团队合作开发模式打下基础，了解项目管理、团队合作、文档编写、口头与书面表达的重要性。

并在课程设计实践中，提高自学能力，书面与口头表达能力，创造能力和与团队其他成员交往和协作开发软件的能力，提高今后参与开发稍大规模实际软件项目和探索未知领域的能力和自信心。

二、实习过程及具体要求1、分组并分工。

1~2人一组，并且明确每个学生在开发小组中扮演的角色及承担的职责(包括选出组长)。

2、小组自行选题，必须是基于Web的系统、网站的开发与设计，确定目标、方案，准备并试用开发环境与工具。

3、学习与搜集素材,借阅,购置必要的书籍与材料。

4、各阶段的开发工作:开发过程中，小组长应承担起领导责任，不定期召开小组开发工作研讨会（建议2－3次）。

会前有准备，会议最好有记录（包括日期、出席人员、主题、讨论纪要、结论与问题、计划与行动、分工），会后有分工和检查，保存好记录供老师检查（不强制要求）。

工作会议的可能内容是：1) 选题。

系统内容及开发方案研讨、小组成员分工、开发计划拟定。

2) 同类著名web系统浏览，分析，需求分析，原型及成员分工确认。

3) 原型主页设计及网页组织研讨。

4) 数据库设计及应用研讨。

5) 交互网页开发技术或其他专门开发技术或开发工具使用的研讨。

web前端开发技术实训大纲
Web前端开发技术实训大纲
一、实训目标
本实训的目标是培养学生掌握Web前端开发的核心技术，包括HTML、CSS、JavaScript等，并能够独立完成简单的Web页面设计和开发。

二、实训内容
1. HTML基础
HTML文档结构
常用标签及其属性
列表、表格、表单等常见元素的使用
2. CSS基础
CSS选择器
常用样式属性
盒模型、布局、浮动等概念
3. JavaScript基础
JavaScript语法规则
DOM操作、事件处理等概念
常见JavaScript效果实现，如轮播图、下拉菜单等
4. 前端框架与工具
Bootstrap等前端框架的使用
Git等版本控制工具的基本操作
5. Web性能优化与测试
页面加载速度优化方法
前端性能测试工具的使用，如Google PageSpeed Insights等6. 项目实战
完成一个简单的企业官网或个人博客的设计与开发
实战中注重代码规范、可维护性及用户体验等方面的实践经验积累三、实训安排
本实训共计8周，具体安排如下：
第1周：HTML基础（2天）
第2周：CSS基础（3天）
第3周：JavaScript基础（3天）
第4周：前端框架与工具（2天）
第5周：Web性能优化与测试（2天）
第6-7周：项目实战（5天）
第8周：项目答辩与总结（2天）
四、实训要求
1. 熟练掌握HTML、CSS、JavaScript的基本语法和常用技巧；
2. 熟练使用至少一种前端框架和工具；
3. 了解Web性能优化和测试的方法和工具；
4. 能够独立完成一个简单的Web项目；。

Web前端开发实验指导书20XX年09月目录实验1 HTML基础与布局元素 (3)实验2 表格与表单的应用 (6)实验3 框架 (8)实验4 CSS样式表基础 (12)实验5 CSS样式布局 (16)实验6 Dreamweaver制作网页 (19)实验7 网站设计 (22)实验8 JavaScript基础 (26)实验9 JavaScript对象 (29)实验10 DOM编程 (33)实验11 JavaScript常用特效 (36)实验1 HTML基础与布局元素一、实验目的1．掌握使用HTML的基本结构创建网页2．掌握使用行级和块级标签组织页面内容3．掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果任务3行级元素编写HTML代码，实现如图所示的页面效果。

任务4超链接编写HTML代码，实现导航菜单的链接●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。

●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。

●单击ww.html的返回链接可以返回到lj.html。

●单击“联系我们”，将自动打开本机的电子邮件程序。

小结及思考题扩展训练：实现如图所示的页面效果实验2 表格与表单的应用一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。

2. 会使用表格标签属性修饰美化表格。

3. 了解表单的基本形式，掌握表单元素的使用方法。

二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1. 使用的操作系统及版本。

Windows XP Professional2. 使用的编译系统及版本。

《Web前端开发》实验指导书目录实验1 HTML基础与布局元素 (3)实验2 表格与表单的应用 (6)实验3 框架 (8)实验4 CSS样式表基础 (12)实验5 CSS样式布局 (16)实验6 Dreamweaver制作网页 (19)实验7 网站设计 (22)实验8 JavaScript基础 (26)实验9 JavaScript对象 (29)实验10 DOM编程 (33)实验11 JavaScript常用特效 (36)实验1 HTML基础与布局元素一、实验目的1．掌握使用HTML的基本结构创建网页2．掌握使用行级和块级标签组织页面内容3．掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果任务3行级元素编写HTML代码，实现如图所示的页面效果。

任务4超链接编写HTML代码，实现导航菜单的链接●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。

●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。

●单击ww.html的返回链接可以返回到lj.html。

●单击“联系我们”，将自动打开本机的电子邮件程序。

小结及思考题扩展训练：实现如图所示的页面效果实验2 表格与表单的应用一、实验目的1.掌握表格的基本结构，熟悉表格标签的使用。

2.会使用表格标签属性修饰美化表格。

3.了解表单的基本形式，掌握表单元素的使用方法。

二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1.使用的操作系统及版本。

Windows XP Professional2.使用的编译系统及版本。

《Web开发技术》实验指导书模板（JSP版）目录实验一搭建JSP运行的实验环境 (1)实验二JSP页面 (3)实验三显示不同大小的“你好JSP” (7)实验四JSP指令和动作 (10)实验五Tag文件的代码复用 (12)实验六中文显示服务器端日期 (14)实验七JSP内置对象 (19)实验八session对象 (23)实验九简易留言板 (28)实验十JSP中使用Java Bean (31)实验十一JSP中的文件操作 (41)实验十二JSP中使用数据库 (48)实验十三Java Servlet (66)实验十四网上书店 (71)实验报告 (76)实验一搭建JSP运行的实验环境一、实验目的（1）掌握JSP运行环境的安装与配置（2）理解JSP与Servlet的关系（3）运行简单的JSP页面，理解JSP的运行原理二、实验工具（1）JDK1.4、JDK1.5或JDK1.6，可以从SUN公司的网站免费下载（2）编辑工具－记事本（3）Tomcat服务器，也可以从网上免费下载三、实验步骤（1）按教材中演示安装JDK（2）按教材中演示安装Tomcat（3）启动Tomcat服务器，在浏览器中输入：http://localhost:8080，观察主页内容（4）观察Tomcat安装目录下的各个子目录的内容（5）打开记事本，输入下列源代码并保存为exer1.jsp。

将此文件复制到Tomcat安装目录下的webapps\ROOT目录下，运行该页面，观察其对应的Servlet源代码。

exer1.jsp的代码：<%@ page contentType="text/html;charset=GB2312" %> <!-- jsp指令标签--><%@ page import="java.util.Date" %> <!-- jsp指令标签--><%! Date date; // 数据声明int sum;public int add(int m,int n) // 方法声明{ return m+n;}%><HTML><BODY bgcolor=cyan> <!—html标记--><FONT size=4><P>程序片创建Date对象：<% Date date=new Date(); //java程序片out.println("<BR>"+date);sum=add(12,34);%><BR>在下一行输出和:<BR><%= sum+100 %> <!-- Java表达式--></FONT></BODY></HTML>（6）将exer1.jsp文件复制到Tomcat安装目录下的webapps\examples目录下，运行该页面，观察其对应的Servlet源代码。

长春大学20 15 — 2016学年第二学期 Web前端开发技术课程实验报告学院：计算机科学技术专业：软件工程班级：软件14402 学号： 041440211 姓名：武嘉琪任课教师：车娜实验一构建HTML页面一、实验目的熟悉HTML制作网页的基础知识，并能熟练运用学过的内容制作、设计图文混排的网页。

二、内容及要求运用学过的代码设计一个图文混排网页，满足如下要求：1.既有图像又有文字，并且呈左右排列。

2.文字部分由标题和段落文本组成，它们的字体和字号不同。

3.在段落文本中，段落前有2字符留白，一些文字以特殊的颜色加以突出显示。

三、实验原理文本：font可以跟color、size、face等属性根据不同的值对文本进行修改；图片：img标记可以跟border、height、width、align、vspace、hspace 等属性根据不同的值对滚动字进行设置；其他相关内容：各级标签、标题设置、背景图等。

四、实验步骤1、确立自己的网页主题选择传智博客设计学院作为本次网页设计的主题。

2、网页基本设计(1)应用h2标记设计标题样式。

(2)应用font标记及其face、size、color等属性设计文本字体样式。

(3)应用p标记设计文本段落格式。

(4)应用img标记及其src、alt、align、hspace、height、width等属性设计图片排版样式。

五、实验代码及网页效果图1．搭建基本结构使用<img/>标记插入图像。

使用<h2>标记和<p>标记分别设置标题和段落文本。

并对< img />标记应用align属性和hspace属性实现图像居左文字居右、且图像和文字之间有一定距离的排列效果。

关键代码如下：<img src="作业/logo.gif" alt="网页设计、平面设计、UI设计"align="left" hspace="30" height="150" width="250"/><h2>传智播客设计学院</h2><p>传智播客设计学院</p >效果如图1-1所示。

web技术实验指导书Web技术实验指导书内容简介Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。

对于学生从事Web系统的研发、使用和维护有重要意义。

本课程概念多、内容涉及面广、系统性强。

通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。

本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。

通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。

实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。

在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。

中南大学信息科学与工程学院鲁鸣鸣制定上机实验要求及规范Web技术课程具有比较强的实践性。

上机实验是一个重要的教学环节。

一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。

但是容易忽略实验的总结，忽略实验报告的撰写。

对于一名大学生必须严格训练分析总结能力、书面表达能力。

需要逐步培养书写科学实验报告以及科技论文的能力。

拿到一个题目，一般不要急于编程。

正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。

一、实验报告的基本要求：一般性、较小规模的上机实验题，必须遵循下列要求。

养成良好的习惯。

姓名班级学号日期题目i. 问题描述ii. 设计简要描述iii. 程序清单iv. 结果分析v. 调试报告：实验者必须重视最后这两个环节，否则等同于没有完成实验任务。

《Web前端技术实训》任务书一、实训课题名称1、教育类网站的设计与制作2、商业类网站的设计与制作3、旅游休闲类网站的设计与制作4、体育健身类网站的设计与制作二、课题设计目的通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。

培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web 前端开发技术结合起来，在实训环节中进行运用。

为以后学习动态网站打下基础。

三、任务要求：用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。

在编写文档时，必须严格遵照要求，最后提交文档。

功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner （简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。

各页面之间通过超链接切换。

最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。

四、课题设计报告书要求：1、课题设计报告书第一页为封面，封面上写清楚标题、班级、姓名、指导老师、完成日期。

2、课题设计报告书第二页为本任务书。

3、课题设计报告书第三页为教师评语。

4、课题设计报告书第四页为目录。

5、课题设计报告书第五页开始为具体内容：（1）开发背景（2）网站分析设计部分1）客户需求分析2）网站风格定位3）网站建设方案●网页风格创意设计●网站栏目划分●栏目内容介绍●网站拓扑图4）网站效果图（3）网站制作部分1）效果图制作2）网页素材及网站架构制作3）首页制作页面设计4）子页面制作6、课题设计报告书最后一页是本次课程设计的小结和参考文献。