网页制作的方法和步骤有哪些？

网页制作的方法和步骤有哪些？

做出优秀的网站是一项大工程，以下的流程属于个性化的建站方式：定制化网站。

首先记得买合适的域名（阿里云、腾讯云等都可以），买虚拟主机，然后开始网站的制作。
一、前期策划（内容 & 功能）
磨刀不误砍柴工。先尽量想清楚网站内容，网站的受众是什么特点，网站需要哪些功能，等等。把网站的现在和将来都策划好了以后，才好确定网站（首页和内页）的文本内容结构、设计风格、功能技术、开发解决方案、后台管理工具（如果网站更新不频繁也可以选择后期直接改代码）。

【建议】内容结构要清晰，重点要突出，有明显层级。一定要先把内容想透了再着手后面的，有大把的人都走了弯路。

二、页面设计（功能 & UI设计 & 交互）
根据设计风格和代码开发平台的特点，设计首页内页的稿图（如使用Figma等平台），做好内链的逻辑，以及用文字描述清楚页面的交互动效。

【建议】设计风格要保证一致性，图片元素保证高清且不侵犯他人版权，甚至是使用的字体也要记得查清楚版权问题。不然万一被告也是很麻烦的。交互动效是提升网站的点睛之笔，一个微小的调整就能拉开质感的差距，所以一定要做。不过和码农沟通时要想清楚动效的每步动作，不然开发不好办，沟通成本很高。

三、代码开发（技术 & 解决方案）
这个步骤，会需要反复修改前面的设计稿图，很考验耐心和细节把握。因为总会出现这样的情况：代码实现出来了，反而看不顺眼这个界面了，或者字符被强制跳行了，字太大了，等等小问题。当然，码农的实力也相当重要，开发出逻辑高效的网站是很重要的。这样可以提高网站的视觉体验，增快网站运行速度，增加网站的性能得分，还能帮助后期搜索引擎排名优化。

【建议】找优秀的码农（重复三遍）！另外推荐使用最前沿的Jamstack网站架构，能实现全面定制化，在功能的实现上灵活度最高。了解更多Jamstack，可以点击阅读这篇文章。最好做后台管理工具，减少后期网站维护的辛苦。

四、测试（兼容性 & 找bug）
在不同的设备上（ios/安卓的手机平板电脑，以及各种常用的浏览器）检查网站，这个过程中各种五花八门的问题都会出现，这是很正常的。需要火眼金睛会找茬的审核人员，以及耐心的码农。

【建议】尽量先把问题找齐了，以文档的形式发给码农。尽量减少反复要求修改的情况。

五、运行
网站已经制作好啦！后期尽量多更新，多做外链，提交网站url给搜索引擎爬虫，做好SEO哦。
<hr/>最后，库尔金GoldenCore能怎么帮你？
武汉库尔金GoldenCore是一家中外合资企业，为中国企业带来高端定制化的网站，帮助您在国际化市场中脱颖而出。我们开发了一种构建网站的新方法，帮助企业在市场上脱颖而出，并更好地提高竞争力。
• 获取赢得客户所需要的正确信息。
• 量身定制的客户体验，提升你产品和服务的感知价值。
• 现代工具和技术，为你的团队提供强大支持。
如果你的企业打算扩大市场份额/加深市场信誉度/精准传递你所能提供的价值/一个可以根据你的需求无限制地定制的现代网站/等等，我们可以随时提供帮助。

库尔金Golden Core | 让您的网站拥抱现代化的标准
以上，希望解决了你的问题。
P.S. 最后祝看到这里的朋友们订单爆棚，感谢点个赞同和喜欢~

整页制作


学习了常见的布局方案，将讲解开发一个整页的布局，从规划到制作的整页制作设计图。如图所示。


结构划分与公共样式
首先确定整页的结构该如何划分，这样有利于后期分段进行处理，大概可划分为头部、导航、广告、列表、信息、尾部等模块。
然后提取整页中公共部分的样式，这样做的好处是可以复用样式代码，节省代码量，提高性能。如网页中清除浮动的.clear样式就是公共样式，同样CSS reset部分也是属于公共部分的样式。
结构划分和公共样式都确定好后，可以先通过注释的方式，把区域确定出来，方便后续操作。示例代码如下。


网页模块命名规范
网页模块的命名，如果没有统一的命名规范对其进行必要的约束（自由地命名），会使后续工作难以进行。因此，命名规范很重要，读者应予以重视。通常网页模块的命名需要遵循以下三个原则：
l 命名避免使用中文字符（如id=”内容”）。
l 命名不能以数字开头（如id=”1header”）。
l 命名不能使用关键字（如id=”div”）。
命名应尽量用最少的字母表达含义，使之简明、易懂。
在网页开发中，常用驼峰式命名和帕斯卡命名两种命名方式。其具体解释如下所述。
l 驼峰式命名：除第一个单词后面的单词首字母都要大写，其余小写，如navOne。
l 帕斯卡命名：每个单词之间用“_”连接，如nav_one。
下面列举网页中常用的一些命名。具体如表所示。
表 常用命名

模块	命名	模块	命名
头部	header	标签页	tab
内容	content/container	文章列表	list
尾部	footer	提示信息	msg
导航	nav	小技巧	tips
子导航	subnav	栏目标题	title
侧栏	sidebar	加入	joinus
栏目	column	指南	guild
左右中	left right center	服务	service
登录条	loginbar	注册	regsiter
标志	logo	状态	status
广告	banner	投票	vote
页面主体	main	合作伙伴	partner
热点	hot	CSS文件	命名
新闻	news	主要的	master.css
下载	download	模块	module.css
菜单	menu	基本共用	base.css
子菜单	submenu	布局，版面	layout.css
搜索	search	主题	themes.css
友情链接	frIEndlink	专栏	columns.css
页眉	header	文字	font.css
页脚	footer	表单	forms.css
版权	copyright	补丁	mend.css
滚动	scroll	打印	print.css

头部制作
头部采用固定布局方案，通过Photoshop工具可测量出容器大小为950px。头部包含logo和菜单两部分，其HTML结构实现，示例代码如下。


logo的位置可以通过盒子模型的margin值来控制。菜单的父容器采用右浮动，菜单子项采用左浮动，这样菜单可以采用整体靠右的形式进行排序。菜单项的文字与图标之间的空隙可以通过盒子模型的padding属性来调整。




导航制作
导航部分采用混合布局方式，里面的内容是固定布局，父容器是自适应布局。导航分为左边的主导航、右侧的分享导航和下方的子导航。其实现HTML结构。








主导航整体左浮动，分享导航整体右浮动。这里要注意，主导航有个选中的状态，需要添加一个单独的样式，即active样式。具体代码如下。
整页制作
广告制作
广告主要以图片展示为主，HTML+CSS结构都比较简单，属于一列布局方式，具体代码如下。


展示效果如图所示。


列表制作
列表属于三列固定布局，采用浮动+固定宽的方式来实现。根据不同的展现内容，采用合理的语义化标签展示。其实现HTML结构，代码示例如下。








代码中用到一个CSS3中操作子项的方法，即nth-of-type，这个可以针对一组元素进行不同样式的操作，此操作会在CSS3章节中进行详细讲解，这里暂时先使用一下。
信息制作
消息区域采用两列固定布局来实现。一列靠左，一列靠右，这里HTML+CSS比较简单。








尾部制作
尾部部分与导航部分类似，同样采用混合布局方式，即内容区域采用固定布局，父容器采用自适应布局。




浏览器兼容性

<a href="http://www.zhihu.com/zvideo/1556205583606460416" data-draft-node="block" data-draft-type="link-card">
由于某些因素，不同的浏览器不能完全地采用统一的Web标准，或者说不同的浏览器对于同一个网页有不同的解析。因此会导致同一个网页在不同的浏览器下显示效果可能不同。为了保证页面的统一，往往需要对网页进行浏览器兼容问题的调试。本节将以谷歌、IE两个浏览器为例，对浏览器兼容性问题的调试方法进行详细讲解。
CSS Hack
解决浏览器的兼容性问题，通常需要通过CSS样式来调试，最常用的是CSS Hack。CSS Hack是为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。CSS Hack主要分为CSS选择器Hack和CSS属性Hack两类，下面将详细介绍这两类CSS Hack。
1. CSS选择器Hack
CSS选择器Hack是通过在CSS选择器前，加上只有特定浏览器才能识别的Hack前缀，从而控制不同的CSS样式。针对不同版本的浏览器，选择器Hack分为以下两类：
（1）IE6及IE6以下版本的浏览器可以识别的选择器Hack
编写CSS样式代码时，如果想要此样式只是针对IE6及IE6以下版本的浏览器生效，可以使用IE6及以下版本的选择器Hack，其语法格式如下。
*html 选择器{样式代码}


在Chrome和IE6浏览器中的运行结果分别如图所示。




（2）只有IE7浏览器可以识别的选择器Hack
编写CSS样式代码时，如果此样式只是针对IE7浏览器生效，可以使用只有IE7识别的选择器Hack，其语法格式如下。
*+html 选择器{样式代码}




2. CSS属性Hack
CSS属性Hack是通过在CSS属性名前加上只有特定浏览器才能识别的Hack前缀，如“_size：300px”中的Hack前缀“_”只对IE6浏览器生效。下面介绍针对不同版本的浏览器，CSS属性Hack中的两类：
（1）IE6及IE6以下版本的浏览器可以识别的属性Hack
编写CSS样式代码时，如果想要此样式只对IE6及IE6以下版本的浏览器生效，可以使用IE6及IE6以下版本的CSS属性Hack，其语法格式如下：
_属性：样式代码;
（2） IE7及IE7以下版本的浏览器可以识别的属性Hack
编写CSS样式代码时，如果想要此样式只对IE7及IE7以下版本的浏览器生效，可以使用IE7及IE7以下版本的CSS属性Hack，其语法格式如下。
+或*属性：样式代码;




注意：
CSS Hack能够针对不同的浏览器编写不同的CSS样式代码，从而实现兼容最大化。但当多次重复定义CSS样式时，浏览器会默认执行最后定义的样式，因此，在使用CSS Hack时，一定要按照浏览器版本从高到低的顺序编写样式。
下面列举一些CSS Hack，如表10.2和表10.3所示。以方便读者查看。
表10.2 选择器Hack

选择器Hack写法	针对的浏览器
@media screen\9{body{样式代码}}	只对IE6/IE7有效
@media \0screen{body{样式代码}}	只对IE8有效
@media \0screen\,screen\9{body{样式代码}}	只对IE6/IE7/IE8有效
@media screen\0{body{样式代码}}	只对IE8/IE9/IE10有效
@media csreen and (-ms-high-contrast:active), (-ms-high-contrast:name){body{样式代码}}	只对IE10有效

表10.3 属性Hack

CSS属性Hack(前缀)	针对的浏览器
_color:red;	IE6及其以下的版本
*color:red;或+color:red;	IE7及其以下的版本
color:red\9	IE6\IE7\IE8\IE9\IE10版本
color:red\0	IE8/IE9/IE10版本
color:red\0\9	IE9\IE10
color:red!important	IE7\IE8\IE9\IE10及其他非IE浏览器

IE条件注释语句
在开发中，IE浏览器的兼容性问题比较多，经常需要对其兼容性进行调试，因此，微软官方专门提供了“IE条件注释语句”。“IE条件注释语句”是专门针对IE浏览器的Hack，对于不同版本的IE浏览器，编写方法也不同。其主要包括判断浏览器类型的条件注释语句和判断IE版本的条件注释语句。其具体介绍如下。
1. 判断浏览器类型的条件注释语句
判断浏览器类型的条件注释语句用于判断浏览器类型是否为IE浏览器，其基本语法格式如下。


其中，第一行中的IE代表浏览器的类型，表示该条件注释语句只能被IE浏览器识别。
2. 判断IE版本的条件注释语句
判断IE版本的条件注释语句用于判断IE浏览器的版本，其基本语法格式如下。


其中，第一行的IE7代表IE浏览器的版本号，表示该注释语句只能被当前IE版本浏览器识别。
下面列举一些常用的IE条件注释语句，如表所示。
表 IE条件注释语句

IE条件注释语句	针对的浏览器版本
<!—[if lt IE7]>内容<![endif]-->	IE7以下的版本
<!—[if lte IE7]>内容<![endif]-->	IE7及其以下的版本
<!—[if gt IE7]>内容<![endif]-->	IE7以上版本
<!—[if gte IE7]>内容<![endif]-->	IE7及其以上版本
<!—[if !IE7]>内容<![end if]-->	非IE7版本
<!—[if !IE]><!-->内容<!--<![endif]-->	非IE浏览器

表中出现了lt、lte、gt、gte和！等字母符号。
l gt(greater than)：选择条件版本以上版本，不包含条件版本；
l lt(less than)：选择条件版本以下版本，不包含条件版本；
l gte(greater than or equal)：选择条件版本以上版本，包含条件版本；
l lte(less than or equal)：选择条件版本以下版本，包含条件版本；
l !：选择条件版本以外的所有版本，无论高低；
常见IE6浏览器的兼容性问题
在实际开发工作中，出现浏览器兼容性问题比较多的浏览器是IE6浏览器，举一些常见的IE6浏览器兼容性问题及其解决方法。
1. IE6显示多余字符问题
在IE6浏览器中，当两个浮动元素之间加入HTML注释时，会产生多余字符。




解决IE6浏览器的兼容问题，有三个解决方法，具体如下：
l 删除HTML注释；
l 在产生多余字符的标签的CSS样式中添加“position:relative”样式；
l 不设置浮动div的宽度；
2. IE6浏览器中元素最小高度的问题
IE6浏览器有默认的最小像素高度19px，因此它无法识别19px以下的高度值。




解决这个问题有两种方法，具体如下。
l 为元素定义“overflow:hidden”样式，通过这个样式，将超出的部分隐藏；
l 为元素定义“font-size:0”样式；
两种方法都可以解决IE6浏览器不能识别低于19px高度的问题，但第二种方法会妨碍字体大小的设置，因此建议使用第一种方法。
3. IE6浏览器中浮动元素的双倍外边距问题
在制作网页时，经常出现IE6浏览器浮动的双倍外边距问题，即设置浮动元素的左外边距或右外边距时，在IE6浏览器中运行，元素对应的左外边距或右外边距是所设置值的两倍。




IE6浏览器中元素的左外边距是在Chrome浏览器中左外边距的两倍。IE6浏览器中的双倍外边距问题可以通过为元素定义“display：inline”CSS演示解决。例中在box2的CSS样式中添加代码如下。
_display:inline;
可以看到，在上述代码中加了只针对IE6浏览器的CSS属性Hack前缀“_”，这是因为只有IE6浏览器有这个兼容问题。
4. IE6中3px间距问题
当非浮动元素或者文本在一个浮动元素之后，运行在IE6浏览器中时，非浮动元素或文本与浮动元素之间会有3px的间距，这就是典型的IE6的3px间距问题。




在Chrome浏览器中正常显示，在IE6浏览器中，文本和浮动盒子之间会有3px间距。可以通过为浮动元素设置负外边距的方法解决IE6浏览器中的这个问题。在例10-17的CSS样式中提添加代码，具体代码如下。
_margin-right:-3px; /*这里要使用只有IE6识别的属性Hack*/
5. IE6中图片底部的像素间隙问题
一张图片插入到与其大小相同的元素中，当在IE6浏览器中显示时，图片底部会有3px的间隙。




解决这种IE6浏览器的兼容性问题有以下两种解决方法。
（1）<img>标签与<div>标签放在同一行，如例中，将第11行和第12行代码合成一行，具体示例如下。


（2）为<img>定义“display：block”样式，具体示例如下。


为了便于阅读，在实际开发中常建议使用第二种方法。

一设计：首先你要确定网页的主题内容，然后根据主题构建方案，再收集文字、音频、视频、图片、所需的素材。
二制作：使用Dreamweaver、sublimetext3等软件制作网页，根据制作过程的需要安排素材加工制作。
三调试：网页制作完成后需要对网页在浏览中打开，检查网页是否有bug等，再争对发现的问题进行修改。
四后期调整优化:网页制作完成后，需要对网页内容优化和调整，以保持网页的美观和科学。

网页制作的方法和步骤：网站调研-网站设计-网站开发-网站测试-网站上线