本文记录了一位没有任何网页创作背景的作者，如何利用Github创建个人主页的过程。作者选择了Adobe Dreamweaver进行编辑，通过7天免费试用来实现实时预览功能。文章详细介绍了从选择模板、编辑HTML代码到添加内容的步骤，包括设置标题、导入CSS样式、放置图片等。此外，还分享了如何将作品上传至Github以及在Dreamweaver中修改代码的技巧。
写在前面
本作者无任何网页创作知识背景，如果有哪里写得不太合适还请见谅。
昨天交了阶段工作汇报于是最近可以休息几天，为了不至于每天无所事事，决定创建自己的个人主页（其实已经想做很久了）。
昨天找了一天，看编辑html的页面也像乱码一样...还一时冲动冲了优快云的会员（当事人十分后悔）。今天主页终于有了初步的样子，事实证明搜索信息还是需要有耐心多找找...
放图
1 创建个人网站
参考这篇文章 📡使用Github做一个完全免费的个人网站(步骤很细) - 知乎 (zhihu.com)
2 编辑内容
我选择使用adobe的Dreamweaver，有7天免费试用期，够用了，主要是可以看到实时视图，一边编辑一边看效果，对新手小白十分友好。
2-1 下载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>个人主页 </span></p>
</div>
<div class="profilePhoto">
<!-- Profile photo -->
<img src="证件照.jpg" width="200"> </div>
<!-- Identity details -->
<section class="profileHeader">
<h1> </h1>
<h1>姓名</h1>
<h3>文字</h3>
<hr>
<p>文字</p>
<p>QQ： </p>
<p>Email： </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">教育经历 </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">科研经历 </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: 微软雅黑">
</p>
</div>
</section>
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">研究方向 </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: 微软雅黑"> </p>
</div>
</section>
</section>
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">发表文章 </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: 微软雅黑"> </p>
</div>
</section>
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">奖学金 </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">学生工作&所获荣誉 </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: 微软雅黑"> </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"> 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: 微软雅黑"> 最近更新：2022.7.31
<p class="footerDisclaimer">2022 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
扫一扫
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
