新書推薦:
《
英雄之旅:把人生活成一个好故事
》
售價:HK$
87.4
《
分析性一体的涌现:进入精神分析的核心
》
售價:HK$
122.1
《
火枪与账簿:早期经济全球化时代的中国与东亚世界
》
售價:HK$
77.3
《
《全面与进步跨太平洋伙伴关系协定》国有企业条款研究
》
售價:HK$
98.6
《
银行业架构网络BIAN(全球数字化时代金融服务业框架)(数字化转型与创新管理丛书)
》
售價:HK$
98.6
《
金托邦:江湖中的沉重正义
》
售價:HK$
60.5
《
易经今解:释疑·解惑·见微
》
售價:HK$
88.5
《
东欧史(全二册)-“中间地带”的困境
》
售價:HK$
221.8
|
編輯推薦: |
为清华大学出版社出版的《网页设计与开发HTML、CSS、JavaScript实例教程(第3版)》一书在网页设计基本元素、页面布局和整站建设等方面通过实验指导、理论习题、学生实验提供有力支持。为方便学习者,主版教材中的学生作业题在该实验教材的各章节中都进行了详细的实验讲解。 在实验案例的安排上,从培养学生面向商业化网页开发的角度出发,所有实验都精选知名网站的典型页面作为案例,并通过讲述和示范逐步分解其中的技术实现,使学生能够对技术在具体设计中的灵活使用有深刻的感受。充分考虑了学生在课后学习中对理论知识的巩固和实践技能的提升要求,教材配备大量的理论试题和学生实验,方便学生进行考试复习及自我评测和练习使用。
|
內容簡介: |
本书是为满足网页设计课程教学的需要,并配合清华大学出版社出版的《网页设计与开发HTML、CSS、JavaScript实例教程(第3版)》而编写的实验与实践教程。 全书共11章,包含网页设计基础、页面布局、CSS、JavaScript以及HTML5的应用等几个方面的内容。每章分为讲述与示范、理论解答题和学生实验三个部分。讲述与示范部分首先精选知名网站的典型页面进行赏析,然后针对代表性案例通过讲述与示范逐步分解其中的技术实现,学生能够对技术在具体页面设计中的灵活使用有深刻的感受; 理论解答题提供大量选择、填空类型题型; 学生实验部分提供指定素材与效果图供学生模仿完成。 本书结构合理,实验内容由浅入深,从实践的角度讲述了网页元素如何应用于商业化网站的设计和开发,可作为高等学校本科计算机及相关专业网页设计课程的实验与实践教材,也可提供给网页设计与制作、网站开发、网页编程等行业人员参考。
|
目錄:
|
目录
第1章网页设计简介
1.1讲述与示范
实验1: 优秀网站赏析
实验2: 体会超链接在网页中的广泛应用
实验3: 多种URL资源的访问方法
实验4: 使用记事本编写网页
实验5: 了解EditPlus编辑器
实验6: 了解浏览工具的安装
1.2理论解答题
1.3学生实验
第2章HTML基础
2.1讲述与示范
实验1: HTML文件的编写规则
实验2: 标记元素的属性
实验3: 利用style标记定义样式
2.2理论解答题
2.3学生实验
第3章文字与段落
3.1讲述与示范
实验1: 网页欣赏
实验2: 唐诗页面设计
实验3: 文章排版
3.2理论解答题
3.3学生实验
第4章列表
4.1讲述与示范
实验1: 网页欣赏
实验2: 新闻列表的实现
实验3: 利用无序列表制作页面导航
实验4: 电子相册的实现
实验5: 在网页中实现图文混排
4.2理论解答题
4.3学生实验
第5章超链接
5.1讲述与示范
实验1: 网页欣赏
实验2: 新闻列表的制作
实验3: 利用书签链接制作帮助文档
实验4: 电子相册的制作
5.2理论解答题
5.3学生实验
第6章表格
6.1讲述与示范
实验1: 网页设计欣赏
实验2: 成绩登记表的制作
实验3: 旅游路线页面的制作
6.2理论解答题
6.3学生实验
第7章表单
7.1讲述与示范
实验1: 网页欣赏
实验2: 会员登录
实验3: 调查问卷
实验4: 中国大学生在线注册表单
7.2理论解答题
7.3学生实验
第8章使用CSS格式化网页
8.1讲述与示范
实验1: 网页欣赏
实验2: 常用页面布局设计
实验3: CSS文件的4种引用方式
实验4: 利用CSS定位页面元素
实验5: 用DIV CSS布局网页结构
8.2理论解答题
8.3学生实验
第9章JavaScript基础
9.1讲述与示范
实验1: 认识JavaScript
实验2: 创建自定义函数
实验3: 建立外部JS文件
实验4: 对象创建与复制
实验5: 表单验证
实验6: 动态改变样式
实验7: Cookie操作
9.2理论解答题
9.3学生实验
第10章HTML5应用
10.1讲述与示范
实验1: 语义化页面布局设计
实验2: 画布Canvas的应用
实验3: 新增表单元素及属性应用
实验4: 音频和视频文件播放
10.2理论解答题
10.3学生实验
第11章综合网站案例制作
11.1讲述与示范
实验1: 网站欣赏
实验2: 网站设计规划
实验3: IIS服务器安装及站点本地发布
11.2学生实验
|
內容試閱:
|
前言
网页设计课程是高等院校计算机及其相关专业的一门重要的基础课程,也是一门实践性和技能性要求都很强的学科。本书是为满足网页设计课程教学的需要,并配合清华大学出版社出版的《网页设计与开发HTML、CSS、JavaScript实例教程(第3版)》而编写的实验与实践教程。全书共分为11章,每章分为讲述与示范、理论解答题和学生实验三个部分。讲述与示范提供3~5个相关内容的实验分析、规划、步骤和最终代码; 理论解答题部分提供30~40道填空、选择、简答等类型习题; 学生实验部分提供指定案例图文素材及效果图供学生练习。主要内容全书内容大致分为网页基本元素、CSS、JavaScript、HTML5的应用以及页面布局和整站建设六大内容。第1、2章主要练习网页设计的基本概念和文档结构,完成相关工具的安装。第3~7章主要练习网页元素在实际应用中的使用,包含文字与段落涉及的图文混排方式、列表涉及的导航制作、表格布局局部页面、表单页面设计约三十个实践实验的讲述。第8章主要练习DIV CSS的页面布局。第9章主要练习JavaScript在交互式网页开发中的基本应用。第10章主要练习HTML5新增特性的应用。第11章主要练习从需求分析到栏目设计最终进行布局和细节处理以及发布的整站建设过程。本书特点为清华大学出版社出版的《网页设计与开发HTML、CSS、JavaScript实例教程(第3版)》一书在网页设计基本元素、页面布局和整站建设等方面通过实验指导、理论习题、学生实验提供有力支持。为方便学习者,主版教材中的学生作业题在该实验教材的各章节中都进行了详细的实验讲解。在实验案例的安排上,从培养学生面向商业化网页开发的角度出发,所有实验都精选知名网站的典型页面作为案例,并通过讲述与示范逐步分解其中的技术实现,学生能够对技术在具体页面设计中的灵活使用有深刻的感受。充分考虑了学生在课后学习中对理论知识的巩固和实践技能的提升要求,教材配备大量的理论试题和学生实验,方便学生进行考试复习及自我评测和练习使用。教学资源为了读者学习方便,书中提供了大量的程序,这些程序均提供相应的电子资源。为了帮助任课教师更好地使用本教材,我们提供以下教辅材料。(1) 讲解实验的完整源代码;(2) 学生作业的图文素材及代码;(3) 理论习题的参考答案;(4) 商业网站设计的全站代码。
这些资料可以通过http:www.tup.com.cn下载或与编者(zlzyf@126.com)直接联系索取。本书的几位作者都是工作于教学与科研一线的骨干教师,具有丰富的教学实践经验。全书由张永强和郑娅峰负责策划。具体分工如下: 第1~4章由李继蕊编写,第5~7章由郑娅峰编写,第8、9章由张永强编写,第10章由韦付芝编写,第11章由郑娅峰编写。最后全书由张永强、郑娅峰进行了编排和审定。本教材在编写过程中,得到了清华大学出版社魏江江、薛阳老师的大力支持与合作。此外,赵文艳在本书整理、校对、绘图等工作中付出了艰辛的劳动,使本教材能如期地与读者见面。在此谨向以上各位表示衷心感谢。本教材虽经多次校对审稿,但限于编者水平,仍难免会有疏漏和不当之处,恳请读者批评指正。编者2016年6月
第3章文字与段落
文字与段落是整个HTML知识体系中最为基础的一项知识内容。任何网页的实现都是以文字和段落为基本元素的。通过对文字与段落属性的设置,可以使文字呈现不同的表现形式,提高网页文件的可读性和观赏性。因此,学好文字和段落的设置是学习网页设计的重要起步。本次实验将学习:1 标题字标记的应用。2 普通文字标记的使用。3 段落标签的使用。4 文字修饰样式属性的使用。5 文字和段落样式属性的修饰定义。实验目标:1 掌握定义标题、段落及标记文字的显示格式等常用标记。2 掌握文字段落排版的基本规则。3 能够完成文本型页面的设计与实现。3.1讲述与示范一直以来,文字能最有效地传递信息。把文字置入页面是一个简单的工作,但是把它设计成美观大方和赏心悦目的网页却是一项挑战性的工作。实验1: 网页欣赏文字是体现网页内容的主体,是一个网页的灵魂。文字排版的好坏,将直接影响版面的视觉效果。因此,文字设计是增强视觉传达效果,提高版面审美度的一种重要技术。文字的设计与排版看似简单,却蕴含很多的技巧。下面首先欣赏几个优秀的利用文字进行排版的页面。图31是著名的CSS设计网站禅意花园网站的官网,其主要是基于文字进行排版设计的首页。在它的首页中,几乎没有图片出现,设计者通过字体、字号和颜色的变化,将标题和内容做了有效的区分,并充分运用了间距、留白和对齐方式等属性的设置和变化进行页面布局,达到了简约而美观的视觉效果。
图31CSS设计网站禅意花园官网
图32是一张基于文字内容的个人简介的页面布局。这张页面充分运用了对比强烈的黑白色背景和具有冲击力字体的组合,形成层次分明的区域间隔,在有限的空间中尽可能多地呈现了内容信息。
图32文本布局的一个页面案例
一般而言,在进行文本内容的设计时,需要注意到以下几个问题。1. 字体fontfamily属性可以设置文本的字体。通常系统中都提供了很多字体可供选择,例如,中文字体就包括宋体SimSun、黑体SimHei、幼圆和琥珀等,其中,黑体适合用作标题,而宋体一般用于正文。但是网页中的字体正常显示依赖于浏览器所在的系统中是否安装相应的字库,如果没有安装,浏览器就会显示为默认的字体。除此之外,还包含一些不常用但也很重要的字体: 英文字体Typeface。英文字体是一个总称,在这个大类之下,主要分为以下几类。衬线体: 该字体中在笔画边缘的装饰部分就是衬线,可以清楚地标明笔触的末端。特别注意的是,中文字体也有衬线字体,比如宋体。等宽字体: 该字体只针对西文字体,因为英文字母的宽度各不相同。编程过程中如果字母不等宽那么排版就会很难看。我们常用的DOS窗口中的命令行,就是等宽字体。手写体: 此类字体主要是手写风格的字体,也称为书法字体。2. 字号字号主要是设置文本内容的大小,不同位置或者不同功能的文本有着不同的显示样式,这就需要调整对应的字号大小。fontsize可以设置文本的大小,其正确的选择是确保信息能够准确、清晰地在网页上呈现给用户和使用者的有效前提。3. 字符间距在网页页面中,文本的友好显示方式可以给用户和使用者带来赏心悦目的感觉。适当的字符间距,可以有效地避免造成拥挤和紧密的排版效果。字符间距的变化也会对文本的可读性产生很大影响。一般而言,字符的间距应当以能够保证阅读的连续性为宜。letterspacing和wordspacing可以用来调整字间距和词间距。4. 行间距行间距同字符间距性质一样,前者是调整文本内容各行之间的间距,后者是调整每一行内字符之间的间隔。行间距是纵向宏观调整排版效果,字符间距是横向微观改变显示效果。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10∶12,即用字10点,则行距12点。lineheight可以用来调整行高。5. 段落间距段落间距和前两者之间有所区别。段落间距没有专有属性来设置其段落间距,实际使用中采用的是设置段落p的内边距padding或者外边距margin来实现。段落间距选取合理数值有助于整体页面的美观和阅读。6. 颜色颜色是通过设置color属性来实现对文本或背景等元素控制。其属性值可以采用6位十六进制数来表示,如红色可表示为#FF0000,也可简写为#F00。除此之外,也可采用颜色名称,比如绿色可以写成green。甚至,有些情况下写成RGB255,0,0也可表示红色,此类情况是调用RGB函数。颜色的运用除了能够起到强调整体文字中特殊部分的作用之外,对于整个文案的情感表达也会产生影响。例如,对于重点强调的文字可以采用醒目的颜色。7. 文字的图形化在文本内容整体排版中,文字图形化是一种具有艺术表现力的文字编排形式。目前国际平面设计界以平面设计中文字的图形化表现为切入点,对文字图形化的表现形式和表现手法以及在平面设计的应用进行探讨性分析,挖掘出了文字与图形化设计的更多表现形式。一些常用的文字图形化方法包括替换法、共用法、叠加法、分解重构法等。对文字进行艺术化设计,将文字变为图形化的元素来使用,既体现了语义的功能,又可以一种更富创意的形式表达出深层的设计思想,克服网页的单调与平淡,体现出美学的效应。可以看到,通过对文字的灵活使用,可以创建界面优美、性能优良且具有强大生命力的网站。实验2: 唐诗页面设计实验要求:下面是一首唐诗的素材,这是一种正文内容较少的页面,要求综合运用字体、字号、字间距、行间距、颜色和对齐方式等属性的设计,用一个独立的页面设计一个有良好视觉效果和阅读效果的网页。
早发白帝城
李白
朝辞白帝彩云间,
千里江陵一日还。
两岸猿声啼不住,
轻舟已过万重山。
【简析】诗是写景的。唐肃宗乾元二年759年,诗人流放夜郎,行至白帝遇赦,乘舟东还江陵时而作此诗。诗意在描摹自白帝至江陵一段长江,水急流速,舟行若飞的情况。首句写白帝城之高; 第二句写江陵路遥,舟行迅速; 第三句以山影猿声烘托行舟飞进; 第四句写行舟轻如无物,点明水势如泻。全诗锋棱挺拔,一泻直下,快船快意,令人神远。难怪乎明人杨慎赞曰: "惊风雨而泣鬼神矣!"
实验分析:对于这样的素材,可以看出,整个内容可以分为两个部分: 一个是诗的正文,一个是诗的简析,因此,在结构上可以将页面分为上下两个部分,其中上方作为正文使用,以突出页面主题。正文内容是整篇文字的主题,在表现时可以通过字体字号的设计予以突出,另外由于内容并不是很多,因此在设计上可以通过字符间距和行间距在文字和段落中保持适当的间隙达到平衡。简析部分由于是该诗的讲解部分,因此在设计上不应喧宾夺主。具体来讲,可以通过用较小的字号来突出正文。另外,也可以通过色彩来区别,例如正文采用较吸引人的亮色,简析采用暗色等。实验步骤:通过上述的分析,从材料内容上看,可以分为几种情况: 标题字、作者、正文、简析。因此可以针对这几部分分别予以定义它们的显示风格。步骤1: 创建页面结构,完成内容的基本布局页面通过引入一个能够生成一个矩形框的标记,以便将内容全部放在此方框内,下面是页面的基本结构。
.container{width:650px;margin:0 auto;text-align:center;
background-color:#EFEFDA;padding: 20px;}
|
|