HTML5+CSS3网页设计实战 课件 第2章 创建网站项目

第2章

创建网站项目01学习目标02课程思政目标03知识点04本章练习PPT模板/moban/

学习目标掌握Hbuilder软件创建项目，并能将素材及HTML文件正确放置在相应的文件夹中；深刻理解HTML文件、图像文件命名规范化的背景；能逐渐记住网页常见的英文单词，课堂上敢于用“拆分法”去拼读陌生的英文单词；理解不同类型的图像在网页中对应的使用场景；养成规范书写代码的习惯，包括缩进式书写、注释、标签语义化。第2章

创建网站项目1通过本章学习，要求达到以下既定目标：课程思政目标2通过访问华为企业，侧面了解华为发展历程，培养民族自豪感。了解本章成语的出处，理解成语含义与知识点理解的结合：“蹈矩循规”，借此联想法律制度、校纪校规的重要性。“削足适履”，强调每个人有各自的学习技巧，不考虑自身特点而生搬硬套的话，容易陷入窘境。“各有千秋”，每个人都有自身的优点，尽量扬长避短。“言人人殊”，看待事情人人都有各自想法观点，重要事情未经验证前不轻信别人的说法，不信谣，不传谣。第2章

创建网站项目课程思政目标2“长幼有序”，弘扬中国传统道德价值观的核心理念。“事必躬亲”，在接触一门新知识、新技能、新工作的时候，必须要亲自完整地去体验每个环节，有调查才有发言权。“顾名思义”，强调编程中要培养认真专注态度，切勿图一时方便，给对象乱起名字。第2章

创建网站项目3知识点2.1站点相关命名规范2.2图像文件规范化图像格式3.3书写HTML代码的习惯保持正确的缩进图像尺寸图像命名充分的注释标签尽可能语义化第2章

创建网站项目2.1站点相关命名规范3知识点大部分网页服务器只支持英文网页路径，网页路径区分大小写，最好统一使用小写英文，因此html文件、图像名、文件夹名都需要用合理的英文命名。文件名可使用a～z、A～Z、0～9、减号（-）和下划线（_）等字符；禁止使用特殊字符，如：@、#、$、%、&、*。文件名长度以简单短小为原则。建议尽量使用一些简单易懂的缩写，如集团介绍（groupprofile），可以将这个网页命名为group_pro.htm。2.1站点相关命名规范3知识点常见英文单词如表2-1所示。出现频率中文英文中文英文高↓低公司简介Profile或Company产品销售Sales返回首页Homepage行业新闻TradeNews企业文化Culture联系我们ContactUs版权所有CopyRight友情链接HotLink产品Product组织机构Organization网站地图SiteMap客户服务CustomerService常见问题FAQ地址ADD电话TEL传真FAX注册Login合作加盟JoinIn二维码QRcode价格Price产品描述Description尺寸Size品牌Brand型号Model信息Information论坛Forum产品定购Order下载中心Download行业Industry意见反馈Feedback会员登陆MemberEntrance公司荣誉Glories工程案例EngineeringProjects社区Community技术力量Technology

3知识点知识点：文件命名规范记忆关键词：蹈矩循规关键词解析：文件命名有规则，便于管理、查找。我们经常要使用一大组的<li>标签收纳大量的图片，我们的图片文件是按数字递增规律来命名的，那就不需要不断地去查看图片信息，如：<li><imgsrc=”img/news-00034.jpg”></li>我们可以在hbuilder内快速的复制这一行若干遍，然后把“34”对应换成35、36、37……正如我们所在的社会，无规矩不成方圆，懂规矩才能如鱼得水。《三元记·格天》：“积善存仁，蹈矩循规太古民。”蹈矩循规——指遵守规矩，不敢违反。2.1站点相关命名规范3知识点【案例1】某个企业要建立公司网站，拟定网站主要栏目包括最新资讯、企业介绍、产品目录、企业文化、商务联系。请用英文命名对应的文件夹，并将结果截图下来。2.1站点相关命名规范【解决策略】优先采用英文单词表述，可以百度对应英文单词。3知识点【案例2】上述公司随着业务蓬勃发展，预计未来5年，产品将形成化妆，服饰，生活用品三大类目，服饰类下包括儿童、青少年、成年、老年人系列。尝试规划“产品”目录下的文件夹结构和网页文件命名规则。2.1站点相关命名规范【解决策略】子文件夹命名规则：儿童、青少年、成年、老年人对应的尽可能熟悉且短小的英文可采用Child,teen,adult,elder。思路1:比如青少年对应teen文件夹下的文件命名规则，采用teen+年份+月份+日+序号，如果考虑一天能制作了上百个文件，则可以写为teen20240507001~teen20240507999。

思路2：如果觉得一大串数字不好观察，管理，也可以写出teen2024-05-07_001。2.2图像文件规范化3知识点2.2.1图像格式网页中图片的格式有gif、png、jpg、svg、webp等，但我们只需了解最常见的三种即可。jpg压缩比高，适合人像类色彩丰富的图片。gif通常用于少量色彩的小图标、图片，支持透明但边缘的效果通常有残留的杂色痕迹，还支持小动画。png适合色彩丰富与否图片，支持透明，对图像边缘几乎没有如gif的弊端。2.2图像文件规范化3知识点知识点：图片格式类型记忆关键词：各有千秋关键词解析：不同格式的图像，适用场合不同，各种浏览器及版本支持程度不同。图标类图片考虑到透明底色原因，一般采用png格式，有部分网站采用svg技术绘制图标，可以认为svg图片是一段纯粹的代码，可以借助一些svg绘图工具来生成代码。汉·李陵《与苏武三首》：“嘉会难再遇，三载为千秋。”各有千秋——意思是各有各的存在的价值。比喻在同一层次内各人有各人的长处，各人有各人的特色。2.2图像文件规范化3知识点【案例3】在Photoshop中打开“输出透明底色.psd”文件。将图标输出为透明底色，分别用gif、png格式进行保存。然后将这两个图片插入到黑色背景色的网页中，并预览效果观察区别之处。2.2图像文件规范化3知识点2.2.2图像尺寸在设计网页时，应考虑不同的屏幕分辨率，以确保在不同设备上都能获得良好的视觉体验，一般来说，建议使用1366x768分辨率作为基准，并考虑更高的分辨率。因此，图片尺寸要考虑不同的分辨率下保证大小适中，避免过小导致模糊或过大占用过多空间。一般来说，建议使用100KB-500KB大小的图片。从图片的宽高数值来看，不同的应用场景的图片尺寸要求各不一致，标志、海报、标题图片、图标的尺寸，通常没有固定的规定，但个别网站的管理后台、移动端开发任务等对图片的尺寸有特定要求。2.2图像文件规范化3知识点知识点：图像尺寸应该按100%比例输出以免失真记忆关键词：削足适履关键词解析：在photoshop中处理成效果图的实际大小尺寸，不建议通过css控制大小而造成宽高比失真、模糊等。尤其是图标图片，若原意在网页中图标的线条宽度为2像素粗细，但设计时将图标尺寸扩大来处理，在网页中强行把尺寸压缩，相当于把“脚”塞到“童时的鞋”，那线条的宽度很大几率就不再是2像素粗细，偏离了设计师的意图。西汉·刘安《淮南子·说林训》：“夫所以养而害所养，譬犹削足而适履，杀头而便冠。”削足适履——指把脚削去一块来凑合鞋的大小；比喻不合理地迁就凑合或不顾具体条件，生搬硬套。2.2图像文件规范化3知识点2.2.3图像命名图像文件的名称分为头尾两部分，用下划线或中横线隔开，头部分表示此图片的大类性质，如类别为广告的采用banner、标志采用logo、菜单采用menu、按钮采用btn、照片采用pic、标题图片采用title。尾部分表示图片的关联内容，也可以是图片的当前某种状态，如被按下press,关闭用off，获得焦点用focus。范例：banner-sohu.jpgmenu_job.giftitle_news.gifpic_people.jpgbtn-press.pngmenu_focus.gif2.2图像文件规范化3知识点知识点：图像文件命名规矩记忆关键词：言人人殊关键词解析：图像文件规范的命名有助于个人在众多的图像文件中快速定位所需文件，提高工作效率。规范的命名方式不仅能让文件整理显得更加有序，还能体现个人或团队的专业素养，这对于提升个人职业形象、增强客户信任度等方面都有积极作用。网页设计者在遵循一定的命名规则的基础上，也有自己所定义的命名规则，只要命名能让工作提高效率，我们就可以认为这规矩是合理的。但作为团队项目，言人人殊，必须要制定一套大家都遵循的规则。西汉·司马迁《史记·曹相国世家》：“参尽召长老诸生，问所以安集百姓，如齐故诸儒以百数，言人人殊。参未知所定。”言人人殊——指每个人的说法都不相同，各有各的看法。2.3书写HTML代码的习惯3知识点在HTML和CSS代码的编写中，推荐代码使用小写，这是CSS的官方推荐做法，也符合大多数编码规范和命名约定。2.3.1保持正确的缩进3知识点2.3.1保持正确的缩进何为缩进，类似我们写作文时，每段前面总是空两个格子一样。对于编写HTML代码来说，可以这么理解“每给一个元素添加子元素的时候，子元素代码就应该往右移动一些位置”。2.3.1保持正确的缩进3知识点虽然HTML代码有无缩进并不会产生错误，但对于任何新老手来说，良好的代码缩进可以让编写、调试阶段快速无误进行。在Hbuilder软件中，按一次<tab>键代表往后缩进一个单位，按<Shift>+<tab>键或者是<Backspace>回退键可以往前回退一个单位。千万别拼命按空格键来产生缩进，费时且缩进不均匀。2.3.1保持正确的缩进3知识点知识点：缩进式书写代码记忆关键词：长幼有序关键词解析：元素（容器）从代码分辨包含关系，如同看家族族谱。父元素有若干子元素，父元素如首领站在队伍前面，所有子元素是平级关系，站在首领后方，依次类推形成层次递进的关系。《荀子·君子篇》：“故尚贤使能，则主尊下安；贵贱有等，则令行而不流；亲疏有分，则施行而不悖；长幼有序，则事业捷成而有所休。”长幼有序——指年长的和年少的、是有顺序的。2.3.1保持正确的缩进3知识点【案例4】把学生写的错乱的HTML代码，修正为正确整齐缩进的代码结构。【解决策略】在Hbuilder中，从<body>标签开始，逐级检查相关标签是否成对出现。2.3.2充分的注释3知识点注释，实际就是“工作记录”、“看书笔记”，注释对程序的运行毫无影响。编程中使用注释的主要作用是增强代码的可读性、便于维护和调试、以及帮助团队成员理解代码逻辑。在这些作用中，增强代码可读性尤为重要。编写清晰、易懂的注释可以让其他开发者（包括未来的自己）快速理解代码的目的和逻辑，这对于维护大型项目和团队协作尤其关键。HTML注释语句格式为<!--注释内容-->。2.3.2充分的注释3知识点CSS对应的注释语句格式为//注释文字或者/*注释文字*/。2.3.2充分的注释3知识点知识点：编程时注释的重要性记忆关键词：事必躬亲关键词解析：代码注释，必须由代码编写者亲自标注，带个好头！一个称职的码农，应该在代码适当位置标注上清晰、有效的提示信息，便于日后维护及团队协作需要。成百上千行的代码并不是设计者当天就能完成，与其几天后忘却重新审视代码意思，不如先做好注释，更不能指望别人理解你代码时帮你写注释。《诗·小雅·节南山》：“弗躬弗亲，庶民弗信。”事必躬亲——意思是不论什么事一定要亲自去做，亲自过问。2.3.3标签尽可能语义化3知识点2.3.3标签尽可能语义化HTML语义化是指使用合适的标签来展示内容的结构和意义，而不是仅仅为了样式表现。有利于搜索引擎优化（SEO），因为搜索引擎可以根据标签来确定上下文和权重。方便开发者阅读和理解。方便维护，更改代码时容易定位。方便设备（如屏幕阅读器、盲人阅读器等）解析。方便团队合作，因为语义化使得项目更加标准化和规范化。3知识点知识点：标签语义化记忆关键词：顾名思义关键词解析：一个好名字，让人读懂其父母的殷殷期待；一个语义化的标签，让机器与人都能读懂网页的内容深意。它不仅仅是代码的堆砌，而是赋予每个元素以灵魂，让搜索引擎轻松捕捉页面主旨，优化排名；让视障人士通过屏幕阅读器感知世界；更让开发者维护代码如行云流水，结构清晰。比如：文章详情页的标签选择，参考标签有h1~h6标题、p段落、section版块/区块、artist文章、em强调（斜体外观）、strong强调（粗体）、time时间，西晋·陈寿《三国志·魏书·王昶传》：“欲使汝曹立身行己，遵儒者之教,履道家之言,故以玄默冲虚为名,欲使汝曹顾名思义,不敢违越也。”顾名思义——指看到名称就想到它的含义。2.3.3标签尽可能语义化3知识点2.3.3标签尽可能语义化标签语义化2.4基础练习4本章练习【练习1】打开资源包“第2章-代码修正练习”文件夹下的“修改缩进1”、“修改缩进2”、“修改缩进3”这三个文件夹，如图2-13所示，修改文件夹中的若干个书写不标准的HTML代码。2.4基础练习4本章练习【练习2】挑选几个公司或新闻门户网站，仔细观察不同区域的图片的名称。门户网站图片的名称比较长，看上去不限于包含年月日等信息，也还有部分公司内部的文件编码格式，是比较正常的，企业网站图片多，采用英文命名方式过于复杂也不好归类，还容易产生歧义。联想一下我们身份证号码，也不能采用拼音来表示。2.4基础练习4本章练习【练习3】用“开发者工具”观察几个企业（不宜选门户网站）的主页、一级页面或详情页，用箭头选择工具观察网页的结构。在Hbuilder新建一个空白HTML文件，将网页框架大体结构表述出来。2.5扩展练习4