实验报告1-DIV+CSS网页设计
实验四 Div+CSS网页布局
实验四Div+CSS网页布局一、站点规划在网页制作中,有许多的术语,例如:HTML、CSS、DIV等等。
下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思,构思好了,一般来说还需要制作的界面布局简单的构画出来。
下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;2、内容部分又可分为侧边栏、主体内容;3、底部,包括一些版权信息。
有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
DIV结构如下:│body {} /*这是一个HTML元素,具体我就不说明了*/└#Container {} /*页面层容器*/├#Header {} /*页面头部*/├#PageBody {} /*页面主体*/│├#Sidebar {} /*侧边栏*/│└#MainBody {} /*主体内容*/└#Footer {} /*页面底部*/至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹,命名为“DIV+CSS页面布局”,在文件夹下新建两个空的记事本文档,输入以下内容:这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的布局了。
关于以上CSS的说明:1、请养成良好的注释习惯,这是非常重要的;2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;3、讲解一些常用的CSS代码的含义:font:12px Tahoma;这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;margin:0px;也使用了缩写,完整的应该是:margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上/ 右/ 下/ 左,你也可以书写为margin:0(缩写);以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,另外还有以下几种写法:margin:0px auto;说明上下边距为0px,左右为自动调整;我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
用DIV+CSS实现网页布局及网站设计
学号:1407010222 姓名:叶亮班级:14计算机2班实验二用DIV+CSS实现网页布局及网站设计一、实验目的与要求1. 掌握HTML基本标签的应用2. 掌握CSS基本知识。
3. 掌握用DIV+CSS实现网页布局及网站设计。
二、实验内容1. 插入CSS样式表2. 建立DIV标签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">.h {font-family: 黑体;font-size: 18px;font-style:normal ;}</style><style>p {text-indent: 20px;text-align: center;line-height: 150px;word-spacing: 10px;letter-spacing: 10px;text-decoration: underline;font-family:楷体;font-style: italic;font-size: 60px;color:darkgoldenrod;font-weight: bold;}p1 {font-family: 仿宋;font-size: 30px;color:blue;font-weight: bold;}#container {width :810px;margin :auto ;background-color:aquamarine;}#header {height:150px;background-image:url(/images/1.jpg);background-repeat:round;}#main {background-color:darkorange;height :400px;margin-bottom:5px;}#lside {background-color:darkkhaki;width :403px;float :left;height :395px;margin-right:5px;margin-top:5px;background-image:url(/images/b1.jpg);background-repeat:round;}#rside {background-color:darkseagreen;width :402px;float :right;height :395px;margin-top:5px;background-image:url(/images/b2.jpg);background-repeat:round;}#footer {height :390px;background-image:url(/images/b3.jpg);background-repeat:round;}</style></head><body background="images/b.jpg"><div id="container"><div id="header"><p>经典小说推荐</p></div><div id="main"><div id="lside"><p1>历史类</p1><table width="395"height="360"border="1"><tr><td><span class="h">《大秦帝国》 华夏历史上最强大帝国的崛起与没落。
实训4 div+css综合运用
实训4 div+css综合运用一、背景介绍在Web开发领域,div和css是两个基础、重要的概念。
div是HTML中的一个标签,用来划分网页的结构和布局;而css是一种样式表语言,用于描述HTML文档的呈现方式。
实训4中涉及到了div 和css的综合运用,旨在帮助学习者掌握这两个技术,并且能够灵活运用于实际项目中。
二、整体评估在实训4中,学习者需要通过实际操作,完成一个包含头部、导航、内容区域和底部的网页布局。
这样的任务要求对div和css的综合运用提出了很高的要求,需要考虑到页面的整体结构、样式和布局。
在评估过程中,我发现学习者需要注意以下几点:1. 结构清晰:div标签应该按照页面的结构和布局来合理地进行划分和嵌套,以确保页面结构清晰、层次分明。
2. 样式统一:css样式应该对整个页面起到统一、协调的作用,保证整体的美观和一致性。
3. 响应式布局:在综合运用中,需要考虑到不同设备上的显示效果,保证页面能够适配不同的屏幕尺寸。
4. 创新设计:除了基本的布局要求,学习者还可以通过css的特效和动画等进行创新设计,提升页面的互动性和吸引力。
三、文章撰写在本次实训4中,我们深入学习了div和css的综合运用,从理论到实践,都有了全面的了解和掌握。
通过对div的合理划分和css的样式设置,我们可以轻松实现一个精美、完善的网页布局。
在整个过程中,我对div和css的重要性有了更深的理解。
div作为网页设计中最基础的组件,它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。
通过div的灵活运用,我们可以将页面分割成不同的模块,从而更好地呈现页面内容,提高用户的浏览体验。
css则是页面样式的设计师,通过设置各种样式属性,我们可以实现页面的美化和个性化定制。
通过css的盒子模型、浮动布局、弹性布局等特性,我们可以完美定制各种不同风格的网页布局。
在综合运用的过程中,我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。
网页制作实验报告
网页制作实验报告一、实验目的本次网页制作实验的主要目的是通过实践操作,深入了解网页制作的流程和技术,掌握网页设计的基本原理和方法,提高自己的网页开发能力和创新思维。
二、实验环境1、操作系统:Windows 102、开发工具:Adobe Dreamweaver CC 2019、Sublime Text 33、浏览器:Google Chrome、Mozilla Firefox三、实验内容1、网页规划确定网页主题:本次实验选择制作一个个人博客网站,主要包括个人简介、文章展示、留言板等板块。
设计网页布局:采用了常见的上下型布局,顶部为导航栏,中间为主要内容区域,底部为版权信息。
收集素材:通过网络搜索和自己拍摄,收集了一些与博客主题相关的图片和文字素材。
2、 HTML 编写创建 HTML 文件:使用 Sublime Text 3 新建一个 HTML 文件,并设置基本的文档结构,包括`<html>`、`<head>`和`<body>`标签。
构建网页框架:使用`<div>`标签划分网页的不同区域,如头部、导航栏、侧边栏、内容区和底部。
插入文本和图片:使用`<p>`标签插入文本内容,通过`<img>`标签插入图片,并设置图片的大小和位置。
3、 CSS 样式设计创建 CSS 文件:在同一目录下创建一个 CSS 文件,用于定义网页的样式。
设定字体样式:设置网页的字体类型、大小、颜色和行高。
设计布局样式:使用浮动、定位和弹性布局等技术,实现网页的布局效果,如导航栏的水平排列、侧边栏的固定位置等。
添加背景和边框:为网页的不同区域添加背景颜色和图片,以及边框样式。
4、 JavaScript 交互实现引入 JavaScript 文件:在 HTML 文件中通过`<script>`标签引入JavaScript 文件。
实现滚动效果:使用JavaScript 实现网页滚动时导航栏的固定效果,以及滚动到指定位置时的动画效果。
网页制作实验报告4篇
网页制作实验报告4篇网页制作实验报告4篇在生活中,我们使用报告的情况越来越多,我们在写报告的时候要避免篇幅过长。
我敢肯定,大部分人都对写报告很是头疼的,下面是小编收集整理的网页制作实验报告,欢迎大家分享。
网页制作实验报告1一、实验目的及要求:本实例的目的是通过设置css样式创建表格的虚线边框。
二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境,支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
三、实验原理通过设置css样式创建表格的虚线边框。
四、实验方法与步骤1) 在网页中创建一个表格。
2) 在“css样式”面板中单击“”按钮,在弹出的对话框中进行设置,完成后单击“确定”按钮。
3) 在弹出的对话框中进行设置,完成后单击“确定”按钮。
五、实验结果六、讨论与结论对话框中各项指标和属性的设置存在一定的难度,如果没熟练掌握就容易出错使实验失败。
对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。
这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度,只要充分地掌握了软件的各种操作,对各属性所代表的含义有充分的认识就能很好地完成这个实验。
网页制作实验报告2一、实验目的及要求:本实例的目的是创建锚点链接。
二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境,支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
CSS实习报告范文
CSS实习报告范文一、实习背景我在家互联网企业进行为期两个月的实习期间主要从事前端开发工作。
在这期间,我主要负责网站页面的样式设计与布局,使用CSS完成网站的整体美化和优化。
二、实习内容1.页面样式设计根据产品需求和UI设计师提供的设计稿,我使用CSS进行页面样式设计。
首先,我使用HTML制作页面的基本结构,然后使用CSS添加样式,包括颜色、字体、边框、背景等。
根据UI设计师提供的设计稿,我将页面的样式与设计稿尽量保持一致,以达到美化页面的效果。
2.页面布局在进行页面布局时,我使用了CSS的盒模型和浮动布局等技术。
通过设置不同元素的宽度、高度、外边距和内边距等属性,我能够灵活地调整页面的布局。
同时,为了适应不同屏幕大小的设备,我还使用了响应式布局,使页面在不同设备上能够呈现出最佳的效果。
3.样式优化在完成页面的样式设计和布局之后,我对页面进行了优化。
首先,我对CSS代码进行了压缩,去除了多余的空格和换行符,减小了文件的大小,提高了页面加载速度。
其次,我使用了CSS Sprites技术,将多个小图标合并成一个大图,并通过CSS的background-position属性来显示不同的图标,减少了请求次数,提高了页面加载速度。
此外,我还使用了CSS3的动画效果,为页面增添了一些交互效果,提升了用户体验。
三、实习总结通过这次实习,我对CSS的应用有了更深入的了解。
我学会了如何使用CSS实现页面的样式设计和布局,以及如何通过优化CSS代码提高页面的加载速度。
在实习期间,我充分发挥了自己的创造力和想象力,将UI设计师的设计稿转化成了实际可见的页面效果。
我还学到了很多与团队合作的技巧,通过与产品经理、UI设计师和后端开发人员的密切合作,我能够更好地理解团队的需求,并与他们紧密配合,共同完成项目。
通过这次实习,我不仅学到了很多关于CSS的知识和技巧,还提升了自己的团队合作能力和问题解决能力。
在未来的工作中,我将继续努力学习,不断提升自己的技术能力和专业水平,为企业的发展做出更大的贡献。
HTML学习--DIV+CSS布局实验
1
1)了解页面常用布局结构;
2)掌握DIV的使用方法;
3)掌握DIV+CSS布局的基本方法;
4)熟练编制符合W3C标准的XHTML文档。
2
1)将实验三中完成的网站页面,修订成为符合W3C标准的XHTML文档;
2)采用DIV+CSS将实验三的页面重新布局;
3)制作一个简单的如下图框架的首页,不需要填写具体内容,使用背景色标出区域即可;
5.3
接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。
5.2
自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。
<meta content="css练习,西北工业大学,web,软件与微电子学院" name="keywords" />
实验四DivCSS网页布局
实验四 Div+CSS网页布局一、站点规划在网页制作中,有许多的术语,例如: HTML、CSS、DIV等等。
下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思,构思好了,一般来说还需要制作的界面布局简单的构画出来。
下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;2、内容部分又可分为侧边栏、主体内容;3、底部,包括一些版权信息。
有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
DIV结构如下:│body {}/*这是一个HTML元素,具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹,命名为“DIV+CSS页面布局”,在文件夹下新建两个空的记事本文档,输入以下内容:这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的布局了。
关于以上CSS的说明:1、请养成良好的注释习惯,这是非常重要的;2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;3、讲解一些常用的CSS代码的含义:font:12px Tahoma;这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;margin:0px;也使用了缩写,完整的应该是:margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,另外还有以下几种写法:margin:0px auto;说明上下边距为0px,左右为自动调整;我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
网页设计1实验报告
课程实验报告
专业年级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;。
最简单的divcss网页设计报告及其代码
最简单的divcss网页设计报告及其代码实验六CSS布局【实验目的】掌握用CSS的布局。
【实验内容】1、熟悉Dreamweaver软件的环境;2、会使用CSS进行布局。
【实验步骤】1. 打开Dreamweaver,新建HTML文件。
在代码中body中插入一个DIV标签。
然后选择标签,新建CSS规则,在新建的CSS规则中,对新建的规则进行设置。
2. 对背景项设置,可以设置背景色;对方框项设置,可以设置标签的宽,高,和浮动(左对齐,右对齐,居中,无),以及方框位置的Padding和Margin进行设置;对边框设置,设置它的类型、宽度和颜色。
这是一栏布局。
3. 二栏布局是在一栏布局的基础上再新建一个DIV标签。
对新建的标签进行同样的设置,在设置方框的浮动时,选择不同的浮动,会出现不同的效果,如一个DIV标签设置为左对齐,另一个设为右对齐。
这种效果还可以通过所建规则中的定位进行设置。
4. 嵌套布局。
将第三个div嵌套在另一个div中。
【实验结果】【实验心得和体会】通过本次的实验,我熟练掌握了div布局技巧。
能够完成简单的css+div布局。
如上图。
现在网页设计过程中基本都是使用css+div 的格式进行布局。
学会css+div对于网页设计来说有很重要的意义。
DIV+CSS网页设计实例教程目录:第一步:规划网站,本教程将以图示为例构建网站;第二步:创建html模板及文件目录等;第三步:将网站分为五个div,网页基本布局的基础;第四步:网页布局与div浮动等;第五步:网页主要框架之外的附加结构的布局与表现;第六步:页面内的基本文本的样式(css)设置;第七步:网站头部图标与logo部分的设计;第八步:页脚信息(版权等)的表现设置;第九步:导航条的制作(较难);第十步:解决IE浏览器的显示BUG;第一步:规划网站,本教程将以图示为例构建网站1.规划网站,本教程将以下图为例构建网站。
其基本布局见下图:主要由五个部分构成:1.Main Navigation 导航条,具有按钮特效。
div和css
河南城建学院计算机学院《网页编程》实验报告班级姓名:学号:实验日期: 2014 年 11 月 03 日软件环境: Windows 、ie一、实验目的1、掌握web标准和网站重构;2、掌握css选择器分类;3、掌握css应用;4、掌握div元素的定位。
二、实验内容1、结合web标准实现网页设计;2、应用内部样式表和外部样式表到网页;3、结合div和css实现页面美化。
三、运行结果截图及代码清单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><link href="Untitled-5.css" rel="stylesheet" type="text/css"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title><style type="text/css">body {background-image: url(t010dd639f9b629de6f.jpg);background-repeat: no-repeat;font-size: 14px;font-family: "宋体";}.才 {font-weight: bold;}如果有来生我要做一棵树,站成永恒,没有悲欢的姿势。
CSS+DIV课程实验报告
CSS+DIV实验报告系别管理系学生姓名罗强专业电子商务学号 201020611129 实验课程 CSS+DIV 指导老师杨忠实验内容(实验中所了解、熟悉、辅助完成的内容等):首先是选择做什么内容的网页,通过参考网站上的网页模版,决定自己网页的大概版式。
我选择的网页设计内容是做一个销售相机的网站,在选好内容以后我就开始进行LOGO、网页导航的设计、网站主体以及网站的尾部进行设计与制作。
在选择好对照的模版后,我也参考了尼康、三星、索尼以及佳能的官方网站。
最后选定了在尼康的官方网站中选取素材,因为尼康产品的背景与我即将制作网站灰色背景相近,不会产生较大的颜色反差,令观看网页的人感觉舒适。
在主页的文字和图片都弄完了以后,接下来就是子页的设计,因为我的导航设计了相机产品列表,配件列表,优惠活动和售后服务。
其中产品列表下有单镜反光相机列表和轻便型数码相机列表,配件列表下有闪光灯列表和镜头列表。
我参照了模版子页的样式将单镜放光相机列表、轻便型数码相机列表做成相同的样式,镜头和闪光灯页面做成了相同的样式,并且将单反相机列表和数码相机列表归为产品列表下,将镜头、闪光灯页面归在配件列表下。
最后一项是检查并添加图片ALT属性,页面的META、标题以及描述。
给制作的页面互相连接起来,使他们能够互相访问。
并且连接一张网页就连接一下试试网页上的连接是否正确。
指实验中的感受、体会、收获或反思等:在网页制作过程中我的体会是:必须要充分了的利用时间来实践,不能根据自己的想法来做,否则就会带来不必要的麻烦。
而且在设计和制作都完成的情况下,一定要对网页进行检查,包括网页是否有空连接,死连接,是否有META 属性以及网页的浏览器兼容性。
最好的办法就是打开一个一个的自习检查,检查出来问题,就及时的进行修改。
也需要在不同的电脑上打开看看网页的显示是否正常,如果不能正常显示就要思考一下出了什么问题,并对代码进行修改。
我觉得我对网页颜色的选择还是新手的灰色,不敢去尝试使用其他颜色作为背景,虽然看的网页比较多,但自己使用时就局限在固定的颜色,对网站颜色的搭配还是没有掌握,还需要进一步的学习。
CSS+DIV页面布局实验
border: 1px solid red;
float: left;
margin-top: 15px;
}
.special{
width: 1226px;
height: 438px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
background-color:yellow;
margin-right: auto;
margin-left: auto;
}
.product{
height: 420px;
width:1226px;
margin-right: auto;
margin-left: auto;
border: solid red;
width: 1226px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
}
.p5{
height: 150px;
width: 798px;
border: 1px solid red;
float: left;
}
.p6{
height: 150px;
float: left;
}
.special>.shop1{
height: 380px;
width: 232.5px;
border: 1px solid red;
margin-left:15px;
float: left;
}
.special>.shop2{
height: 58px;
编辑网页元素实验报告(3篇)
一、实验目的1. 掌握HTML和CSS的基本语法和用法。
2. 学会使用HTML和CSS创建和编辑网页元素。
3. 提高网页设计与制作的实践能力。
二、实验环境1. 操作系统:Windows 102. 浏览器:Chrome3. 编辑器:Sublime Text4. 开发工具:Visual Studio Code三、实验内容本次实验主要涉及以下内容:1. HTML基础元素2. CSS样式设置3. 网页布局4. 响应式设计四、实验步骤1. 创建HTML文档(1)打开Sublime Text或Visual Studio Code,创建一个名为“index.html”的文件。
(2)输入以下代码,保存并关闭文件:```html<!DOCTYPE html><html><title>编辑网页元素实验</title><link rel="stylesheet" type="text/css" href="style.css"> </head><body><h1>欢迎来到我的网页</h1><p>这是一个段落。
</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul></body></html>```2. 创建CSS文件(1)在同一个目录下创建一个名为“style.css”的文件。
(2)输入以下代码,保存并关闭文件:```cssbody {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: f4f4f4;}h1 {text-align: center;margin-top: 50px;color: 333;}p {text-align: center;margin-top: 20px;color: 666;}ul {list-style-type: none;text-align: center;}li {display: inline-block;margin-right: 10px;}```3. 查看实验结果(1)打开Chrome浏览器,输入文件所在目录的URL(例如:file:///C:/Users/yourname/Desktop/index.html)。
网页制作实验报告-总结报告_0
网页制作实验报告-总结报告网页制作实验报告-总结报告-实验报告网页制作实验报告实验一:站点设置一、实验目的及要求本实例是通过站点定义为对话框中的高级选项卡创建一个新站点。
二、仪器用具 1、生均一台多媒体电脑, 组建内部局域网, 并且接入国际互联网。
2、安装 WindowsXP 操作系统;建立 IIS 服务器环境, 支持ASP。
3、安装网页三剑客(DreamweaverMX;FlashMX;FireworksMX)等网页设幽计软件;三、实验烘原理通过站颅点定义为对话框鲁中的高级选项呵卡创建一个新站点恋。
四、实验方法与芝步骤 1)执行兢站点\管理站点佑命令, 在弹出的抨管理站点对话个框中单击新建里按钮, 在弹出的快焉捷菜单中选择站穿点命令。
2 泽)在弹出的站点扯定义为对话框中繁单击高级选项罗卡。
3)在嫡站点名称文本框心中输入站点名称, 瓦在默认文件夹搽文本框中选择所创硬建的站点文件夹。
哨在默认图象文件嫡夹文本框中选择布存放图象的文件夹尖 , 完成后单击确疫定按钮, 返回傲管理站点对话框佑。
1/ 74)在管斋理站点对话框中葬单击完成按钮漓 , 站点创建完毕。
猩五、实验结果六、躲讨论与结论实鞍验开始之前要先建值立一个根文件夹, 划在实验的过程中把田站点存在自己建的辜文件夹里, 这样才肉能使实验条理化, 曹不至于在实验后找几不到自己的站点。
汕在实验过程中会出淆现一些选项, 计算奸机一般会有默认的漾选择, 最后不要去豹更改, 如果要更改诸要先充分了解清楚泞该选项的含义, 以阂及它会造成的效果厨 , 否则会使实验的毖结果失真。
实验前蒂先熟悉好操作软件沾是做好该实验的关止键。
实验二:页面梆图像设置一、实验庸目的及要求:周本实例的目的是设垫置页面的背景图像膝 ,并创建鼠标经过挣图像。
二、仪器用驱具 1、生均一驮台多媒体电脑, 组沤建内部局域网, 并掩且接入国际互联网湖。
2、安装 W 鞭 indowsXP 勘操作系统;建立 I 础 IS 服务器环境, 羊支持 ASP。
实验一HTML、CSS网页制作实验
实验一HTML、CSS网页制作实验一、做出网页1.html,效果如下图所示:要求如下:1、诗的题目格式为红色、加粗、居中显示。
2、作者格式为红色、斜体、居右显示。
3、诗的内容字体格式从上到下分别是<h4><h3><h2><h1>,诗的第一行和第三行内容为蓝色字体。
二、做出网页2.html,效果如下图所示。
要求如下:1、图像加边框。
2、图像相对于文字左对齐。
三、做出网页3.html,效果如下图所示:要求如下:文字颜色正常是#3c3c3c、白色背景,鼠标经过时变为#FF8400、#EDEEF0色背景。
四、请做出网页4.html,效果如下图所示。
五、请做出以下网页,效果如下图所示,保存为5.html:六、请做出网页6.html,效果如下图所示:要求如下:1、使用内嵌式引入CSS样式表。
2、使用类选择器定义元素。
(1)通过控制不同的类,分别为第一个字母“G”设置为蓝色、加粗、60px 字体;第二个字母“o”设置为红色、加粗、60px字体;第三个字母“o”设置为黄色、加粗、60px字体;第四个字母“g”设置为蓝色、加粗、60px字体。
(2)剩余字母“le”按默认样式输出。
七、请做出网页7.html,效果如下图所示。
要求如下:1、设置所有文本为宋体、12像素、绿色字体,“春季”字体颜色设为红色。
2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。
3、设置文本首行缩进2个字符。
八、请做出网页8.html,效果如下图所示:要求如下:1、设置所有文本为微软雅黑、14像素、黑色字体。
2、新浪”、“新浪网”为红色字体,“博客首页”为蓝色字体,网址及日期为绿色字体。
3、设置标题为16像素、左对齐、下划线的效果。
4、设置文本“-百度快照-评价”为灰色、下划线的效果。
实验四 Div+CSS网页布局
实验四Div+CSS网页布局一、站点规划在网页制作中,有许多的术语,例如:HTML、CSS、DIV等等。
下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思,构思好了,一般来说还需要制作的界面布局简单的构画出来。
下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;2、内容部分又可分为侧边栏、主体内容;3、底部,包括一些版权信息。
有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
DIV结构如下:│body {} /*这是一个HTML元素,具体我就不说明了*/└#Container {} /*页面层容器*/├#Header {} /*页面头部*/├#PageBody {} /*页面主体*/│├#Sidebar {} /*侧边栏*/│└#MainBody {} /*主体内容*/└#Footer {} /*页面底部*/至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹,命名为“DIV+CSS页面布局”,在文件夹下新建两个空的记事本文档,输入以下内容:这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的布局了。
关于以上CSS的说明:1、请养成良好的注释习惯,这是非常重要的;2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;3、讲解一些常用的CSS代码的含义:font:12px Tahoma;这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;margin:0px;也使用了缩写,完整的应该是:margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上/ 右/ 下/ 左,你也可以书写为margin:0(缩写);以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,另外还有以下几种写法:margin:0px auto;说明上下边距为0px,左右为自动调整;我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
川、"g
Shandong Women s University
学生实验报告
学 期:2015-2016学年第二学期
班 级:2015级计算机科学与技术
学 号: _____________________________
姓 名: _____________________________
课程编号:
__________________________
课程名称:网页设计与制作
填写说明
1、填写实验报告须字迹工整,使用黑色钢笔或签字笔填写。
2、课程编号和课程名称必须和教务系统中保持一致,实验项目名称填写须完整规范,不能省略或使用简称。
3、每个实验项目应填写一份实验报告。
如同一个实验项目分多次进行,可在实验报告中写明。
4、如果实验报告页面不够,可分成两个实验报告填写。
实验目录及成绩登记
说明:实验项目顺序和名称由学生填写,必须前后保持一致;实验成绩以百分制计,由实验指导教师填写并签名,一般不能涂改,确有涂改的,应在备注栏说明原因;实验报告部分最终成绩为所有实验项目成绩的平均值。
实验报告
实验日期:年月曰星期
3、关键步骤及实验结果可截图附于实验报告中。
四、实验结论、问题与建议(含取得的成果)
写出实验结论,讨论实验中输出信息、图形、调试过程中所遇的问题可能的解释及处理方法,对实验仪器的选择和实验方法的改进提出建议,简述自己做实验的心得体会,回答实验思考题等。
思考题:DIV+CSS布局网页有哪些优势?
指导教师评阅意见:
签名:。