网页制作基础教程实验报告（网页制作div+css实验报告）

本文目录

• 网页制作div+css实验报告
• 高分求网页制作实验报告!!!
• 网页制作高手进来帮我解析一下这些实验报告咋写，跪求
• 网站制作教程

网页制作div+css实验报告

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。SEO是指搜索引擎优化，主要就是通过对网站的结构、标签、排版,关键字等各方面的优化，使搜索引擎更容易抓取网站的内容，并且让网站的各个网页在等搜索引擎中获得较高的评分，从而获得较好的排名。DIV+CSS网页布局对SEO有很重要的影响。具体来看到底有什么好处呢?
DIV+CSS的网页布局对SEO的好处一、不存在表格的嵌套问题
很多“网站如何推广”的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎相关的官方证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，Spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。
使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，蜘蛛(Spider)爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
DIV+CSS的网页布局对SEO的好处二、精简的代码
使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。
代码精简所带来的直接好处有两点：一是提高蜘蛛(Spider)爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到蜘蛛(Spider)欢迎，这样对收录数量有很大好处。

而DIV+CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。
这虽然没有得到确认，但还是建议使用Table布局的朋友们，在设计时尽可能的不要使用多层表格嵌套，SEOer(seo工作者们)们在文章中说明了这一点，相信他们也不是没有依据。
DIV+CSS的网页布局对SEO的好处三、对搜索引擎的排名
基于XTHML标准的DIV+CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。
DIV+CSS的网页布局对SEO的好处四、提高网页的访问速度
DIV+CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在蜘蛛(Spider)爬行时是非常有利的。过多的页面代码可能造成爬行超时，蜘蛛(Spider)就会认为这个页面无法访问，影响收录及权重。
真正的SEOer(seo工作者们)不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。

换一个角度抛开DIV+CSS对SEO的有利影响.单独来讲这种div+css布局也是很有益的,可以说是实下是最流行的网页布局方式.可是加快我们网站的速度,便于管理与修改.当然div+css布局也有不完善的方面,比如说,他的css样式表与各种浏览器之间的不兼容问题.当然如果你是div+css高手的话相信这个不难吧!

高分求网页制作实验报告!!!

***隐藏网址***
网页制作实验报告
实验一：站点设置
一、实验目的及要求
本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。
3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；
三、实验原理
通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
四、实验方法与步骤
1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。
2）在弹出的“站点定义为”对话框中单击“高级”选项卡。
3）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。
4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。
五、实验结果
六、讨论与结论
实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。
实验二：页面图像设置
一、实验目的及要求：
本实例的目的是设置页面的背景图像,并创建鼠标经过图像。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。
3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；
4、安装Acdsee、Photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
设置页面的背景图像,并创建鼠标经过图像。
四、实验方法与步骤
1) 在“页面属性”对话框中设置页面的背景图像。
2) 在页面文档中单击“”插入鼠标经过图像。
五、实验结果
六、讨论与结论
实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。当然这种实验效果很难在实验结果的截图里表现出来。这个实验的关键在于背景图像的选择，如果背景图像太大不仅会影响网页的打开速度，甚至图像在插入会也会有失真的感觉，因此在插入前对图像进行必要的处理能使实验的效果更好。
实验三：表格制作
一、实验目的及要求：
本实例是要创建边框为1像素的表格。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。
3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；
4、安装Acdsee、Photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
创建边框为1像素的表格。
四、实验方法与步骤
1) 在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。
2) 选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。
3) 在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”（#FFFFFF）。
4) 设置完毕，保存页面，按下“F12”键预览。
五、实验结果
六、讨论与结论
本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。
实验四：创建锚点链接
一、实验目的及要求：
本实例的目的是创建锚点链接。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。
3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；
4、安装Acdsee、Photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
创建锚点链接。
四、实验方法与步骤
1) 在页面中插入1行4列的表格，并在各单元格中输入导航文字。
2) 分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。
3) 在文档中输入文字并设置锚记名称“01”，按下“ Enter”键换行，输入一篇文章。
4) 在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“ Enter”键换行，输入一篇文章。
5) 同样的方法在页面下文分别输入文字和命名锚记为“03”和“04”，并输入文章。
6) 保存页面，按下“F12”键预览。
五、实验结果
六、讨论与结论
添加瞄记的作用是可以帮读者快速找到自己想要的文章，同时也可以使页面更加精简。本实验的关键难点在于链接文本框输入的名称和瞄记的名称要相一致才能达到实验的效果，同时要记得是在上一篇文章的结尾处输入文字并设置瞄记名称，并记得输入对应的文章，否则瞄记可能不能用。熟练程度低在实验中不能很好地使用各种工具，无法一次准确地寻找到适当的位置。实验中忘记选择“不可见元素”，几次实验都失败，最后才得出正确的结论。因此在实验前要先做好预习，否则实验过程会比较吃力。
实验五：设置CSS样式
一、实验目的及要求：
本实例的目的是通过设置CSS样式创建表格的虚线边框。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。
3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；
4、安装Acdsee、Photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
通过设置CSS样式创建表格的虚线边框。
四、实验方法与步骤
1) 在网页中创建一个表格。
2) 在“CSS样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。
3) 在弹出的对话框中进行设置，完成后单击“确定”
后面的看我发的那个网站！

网页制作高手进来帮我解析一下这些实验报告咋写，跪求

第一点是让你写个方案就行，那要看你自己思路了。
第二点于三点是让你把材料集合起来，使之有助于发布网上。
第四点是让你看Internet上的网站，让你吸取经验。
第五点就是实际操作了，我给你一个导航条代码与网站框架。你借鉴一下！
这是单个的导航条。。。
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》nav01《/title》
《style type="text/css"》
* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background:#666;
}
#nav {
margin:100px;
list-style:none;
}
#nav li {
float:left;
}
#nav li a {
padding:10px 20px;
background: url(images/nav.gif) repeat-x;
color:#fff;
text-decoration:none;
text-transform:capitalize;
display:block;
}
#nav li a:hover {
color:#000;
background:#ccc;
border:0px solid #000;
}
#nav li a:active {
background: #333333;
}
《/style》
《/head》
《body》
《ul id="nav"》
《li》《a href="#"》home《/a》《/li》
《li》《a href="#"》about《/a》《/li》
《li》《a href="#"》news《/a》《/li》
《li》《a href="#"》products《/a》《/li》
《li》《a href="#"》services《/a》《/li》
《li》《a href="#"》cloents《/a》《/li》
《li》《a href="#"》blog《/a》《/li》
《li》《a href="#"》link《/a》《/li》
《/ul》
《/body》
《/html》
这是简单网页。。。
***隐藏网址***
***隐藏网址***
《!-- DW6 --》
《head》
《!-- Copyright 2005 Macromedia, Inc. All rights reserved. --》
《title》Home Page《/title》
***隐藏网址***
《link rel="stylesheet" href="mm_health_nutr.css" type="text/css" /》
《script language="JavaScript" type="text/javascript"》
//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
《/script》
《/head》
《body bgcolor="#F4FFE4"》
《table width="100%" border="0" cellspacing="0" cellpadding="0"》
《tr bgcolor="#D5EDB3"》
《td width="382" colspan="3" rowspan="2"》《img src="mm_health_photo.jpg" alt="Header image" width="382" height="101" border="0" /》《/td》
《td width="378" height="50" colspan="3" id="logo" valign="bottom" align="center" nowrap="nowrap"》insert website name《/td》
《td width="100%"》 《/td》
《/tr》

《tr bgcolor="#D5EDB3"》
《td height="51" colspan="3" id="tagline" valign="top" align="center"》OPTIONAL TAGLINE HERE《/td》
《td width="100%"》 《/td》
《/tr》

《tr》
《td colspan="7" bgcolor="#5C743D"》《img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /》《/td》
《/tr》

《tr》
《td colspan="7" bgcolor="#99CC66" background="mm_dashed_line.gif"》《img src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0" /》《/td》
《/tr》

《tr bgcolor="#99CC66"》
《td colspan="7" id="dateformat" height="20"》 《script language="JavaScript" type="text/javascript"》
document.write(TODAY); 《/script》 《/td》
《/tr》
《tr》
《td colspan="7" bgcolor="#99CC66" background="mm_dashed_line.gif"》《img src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0" /》《/td》
《/tr》

《tr》
《td colspan="7" bgcolor="#5C743D"》《img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /》《/td》
《/tr》

《tr》
《td width="165" valign="top" bgcolor="#5C743D"》
《table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation"》
《tr》
《td width="165"》 《br /》
《br /》《/td》
《/tr》
《tr》
《td width="165"》《a href="javascript:;" class="navText"》topics《/a》《/td》
《/tr》
《tr》
《td width="165"》《a href="javascript:;" class="navText"》guidelines《/a》《/td》
《/tr》
《tr》
《td width="165"》《a href="javascript:;" class="navText"》educators《/a》《/td》
《/tr》
《tr》
《td width="165"》《a href="javascript:;" class="navText"》special needs《/a》《/td》
《/tr》
《tr》
《td width="165"》《a href="javascript:;" class="navText"》food science《/a》《/td》
《/tr》
《/table》
《br /》
《br /》
《br /》
《br /》 《/td》
《td width="50"》《img src="mm_spacer.gif" alt="" width="50" height="1" border="0" /》《/td》
《td width="305" colspan="2" valign="top"》《img src="mm_spacer.gif" alt="" width="305" height="1" border="0" /》《br /》
《br /》
《br /》
《table border="0" cellspacing="0" cellpadding="0" width="305"》
《tr》
《td class="pageName"》WELCOME MESSAGE《/td》
《/tr》

《tr》
《td class="bodyText"》《p》This Home Page layout makes a great starting point for your website. Virtually all of the content is customizable, including the images, the text, and the links. You can decide whether to keep the existing graphics or swap them out for pictures of your own.《/p》

《p》The text on this page is intended to help you jumpstart your design by suggesting the sort of content you may want to include, but don’t let it limit you. The same is also true for the link text - feel free to change the names of the links to better suit your particular needs. The Home Page layout can be used for multiple pages on your site, or you can choose from the Text, Catalogue, Product, or Calendar layouts as well. Don’t be afraid to get creative and combine different page layouts to make your site as engaging as possible. If you have any questions about using Contribute to edit these pages, refer to the Read Me file included with the download or to the Contribute Help System. Have fun and make a great website!《/p》 《/td》
《/tr》
《/table》
《br /》
《br /》 《/td》
《td width="50"》《img src="mm_spacer.gif" alt="" width="50" height="1" border="0" /》《/td》
《td width="190" valign="top"》《br /》
《br /》
《table border="0" cellspacing="0" cellpadding="0" width="190" id="leftcol"》

《tr》
《td width="10"》《img src="mm_spacer.gif" alt="" width="10" height="1" border="0" /》《/td》
《td width="170" class="smallText"》《br /》
《p》《span class="subHeader"》TITLE HERE《/span》《br /》
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 《/p》

《p》《span class="subHeader"》TITLE HERE《/span》《br /》
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 《/p》

《p》《span class="subHeader"》TITLE HERE《/span》《br /》
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 《/p》

《br /》
《br /》 《/td》
《td width="10"》 《/td》
《/tr》
《/table》 《/td》
《td width="100%"》 《/td》
《/tr》
《tr》
《td width="165"》 《/td》
《td width="50"》 《/td》
《td width="167"》 《/td》
《td width="138"》 《/td》
《td width="50"》 《/td》
《td width="190"》 《/td》
《td width="100%"》 《/td》
《/tr》
《/table》
《/body》
《/html》

网站制作教程

网站制作教程如下：教程内容：制作一个简单的网页（包括l代码和css样式表）。在dreamweaves中插入图片。使用fireworks制作网站首页。添加flash。将网站加入到百度、google等搜索引擎。发布到一些免费空间上。测试。修改。推广。维护更新。总结。

一、传统方法（需要一定的网站制作技术）：网站由空间（服务器）、域名（如baidu.com）程序（模板）组成。

缺点：需要购买空间（服务器），需要购买域名，需要有购买程序（模板）、需要使用DW网页器、需要使用FTP进行上传、不仅仅花钱且需要网页的知识、操作麻烦、新手无法快速学会。

二、自助建站方法：只需要在其网站上注册一个账号。缺点：其普遍质量较低，模板改不了，无数人共用一套模板，而且大部分不太美观，拿不到网站源码和空间管理权，打着免费的旗号，提供的是几十M的小小空间，上传几张图片就满了，需要购买相应的套餐，价格贵的很。

三、孙福喜网站制作教程（零基础，5分钟学会）：在线制作、在线发布；无需自己购买空间（服务器），无需FTP上传；自带100个模板，无需网页技术；学会之后可以免费制作100个网站；无需网站备案；后台管理简单；适合没有任何基础的人，快速掌握。