github | html纯小白也可以创建静态个人主页

2023-10-08 15:59

本文主要是介绍github | html纯小白也可以创建静态个人主页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

写在前面

本作者无任何网页创作知识背景,如果有哪里写得不太合适还请见谅。

昨天交了阶段工作汇报于是最近可以休息几天,为了不至于每天无所事事,决定创建自己的个人主页(其实已经想做很久了)

昨天找了一天,看编辑html的页面也像乱码一样...还一时冲动冲了CSDN的会员(当事人十分后悔)。今天主页终于有了初步的样子,事实证明搜索信息还是需要有耐心多找找...

放图

 1 创建个人网站

参考这篇文章 📡使用Github做一个完全免费的个人网站(步骤很细) - 知乎 (zhihu.com)

2 编辑内容

我选择使用adobe的Dreamweaver,有7天免费试用期,够用了,主要是可以看到实时视图,一边编辑一边看效果,对新手小白十分友好。

2-1 下载Dreamweaver

    链接:网站设计软件 | Adobe Dreamweaver

    没有什么奇怪的选项,放心大胆下就好了

2-2 开始在dw中编辑内容

首先,打开Dreamweaver,选择起始模板——响应式 关于页面模板(有简历的模板但是我不太喜欢那个格式于是就用这个了)

点开后会显示初始代码,我直接把我的代码放在这里来写注释了,可以两边一起看着对比修改
 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>某人 - Homepage</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<link rel="Shortcut Icon" href="图标.ico" type="image/x-icon" /><!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
</head><body>
<!-- Header content -->
<header><div class="profileLogo"> <!-- Profile logo. Add a img tag in place of <span>. --><p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>个人主页&nbsp;</span></p></div><div class="profilePhoto"> <!-- Profile photo --> <img src="证件照.jpg" width="200"> </div><!-- Identity details --><section class="profileHeader"><h1>&nbsp;</h1><h1>姓名</h1>
<h3>文字</h3><hr><p>文字</p><p>QQ:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p><p>Email:&nbsp;</p></section><!-- Links to Social network accounts --><aside class="socialNetworkNavBar"><div class="socialNetworkNav"> <!-- Add a Anchor tag with nested img tag here -->      </div><div class="socialNetworkNav"> <!-- Add a Anchor tag with nested img tag here -->      </div><div class="socialNetworkNav"> <!-- Add a Anchor tag with nested img tag here -->      </div><div class="socialNetworkNav"> <!-- Add a Anchor tag with nested img tag here -->      </div></aside>
</header>
<!-- content -->
<section class="mainContent"> <!-- Contact details --></section><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">教育经历&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-至今 :</span> 大学</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2017.9-2020.6 :</span> 高级中学</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2014.9-2017.6 :</span> 中学</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2008.9-2014.6 :</span> 小学</p></div></section><!-- Previous experience details --><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">科研经历&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2022.5-至今 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">&nbsp;</p></div></section><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">研究方向&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">&nbsp;</p></div></section></section><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">发表文章&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">&nbsp;</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">&nbsp;</p></div></section><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">奖学金&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.10&2021.12 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.10 :</span> 文字</p></div></section></section><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">学生工作&所获荣誉&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2021.9-2022.7 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-2021.7 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-至今 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">&nbsp;</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span> 2022.3 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span> 2021.5 & 2022.5 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span> 2021.5 & 2022.5 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span> 2021.5 & 2022.5 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span> 2021.12 :</span> 文字</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span> 2020.10 :</span> 文字</p></div></section><!-- Replicate the above Div block to add more title and company details --> <footer><hr><p style="font-size: 15px;color: darkgray;font-family: 微软雅黑"> <span id="context">&nbsp; &nbsp; &nbsp; Related Links: <a href="链接" target="_blank" id="node">USTC</a> | <a href="链接" target="_blank" id="node">School of ESS of USTC</a> | <a href="链接" target="_blank" id="node">Laboratory</a> | </span></p><p style="font-size: 15px;color: darkgray;font-family: 微软雅黑"> &nbsp; &nbsp; &nbsp; 最近更新:2022.7.31<p class="footerDisclaimer">2022&nbsp; Copyrights - <span>All Rights Reserved</span></p></footer>
</body>
</html>

简单理解:

<p>后面的都是可以修改的文字

<p>里面fontsize是字体大小,color为颜色,fontfamily是文字样式

里面涉及的icon和证件照在dreamweaver里显示的话需要用电脑中的文件地址

2-3 将在dw中写好的代码放到index.html中,并稍作修改

修改:

①将上面用到的aboutPageStyle.css,icon和证件照上载到上图页面(通过点击Add file)

②将代码中的文件地址(即上述三个文件的地址)改为在上图页面中的 文件名.格式

4 一些参考

jpg格式转icon:免费在线ico转换器, 在线free 在线ico convert转换器 - Office-Converter.com

(7 封私信 / 36 条消息) 如何制作个人学术主页? - 知乎 (zhihu.com)

熟练之后也可以参考这个来改academicpages is a ready-to-fork GitHub Pages template for academic personal websites - Your Name / Site Title

这篇关于github | html纯小白也可以创建静态个人主页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/166428

相关文章

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框