下载文档原格式
综合实验简单静态网站制作姓名：学号：班级：计算机科学与技术*班日期：【实验目的】综合掌握HTML5+CSS设计静态网站的方法。
【实验环境与设备】计算机实验室要求：机器上安装有浏览器和记事本等。
【实验要求】1、完成学期初每个人自己设计的网站，网站至少由5个页面构成，除主页外，至少要包含四个主栏目，每个页面必须图文并茂，能较好地表达主题，切忌采用过多的文字、过多的图像或者过多flash，不允许添加视频和音频。
作品应体现Web的特点，网站结构完整，链接正确、导航有效。
2、网站主题可从如下几个选择：中国传统文化、互联网时代、畅想未来。
3、对于HTML，文档的语义应正确、清晰可读，符合行文规范。
4、对于页面上各个元素，使用CSS进行外观设计，根据主题选取适当的字体大小、颜色和元素背景等。
5、要求使用外部CSS文件。
6、布局方面，使用DIV+CSS布局。
7、对于设计完成的网页样式，要求具有较高的灵活性、可维护性和可重用性，既要确保整个网站外观风格上的统一，每个页面之间也要存在一定的差异。
注意：●内容和网页形式自定，不允许抄袭，一经发现0分处理。
●不允许提交未在网页中使用的图像、flash、声音和图像文件。
●每个学生以学号加姓名命名站点名称。
●完成并提交该实验报告【报告内容】1网站设计结构2网页代码①第1个页面<!doctype html><html><head><meta http-equiv="Content-Type"charset="utf-8"/> <title>中国传统文化</title><link href="style.css"rel="stylesheet"type="text/css"/> </head><body><div id="container"><div id="top"><img src="images/banner.png"/></div><div id="navi"><span><a href="index.html">首页</a></span><span><a href="朝代.html">朝代</a></span><span><a href="民族.html">民族</a></span><span><a href="地域.html">地域</a></span><span><a href="文化.html">文化</a></span> <span><a href="杂家.html">杂家</a></span> <span><input type="text" name="title" value="" />搜索</span></div><div id="main"><div id="left"><ul><li><h3>朝代></h3></li><li>三皇五帝夏朝商朝西周东周</li><li><h3>民族></h3></li><li>汉族壮族满族回族苗族</li><li><h3>地域></h3></li><li>东北地区华北地区华东地区</li><li><h3>文化></h3></li><li>儒家道家释家诸子百家</li></ul></div><div id="center"><img src="images/1400401422.jpg"/></div><div id="right"><ul><li>中国第46个遗产项目...</li><li>浅析粽子飘香的端午节...</li><li>世界第三大无人区</li><li>“鸟的王国”—青海湖鸟岛...</li><li>“陇上林泉之冠”—麦积山...</li><li>嘉峪关文物景区：传承...</li><li>中国第八处世界自然遗产</li><li>景德镇古窑民俗博览区...</li><li>江南三大名湖之西湖</li><li>世界上岛屿最多的湖</li></ul></div></div><div id="main1"><img style="float:left;"src="images/ctbackg.gif"/><img style="float:left;width:516px;"src="images/index.jpg"/><div id="box1"><img style="float:left;width:250px;height:180px;margin-left: 8px;"src="images/1408004447_thumb.jpg"/><p>若要说中国历史，夏朝是不能不说、也是无论如何不可逾越的峦峰。
网页前端高级编程-实验报告-设计静态页面实验内容：按照下图要求设计静态页面！实验步骤与调试过程：在本次实验中，我们将用到html的知识来解决本次实验所涉及的问题：一：在网页的最前方，实验要求要有一个logo的样式，在此处我们讲利用img 标签来解决这个问题，利用img标签引入logo图片就可以解决这个问题。
二：在logo的下方，出现的是一列无序的列表，列表中含有超链接，因此在这个模块中，我们将使用到的是无序列表li和超链接标签a，href标签。
在使用超链接时，由于题目要求要出现颜色的变化（就是超链接的部分在点击前后会出现蓝色到紫色的变化），这个的设置同样需要在href标签中设置。
三：在无序列表的下方，需要设置“科研人员制造噪音来研究安静的价值”这个标题样式，这个标签是<h>标签。
四：在标题的下面，需要设置一张参考图片，这个图片的引用要用到img标签来实现。
五：图片的下方是一段正文，因此在引入的时候需要用到font标签，居中显示。
六：最后的一部分是一个表格，利用到了table标签，在table标签的使用当中会涉及到表格的合并等一系列内容。
实验结果：疑难小结：本次实验为HTML的入门实验，设计的知识点并不多，但是在动手实践的过程中，我也发现了自己的问题所在，就是在无序列表与超链接的结合中，我在以往并未遇到此类问题，因此会有一点困难，解决的方法也很简单，就是在无序列表的标签中只要加入超链接就可以实现了，另外的一点就是在制作表格时，我发现表格的合并是我的知识漏点，老师虽然讲过，但是自己的印象并不深刻，因此在制作的过程中需要反复的查阅资料，在查阅资料的过程中，我发现要想实现表格的合并，就是tb标签的合理嵌套使用。
这些问题就是我在解决这个实验时遇到的主要问题，在本次实验中我也学到了很多，就是在项目的实验当中，要学会自己单独的解决问题，不要把希望寄托在他人能够帮到你，这样以来，可能你的问题会得到解决，但是在以后的工作中，是对你很有坏处的。
实验一 HTML 语言和 Dreamweaver 使用、实验目的 1熟悉Dreamweaver 的工作界面和工作环境； 2、 能熟练使用HTML 编写简单网页； 3、 掌握Dreamweaver 站点的建立和管理； 4、 能熟练使用Dreamweaver 创建和设计常规页面二、实验内容及步骤 ＜一）、基本操作：1 认识 Dreamweaver 的工作界面。
2、 自定义工作环境。
3、 熟悉 Dreamweaver 的各个浮动面 板。
＜二）、实例设计：1网站初建一一建立一个本地站点。
2、制作满江红页面，如右图：3、用HTML 编写如下网页，要求：第1 行为标题2且链接到大理学院主页，第 2行为标题3，第3行为段落，图片宽 400px ，高 300px 。
b5E2RGbCAPFireworks4、用HTML 编写以下表格，要求：边框为1px ，表格宽300px ，表格居中［标題一 标題二1标題二1 一行一列 |一行二列|一行三列 1二行一列匚行二列1二行三列||三、 实验思考1如何设置文本中的图片对齐方式？Flash Photoshop 沫 辽£1 棗 "%三十穷帝直与土 " 八千雷昂■五和戸罕垢足未晤疏.啊乂山玦:.袪雄氐餐胡凳禺” 箕谈淘恢包奴血二诗从去匕 日山呵； 郭无闽營2、使用HTML编写网页图片标签中主要有哪些属性及属性值。
四、作业：请写出实验内容3、4的HTML代码。
实验二创建简单网页一、实验目的1熟练掌握链接、图像及属性设置；2熟练掌握表格的基本操作；3、学会隐藏表格、单元格边框及分隔线；4、掌握在网页中插入flash、MP3和视频等多媒体素材。
二、实验内容（一＞制作链接页面＜包括：页面链接、下载链接、图片链接和邮件链接）（二＞制作唐诗页面，如下图：浚HJULfj 亘為fi 空虫月!览空£ja&客阳女儿打-±ift辂阳芦儿对】石「可左血|五几・冃n干甘羽理三.存*盘碟瞬鱼* 画詞千榕目铺氢汀¥関柳奉整氐段祎送上七普车.宝扁迎忖九华虬妊水苗贵耗音春”意嘀S■剧季作自恃薯玉衆救？L不号卜理打勻扎* 打窃|时九前■:九命I’片飞兀托. 戏霜无理曲时,独倉牙赣誓坐. 城中柏珏尽黔年.刁帀经过赵三室. 隹分世亡働弭玉，耳島』头才弓纱。
用HTML制作静态网页教案一、教学目标1. 了解HTML的基本概念和作用。
2. 掌握HTML的基本标签及其使用方法。
3. 能够使用HTML编写简单的静态网页。
二、教学内容1. HTML的基本概念和作用HTML的定义HTML的作用2. HTML的基本标签标签的概念常用的标签及其作用标签的属性3. 编写简单的静态网页网页的结构网页的布局网页的内容三、教学方法1. 讲授法：讲解HTML的基本概念、基本标签及其使用方法。
2. 演示法：展示实例，讲解标签的作用和属性。
3. 练习法：学生动手实践，编写简单的静态网页。
四、教学步骤1. 讲解HTML的基本概念和作用。
2. 讲解HTML的基本标签及其使用方法。
3. 展示实例，讲解标签的作用和属性。
4. 学生动手实践，编写简单的静态网页。
5. 总结和反馈。
五、教学评价1. 课堂讲解的满意度。
2. 学生实践作品的质量。
3. 学生对HTML知识的掌握程度。
六、教学资源1. 教材或教学指导书：提供HTML基本概念、标签及其使用方法的详细介绍。
2. 在线资源：提供HTML标签属性、案例教程和在线练习平台。
3. 编程工具：如Sublime Text、Visual Studio Code等，用于编写和查看HTML 代码。
4. 演示文稿：用于展示HTML的基本概念和实例。
七、教学评估1. 课堂练习：学生在课堂上完成简单的HTML代码编写，以巩固所学知识。
2. 课后作业：布置相关的HTML编写作业，要求学生在课后完成。
3. 作品展示：学生提交完整的静态网页作品，进行互相评价和教师点评。
4. 知识测试：通过笔试或在线测试，评估学生对HTML知识的掌握程度。
八、教学案例1. 案例一：编写一个简单的个人博客网页，包括、段落、图片和等。
2. 案例二：制作一个公司简介网页，包括导航栏、简介内容、服务项目等。
3. 案例三：创建一个在线购物商品列表，展示商品图片、价格和购买。
九、教学拓展1. 学习CSS：介绍CSS的基本概念和作用，为学生提供进一步美化网页的技能。
HTML静态⽹页--JavaScript-DOW操作1、DOM的基本概念DOM是⽂档对象模型，这种模型为树模型；⽂档是指标签⽂档；对象是指⽂档中每个元素；模型是指抽象化的东西。
2、Windows对象操作⼀、属性和⽅法：属性（值或者⼦对象）：opener:打开当前窗⼝的源窗⼝，如果当前窗⼝是⾸次启动浏览器打开的，则opener是null。
dialogArgument：对话框返回值。
⼦对象：history,location,document,status,menubar,toolbar等。
⽅法（函数）：事件（事先设置好的程序，被触发）。
⼆、Window.open（"第⼀部分"，"第⼆部分"，"第三部分"，"第四部分"）Window.open的特征参数：第⼀部分：写页⾯地址。
第⼆部分：_blank 打开的⽅式，在新窗⼝还是⾃⾝的窗⼝。
第三部分：控制打开的窗⼝格式，可以写多个，⽤空格隔开如下：toolbar=no新打开的窗⼝⽆⼯具条；menubar=no⽆菜单栏 status=no⽆状态栏；width=100 height=100 宽度⾼度；left=100 打开的窗⼝距离左边多少距离；resizable=no窗⼝⼤⼩不可调；scrollbars=yes 出现滚动条；location=yes 有地址栏；Window.open也有返回值，它的返回值是：新打开的窗⼝对象。
例如：最简单的打开窗⼝：window.open("Untitled-6.html");打开⼀个窗⼝并保存在变量中：var w= window.open()；可以将打开的多个窗⼝保存在数组w⾥：function openW(){w[i++]=window.open();}三、window.close()：关闭当前窗⼝；w.close()：关闭保存在变量w中的那个窗⼝；关闭多个⼦窗⼝：先将打开的窗⼝存⼊数组内，利⽤循环将其挨个关闭；关闭打开当前窗⼝的源窗⼝： window.opener.close()；四、间隔与延迟间隔执⾏⼀段代码（函数）：window.setInterval("要执⾏的代码"，间隔的毫秒数)清除间隔执⾏：window.clearInterval(间隔的id); 循环⼀次之后⽤来清除隔执⾏的代码延迟⼀段时间执⾏某⼀段代码（函数）：window.setTimeout("要执⾏的代码"，延迟的毫秒数)清除延迟：window.clearTimeout(延迟的id)；清除setTimeout五、调整页⾯window.navigate("url") 跳转⾄⽬标页⾯，在⾕歌浏览器下有bug；window.moveTo(x,y) 移动页⾯⾄某⼀位置，位置由x和y决定；window.resizeTo(宽，⾼) 调整页⾯的宽度和⾼度；window.scrollTo（x,y）滚动页⾯⾄哪⾥，y代表纵向滚动。
静态网页设计实训报告1. 引言本文旨在介绍静态网页设计实训的过程和步骤。
静态网页设计是一种基础的网页设计方法，通过HTML和CSS来构建网页的结构和样式。
通过这个实训项目，我深入了解了静态网页设计的原理和技术，并通过实践提升了自己的设计能力。
2. 实训背景在进行实训之前，我首先进行了一些背景调研。
了解到静态网页设计是现代网页设计的基础，通过学习和实践可以提高自己的实际操作能力。
此外，静态网页设计也有助于理解网页的结构和样式，为后续学习动态网页设计打下基础。
3. 实训目标在开始实训之前，我明确了自己的实训目标。
我希望通过这个实训项目，能够掌握以下能力：•使用HTML语言构建网页的结构•使用CSS语言美化网页的样式•熟悉网页设计的基本原则和规范•学习使用一些常用的网页设计工具和资源4. 实训步骤4.1 确定网页主题在开始设计网页之前，我首先确定了网页的主题。
根据实训要求，我选择了一个简单的主题——旅游信息网站。
这个主题既有一定的实际意义，又符合我的兴趣，能够激发我的设计灵感。
4.2 设计网页结构在确定了网页主题之后，我开始设计网页的结构。
我使用HTML语言编写了网页的基本结构，包括头部、导航栏、内容区域和底部等部分。
通过HTML语言，我可以将不同的内容组织起来，并设置合适的标签和属性。
4.3 美化网页样式网页的样式是吸引用户的重要因素之一。
为了提升用户体验，我使用CSS语言对网页进行了美化。
通过设置合适的样式属性和选择器，我调整了网页的颜色、字体、布局等方面，使其更加美观和易读。
4.4 添加内容和功能除了基本的结构和样式，我还为网页添加了一些内容和功能。
我使用文本编辑器编写了网页的文本内容，并通过插件添加了一些图片和图标。
此外，我还为网页添加了导航链接和搜索功能，方便用户浏览和搜索信息。
4.5 测试和优化在完成网页设计之后，我进行了测试和优化工作。
我使用不同的浏览器和设备测试了网页的兼容性和响应式设计，并对存在的问题进行了修复和优化。
一、实训目的通过本次静态网页实训，使学生掌握HTML、CSS、JavaScript等前端技术的基本原理和应用，提高学生的网页设计能力和实际操作能力，为今后从事网页设计和开发工作打下坚实的基础。
二、实训内容1. HTML基础知识（1）HTML基本标签及属性（2）表格、列表、表单等常用标签的使用（3）图片、音频、视频等媒体元素的使用2. CSS样式表（1）CSS基本语法及选择器（2）布局技术：浮动、定位、弹性盒子等（3）颜色、字体、背景等样式设置3. JavaScript编程基础（1）JavaScript基本语法及数据类型（2）函数、对象、数组等编程基础（3）事件处理、DOM操作等应用4. 常用网页特效（1）图片轮播、无缝滚动等（2）表单验证、日期选择等（3）弹窗、动画等三、实训过程1. 实训前期准备（1）安装并熟悉开发工具，如Dreamweaver、Sublime Text等。
（2）了解HTML、CSS、JavaScript等前端技术的基本概念和原理。
2. 实训阶段（1）学习HTML基本标签及属性，编写简单的静态网页。
（2）学习CSS样式表，美化网页布局和样式。
（3）学习JavaScript编程基础，实现网页交互功能。
（4）学习常用网页特效，丰富网页内容。
3. 实训成果展示（1）完成一个具有完整功能的静态网页，包括首页、关于我们、联系我们等页面。
（2）实现网页中的图片轮播、无缝滚动、表单验证等特效。
四、实训心得1. 学会了HTML、CSS、JavaScript等前端技术的基本原理和应用，提高了自己的网页设计能力。
2. 掌握了使用开发工具进行网页制作的方法，提高了实际操作能力。
3. 通过实训，培养了良好的团队协作精神和沟通能力。
4. 深刻认识到理论知识与实践操作相结合的重要性，为今后从事网页设计和开发工作打下了坚实的基础。
五、实训总结1. 通过本次静态网页实训，我深刻认识到HTML、CSS、JavaScript等前端技术在实际应用中的重要性。
Dreamweaver 静态网页 Html 标记代码汇总网站相关概念Internet 是一个全球计算机互相网络，WWW 是 Internet 所提供的一种极其重要的服务，即 World Wide Web，简称Web；WWW主要以Web为表现形式，或者说，Web是Web页即网页的载体，我们所说的Web页就是指由HTML（超文本标记语言）这种语言编写的一类特殊文件，通常后缀为*.html或*.htm的页面。
Dreamweaver CS 基本应用HTML 文档结构：<html></html>：静态网页源代码首尾结构标记，代码内呈现网页所有内容<body bgcolor=”背景色”></body>：网页主体部分<head></head>：网页头部，包含网页导航栏中的标题和网页不显示的信息<title></title>：标签内显示出网页台头的标题名，用于<head></head>标签之内<meta name=”描述” content=”搜索信息” />：辅助性标签，用于<head>标记之内<meta name=”作者” content=”余学兵”>：标注网页的作者<meta name=”关键字” content=”IT，教育，网络”>：设定搜索关键字<meta name=”robots” content=”all”>：告诉搜索机器人需要索取的页面，默认全部 <meta http-equiv=”expires” content=”web，26 feb 2010 08：21：57 GMT”>：http-equiv 属性代替 name 属性，expires设定网页到期时间<meta http-equiv=”refresh” content=”5;url=”>：间隔 5 秒网页自动刷新，并指向新的 URL 网址<h2></h2>：表示是一行级别是 2 号的标题文字，有 h1~h6 的 6 级标题可选<font color=”颜色” face=”字体” size=”尺寸”></font>：文字处理标签<pre></pre>：预先格式化，以格式化显示标签中的内容结构<p align=”对齐方式”></p>：段落标记，center(居中)、left(左边)、right(右边)<br />：换行标记，按[shift]+[enter]可实现<b>粗体</b>：粗体字体标记 <i>斜体</i>：斜体字体标记<sup>上标</sup>：上标标记文本格式 <sub>下标</sub>：下标标记文本格式<ul></ul>：无序列表开始结束标记 <li></li>：列表项标记，</li>为可选项<ol start=”数字”></ol>：有序列表开始结束标记，start 属性指定列表的起始数字<li type=”有序列表标签”>：有序列表的序列标记，可自定义为数字或字母等<hr align=”对齐位置” width=”长度” size=”高度” noshade=”纯色” color=”颜色”>：水平线标记，可标记水平线的长度、高度、纯色阴影显示、颜色等属性<img align=”图像与文本的对齐方式” src=”图像名称”>：在 HTML 中插入图像，align 属性值：top(头部)、bottom(底部)、middle(居中)、left(居左)、right(居右)<p onclick="MM_popupMsg('你好！')">点击</p>：弹出“你好！”信息的行为<p onmouseover="MM_swapImage('image', '图像路径'),|">点击</p>：弹出图片 <embed src=”第一次爱的人.mp3”><embed/>：在网页中插入音频文件<marquee direction=”移动方向” behavior=”设置路径” loop=”循环圈数” bgcolor=”背景色”>：滚动文字字幕，方向属性:down向下、up向上、left向左、right向右<a href=”/”>手持终端</a>：超级链接标记<a href=javascript.alert(“谢谢！”)>点击</a>：对话框脚本链接<ahref=”kxncwg.exe”>开心农场外挂下载<a/>：文件下载链接<ahref=”news.html”>新闻报道<a/>：相对路径链接（锚记）HTML 特殊字符的字符实体：特殊字符转义码示例空格 ；<h1>欢 ；迎 ；光 ；临</h1>元（￥）¥；<p>售价：¥；68</p>大于（>）>；<code>if A>；B then<code>A=A+1</code>小于（<）<；<code>if A<；B then<code>A=A+1</code>引号（““）"；<p>"；是还是不是？"；问题的关键是</p>“与“符号（&）&；<p>William &；Graham 去了集市</p>版权号（©）©；注册商标®；第 1 页 共 8 页HTML 表格标记： <table align=” 对齐方式 ” width=” 宽度 ” bgcolor=” 背景色 ” background=” 背景图片 ” border=” 边框显隐 ” cellspacing=”单元格之间间距” cellpadding=”单元格内间距” <caption></caption>：定义表格的标题（可选）<tr></tr>：定义表格的一行<th><th/>：设置表格栏标题（表头），显示为粗体子此标记可以省略<td></td>：用来装载单元格数据，它们必须位于<tr></tr>标记之间 链接路径：（链接的类型和目标属性）1.链接类型◆ 外部链接：跳转到站点外其他网站的链接◆ 内部链接：站点根目录内文档之间的互相链接，也称为相对文档链接◆ E-mail 链接：实现打开 E-mail 客户端应用程序进行撰写、发送邮件的工作◆ 局部链接：在同一文档内部或不同文档之间指定位置的链接2.链接目标 ◆ _blank ：将打开一个新窗口◆ _parent ：将在父窗口中打开◆ _self ：将在当前窗口中打开◆ _top ：将在上级窗口中打开<a name=”命名锚” id=”命名锚 id”><a/>：命名锚记 插入图像、Flash 及其他多媒体对象 1． 在网页中插入图片和图像占位符 打开 HTML 文档，将插入点放在要插入图像的位置，单击插入栏中“常用”面板的“图像”按钮，或选择“插入”的“图像”命令，在弹出的“选择图像源”对话框中选择要插入的图像，确定即可。
