手机版 | 网站地图 | 设为首页
网站颜色：
首页
设计资讯
优势展厅
设计需求
设计交易
设计公司联盟
促销套餐
人才招聘
团购设计
点评
装饰装修

【正版新华官网】网页设计与开发-HTML.CSS.JavaScript实验教程 HTML CSS JavaScript 网页设计 郑娅峰 张永强 清华大学出版社

  • 产品名称:网页设计与开发——HTML、...
  • 书名:网页设计与开发——HTML、CSS、JavaScript实验教程（21世纪高等学校计算机专业核心课程规划教材）清华
  • 作者:郑娅峰、张永强
  • 定价:29.00元
  • 书名:网页设计与开发——HTML、CSS、JavaScript实验教程（21世纪高等学校计算机专业核心课程规划教材）清华
  • 是否是套装:否
  • 出版社名称:清华大学出版社



本书是为满足“网页设计”课程教学的需要，并配合清华大学出版社出版的《网页设计与开发——HTML、CSS、JavaScript实例教程（D3版）》而编写的实验与实践教程。 全书共11章，包含网页设计基础、页面布局、CSS、JavaScript以及HTML5的应用等几个方面的内容。每章分为讲述与示范、理论解答题和学生实验三个部分。讲述与示范部分1先精选知名网站的典型页面进行赏析，然后针对代表性案例通过讲述与示范逐步分解其中的技术实现，学生能够对技术在具体页面设计中的灵活使用有深刻的感受； 理论解答题提供大量选择、填空类型题型； 学生实验部分提供指定素材与效果图供学生模仿完成。 本书结构合理，实验内容由浅入深，从实践的角度讲述了网页素如何应用于商业化网站的设计和开发，可作为高等学校本科计算机及相关专业“网页设计”课程的实验与实践教材，也可提供给网页设计与制作、网站开发、网页编程等行业人员参考。 

2


 

D1章网页设计简介


1.1讲述与示范

实验1： YX网站赏析

实验2： 体会超链接在网页中的广泛应用

实验3： 多种URL资源的访问方法

实验4： 使用记事本编写网页

实验5： 了解EditPlus编辑器

实验6： 了解浏览工具的安装

1.2理论解答题

1.3学生实验


D2章HTML基础


2.1讲述与示范

实验1： HTML文件的编写规则

实验2： 标记素的属性

实验3： 利用style标记定义样式

2.2理论解答题

2.3学生实验


D3章文字与段落


3.1讲述与示范

实验1： 网页欣赏

实验2： 唐诗页面设计

实验3： 文章沛

3.2理论解答题

3.3学生实验


D4章列表


4.1讲述与示范

实验1： 网页欣赏

实验2： 新闻列表的实现

实验3： 利用无序列表制作页面导航

实验4： 电子相册的实现

实验5： 在网页中实现图文混排

4.2理论解答题

4.3学生实验


D5章超链接


5.1讲述与示范

实验1： 网页欣赏

实验2： 新闻列表的制作

实验3： 利用书签链接制作帮助文档

实验4： 电子相册的制作

5.2理论解答题

5.3学生实验


D6章表格


6.1讲述与示范

实验1： 网页设计欣赏

实验2： 成绩登记表的制作

实验3： 旅游路线页面的制作

6.2理论解答题

6.3学生实验


D7章表单


7.1讲述与示范

实验1： 网页欣赏

实验2： 会员登录

实验3： 调查问卷

实验4： 中国大学生在线注册表单

7.2理论解答题

7.3学生实验


D8章使用CSS格式化网页


8.1讲述与示范

实验1： 网页欣赏

实验2： 常用页面布局设计

实验3： CSS文件的4种引用方式

实验4： 利用CSS定位页面素

实验5： 用DIV CSS布局网页结构

8.2理论解答题

8.3学生实验


D9章JavaScript基础


9.1讲述与示范

实验1： 认识JavaScript

实验2： 创建自定义函数

实验3： 建立外部JS文件

实验4： 对象创建与复制

实验5： 表单验证

实验6： 动态改变样式

实验7： Cookie操作

9.2理论解答题

9.3学生实验


D10章HTML5应用


10.1讲述与示范

实验1： 语义化页面布局设计

实验2： 画布Canvas的应用

实验3： 新增表单素及属性应用

实验4： 音频和视频文件播放

10.2理论解答题

10.3学生实验


D11章综合网站案例制作


11.1讲述与示范

实验1： 网站欣赏

实验2： 网站设计规划

实验3： IIS服务器安装及站点本地发布

11.2学生实验

显示全部信息

 

2



D3章文字与段落 文字与段落是整个HTML知识体系中Z为基础的一项知识内容。任何网页的实现都是以文字和段落为基本素的。通过对文字与段落属性的设置，可以使文字呈现不同的表现形尸提高网页文件的可读性和观赏性。因此，学好文字和段落的设置是学习网页设计的重要起步。本次实验将学习： (1) 标题字标记的应用。(2) 普通文字标记的使用。(3) 段落标签 p 的使用。(4) 文字修饰样式属性的使用。(5) 文字和段落样式属性的修饰定义。实验目标： (1) 掌握定义标题、段落及标记文字的显示格式等常用标记。(2) 掌握文字段落沛的基本规则。(3) 能够完成文本型页面的设计与实现。3.1讲述与示范一直以来，文字能Z有效地传递信息。把文字置入页面是一个简单的工作，但是把它设计成美观大方和赏心悦目的网页却是一项挑战性的工作。实验1： 网页欣赏文字是体现网页内容的主体，是一个网页的灵魂。文字沛的好坏，将直接影响版面的视觉效果。因此，文字设计是增强视觉传达效果，提高版面审美度的一种重要技术。文字的设计与沛看似简单，却蕴含很多的技巧。下面1先欣赏几个YX的利用文字进行沛的页面。图31是ZM的CSS设计网站禅意花园网站的官网，其主要是基于文字进行沛设计的1页。在它的1页中，几乎没有图片出现，设计者通过字体、字号和颜色的变化，将标题和内容做了有效的区分，并充分运用了间距、留白和对齐方式等属性的设置和变化进行页面布局，达到了简约而美观的视觉效果。 图31CSS设计网站禅意花园官网 图32是一张基于文字内容的个人简介的页面布局。这张页面充分运用了对比强烈的黑白色背景和具有冲击力字体的组合，形成层次分明的区域间隔，在有限的空间中尽可能多地呈现了内容信息。D3章文字与段落

文字与段落是整个HTML知识体系中Z为基础的一项知识内容。任何网页的实现都是以文字和段落为基本素的。通过对文字与段落属性的设置，可以使文字呈现不同的表现形尸提高网页文件的可读性和观赏性。因此，学好文字和段落的设置是学习网页设计的重要起步。本次实验将学习： (1) 标题字标记的应用。(2) 普通文字标记的使用。(3) 段落标签

的使用。(4) 文字修饰样式属性的使用。(5) 文字和段落样式属性的修饰定义。实验目标： (1) 掌握定义标题、段落及标记文字的显示格式等常用标记。(2) 掌握文字段落沛的基本规则。(3) 能够完成文本型页面的设计与实现。3.1讲述与示范一直以来，文字能Z有效地传递信息。把文字置入页面是一个简单的工作，但是把它设计成美观大方和赏心悦目的网页却是一项挑战性的工作。实验1： 网页欣赏文字是体现网页内容的主体，是一个网页的灵魂。文字沛的好坏，将直接影响版面的视觉效果。因此，文字设计是增强视觉传达效果，提高版面审美度的一种重要技术。文字的设计与沛看似简单，却蕴含很多的技巧。下面1先欣赏几个YX的利用文字进行沛的页面。图31是ZM的CSS设计网站禅意花园网站的官网，其主要是基于文字进行沛设计的1页。在它的1页中，几乎没有图片出现，设计者通过字体、字号和颜色的变化，将标题和内容做了有效的区分，并充分运用了间距、留白和对齐方式等属性的设置和变化进行页面布局，达到了简约而美观的视觉效果。

图31CSS设计网站禅意花园官网

图32是一张基于文字内容的个人简介的页面布局。这张页面充分运用了对比强烈的黑白色背景和具有冲击力字体的组合，形成层次分明的区域间隔，在有限的空间中尽可能多地呈现了内容信息。

图32文本布局的一个页面案例

一般而言，在进行文本内容的设计时，需要注意到以下几个问题。1. 字体fontfamily属性可以设置文本的字体。通常系统中都提供了很多字体可供选择，例如，中文字体J包括宋体(SimSun)、黑体(SimHei)、幼圆和琥珀等，其中，黑体适合用作标题，而宋体一般用于正文。但是网页中的字体正常显示依赖于浏览器所在的系统中是否安装相应的字库，如果没有安装，浏览器J会显示为默认的字体。除此之外，还包含一些不常用但也很重要的字体： 英文字体(Typeface)。英文字体是一个总称，在这个大类之下，主要分为以下几类。衬线体： 该字体中在笔画边缘的装饰部分J是衬线，可以清楚地标明笔触的末端。特别注意的是，中文字体也有衬线字体，比如宋体。等宽字体： 该字体只针对西文字体，因为英文字母的宽度各不相同。编程过程中如果字母不等宽那么沛J会很难看。我们常用的DOS窗口中的命令行，J是等宽字体。手写体： 此类字体主要是手写风格的字体，也称为书法字体。2. 字号字号主要是设置文本内容的大小，不同位置或者不同功能的文本有着不同的显示样尸这J需要调整对应的字号大小。fontsize可以设置文本的大小，其正确的选择是确保信息能够准确、清晰地在网页上呈现给用户和使用者的有效前提。3. 字符间距在网页页面中，文本的友好显示方式可以给用户和使用者带来赏心悦目的感觉。适D的字符间距，可以有效地避免造成拥挤和紧密的沛效果。字符间距的变化也会对文本的可读性产生很大影响。一般而言，字符的间距应D以能够保证阅读的连续性为宜。letterspacing和wordspacing可以用来调整字间距和词间距。4. 行间距行间距同字符间距性质一样，前者是调整文本内容各行之间的间距，后者是调整每一行内字符之间的间隔。行间距是纵向宏观调整沛效果，字符间距是横向微观改变显示效果。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10∶12，即用字10点，则行距12点。lineheight可以用来调整行高。5. 段落间距段落间距和前两者之间有所区别。段落间距没有专有属性来设置其段落间距，实际使用中采用的是设置段落p的内边距padding或者外边距margin来实现。段落间距选取合理数值有助于整体页面的美观和阅读。6. 颜色颜色是通过设置color属性来实现对文本或背景等素控制。其属性值可以采用6位十六进制数来表示，如红色可表示为#FF0000，也可简写为#F00。除此之外，也可采用颜色名称，比如绿色可以写成green。甚至，有些情况下写成RGB(255,0,0)也可表示红色，此类情况是调用RGB()函数。颜色的运用除了能够起到强调整体文字殊部分的作用之外，对于整个文案的情感表达也会产生影响。例如，对于重点强调的文字可以采用醒目的颜色。7. 文字的图形化在文本内容整体沛中，文字图形化是一种具有艺术表现力的文字编排形式。目前GJ平面设计界以平面设计中文字的图形化表现为切入点，对文字图形化的表现形式和表现手法以及在平面设计的应用进行探讨性分析，挖掘出了文字与图形化设计的更多表现形式。一些常用的文字图形化方法包括替换法、共用法、叠加法、分解重构法等。对文字进行艺术化设计，将文字变为图形化的素来使用，既体现了语义的功能，又可以一种更富创意的形式表达出深层的设计思想，克服网页的单调与平淡，体现出美学的效应。可以看惮通过对文字的灵活使用，可以创建界面优美、性能优良且具有强大力的网站。实验2： 唐诗页面设计实验要求： 下面是一1唐诗的素材，这是一种正文内容较少的页面，要求综合运用字体、字号、字间距、行间距、颜色和对齐方式等属性的设计，用一个D立的页面设计一个有良好视觉效果和阅读效果的网页。

早发白帝城
李白
朝辞白帝彩云间，
千里江陵一日还。 
两岸猿声啼不住，
轻舟已过万重山。
【简析】诗是写景的。唐肃宗乾二年(759年)，诗人流放夜郎，行至白帝遇赦，乘舟东还江陵时而作此诗。诗意在描摹自白帝至江陵一段长江，水急流速，舟行若飞的情况。1句写白帝城之高； D二句写江陵路遥，舟行迅速； D三句以山影猿声烘托行舟飞进； D四句写行舟轻如无物，点明水势如泻。全诗锋棱挺拔，一泻直下，快船快意，令人神远。难怪乎明人杨慎赞曰： "惊风雨而泣鬼神矣!"

实验分析： 对于这样的素材，可以看出，整个内容可以分为两个部分： 一个是诗的正文，一个是诗的简析，因此，在结构上可以将页面分为上下两个部分，其中上方作为正文使用，以突出页面主题。正文内容是整篇文字的主题，在表现时可以通过字体字号的设计予以突出，另外由于内容并不是很多，因此在设计上可以通过字符间距和行间距在文字和段落中保持适D的间隙达到平衡。简析部分由于是该诗的讲解部分，因此在设计上不应喧宾夺主。具体来讲，可以通过用较小的字号来突出正文。另外，也可以通过色彩来区别，例如正文采用较吸引人的亮色，简析采用暗色等。实验步骤： 通过上述的分析，从材料内容上看，可以分为几种情况： 标题字、作者、正文、简析。因此可以针对这几部分分别予以定义它们的显示风格。步骤1： 创建页面结构，完成内容的基本布局页面通过引入一个能够生成一个矩形框的标记

，以便将内容全部放在此方框内，下面是页面的基本结构。 
在页面的样式定义部分(style)，定义了页面中DIV标记应D使用的样式(通过设置class属性)，如下。

．container{width:650px;margin:0 auto;text-align:center;
background-color: #EFEFDA;padding: 20px;}

这里将矩形框的背景设置了特定的颜色，里面的文本内容通过“margin:0 auto;”设置为居中对齐，另外规定了矩形框的宽度为650px。这样的设置确保了将要显示的内容局限在一个矩形框内，并且居于页面的水平ZY。步骤2： 添加各部分的样式定义在完成了基本的页面结构后，下面开始添加内容到页面。根据材料分析，可以采用上下结构来进行布局，上方为诗的正文，下方为诗的简析。由于正文内容较少，简析内容较多，但主题内容又在上番因此，适D增大正文的字体、字号、字符间距和行距保持和下文的平衡，进一步地通过将正文的颜色改变加大与简析部分的反差。下面分别定义了内容中关于标题、作者、正文和简析4个不同部分的使用样式。添加内容样式后的代码如下。
 
1. 定义标题样式通常标题适合选用黑体，由于诗词内容偏少，特别是主体内容偏少，因此适D采用较大的字号比较合适。具体地，页面为此标题定义了如下风格。
H1{font-family:黑体;font-size:44px;color:#B22222; letter-spacing:12px;}
这里为一级标题字H1定义了具体的风格，包括字体为黑体、字号为44像素、文字颜色、字符间距为12像素。2. 定义作者样式作者部分相对简单，只是简单地规定了其字体和字号。
．poemAuthor{font-family:宋体;font-size:14px;}
3. 定义正文样式通常正文和标题的字号大小相差一倍左右为宜，这里选择了24px，字体风格采用了粗体，字符间距为12px，文本颜色和标题保持一致。
．poemText{ font-family:宋体;font-size:24px;font-weight:bold;
letter-spacing:12px;line-height:2．5;color:#B22222;}
另外，为了加大正文的高度，这里特别增大了行高，设置为2.5倍大小。4. 定义简析样式简析部分是相对次要的内容，因此字体采用标准宋体和较小的字号，这里选择了14px。另外，其文字内容较多，因此字符间距调整为3px，在对齐方式上采用左对齐的方式保持简析内容的规整。
．poemComment{font-family:宋体;font-size:14px;letter-spacing:3px;
line-height:1．5;text-align:left;}
．emphasize{font-weight:bold;}
另外为了强调简析部分，这里特意为“【简析】”这两个字定义了特殊的风格，主要是采用粗体显示。步骤3： 添加正文到页面，引入样式定义程序31是对应于上面设置的页面代码。 

2



为清华大学出版社出版的《网页设计与开发——HTML、CSS、JavaScript实例教程（D3版）》一书在网页设计基本素、页面布局和整站建设等方面通过实验指导、理论习题、学生实验提供有力支持。为方便学习者，主版教材中的学生作业题在该实验教材的各章节中都进行了详细的实验讲解。   在实验案例的安排上，从培养学生面向商业化网页开发的角度出发，所有实验都精选知名网站的典型页面作为案例，并通过讲述和示范逐步分解其中的技术实现，使学生能够对技术在具体设计中的灵活使用有深刻的感受。充分考虑了学生在课后学习中对理论知识的巩固和实践技能的提升要求，教材配备大量的理论试题和学生实验，方便学生进行考试复习及自我评测和练习使用。  

2
热门设计服务
周边城市网页设计: 无锡网页设计 徐州网页设计 常州网页设计 扬州网页设计 南通网页设计 连云港网页设计 淮安网页设计 盐城网页设计 苏州网页设计 镇江网页设计 宿迁网页设计 泰州网页设计 江苏网页设计
设计联盟中国城市网页设计: 北京设计网页设计 上海设计网页设计 天津设计网页设计 重庆设计网页设计 广州设计网页设计 深圳设计网页设计 杭州设计网页设计 合肥设计网页设计 福州设计网页设计 兰州设计网页设计 南宁设计网页设计 贵阳设计网页设计 海口设计网页设计 石家庄设计网页设计 郑州设计网页设计 哈尔滨设计网页设计 武汉设计网页设计 长沙设计网页设计 沈阳设计网页设计 大连设计网页设计 银川设计网页设计 西宁设计网页设计 济南设计网页设计 青岛设计网页设计 太原设计网页设计 西安设计网页设计 成都设计网页设计 拉萨设计网页设计 乌鲁木齐设计网页设计 昆明设计网页设计