08单元1802网页设计与制作单元实验二
《网页设计与制作教程》实验指导书
《网页设计与制作教程》实验指导书班级姓名学号实验一网页基础知识一、实验目的理解网页组成元素。
理解主页、静态网页、动态网页等概念。
了解常见的网页布局。
熟悉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软件。
《网页设计与制作》综合实训
《网页设计与制作》综合实训第一篇：《网页设计与制作》综合实训《网页制作》期末大作业一、概述：要求设计并制作一个表达某个主题的网站，通过网站的制作，综合运用本课程各单元所学的知识。
网站的内容不能是一些素材如图片、音乐等的堆积，必须有鲜明的主题。
可以从网上下载部分资料，但不能超过整个内容的30%，更不要指望从网上下一个完整的网站应付老师。
总的页数应超过10页（一个包含主题内容的htm文件算一页）。
请同学们注意不要下载相同的资料，如果出现网页内容雷同，双方都要扣分，严重的必须重做。
二、网站内容：自行选择如下内容：科普、科幻知识；公益形象宣传；大、中、小学教学用动画形象；奥林匹克体育；环境保护；战争与和平；求职；校园生活；诚信、传统美德；交通安全；卫生与健康；爱心；教育；新青年；管理；实用工具等。
自己确定一个主题，整个网站要突出主题，信息分类合理，导航清晰。
要求必须有自己创作的内容，这些原创内容可以是文字、图片、动画等。
三、版面及格式：l、要求图文并茂，颜色搭配合理，但是图片及声音文件不要太大。
如果能加入自己创作的动态元素(如Flash，Gif动画等)将获得加分。
希望充分发挥自己的创作能力。
2、要求每个网页都使用表格布局。
3、要求网页中插入有Web组件，包括悬停按钮、滚动字幕、横幅广告管理器等。
4、导航设计简洁明了，不能有“死链接”，要保证能够在网络上浏览。
5、自创内容越多越好，得分越高。
四、递交方式：1、每个同学以自己的学号姓名建一个文件夹，上交时间为18周2、所做网页的首页文件名必须为index.htm3、所有文件名和目录名全部使用英文字母和数字，不得使用汉字或全角符号，否则，网络将出现死链接。
4、递交时必须把网页中所有用到的图片、声音、动画等都一起上传到服务器。
网页的总容量一般不要大于3MB5、建议将网页中的素材分类，建立不同的子目录存放。
五、网页评分标准:整个网页的评分强调“自己的创意”，不管主题是什么，也不论是哪一个栏目的内容，如果创意独特，有自己鲜明的个性、观点，得分较高。
网页设计与制作实验过程及报告
网页设计与制作实验过程及报告网页制作过程及报告网页设计与制作的一般实验步骤：1、确定网站主题网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。
最重要的是做出自己的风格，吸引浏览者的眼球。
2、搜集材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。
3、规划网站我的网站包括5个页面，。
版面设计要灵活，根据各部分内容的不同适当的自由设计。
但是每个页面的主元素和位置不能变。
用CSS 设计一个样式，以保证随时、准确的调用。
另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。
4、选择合适的制作工具做网页的首先工具当然为Dreamweaver。
5、认识网页设计工具Dreamweaver（1）Dreamweaver的启动（2）窗口组成的认识6、新建站点7、站点中首页的创建8、制作网页素材、风格、模板都设计好以后，下一步就是具体的制作网页。
制作网站时，首先要做的就是站点的规划，建立一个本地站点。
网页中的css 样式文件也应统一管理，做到有条不紊。
9、根据自己的网页风格，在网上搜集合适的图片。
最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。
10、上传测试网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。
实验结果及理论分析：通过这简短的三个周的学习，让我有一个独立设计，制作网页的机会，通过这次试验，我的收益颇多。
首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。
第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。
网页设计与制作 实验报告
网页设计与制作实验报告网页设计与制作实验报告一、引言在当今数字化时代，网页设计和制作已经成为了一门重要的技能。
随着互联网的普及和发展，网页已经成为了人们获取信息、进行交流和展示个人或企业形象的重要平台。
本实验旨在探究网页设计和制作的基本原理和技巧，并通过实践来提升我们的实际操作能力。
二、实验目的1. 了解网页设计的基本原则和规范；2. 掌握网页制作的基本技巧和工具；3. 能够设计和制作简单的网页。
三、实验过程1. 网页设计原则在开始实验之前，我们首先学习了网页设计的基本原则。
这包括布局的合理性、色彩的搭配、字体的选择和排版的规范等。
通过学习这些原则，我们能够设计出更具吸引力和易用性的网页。
2. 网页制作工具为了进行网页制作，我们需要掌握一些基本的工具。
在本实验中，我们学习了HTML和CSS这两种最基础的网页制作语言。
HTML用于创建网页的结构和内容，而CSS则用于控制网页的样式和布局。
通过学习和练习这些工具，我们能够自由地设计和制作网页。
3. 网页制作实践在学习了网页设计原则和掌握了网页制作工具之后，我们开始进行实际的网页制作实践。
我们选择了一个简单的主题，例如旅游景点介绍或个人简历等，然后根据自己的创意和设计理念进行网页的设计和制作。
四、实验结果经过一段时间的努力，我们成功地完成了自己设计的网页。
通过合理的布局、美观的色彩搭配和清晰的内容呈现，我们的网页具有良好的用户体验和视觉效果。
同时，我们还运用了一些CSS技巧，如响应式设计和动画效果，进一步提升了网页的质量和吸引力。
五、实验总结通过这次实验，我们深入了解了网页设计和制作的基本原理和技巧。
我们学会了如何根据不同的需求和目标制定网页设计方案，并运用HTML和CSS等工具来实现我们的设计理念。
同时，我们也意识到网页设计和制作是一个不断学习和提升的过程，我们需要不断地关注行业的最新动态和技术的发展，以保持自己的竞争力。
六、展望未来随着技术的不断发展和用户需求的不断变化，网页设计和制作将会面临新的挑战和机遇。
网页设计与制作实验报告
网页设计与制作实验指导一览表实验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，并查看工具栏、菜单栏、标题栏等工作环境。
《网页设计与制作》实验报告
《网页设计与制作》实验报告院系名称：专业班级：电学生姓名：学号：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.需求分析在开始设计与制作网页之前，我们首先进行了需求分析。
通过与客户的沟通，我们了解到他们希望网页具有简洁、美观、易用的特点。
我们还收集了一些类似网页的参考资料，以便更好地了解行业趋势和用户需求。
2.界面设计基于需求分析的结果，我们开始进行界面设计。
我们首先绘制了草图，以便快速构思和修改设计方案。
然后，我们使用设计软件创建了高保真的界面原型，以便客户更好地理解我们的设计意图。
3.内容制作在界面设计确定后，我们开始进行内容制作。
我们编写了网页所需的文本内容，并收集了一些合适的图片和视频素材。
在整理和编辑内容时，我们注重信息的准确性和可读性，以及多媒体元素的适度运用。
4.页面编码页面编码是网页设计与制作的关键环节。
我们使用HTML、CSS和JavaScript等技术语言，将界面设计和内容制作转化为可视化的网页。
我们注重代码的结构和规范，以确保网页的兼容性和性能。
5.测试与优化在完成页面编码后，我们进行了测试与优化工作。
我们检查了网页在不同浏览器和设备上的兼容性，并修复了一些问题。
我们还进行了性能优化，以提高网页的加载速度和用户体验。
四、实验结果经过团队的共同努力，我们成功设计与制作了一个符合客户需求的网页。
该网页具有简洁、美观、易用的特点，内容丰富、布局合理。
我们还为网页添加了一些动画效果和交互功能，以增强用户的体验感。
五、实验总结通过本次实验，我们深入了解了网页设计与制作的流程和技术。
我们学会了如何进行需求分析、界面设计、内容制作、页面编码、测试与优化等工作。
《网页设计与制作》-实训指导书
目录实训1 站点创建实训2 搜集素材实训3 用表格设计主页布局实训4 在主页制作中插入文本操作实训5 在主页制作中插入图像操作实训6 在主页制作中超级的设置实训7 制作动感网页实训8 表单制作实训9 CSS样式表的使用实训10 JavaScript技术实训11 应用行为实训12 利用框架制作“公司简介”网页实训13 利用布局表格制作“新书推介”网页实训14 模板和库的使用实训15 利用层的布局制作“技术支持”网页实训16 网页设计与管理实训17 开发综合实训实训1 站点创建实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建目录结构、栏目文件夹、网页文件的基本操作方法。
实训环境硬件环境：考核用机为奔腾以上兼容机，存不少于 32M ，最好 64M 或128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。
操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材。
实训课时2学时实训容创建站点：创建目录结构：创建栏目文件夹：创建网页文件：掌握设置网页的页面属性实训要求要求学生能掌握如何创建站点，正确创建目录结构及栏目文件夹，创建主页文件index.htm,并正确命名，掌握设置网页的页面属性的方法。
实训步骤1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建image 文件夹以存放中所要用到的图片。
2、定义站点：设置 "站点名称"，命名为 "博客人";设置本地根文件夹,指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost。
3、创建目录结构及栏目文件夹(如下图):4、E盘下的bookman文件夹创建主页文件index.htm5、设置网页的页面属性。
网页设计与制作实验指导书
网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系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: 建立站点 (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所示的位置，有关绘制层的更多内容参见后面的章节。
[G网页设计与制作]实验2
![[G网页设计与制作]实验2](https://img.taocdn.com/s3/m/cb2819637e21af45b307a87f.png)
实验二
上交作业方法：
自建文件夹，起名如“网页制作1班_张三”，把实验需要完成作品放进此文件夹，上交到服务器指定的文件夹里，每次作品需要认真完成，作为平时作业成绩评定。
实验内容：
1.制作自己的班级课程表，掌握在网页中插入表格，表格合并，表格背景设置，
表格边框设置等操作。
效果如下图：
2.制作一个“水调歌头”的网页实例。
文字处理要求如下：
1)在站点中，新建网页，录入“水调歌头”的诗词内容，并进行
命名保存；
2)标题采用黑体、36号字体，居中对齐；
3)诗词内容，参考下图进行文字换行和分段落；利用文本编辑的
“属性”面板，进行字体、文字颜色、粗体、斜体、对齐方式
等属性优化设置。
4)插入两条水平线，设置宽度、高度和颜色，用于分隔内容。
5)网页版权信息，插入日期，说明网页制作人和制作时间，插入
版权的特殊符号，制作网页版权信息。
6)自选一首midi音乐作为页面背景音乐。
7)网页制作效果参考如下：
3.掌握在表格中插入图像、FLASH动画以及文字编辑的方法。
效果
如下：。
网页设计与制作实验报告
( 实验报告)姓名：____________________单位：____________________日期：____________________编号：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，效果如图所示。
网页设计与制作实训总结（2篇）
网页设计与制作实训总结一、实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。
它是根据专业教学计划的要求。
在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程。
因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用。
二、实训目的1、通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。
(1)掌握规划网站的内容结构,目录结构,链接结构的方法。
(2)熟练掌握网页制作软件Dreamweaver8和基本操作和使用技能。
(3)掌握页面的整体控制和头部内容设置的方法。
(4)熟练掌握网页页面布局的各种方法。
(5)熟练掌握在网页中输入,设置标题和正文文字的方法。
(6)熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。
(7)熟练建立各种形式的超级链接的方法。
(8)掌握表单网页制作方法。
(9)掌握网页特效制作方法。
(10)掌握网站测试的方法。
2、训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。
3、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。
4、培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。
三、实训步骤1、定义站点2、设定网页属性和文本格式3、从大到小把结构设计好4、输入主要内容并进行排版5、检查并保存四、实训心得两周的实训转瞬即逝，在这短暂的时间里，我们在老师的指导和帮助下，对于网页设计与制作有了进一步的了解。
在这两周内，同学们每天都按时完成老师留下的作业，对于自己以前不理解的东西，通过老师的重新讲解、指导和自己的练习，对其有了很好的了解;对于我们看不懂的一些内容，通过与同学协商和听老师的讲解来理解并掌握它。
网页设计与制作实验报告2
实验
总结
反思
表格的边框属性设置非常重要，他影响到了网页的美观。还有表格里内容的对齐方式。网页设计一般采用细线表格。
指导
老师
批语
指导教师: 毕春苗 2014年 月 日
四、方法步骤
1.打开dreamweaver，新建html项目。
2.在常用工具栏中找到 按钮，单击。
3.出现如图所示的选择栏，选择所制表格的行数和列数。
.
4.选择3行3列，然后确定，得到如图所示的表格。默认情况下表格。
5选中表格，鼠标拖动改变表格的大小。在下方属性选择卡上设置表格的属性。
6.在表格里插入内容，调整表格，使表格更加美观。
一、实验目的要求
1.熟悉表格的创建、编辑及属性设置
2.掌握表格的制作方法
3.了解特效表格及布局表格的基本操作
二、实验软件及材料
Dreamweaver 8、网页设计与制作教程
三、实验方案
1.练习表格的创建、编辑及属性的设置方法。
2.设计一表格应用案列，方案自定。（建议可参考书上119页上机实训或书上表格应用案例）
陕西理工学院实验报告20142015学年第1学期院系教科学院专业班级教技120学号1203014024学生姓名程小波实验地点实验室计算机课件制作室实验日期2014年12月11日成绩实验课名称实验项目名称实验学时实验类型网页设计与制作表格的创建及应用2验证设计实验报告内容包括
陕 西 理 工 学 院 实 验 报 告
（2014——2015学年第1学期）
院（系）教科学院专业班级教技120学号**********学生姓名程小波
实验地点（实验室）计算机课件制作室实验日期2014年12月11日 成绩
网页设计实验 网页设计与制作
实验一网页设计基础实验一、实验目的学生通过该实验熟悉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、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。
网页设计与制作)实验2文本操作与图像操作
ABCD
学会了使用图像编辑软件 进行基本的图像处理，如 裁剪、调整大小、添加水 印等。
增强了团队合作和沟通能 力，通过小组讨论和分享， 共同完成了实验任务。
本实验的不足与改进
在HTML和CSS文本操作中 ，对于高级样式的应用还不 够熟练，需要进一步练习和
实践。
1
在图像处理方面，对于一些 高级技巧和工具的应用还不 够了解，需要深入学习和探
索。
在网页布局和排版中，还需 提高对用户体验的关注度， 以设计出更符合用户需求的 网页。
需要加强团队合作和沟通能 力的培养，提高小组协作效 率。
下一步的计划
深入学习HTML和CSS的高级 应用，提高网页设计的水平。
学习更多的网页布局和排版 原则，提高网页设计的美观 度和用户体验。
探索更多的图像处理技巧和 工具，提高图像处理能力。
网页设计与制作实验2： 文本操作与图像操作
目录
Contents
• 实验介绍 • 文本操作 • 图像操作 • 实例展示 • 实验总结
01 实验介绍
实验目的
01
掌握HTML和CSS的基本语法和标签，能够编写简单 的网页。
02
学会使用文本和图像元素在网页中添加内容，并对 其进行样式设置。
03
理解网页布局和排版的原理，能够实现简单的网页 布局。
03 图像操作
图像插入与调整
插入图像
在网页编辑器中，选择插入图像功能，上传 本地图片或使用在线图片链接。
图像位置调整
使用定位属性，如"float"或"position"，来 控制图像在页面上的位置。
调整图像大小
通过调整图像的宽度和高度属性，改变图像 的尺寸。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实训课题: 实训课题:文本操作与图像操作 (一)实训课程引导 (二)展示网页的预览效果 内存硬盘网页预览
图A-2 CPU网页在网页中输入文本,输入空格,实现文本换行和编 )在网页中输入文本,输入空格, 辑文本. 辑文本. (2)在网页中插入水平线和日期. )在网页中插入水平线和日期. (3)格式化网页文本. )格式化网页文本. (4)插入图像,设置图像属性. )插入图像,设置图像属性. (5)图像与文本混合编排. )图像与文本混合编排.
《网页设计与制作》 网页设计与制作》 教学课件
主讲人:湖南铁道职业技术学院 陈承欢
Hunan Railway Professional Technology College
单元独立实践2 单元独立实践2:文本操作与图像操作
一,实训课程引导 二,展示网页的预览效果
主 要 教 学 环 节
三,分析实训任务 四,明确实训目的 五,介绍实训步骤与内容 六,学生完成实训任务 七,操作提示与功能扩展 八,实训小结 九,实训拓展
(五)介绍实训步骤与内容
预览实验起点网页 (1)在站点"ComputerDiy"根文件夹中新建一个 )在站点" 根文件夹中新建一个 子文件夹" 实验 实验2", 子文件夹"02实验 ,在该子文件夹中创建一个命名为 的网页文档. "02.html"的网页文档. 的网页文档 的页面属性. (2)设置网页 )设置网页02.html的页面属性. 的页面属性 (3)在网页中输入文字,水平线和日期,设置文本 )在网页中输入文字,水平线和日期, 的属性. 的属性. (4)在网页中插入图像,设置图像的属性,实现图 )在网页中插入图像,设置图像的属性, 文混排效果. 文混排效果.
(六)学生完成实训任务
(1)老师现场指导,答疑…… 老师现场指导,答疑 (2)现场点评…… 现场点评 注意:实验任务完成后,必须将提示信息文字删除. 注意:实验任务完成后,必须将提示信息文字删除.
(七)操作提示与功能扩展
(1)在一行中插入两张图片,且要求两张图片相距一 )在一行中插入两张图片, 定的距离,只需先后插入这两张图片, 定的距离,只需先后插入这两张图片,然后设置图片的水 平边距和对齐方式即可. 平边距和对齐方式即可. (2)要实现图片,文字,水平线混合的效果需要使用 )要实现图片,文字, 一定的技巧,左边的图片应设置"左对齐" 一定的技巧,左边的图片应设置"左对齐".这里主要是 为了训练图文混排的操作方法, 为了训练图文混排的操作方法,后面的章节有多种方法可 以实现图文混排效果,例如表格,布局表格, 以实现图文混排效果,例如表格,布局表格,层,CSS样 样 式等. 式等.
�
(四)明确实训目的
(1)掌握在网页中输入文本,输入空格,实现文本换 )掌握在网页中输入文本,输入空格, 行和编辑文本的方法. 行和编辑文本的方法. (2)学会在网页中插入水平线和日期. )学会在网页中插入水平线和日期. (3)掌握网页文本格式化操作. )掌握网页文本格式化操作. (4)掌握图像的插入方法,图像属性的设置方法. )掌握图像的插入方法,图像属性的设置方法. (5)掌握图像与文本混合编排的方法. )掌握图像与文本混合编排的方法.