网页设计与制作实验1

《网页设计与制作教程》实验指导书班级姓名学号实验一网页基础知识一、实验目的理解网页组成元素。

理解主页、静态网页、动态网页等概念。

了解常见的网页布局。

熟悉Dreamweaver CS6的桌面结构。

二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。

三、实验内容1．打开“九江学院”官网，并回答以下问题：（1）该网页上有哪些网页元素组成？（2）在网站中打开5张不同内容风格的分页面，分析下它是静态网页还是动态网页，为什么？（3）如果分页面中有图片，把图片下载到电脑中，如何操作？2．查找主页为“国字型”、“三字型”、“拐角型”、“封面型”、“Flash型”布局的网站各一个，并记录下网站地址。

3．查找若干个与图1所示布局相似的网页并记录网址。

图1网页布局4．启动Dreamweaver CS6，并完成以下操作：（1）新建一个空白网页，并保存，存储名为myweb.html。

（2）在文档工具栏中，切换“设计”、“拆分”、“代码”、“实时视图”，理解它的功能。

（3）对“插入栏”、“属性面板”和各种组合面板进行折叠/展开，打开/关闭操作，熟悉使用。

（4）给网页输入标题栏标题：我的第一张网页。

（5）在网页中输入一首唐诗，并完成简单排版。

（6）保存网页，并用浏览器预览。

四、实验思考1．动态网页与静态网页如何快速区分？2．开发个人网站的首页，可以设计哪些栏目，试做一个布局草图。

实验二常见HTML标签与简单CSS的使用一、实验目的理解常见HTML标签在HTML文档中的作用。

掌握通过纯文本编辑器熟练编写简单HTML的技能。

掌握简单CSS的使用。

熟练掌握各种常用标签并利用其来实现网页的排版。

二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。

实验一
上交作业方法：
自建文件夹，起名如“网页制作1班_张三”，把实验需要完成作品放进此文件夹，上交到服务器指定的文件夹里，每次作品需要认真完成，作为平时作业成绩评定。

实验内容：
1.启动Dreamweaver，并熟悉其工作界面的各个组成部分，如图1所示。

图1
2.在本地硬盘上创建一个名为“myweb”的文件夹，然后使用Dreamweaver将
其定义为一个本地站点。

3.在创建好的站点中创建以下一级目录：images,sound,flash。

4.收集相关素材存放到硬盘站点中对应的目录下。

5.制作带有个人信息的第一个页面，文件名为“index.html”，内容可以自由
发挥，要求进行网页背景色、文字、图像的处理，并体会常用功能的快捷键
操作（新建、关闭、复制、粘贴、删除、撤消、重做、预览、退出）。

6.根据所学知识制作个人网站建设总体方案书。

参考图2。

图2
7.掌握如何使用ftp上传和下载文件，熟悉作业的上交方法。

网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系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 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。

素材准备：准备制作网页所需的文字素材、图像素材。

实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。

实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。

3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。

4.切换代码模式下，输入代码。

5.保存文件，预览文件效果。

实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。

实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。

页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。

素材准备：准备好从网上下载的安装程序。

实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。

2.安装完成后输入注册号。

3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。

网页设计实验指导书经济与管理学院二零一二年二月实验一HTML标记的基本语法一、实验目的和要求1．熟悉HTML文件的编辑环境；2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。

3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。

二、实验内容1、根据如表1-1所示的表格写出完整的HTML代码；其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。

2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。

图1-1 个人网站首页3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。

图1-2 列表效果图三、实验步骤1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver 的代码窗口。

2．按各种不同标签的语法规则，输入合法的代码。

3．输入完成后保存代码文件，文件后缀为.htm/.html。

4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。

四、程序代码（在实验报告中写出）（1）<table width="500" border="1"><caption>课程表</caption><tr><td><div align="center">课号</div></td><td><div align="center">课程名</div></td><td><div align="center">学分</div></td></tr><tr><td><div align="center">1002201</div></td><td><div align="center"><u>《网络原理》</u></div></td><td><div align="center">6</div></td></tr><tr><td><div align="center">1003302</div></td><td><div align="center"><u>《网页设计与制作》</u></div></td><td><div align="center">5</div></td></tr><tr><td><div align="center">1003507</div></td><td><div align="center">《管理学原理》</div></td><td><div align="center">5</div></td></tr></table>2.还没弄3.<!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><style type="text/css"><!--.STYLE1 {font-family: "宋体";font-size: xx-large;}.STYLE4 {font-family: "宋体"; font-size: xx-large; font-weight: bold; }.STYLE5 {font-family: "宋体";font-size: x-large;}.STYLE6 {font-family: "新宋体"; font-size: x-large; }--></style></head><body><ul><li><h1><span class="STYLE1">列表项目1</span></h1><ol><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul><ul><li><p class="STYLE4">列表项目2</p><ol><li class="STYLE5"> <a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE5"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul></body></html>五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。

《网页设计与制作》实验报告院系名称：专业班级：电学生姓名：学号：2013年 5 月26 日实验一：HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力；2、掌握利用HTML语言编写表格的能力；3、掌握利用HTML语言编写表单的能力。

二、实验课时2学时三、实验内容1、表格实验的结果。

①表格制作代码：<HTML><HEAD><TITLE>制作网页表格</TITLE></HEAD><BODY><TABLE border="2"><TR height="60"> <!--第一行--><TH rowspan="2" colspan="2" bgcolor="red" align="left">A<TD>B<TD align="center">C<TR> <!--第二行--><TH colspan="2">D<TR> <!--第三行--><TH rowspan="2" width="200" height="60" align="right">E<TH rowspan="2" width="200" height="60" align="right">F<TH rowspan="2" width="200" height="60" align="left">G<TD width="200" height="30">H<TR> <!--第四行--><TD width="200" height="30">I</TABLE></BODY><HTML>②网页表格制作截图：2、表单实验的结果①表单实验代码：<HTML><HEAD><TITLE>实验1.2——电子商务1104王远</TITLE></HEAD><BODY><TABLE border="1" width="400"><FORM method="post" action=""><TR><TD align="center" width="150">姓名:</TD><TD><INPUT type="text" name="xingming" size="20"></TD></TR><TR><TD align="center">密码:</TD><TD><INPUT type="password" name="mima" size="20"></TD></TR><TR><TD align="center">性别：</TD><TD><INPUT type="radio" name="xingbie" value="remale" checked>女 <INPUT type="radio" value="male" name="xingbie">男</TD></TR><TR><TD align="center">爱好：</TD><TD><INPUT type="checkbox" value="lanqiu" name="lanqiu">篮球<INPUT type="checkbox" value="lanqiu" name="lanqiu" checked>足球 <INPUT type="checkbox" value="pingpang" name="pingpang">乒乓球</TD></TR><TR><TD align="center">籍贯：</TD><TD><SELECT size="1" name="jiguan"><OPTION selected>开封</OPTION><OPTION>郑州</OPTION><OPTION>洛阳</OPTION></SELECT></TD></TR><TR><TD colspan="2" align="center"><INPUT type="submit" value="提交" name="tijiao"><INPUT type="reset" value="重置" name="chongzhi"></TD></TR></FORM></TABLE><BODY><HTML>②表单实验截图：四、实验小结通过此次实验，我对在课堂上学习到的知识进行了实际操作，只有真正操作一遍才知道知识并不只是记住就算是会运用。

实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。

3、配置网站运行环境。

实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点◆熟悉使用浏览器进行浏览、搜索、下载。

◆熟悉HTML的结构、语法。

◆创建与管理站点实验内容1、浏览新浪主页并保存，观察其保存结果（其中包括哪些文件和文件夹）。

2、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。

3、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。

4、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为“我的第一个网页”，内容为司空曙的《江村即事》（要求加入文档类型声明），如下图所示。

5、使用Dreamweaver建立一个本地站点。

6、注：站点名称用你的名字的首字母，如方清华用fqh。

1）在网站根文件夹下创建文件夹sy12）打开“文件”面板并上传，类似于下图注：请利用“管理站点”的“导入”和“导出”功能保存和恢复站点设置，减少重复配置操作。

3）配置IIS。

打开控制面板>管理工具>internet信息服务。

注：如果“管理工具”中没有“internet信息服务”，请利用“控制面板”的“添加/删除程序”工具添加（在“添加/删除组件”选项中设置）。

4）配置本地intranet附录2 课程设计报告模板《网页设计与制作基础》课程设计报告任课教师专业班级班级代码组号第组组长学号姓名设计主题《网页设计与制作基础》课程组制评语（由任课教师答辩时填写）分工情况表（该表后两列由教师填写外，其余部分由学生填写）员的最后课程设计成绩是小组课程设计成绩与个人附加分之和。

指导教师（签名）：年月日一、设计目的（正文字体为“仿宋_GB2312”，字号为四号字）二、设计环境（正文字体为“仿宋_GB2312”，字号为四号字）三、设计步骤（各主要设计流程如确立主题、规划网站以及网页架构、素材准备、制作网页等的具体步骤）（正文字体为“仿宋_GB2312”，字号为四号字）四、设计结果（各相关网页的截图）（正文字体为“仿宋_GB2312”，字号为四号字）五、心得（通过此次课程设计说说你在设计过程中遇到的问题和解决方法，以及有何收获）（正文字体为“仿宋_GB2312”，字号为四号字）实验报告课程名称实验项目名称班级与班级代码实验室名称（或课室）专业任课教师学号：姓名：实验日期：年月日广东商学院教务处制姓名实验报告成绩评语：指导教师（签名）年月日说明：指导教师评分后，实验报告交院（系）办公室保存。

课程实验报告
专业年级2012级网络工程课程名称网页设计与制作
指导教师
学生姓名
学号20122205051013 实验日期2014年11月19日实验地点笃行楼A栋306 实验成绩
教务处制
2014 年11 月19 日
2 利用css改变fruit.html的外观
使用内部样式表，运用css修改fruit.html的外观，达到如图所示的效果，
步骤4，使用div标记作为容器
将与香蕉有关的html元素，用一个div标记包含起来，并将id设置为banana，以此类推，将与西红柿有关的html元素，用一个div标记包含起来，并将id设置为tomato。

步骤5，使用id选择符，为步骤5添加的各个div设置不同的背景色以及边框。

步骤6，修改链接文字的样式
2.提供步骤1完成页面的html源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
10.提供步骤6添加的css样式规则源代码（注意只需要css的代码）a:link { font-weight: bold;。

实验一经典页面赏析
实训任务：
通过经典页面的赏析，对网页的构成形成初步印象。

1、任务目标
通过学习，你应当能够
①赏析各种经典网页，了解各种类型网页的布局结构、色彩搭配；
②对网页的布局结构、色彩搭配形成初步印象。

2、引导问题
①色系：网页的底色、文字字型、图片的色系、颜色等等。

②排版：表格、框架的应用、文字缩排、段落等等。

3、任务指导
请分析如右图所示网页的布局结构及其配色。

完成任务的步骤：
第一步，分析页面的布局；第二步，分析页面的配色。

学生实验报告XXX学院学生实验报告。

网页设计与制作试验报告姓名：李文武班级：网络系统管理学号：1001011027一．主页格局的布置打开Dreamweaver工作界面，新建一个站点a1．新建一个空白页，在页面中插入一个一行一列的表格1，表格的宽度为800像素，边框距为0，间距为0，填充为0，并且表格居中对齐。

2．在表格1中插入三行一列的表格23．在表格2的第一行中插入两行一列的表格3，表格宽度设为100%。

（1）在表格3的第一行中插入如图一所示的fireworks的素材（2）在表格3的第二行中插入一行两列的表个，并且插入如图一所示的fireworks的素材图一4．在表格2的第二行中插入两行一列的表格4，表格宽度设为100%。

（1）在表格4的第一行插入如图二所示的表格（2）在表格4的第二行插入如图二所示的表格和图像4. 在表格2的第三行插入两行一列的表格5，如图二所示图二二．子页面格局的布置打开Dreamweaver工作界面，新建一个子页面的‘主页面’1.新建一个空白页，在页面中插入一个四行一列的表格5。

并且对表格5的每一行输入相应的文本2.新建一个空白页，在页面中插入一个三行一列的表格6。

（1）在表格6的第一行输入相应的文本（2）在表格6的第二行中插入两行两列的表格,并且在第一列插入图像和在第二列插入相应的文本（3）在表格6的第三行中插入相应的文本3.新建一个空白页（1）在空白页中插入6个文本框、1个单选按钮、1个复选按钮、1个下拉菜单框（2）给第（1）步的几个文本框和按钮输入相应的文本4.新建六个空白页，并且输入相应的文本以介绍相应的科目三．试验内容的创建1. LOGO显示Flash透明素材（1）新建一个空白页，插入一个宽度为400像素，高度为200像素的表格（2）给步骤（1）新建的表格插入一个背景颜色或背景图像（提示根据个人喜爱颜色）（3）将首先制作好的Flash透明素材“下雨.swf”插入步骤（2）中（4）保存（5）效果如图三图三2. 利用fireworks完成弹出式菜单的制作（1）打开fireworks工作界面，新建一个宽度为800像素，高度为50像素的画布（2）利用切片工具在画布中绘制出5个相同大小的切片（3）利用文本工具给步骤（2）的5个切片输入文本，分别为：首页、个人简介、所学课程、个人特长、求职意向（4）右击“所学课程”，选择添加弹出菜单。

学号：2010215210420题目网页设计与制作学院计算机科学与技术学院专业计算机应用班级1004姓名李俊清指导教师丁一2012年6月10日实验一：网页设计html一、实验目的1．掌握常用的HTML语言标记。

2．利用文本编辑器建立HTML文档，制作简单网页。

3．掌握网页制作功能的使用。

二、实验内容1．熟悉制作网页的基本方法。

2．掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置3．建立一个网站。

三、实验步骤1．在E:盘上建立一个文件夹如myweb作为自己的web站点根目录，在文本编辑器EditPlus 中输入如下的HTML代码程序，保存为以.htm或.html为后缀的文件如index.htm作为自己的第一个页面，并在浏览器中运行。

<html><head><title>我的第一个网页</title></head><body><h1>欢迎访问我的网站。

</h1><h3>欢迎访问我的网站。

</h3><h5>欢迎访问我的网站。

</h5></body></html>2.在标记中分别加入以下属性，看看index.htm有什么变化。

bgcolor=#背景颜色#=rrggbb(16进制的RGB值)或颜色名称background=#背景图像#=image-URL(图片所在路径)text=#非可链接文字的色彩bgproperties=FIXED背景图像不动<html><head><title>我的第一个网页</title></head><body bgcolor="#CCCCFF" text="#993366"><h1 align="center">欢迎访问我的网站。

网页设计与制作实训指导书网页设计与制作实训指导书目录实验1: 建立站点 (3)实验2：在网页中建立文本和段落.......... 错误！未定义书签。

实验1: 建立站点一、实验目的1．掌握在dreamweaver中建立站点和网页的方法二、实验环境1、一台裸机2、dreamweave网页设计软件三、实验内容在dreamweaver中建立站点和网页四、实验步骤、过程1、在菜单栏【站点】菜单中选择【管理站点】，在弹出的【管理站点】对话框中点击【新建】按钮，出现【站点】和【FTP】两个选项。

选择如图2.6所示。

2、选择【站点】弹出【未命名站点1的站点定义为】对话框，在【未命名站点1的站点定义为】中选择【基本】选项卡。

3、文本框中填写您站点的名字，它仅仅做为管理和识别用，单击【下一步】按钮，进入下一步。

如图2.7所示。

4、我们要建立的是静态网页，因此我们选择【不，我不想使用服务器技术】如图2.8 所示，单击【下一步】按钮，进入下一步。

5、选择第一项：编辑我计算机的本地副本，完成后再上传，也建议网络初学者也采用此项，选择要保存网站的物理路径名。

手工填写或者点击文件夹图标选择路径都可以，单击【下一步】按钮，进入下一步。

如图2.9所示。

6、\【您如何连接到远程服务器】现在，已经为您的站点定义了一个本地根文件夹。

暂时我们还不登陆远程服务器，因此选项中选择【无】。

单击【下一步】按钮，进入下一步。

7\、编辑站点站点的编辑其实很简单，选择【站点】菜单下的【管理站点】命令。

选中站点的名称，然后单击【编辑】按钮。

将会出现类似创建站点的内容，根据需要可以在相应的内容上进行修改。

实验2: 段落设置一、实验目的1．掌握利用记事本或者dreamweaver来创建段落二、实验环境1、dreamweave网页设计软件或者记事本三、实验内容在网页中建立文本与段落四、实验步骤、过程1、打开01文件夹下的01.htm网页，如图3.7所示2、选择布局工具栏的【绘制层】，放在如图3.8所示的位置，有关绘制层的更多内容参见后面的章节。

( 实验报告)姓名：____________________单位：____________________日期：____________________编号：YB-BH-054111网页设计与制作实验报告Web design and experimental report网页设计与制作实验报告实验一：站点设置一、实验目的及要求本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装windows xp操作系统;建立iis服务器环境，支持asp。

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;三、实验原理通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

四、实验方法与步骤1)执行“站点管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。

2)在弹出的“站点定义为”对话框中单击“高级”选项卡。

3)在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。

在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。

4)在“管理站点”对话框中单击“完成”按钮，站点创建完毕。

五、实验结果六、讨论与结论实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。

在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。

实验前先熟悉好操作软件是做好该实验的关键。

实验二：页面图像设置一、实验目的及要求：本实例的目的是设置页面的背景图像,并创建鼠标经过图像。

二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。

3、熟悉HTML基本标记的使用。

实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点◆熟悉HTML的结构、语法。

◆熟悉HTML基本标记的使用。

实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。

2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。

3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。

4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。

5、通过附录1的练习熟悉HTML基本标记的使用。

（可参考第二章内容）实验二Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。

实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。

实验重点及难点◆文字的插入及设置。

◆图像的插入及设置。

◆各种超链接的创建。

实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。

2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。

3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。

网页制作实验总结(一)网页设计实验报告（一）网页制作实验总结(二)《网页设计与制作》实验报告院系名称管理学院专业班级电子商务11级3班学生姓名许世谦学号2011170503082013年 6 月4 日实验一HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力；2、掌握利用HTML语言编写表格的能力；3、掌握利用HTML语言编写表单的能力。

二、实验课时2学时三、实验内容1、表格实验的结果<html><head><title>实验一</title></head> <body><table border align="center" height="80" width="600"><caption><h2>试验1</h2></caption> <tr><td rowspan="2" colspan="2" align="left" bgcolor="red">A <td align="left" >B <td align="center">C <tr><td colspan="2" align=center>D <tr><td rowspan="2" align="right">E<td width="80" rowspan="2" align="right">F <td rowspan="2" align="left">G <td>H <tr> <td>I </table> </body> </html>2、表单实验的结果<html><head><title>试验第一题</title></head> <body><h2 align="center">试验2</h2> <form><table border align="center" height="80" width="600"><tr><td align="center" width="200">姓名<td><input> <tr> <td align="center" width="200">密码<td><input> <tr> <td align="center" width="200">性别<td><input type="radio" name="gender" value="1" checked>女<input type="radio" name="gender" value="2">男<tr><td align="center" width="200">爱好<td><input type="checkbox" name="check1" value="yes">篮球<input type="checkbox" name="check2" value="yes" checked>足球<input type="checkbox" name="check3" value="yes">乒乓球<tr><td align="center" width="200">籍贯<td><selectname="jiguan"><option>开封<option>郑州<option>洛阳</select> <tr><td colspan="2" align="center"><input type="submit" name="submit_button" value="提交"><input type="reset" name="reset_button" value="重置"> </table></form> </body> </html> 四、实验小结通过这次试验，我掌握了许许多多以前不知道的代码细节，让我对网页设计与制作有了更深层次的了解，同时我对编写代码也渐渐的熟悉了。

实验一网页设计基础实验一、实验目的学生通过该实验熟悉HTML语言的基本使用方法，进一步体会浏览器解释执行HTML的原理，为以后高级网络编程打下扎实的基础。

1．掌握利用因特网进行信息游览、搜索，下载网页、图片、文字和文件；2．对给定的网站，能指出网站的风格（链接结构、目录结构、页面布局方式）；3．了解HTML文档结构；4．能够运用文本编辑器制作简单网页。

二、实验环境微机+ Window 操作系统 +IE浏览器+ 网页编辑器三、实验重点及难点熟练使用浏览器进行浏览、搜索、下载。

四、实验内容1、根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。

2、利用搜索引擎，浏览因特网上较为著名的5个网站，记录这些网站的名称、网站地址和以及相应的网页文件格式（扩展名）；3、上网访问实际3个网站（可以上校园网），记录这些网站的名称、网站地址，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）、页面布局方式。

4、在网上找出下列版面布局的结构形式：（象形即可）⑴．“国”字型布局⑵．拐角型布局⑶．拐角型布局⑷．封面型布局(5). 封面型布局5、查看湖北学院网站主页的源代码，收藏到收藏夹中，将其设为主页。

6．使用电脑中的图片工具把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。

7. 什么是网站的CI形象?打开网易主页，查看其CI形象标志。

8、构建HTML文档“我的第一个网页”：（1）从开始菜单启动记事本；（2）在记事本中，录入一个HTML文档；（3）设置该文档在最终在浏览器中显示的标题为“我的第一个网页”；（4）在页面添加可见的文本“我的第一个网页”；（5）使用记事本的菜单“文件”→“保存”，在“另存为”对话框中，在“保存类型”下拉列表中选择“所有文件”，录入“文件名”myfirstpage.htm，单击“保存”按钮将该页面保存到实验文件夹。

<html><head><title>我的第一个网页</title></head><body >我的第一个网页</body></html>五、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

网页设计与制作实验过程及报告第一篇：网页设计与制作实验过程及报告网页制作过程及报告网页设计与制作的一般实验步骤：1、确定网站主题网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。

最重要的是做出自己的风格，吸引浏览者的眼球。

2、搜集材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。

3、规划网站我的网站包括5个页面。

版面设计要灵活，根据各部分内容的不同适当的自由设计。

但是每个页面的主元素和位置不能变。

用CSS设计一个样式，以保证随时、准确的调用。

另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。

4、选择合适的制作工具做网页的首先工具当然为Dreamweaver。

5、认识网页设计工具Dreamweaver（1）Dreamweaver的启动（2）窗口组成的认识6、新建站点7、站点中首页的创建8、制作网页素材、风格、模板都设计好以后，下一步就是具体的制作网页。

制作网站时，首先要做的就是站点的规划，建立一个本地站点。

网页中的css 样式文件也应统一管理，做到有条不紊。

9、根据自己的网页风格，在网上搜集合适的图片。

最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。

10、上传测试网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。

实验结果及理论分析：通过这简短的三个周的学习，让我有一个独立设计，制作网页的机会，通过这次试验，我的收益颇多。

首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。

第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。