网页设计

网页设计
网页设计

第1 章网站开发基础

知识

一个专业的网页设计师(Web Designer)在准备开发网站之前,必须先要对整个站点进行整体规划

和设计。明确该网站建设的目的和功能,确定网站在各阶段的运作规模与费用投入。而对于初学者来说在着手开发前更要全面考虑到这些影响因素,定制出合理的开发流程。这就要求设计师必须先要掌握一些网站开发中所可能遇到的基础知识。

1.1网站开发规范

任何一个网站在开发之前都需要定制一套开发约定和规则。这类规则可以实现对网站整体风格的统一,代码编写的维护和后续扩展。网站项目的开发有一系列的特点:分散性、独立性、整合的交互性等。考虑到这些开发特点,所以定制一套完整的开发规范就显得尤为重要。

网站开发规范中涉及的这些规则和约定需要与开发人员、设计人员和维护人员共同讨论制订。在网站的开发过程中都将严格按照规则或约定进行开发。一个优良可行的规范可以使网页设计师在工作中得心应手,取得事半功倍的效果。

1.1.1 网站的目标定位

网站的目标定位是网站开发中最重要的一步。若是在建设网站之初,把目标放得过高,最终达不到预期效果,那就犯下了"眼高手低"的错误。例如,把站点设计得很大,结果很多实际条件都跟不上,

久而久之就会丧失做网站的兴趣和动力。要知道维护一个日访问量只有上百的站点和一个日访问量超万的站点需要的成本和人力是大不一样的。在网站开发规范定制初期就需要进行周全的考虑,若真的要将网站进行扩展的时候,一定要先安排好后期的维护如何跟上。

网站的目标定位要掌握相关的技巧,并不是随意找些合作伙伴,建一个站点就能够成功的。做出一个符合自己网站的合理定位对今后的发展就有着举足轻重的作用。这类行之有效的目标定位都有着如下的共性:

1.目标定位必须有明确的依据

目标定位受影响的因素很多,主要有市场容量与发展潜力、个人或企业在此领域中的经验与资源、国家或地方政策倾斜等。网页设计师必须懂得"市场调查"的重要性,花费一定的时间和精力去实际市

场做切实调研和验证。切忌在任何情况之下未做足市场调研工作前,仅凭个人直觉或外界影响来仓促决策。

2.目标定位必须了解哪些资源可被利用

资源是站点的"核心竞争力",其包括目前已经有的资源还有可开发的潜在资源。必须明确各类资

源的有效期,让每一份资源在网站发展的特定阶段都能被有效利用起来。网站前期经营时人才资源、资金资源最为关键,然而这些资源却不能永远支撑着网站运作。盈利才是治标又治本的方法,把资源转化成资金,再让资金产生更多的可利用资源,如此循环。

?2·

3.目标定位在规模上要具有可扩展性

对于规模定位必须抓住务实这个关键,建站初期必须依据一些具体参指标(地域特点、类型特点、层次特点等),确定适合自己网站的规模定位。随着站点规模的扩大,网页设计师必须适时进行调整来对原有定位概念进行扩展。

4.目标定位必须了解目标人群的特征

"顾客是上帝",必须尽量让目标群体呈现稳定上升的趋势。否则,随着目标人群的缩减,站点的

影响力也会随之缩减。受众群体的年龄、学历、行为特征,在互联网中的现有市场规模及发展趋势,这些都可能影响到网站目标定位的最后结果,以及网站运营的成败。

1.1.2 网站的风格和创意

网站的风格(style)是指站点的整体形象给浏览者的综合感受。一个拥有自己独特风格的网站,就会

使网站浏览者愿意花更多的时间去品尝该站。这个"整体形象"可以从以下诸多方面来确立:1.色彩运用

色彩是"整体形象"最重要的元素。或许有这样的印象,在不经意间进入一个站点时,首先得到的

视觉冲击不是优美的排版布局或是美丽的图片,而是网页的色彩。

2.版面设计

一个好的版面设计可以突显重点,让浏览者对"主次"内容很容易加以区分。图文结合也避免了纯

文字表现的枯燥。

3.程序开发

通过结合ASP、PHP等动态网页技术实现的互动程序,能让浏览者及时对网站内容给出交互性的意见。

4.特效使用

Flash动画、Java script、Java applets、DHTML等的合理使用会让网页看起来更为生动活泼。

一个没有统一风格的网站,只是些堆砌在一起的信息集。浏览者必须通过自己理性的感受来理解这些。例如,信息量的大小、浏览速度的快慢。而一个具有统一风格的网站,网站浏览者可以对其有更深一层的感性认识。风格的形成是一个长期的过程,不是一次定位的,网站设计师必须在实践中不断强化。

网站的创意(idea)是站点生存的关键。创意并不只是灵感,也是思考的结果。创意思考的过程可

分五阶段:资料收集阶段、资料整理阶段、创意产生阶段、调查验证阶段和开发制作阶段。

必须注意到创意的目的是为了更好的去推广和宣传网站。如果有着很好的创意,但却对网站发展毫无实际意义,那么就要学会取舍,懂得适时放弃。

1.1.3 网站的形象设计与配色

一个好的形象设计,首先要有一个好的视觉效果。检验网站是否有一个好的形象设计,下面就介绍一种最为简单的方法——感观判别法。

通过对一个站点,前二眼的直观感觉来评价。第一眼,看是否抢眼;第二眼,看是否顺眼。第一感觉很重要,网页浏览者能否接受这个网站,很大程度上,就看这一瞬间的感觉。一个视觉效果良好的站点,浏览者也会细细去品味的。这种方法虽然存在了一定的片面性,但在一定程度上却体现了该站点的

?3·

第1章网站开发基础知

实际表现力。

怎样才能让浏览者对网站产生一见倾心的视觉效果呢?

首先,整个页面的配色要协调,不要太过刺眼。其次,文字内容要易于阅读,如字体过小、颜色过

浅、页面过长,都违背了网站设计的"美学原则"。再次,对于图片内容,太大、太多、不够清晰都会

惹来浏览者的反感。最后,"动"、"静"要配合得当,不能滥用Flash动画、动态GIF、滚动字幕等

效果,否则会让人眼花缭乱。反之,太过死板,毫无生气的页面也会让人感到乏味。因此,如何协调好

这类元素之间的关系也很重要,这就引出了网络形象识别设计的概念。

网络形象识别设计,是一种崭新的符合网络属性特点的形象识别系统。其是在原有企业制定的识别

系统基础上,进行的扩展和延伸。网络海洋虽然浩瀚无边,但是能出现在我们的屏幕中,整体的网络视

觉效果却很少,这就要求网页设计师有依据的进行整体定位策划。

配色在网络形象识别设计中,是尤为重要的部分。使用正确的色彩往往可以得到相得益彰的效果。

另外,可以针对企业标志本身的一致性,进行连带变化,发展出一套更具品牌形象的设计。

下面将介绍一些网站形象设计中配色的使用技巧:

1.了解网站所要传达的讯息和品牌

选择可以加强这些讯息的颜色。例如,在设计一个强调稳健的商业机构的相关站点时,冷色系、柔

和的颜色,像是蓝色、灰色或绿色,将是网页设计师的最佳选择。在这样的前提下,如果使用暖色系或

活泼的颜色,就会破坏网站品牌特性。

2.了解网站的目标人群

网页浏览者的文化差异也可能会使色彩产生非预期的反应。不同地区、不同年龄层对颜色的反应亦

会有所不同。年轻族群一般比较喜欢饱和色,但这样的颜色却可能让高年龄层的浏览者产生反感。

3.配色过程中不要滥用颜色

除黑、白色两种颜色以外,最多再选择4~5个颜色就足够了。太多的颜色会导致混淆,也会分散浏

览者的注意力。

4.阅读主体内容部分建议使用对比色

颜色太接近无法产生足够的对比效果,也会妨碍观众阅读。众所周知,白底黑字的阅读效果最佳。

6.配色要有时效性

一种色调随着流行,很容易就充斥着整个市场,且网页浏览者也很快会对流行色彩感到麻木。之时

网页设计师也可以考虑使用多年前的流行色彩,引发怀旧之情。

1.1.4 网站的框架与布局

网站的框架与布局大致可分为"国"字型、拐角型、"T"字型、"L"字型、综合框架型、Flash

型、变化型。在做设计的时候要抓住客户的需求,把握网站的定位做出合理的框架布局。下面列出了一

些在网站的框架与布局设计时应该注意的地方。

1.分辨率是设计网页时必须考虑的问题

网页的整体宽度可分为三种设置形式:百分比、象素、象素+百分比。通常在网站建设中以象素形

式最为常用,行业网站也不例外。常用的有1024×768和800×600的两种规格的分辨率,现在网络上

很多都是采用780个象素的宽度,这样不管在上述任何一种分辨率下都可以达到较佳的视觉效果。

2.空间的合理利用也极为重要

很多的网页都会让网页浏览者感觉很"满"很"乱",因为这些网站往往会将各种各样的信息如文

?4·

字、图片、动画等不加考虑的塞进页面,有多少挤多少,不加以规范。这样做的后果就会导致浏览时不方便。页面主次不分,喧宾夺主,重点不突出。只有合理的安排、有机的组合,使页面达到平衡,即使在页面的一边腾出大面积留白,并不会让人感到空,却会给人留下广阔的思考空间。

3.合理的广告布局

弹出广告、浮动广告、banner广告、通栏广告大肆运用,让浏览者觉得很烦琐,从而极大程度上影响了广告的效果。各类的广告投放不宜过多,适中即可。

1.1.5 网站信息的收集和准备

建立一个行之有效的网站决不能马马虎虎,草率行事,随便准备点资料给网页设计师。需要提醒注意一点,网站信息的收集和准备应该派专人负责整理。最好是熟悉市场营销并有一定文字组织能力的人,他们能够站在企业、市场和消费者的多角度考虑文字的组织方式。

在收集信息时要了解网站的目标访问者,要清楚浏览者访问该站点的理由,也就是要考虑这些目标访问者的需求问题。只有针对性地提供网站信息内容,才能更好地吸引访问者。

收集了各方面的内容,确定了相应的交互功能后,下一步就是这些内容的分组。分组的目的是为了根据浏览者的访问习惯,有序地展示内容,吸引访问者看下去,同时在分组过程中还可发掘潜在的信息内容。信息分组的最终目的是为了确定整个网站的导航系统。

1.2网站开发流程

在任何网站项目开始实施之前都应该有一个工作步骤也就是工作流程。有的网站设计师一拿到项目就急于开发写代码,往往忽视了评审和测试这两个环节,结果造成返工。下面列出了一个网站常用的较为合理的开发流程图,能够比较好地体现开发的整个环节,如图 1.1所示。

?5·

第1章网站开发基础知

图1.1 网站开发流程图

1.2.1 定义站点及配置服务器

站点可以理解成一组具有同一主题、统一风格的关联文档和资源的集合。下面就详细介绍如何在

Windows 2003服务器平台上,通过IIS来定义站点,以及Web服务器和文件传输服务器安装及配置的

具体方法。

(1)单【开始】|【控制面板】|【管理工具】|【Internet信息服务(IIS)管理器】命令,如图1.2所示。

(2)右击【网站】|【默认网站】分支,选择【属性】命令,在弹出的【属性】对话框中,对【默

认网站】的一些相关信息进行设置。在【网站标识】选项框下的【描述】文本框中来更改IIS下所建站

的名称。【IP地址】文本框中所设定的内容是用于绑定网站服务器地址,本地网站配置时可保持默认设

置为"(全部未分配)"。"80"是网站服务器TCP的默认端口,一般不作更改。当然还可以为不活

动的连接预设超时值,默认为"120",如图1.3所示。

?6·

图 1.2 Internet服务管理器图 1.3 Web站点设置对话框

(3)在【主目录】选项卡中,最重要的一步就是对【本地路径】进行设置。也就是用来指定网站根目录,即网站文件所在位置。在调试过程中也可以增加一些权限的控制,可以在原有"读取"权限的

基础上,增添"写入"与"目录浏览"权限。这样在浏览器中进入本地站点测试时,就能以浏览目录的

形式来查看或者保存文件,如图 1.4所示。

(4)在【文档】选项卡中,来设置网站的默认内容文档。作用就是当网页浏览者在浏览器地址栏中输入相应的域名访问地址后,默认打开的站点首页。这个文档的配置必须考虑到其优先级的问题,系统会从上到下在对应目录下搜索匹配的文件。由于这样的搜索会耗费一定的响应时间和系统资源,所以在配置中最好确认第一个默认内容文档就是指定请求的具体文件,如图 1.5所示。

图 1.4【主目录】选项卡图 1.5【文档】选项卡

通过这样的设置,IIS已经可以提供基本的网站服务。但是在使用过程中,由于各种原因可能产生

许多意想不到的情况,这就需要及时为这些设置进行备份和恢复操作。IIS自带的备份功能使用起来非

常简单,具体操作如下:

(1)右击【本地计算机】|【所有任务】分支,选择【备份/还原配置】命令,打开【配置备份/还原】

第1章网站开发基础知

?7·对话框,如图1.6所示。

(2)在【配置备份/还原】对话框中,单击【创建备份】按钮,打开【配置备份】对话框。在这个

窗口中可以定义新配置备份的名称,如"backup20060820"。也可以使用密码加密备份功能,在两次确

认密码文本框中设置相应的访问密码,如图1.7所示。

图1.6 IIS备份还原图1.7 IIS备份

(3)要恢复IIS配置只需要在备份文档列表中选择要进行还原的备份文件,然后单击【还原】按钮。系统就会给出相应的提示,等待进一步确认。如果单击【是】按钮,确定还原操作,就会覆盖所有当前

的配置。需要注意的是进行还原操作时,最好先断开所有的用户链接,停止所有的IIS服务再进行操作,

如图1.8所示。

图1.8 IIS还

1.2.1 搭建网站

网站搭建过程中,虚拟主机提供了一个同时向大量用户提供安全的网络应用环境。在这过程中必然

会碰到一些由此环境而导致的问题,所以安全搭建网站环境就显得极为重要。下面就详细介绍一些搭建

网站过程中必须掌握的安全配置技巧。

(1)在【控制面板】右侧列表框内选中【管理工具】选项,打开【计算机管理】对话框。选中【本

地用户和组】节点下的【用户】分支,在右侧列表框中创建两个用户帐号test1与test2。通常为了安全

?8·

考虑,会把用于虚拟主机的用户归纳到一个单独的用户组中,并把原先用户隶属于的User组进行删除,

如图1.9所示。

(2)在本地服务器选择一个目录作为FTP用途,或者选择远程服务器商提供的FTP空间。在此目录下可建立一个名为"htdocs"的文件夹,然后对应所使用的帐号建立子文件夹。例如可建立两个子文

件夹site1与site2分别对应于两个用户帐号test1与test2。

(3)由于刚才建立用户帐号时,把其单独的归纳到一个用户组中,如果不进行相应的组管理可能

就产生没有访问权限的问题。所以就需要在FTP空间根目录属性的安全选项卡中添加用户组,如图1.10 所示。

1.2.3

图1.9建立站点虚拟主机用户组

测试与调试

图1.10目录安全选项卡

在任何一个软件项目开发末期,系统测试与调试是保证整体项目质量的重要一环。而针对网站项目

的测试与调试一般需要注意以下几个方面的内容:

1.模块功能测试

对于网站每一个独立的应用程序模块都需要进行完整地测试。依据之前供求双方达成的《网站项目

需求分析》,借助基本路径测试法对其进行系统测试。

2.整体性能测试

网站的性能测试将直接影响网站运行的稳定程度。目前对于网站的性能测试并没有一个很好的参考

基准,因而与客户进行必要的沟通建立一整套性能测试方案是很有必要的。

3.系统安全性测试

网络安全问题日渐突出,特别是集成交互性平台的电子商务网站,网站的系统安全已经成为一项重

要课题。通常也会借助第三方工具来测定,对测出的网站系统一些较为常见的安全问题,给出相应的漏

洞解决方案。

4.运行稳定性测试

网站的稳定性测试,是指网站的运行中整个系统是否能运行正常。通常主要采用将测试服务器长时

间运转进行测试。

5.浏览器兼容性测试

为了使网页至少在目前主流浏览器下获得兼容,可以用Dreamweaver CS3来对网页兼容性进行测试。具体测试方法如下:在【窗口】主菜单下选中【结果】子菜单,打开【目标浏览器检查】对话框。

在此处可以选择不同的目标浏览器来对网页进行兼容性测试,如图1.11所示。

?9·

第1章网站开发基础知

图 1.11浏览器兼容性测试

6.操作易用性测试

采用手工测试的方法进行评判。对整个网站项目进行实际操作测试,需要网站设计师和网站需求方

方的协作配合。

7.链接有效性测试

超级链接对于网站用户而言,意味着能不能流畅的使用整个网站提供的服务。同样也可以通过Dreamweaver CS3来进行测试,具体方法如下:在【窗口】主菜单下选中【结果】子菜单,打开【链接

检查器】对话框。在此处可以选择不同的目标文件来对网页进行链接测试,如图 1.12所示。

图 1.12链接测试

8.代码合法性测试

包括程序代码合法性检查与显示代码合法性检查两部分的测试。

1.2.4 发布及维护

网站文件进行整体检查和整理后,系统经过完整性测试后,网页设计师就可以借助Dreamweaver CS3 来实现对整个网站的发布操作。

(1)单击【站点】|【管理站点】命令,将弹出【管理站点】对话框,如图 1.13所示。

?10·

图 1.13【管理站点】对话框

(2)单击【编辑】按钮,在【站点定义】的测试文件这一步中选择以FTP方式连接到测试服务器,并设置相应的FTP信息,包括Web服务器的主机名或FTP地址、用户名、密码等。单击"测试连接"

按钮,可以按此设置与服务器尝试连接。如果连接不成功,请检查设置信息或咨询FTP服务器管理商,

如图 1.14所示。

(3)单击【完成】按钮,结束远程站点的完整设置。这样就可以直接对网站内容进行发布了,如

图 1.15所示。

图 1.14 FTP方式连接到测试服务器图 1.15站点设置信息概要

初期的网站制作到发布只是整个网站运营成功所走出的第一步,也是之后进行推广的根基。由于网站的内容需要随时调整与更新,这就要求对站点进行长期的不间断的维护和更新。网站维护所涉及的内容不仅是网页内容上的更新,还包括动态数据库目录的管理、网站的定期推广服务等。

在维护期过程中,要定期对网站运行状况进行监控。发现问题及时解决,将网站运行的相关情况进行统计,适时与客户进行沟通。并根据实际情况,对反复出现的问题进行彻底分析,根据总结得出修正方案,甚至包括整个站点框架的变更。

《HTML5+CSS3网站设计基础教程》_教学大纲

《HTML5+CSS3网站设计基础教程》课程教学大纲 (课程英文名称) 课程编号:201601210011 学分:5学分 学时:76学时(其中:讲课学时:47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路 课程设计理念:高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展,不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和终身学习的能力,实现一站式教学理念。 课程设计思路:基于工作过程开发课程内容,以行动为导向进行教学内容设计,以学生为主体,以案例 (项目)实训为手段,设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标,以案例(项目)任务实现为载体、理论学习与时间操作相结合”。 开发工具:DreamweaverCS6 第一章初识HTML5

第二章HTML5页面元素及属性

第四章CSS3选择器

e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用

使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式

网页制作css格式模板部分

一CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/

《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)

第10讲布局技术之二—Div+CSS(二) 1.1教学目标: ◆知识目标 1.理解CSS盒子模式。 2.掌握CSS规则设置方法。 ◆技能目标 能够理解Div+CSS所体现的表现和内容相分离特性。 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点: 1.掌握CSS规则设置方法 1.3 教学难点 理解CSS规则的作用。 1.4教学方法:讲练结合,任务驱动、分子任务操练 1.5课时安排:2课时 1.6教学对象分析: 这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。 1.7教学过程: 一、CSS样式基本操作 1.样式表的操作途径 我们可以通过三种途径来创建、编辑CSS样式。 从主菜单选择“窗口/CSS样式”即可打开样式面板,如图3-35所示。 图3-35 CSS样式面板 在CSS样式面板的右下角有四个功能按钮,分别为: ●附加样式表:用于打开“链接外部样式表”对话框,选择要链接到或导入到当前文档中的外部样式表。 ●新建CSS样式:打开“新建CSS 样式”对话框,创建新样式。 ●编辑样式表:打开“CSS 样式定义”对话框。编辑当前文档或外部样式表中的任何样式。

删除CSS样式:删除“CSS 样式”面板中的所选样式,并从应用该样式的所有元素中删除格式。 单击CSS样式面板右上角的菜单按钮,可以显示如图3-36所示的面板菜单。通过该菜单,可以完成对CSS样式面板的大部分控制。在CSS样式面板的列表区域中单击鼠标右键,也可以打开同样的菜单。 图3-36 面板菜单 从主菜单选择“文本/CSS样式”命令,选择“新建”也可启动“新建样式表”对话框,如图3-37所示。 在页面空白处单击鼠标右键,在弹出的菜单中一样可以启动“新建样式表”对话框,如图3-38所示。 不管如何启动上述几个样式菜单或面板,他们都包含相同的几个命令:新建样式表、编辑样式表、链接样式表和导出样式表。

实验一HTML、CSS网页制作实验

实验一HTML、CSS网页制作实验 一、做出网页1.html,效果如下图所示: 要求如下: 1、诗的题目格式为红色、加粗、居中显示。 2、作者格式为红色、斜体、居右显示。 3、诗的内容字体格式从上到下分别是

,诗的第一行和第三行内容为蓝色字体。 二、做出网页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、设置文本“-百度快照-评价”为灰色、下划线的效果。

html+css网页设计复习题(可编辑修改word版)

1、单选题 (1)要使单选框或复选框默认为已选定,要在input 标签中加()属性 A、selected B、disabled C、type D、checked (2)要使表单元素(如文本框)在预览时处于不可编辑状态,显灰色,要在input 中加()属性 A、selected B、disabled C、type D、checked (3)下列哪一项表示的不是按钮。() A.type="submit" B.type="reset" C.type="image" D.type="button"(4)下面哪一个属性不是文本的标签属性?() A.nbsp; B.align C.color D.face (5)下面哪一项的电子邮件链接是正确的?() A.https://www.360docs.net/doc/bf7455851.html, B.xxx@.net C.xxx@com D.xxx@https://www.360docs.net/doc/bf7455851.html, (6)当链接指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。() A.ASP B.HTML C.ZIP D.CGI (7)下面说法错误的是( ) A、CSS 样式表可以将格式和结构分离 B、CSS 样式表可以控制页面的布局 C、CSS 样式表可以使许多网页同时更新 D、CSS 样式表不能制作体积更小下载 更快的网页 (8)CSS 样式表不可能实现( )功能。 A、将格式和结构分离 B、一个CSS 文件控制多个网页 C、控制图片的精确位置 D、兼容所有的浏览器 (9)若要在网页中插入样式表main.css,以下用法中,正确的是()。 A 、 B 、 C、 D、 (10)若要在当前网页中定义一个独立类的样式myText,使具有该类样式的正文字体 为”Arial”,字体大小为9pt,行间距为13.5pt,以下定义方法中,正确的是()。 A、 B、.myText{Font-Familiy:Arial;Font-size:9pt;Line-Height:13.5pt} C、 D、 (11)下列哪个标签是定义标题的() A、h1 B、hr C、hw D、p (12)html 中的注释标签是() A、< ------------- > B、<--! -->

网页设计中的CSS样式代码详解

CSS 背景属性 属性 描述 值 IE F N W3C background 简写属性,作用是将背景属性设置在一个声 明中。 background-color background-image background-repeat background-attach ment background-positi on 4 1 6 1 background-attachment 背景图像是否固定或 者随着页面的其余部 分滚动。 scroll fixed 4 1 6 1 background-color 设置元素的背景颜色。 color-rgb color-hex color-name transparent 4 1 4 1 background-image 把图像设置为背景。 url none 4 1 4 1 background-position 设置背景图像的起始 位置。 top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos 4 1 6 1 background-repeat 设置背景图像是否及 如何重复。 repeat repeat-x repeat-y no-repeat 4 1 4 1 CSS 边框属性 (border)

border-bottom 简写属性。作用是在一个声明中用来设置下边框 的所有属性。 ? border-bottom-w idth border-style border-color 4 1 6 1 border-bottom-color 设置下边框的颜色。 border-color 4 1 6 2 border-bottom-style 设置下边框的样式。 border-style 4 1 6 2 border-bottom-width 设置下边框的宽度。 thin medium thick length 4 1 4 1 border-color 设置四个边框的颜色,可以设置一到四个颜色。 color 4 1 6 1 border-left 简写属性。用于在一个声明中设置左边框的所有 属性。 border-left-wid th border-style border-color 4 1 6 1 border-left-color 设置左边框的颜色。 border-color 4 1 6 2 border-left-style 设置左边框的样式。 border-style 4 1 6 2 border-left-width 设置左边框的宽度。 thin medium thick length 4 1 4 1 border-right 简写属性。将所有用于右边框的属性设置于一个 声明中。 ? border-right-wi dth border-style border-color 4 1 6 1 border-right-color 设置右边框的颜色 border-color 4 1 6 2 border-right-style 设置右边框的样式 border-style 4 1 6 2 border-right-width 设置右边框的宽度。 thin medium thick length 4 1 4 1 border-style 设置四个边框的样式,可以设置一到四个样式。 none hidden dotted dashed solid 4 1 6 1

基于CSS DIV方式的网页设计的心得体会

基于CSS+DIV方式的网页设计的心得体会 现在,计算机和网络已经深入到了我们生活中的方方面面,也已经成了生活中不可缺少的一部分,网络成了我们获取知识和信息的一种便捷工具,现在的网民也在不断的增多,所以,了解和学习网络知识是我们作为一名大学生迫切所需的。我利用这一学期的时间,对网页设计进行了初步的认识和了解。综合网站技术和设计人员的体会,CSS+DIV网站建设具有以下优势和不足,其中CSS网页布局的优点体现在如下方面: 一、使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。 二、降低流量费用 页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS 的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。 说了这么多CSS网页布局的优点,同时也不能轻视CSS网页布局的副作用: 一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。 二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。 三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能

网页设计-页面布局篇(Css+Div)

网页设计-页面布局篇(Css+Div) >>目录<< 第一步:规划网站,本教程将以图示为例构建网站; 第二步:创建html模板及文件目录等; 第三步:将网站分为五个div,网页基本布局的基础; 第四步:网页布局与div浮动等; 第五步:网页主要框架之外的附加结构的布局与表现; 第六步:页面内的基本文本的样式(css)设置; 第七步:网站头部图标与logo部分的设计; 第八步:页脚信息(版权等)的表现设置; 第九步:导航条的制作(较难); 第十步:解决各种浏览器之间的兼容性(暂不讨论)

第一步:规划网站,本教程将以图示为例构建网站1.规划网站,本教程将以下图为例构建网站。

其基本布局见下图: 主要由五个部分构成: 1.Main Navigation导航条,具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标,包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框,一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏,包含版权信息等。Width: 760px Height: 66px 第二步:创建html模板及文件目录等 1.创建html模板。代码如下: CompanyName - PageName

css3+html5网页设计

网页设计规范参考111 总论 (2) 一、目录结构规范 (2) 1. 网站目录划分 (2) 2. 多级目录 (2) 3. 目录、文件的命名规范 (3) 二、文件命名原则 (3) 1. 命名原则的指导思想 (3) 2. 路径/文件名设定 (3) 3. 各路径下的开始文件 (3) 4. html 文件的命名原则 (4) 5. 图片的命名原则 (4) 三、一般原则 (5) 1. 表格问题 (5) 2. 首行缩进 (5) 3. 图片 (5) 4. 字号 (6) 5. 中英文混排时 (6) 6. 行距 (6) 7. 网站中的路径........................................................................................................ 错误!未定义书签。 四、代码编写规范 (6) 1. 首页head区代码规范 (6) 2. 页面内容部分代码规范 (7) 3. CSS 文件的格式样例代码 (8) 4. CSS的命名规范及部分简写说明 (9) 5. CSS和JS尽量采取外部调用 (10)

总论 参考网上的一些文章和部分门户网站规范,结合用户浏览习惯以及实际策划、设计、使用中的经验,制订了《网站设计规范参考》,本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大家千万不要随意更改规范。如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档。 一、目录结构规范 1. 网站目录划分 在网站根目录中开设images 、js 、css、temp子目录 ☆images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等; ☆css 子目录中放css文件,如果站点模板多尽量分成多个css文件调用; ☆js 子目录中一般放javascript文件; ☆temp 子目录放客户提供的各种文字图片等等原始资料。temp 目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。 ☆广告、交换链接、banner等图片保存到images下adv目录 2. 多级目录 在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒

网页前端设计css样式大全(整理版)

CSS样式大全 字体属性:(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位:PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/ 区块属性:(Block) /*这个属性第一次认识,要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用,多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

DIV+CSS网页设计常用布局代码

单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 三行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 单行两列 #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 两行两列 #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 三行两列 #header{width:700px;margin-right:auto;margin-left:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} //https://www.360docs.net/doc/bf7455851.html, 单行三列绝对定位

css_网页设计报告

《C S S+D I V网页设计》 目录 1.前言................................................................ .... . (1) 2.设计要求...................................................... .... .... . (1) 3.开发工具的选用及介绍 (1) 4.个人博客设计 (2) 4.1 css+div布局 (2) 4.2 首页布局................................. .. (9) 4.3 日志布局 (12) 4.4 博友布局 (13) 4.5 相册布局 (15) 4.6 留言布局 (16) 4.7 收藏及好友布局 (16) 5.总结 (17)

1:前言 博客是目前网上很流行的日志形式,很多网友都拥有自己的博客,甚至不止一个。对于自己的博客,用户往往都希望能制作出美观又合适自己风格的页面,很多博客网站也都提供自定义排版的功能,其实就是加载用户自定义的css 文件。 个人博客是一个自我展现的平台,可以让大家更好的进行交流。此次,我们的期末要求就是,自己完成一个个人博客的设计。 博客是一种需要每位用户精心维护,整理日志的网络,各种各样的色调都有。我所制作的个人博客主要表现出一种青春,岁月的记录,因此采用灰白色作为主色调,而页面背景采用绿色,二者配合表现出明朗,清爽与洁净的感觉。 2:设计要求 要求:1除个人首页外,要求至少包含:自我介绍,图片收藏,网页布局技术,我的爱好,给我留言等栏目,亦可自行增加其他栏目。 2整个网站至少包含10个html页(网站素材自行搜集整理,内容积极向上)。 3个人首页中设定的每个超级链接,必须能够链接到相应页面。 4其中“给我留言”栏目只要采用表单实验html页面部分即可,不需实现对留言内容的后台数据库保存。 5要求综合应用CSS+DIV技术,对个人博客系统进行整体布局以及内容样式控制。 最后效果:1)界面美观、布局设计独到; 2)版面简洁,文本,图案整齐美观; 3)整体色彩和谐,符合美感,贴近主题; 4)网页内各个元素搭配合理; 5)人机交互方便,结构清晰。 3:开发工具的选用及介绍 本次个人博客的设计主要是在Macromedia Dreamweaver的环境下完成的。Dreamweaver这款专业的网页设计软件在代码模式下对HTML,CSS,和JavaScript 等代码有着非常好的语法着色以及语法提示功能,并且自带很多实例,对CSS 的学习很有帮助。 4:个人博客设计 4.1 css+div布局 Style层叠样式表: body { background:url(images/bg.jpg) no-repeat center top #000000; padding:0; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;

最简单的divcss网页设计报告及其代码

最简单的divcss网页设计报告及其代码 篇一:实验报告1-DIV+CSS网页设计 学生实验报告 学期:2021-2021学年第二学期班级:2021级计算机科学与技术学号:姓名:课程编号:课程名称:网页设计与制作 填写说明 1、填写实验报告须字迹工整,使用黑色钢笔或签字笔填写。 2、课程编号和课程名称必须和教务系统中保持一致,实验项目名称填写须完整规范,不能省略或使用简称。 3、每个实验项目应填写一份实验报告。如同一个实验项目分多次进行,可在实验报告中写明。 4、如果实验报告页面不够,可分成两个实验报告填写。 实验目录及成绩登记 说明:实验项目顺序和名称由学生填写,必须前后保持一致;实验成绩以百分制计,由实验指导教师填写并签名,一般不能涂改,确有涂改的,应在备注栏说明原因;实验报告部分最终成绩为所有实验项目成绩的平均值。 实验报告 实验日期:年月日星期 篇二:DIV+CSS网页设计常用布局代码 单行一列 body{margin:0px;padding:0px;text-align:center;}

#content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370 px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370 px;} 三行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370 px;} #content-mid{margin-left:auto;margin-right:auto;width:400px;width:370 px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370 px;} 单行两列 #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:a uto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 两行两列

DIV+CSS网页设计实例教程

DIV+CSS网页设计实例教程 目录: 第一步:规划网站,本教程将以图示为例构建网站; 第二步:创建html模板及文件目录等; 第三步:将网站分为五个div,网页基本布局的基础; 第四步:网页布局与div浮动等; 第五步:网页主要框架之外的附加结构的布局与表现; 第六步:页面内的基本文本的样式(css)设置; 第七步:网站头部图标与logo部分的设计; 第八步:页脚信息(版权等)的表现设置; 第九步:导航条的制作(较难); 第十步:解决IE浏览器的显示BUG; 第一步:规划网站,本教程将以图示为例构建网站 1.规划网站,本教程将以下图为例构建网站。 其基本布局见下图: 主要由五个部分构成: 1.Main Navigation导航条,具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标,包含网站的logo和站名。Width: 760px Height: 150px

3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框,一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏,包含版权信息等。Width: 760px Height: 66px 第二步:创建html模板及文件目录等 1.创建html模板。代码如下: CompanyName - PageName @import "css/master.css"; 将其保存为index.html,并创建文件夹css,images,网站结构如下: 2.创建网站的大框,即建立一个宽760px的盒子,它将包含网站的所有元素。 在html文件的和之间写入 Hello world. 创建css文件,命名为master.css,保存在/css/文件夹下。写入: #page-container { width: 760px; background: red; } 控制html的id为page-container的盒子的宽为760px,背景为红色。表现如下: 现在为了让盒子居中,写入margin: auto;,使css文件为: #page-container { width: 760px; margin: auto; background: red; } 现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙,就需要在css文件中写入: html, body { margin: 0; padding: 0; } 第三步:将网站分为五个div,网页基本布局的基础: 1.将“第一步”提到的五个部分都放入盒子中,在html文件中写入: Main Nav Header Sidebar A Content Footer 表现如下:

网页设计与制作(div_css)测试题

网页设计与制作(div+css)测试题 姓名:分数: 说明:本次网页设计与制作考试共分为四种题型,一是判断题,二是选择题(单选),三是填空题,四是问答题。 一、判断题(共5小题) (对)1、不只表格可以用来对页面进行布局,层也同样可以 (对)2、如果浏览者没有安装网页上所设置的文字,则会以默认的字体取代原来的(错)3、超链接只能在不同的网页之间进行跳转 (错)4、一个大div块里包含一个小的div,设置小的div与大div的左边距5px样式的标准写法是margin-left:5px; (错)5、IE6下,制作一个大小为10*10px的div,样式是width:10px;height:10px; 二、选择题(共14小题) 1、下列属于静态网页的是(A ) A.index.htm B.index.jsp C.index.asp D.index.php 2、在 HTML 文档中,引用外部样式表的正确位置是?(D) A:文档的末尾B:文档的顶部 C: 部分D: 部分 3、表示放在每个定义术语词之前的XHTML代码是( A ) A.

B.
C.
D.
    4、如何在新窗口中打开链接?( D ) A. B. C. D. 5、选出你认为最合理的定义标题的方法( C ) A.文章标题 B.文章标题 C.

    文章标题

    D.文章标题 6、下面哪一项不是段落的对齐方式?( A ) A、上下对齐 B、居中对齐 C、靠左对齐 D、两边对齐 7、CSS样式有哪几种,请选择下列正确的一项( A)。 A.内样式,内嵌式,链接式,导入式 B.内连式,链接式,导入式,内样式 C.内嵌式,内连式,导入式,链接式 D.内样式,内嵌式,链接式,导出式 8、CSS中ID选择符在定义的前面要有指示符( D)。 (A)* (B). (C)! (D)# 9、创建自定义CSS样式时,样式名称的前面必须加一个_____ ( D ) A.$ B.# C.? D.原点 10、a:hover表示超链接文字在()时的状态。( C ) A、鼠标按下 B、鼠标经过 C、鼠标放上去 D、访问过后 11、在下面的 XHTML 中,哪个可以正确地标记折行?( A ) A:
    B: C:
    D:

    网页设计与制作(HTML+CSS)

    《网页设计与制作()》试卷 得分 单选题(每题2分,共计30分) 1.在表格中,用于设置表格的边框的属性是()。 A、 B、 C、 D、 2.在6浏览器中,浮动元素的左外边距或右外边距将是所设置值的两倍,这被称为6的()问题。 A、内边距塌陷 B、外边距塌陷 C、双倍边距 D、边距凸陷3.在行内式样式中,<>标记可以设置元素的样式,它一般位于()标记中<>标记之后。 A、

    B、 C、<> D、<> 4.代码如下所示: “{:1 ;}” 上述代码的含义是()。 A、设置的边框为一像素的红色实线 B、设置单元格的边框为一像素的红色实线 C、设置的边框为一像素的红色虚线 D、设置单元格的边框为一像素的红色虚线 5.当盒子中的内容超过盒子的宽高时,在6浏览器中盒子会()内容的大小。 A、超出 总分题型单选题多选题填空题简答题题分 得分

    B、隐藏超出部分 C、自适应 D、以上说法都不正确 6.引用模板后的网页由灰色和蓝色代码组成,其中灰色代码为(),只能在模板文件中进行修改。 A、可编辑区域 B、不可编辑区域 C、模板区域 D、非模板区域 7.切换到()面板,点击模板文件预览图并拖动至新建的文档,即可实现模板文件的引用。 A、【文件】 B、【代码片段】 C、【数据库】 D、【资源】 8.下列属性中,用于设置鼠标悬停时图像的提示文字的是()。A、 B、 C、 D、 9.下列选项中,属于定义列表的基本语法格式的是()。 A、<> <>列表项1<> <>列表项2<> ...... <> B、<> <>列表项1<> <>列表项2<> ...... <> C、<> <>名词1<> <>名词1解释1<> <>名词1解释2<> ... <> D、<> <>名词1<> <>名词2<> ... <> 10.下列选项中,符合后代选择器书写要求的是() A、p { ; } B、{ ; } C、{ ; } D、{ ; }

    相关文档
    最新文档