图文混排网页制作实验报告概论
图文混排网页制作实验报告
深圳大学实验报告课程名称：网页设计与制作实验序号：实验名称：图文混排网页制作班级：临床一班姓名：张同组人：实验日期：2014 年4月21 日教师签字：一、实验目的(1)掌握网页布局的方法。
(2)掌握在网页中插人图片的方法。
(3)掌握网页中图文混排的排版方法二、实验环境制作秋天的思念网页效果三、实验步骤(1)新建html，在页面属性中设置，背景颜色设置为“#313884” ,页面标题设置为“秋天的思念”。
如下图(2)插人一个3行1列的表格,将表格宽度设置为“558”像素.边框扭细、单元格边距、单元格间距均设置为“0”像素,如图所示。
鼠标右键可以再自动弹出的“属性”面板中设置表格的对齐方式为“居中对齐”。
(3)在“代码”视图中使用代码将第1行单元格的背景设置为图片“bg.gif”（光标插到在<td 后按空格键，dreamweaver自动弹出要插入的对象然后按着他的思路走就可以了，dreamweaver简直是代码盲的福音啊！）,同时在第1行的单元格内插人图片“logo.gif”,并设置为左对齐,效果如图所示。
(4)将第2行和第3行单元格的背景颜色均设置为“#FFA200” ,在第3行的单元格内插人图片“blank.gif” ,并将其宽度设置为“1”像素、高度设置为“10”像素。
注意:blank.gif是一个宽和高均为1像素的透明图片,在网页制作中经常利用这种透明图片来“撑开”表格,使其处于固定的宽度和高度。
(5)在第2行单元格内插人一个1行、3列的表格,将其宽度设置为100%,边框粗细、单元格边距、单元格间距均设置为“0”像素,对齐方式设置为“居中对齐”。
(6)在新插人表格的第2列单元格内插人图片“autu.jpg” ,将第1列至第3列单元格的宽度分别设置为2%、96%、2%,同时单击代码视图,将第1列和第3列单元格内的“ ”删除,效果如图5-4所示。
(7)在表格的下面输人以下版杈信息:关于我们/网站地图/广告指南/联系我们/招聘精英技术支持：信息学院计算机/网络协会Rll Rights Reserved四、结果与分析算是成功完成。
网页设计与制作实验过程及报告
网页设计与制作实验过程及报告网页制作过程及报告网页设计与制作的一般实验步骤：1、确定网站主题网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。
最重要的是做出自己的风格，吸引浏览者的眼球。
2、搜集材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。
3、规划网站我的网站包括5个页面，。
版面设计要灵活，根据各部分内容的不同适当的自由设计。
但是每个页面的主元素和位置不能变。
用CSS 设计一个样式，以保证随时、准确的调用。
另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。
4、选择合适的制作工具做网页的首先工具当然为Dreamweaver。
5、认识网页设计工具Dreamweaver（1）Dreamweaver的启动（2）窗口组成的认识6、新建站点7、站点中首页的创建8、制作网页素材、风格、模板都设计好以后，下一步就是具体的制作网页。
制作网站时，首先要做的就是站点的规划，建立一个本地站点。
网页中的css 样式文件也应统一管理，做到有条不紊。
9、根据自己的网页风格，在网上搜集合适的图片。
最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。
10、上传测试网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。
实验结果及理论分析：通过这简短的三个周的学习，让我有一个独立设计，制作网页的机会，通过这次试验，我的收益颇多。
首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。
第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。
03第3章制作图文混排网页.
03第3章制作图⽂混排⽹页.第3章制作图⽂混排⽹页图像也是⽹页中的主要元素之⼀，图像不但能美化⽹页，⽽且能够更直观地表达信息。
在页⾯中恰到好处地使⽤图像，能使⽹页更加⽣动、形象和美观。
【教学导航】3.1课前准备（1）在本地硬盘创建⽂件夹（2）启动Dreamweaver CS3通过Windows的【开始】菜单启动Dreamweaver CS3。
3.2课堂引导训练及评价【课堂引导训练任务描述】1、⽹页制作任务卡⽹页制作任务卡如表3-1所⽰。
表3-1⽹页制作任务卡⽹页制作任务跟踪卡如表3-2所⽰。
表3-2⽹页制作任务跟踪卡【⽹页效果展⽰】⽹页index0301.html的浏览效果如图3-1所⽰。
【任务完成过程】3.2.1应⽤“⾼级”⽅式创建站点“瀑泉游”【操作要求】应⽤【站点定义】对话框的“⾼级”⽅式创建站点“瀑泉游”。
50第3章制作图⽂混排⽹页图3-1图⽂混排⽹页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输⼊或选择以下各项：②在“本地根⽂件夹”⽂本框中输⼊根⽂件夹“D:\E游天下\03第3章制作图⽂混排⽹页\”。
③在“默认图像⽂件夹”⽂本框中输⼊“D:\E游天下\03第3章制作图⽂混排⽹页\task03-1\images\”。
也可以打开对话框选择⼀个⽂件夹。
④输⼊本机的HTTP地址，如http://172.16.7.26/Etour/。
（4）设置站点的“远程信息”在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
3.2.2应⽤“⽂件”⾯板新建⽹页“index0301.html”【操作要求】应⽤“⽂件”⾯板在站点“瀑泉游”中新建⼀个⽹页⽂档“index0301.html”。
【实施过程】（1）打开“⽂件”⾯板如果“⽂件”⾯板处理隐藏状态，则单击菜单【窗⼝】→【⽂件】打开“⽂件”⾯板。
（2）新建⽹页⽂档在“⽂件”⾯板中站点“瀑泉游”的⽂件夹“task03-1”上单击右键，在弹出的快捷菜51Dreamweaver CS3⽹页制作案例教程单中单击【新建⽂件】菜单项，如图3-7所⽰。
网页制作实验报告
网页制作实验报告一、实验目的。
本实验旨在通过实际操作，掌握网页制作的基本原理和技术，了解网页设计的基本要求和规范，培养对网页设计的兴趣和能力。
二、实验内容。
1. 学习HTML和CSS基础知识；2. 制作一个简单的静态网页，包括文本、图片和超链接等元素；3. 掌握网页布局和样式设计的基本方法。
三、实验步骤。
1. 学习HTML和CSS基础知识。
在实验开始前，我首先对HTML和CSS进行了系统的学习。
HTML是网页的标准标记语言，用于建立网页的结构；而CSS是层叠样式表，用于控制网页的样式和布局。
通过学习这两门技术，我对网页制作有了更深入的理解。
2. 制作一个简单的静态网页。
接下来，我开始动手制作一个简单的静态网页。
首先，我创建了一个HTML文件，并在其中编写了网页的基本结构，包括头部、导航栏、内容区和底部等部分。
然后，我利用CSS对网页进行了样式设计，包括字体、颜色、边框等样式的设置。
同时，我还插入了一些图片和超链接，丰富了网页的内容。
3. 掌握网页布局和样式设计的基本方法。
在制作网页的过程中，我深入学习了网页布局和样式设计的基本方法。
通过调整CSS样式表中的参数，我改变了网页的布局和样式，使其更加美观和易于阅读。
同时，我还学会了如何使用浮动、定位和响应式布局等技术，使网页在不同设备上都能够正常显示。
四、实验总结。
通过本次实验，我深入了解了网页制作的基本原理和技术，掌握了HTML和CSS的基础知识，学会了制作简单的静态网页，并掌握了网页布局和样式设计的基本方法。
这些知识和技能对我今后的学习和工作都具有重要的意义，我会继续努力学习，提高自己的网页制作能力。
五、实验感想。
网页制作是一门非常有趣和实用的技术，通过本次实验，我对网页制作有了更深入的了解，也增强了对这门技术的兴趣。
我相信，在今后的学习和工作中，我会继续深入学习网页制作技术，不断提高自己的能力，为将来的发展打下坚实的基础。
六、参考资料。
1. 《HTML5权威指南》。
网页设计与制作实验报告
网页设计与制作实验报告网页设计与制作实验报告一、引言近年来，随着互联网的普及和发展，网页设计与制作已成为一门热门的技术和艺术。
本篇实验报告旨在总结和分析我们小组在网页设计与制作实验中的经验和成果。
二、实验目的本实验的主要目的是通过实际操作，掌握网页设计与制作的基本技能和流程，培养我们的创意思维和实践能力。
同时，通过团队合作，提高我们的沟通和协作能力。
三、实验过程1.需求分析在开始设计与制作网页之前，我们首先进行了需求分析。
通过与客户的沟通，我们了解到他们希望网页具有简洁、美观、易用的特点。
我们还收集了一些类似网页的参考资料，以便更好地了解行业趋势和用户需求。
2.界面设计基于需求分析的结果，我们开始进行界面设计。
我们首先绘制了草图，以便快速构思和修改设计方案。
然后，我们使用设计软件创建了高保真的界面原型，以便客户更好地理解我们的设计意图。
3.内容制作在界面设计确定后，我们开始进行内容制作。
我们编写了网页所需的文本内容，并收集了一些合适的图片和视频素材。
在整理和编辑内容时，我们注重信息的准确性和可读性，以及多媒体元素的适度运用。
4.页面编码页面编码是网页设计与制作的关键环节。
我们使用HTML、CSS和JavaScript等技术语言，将界面设计和内容制作转化为可视化的网页。
我们注重代码的结构和规范，以确保网页的兼容性和性能。
5.测试与优化在完成页面编码后，我们进行了测试与优化工作。
我们检查了网页在不同浏览器和设备上的兼容性，并修复了一些问题。
我们还进行了性能优化，以提高网页的加载速度和用户体验。
四、实验结果经过团队的共同努力，我们成功设计与制作了一个符合客户需求的网页。
该网页具有简洁、美观、易用的特点，内容丰富、布局合理。
我们还为网页添加了一些动画效果和交互功能，以增强用户的体验感。
五、实验总结通过本次实验，我们深入了解了网页设计与制作的流程和技术。
我们学会了如何进行需求分析、界面设计、内容制作、页面编码、测试与优化等工作。
2024年网页设计实习报告（2篇）
2024年网页设计实习报告从学校毕业后，我第一次步入了社会，从此开始了面对社会、工作的生活。
刚刚走入社会的我是一个性格有些内向的人，面对陌生的人，我不善言辞，不会给自己的外表进行很好的包装，不适合做那些销售、接待的工作，只有技术类的工作，少说多干的活适合我，这个我很清楚。
现在，中国每年都有很多毕业的大学生找不到工作，我也不例外，所以，这第一次实习工作肯定不会太好找，但是相反，我的运气还不错。
找到了一份网页设计的工作。
现将我在工作中的情况报告如下。
一、工作介绍我工作的这家公司，从事网站开发工作的，公司在技术团队这部分是比较正规的，一般是五到六人为一个小组，小组中有明确分工，有负责联系客户接恰生意的，有专门做技术的，而在技术这块分为网站前台、后台开发，我在学校主要做的是后台开发，当然前台设计工作也还算熟练，但不是很精通。
我们这个小组一般接下的活都是一些小型网站的开发工作，这样的网站技术难度不大，而且工作周期短，有相当一部分的，只需要通过cms软件就可以进行开发。
但是有个别的网站开发时，我们还是需要进行一些手写代码工作的。
二、开发技术做为一个刚毕业的大学生，我的知识储备肯定有不足的地方，毕竟学校教的东西肯定会有一部分和社会是脱节的，但好在我的领导对于我没有太多的要求，他只是要求我尽快的适应公司的工作和生活，在短时间内熟练的掌握相关技术，干好本职工作。
在大学里对一个学生来说什么是最重要的，那就是学习能力。
要知道，这个世界上，知识在发展，人类在进步，每天都在进行日新月异的变化，我们的知识储备总会有不够的地方，但是一定要有学习能力，将不会知识快速掌握，只有这样才能占据主动，减少被动情况的尴尬发生，通过二个星期的时间，我成功的适应了公司的工作和生活节奏，每天早九点上班，晚17:30下班，中午休息一个半小时，每周还有两天假期。
2024年网页设计实习报告（2）一、实习概况在2024年暑假期间，我有幸在一家知名互联网公司进行了为期两个月的网页设计实习。
2024网页设计实习报告总结（三篇）
2024网页设计实习报告总结____网页设计实习报告总结一、实习背景及目的本次实习是在____年暑假期间，在某知名网络科技公司进行的网页设计实习。
通过参与公司的实际项目，我得以接触到真实的工作环境和工作流程，深入了解了网页设计的相关知识和技能。
本次实习的目的主要是掌握网页设计的基本原理和技能，锻炼分析和解决问题的能力，提升自己在这个领域的实践经验。
通过实习的学习和实践，我将网页设计与用户体验相结合，提出了一些建议和改进措施，希望能对公司的网页设计工作有所帮助。
二、实习内容及经历在实习期间，我主要参与了公司一个正在进行的网页设计项目。
该项目是一个电商平台的网页设计项目，主要涉及到用户界面的优化和功能的添加。
具体的工作内容包括与产品经理和开发团队进行沟通，了解项目需求和用户需求；负责设计网页的布局和样式，以及添加交互功能；与开发团队进行协作，进行网页的编码和调试；与用户进行交流和反馈，根据用户反馈进行网页的改进等。
在实习期间，我逐渐熟悉了公司的工作流程和设计规范，学习了各种网页设计的工具和软件的使用，提升了自己的设计能力和技术水平。
通过与产品经理和开发团队的沟通，我了解到了用户需求的重要性，学会了从用户的角度思考问题，并且能够提出一些改进建议。
在与开发团队的协作中，我学会了与他人合作和沟通，能够更好地理解他们的思想和需求，并提供有效的解决方案。
三、实习收获和体会通过这次网页设计实习，我学到了很多知识和技能，收获了很多宝贵的经验和体会。
首先，我掌握了网页设计的基本原理和技能，学会了如何设计具有吸引力和易用性的网页界面。
其次，我了解了用户体验的重要性，学会了从用户角度思考问题，并且能够提出一些改进建议，为公司的网页设计工作提供一些参考和帮助。
最后，通过与产品经理和开发团队的沟通和协作，我学会了与他人合作和沟通，锻炼了自己的团队合作能力和解决问题的能力。
这次实习让我更加深入地理解了网页设计这个领域的复杂性和挑战性。
网页制作实习报告(6篇范文)
网页制作实习报告（6篇范文）【导语】网页制作实习报告怎么写好？本文精选了6篇优秀的网页制作实习报告范文，都是标准的书写参考模板。
以下是小编为大家收集的网页制作实习报告，仅供参考，希望您能喜欢。
【第1篇】网页制作实习报告一实验过程1.资料的搜集。
2.熟悉制作软件。
3.构建站点框架。
打开dremweaver后第一步便是新建站点4设计主页及二级页面。
5实现网页间的链接链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果具体情况如下：通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。
使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。
所以我结合所学专业的内容制作了个人网站，作为实习的成果。
其内容是多样化的。
制作网页用的软件是ｄreamweaver , banner软件。
dreamweaver大大加速了网络时代电子交易应用中的项目交付。
它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。
例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。
当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成html代码，或者嵌入到现有的网页中，或者作为单独的网页出现。
主图是一个网页的门面，它能体现出这个网页的整体风格。
制作网页,首先是确定主题,经过再三考虑,就做了个关于中国的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的中国介绍和相关的事迹网站,专门介绍一些即使用,又便宜的小秘笈。
于是网站主题确立。
然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，中国简介，中国历史，用户登录注册页面留言，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
深圳大学
实验报告
课程名称：网页设计与制作
实验序号：
实验名称：图文混排网页制作
班级：临床一班姓名：张
同组人：实验日期：2014 年4月21 日
教师签字：
一、实验目的
(1)掌握网页布局的方法。
(2)掌握在网页中插人图片的方法。
(3)掌握网页中图文混排的排版方法
二、实验环境
制作秋天的思念网页效果
三、实验步骤
(1)新建html，在页面属性中设置，背景颜色设置为“#313884” ,页面标题设置为“秋天的思念”。
如下图
(2)插人一个3行1列的表格,将表格宽度设置为“558”像素.边框扭细、单元格边距、
单元格间距均设置为“0”像素,如图所示。
鼠标右键可以再自动弹出的“属性”面板中设置表格的对齐方式为“居中对齐”。
(3)在“代码”视图中使用代码将第1行单元格的背景设置为图片“bg.gif”（光标插到在<td 后按空格键，dreamweaver自动弹出要插入的对象然后按着他的思路走就可以了，dreamweaver简直是代码盲的福音啊！）,同时在第1行的单元格内插人图片“logo.gif”,
并设置为左对齐,效果如图所示。
(4)将第2行和第3行单元格的背景颜色均设置为“#FFA200” ,在第3行的单元格内插人图片“blank.gif” ,并将其宽度设置为“1”像素、高度设置为“10”像素。
注意:blank.gif是一个宽和高均为1像素的透明图片,在网页制作中经常利用这种透明图片来
“撑开”表格,使其处于固定的宽度和高度。
(5)在第2行单元格内插人一个1行、3列的表格,将其宽度设置为100%,边框粗细、单元格边距、单元格间距均设置为“0”像素,对齐方式设置为“居中对齐”。
(6)在新插人表格的第2列单元格内插人图片“autu.jpg” ,将第1列至第3列单元格的宽度分别设置为2%、96%、2%,同时单击代码视图,将第1列和第3列单元格内的“ ”删除,效果如图5-4所示。
(7)在表格的下面输人以下版杈信息:
关于我们/网站地图/广告指南/联系我们/招聘精英技术支持：信息学院计算机/网络协会
Rll Rights Reserved
四、结果与分析
算是
成功完成。
五、思考题解答
1、“& nbsp” &是转义符，nbsp就是代码，全称就是空格转义符。
作用是html语言里面用来表示空格的一个代码。
2、长度单位:分为绝对长度和相对长度.
绝对长度：em相对于父对象的大小，ex相对于特定字体中的字母x的高度，px相对于特定设备的分辨率，这是最最常用的单位，也是我们一直坚守的单位。
从技术角度来说，px像素其实是一种相对大小的度量单位，它于特定设备的显示或打印的分辨率有关。
例如，一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。
绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。
in英寸cm厘米mm 毫米pt点pc12点活字。
一般使用绝对长度中的pt点和相对长度里的px
3、这个问题我在上次实验就发现了，问了老师，老老师说Dreamweaver本身是没有调节背景图片的属性功能。
这次有空我上网搜搜了发现网上有两个解决办法【（1）可以直接在代码框中编写，（如图片是123.jpg，默认是平铺，改为不平铺的代码是：background="ima ges/123.jpg" style=background-repeat:no-repeat>；（2）也可以就在页面属性里可以找到重复和不重复的选择进行设置。
（3）还有人用插入】
前两个页面属性设置原理一样所以亲测一个如下图亲测后发现
是下图的结果。
插入亲测也不可以，效果如下图
所以要么通过ps把图片分辨率改大，或者直接选一张大图，便可以在Dreamweaver中看到。
六、心得体会
这个实验有点难，觉得有些都不怎么会，比如文本插入，后来仔细看了下实验书和网上的教程，才算完成（ps：后来又回顾了ppt发现就在2章就讲了，哎！）。
可能是上课老师有演示但是自己忘了吧，所以做得有点慢。
不过后来成功完成后小有成就感。