网页规划与制造项目教程（微课版）;单元10 网站详情页的规划与制造;【操作预备】 创立所需的文件夹，仿制所需的资源到桌面上。即：在本地硬盘（例如D盘）中创立一个文件夹“网页规划与制造操练Unit10”，然后将光盘中的“start”文件夹中“Unit10”文件夹中的“Unit10课程资源”文件夹一切内容仿制到桌面上。 【仿照练习】 使命10.1 北京大学网站详情页的规划与制造 本单元“仿照练习”的使命卡如表10.1所示。; 使命编号;网页布局结构剖析; 本单元“仿照练习”的使命盯梢卡如表10.2所示。; 本单元“仿照练习”网页content.html阅览作用如图10-1所示。;使命10.1.1 北京大学网站详情页全体页面结构的制造 使命10.1.1.1 树立北京大学站点的目录结构 〖使命描绘〗 （1）创立所需的文件夹。 （2）在文件夹中创立“images”子文件夹。 （3）将所需的图画资源仿制到“images”文件夹中。 （4）将“网页骨架.html”文档拖曳到该文件夹中。 ;〖使命施行〗 （1）树立文件夹“bjdx”。 （2）树立子文件夹“images”。 （3）将所需的图片资源仿制到“images”文件夹中。 （4）将“网页骨架.html”文档拖曳到“bjdx”文件夹中。 ;使命10.1.1.2 创立与保存详情页文档content.html 〖使命描绘〗 （1）修正“网页骨架.html”文档名为“content.html”。 （2）修正title标签中的内容。 （3）保存文档，作用如图10-2所示。;〖使命施行〗 （1）修正“网页骨架.html”文档名为“content.html”。 ①双击“修正器（Sublime Text）”图标，翻开修正器。 ②将文件夹中的“content.html”拖曳到修正器的修正窗口中，封闭其他网页文档。使“content.html”成为当时文件。将title标签中的内容“网页骨架”修正为“北京大学-Peking University”。 （2）保存网页文档。履行菜单指令【文件】→【保存】，封闭“修正器”。;使命10.1.1.3 北京大学网站详情页全体页面结构剖析 〖使命描绘〗 （1）剖析全体页面结构，确认分为哪些大的部分。 （2）别离将这些部分以不同的色块表明。 （3）别离标记上合适的HTML标签，建立全体的代码结构。 ;〖使命施行〗 （1）剖析全体页面结构，如图10-3所示。 ①页面布局剖析：页面天然布局。从全体看，整个页面分为topbar、flash、navbar、so、content和footer 6个大盒子，而且这6个盒子都是在规范流中的。 ②页面组成元素剖析：最重要的包括flash、标题文本、正文文本、图画、空格等网页元素。 （2）别离将各部分以不同的色块表明。 （3）别离标记上合适的HTML标签，建立全体的代码结构。;图10-3 北京大学网站详情页全体页面结构剖析;①因为页面一切元素都居中，所以整个页面必然要在一个全体的大盒子之中。首要，为页面做一个全体的大盒子，取名为“wrap”（业界的遍及做法）。即：全体的大盒子wrap包括6个大盒子topbar、flash、navbar、so、content和footer。 ②运用div标签表明各个大盒子，这6个盒子都是在规范流中的，且在全体的大盒子“wrap”中。在编写的过程中，要注意其缩进格局。;③在每个大盒子上、下刺进代码，如：!--头部开端--和!--头部完毕--，对代码进行注释，是一个HTML的注释标签。 ④在每个大盒子之间刺进代码：div style=clear:both/div，是为了尽最大或许防止“起浮隔行影响”现象，它是一个空的在规范流中的div。;使命10.1.1.4 北京大学网站详情页突变布景的制造 〖使命描绘〗 书写北京大学网站详情页突变布景的代码，阅览器作用如图10-4所示。;〖使命施行〗 （1）首要，直接书写*{ margin: 0; padding: 0; }款式，以去掉一切的内边距和外边距，即初始化的操作。 （2）突变布景充溢在整个窗体中，所以要对body标签中书写款式。 该部分代码如下： …… style type=text/css *{ ;margin: 0; padding: 0; } body{ background-image: url(images/bodybg.png); background-repeat: repeat-x; } /style ……;使命10.1.1.5 北京大学网站详情页版心居中作用的制造 〖使命描绘〗 （1）在Fireworks中测量详情页版心的长度，如图10-5所示。 （2）书写详情页版心居中作用的代码。;〖使命施行〗 1．在Fireworks中测量详情页版心的长度 （1）将“北京大学详情页截图”拖曳到Fireworks中。 （2）在版心的左、右两边别离拉出衡量的参阅线）运用“切片”东西，精确地框出版心的长度为980px。 2．书写详情页版心居中作用的代码 阅览器作用如图10-6所示。;图10-6 详情页版心居中阅览作用图;使命10.1.2 北京大学网站详情页topbar部分的制造 〖使命描绘〗 （1）剖析详情页topbar部分的结构。 （2）详情页topbar部分结构的建立。 （3）书写详情页topbar部分的款式代码。 阅览器作用如图10-7所示。;〖使命施行〗 1．剖析详情页topbar部分的结构 （1）topbar部分的高度为31px，宽度为980px。 （2）首要结构的内容只要文字“北京大学新闻中心主办”。 （3）布景条是一个由1px宽，31px高的图画在水平方向平铺而成。 2．详情页topbar部分结构的建立; 该部分结构代码如下： …… !--topbar开端-- div id=topbar 北京大学新闻中心主办 /div !--topbar完毕-- ……;3．书写详情页topbar部分的款式代码 （1）高度为31px。 （2）line-height: 31px;——行高与盒子高度持平，文字便可笔直居中。 （3）padding-left: 30px;——左内边距。 阅览器作用如图10-7所示。;使命10.1.3 北京大学网站详情页Flash部分的制造 〖使命描绘〗 （1）剖析详情页Flash部分的结构，阅览器作用如图10-8所示。 （2）详情页Flash部分结构的建立。 （3）书写详情页Flash部分的款式代码。;〖使命施行〗 （1）翻开Adobe官网的Flash协助页面。 （2）将图10-9中所示的object/object标签中的一切代码仿制到修正器中。;（3）修正以下代码中的7个参数。需求清晰的是：Flash的目录为“images/2.swf”；Flash的尺度为“980px×175px”。 （4）书写详情页Flash部分的款式代码。 该部分款式代码如下： …… style type=text/css …… #flash{ height: 175px; } /style ……;使命10.1.4 北京大学网站详情页navbar部分的制造 〖使命描绘〗 （1）剖析详情页navbar部分的结构，阅览器作用如图10-10所示。 （2）详情页navbar部分结构的建立。 （3）书写详情页navbar部分的款式代码。;〖使命施行〗 1．剖析详情页navbar部分的结构 （1）navbar部分的高度为40px，宽度为980px。 （2）首要结构是一个水平的、文字型的导航菜单，结构为ul无序列表的文字。 （3）布景条是由一个10px宽，40px高的图画在水平方向平铺而成。 2．详情页navbar部分结构的建立; 阅览器作用如图10-11所示。;3．书写详情页navbar部分的款式代码 （1）navbar部分高度为40px。 （2）line-height: 40px;——行高与高度持平，文字便可笔直居中。

  一种根据赖氨酸的自增强电化学发光探针在水相中快速组成办法及使用.pdf

  贵州省贵阳市2021-2022学年七年级上册数学期末调研试卷（一）含答案.docx

  犯罪心理学（中南财务）我国大学MOOC慕课 章节检验期末.docx

  一致攻略：2020利妥昔单抗用于ANCA相关性血管炎的保持缓解医治.docx

  原创力文档创立于2008年，本站为文档C2C买卖形式，即用户上传的文档直接共享给其他用户（可下载、阅览），本站仅仅中心服务渠道，本站一切文档下载所得的收益归上传人一切。原创力文档是网络服务渠道方，若您的权力被损害，请发链接和相关诉求至 电线) ，上传者