admin 管理员组

文章数量: 1184232


2024年3月14日发(作者:fork函数源码)

Web基础实训报告

目录

一、实训简介........................................ 错误!未定义书签。

二、实训内容........................................ 错误!未定义书签。

1、HTML ......................................... 错误!未定义书签。

2、CSS .......................................... 错误!未定义书签。

3、JavaScript ................................... 错误!未定义书签。

4、jQuery ....................................... 错误!未定义书签。

5、jQuery easyUI ................................ 错误!未定义书签。

6、jQuery easyUI的基本插件...................... 错误!未定义书签。

(1)基本插件................................ 错误!未定义书签。

(2)布局管理器.............................. 错误!未定义书签。

(3)菜单和按钮.............................. 错误!未定义书签。

(4)表单.................................... 错误!未定义书签。

(5)窗口.................................... 错误!未定义书签。

(6)数据表格和树形菜单...................... 错误!未定义书签。

三、实训过程........................................ 错误!未定义书签。

1、实训 ......................................... 错误!未定义书签。

(1)内容.................................... 错误!未定义书签。

(2)目的.................................... 错误!未定义书签。

2、实践 ......................................... 错误!未定义书签。

(1)制定网站主题............................ 错误!未定义书签。

(2)网站简介................................ 错误!未定义书签。

(3)收集素材................................ 错误!未定义书签。

(4)网站规划................................ 错误!未定义书签。

(5)网站制作................................ 错误!未定义书签。

(6)网站测试................................ 错误!未定义书签。

3、编写文档 ..................................... 错误!未定义书签。

四、实训总结........................................ 错误!未定义书签。

一、实训简介

Web本意是蜘蛛网和网的意思。在这个遍布网络的世界里,Web网络成为不可或缺并且

极其重要的一部分。Web功能强大,其内容包括存储在世界各地Internet计算机中的大量

文档的集合。Internet将海量的信息以某种关联的文档形式组织在一起,每一个文档将会

以主页的形式展现,这些主页是一种超文本信息,通过超链接进行连接。

Web标准并不是一个单一的标准,而是一个系列的标准的集合。Web标准中具有代表性

的几种语言有:XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM

文档对象模型、JavaScript脚本程序设计语言等。

本次实训主要是学习jQurey,它是一个优秀的JavaScript框架,是轻量级的js库,

它兼容CSS3,还兼容各种浏览器(IE +, FF +, Safari +, Opera +)。jQuery使用户能更

方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

本次实训的目的是通过对JavaScript的学习,学会使用HTML标记语言,通过CSS对页

面的布局,在HTML基础上,使用JavaScript开发交互式动态Web网页。能够熟练使用

JavaScript语言和jQurey对网页界面实现动画效果,让网页能够动态显示,美观大方。

二、实训内容

1、HTML

HTML是超文本标记语言,互联网传输的标准语言。HTML具有很大的兼容性,例如

  • 并不一定要用

  • 来对其进行关闭,因此使用起来比较方便。

    2、CSS

    CSS是层叠样式表的简称。为了弥补HTML在显示属性上的不足,W3C协会制定了这一套

    扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,并增加了新的概念,

    例如类、层等,还可以对文字进行重叠、定位等操作。它提供了更为丰富多彩的样式;同时

    CSS可集中进行样式管理。另外,CSS允许将样式定义单独存储于样式文件中,这样就可以

    进行样式管理,不仅便于样式管理,还可以在多个HTML文件共享样式定义。一个HTML文件

    允许引用多个不同的CSS样式文件中的样式定义。在网页制作时采用CSS技术,可以有效地

    对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制

    3、JavaScript

    在HTML基础上,使用JavaScript可以开发交互式动态Web网页

    4、jQuery

    jQuery是一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各

    种浏览器(IE +, FF +, Safari +, Opera +)。jQuery使用户能更方便地处理HTML documents、

    events、实现动画效果,并且方便地为网站提供AJAX交互。

    jQuery还有一个比较大的优势是,它的文档说明很全,而且各种 应用也说得很详细,

    同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容

    分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可

    5、jQuery easyUI

    easyui是一个基于jquery的集成了各种用户界面的插件。

    使用easyui不需要写太多javascript代码,一般情况下只需要使用一些html标记来

    定义用户接口。

    easyui非常简单,但是功能非常强大

    6、jQuery easyUI的基本插件

    (1)基本插件

    简单载入器-easyloader

    使用方法:

    1.

    2.

    = '../'; 'Title', 'load ok');

    });

    一般拖动-draggable

    使用方法:

    1.

    " style="width:100px;height:100px;">

    2.

    脚本语言:

    1.

    2.

    3.

    拖动至容器-droppable

    使用方法:

    1.

    " style="width:100px;height:100px;">

    $('#dd').draggable({

    handle:'#title'

    });

    脚本语言:

    1.

    2.

    3.

    缩放-resizable

    使用方法:

    1.

    eight:600" style="width:100px;height:100px;border:1px solid #ccc;">

    iv>

    $('#dd').droppable({

    accept:'#d1,#d3'

    });

    脚本语言:

    1.

    2.

    3.

    4.

    分页-pagination

    使用方法:

    1.

    ize:10" style="background:#efefef;border:1px solid #ccc;">

    $('#rr').resizable({

    maxWidth:800,

    maxHeight:600

    });

    脚本语言:

    1.

    2.

    3.

    4.

    $('#pp').pagination({

    total:2000,

    pageSize:10

    });

    搜索框-searchbox

    使用方法:

    1.

    2.

    data-options="searcher:qq,prompt:'Please Input Value',

    menu:'#mm'">

    3.

    脚本语言:

    4.

    5.

    6.

    7.

    8.

    进度条-progressbar

    使用方法:

    1.

    ="width:400px;">

    脚本语言:

    1.

    2.

    3.

    $('#p').progressbar({

    value: 60

    });

    (2)布局管理器

    控制面板-panel

    选项卡-tabs

    可伸缩面板-accordion

    布局面板-layout

    (3)菜单和按钮

    菜单-menu

    链接按钮- linkbutton

    菜单按钮- menubutton

    分隔按钮- splitbutton

    (4)表单

    表单- form

    表单验证- validatebox

    自定义组合框- combo

    可装载组合框- combobox

    组合树- combotree

    组合表格- combogrid

    数字验证框- numberbox

    日期组合框- datebox

    日期时间组合框- datetimebox

    日历- calendar

    调节器- spinner

    数字调节器- numberspinner

    时间调节器- timespinner

    (5)窗口

    窗口- window

    对话窗口- dialog

    消息窗口- messager

    (6)数据表格和树形菜单

    数据表格- datagrid

    属性表格- propertygrid

    树形菜单- tree

    树形表格- treegrid

    三、实训过程

    1、实训

    老师给我们讲解了本次实训的主要内容和实训目的

    (1)内容

    学习jQurey,它是一个优秀的JavaScript框架,是轻量级的js库,它兼容CSS3,还

    兼容各种浏览器(IE +, FF +, Safari +, Opera +)。jQuery使用户能更方便地处理HTML

    documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

    (2)目的

    通过对JavaScript的学习,学会使用HTML标记语言,通过CSS对页面的布局,在HTML

    基础上,使用JavaScript开发交互式动态Web网页。

    2、实践

    每个人自己设计一个动态网站,使用HTML编写网页、CSS布局、jQurey实现动态效果。

    (1)制定网站主题

    网站主题——健康生活 品质享受

    主要是以绿色环保,时尚品质为主题,倡导人们健康生活。

    (2)网站简介

    在本网站中,可以浏览到各种精品家居用品、绿色食品、健康养生、低碳环保等内容。

    在该网站中,可以注册成为我们的会员,享受精品家居、绿色食品优惠;可以浏览健康养生

    内容,上传养生心得;学习低碳生活,绿色环保等。

    (3)收集素材

    在网上收集了有关绿色环保,品质家居等相关的文字、图片、动画等素材。

    (4)网站规划

    本网站是由一个主页和多个子网页组成。主页和子页都采用CSS布局,主页和子页中设

    有超链接,可以在各个网页中自由切换。

    (5)网站制作

    使用Dreamweaver 8和Macromedia Fireworks 8进行网站制作和图片修改。

    (6)网站测试

    将制作好的网站运行在浏览器上,检查预期功能是否实现。

    3、编写文档

    对实训过程编写《实训报告》。

    对设计的网站编写《网站设计报告》

    四、实训总结

    通过这次网页课程设计激发学习兴趣,调动学习的自觉性,自己动脑、动手,动口,运

    用网络资源,结合教材及老师的指导,通过自身的实践,创作出积聚个人风格、个性的网页。

    总体来说,整个网页制作的过程,我学会了很多知识,

    在设计网页的这几天里,我充分利用了这次设计的机会,全心全意投入到网页世界,去

    不断的学习,去不断的探索;同时去不断的充实,去不断的完善自我,在网络的天空下逐渐

    的美化自己的人生!

    做好页面,并不是一件容易的事,它包括主页的选题、内容采集整理、图片的处理、

    页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好,页面过于

    简单,创新意识反面薄弱,这是我需要提高的地方。需要学的地方还有很多,需要有耐心、

    坚持,不断的学习,综合运用多种知识,才能设计出好的web页面。

    总体来说,通过这次的对网页课程设计,有收获也有遗憾、不足的地方,但我想,我已

    经迈入了网页设计的大门,只要我再认真努力的去学习,去提高,凭借我对网页设计的热情

    和执着,我将来设计出的网页会更加专业,更完善。


    本文标签: 网页 错误 网站 使用 样式

    更多相关文章

    让Dell笔记本变安静,掌握粉丝控制技巧,告别烦人的噪音

    20天前

    还在被Dell笔记本风扇的"高速运转模式"困扰吗?我们都有过这样的经历——专注工作时风扇突然狂转,游戏关键时刻散热不足导致降频。今天,让我们一起探索如何通过DellFanManagement这款开源工具,彻底解决风扇控制

    如何在Linux中调整系统时间?超详细步骤解析

    20天前

    在 Linux 系统中,可以通过不同的方法来设置系统时间,下面详细介绍几种常见的方式。目录方法一:使用date命令手动设置时间 date命令是一个简单且常用的用于显示和设置系统时间的工具。

    GTA5玩家速成秘籍:10分钟玩转YimMenu,轻松提升游戏体验!

    20天前

    终极YimMenu配置指南:10分钟搞定GTA5游戏增强 YimMenu配置作为目前最受欢迎的GTA5辅助工具之一,为玩家提供了全面的游戏增强功能。这款开源项目拥有强大的安全保护机制,能够有效防止常见的游戏崩溃问题,同时大幅提

    YimMenu终极攻略:助你快速精通免费GTA5辅助工具,游戏无压力

    20天前

    YimMenu终极配置指南:免费GTA5辅助工具快速上手教程 想要在GTA5中体验前所未有的游戏乐趣吗?YimMenu作为一款功能强大的免费游戏辅助工具,能够为你打开全新的游戏世界。本教程将手把手教你如何快速配置YimMenu

    遇到苹果手机黑屏?3招教你快速重启!

    19天前

    苹果手机作为市场上备受欢迎的智能手机之一,其稳定性和流畅性一直备受赞誉。然而,偶尔遇到手机突然黑屏无法打开的情况,也会让不少用户感到困扰。今天,我们就来详细探讨一下苹果手机突然黑屏打不开的解决方法,帮助大家快速恢复手机正常使用。

    资讯大亨:Python助力,快速捕获最新新闻资源

    19天前

    Python爬取热点新闻资源包:实时获取最新资讯的利器 随着信息时代的快速发展,获取最新新闻资讯变得尤为重要。今天,我要向大家推荐一个实用的开源项目——Python爬取热点新闻资源包,它可以帮助你轻松地从主流网站自动下载最新、

    Windows 11的开发秘密:编程语言揭秘

    18天前

    1. 开发工具与环境Windows 11 提供了多个开发工具和环境,供开发者选择和使用: Microsoft Visual Studio:Windows开发的首选IDE,支持多种编程语言(C+

    Ubuntu新手必备:静态IP配置步骤详述

    18天前

    为Ubuntu系统设置静态IP 前言 之前在使用Ubuntu时,Ubuntu一直都是固定分配为一个IP,今天和其他师傅交流的时候分配的IP突然改了,当时打开VMware看IP,改.ssh感觉非常狼狈,于是回来就为其配置

    “Mac用户福音!忘记管理员密码?这里有快速解决方法!”

    18天前

    在使用Mac电脑时,为了安全很多用户通常都会设置管理员密码。不过如果不小心忘记Mac管理员密码怎么办?幸运的是,有些方法可以重置Mac密码并重新获得访问权限。下面小编就教给大家几种重置用户密码的方法。未开启FileVaul

    SQLSERVER操作问题及解决方案_sqlserver打开的文件与电脑文件中的内容不一致

    17天前

    SQLSERVER入门,关于安装配置、数据备份、导入导出等常用操作及解决方法都在这里了一、数据库备份和附加1.SQL2008R2使用“数据库附加“的方法出现“只读”原因:将的mdf文件附加到

    关于python打包py文件成exe文件_pycharm打包exe文件

    16天前

    这里就只介绍常用的pyinstaller打包方法以及一些常遇到的问题目录一.打包步骤 第一步:安装打包所依赖的包(pyinstaller) 在cmd命令行中输入以下命令,然后回车进行安装 pi

    pipwire cpu 100%使用率的问题

    16天前

    在Manjaro使用6.14以下内核版本+pipwire1.4.1及以下版本(已知存在问题的版本) 会出现因为声卡snd-seq模块导致的单核cpu使用率100%,导致笔记本耗电严重。通过lsof 看下5这个描述符是干啥的

    CPU风扇智能调速软件全解析与实战应用

    16天前

    简介:CPU风扇调速软件是用于监控和调节中央处理器散热风扇转速的重要硬件管理工具,旨在平衡散热效率与运行噪音,确保系统在不同负载下稳定运行。本文以SpeedFan等主流软件为例,深入介绍其工作原理、功能特点及使用方法,涵盖温度传感器数

    【Tools】TeamViewer安装教程_teamviewer教程csdn

    16天前

    00. 目录 01. TeamViewer简介 TeamViewer 是一个远程控制、桌面共享和文件传输的简单和快速的解决方案,它可以穿越工作在任何防火墙和NAT代理。要连接到另一台计算机,只需在两台计算机上运行Tea

    破解XP开机密码方法

    15天前

    如何破解XP开机密码当Windows XP登录密码丢失时,我们可以针对不同的情况采用不同的办法来解决: (1)如果在安装Windows XP时,Administrator密码设置为空。大家可以在系统引导的时候

    如何释放并重新获得ip地址呢?_ip释放 ip重新获取

    15天前

    如何释放并重新获得ip地址呢? 释放并重新获得一个IP地址的具体步骤如下:1、要想从DHCP服务器重新获取ip,电脑必须设置成"自动获取ip",设置如下,在电脑桌面"网络"-属性-

    使用OpenCV在按下Enter键时截图并保存到指定文件夹_opencv按键保存图片

    15天前

    使用OpenCV在按下Enter键时截图并保存到指定文件夹 在这篇博客中,我们将介绍如何使用OpenCV库来实现一个简单的功能:在按下Enter键时从摄像头截图并保存到指定的文件夹中。这个功能可以用于各种应用,例如监控系统、视

    使用Genymotion时无法虚拟机文件_genymotion虚拟机failed to download file

    14天前

    在安装了Genymotion with VirtualBox 版本之后 添加虚拟机 选择虚拟机下载的时候下载失败 在Genymobile 用户临时数据中找到log日志 win7 下路径 C:Users

    个人认为斐讯K2最好的固件以及斐讯K2 WIFI中继指南_斐讯k2固件

    14天前

    老家的斐讯K2正作为副路由继续使用,之前使用Padavan也就是老毛子固件进行无线中继桥接,模式多设置也比较繁琐,上次国庆回家设置好后这次过年回去就说坏了,具体我也没去查看是什么原因。在找新固件的途中发现了一款个人感觉日常正常使用最

    保存分区表时出现错误0000001怎么办?

    12天前

    在使用Windows操作系统管理硬盘时,用户有时会遇到“保存分区表时出现错误0000001”的问题。这个错误会阻止你对硬盘进行任何分区操作,可能导致数据丢失或系统无法启动。本文将深入探讨这个问题,提供详细的解决方案,帮助你恢复硬盘正常

    发表评论

    全部评论 0
    暂无评论